rendering settings

public/app/core/components/FormSwitch/FormSwitch.tsx

+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+
+export interface Props {
+  label: string;
+  checked: boolean;
+  labelClass?: string;
+  switchClass?: string;
+  onChange: (event) => any;
+}
+
+export interface State {
+  id: any;
+}
+
+export class FormSwitch extends PureComponent<Props, State> {
+  state = {
+    id: _.uniqueId(),
+  };
+
+  internalOnChange = event => {
+    event.stopPropagation();
+
+    this.props.onChange(event);
+  };
+
+  render() {
+    const { labelClass, switchClass, label, checked } = this.props;
+    const labelId = `check-${this.state.id}`;
+    const labelClassName = `gf-form-label ${labelClass} pointer`;
+    const switchClassName = `gf-form-switch ${switchClass}`;
+
+    return (
+      <div className="gf-form">
+        {label && (
+          <label htmlFor={labelId} className={labelClassName}>
+            {label}
+          </label>
+        )}
+        <div className={switchClassName}>
+          <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
+          <label htmlFor={labelId} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default FormSwitch;

public/app/features/datasources/DataSourceHttpSettings.tsx

 import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import { DataSource } from 'app/types';
+import FormSwitch from '../../core/components/FormSwitch/FormSwitch';
 
 interface Props {
-  access: any;
-  basicAuth: any;
+  dataSource: DataSource;
   showAccessOption: any;
   tlsAuth: any;
   tlsAuthWithCACert: any;
   tlsCACert: any;
   tlsClientCert: any;
   tlsClientKey: any;
-  url: any;
 }
 
 interface State {
   basicAuthUser: string;
   basicAuthPassword: string;
   showAccessHelp: boolean;
+  url: string;
+  access: string;
 }
 
-export default class DataSourceHttpSettings extends PureComponent<Props, State> {
-  state = {
-    basicAuthUser: '',
-    basicAuthPassword: '',
+export class DataSourceHttpSettings extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      url: '',
+      basicAuthUser: props.dataSource.basicAuthUser,
+      basicAuthPassword: props.dataSource.basicAuthPassword,
       showAccessHelp: false,
+      access: '',
+    };
+  }
+
+  onToggleAccessHelp = () => {
+    this.setState(prevState => ({
+      showAccessHelp: !prevState.showAccessHelp,
+    }));
+  };
+
+  onUrlChange = event => {
+    this.setState({
+      url: event.target.value,
+    });
   };
 
-  onToggleAccessHelp = () => {};
+  onAccessChange = event => {
+    this.setState({
+      access: event.target.value,
+    });
+  };
+
+  onBasicAuthChange = event => {
+    console.log(event);
+  };
+
+  onWithCredentialsChange = event => {
+    console.log(event);
+  };
+
+  onTlsAuthChange = event => {
+    console.log(event);
+  };
+
+  onTlsAuthWithCACertChange = event => {
+    console.log(event);
+  };
+
+  onTlsSkipVerifyChange = event => {
+    console.log(event);
+  };
 
   render() {
     const {
-      access,
-      basicAuth,
+      dataSource,
       showAccessOption,
       tlsAuth,
       tlsAuthWithCACert,
       tlsCACert,
       tlsClientCert,
       tlsClientKey,
-      url,
     } = this.props;
 
-    const { showAccessHelp, basicAuthUser, basicAuthPassword } = this.state;
+    const { access, showAccessHelp, basicAuthUser, basicAuthPassword, url } = this.state;
 
-    // const accessOptions = [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}];
+    const accessOptions = [{ key: 'proxy', value: 'Server (Default)' }, { key: 'direct', value: 'Browser' }];
 
     return (
       <div className="gf-form-group">
@@ -51,24 +94,38 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State>
           <div className="gf-form-inline">
             <div className="gf-form max-width-30">
               <span className="gf-form-label width-10">URL</span>
-              <input className="gf-form-input" type="text" value={url} placeholder="https://localhost:9090" />
+              <input
+                className="gf-form-input"
+                type="text"
+                value={url}
+                onChange={this.onUrlChange}
+                placeholder="https://localhost:9090"
+              />
             </div>
           </div>
           {showAccessOption && (
             <div className="gf-form-inline">
               <div className="gf-form max-width-30">
                 <span className="gf-form-label width-10">Access</span>
-                <div className="gf-form-select-wrapper max-width-24" />
+                <select className="width-20" value={access} onChange={this.onAccessChange}>
+                  {accessOptions.map(option => {
+                    return (
+                      <option key={option.key} value={option.key}>
+                        {option.value}
+                      </option>
+                    );
+                  })}
+                </select>
               </div>
               <div className="gf-form">
                 <label className="gf-form-label query-keyword pointer" onClick={this.onToggleAccessHelp}>
                   Help&nbsp;
-                  {showAccessHelp && <i className="fa fa-caret-down" />}
-                  {!showAccessHelp && <i className="fa fa-caret-right">&nbsp;</i>}
+                  {showAccessHelp ? <i className="fa fa-caret-down" /> : <i className="fa fa-caret-right">&nbsp;</i>}
                 </label>
               </div>
             </div>
           )}
+        </div>
 
         {showAccessHelp && (
           <div className="grafana-info-box m-t-2">
@@ -88,9 +145,9 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State>
             </p>
             <div className="alert-title">Browser access mode:</div>
             <p>
-                All requests will be made from the browser directly to the data source and may be subject to
-                Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if
-                you select this access mode.
+              All requests will be made from the browser directly to the data source and may be subject to Cross-Origin
+              Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this
+              access mode.
             </p>
           </div>
         )}
@@ -104,12 +161,56 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State>
 
         <h3 className="page-heading">Auth</h3>
         <div className="gf-form-group">
-            <div className="gf-form-inline" />
-            <div className="gf-form-inline" />
-            <div className="gf-form-inline" />
+          <div className="gf-form-inline">
+            <FormSwitch
+              onChange={this.onBasicAuthChange}
+              label="Basic auth"
+              checked={dataSource.basicAuth}
+              labelClass="width-10"
+              switchClass="max-width-6"
+            />
+            <FormSwitch
+              label="With credentials"
+              checked={dataSource.withCredentials}
+              onChange={this.onWithCredentialsChange}
+              labelClass="width-10"
+              switchClass="max-width-6"
+            />
+          </div>
+          <div className="gf-form-inline">
+            {dataSource.jsonData && [
+              <FormSwitch
+                key="TLS CLient Auth"
+                label="TLS CLient Auth"
+                checked={dataSource.jsonData.authType === 'tlsAuth'}
+                onChange={this.onTlsAuthChange}
+                labelClass="width-10"
+                switchClass="max-width-6"
+              />,
+              <FormSwitch
+                key="With CA Cert"
+                label="With CA Cert"
+                checked={dataSource.jsonData.authType === 'tlsAuthWithCACert'}
+                onChange={this.onTlsAuthWithCACertChange}
+                labelClass="width-10"
+                switchClass="max-width-6"
+              />,
+            ]}
+          </div>
+        </div>
+        <div className="gf-form-inline">
+          {dataSource.jsonData && (
+            <FormSwitch
+              label="Skip TLS Verify"
+              checked={dataSource.jsonData.authType === 'tlsSkipVerify'}
+              onChange={this.onTlsSkipVerifyChange}
+              labelClass="width-10"
+              switchClass="max-width-6"
+            />
+          )}
         </div>
 
-          {basicAuth && (
+        {dataSource.basicAuth && (
           <div className="gf-form-group">
             <h6>Basic Auth Details</h6>
             <div className="gf-form">
@@ -217,7 +318,14 @@ export default class DataSourceHttpSettings extends PureComponent<Props, State>
             </div>
           )}
       </div>
-      </div>
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    dataSource: state.dataSources.dataSource,
+  };
+}
+
+export default connect(mapStateToProps)(DataSourceHttpSettings);

public/app/features/datasources/DataSourceSettings.tsx

@@ -86,7 +86,6 @@ export class DataSourceSettings extends PureComponent<Props, State> {
       tlsCACert: {},
       tlsClientCert: {},
       tlsClientKey: {},
-      url: {},
     };
 
     return (
@@ -135,6 +134,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
               to update this datasource.
             </div>
           )}
+          <DataSourceHttpSettings {...props} />
           <div className="gf-form-button-row">
             <button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}>
               Save &amp; Test
@@ -147,7 +147,6 @@ export class DataSourceSettings extends PureComponent<Props, State> {
             </a>
           </div>
         </form>
-        <DataSourceHttpSettings {...props} />
       </div>
     );
   }

public/app/features/datasources/__mocks__/dataSourcesMocks.ts

@@ -29,6 +29,9 @@ export const getMockDataSource = (): DataSource => {
   return {
     access: '',
     basicAuth: false,
+    basicAuthUser: '',
+    basicAuthPassword: '',
+    withCredentials: false,
     database: '',
     id: 13,
     isDefault: false,

public/app/features/datasources/state/navModel.ts

@@ -48,6 +48,9 @@ export function getDataSourceLoadingNav(pageName: string): NavModel {
     {
       access: '',
       basicAuth: false,
+      basicAuthUser: '',
+      basicAuthPassword: '',
+      withCredentials: false,
       database: '',
       id: 1,
       isDefault: false,

public/app/types/datasources.ts

@@ -35,9 +35,12 @@ export interface DataSource {
   user: string;
   database: string;
   basicAuth: boolean;
+  basicAuthPassword: string;
+  basicAuthUser: string;
   isDefault: boolean;
   jsonData: { authType: string; defaultRegion: string };
   readOnly: boolean;
+  withCredentials: boolean;
 }
 
 export interface DataSourcesState {