From e642fce4a5070fb0b4db61ac2e8a13995e1fa91a Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 12 Oct 2018 16:16:06 +0200
Subject: [PATCH 01/25] created component for http settings

---
 .../components/InfoPopover/InfoPopover.tsx    |   7 +
 .../datasources/DataSourceHttpSettings.tsx    | 223 ++++++++++++++++++
 .../datasources/DataSourceSettings.tsx        |  58 ++++-
 .../datasources/EditDataSourcePage.test.tsx   |  74 ++++++
 .../datasources/EditDataSourcePage.tsx        |  10 +-
 .../EditDataSourcePage.test.tsx.snap          |  27 +++
 public/app/routes/routes.ts                   |   5 -
 7 files changed, 386 insertions(+), 18 deletions(-)
 create mode 100644 public/app/core/components/InfoPopover/InfoPopover.tsx
 create mode 100644 public/app/features/datasources/DataSourceHttpSettings.tsx
 create mode 100644 public/app/features/datasources/EditDataSourcePage.test.tsx
 create mode 100644 public/app/features/datasources/__snapshots__/EditDataSourcePage.test.tsx.snap

diff --git a/public/app/core/components/InfoPopover/InfoPopover.tsx b/public/app/core/components/InfoPopover/InfoPopover.tsx
new file mode 100644
index 00000000000..eb08349aef1
--- /dev/null
+++ b/public/app/core/components/InfoPopover/InfoPopover.tsx
@@ -0,0 +1,7 @@
+import React, { SFC } from 'react';
+interface Props {}
+const InfoPopover: SFC<Props> = props => {
+  return <div />;
+};
+
+export default InfoPopover;
diff --git a/public/app/features/datasources/DataSourceHttpSettings.tsx b/public/app/features/datasources/DataSourceHttpSettings.tsx
new file mode 100644
index 00000000000..1112d048d0f
--- /dev/null
+++ b/public/app/features/datasources/DataSourceHttpSettings.tsx
@@ -0,0 +1,223 @@
+import React, { PureComponent } from 'react';
+
+interface Props {
+  access: any;
+  basicAuth: any;
+  showAccessOption: any;
+  tlsAuth: any;
+  tlsAuthWithCACert: any;
+  tlsCACert: any;
+  tlsClientCert: any;
+  tlsClientKey: any;
+  url: any;
+}
+
+interface State {
+  basicAuthUser: string;
+  basicAuthPassword: string;
+  showAccessHelp: boolean;
+}
+
+export default class DataSourceHttpSettings extends PureComponent<Props, State> {
+  state = {
+    basicAuthUser: '',
+    basicAuthPassword: '',
+    showAccessHelp: false,
+  };
+
+  onToggleAccessHelp = () => {};
+
+  render() {
+    const {
+      access,
+      basicAuth,
+      showAccessOption,
+      tlsAuth,
+      tlsAuthWithCACert,
+      tlsCACert,
+      tlsClientCert,
+      tlsClientKey,
+      url,
+    } = this.props;
+
+    const { showAccessHelp, basicAuthUser, basicAuthPassword } = this.state;
+
+    // const accessOptions = [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}];
+
+    return (
+      <div className="gf-form-group">
+        <h3 className="page-heading">HTTP</h3>
+        <div className="gf-form-group">
+          <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" />
+            </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" />
+              </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>}
+                </label>
+              </div>
+            </div>
+          )}
+
+          {showAccessHelp && (
+            <div className="grafana-info-box m-t-2">
+              <p>
+                Access mode controls how requests to the data source will be handled.
+                <strong>
+                  <i>Server</i>
+                </strong>{' '}
+                should be the preferred way if nothing else stated.
+              </p>
+              <div className="alert-title">Server access mode (Default):</div>
+              <p>
+                All requests will be made from the browser to Grafana backend/server which in turn will forward the
+                requests to the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS)
+                requirements. The URL needs to be accessible from the grafana backend/server if you select this access
+                mode.
+              </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.
+              </p>
+            </div>
+          )}
+          {access === 'proxy' && (
+            <div className="gf-form-inline">
+              <div className="gf-form">
+                <span className="gf-form-label width-10">Whitelisted Cookies</span>
+              </div>
+            </div>
+          )}
+
+          <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>
+
+          {basicAuth && (
+            <div className="gf-form-group">
+              <h6>Basic Auth Details</h6>
+              <div className="gf-form">
+                <span className="gf-form-label width-10">User</span>
+                <input className="gf-form-input max-width-21" type="text" value={basicAuthUser} placeholder="User" />
+              </div>
+              <div className="gf-form">
+                <span className="gf-form-label width-10">Password</span>
+                <input
+                  className="gf-form-input max-width-21"
+                  type="password"
+                  value={basicAuthPassword}
+                  placeholder="Password"
+                />
+              </div>
+            </div>
+          )}
+
+          {(tlsAuth || tlsAuthWithCACert) &&
+            access === 'proxy' && (
+              <div className="gf-form-group">
+                <div className="gf-form">
+                  <h6>TLS Auth Details</h6>
+                </div>
+                {tlsAuthWithCACert && (
+                  <div>
+                    <div className="gf-form-inline">
+                      <div className="gf-form gf-form--v-stretch">
+                        <label className="gf-form-label width-7">CA Cert</label>
+                      </div>
+                      {!tlsCACert && (
+                        <div className="gf-form gf-form--grow">
+                          <textarea
+                            rows={7}
+                            className="gf-form-input gf-form-textarea"
+                            value={tlsCACert}
+                            placeholder="Begins with -----BEGIN CERTIFICATE-----"
+                          />
+                        </div>
+                      )}
+                      {tlsCACert && (
+                        <div className="gf-form">
+                          <input type="text" className="gf-form-input max-width-12" value="configured" />
+                          <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
+                            reset
+                          </a>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {tlsAuth && (
+                  <div>
+                    <div className="gf-form-inline">
+                      <div className="gf-form gf-form--v-stretch">
+                        <label className="gf-form-label width-7">Client Cert</label>
+                      </div>
+                      {!tlsClientCert && (
+                        <div className="gf-form gf-form--grow">
+                          <textarea
+                            rows={7}
+                            className="gf-form-input gf-form-textarea"
+                            value={tlsClientCert}
+                            placeholder="Begins with -----BEGIN CERTIFICATE-----"
+                            required
+                          />
+                        </div>
+                      )}
+                      {tlsClientCert && (
+                        <div className="gf-form">
+                          <input type="text" className="gf-form-input max-width-12" value="configured" />
+                          <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
+                            reset
+                          </a>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="gf-form-inline">
+                      <div className="gf-form gf-form--v-stretch">
+                        <label className="gf-form-label width-7">Client Key</label>
+                      </div>
+                      {tlsClientKey && (
+                        <div className="gf-form gf-form--grow">
+                          <textarea
+                            rows={7}
+                            className="gf-form-input gf-form-textarea"
+                            value={tlsClientKey}
+                            placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
+                          />
+                        </div>
+                      )}
+                      {tlsClientKey && (
+                        <div className="gf-form">
+                          <input type="text" className="gf-form-input max-width-12" value="configured" />
+                          <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
+                            reset
+                          </a>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/features/datasources/DataSourceSettings.tsx b/public/app/features/datasources/DataSourceSettings.tsx
index f7d641d34b0..e86a6996b17 100644
--- a/public/app/features/datasources/DataSourceSettings.tsx
+++ b/public/app/features/datasources/DataSourceSettings.tsx
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { DataSource, Plugin } from 'app/types';
+import DataSourceHttpSettings from './DataSourceHttpSettings';
 
 export interface Props {
   dataSource: DataSource;
@@ -8,6 +9,7 @@ export interface Props {
 }
 interface State {
   name: string;
+  showNamePopover: boolean;
 }
 
 enum DataSourceStates {
@@ -16,13 +18,10 @@ enum DataSourceStates {
 }
 
 export class DataSourceSettings extends PureComponent<Props, State> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      name: props.dataSource.name,
-    };
-  }
+  state = {
+    name: this.props.dataSource.name,
+    showNamePopover: false,
+  };
 
   onNameChange = event => {
     this.setState({
@@ -39,6 +38,12 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     console.log(event);
   };
 
+  onTogglePopover = () => {
+    this.setState(prevState => ({
+      showNamePopover: !prevState.showNamePopover,
+    }));
+  };
+
   isReadyOnly() {
     return this.props.dataSource.readOnly === true;
   }
@@ -70,11 +75,22 @@ export class DataSourceSettings extends PureComponent<Props, State> {
   }
 
   render() {
-    const { name } = this.state;
+    const { name, showNamePopover } = this.state;
+
+    const props = {
+      access: {},
+      basicAuth: {},
+      showAccessOption: {},
+      tlsAuth: {},
+      tlsAuthWithCACert: {},
+      tlsCACert: {},
+      tlsClientCert: {},
+      tlsClientKey: {},
+      url: {},
+    };
 
     return (
       <div>
-        <h3 className="page-sub-heading">Settings</h3>
         <form onSubmit={this.onSubmit}>
           <div className="gf-form-group">
             <div className="gf-form-inline">
@@ -84,10 +100,31 @@ export class DataSourceSettings extends PureComponent<Props, State> {
                   className="gf-form-input max-width-23"
                   type="text"
                   value={name}
-                  placeholder="name"
+                  placeholder="Name"
                   onChange={this.onNameChange}
                   required
                 />
+                <div onClick={this.onTogglePopover}>
+                  <i className="fa fa-info-circle" />
+                </div>
+                {showNamePopover && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      left: '450px',
+                      top: '-20px',
+                      padding: '10px',
+                      backgroundColor: 'black',
+                      zIndex: 2,
+                      width: '300px',
+                      border: '1px solid gray',
+                      borderRadius: '3px',
+                    }}
+                  >
+                    The name is used when you select the data source in panels. The <em>Default</em> data source is
+                    preselected in new panels.
+                  </div>
+                )}
               </div>
             </div>
           </div>
@@ -110,6 +147,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
             </a>
           </div>
         </form>
+        <DataSourceHttpSettings {...props} />
       </div>
     );
   }
diff --git a/public/app/features/datasources/EditDataSourcePage.test.tsx b/public/app/features/datasources/EditDataSourcePage.test.tsx
new file mode 100644
index 00000000000..9efbfd541fa
--- /dev/null
+++ b/public/app/features/datasources/EditDataSourcePage.test.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EditDataSourcePage, Props } from './EditDataSourcePage';
+import { DataSource, NavModel } from '../../types';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    navModel: {} as NavModel,
+    dataSource: {} as DataSource,
+    dataSourceId: 1,
+    pageName: '',
+    loadDataSource: jest.fn(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  const wrapper = shallow(<EditDataSourcePage {...props} />);
+  const instance = wrapper.instance() as EditDataSourcePage;
+
+  return {
+    wrapper,
+    instance,
+  };
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const { wrapper } = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render permissions page', () => {
+    const { wrapper } = setup({
+      pageName: 'permissions',
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe('Functions', () => {
+  describe('is page valid', () => {
+    it('should be a valid page', () => {
+      const { instance } = setup();
+
+      expect(instance.isValidPage('permissions')).toBeTruthy();
+    });
+
+    it('should not be a valid page', () => {
+      const { instance } = setup();
+
+      expect(instance.isValidPage('asdf')).toBeFalsy();
+    });
+  });
+
+  describe('get current page', () => {
+    it('should return permissions', () => {
+      const { instance } = setup({
+        pageName: 'permissions',
+      });
+
+      expect(instance.getCurrentPage()).toEqual('permissions');
+    });
+
+    it('should return settings if bogus route', () => {
+      const { instance } = setup({
+        pageName: 'asdf',
+      });
+
+      expect(instance.getCurrentPage()).toEqual('settings');
+    });
+  });
+});
diff --git a/public/app/features/datasources/EditDataSourcePage.tsx b/public/app/features/datasources/EditDataSourcePage.tsx
index 1c7e67de0b9..18eefd8da9f 100644
--- a/public/app/features/datasources/EditDataSourcePage.tsx
+++ b/public/app/features/datasources/EditDataSourcePage.tsx
@@ -3,6 +3,7 @@ import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import PageHeader from '../../core/components/PageHeader/PageHeader';
 import DataSourcePermissions from './DataSourcePermissions';
+import DataSourceSettings from './DataSourceSettings';
 import { DataSource, NavModel } from 'app/types';
 import { loadDataSource } from './state/actions';
 import { getNavModel } from '../../core/selectors/navModel';
@@ -24,6 +25,8 @@ enum PageTypes {
   Dashboards = 'dashboards',
 }
 
+const fallBackPage = PageTypes.Settings;
+
 export class EditDataSourcePage extends PureComponent<Props> {
   componentDidMount() {
     this.fetchDataSource();
@@ -39,12 +42,13 @@ export class EditDataSourcePage extends PureComponent<Props> {
 
   getCurrentPage() {
     const currentPage = this.props.pageName;
-
-    return this.isValidPage(currentPage) ? currentPage : PageTypes.Permissions;
+    return this.isValidPage(currentPage) ? currentPage : fallBackPage;
   }
 
   renderPage() {
     switch (this.getCurrentPage()) {
+      case PageTypes.Settings:
+        return <DataSourceSettings />;
       case PageTypes.Permissions:
         return <DataSourcePermissions />;
     }
@@ -65,7 +69,7 @@ export class EditDataSourcePage extends PureComponent<Props> {
 }
 
 function mapStateToProps(state) {
-  const pageName = getRouteParamsPage(state.location) || PageTypes.Permissions;
+  const pageName = getRouteParamsPage(state.location) || fallBackPage;
   const dataSourceId = getRouteParamsId(state.location);
   const dataSourceLoadingNav = getDataSourceLoadingNav(pageName);
 
diff --git a/public/app/features/datasources/__snapshots__/EditDataSourcePage.test.tsx.snap b/public/app/features/datasources/__snapshots__/EditDataSourcePage.test.tsx.snap
new file mode 100644
index 00000000000..7eee977737f
--- /dev/null
+++ b/public/app/features/datasources/__snapshots__/EditDataSourcePage.test.tsx.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <Connect(DataSourceSettings) />
+  </div>
+</div>
+`;
+
+exports[`Render should render permissions page 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <Connect(DataSourcePermissions) />
+  </div>
+</div>
+`;
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index 9aa57b76043..632d921103a 100644
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@@ -73,11 +73,6 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
         component: () => DataSourcesListPage,
       },
     })
-    .when('/datasources/edit/:id', {
-      templateUrl: 'public/app/features/plugins/partials/ds_edit.html',
-      controller: 'DataSourceEditCtrl',
-      controllerAs: 'ctrl',
-    })
     .when('/datasources/edit/:id/dashboards', {
       templateUrl: 'public/app/features/plugins/partials/ds_dashboards.html',
       controller: 'DataSourceDashboardsCtrl',

From 7c3d101253ea3fa57809fb5a401956153fcec66e Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 15 Oct 2018 16:45:39 +0200
Subject: [PATCH 02/25] rendering settings

---
 .../core/components/FormSwitch/FormSwitch.tsx |  49 ++
 .../datasources/DataSourceHttpSettings.tsx    | 438 +++++++++++-------
 .../datasources/DataSourceSettings.tsx        |   3 +-
 .../datasources/__mocks__/dataSourcesMocks.ts |   3 +
 .../features/datasources/state/navModel.ts    |   3 +
 public/app/types/datasources.ts               |   3 +
 6 files changed, 332 insertions(+), 167 deletions(-)
 create mode 100644 public/app/core/components/FormSwitch/FormSwitch.tsx

diff --git a/public/app/core/components/FormSwitch/FormSwitch.tsx b/public/app/core/components/FormSwitch/FormSwitch.tsx
new file mode 100644
index 00000000000..96260edde8a
--- /dev/null
+++ b/public/app/core/components/FormSwitch/FormSwitch.tsx
@@ -0,0 +1,49 @@
+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;
diff --git a/public/app/features/datasources/DataSourceHttpSettings.tsx b/public/app/features/datasources/DataSourceHttpSettings.tsx
index 1112d048d0f..b75c634ab61 100644
--- a/public/app/features/datasources/DataSourceHttpSettings.tsx
+++ b/public/app/features/datasources/DataSourceHttpSettings.tsx
@@ -1,48 +1,91 @@
 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: '',
-    showAccessHelp: false,
+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,
+    }));
   };
 
-  onToggleAccessHelp = () => {};
+  onUrlChange = event => {
+    this.setState({
+      url: event.target.value,
+    });
+  };
+
+  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,173 +94,238 @@ 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>
           )}
-
-          {showAccessHelp && (
-            <div className="grafana-info-box m-t-2">
-              <p>
-                Access mode controls how requests to the data source will be handled.
-                <strong>
-                  <i>Server</i>
-                </strong>{' '}
-                should be the preferred way if nothing else stated.
-              </p>
-              <div className="alert-title">Server access mode (Default):</div>
-              <p>
-                All requests will be made from the browser to Grafana backend/server which in turn will forward the
-                requests to the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS)
-                requirements. The URL needs to be accessible from the grafana backend/server if you select this access
-                mode.
-              </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.
-              </p>
-            </div>
-          )}
-          {access === 'proxy' && (
-            <div className="gf-form-inline">
-              <div className="gf-form">
-                <span className="gf-form-label width-10">Whitelisted Cookies</span>
-              </div>
-            </div>
-          )}
-
-          <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>
-
-          {basicAuth && (
-            <div className="gf-form-group">
-              <h6>Basic Auth Details</h6>
-              <div className="gf-form">
-                <span className="gf-form-label width-10">User</span>
-                <input className="gf-form-input max-width-21" type="text" value={basicAuthUser} placeholder="User" />
-              </div>
-              <div className="gf-form">
-                <span className="gf-form-label width-10">Password</span>
-                <input
-                  className="gf-form-input max-width-21"
-                  type="password"
-                  value={basicAuthPassword}
-                  placeholder="Password"
-                />
-              </div>
-            </div>
-          )}
-
-          {(tlsAuth || tlsAuthWithCACert) &&
-            access === 'proxy' && (
-              <div className="gf-form-group">
-                <div className="gf-form">
-                  <h6>TLS Auth Details</h6>
-                </div>
-                {tlsAuthWithCACert && (
-                  <div>
-                    <div className="gf-form-inline">
-                      <div className="gf-form gf-form--v-stretch">
-                        <label className="gf-form-label width-7">CA Cert</label>
-                      </div>
-                      {!tlsCACert && (
-                        <div className="gf-form gf-form--grow">
-                          <textarea
-                            rows={7}
-                            className="gf-form-input gf-form-textarea"
-                            value={tlsCACert}
-                            placeholder="Begins with -----BEGIN CERTIFICATE-----"
-                          />
-                        </div>
-                      )}
-                      {tlsCACert && (
-                        <div className="gf-form">
-                          <input type="text" className="gf-form-input max-width-12" value="configured" />
-                          <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
-                            reset
-                          </a>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-
-                {tlsAuth && (
-                  <div>
-                    <div className="gf-form-inline">
-                      <div className="gf-form gf-form--v-stretch">
-                        <label className="gf-form-label width-7">Client Cert</label>
-                      </div>
-                      {!tlsClientCert && (
-                        <div className="gf-form gf-form--grow">
-                          <textarea
-                            rows={7}
-                            className="gf-form-input gf-form-textarea"
-                            value={tlsClientCert}
-                            placeholder="Begins with -----BEGIN CERTIFICATE-----"
-                            required
-                          />
-                        </div>
-                      )}
-                      {tlsClientCert && (
-                        <div className="gf-form">
-                          <input type="text" className="gf-form-input max-width-12" value="configured" />
-                          <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
-                            reset
-                          </a>
-                        </div>
-                      )}
-                    </div>
-
-                    <div className="gf-form-inline">
-                      <div className="gf-form gf-form--v-stretch">
-                        <label className="gf-form-label width-7">Client Key</label>
-                      </div>
-                      {tlsClientKey && (
-                        <div className="gf-form gf-form--grow">
-                          <textarea
-                            rows={7}
-                            className="gf-form-input gf-form-textarea"
-                            value={tlsClientKey}
-                            placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
-                          />
-                        </div>
-                      )}
-                      {tlsClientKey && (
-                        <div className="gf-form">
-                          <input type="text" className="gf-form-input max-width-12" value="configured" />
-                          <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
-                            reset
-                          </a>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
         </div>
+
+        {showAccessHelp && (
+          <div className="grafana-info-box m-t-2">
+            <p>
+              Access mode controls how requests to the data source will be handled.
+              <strong>
+                <i>Server</i>
+              </strong>{' '}
+              should be the preferred way if nothing else stated.
+            </p>
+            <div className="alert-title">Server access mode (Default):</div>
+            <p>
+              All requests will be made from the browser to Grafana backend/server which in turn will forward the
+              requests to the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS)
+              requirements. The URL needs to be accessible from the grafana backend/server if you select this access
+              mode.
+            </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.
+            </p>
+          </div>
+        )}
+        {access === 'proxy' && (
+          <div className="gf-form-inline">
+            <div className="gf-form">
+              <span className="gf-form-label width-10">Whitelisted Cookies</span>
+            </div>
+          </div>
+        )}
+
+        <h3 className="page-heading">Auth</h3>
+        <div className="gf-form-group">
+          <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>
+
+        {dataSource.basicAuth && (
+          <div className="gf-form-group">
+            <h6>Basic Auth Details</h6>
+            <div className="gf-form">
+              <span className="gf-form-label width-10">User</span>
+              <input className="gf-form-input max-width-21" type="text" value={basicAuthUser} placeholder="User" />
+            </div>
+            <div className="gf-form">
+              <span className="gf-form-label width-10">Password</span>
+              <input
+                className="gf-form-input max-width-21"
+                type="password"
+                value={basicAuthPassword}
+                placeholder="Password"
+              />
+            </div>
+          </div>
+        )}
+
+        {(tlsAuth || tlsAuthWithCACert) &&
+          access === 'proxy' && (
+            <div className="gf-form-group">
+              <div className="gf-form">
+                <h6>TLS Auth Details</h6>
+              </div>
+              {tlsAuthWithCACert && (
+                <div>
+                  <div className="gf-form-inline">
+                    <div className="gf-form gf-form--v-stretch">
+                      <label className="gf-form-label width-7">CA Cert</label>
+                    </div>
+                    {!tlsCACert && (
+                      <div className="gf-form gf-form--grow">
+                        <textarea
+                          rows={7}
+                          className="gf-form-input gf-form-textarea"
+                          value={tlsCACert}
+                          placeholder="Begins with -----BEGIN CERTIFICATE-----"
+                        />
+                      </div>
+                    )}
+                    {tlsCACert && (
+                      <div className="gf-form">
+                        <input type="text" className="gf-form-input max-width-12" value="configured" />
+                        <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
+                          reset
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {tlsAuth && (
+                <div>
+                  <div className="gf-form-inline">
+                    <div className="gf-form gf-form--v-stretch">
+                      <label className="gf-form-label width-7">Client Cert</label>
+                    </div>
+                    {!tlsClientCert && (
+                      <div className="gf-form gf-form--grow">
+                        <textarea
+                          rows={7}
+                          className="gf-form-input gf-form-textarea"
+                          value={tlsClientCert}
+                          placeholder="Begins with -----BEGIN CERTIFICATE-----"
+                          required
+                        />
+                      </div>
+                    )}
+                    {tlsClientCert && (
+                      <div className="gf-form">
+                        <input type="text" className="gf-form-input max-width-12" value="configured" />
+                        <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
+                          reset
+                        </a>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="gf-form-inline">
+                    <div className="gf-form gf-form--v-stretch">
+                      <label className="gf-form-label width-7">Client Key</label>
+                    </div>
+                    {tlsClientKey && (
+                      <div className="gf-form gf-form--grow">
+                        <textarea
+                          rows={7}
+                          className="gf-form-input gf-form-textarea"
+                          value={tlsClientKey}
+                          placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
+                        />
+                      </div>
+                    )}
+                    {tlsClientKey && (
+                      <div className="gf-form">
+                        <input type="text" className="gf-form-input max-width-12" value="configured" />
+                        <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
+                          reset
+                        </a>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
       </div>
     );
   }
 }
+
+function mapStateToProps(state) {
+  return {
+    dataSource: state.dataSources.dataSource,
+  };
+}
+
+export default connect(mapStateToProps)(DataSourceHttpSettings);
diff --git a/public/app/features/datasources/DataSourceSettings.tsx b/public/app/features/datasources/DataSourceSettings.tsx
index e86a6996b17..bd7bb6069c3 100644
--- a/public/app/features/datasources/DataSourceSettings.tsx
+++ b/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>
     );
   }
diff --git a/public/app/features/datasources/__mocks__/dataSourcesMocks.ts b/public/app/features/datasources/__mocks__/dataSourcesMocks.ts
index b7e237cdb50..25eb182835d 100644
--- a/public/app/features/datasources/__mocks__/dataSourcesMocks.ts
+++ b/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,
diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts
index e0b6b39588e..7c4ec0ace69 100644
--- a/public/app/features/datasources/state/navModel.ts
+++ b/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,
diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts
index 6bbac267726..b9e11b691db 100644
--- a/public/app/types/datasources.ts
+++ b/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 {

From 8ef705f2b51f50d9a95761dd218f2969d11da669 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 16 Oct 2018 09:59:03 +0200
Subject: [PATCH 03/25] pausing for now

---
 .../datasources/DataSourceSettings.tsx        | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/public/app/features/datasources/DataSourceSettings.tsx b/public/app/features/datasources/DataSourceSettings.tsx
index bd7bb6069c3..b28394dc4f4 100644
--- a/public/app/features/datasources/DataSourceSettings.tsx
+++ b/public/app/features/datasources/DataSourceSettings.tsx
@@ -1,7 +1,6 @@
-import React, { PureComponent } from 'react';
+import React, { createRef, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { DataSource, Plugin } from 'app/types';
-import DataSourceHttpSettings from './DataSourceHttpSettings';
 
 export interface Props {
   dataSource: DataSource;
@@ -18,11 +17,19 @@ enum DataSourceStates {
 }
 
 export class DataSourceSettings extends PureComponent<Props, State> {
+  settingsElement = createRef<HTMLDivElement>();
+
   state = {
     name: this.props.dataSource.name,
     showNamePopover: false,
   };
 
+  componentDidMount() {
+    // importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => {
+    //   console.log(pluginExports);
+    // });
+  }
+
   onNameChange = event => {
     this.setState({
       name: event.target.value,
@@ -77,17 +84,6 @@ export class DataSourceSettings extends PureComponent<Props, State> {
   render() {
     const { name, showNamePopover } = this.state;
 
-    const props = {
-      access: {},
-      basicAuth: {},
-      showAccessOption: {},
-      tlsAuth: {},
-      tlsAuthWithCACert: {},
-      tlsCACert: {},
-      tlsClientCert: {},
-      tlsClientKey: {},
-    };
-
     return (
       <div>
         <form onSubmit={this.onSubmit}>
@@ -134,7 +130,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
               to update this datasource.
             </div>
           )}
-          <DataSourceHttpSettings {...props} />
+          <div ref={this.settingsElement} />
           <div className="gf-form-button-row">
             <button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}>
               Save &amp; Test

From 596a83407e5e6d431c86281d650cab31f016646a Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 24 Oct 2018 16:17:25 +0200
Subject: [PATCH 04/25] fixed routes and page

---
 .../datasources/DataSourceSettings.tsx        | 146 +++++++++++-------
 .../features/plugins/__mocks__/pluginMocks.ts |   2 +
 public/app/routes/routes.ts                   |   7 +
 public/app/types/plugins.ts                   |   1 +
 4 files changed, 96 insertions(+), 60 deletions(-)

diff --git a/public/app/features/datasources/DataSourceSettings.tsx b/public/app/features/datasources/DataSourceSettings.tsx
index b28394dc4f4..d66ba07990c 100644
--- a/public/app/features/datasources/DataSourceSettings.tsx
+++ b/public/app/features/datasources/DataSourceSettings.tsx
@@ -1,10 +1,18 @@
 import React, { createRef, PureComponent } from 'react';
 import { connect } from 'react-redux';
-import { DataSource, Plugin } from 'app/types';
+import { DataSource, NavModel, Plugin } from 'app/types';
+import PageHeader from '../../core/components/PageHeader/PageHeader';
+import { importPluginModule } from '../plugins/plugin_loader';
+import { loadDataSource } from './state/actions';
+import { getNavModel } from '../../core/selectors/navModel';
+import { getRouteParamsId } from '../../core/selectors/location';
 
 export interface Props {
+  navModel: NavModel;
   dataSource: DataSource;
   dataSourceMeta: Plugin;
+  pageId: number;
+  loadDataSource: typeof loadDataSource;
 }
 interface State {
   name: string;
@@ -24,10 +32,13 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     showNamePopover: false,
   };
 
-  componentDidMount() {
-    // importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => {
-    //   console.log(pluginExports);
-    // });
+  async componentDidMount() {
+    const { loadDataSource, pageId } = this.props;
+
+    await loadDataSource(pageId);
+    importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => {
+      console.log(pluginExports);
+    });
   }
 
   onNameChange = event => {
@@ -84,75 +95,90 @@ export class DataSourceSettings extends PureComponent<Props, State> {
   render() {
     const { name, showNamePopover } = this.state;
 
+    console.log(this.props);
+
     return (
       <div>
-        <form onSubmit={this.onSubmit}>
-          <div className="gf-form-group">
-            <div className="gf-form-inline">
-              <div className="gf-form max-width-30">
-                <span className="gf-form-label width-10">Name</span>
-                <input
-                  className="gf-form-input max-width-23"
-                  type="text"
-                  value={name}
-                  placeholder="Name"
-                  onChange={this.onNameChange}
-                  required
-                />
-                <div onClick={this.onTogglePopover}>
-                  <i className="fa fa-info-circle" />
-                </div>
-                {showNamePopover && (
-                  <div
-                    style={{
-                      position: 'absolute',
-                      left: '450px',
-                      top: '-20px',
-                      padding: '10px',
-                      backgroundColor: 'black',
-                      zIndex: 2,
-                      width: '300px',
-                      border: '1px solid gray',
-                      borderRadius: '3px',
-                    }}
-                  >
-                    The name is used when you select the data source in panels. The <em>Default</em> data source is
-                    preselected in new panels.
+        <PageHeader model={this.props.navModel} />
+        <div className="page-container page-body">
+          <div>
+            <form onSubmit={this.onSubmit}>
+              <div className="gf-form-group">
+                <div className="gf-form-inline">
+                  <div className="gf-form max-width-30">
+                    <span className="gf-form-label width-10">Name</span>
+                    <input
+                      className="gf-form-input max-width-23"
+                      type="text"
+                      value={name}
+                      placeholder="Name"
+                      onChange={this.onNameChange}
+                      required
+                    />
+                    <div onClick={this.onTogglePopover}>
+                      <i className="fa fa-info-circle" />
+                    </div>
+                    {showNamePopover && (
+                      <div
+                        style={{
+                          position: 'absolute',
+                          left: '450px',
+                          top: '-20px',
+                          padding: '10px',
+                          backgroundColor: 'black',
+                          zIndex: 2,
+                          width: '300px',
+                          border: '1px solid gray',
+                          borderRadius: '3px',
+                        }}
+                      >
+                        The name is used when you select the data source in panels. The <em>Default</em> data source is
+                        preselected in new panels.
+                      </div>
+                    )}
                   </div>
-                )}
+                </div>
               </div>
-            </div>
+              {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
+              {this.isReadyOnly() && (
+                <div className="grafana-info-box span8">
+                  This datasource was added by config and cannot be modified using the UI. Please contact your server
+                  admin to update this datasource.
+                </div>
+              )}
+              <div ref={this.settingsElement} />
+              <div className="gf-form-button-row">
+                <button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}>
+                  Save &amp; Test
+                </button>
+                <button type="submit" className="btn btn-danger" disabled={this.isReadyOnly()} onClick={this.onDelete}>
+                  Delete
+                </button>
+                <a className="btn btn-inverse" href="datasources">
+                  Back
+                </a>
+              </div>
+            </form>
           </div>
-          {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
-          {this.isReadyOnly() && (
-            <div className="grafana-info-box span8">
-              This datasource was added by config and cannot be modified using the UI. Please contact your server admin
-              to update this datasource.
-            </div>
-          )}
-          <div ref={this.settingsElement} />
-          <div className="gf-form-button-row">
-            <button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}>
-              Save &amp; Test
-            </button>
-            <button type="submit" className="btn btn-danger" disabled={this.isReadyOnly()} onClick={this.onDelete}>
-              Delete
-            </button>
-            <a className="btn btn-inverse" href="datasources">
-              Back
-            </a>
-          </div>
-        </form>
+        </div>
       </div>
     );
   }
 }
 
 function mapStateToProps(state) {
+  const pageId = getRouteParamsId(state.location);
+
   return {
+    navModel: getNavModel(state.navIndex, `datasource-settings-${pageId}`),
     dataSource: state.dataSources.dataSource,
     dataSourceMeta: state.dataSources.dataSourceMeta,
+    pageId: pageId,
   };
 }
 
-export default connect(mapStateToProps)(DataSourceSettings);
+const mapDispatchToProps = {
+  loadDataSource,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings);
diff --git a/public/app/features/plugins/__mocks__/pluginMocks.ts b/public/app/features/plugins/__mocks__/pluginMocks.ts
index d8dd67d5b61..4804cbbc594 100644
--- a/public/app/features/plugins/__mocks__/pluginMocks.ts
+++ b/public/app/features/plugins/__mocks__/pluginMocks.ts
@@ -26,6 +26,7 @@ export const getMockPlugins = (amount: number): Plugin[] => {
       pinned: false,
       state: '',
       type: '',
+      module: {},
     });
   }
 
@@ -55,5 +56,6 @@ export const getMockPlugin = () => {
     pinned: false,
     state: '',
     type: '',
+    module: {},
   };
 };
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index 24cabb63a9d..862aa413884 100644
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@@ -14,6 +14,7 @@ import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage';
 import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
 import UsersListPage from 'app/features/users/UsersListPage';
 import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
+import DataSourceSettings from '../features/datasources/DataSourceSettings';
 
 /** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -73,6 +74,12 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
         component: () => DataSourcesListPage,
       },
     })
+    .when('/datasources/edit/:id/', {
+      template: '<react-container />',
+      resolve: {
+        component: () => DataSourceSettings,
+      },
+    })
     .when('/datasources/edit/:id/dashboards', {
       template: '<react-container />',
       resolve: {
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index 826ce2d48ec..de640906407 100644
--- a/public/app/types/plugins.ts
+++ b/public/app/types/plugins.ts
@@ -60,6 +60,7 @@ export interface Plugin {
   pinned: boolean;
   state: string;
   type: string;
+  module: any;
 }
 
 export interface PluginDashboard {

From a7bd9440986fcb97691704de23c9d3aef45d3545 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 30 Oct 2018 16:40:08 +0100
Subject: [PATCH 05/25] updated view to use angular loader

---
 .../datasources/DataSourceHttpSettings.tsx    | 331 ------------------
 .../datasources/DataSourcePluginSettings.tsx  |  40 +++
 .../datasources/DataSourceSettings.tsx        | 146 ++++----
 .../AddDataSourcePermissions.test.tsx.snap    | 177 ----------
 .../DataSourcePermissionsList.test.tsx.snap   | 327 -----------------
 .../EditDataSourcePage.test.tsx.snap          |  27 --
 .../app/features/datasources/state/actions.ts |  28 +-
 .../features/datasources/state/selectors.ts   |   2 +-
 scripts/webpack/webpack.hot.js                |   2 +-
 9 files changed, 127 insertions(+), 953 deletions(-)
 delete mode 100644 public/app/features/datasources/DataSourceHttpSettings.tsx
 create mode 100644 public/app/features/datasources/DataSourcePluginSettings.tsx
 delete mode 100644 public/app/features/datasources/__snapshots__/AddDataSourcePermissions.test.tsx.snap
 delete mode 100644 public/app/features/datasources/__snapshots__/DataSourcePermissionsList.test.tsx.snap
 delete mode 100644 public/app/features/datasources/__snapshots__/EditDataSourcePage.test.tsx.snap

diff --git a/public/app/features/datasources/DataSourceHttpSettings.tsx b/public/app/features/datasources/DataSourceHttpSettings.tsx
deleted file mode 100644
index b75c634ab61..00000000000
--- a/public/app/features/datasources/DataSourceHttpSettings.tsx
+++ /dev/null
@@ -1,331 +0,0 @@
-import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
-import { DataSource } from 'app/types';
-import FormSwitch from '../../core/components/FormSwitch/FormSwitch';
-
-interface Props {
-  dataSource: DataSource;
-  showAccessOption: any;
-  tlsAuth: any;
-  tlsAuthWithCACert: any;
-  tlsCACert: any;
-  tlsClientCert: any;
-  tlsClientKey: any;
-}
-
-interface State {
-  basicAuthUser: string;
-  basicAuthPassword: string;
-  showAccessHelp: boolean;
-  url: string;
-  access: string;
-}
-
-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,
-    });
-  };
-
-  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 {
-      dataSource,
-      showAccessOption,
-      tlsAuth,
-      tlsAuthWithCACert,
-      tlsCACert,
-      tlsClientCert,
-      tlsClientKey,
-    } = this.props;
-
-    const { access, showAccessHelp, basicAuthUser, basicAuthPassword, url } = this.state;
-
-    const accessOptions = [{ key: 'proxy', value: 'Server (Default)' }, { key: 'direct', value: 'Browser' }];
-
-    return (
-      <div className="gf-form-group">
-        <h3 className="page-heading">HTTP</h3>
-        <div className="gf-form-group">
-          <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}
-                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>
-                <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" /> : <i className="fa fa-caret-right">&nbsp;</i>}
-                </label>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {showAccessHelp && (
-          <div className="grafana-info-box m-t-2">
-            <p>
-              Access mode controls how requests to the data source will be handled.
-              <strong>
-                <i>Server</i>
-              </strong>{' '}
-              should be the preferred way if nothing else stated.
-            </p>
-            <div className="alert-title">Server access mode (Default):</div>
-            <p>
-              All requests will be made from the browser to Grafana backend/server which in turn will forward the
-              requests to the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS)
-              requirements. The URL needs to be accessible from the grafana backend/server if you select this access
-              mode.
-            </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.
-            </p>
-          </div>
-        )}
-        {access === 'proxy' && (
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <span className="gf-form-label width-10">Whitelisted Cookies</span>
-            </div>
-          </div>
-        )}
-
-        <h3 className="page-heading">Auth</h3>
-        <div className="gf-form-group">
-          <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>
-
-        {dataSource.basicAuth && (
-          <div className="gf-form-group">
-            <h6>Basic Auth Details</h6>
-            <div className="gf-form">
-              <span className="gf-form-label width-10">User</span>
-              <input className="gf-form-input max-width-21" type="text" value={basicAuthUser} placeholder="User" />
-            </div>
-            <div className="gf-form">
-              <span className="gf-form-label width-10">Password</span>
-              <input
-                className="gf-form-input max-width-21"
-                type="password"
-                value={basicAuthPassword}
-                placeholder="Password"
-              />
-            </div>
-          </div>
-        )}
-
-        {(tlsAuth || tlsAuthWithCACert) &&
-          access === 'proxy' && (
-            <div className="gf-form-group">
-              <div className="gf-form">
-                <h6>TLS Auth Details</h6>
-              </div>
-              {tlsAuthWithCACert && (
-                <div>
-                  <div className="gf-form-inline">
-                    <div className="gf-form gf-form--v-stretch">
-                      <label className="gf-form-label width-7">CA Cert</label>
-                    </div>
-                    {!tlsCACert && (
-                      <div className="gf-form gf-form--grow">
-                        <textarea
-                          rows={7}
-                          className="gf-form-input gf-form-textarea"
-                          value={tlsCACert}
-                          placeholder="Begins with -----BEGIN CERTIFICATE-----"
-                        />
-                      </div>
-                    )}
-                    {tlsCACert && (
-                      <div className="gf-form">
-                        <input type="text" className="gf-form-input max-width-12" value="configured" />
-                        <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
-                          reset
-                        </a>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {tlsAuth && (
-                <div>
-                  <div className="gf-form-inline">
-                    <div className="gf-form gf-form--v-stretch">
-                      <label className="gf-form-label width-7">Client Cert</label>
-                    </div>
-                    {!tlsClientCert && (
-                      <div className="gf-form gf-form--grow">
-                        <textarea
-                          rows={7}
-                          className="gf-form-input gf-form-textarea"
-                          value={tlsClientCert}
-                          placeholder="Begins with -----BEGIN CERTIFICATE-----"
-                          required
-                        />
-                      </div>
-                    )}
-                    {tlsClientCert && (
-                      <div className="gf-form">
-                        <input type="text" className="gf-form-input max-width-12" value="configured" />
-                        <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
-                          reset
-                        </a>
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="gf-form-inline">
-                    <div className="gf-form gf-form--v-stretch">
-                      <label className="gf-form-label width-7">Client Key</label>
-                    </div>
-                    {tlsClientKey && (
-                      <div className="gf-form gf-form--grow">
-                        <textarea
-                          rows={7}
-                          className="gf-form-input gf-form-textarea"
-                          value={tlsClientKey}
-                          placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
-                        />
-                      </div>
-                    )}
-                    {tlsClientKey && (
-                      <div className="gf-form">
-                        <input type="text" className="gf-form-input max-width-12" value="configured" />
-                        <a className="btn btn-secondary gf-form-btn" href="#" onClick={() => {}}>
-                          reset
-                        </a>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    dataSource: state.dataSources.dataSource,
-  };
-}
-
-export default connect(mapStateToProps)(DataSourceHttpSettings);
diff --git a/public/app/features/datasources/DataSourcePluginSettings.tsx b/public/app/features/datasources/DataSourcePluginSettings.tsx
new file mode 100644
index 00000000000..4b38b773300
--- /dev/null
+++ b/public/app/features/datasources/DataSourcePluginSettings.tsx
@@ -0,0 +1,40 @@
+import React, { PureComponent } from 'react';
+import { DataSource, Plugin } from 'app/types';
+import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
+import { importPluginModule } from '../plugins/plugin_loader';
+interface Props {
+  dataSource: DataSource;
+  dataSourceMeta: Plugin;
+}
+
+export class DataSourcePluginSettings extends PureComponent<Props> {
+  element: any;
+  component: AngularComponent;
+
+  componentDidMount() {
+    if (!this.element) {
+      return;
+    }
+
+    importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => {
+      console.log(pluginExports);
+    });
+
+    const loader = getAngularLoader();
+    const template = '<plugin-component type="datasource-config-ctrl" />';
+    const scopeProps = {
+      ctrl: {
+        dataSourceMeta: this.props.dataSourceMeta,
+        current: this.props.dataSource,
+      },
+    };
+
+    this.component = loader.load(this.element, scopeProps, template);
+  }
+
+  render() {
+    return <div ref={element => (this.element = element)} />;
+  }
+}
+
+export default DataSourcePluginSettings;
diff --git a/public/app/features/datasources/DataSourceSettings.tsx b/public/app/features/datasources/DataSourceSettings.tsx
index d66ba07990c..c312e0b9b0b 100644
--- a/public/app/features/datasources/DataSourceSettings.tsx
+++ b/public/app/features/datasources/DataSourceSettings.tsx
@@ -1,11 +1,15 @@
-import React, { createRef, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
+import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import { DataSource, NavModel, Plugin } from 'app/types';
 import PageHeader from '../../core/components/PageHeader/PageHeader';
-import { importPluginModule } from '../plugins/plugin_loader';
-import { loadDataSource } from './state/actions';
+import DataSourcePluginSettings from './DataSourcePluginSettings';
+import { loadDataSource, setDataSourceName } from './state/actions';
 import { getNavModel } from '../../core/selectors/navModel';
 import { getRouteParamsId } from '../../core/selectors/location';
+import { Label } from '../../core/components/Forms/Forms';
+import PageLoader from '../../core/components/PageLoader/PageLoader';
+import { getDataSource } from './state/selectors';
 
 export interface Props {
   navModel: NavModel;
@@ -13,6 +17,7 @@ export interface Props {
   dataSourceMeta: Plugin;
   pageId: number;
   loadDataSource: typeof loadDataSource;
+  setDataSourceName: typeof setDataSourceName;
 }
 interface State {
   name: string;
@@ -25,28 +30,12 @@ enum DataSourceStates {
 }
 
 export class DataSourceSettings extends PureComponent<Props, State> {
-  settingsElement = createRef<HTMLDivElement>();
-
-  state = {
-    name: this.props.dataSource.name,
-    showNamePopover: false,
-  };
-
   async componentDidMount() {
     const { loadDataSource, pageId } = this.props;
 
     await loadDataSource(pageId);
-    importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => {
-      console.log(pluginExports);
-    });
   }
 
-  onNameChange = event => {
-    this.setState({
-      name: event.target.value,
-    });
-  };
-
   onSubmit = event => {
     event.preventDefault();
     console.log(event);
@@ -56,12 +45,6 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     console.log(event);
   };
 
-  onTogglePopover = () => {
-    this.setState(prevState => ({
-      showNamePopover: !prevState.showNamePopover,
-    }));
-  };
-
   isReadyOnly() {
     return this.props.dataSource.readOnly === true;
   }
@@ -93,74 +76,74 @@ export class DataSourceSettings extends PureComponent<Props, State> {
   }
 
   render() {
-    const { name, showNamePopover } = this.state;
-
-    console.log(this.props);
+    const { dataSource, dataSourceMeta, navModel } = this.props;
 
     return (
       <div>
-        <PageHeader model={this.props.navModel} />
-        <div className="page-container page-body">
-          <div>
-            <form onSubmit={this.onSubmit}>
-              <div className="gf-form-group">
-                <div className="gf-form-inline">
+        <PageHeader model={navModel} />
+        {Object.keys(dataSource).length === 0 && Object.keys(dataSourceMeta).length === 0 ? (
+          <PageLoader pageName="Data source settings" />
+        ) : (
+          <div className="page-container page-body">
+            <div>
+              <form onSubmit={this.onSubmit}>
+                <div className="gf-form-group">
                   <div className="gf-form max-width-30">
-                    <span className="gf-form-label width-10">Name</span>
+                    <Label
+                      tooltip={
+                        'The name is used when you select the data source in panels. The Default data source is' +
+                        'preselected in new panels.'
+                      }
+                    >
+                      Name
+                    </Label>
                     <input
                       className="gf-form-input max-width-23"
                       type="text"
-                      value={name}
+                      value={this.props.dataSource.name}
                       placeholder="Name"
-                      onChange={this.onNameChange}
+                      onChange={event => this.props.setDataSourceName(event.target.value)}
                       required
                     />
-                    <div onClick={this.onTogglePopover}>
-                      <i className="fa fa-info-circle" />
-                    </div>
-                    {showNamePopover && (
-                      <div
-                        style={{
-                          position: 'absolute',
-                          left: '450px',
-                          top: '-20px',
-                          padding: '10px',
-                          backgroundColor: 'black',
-                          zIndex: 2,
-                          width: '300px',
-                          border: '1px solid gray',
-                          borderRadius: '3px',
-                        }}
-                      >
-                        The name is used when you select the data source in panels. The <em>Default</em> data source is
-                        preselected in new panels.
-                      </div>
-                    )}
                   </div>
                 </div>
-              </div>
-              {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
-              {this.isReadyOnly() && (
-                <div className="grafana-info-box span8">
-                  This datasource was added by config and cannot be modified using the UI. Please contact your server
-                  admin to update this datasource.
+
+                {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
+
+                {this.isReadyOnly() ? (
+                  <div className="grafana-info-box span8">
+                    This datasource was added by config and cannot be modified using the UI. Please contact your server
+                    admin to update this datasource.
+                  </div>
+                ) : (
+                  <DataSourcePluginSettings dataSource={dataSource} dataSourceMeta={dataSourceMeta} />
+                )}
+
+                <div className="gf-form-button-row">
+                  <button
+                    type="submit"
+                    className="btn btn-success"
+                    disabled={this.isReadyOnly()}
+                    onClick={this.onSubmit}
+                  >
+                    Save &amp; Test
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-danger"
+                    disabled={this.isReadyOnly()}
+                    onClick={this.onDelete}
+                  >
+                    Delete
+                  </button>
+                  <a className="btn btn-inverse" href="/datasources">
+                    Back
+                  </a>
                 </div>
-              )}
-              <div ref={this.settingsElement} />
-              <div className="gf-form-button-row">
-                <button type="submit" className="btn btn-success" disabled={this.isReadyOnly()} onClick={this.onSubmit}>
-                  Save &amp; Test
-                </button>
-                <button type="submit" className="btn btn-danger" disabled={this.isReadyOnly()} onClick={this.onDelete}>
-                  Delete
-                </button>
-                <a className="btn btn-inverse" href="datasources">
-                  Back
-                </a>
-              </div>
-            </form>
+              </form>
+            </div>
           </div>
-        </div>
+        )}
       </div>
     );
   }
@@ -171,7 +154,7 @@ function mapStateToProps(state) {
 
   return {
     navModel: getNavModel(state.navIndex, `datasource-settings-${pageId}`),
-    dataSource: state.dataSources.dataSource,
+    dataSource: getDataSource(state.dataSources, pageId),
     dataSourceMeta: state.dataSources.dataSourceMeta,
     pageId: pageId,
   };
@@ -179,6 +162,7 @@ function mapStateToProps(state) {
 
 const mapDispatchToProps = {
   loadDataSource,
+  setDataSourceName,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings);
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings));
diff --git a/public/app/features/datasources/__snapshots__/AddDataSourcePermissions.test.tsx.snap b/public/app/features/datasources/__snapshots__/AddDataSourcePermissions.test.tsx.snap
deleted file mode 100644
index c398dc806ec..00000000000
--- a/public/app/features/datasources/__snapshots__/AddDataSourcePermissions.test.tsx.snap
+++ /dev/null
@@ -1,177 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<div
-  className="gf-form-inline cta-form"
->
-  <button
-    className="cta-form__close btn btn-transparent"
-    onClick={[MockFunction]}
-  >
-    <i
-      className="fa fa-close"
-    />
-  </button>
-  <form
-    name="addPermission"
-    onSubmit={[Function]}
-  >
-    <h5>
-      Add Permission For
-    </h5>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <select
-          className="gf-form-input gf-size-auto"
-          onChange={[Function]}
-          value="Team"
-        >
-          <option
-            key="0"
-            value="Team"
-          >
-            Team
-          </option>
-          <option
-            key="1"
-            value="User"
-          >
-            User
-          </option>
-        </select>
-      </div>
-      <div
-        className="gf-form"
-      >
-        <TeamPicker
-          className="width-20"
-          onSelected={[Function]}
-        />
-      </div>
-      <div
-        className="gf-form"
-      >
-        <DescriptionPicker
-          className="gf-form-input--form-dropdown-right"
-          disabled={false}
-          onSelected={[Function]}
-          optionsWithDesc={
-            Array [
-              Object {
-                "description": "Can query data source.",
-                "label": "Query",
-                "value": 1,
-              },
-            ]
-          }
-          value={1}
-        />
-      </div>
-      <div
-        className="gf-form"
-      >
-        <button
-          className="btn btn-success"
-          data-save-permission={true}
-          disabled={true}
-          type="submit"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Render should render user picker 1`] = `
-<div
-  className="gf-form-inline cta-form"
->
-  <button
-    className="cta-form__close btn btn-transparent"
-    onClick={[MockFunction]}
-  >
-    <i
-      className="fa fa-close"
-    />
-  </button>
-  <form
-    name="addPermission"
-    onSubmit={[Function]}
-  >
-    <h5>
-      Add Permission For
-    </h5>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <select
-          className="gf-form-input gf-size-auto"
-          onChange={[Function]}
-          value="User"
-        >
-          <option
-            key="0"
-            value="Team"
-          >
-            Team
-          </option>
-          <option
-            key="1"
-            value="User"
-          >
-            User
-          </option>
-        </select>
-      </div>
-      <div
-        className="gf-form"
-      >
-        <UserPicker
-          className="width-20"
-          onSelected={[Function]}
-        />
-      </div>
-      <div
-        className="gf-form"
-      >
-        <DescriptionPicker
-          className="gf-form-input--form-dropdown-right"
-          disabled={false}
-          onSelected={[Function]}
-          optionsWithDesc={
-            Array [
-              Object {
-                "description": "Can query data source.",
-                "label": "Query",
-                "value": 1,
-              },
-            ]
-          }
-          value={1}
-        />
-      </div>
-      <div
-        className="gf-form"
-      >
-        <button
-          className="btn btn-success"
-          data-save-permission={true}
-          disabled={true}
-          type="submit"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
diff --git a/public/app/features/datasources/__snapshots__/DataSourcePermissionsList.test.tsx.snap b/public/app/features/datasources/__snapshots__/DataSourcePermissionsList.test.tsx.snap
deleted file mode 100644
index dba51823549..00000000000
--- a/public/app/features/datasources/__snapshots__/DataSourcePermissionsList.test.tsx.snap
+++ /dev/null
@@ -1,327 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<table
-  className="filter-table gf-form-group"
->
-  <tbody>
-    <tr
-      className="gf-form-disabled"
-    >
-      <td
-        style={
-          Object {
-            "width": "1%",
-          }
-        }
-      >
-        <i
-          className="gicon gicon-shield"
-          style={
-            Object {
-              "height": "25px",
-              "width": "25px",
-            }
-          }
-        />
-      </td>
-      <td
-        style={
-          Object {
-            "width": "90%",
-          }
-        }
-      >
-        Admin
-        <span
-          className="filter-table__weak-italic"
-        >
-           (Role)
-        </span>
-      </td>
-      <td />
-      <td
-        className="query-keyword"
-      >
-        Can
-      </td>
-      <td>
-        <div
-          className="gf-form"
-        >
-          <DescriptionPicker
-            className="gf-form-input--form-dropdown-right"
-            disabled={true}
-            onSelected={[Function]}
-            optionsWithDesc={
-              Array [
-                Object {
-                  "description": "Can query data source.",
-                  "label": "Query",
-                  "value": 1,
-                },
-                Object {
-                  "description": "",
-                  "label": "Admin",
-                  "value": 2,
-                },
-              ]
-            }
-            value={2}
-          />
-        </div>
-      </td>
-      <td>
-        <button
-          className="btn btn-inverse btn-small"
-        >
-          <i
-            className="fa fa-lock"
-          />
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Render should render items 1`] = `
-<table
-  className="filter-table gf-form-group"
->
-  <tbody>
-    <tr
-      className="gf-form-disabled"
-    >
-      <td
-        style={
-          Object {
-            "width": "1%",
-          }
-        }
-      >
-        <i
-          className="gicon gicon-shield"
-          style={
-            Object {
-              "height": "25px",
-              "width": "25px",
-            }
-          }
-        />
-      </td>
-      <td
-        style={
-          Object {
-            "width": "90%",
-          }
-        }
-      >
-        Admin
-        <span
-          className="filter-table__weak-italic"
-        >
-           (Role)
-        </span>
-      </td>
-      <td />
-      <td
-        className="query-keyword"
-      >
-        Can
-      </td>
-      <td>
-        <div
-          className="gf-form"
-        >
-          <DescriptionPicker
-            className="gf-form-input--form-dropdown-right"
-            disabled={true}
-            onSelected={[Function]}
-            optionsWithDesc={
-              Array [
-                Object {
-                  "description": "Can query data source.",
-                  "label": "Query",
-                  "value": 1,
-                },
-                Object {
-                  "description": "",
-                  "label": "Admin",
-                  "value": 2,
-                },
-              ]
-            }
-            value={2}
-          />
-        </div>
-      </td>
-      <td>
-        <button
-          className="btn btn-inverse btn-small"
-        >
-          <i
-            className="fa fa-lock"
-          />
-        </button>
-      </td>
-    </tr>
-    <tr
-      key="2-0"
-    >
-      <td
-        style={
-          Object {
-            "width": "1%",
-          }
-        }
-      >
-        <img
-          className="filter-table__avatar"
-          src="/avatar/926aa85c6bcefa0b4deca3223f337ae1"
-        />
-      </td>
-      <td
-        style={
-          Object {
-            "width": "90%",
-          }
-        }
-      >
-        <span
-          key="name"
-        >
-          testUser
-           
-        </span>
-        <span
-          className="filter-table__weak-italic"
-          key="description"
-        >
-          (User)
-        </span>
-      </td>
-      <td />
-      <td
-        className="query-keyword"
-      >
-        Can
-      </td>
-      <td>
-        <div
-          className="gf-form"
-        >
-          <DescriptionPicker
-            className="gf-form-input--form-dropdown-right"
-            disabled={true}
-            onSelected={[Function]}
-            optionsWithDesc={
-              Array [
-                Object {
-                  "description": "Can query data source.",
-                  "label": "Query",
-                  "value": 1,
-                },
-                Object {
-                  "description": "",
-                  "label": "Admin",
-                  "value": 2,
-                },
-              ]
-            }
-            value={1}
-          />
-        </div>
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-small"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
-    <tr
-      key="6-1"
-    >
-      <td
-        style={
-          Object {
-            "width": "1%",
-          }
-        }
-      >
-        <img
-          className="filter-table__avatar"
-          src="/avatar/93c0801b955cbd443a8cfa91a401d7bc"
-        />
-      </td>
-      <td
-        style={
-          Object {
-            "width": "90%",
-          }
-        }
-      >
-        <span
-          key="name"
-        >
-          A-team
-           
-        </span>
-        <span
-          className="filter-table__weak-italic"
-          key="description"
-        >
-          (Team)
-        </span>
-      </td>
-      <td />
-      <td
-        className="query-keyword"
-      >
-        Can
-      </td>
-      <td>
-        <div
-          className="gf-form"
-        >
-          <DescriptionPicker
-            className="gf-form-input--form-dropdown-right"
-            disabled={true}
-            onSelected={[Function]}
-            optionsWithDesc={
-              Array [
-                Object {
-                  "description": "Can query data source.",
-                  "label": "Query",
-                  "value": 1,
-                },
-                Object {
-                  "description": "",
-                  "label": "Admin",
-                  "value": 2,
-                },
-              ]
-            }
-            value={1}
-          />
-        </div>
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-small"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
diff --git a/public/app/features/datasources/__snapshots__/EditDataSourcePage.test.tsx.snap b/public/app/features/datasources/__snapshots__/EditDataSourcePage.test.tsx.snap
deleted file mode 100644
index 7eee977737f..00000000000
--- a/public/app/features/datasources/__snapshots__/EditDataSourcePage.test.tsx.snap
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
-  >
-    <Connect(DataSourceSettings) />
-  </div>
-</div>
-`;
-
-exports[`Render should render permissions page 1`] = `
-<div>
-  <PageHeader
-    model={Object {}}
-  />
-  <div
-    className="page-container page-body"
-  >
-    <Connect(DataSourcePermissions) />
-  </div>
-</div>
-`;
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index bb8fce8424a..2406668d118 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -14,43 +14,49 @@ export enum ActionTypes {
   SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY',
   SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE',
   SetDataSourceTypeSearchQuery = 'SET_DATA_SOURCE_TYPE_SEARCH_QUERY',
+  SetDataSourceName = 'SET_DATA_SOURCE_NAME',
 }
 
-export interface LoadDataSourcesAction {
+interface LoadDataSourcesAction {
   type: ActionTypes.LoadDataSources;
   payload: DataSource[];
 }
 
-export interface SetDataSourcesSearchQueryAction {
+interface SetDataSourcesSearchQueryAction {
   type: ActionTypes.SetDataSourcesSearchQuery;
   payload: string;
 }
 
-export interface SetDataSourcesLayoutModeAction {
+interface SetDataSourcesLayoutModeAction {
   type: ActionTypes.SetDataSourcesLayoutMode;
   payload: LayoutMode;
 }
 
-export interface LoadDataSourceTypesAction {
+interface LoadDataSourceTypesAction {
   type: ActionTypes.LoadDataSourceTypes;
   payload: Plugin[];
 }
 
-export interface SetDataSourceTypeSearchQueryAction {
+interface SetDataSourceTypeSearchQueryAction {
   type: ActionTypes.SetDataSourceTypeSearchQuery;
   payload: string;
 }
 
-export interface LoadDataSourceAction {
+interface LoadDataSourceAction {
   type: ActionTypes.LoadDataSource;
   payload: DataSource;
 }
 
-export interface LoadDataSourceMetaAction {
+interface LoadDataSourceMetaAction {
   type: ActionTypes.LoadDataSourceMeta;
   payload: Plugin;
 }
 
+interface SetDataSourceNameAction {
+  type: ActionTypes.SetDataSourceName;
+  payload: string;
+}
+
 const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({
   type: ActionTypes.LoadDataSources,
   payload: dataSources,
@@ -86,6 +92,11 @@ export const setDataSourceTypeSearchQuery = (query: string): SetDataSourceTypeSe
   payload: query,
 });
 
+export const setDataSourceName = (name: string) => ({
+  type: ActionTypes.SetDataSourceName,
+  payload: name,
+});
+
 export type Action =
   | LoadDataSourcesAction
   | SetDataSourcesSearchQueryAction
@@ -95,7 +106,8 @@ export type Action =
   | SetDataSourceTypeSearchQueryAction
   | LoadDataSourceAction
   | UpdateNavIndexAction
-  | LoadDataSourceMetaAction;
+  | LoadDataSourceMetaAction
+  | SetDataSourceNameAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
diff --git a/public/app/features/datasources/state/selectors.ts b/public/app/features/datasources/state/selectors.ts
index eef176eb49a..3d14f2db453 100644
--- a/public/app/features/datasources/state/selectors.ts
+++ b/public/app/features/datasources/state/selectors.ts
@@ -20,7 +20,7 @@ export const getDataSource = (state, dataSourceId): DataSource | null => {
   if (state.dataSource.id === parseInt(dataSourceId, 10)) {
     return state.dataSource;
   }
-  return null;
+  return {} as DataSource;
 };
 
 export const getDataSourcesSearchQuery = state => state.searchQuery;
diff --git a/scripts/webpack/webpack.hot.js b/scripts/webpack/webpack.hot.js
index 0305a6f465c..feec67b2fd0 100644
--- a/scripts/webpack/webpack.hot.js
+++ b/scripts/webpack/webpack.hot.js
@@ -47,7 +47,7 @@ module.exports = merge(common, {
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
+        test: /(?!.*\.test)\.tsx$/,
         exclude: /node_modules/,
         use: [{
           loader: 'babel-loader',

From 5140325a0d6ab91c7c267d3bca79344e88defac8 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 31 Oct 2018 13:23:05 +0100
Subject: [PATCH 06/25] renders angular component

---
 .../datasources/settings/BasicSettings.tsx    | 34 ++++++++
 .../datasources/settings/ButtonRow.tsx        | 25 ++++++
 .../{ => settings}/DataSourceSettings.tsx     | 78 ++++++-------------
 .../PluginSettings.tsx}                       | 18 ++---
 .../features/datasources/state/selectors.ts   |  8 ++
 public/app/routes/routes.ts                   |  2 +-
 scripts/webpack/webpack.hot.js                | 70 ++++++++---------
 7 files changed, 133 insertions(+), 102 deletions(-)
 create mode 100644 public/app/features/datasources/settings/BasicSettings.tsx
 create mode 100644 public/app/features/datasources/settings/ButtonRow.tsx
 rename public/app/features/datasources/{ => settings}/DataSourceSettings.tsx (55%)
 rename public/app/features/datasources/{DataSourcePluginSettings.tsx => settings/PluginSettings.tsx} (59%)

diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx
new file mode 100644
index 00000000000..f4c26f1e27f
--- /dev/null
+++ b/public/app/features/datasources/settings/BasicSettings.tsx
@@ -0,0 +1,34 @@
+import React, { SFC } from 'react';
+import { Label } from '../../../core/components/Forms/Forms';
+
+export interface Props {
+  dataSourceName: string;
+  onChange: (name: string) => void;
+}
+
+const BasicSettings: SFC<Props> = ({ dataSourceName, onChange }) => {
+  return (
+    <div className="gf-form-group">
+      <div className="gf-form max-width-30">
+        <Label
+          tooltip={
+            'The name is used when you select the data source in panels. The Default data source is' +
+            'preselected in new panels.'
+          }
+        >
+          Name
+        </Label>
+        <input
+          className="gf-form-input max-width-23"
+          type="text"
+          value={dataSourceName}
+          placeholder="Name"
+          onChange={event => onChange(event.target.value)}
+          required
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BasicSettings;
diff --git a/public/app/features/datasources/settings/ButtonRow.tsx b/public/app/features/datasources/settings/ButtonRow.tsx
new file mode 100644
index 00000000000..3ca5e7ea2c4
--- /dev/null
+++ b/public/app/features/datasources/settings/ButtonRow.tsx
@@ -0,0 +1,25 @@
+import React, { SFC } from 'react';
+
+export interface Props {
+  isReadOnly: boolean;
+  onDelete: (event) => void;
+  onSubmit: (event) => void;
+}
+
+const ButtonRow: SFC<Props> = ({ isReadOnly, onDelete, onSubmit }) => {
+  return (
+    <div className="gf-form-button-row">
+      <button type="submit" className="btn btn-success" disabled={isReadOnly} onClick={event => onSubmit(event)}>
+        Save &amp; Test
+      </button>
+      <button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={event => onDelete(event)}>
+        Delete
+      </button>
+      <a className="btn btn-inverse" href="/datasources">
+        Back
+      </a>
+    </div>
+  );
+};
+
+export default ButtonRow;
diff --git a/public/app/features/datasources/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx
similarity index 55%
rename from public/app/features/datasources/DataSourceSettings.tsx
rename to public/app/features/datasources/settings/DataSourceSettings.tsx
index c312e0b9b0b..560f636362e 100644
--- a/public/app/features/datasources/DataSourceSettings.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.tsx
@@ -1,15 +1,16 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import { DataSource, NavModel, Plugin } from 'app/types';
-import PageHeader from '../../core/components/PageHeader/PageHeader';
-import DataSourcePluginSettings from './DataSourcePluginSettings';
-import { loadDataSource, setDataSourceName } from './state/actions';
-import { getNavModel } from '../../core/selectors/navModel';
-import { getRouteParamsId } from '../../core/selectors/location';
-import { Label } from '../../core/components/Forms/Forms';
-import PageLoader from '../../core/components/PageLoader/PageLoader';
-import { getDataSource } from './state/selectors';
+import { DataSource, NavModel, Plugin } from 'app/types/';
+import PageHeader from '../../../core/components/PageHeader/PageHeader';
+import PageLoader from '../../../core/components/PageLoader/PageLoader';
+import PluginSettings from './PluginSettings';
+import BasicSettings from './BasicSettings';
+import ButtonRow from './ButtonRow';
+import { loadDataSource, setDataSourceName } from '../state/actions';
+import { getNavModel } from '../../../core/selectors/navModel';
+import { getRouteParamsId } from '../../../core/selectors/location';
+import { getDataSource, getDataSourceMeta } from '../state/selectors';
 
 export interface Props {
   navModel: NavModel;
@@ -45,7 +46,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     console.log(event);
   };
 
-  isReadyOnly() {
+  isReadOnly() {
     return this.props.dataSource.readOnly === true;
   }
 
@@ -87,59 +88,27 @@ export class DataSourceSettings extends PureComponent<Props, State> {
           <div className="page-container page-body">
             <div>
               <form onSubmit={this.onSubmit}>
-                <div className="gf-form-group">
-                  <div className="gf-form max-width-30">
-                    <Label
-                      tooltip={
-                        'The name is used when you select the data source in panels. The Default data source is' +
-                        'preselected in new panels.'
-                      }
-                    >
-                      Name
-                    </Label>
-                    <input
-                      className="gf-form-input max-width-23"
-                      type="text"
-                      value={this.props.dataSource.name}
-                      placeholder="Name"
-                      onChange={event => this.props.setDataSourceName(event.target.value)}
-                      required
-                    />
-                  </div>
-                </div>
+                <BasicSettings
+                  dataSourceName={this.props.dataSource.name}
+                  onChange={name => this.props.setDataSourceName(name)}
+                />
 
                 {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
 
-                {this.isReadyOnly() ? (
+                {this.isReadOnly() ? (
                   <div className="grafana-info-box span8">
                     This datasource was added by config and cannot be modified using the UI. Please contact your server
                     admin to update this datasource.
                   </div>
                 ) : (
-                  <DataSourcePluginSettings dataSource={dataSource} dataSourceMeta={dataSourceMeta} />
+                  dataSourceMeta.module && <PluginSettings dataSource={dataSource} dataSourceMeta={dataSourceMeta} />
                 )}
 
-                <div className="gf-form-button-row">
-                  <button
-                    type="submit"
-                    className="btn btn-success"
-                    disabled={this.isReadyOnly()}
-                    onClick={this.onSubmit}
-                  >
-                    Save &amp; Test
-                  </button>
-                  <button
-                    type="submit"
-                    className="btn btn-danger"
-                    disabled={this.isReadyOnly()}
-                    onClick={this.onDelete}
-                  >
-                    Delete
-                  </button>
-                  <a className="btn btn-inverse" href="/datasources">
-                    Back
-                  </a>
-                </div>
+                <ButtonRow
+                  onSubmit={event => this.onSubmit(event)}
+                  isReadOnly={this.isReadOnly()}
+                  onDelete={event => this.onDelete(event)}
+                />
               </form>
             </div>
           </div>
@@ -151,11 +120,12 @@ export class DataSourceSettings extends PureComponent<Props, State> {
 
 function mapStateToProps(state) {
   const pageId = getRouteParamsId(state.location);
+  const dataSource = getDataSource(state.dataSources, pageId);
 
   return {
     navModel: getNavModel(state.navIndex, `datasource-settings-${pageId}`),
     dataSource: getDataSource(state.dataSources, pageId),
-    dataSourceMeta: state.dataSources.dataSourceMeta,
+    dataSourceMeta: getDataSourceMeta(state.dataSources, dataSource.type),
     pageId: pageId,
   };
 }
diff --git a/public/app/features/datasources/DataSourcePluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx
similarity index 59%
rename from public/app/features/datasources/DataSourcePluginSettings.tsx
rename to public/app/features/datasources/settings/PluginSettings.tsx
index 4b38b773300..4750d8cbde9 100644
--- a/public/app/features/datasources/DataSourcePluginSettings.tsx
+++ b/public/app/features/datasources/settings/PluginSettings.tsx
@@ -1,31 +1,29 @@
 import React, { PureComponent } from 'react';
-import { DataSource, Plugin } from 'app/types';
+import { DataSource, Plugin } from 'app/types/';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
-import { importPluginModule } from '../plugins/plugin_loader';
+
 interface Props {
   dataSource: DataSource;
   dataSourceMeta: Plugin;
 }
 
-export class DataSourcePluginSettings extends PureComponent<Props> {
+export class PluginSettings extends PureComponent<Props> {
   element: any;
   component: AngularComponent;
 
   componentDidMount() {
+    const { dataSource, dataSourceMeta } = this.props;
+
     if (!this.element) {
       return;
     }
 
-    importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => {
-      console.log(pluginExports);
-    });
-
     const loader = getAngularLoader();
     const template = '<plugin-component type="datasource-config-ctrl" />';
     const scopeProps = {
       ctrl: {
-        dataSourceMeta: this.props.dataSourceMeta,
-        current: this.props.dataSource,
+        datasourceMeta: dataSourceMeta,
+        current: dataSource,
       },
     };
 
@@ -37,4 +35,4 @@ export class DataSourcePluginSettings extends PureComponent<Props> {
   }
 }
 
-export default DataSourcePluginSettings;
+export default PluginSettings;
diff --git a/public/app/features/datasources/state/selectors.ts b/public/app/features/datasources/state/selectors.ts
index 3d14f2db453..2466e465d1d 100644
--- a/public/app/features/datasources/state/selectors.ts
+++ b/public/app/features/datasources/state/selectors.ts
@@ -23,6 +23,14 @@ export const getDataSource = (state, dataSourceId): DataSource | null => {
   return {} as DataSource;
 };
 
+export const getDataSourceMeta = (state, type): Plugin => {
+  if (state.dataSourceMeta.id === type) {
+    return state.dataSourceMeta;
+  }
+
+  return {} as Plugin;
+};
+
 export const getDataSourcesSearchQuery = state => state.searchQuery;
 export const getDataSourcesLayoutMode = state => state.layoutMode;
 export const getDataSourcesCount = state => state.dataSourcesCount;
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index 862aa413884..af2d528afe9 100644
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@@ -14,7 +14,7 @@ import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage';
 import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
 import UsersListPage from 'app/features/users/UsersListPage';
 import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
-import DataSourceSettings from '../features/datasources/DataSourceSettings';
+import DataSourceSettings from '../features/datasources/settings/DataSourceSettings';
 
 /** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
diff --git a/scripts/webpack/webpack.hot.js b/scripts/webpack/webpack.hot.js
index feec67b2fd0..4288699bce1 100644
--- a/scripts/webpack/webpack.hot.js
+++ b/scripts/webpack/webpack.hot.js
@@ -4,22 +4,19 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 module.exports = merge(common, {
   entry: {
-    app: [
-      'webpack-dev-server/client?http://localhost:3333',
-      './public/app/dev.ts',
-    ],
+    app: ['webpack-dev-server/client?http://localhost:3333', './public/app/dev.ts'],
   },
 
   output: {
     path: path.resolve(__dirname, '../../public/build'),
     filename: '[name].[hash].js',
-    publicPath: "/public/build/",
+    publicPath: '/public/build/',
     pathinfo: false,
   },
 
@@ -34,8 +31,8 @@ module.exports = merge(common, {
     hot: true,
     port: 3333,
     proxy: {
-      '!/public/build': 'http://localhost:3000'
-    }
+      '!/public/build': 'http://localhost:3000',
+    },
   },
 
   optimization: {
@@ -47,40 +44,39 @@ module.exports = merge(common, {
   module: {
     rules: [
       {
-        test: /(?!.*\.test)\.tsx$/,
+        test: /(?!.*\.test)\.(ts|tsx)$/,
         exclude: /node_modules/,
-        use: [{
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
-            babelrc: false,
-            plugins: [
-              'syntax-dynamic-import',
-              'react-hot-loader/babel'
-            ]
-          }
-        },
-        {
-          loader: 'ts-loader',
-          options: {
-            transpileOnly: true,
-            experimentalWatchApi: true
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+              babelrc: false,
+              plugins: ['syntax-dynamic-import', 'react-hot-loader/babel'],
+            },
           },
-        }],
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              experimentalWatchApi: true,
+            },
+          },
+        ],
       },
       {
         test: /\.scss$/,
         use: [
-          "style-loader", // creates style nodes from JS strings
-          "css-loader", // translates CSS into CommonJS
-          "sass-loader" // compiles Sass to CSS
-        ]
+          'style-loader', // creates style nodes from JS strings
+          'css-loader', // translates CSS into CommonJS
+          'sass-loader', // compiles Sass to CSS
+        ],
       },
       {
         test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-        loader: 'file-loader'
+        loader: 'file-loader',
       },
-    ]
+    ],
   },
 
   plugins: [
@@ -89,16 +85,16 @@ module.exports = merge(common, {
       filename: path.resolve(__dirname, '../../public/views/index.html'),
       template: path.resolve(__dirname, '../../public/views/index.template.html'),
       inject: 'body',
-      alwaysWriteToDisk: true
+      alwaysWriteToDisk: true,
     }),
     new HtmlWebpackHarddiskPlugin(),
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.DefinePlugin({
-      'GRAFANA_THEME': JSON.stringify(process.env.GRAFANA_THEME || 'dark'),
+      GRAFANA_THEME: JSON.stringify(process.env.GRAFANA_THEME || 'dark'),
       'process.env': {
-        'NODE_ENV': JSON.stringify('development')
-      }
+        NODE_ENV: JSON.stringify('development'),
+      },
     }),
-  ]
+  ],
 });

From 1656f03acd927c01d9732d115bede89aefc43468 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 31 Oct 2018 13:29:02 +0100
Subject: [PATCH 07/25] cleaned up render

---
 .../settings/DataSourceSettings.tsx           | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx
index 560f636362e..bc20a28790b 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.tsx
@@ -76,13 +76,22 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     return null;
   }
 
+  renderIsReadOnlyMessage() {
+    return (
+      <div className="grafana-info-box span8">
+        This datasource was added by config and cannot be modified using the UI. Please contact your server admin to
+        update this datasource.
+      </div>
+    );
+  }
+
   render() {
     const { dataSource, dataSourceMeta, navModel } = this.props;
 
     return (
       <div>
         <PageHeader model={navModel} />
-        {Object.keys(dataSource).length === 0 && Object.keys(dataSourceMeta).length === 0 ? (
+        {Object.keys(dataSource).length === 0 ? (
           <PageLoader pageName="Data source settings" />
         ) : (
           <div className="page-container page-body">
@@ -95,14 +104,9 @@ export class DataSourceSettings extends PureComponent<Props, State> {
 
                 {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
 
-                {this.isReadOnly() ? (
-                  <div className="grafana-info-box span8">
-                    This datasource was added by config and cannot be modified using the UI. Please contact your server
-                    admin to update this datasource.
-                  </div>
-                ) : (
-                  dataSourceMeta.module && <PluginSettings dataSource={dataSource} dataSourceMeta={dataSourceMeta} />
-                )}
+                {this.isReadOnly()
+                  ? this.renderIsReadOnlyMessage()
+                  : dataSourceMeta.module && <PluginSettings dataSource={dataSource} dataSourceMeta={dataSourceMeta} />}
 
                 <ButtonRow
                   onSubmit={event => this.onSubmit(event)}

From 2342f60a313f9f45b88e473c4758dcb127d00c3a Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 31 Oct 2018 14:28:16 +0100
Subject: [PATCH 08/25] added actions

---
 .../datasources/settings/ButtonRow.tsx        |  4 +--
 .../settings/DataSourceSettings.tsx           | 28 +++++++++++++++----
 .../app/features/datasources/state/actions.ts | 18 ++++++++++++
 .../features/datasources/state/reducers.ts    |  3 ++
 4 files changed, 46 insertions(+), 7 deletions(-)

diff --git a/public/app/features/datasources/settings/ButtonRow.tsx b/public/app/features/datasources/settings/ButtonRow.tsx
index 3ca5e7ea2c4..cb70b29c706 100644
--- a/public/app/features/datasources/settings/ButtonRow.tsx
+++ b/public/app/features/datasources/settings/ButtonRow.tsx
@@ -2,7 +2,7 @@ import React, { SFC } from 'react';
 
 export interface Props {
   isReadOnly: boolean;
-  onDelete: (event) => void;
+  onDelete: () => void;
   onSubmit: (event) => void;
 }
 
@@ -12,7 +12,7 @@ const ButtonRow: SFC<Props> = ({ isReadOnly, onDelete, onSubmit }) => {
       <button type="submit" className="btn btn-success" disabled={isReadOnly} onClick={event => onSubmit(event)}>
         Save &amp; Test
       </button>
-      <button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={event => onDelete(event)}>
+      <button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={onDelete}>
         Delete
       </button>
       <a className="btn btn-inverse" href="/datasources">
diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx
index bc20a28790b..f7b870064c5 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.tsx
@@ -7,18 +7,21 @@ import PageLoader from '../../../core/components/PageLoader/PageLoader';
 import PluginSettings from './PluginSettings';
 import BasicSettings from './BasicSettings';
 import ButtonRow from './ButtonRow';
-import { loadDataSource, setDataSourceName } from '../state/actions';
+import { deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
 import { getNavModel } from '../../../core/selectors/navModel';
 import { getRouteParamsId } from '../../../core/selectors/location';
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
+import appEvents from '../../../core/app_events';
 
 export interface Props {
   navModel: NavModel;
   dataSource: DataSource;
   dataSourceMeta: Plugin;
   pageId: number;
+  deleteDataSource: typeof deleteDataSource;
   loadDataSource: typeof loadDataSource;
   setDataSourceName: typeof setDataSourceName;
+  updateDataSource: typeof updateDataSource;
 }
 interface State {
   name: string;
@@ -39,11 +42,24 @@ export class DataSourceSettings extends PureComponent<Props, State> {
 
   onSubmit = event => {
     event.preventDefault();
-    console.log(event);
+
+    this.props.updateDataSource();
   };
 
-  onDelete = event => {
-    console.log(event);
+  onDelete = () => {
+    appEvents.emit('confirm-modal', {
+      title: 'Delete',
+      text: 'Are you sure you want to delete this data source?',
+      yesText: 'Delete',
+      icon: 'fa-trash',
+      onConfirm: () => {
+        this.confirmDelete();
+      },
+    });
+  };
+
+  confirmDelete = () => {
+    this.props.deleteDataSource();
   };
 
   isReadOnly() {
@@ -111,7 +127,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
                 <ButtonRow
                   onSubmit={event => this.onSubmit(event)}
                   isReadOnly={this.isReadOnly()}
-                  onDelete={event => this.onDelete(event)}
+                  onDelete={this.onDelete}
                 />
               </form>
             </div>
@@ -135,8 +151,10 @@ function mapStateToProps(state) {
 }
 
 const mapDispatchToProps = {
+  deleteDataSource,
   loadDataSource,
   setDataSourceName,
+  updateDataSource,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings));
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index 2406668d118..cb0030eb685 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -157,6 +157,24 @@ export function loadDataSourceTypes(): ThunkResult<void> {
   };
 }
 
+export function updateDataSource(): ThunkResult<void> {
+  return async (dispatch, getStore) => {
+    const dataSource = getStore().dataSources.dataSource;
+
+    await getBackendSrv().put(`/api/datasources/${dataSource.id}`, dataSource);
+    dispatch(loadDataSource(dataSource.id));
+  };
+}
+
+export function deleteDataSource(): ThunkResult<void> {
+  return async (dispatch, getStore) => {
+    const dataSource = getStore().dataSources.dataSource;
+
+    await getBackendSrv().delete(`/api/datasources/${dataSource.id}`);
+    dispatch(updateLocation({ path: '/datasources' }));
+  };
+}
+
 export function nameExits(dataSources, name) {
   return (
     dataSources.filter(dataSource => {
diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts
index 9ad3c97b448..33feae6770a 100644
--- a/public/app/features/datasources/state/reducers.ts
+++ b/public/app/features/datasources/state/reducers.ts
@@ -36,6 +36,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
 
     case ActionTypes.LoadDataSourceMeta:
       return { ...state, dataSourceMeta: action.payload };
+
+    case ActionTypes.SetDataSourceName:
+      return { ...state, dataSource: { ...state.dataSource, name: action.payload } };
   }
 
   return state;

From 7885453bcd7bcdd9658eed1bc92bd32f24042b05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 31 Oct 2018 09:19:08 -0700
Subject: [PATCH 09/25] listen for changes in angular land and propagate that
 back to react

---
 .../datasources/settings/PluginSettings.tsx        | 14 +++++++++++++-
 public/app/features/plugins/plugin_component.ts    |  8 ++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/public/app/features/datasources/settings/PluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx
index 4750d8cbde9..d9906b449c9 100644
--- a/public/app/features/datasources/settings/PluginSettings.tsx
+++ b/public/app/features/datasources/settings/PluginSettings.tsx
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import { DataSource, Plugin } from 'app/types/';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
@@ -23,13 +24,24 @@ export class PluginSettings extends PureComponent<Props> {
     const scopeProps = {
       ctrl: {
         datasourceMeta: dataSourceMeta,
-        current: dataSource,
+        current: _.cloneDeep(dataSource),
       },
+      onModelChanged: this.onModelChanged,
     };
 
     this.component = loader.load(this.element, scopeProps, template);
   }
 
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  onModelChanged(dataSource: DataSource) {
+    console.log(dataSource);
+  }
+
   render() {
     return <div ref={element => (this.element = element)} />;
   }
diff --git a/public/app/features/plugins/plugin_component.ts b/public/app/features/plugins/plugin_component.ts
index 142eb942a30..2fe25c4666d 100644
--- a/public/app/features/plugins/plugin_component.ts
+++ b/public/app/features/plugins/plugin_component.ts
@@ -149,6 +149,14 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
             return { notFound: true };
           }
 
+          scope.$watch(
+            'ctrl.current',
+            () => {
+              scope.onModelChanged(scope.ctrl.current);
+            },
+            true
+          );
+
           return {
             baseUrl: dsMeta.baseUrl,
             name: 'ds-config-' + dsMeta.id,

From 74a0c0e61836efac74fc4510f33b37b3c48f4505 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 31 Oct 2018 10:03:03 -0700
Subject: [PATCH 10/25] update angular state on props update

---
 .../datasources/settings/PluginSettings.tsx   | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/public/app/features/datasources/settings/PluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx
index d9906b449c9..ae94fbc0685 100644
--- a/public/app/features/datasources/settings/PluginSettings.tsx
+++ b/public/app/features/datasources/settings/PluginSettings.tsx
@@ -11,25 +11,33 @@ interface Props {
 export class PluginSettings extends PureComponent<Props> {
   element: any;
   component: AngularComponent;
+  scopeProps: any;
+
+  constructor(props) {
+    super(props);
+
+    this.scopeProps = {
+      ctrl: {
+        datasourceMeta: this.props.dataSourceMeta,
+        current: this.props.dataSource,
+      },
+      onModelChanged: this.onModelChanged,
+    };
+  }
+
+  componentDidUpdate() {
+    this.scopeProps.ctrl.current = this.props.dataSource;
+  }
 
   componentDidMount() {
-    const { dataSource, dataSourceMeta } = this.props;
-
     if (!this.element) {
       return;
     }
 
     const loader = getAngularLoader();
     const template = '<plugin-component type="datasource-config-ctrl" />';
-    const scopeProps = {
-      ctrl: {
-        datasourceMeta: dataSourceMeta,
-        current: _.cloneDeep(dataSource),
-      },
-      onModelChanged: this.onModelChanged,
-    };
 
-    this.component = loader.load(this.element, scopeProps, template);
+    this.component = loader.load(this.element, this.scopeProps, template);
   }
 
   componentWillUnmount() {

From 7fc4b1934b3f9721a723db6b48ad4f76a34cd5be Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 1 Nov 2018 11:19:40 +0100
Subject: [PATCH 11/25] updating state and save

---
 .../settings/DataSourceSettings.tsx           | 29 ++++++++++----
 .../datasources/settings/PluginSettings.tsx   | 39 ++++++++++++-------
 .../app/features/datasources/state/actions.ts |  6 +--
 3 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx
index f7b870064c5..e5e9a60c03c 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.tsx
@@ -7,11 +7,11 @@ import PageLoader from '../../../core/components/PageLoader/PageLoader';
 import PluginSettings from './PluginSettings';
 import BasicSettings from './BasicSettings';
 import ButtonRow from './ButtonRow';
+import appEvents from '../../../core/app_events';
 import { deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
 import { getNavModel } from '../../../core/selectors/navModel';
 import { getRouteParamsId } from '../../../core/selectors/location';
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
-import appEvents from '../../../core/app_events';
 
 export interface Props {
   navModel: NavModel;
@@ -24,8 +24,7 @@ export interface Props {
   updateDataSource: typeof updateDataSource;
 }
 interface State {
-  name: string;
-  showNamePopover: boolean;
+  dataSource: DataSource;
 }
 
 enum DataSourceStates {
@@ -34,6 +33,10 @@ enum DataSourceStates {
 }
 
 export class DataSourceSettings extends PureComponent<Props, State> {
+  state = {
+    dataSource: {} as DataSource,
+  };
+
   async componentDidMount() {
     const { loadDataSource, pageId } = this.props;
 
@@ -43,7 +46,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
   onSubmit = event => {
     event.preventDefault();
 
-    this.props.updateDataSource();
+    this.props.updateDataSource({ ...this.state.dataSource, name: this.props.dataSource.name });
   };
 
   onDelete = () => {
@@ -62,6 +65,12 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     this.props.deleteDataSource();
   };
 
+  onModelChange = dataSource => {
+    this.setState({
+      dataSource: dataSource,
+    });
+  };
+
   isReadOnly() {
     return this.props.dataSource.readOnly === true;
   }
@@ -120,10 +129,14 @@ export class DataSourceSettings extends PureComponent<Props, State> {
 
                 {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
 
-                {this.isReadOnly()
-                  ? this.renderIsReadOnlyMessage()
-                  : dataSourceMeta.module && <PluginSettings dataSource={dataSource} dataSourceMeta={dataSourceMeta} />}
-
+                {this.isReadOnly() && this.renderIsReadOnlyMessage()}
+                {dataSourceMeta.module && (
+                  <PluginSettings
+                    dataSource={dataSource}
+                    dataSourceMeta={dataSourceMeta}
+                    onModelChange={this.onModelChange}
+                  />
+                )}
                 <ButtonRow
                   onSubmit={event => this.onSubmit(event)}
                   isReadOnly={this.isReadOnly()}
diff --git a/public/app/features/datasources/settings/PluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx
index d9906b449c9..c103e8c309c 100644
--- a/public/app/features/datasources/settings/PluginSettings.tsx
+++ b/public/app/features/datasources/settings/PluginSettings.tsx
@@ -1,35 +1,46 @@
-import _ from 'lodash';
 import React, { PureComponent } from 'react';
+import _ from 'lodash';
 import { DataSource, Plugin } from 'app/types/';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 
 interface Props {
   dataSource: DataSource;
   dataSourceMeta: Plugin;
+  onModelChange: (dataSource: DataSource) => void;
 }
 
 export class PluginSettings extends PureComponent<Props> {
   element: any;
   component: AngularComponent;
+  scopeProps: {
+    ctrl: { datasourceMeta: Plugin; current: DataSource };
+    onModelChanged: (dataSource: DataSource) => void;
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.scopeProps = {
+      ctrl: { datasourceMeta: props.dataSourceMeta, current: _.cloneDeep(props.dataSource) },
+      onModelChanged: this.onModelChanged,
+    };
+  }
 
   componentDidMount() {
-    const { dataSource, dataSourceMeta } = this.props;
-
     if (!this.element) {
       return;
     }
 
     const loader = getAngularLoader();
     const template = '<plugin-component type="datasource-config-ctrl" />';
-    const scopeProps = {
-      ctrl: {
-        datasourceMeta: dataSourceMeta,
-        current: _.cloneDeep(dataSource),
-      },
-      onModelChanged: this.onModelChanged,
-    };
 
-    this.component = loader.load(this.element, scopeProps, template);
+    this.component = loader.load(this.element, this.scopeProps, template);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.dataSource !== prevProps.dataSource) {
+      this.scopeProps.ctrl.current = _.cloneDeep(this.props.dataSource);
+    }
   }
 
   componentWillUnmount() {
@@ -38,9 +49,9 @@ export class PluginSettings extends PureComponent<Props> {
     }
   }
 
-  onModelChanged(dataSource: DataSource) {
-    console.log(dataSource);
-  }
+  onModelChanged = (dataSource: DataSource) => {
+    this.props.onModelChange(dataSource);
+  };
 
   render() {
     return <div ref={element => (this.element = element)} />;
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index cb0030eb685..ff8af8b4c9d 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -157,10 +157,8 @@ export function loadDataSourceTypes(): ThunkResult<void> {
   };
 }
 
-export function updateDataSource(): ThunkResult<void> {
-  return async (dispatch, getStore) => {
-    const dataSource = getStore().dataSources.dataSource;
-
+export function updateDataSource(dataSource: DataSource): ThunkResult<void> {
+  return async dispatch => {
     await getBackendSrv().put(`/api/datasources/${dataSource.id}`, dataSource);
     dispatch(loadDataSource(dataSource.id));
   };

From 2837fd515f6831b2409777dcda5003f3c49f81f0 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 1 Nov 2018 13:45:52 +0100
Subject: [PATCH 12/25] tests

---
 .../settings/BasicSettings.test.tsx           |  20 +
 .../datasources/settings/ButtonRow.test.tsx   |  31 ++
 .../settings/DataSourceSettings.test.tsx      |  63 +++
 .../datasources/settings/PluginSettings.tsx   |   2 +-
 .../__snapshots__/BasicSettings.test.tsx.snap |  25 ++
 .../__snapshots__/ButtonRow.test.tsx.snap     |  59 +++
 .../DataSourceSettings.test.tsx.snap          | 367 ++++++++++++++++++
 7 files changed, 566 insertions(+), 1 deletion(-)
 create mode 100644 public/app/features/datasources/settings/BasicSettings.test.tsx
 create mode 100644 public/app/features/datasources/settings/ButtonRow.test.tsx
 create mode 100644 public/app/features/datasources/settings/DataSourceSettings.test.tsx
 create mode 100644 public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
 create mode 100644 public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
 create mode 100644 public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap

diff --git a/public/app/features/datasources/settings/BasicSettings.test.tsx b/public/app/features/datasources/settings/BasicSettings.test.tsx
new file mode 100644
index 00000000000..6729830bb75
--- /dev/null
+++ b/public/app/features/datasources/settings/BasicSettings.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import BasicSettings, { Props } from './BasicSettings';
+
+const setup = () => {
+  const props: Props = {
+    dataSourceName: 'Graphite',
+    onChange: jest.fn(),
+  };
+
+  return shallow(<BasicSettings {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/datasources/settings/ButtonRow.test.tsx b/public/app/features/datasources/settings/ButtonRow.test.tsx
new file mode 100644
index 00000000000..0acab8941ff
--- /dev/null
+++ b/public/app/features/datasources/settings/ButtonRow.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ButtonRow, { Props } from './ButtonRow';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    isReadOnly: true,
+    onSubmit: jest.fn(),
+    onDelete: jest.fn(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<ButtonRow {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render with buttons enabled', () => {
+    const wrapper = setup({
+      isReadOnly: false,
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/datasources/settings/DataSourceSettings.test.tsx b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
new file mode 100644
index 00000000000..73c05fdd518
--- /dev/null
+++ b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DataSourceSettings, Props } from './DataSourceSettings';
+import { DataSource, NavModel } from '../../../types';
+import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
+import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    navModel: {} as NavModel,
+    dataSource: getMockDataSource(),
+    dataSourceMeta: getMockPlugin(),
+    pageId: 1,
+    deleteDataSource: jest.fn(),
+    loadDataSource: jest.fn(),
+    setDataSourceName: jest.fn(),
+    updateDataSource: jest.fn(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<DataSourceSettings {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render loader', () => {
+    const wrapper = setup({
+      dataSource: {} as DataSource,
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render beta info text', () => {
+    const wrapper = setup({
+      dataSourceMeta: { ...getMockPlugin(), state: 'beta' },
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render alpha info text', () => {
+    const wrapper = setup({
+      dataSourceMeta: { ...getMockPlugin(), state: 'alpha' },
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render is ready only message', () => {
+    const wrapper = setup({
+      dataSource: { ...getMockDataSource(), readOnly: true },
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/app/features/datasources/settings/PluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx
index c103e8c309c..ec6981927fa 100644
--- a/public/app/features/datasources/settings/PluginSettings.tsx
+++ b/public/app/features/datasources/settings/PluginSettings.tsx
@@ -3,7 +3,7 @@ import _ from 'lodash';
 import { DataSource, Plugin } from 'app/types/';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 
-interface Props {
+export interface Props {
   dataSource: DataSource;
   dataSourceMeta: Plugin;
   onModelChange: (dataSource: DataSource) => void;
diff --git a/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
new file mode 100644
index 00000000000..0c3e8c86dd4
--- /dev/null
+++ b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="gf-form-group"
+>
+  <div
+    className="gf-form max-width-30"
+  >
+    <Component
+      tooltip="The name is used when you select the data source in panels. The Default data source ispreselected in new panels."
+    >
+      Name
+    </Component>
+    <input
+      className="gf-form-input max-width-23"
+      onChange={[Function]}
+      placeholder="Name"
+      required={true}
+      type="text"
+      value="Graphite"
+    />
+  </div>
+</div>
+`;
diff --git a/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
new file mode 100644
index 00000000000..bd190f60b03
--- /dev/null
+++ b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<div
+  className="gf-form-button-row"
+>
+  <button
+    className="btn btn-success"
+    disabled={true}
+    onClick={[Function]}
+    type="submit"
+  >
+    Save & Test
+  </button>
+  <button
+    className="btn btn-danger"
+    disabled={true}
+    onClick={[MockFunction]}
+    type="submit"
+  >
+    Delete
+  </button>
+  <a
+    className="btn btn-inverse"
+    href="/datasources"
+  >
+    Back
+  </a>
+</div>
+`;
+
+exports[`Render should render with buttons enabled 1`] = `
+<div
+  className="gf-form-button-row"
+>
+  <button
+    className="btn btn-success"
+    disabled={false}
+    onClick={[Function]}
+    type="submit"
+  >
+    Save & Test
+  </button>
+  <button
+    className="btn btn-danger"
+    disabled={false}
+    onClick={[MockFunction]}
+    type="submit"
+  >
+    Delete
+  </button>
+  <a
+    className="btn btn-inverse"
+    href="/datasources"
+  >
+    Back
+  </a>
+</div>
+`;
diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
new file mode 100644
index 00000000000..5f44ca09fe4
--- /dev/null
+++ b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
@@ -0,0 +1,367 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render alpha info text 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <BasicSettings
+          dataSourceName="gdev-cloudwatch"
+          onChange={[Function]}
+        />
+        <div
+          className="grafana-info-box"
+        >
+          This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes.
+        </div>
+        <PluginSettings
+          dataSource={
+            Object {
+              "access": "",
+              "basicAuth": false,
+              "basicAuthPassword": "",
+              "basicAuthUser": "",
+              "database": "",
+              "id": 13,
+              "isDefault": false,
+              "jsonData": Object {
+                "authType": "credentials",
+                "defaultRegion": "eu-west-2",
+              },
+              "name": "gdev-cloudwatch",
+              "orgId": 1,
+              "password": "",
+              "readOnly": false,
+              "type": "cloudwatch",
+              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "url": "",
+              "user": "",
+              "withCredentials": false,
+            }
+          }
+          dataSourceMeta={
+            Object {
+              "defaultNavUrl": "some/url",
+              "enabled": false,
+              "hasUpdate": false,
+              "id": "1",
+              "info": Object {
+                "author": Object {
+                  "name": "Grafana Labs",
+                  "url": "url/to/GrafanaLabs",
+                },
+                "description": "pretty decent plugin",
+                "links": Array [
+                  "one link",
+                ],
+                "logos": Object {
+                  "large": "large/logo",
+                  "small": "small/logo",
+                },
+                "screenshots": "screenshot/1",
+                "updated": "2018-09-26",
+                "version": "1",
+              },
+              "latestVersion": "1",
+              "module": Object {},
+              "name": "pretty cool plugin 1",
+              "pinned": false,
+              "state": "alpha",
+              "type": "",
+            }
+          }
+          onModelChange={[Function]}
+        />
+        <ButtonRow
+          isReadOnly={false}
+          onDelete={[Function]}
+          onSubmit={[Function]}
+        />
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render should render beta info text 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <BasicSettings
+          dataSourceName="gdev-cloudwatch"
+          onChange={[Function]}
+        />
+        <div
+          className="grafana-info-box"
+        >
+          This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features.
+        </div>
+        <PluginSettings
+          dataSource={
+            Object {
+              "access": "",
+              "basicAuth": false,
+              "basicAuthPassword": "",
+              "basicAuthUser": "",
+              "database": "",
+              "id": 13,
+              "isDefault": false,
+              "jsonData": Object {
+                "authType": "credentials",
+                "defaultRegion": "eu-west-2",
+              },
+              "name": "gdev-cloudwatch",
+              "orgId": 1,
+              "password": "",
+              "readOnly": false,
+              "type": "cloudwatch",
+              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "url": "",
+              "user": "",
+              "withCredentials": false,
+            }
+          }
+          dataSourceMeta={
+            Object {
+              "defaultNavUrl": "some/url",
+              "enabled": false,
+              "hasUpdate": false,
+              "id": "1",
+              "info": Object {
+                "author": Object {
+                  "name": "Grafana Labs",
+                  "url": "url/to/GrafanaLabs",
+                },
+                "description": "pretty decent plugin",
+                "links": Array [
+                  "one link",
+                ],
+                "logos": Object {
+                  "large": "large/logo",
+                  "small": "small/logo",
+                },
+                "screenshots": "screenshot/1",
+                "updated": "2018-09-26",
+                "version": "1",
+              },
+              "latestVersion": "1",
+              "module": Object {},
+              "name": "pretty cool plugin 1",
+              "pinned": false,
+              "state": "beta",
+              "type": "",
+            }
+          }
+          onModelChange={[Function]}
+        />
+        <ButtonRow
+          isReadOnly={false}
+          onDelete={[Function]}
+          onSubmit={[Function]}
+        />
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render should render component 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <BasicSettings
+          dataSourceName="gdev-cloudwatch"
+          onChange={[Function]}
+        />
+        <PluginSettings
+          dataSource={
+            Object {
+              "access": "",
+              "basicAuth": false,
+              "basicAuthPassword": "",
+              "basicAuthUser": "",
+              "database": "",
+              "id": 13,
+              "isDefault": false,
+              "jsonData": Object {
+                "authType": "credentials",
+                "defaultRegion": "eu-west-2",
+              },
+              "name": "gdev-cloudwatch",
+              "orgId": 1,
+              "password": "",
+              "readOnly": false,
+              "type": "cloudwatch",
+              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "url": "",
+              "user": "",
+              "withCredentials": false,
+            }
+          }
+          dataSourceMeta={
+            Object {
+              "defaultNavUrl": "some/url",
+              "enabled": false,
+              "hasUpdate": false,
+              "id": "1",
+              "info": Object {
+                "author": Object {
+                  "name": "Grafana Labs",
+                  "url": "url/to/GrafanaLabs",
+                },
+                "description": "pretty decent plugin",
+                "links": Array [
+                  "one link",
+                ],
+                "logos": Object {
+                  "large": "large/logo",
+                  "small": "small/logo",
+                },
+                "screenshots": "screenshot/1",
+                "updated": "2018-09-26",
+                "version": "1",
+              },
+              "latestVersion": "1",
+              "module": Object {},
+              "name": "pretty cool plugin 1",
+              "pinned": false,
+              "state": "",
+              "type": "",
+            }
+          }
+          onModelChange={[Function]}
+        />
+        <ButtonRow
+          isReadOnly={false}
+          onDelete={[Function]}
+          onSubmit={[Function]}
+        />
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render should render is ready only message 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div>
+      <form
+        onSubmit={[Function]}
+      >
+        <BasicSettings
+          dataSourceName="gdev-cloudwatch"
+          onChange={[Function]}
+        />
+        <div
+          className="grafana-info-box span8"
+        >
+          This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+        </div>
+        <PluginSettings
+          dataSource={
+            Object {
+              "access": "",
+              "basicAuth": false,
+              "basicAuthPassword": "",
+              "basicAuthUser": "",
+              "database": "",
+              "id": 13,
+              "isDefault": false,
+              "jsonData": Object {
+                "authType": "credentials",
+                "defaultRegion": "eu-west-2",
+              },
+              "name": "gdev-cloudwatch",
+              "orgId": 1,
+              "password": "",
+              "readOnly": true,
+              "type": "cloudwatch",
+              "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
+              "url": "",
+              "user": "",
+              "withCredentials": false,
+            }
+          }
+          dataSourceMeta={
+            Object {
+              "defaultNavUrl": "some/url",
+              "enabled": false,
+              "hasUpdate": false,
+              "id": "1",
+              "info": Object {
+                "author": Object {
+                  "name": "Grafana Labs",
+                  "url": "url/to/GrafanaLabs",
+                },
+                "description": "pretty decent plugin",
+                "links": Array [
+                  "one link",
+                ],
+                "logos": Object {
+                  "large": "large/logo",
+                  "small": "small/logo",
+                },
+                "screenshots": "screenshot/1",
+                "updated": "2018-09-26",
+                "version": "1",
+              },
+              "latestVersion": "1",
+              "module": Object {},
+              "name": "pretty cool plugin 1",
+              "pinned": false,
+              "state": "",
+              "type": "",
+            }
+          }
+          onModelChange={[Function]}
+        />
+        <ButtonRow
+          isReadOnly={true}
+          onDelete={[Function]}
+          onSubmit={[Function]}
+        />
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render should render loader 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <PageLoader
+    pageName="Data source settings"
+  />
+</div>
+`;

From 6493f96ac7084953ed78c5ed1da6d3697be976d2 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 1 Nov 2018 13:47:40 +0100
Subject: [PATCH 13/25] updated snap

---
 .../features/plugins/__snapshots__/PluginList.test.tsx.snap | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap b/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap
index 176304b7b11..5eb82fbefb6 100644
--- a/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap
+++ b/public/app/features/plugins/__snapshots__/PluginList.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`Render should render component 1`] = `
             "version": "1",
           },
           "latestVersion": "1.0",
+          "module": Object {},
           "name": "pretty cool plugin-0",
           "pinned": false,
           "state": "",
@@ -66,6 +67,7 @@ exports[`Render should render component 1`] = `
             "version": "1",
           },
           "latestVersion": "1.1",
+          "module": Object {},
           "name": "pretty cool plugin-1",
           "pinned": false,
           "state": "",
@@ -99,6 +101,7 @@ exports[`Render should render component 1`] = `
             "version": "1",
           },
           "latestVersion": "1.2",
+          "module": Object {},
           "name": "pretty cool plugin-2",
           "pinned": false,
           "state": "",
@@ -132,6 +135,7 @@ exports[`Render should render component 1`] = `
             "version": "1",
           },
           "latestVersion": "1.3",
+          "module": Object {},
           "name": "pretty cool plugin-3",
           "pinned": false,
           "state": "",
@@ -165,6 +169,7 @@ exports[`Render should render component 1`] = `
             "version": "1",
           },
           "latestVersion": "1.4",
+          "module": Object {},
           "name": "pretty cool plugin-4",
           "pinned": false,
           "state": "",
@@ -198,6 +203,7 @@ exports[`Render should render component 1`] = `
             "version": "1",
           },
           "latestVersion": "1.5",
+          "module": Object {},
           "name": "pretty cool plugin-5",
           "pinned": false,
           "state": "",

From 6d5f5b644be80be30a820b7420fd4f0442feefe3 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 1 Nov 2018 13:58:18 +0100
Subject: [PATCH 14/25] reverting script change

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4c817ef6e29..68b7647fb58 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
     "build": "grunt build",
     "test": "grunt test",
     "lint": "tslint -c tslint.json --project tsconfig.json",
-    "jest": "jest --config jest.config.json --notify --watch",
+    "jest": "jest --notify --watch",
     "api-tests": "jest --notify --watch --config=tests/api/jest.js",
     "precommit": "lint-staged && grunt precommit"
   },

From f5966b44af5344629486807ff6751211a4049109 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 1 Nov 2018 13:59:12 +0100
Subject: [PATCH 15/25] removed these unused components

---
 .../core/components/FormSwitch/FormSwitch.tsx | 49 -------------------
 .../components/InfoPopover/InfoPopover.tsx    |  7 ---
 2 files changed, 56 deletions(-)
 delete mode 100644 public/app/core/components/FormSwitch/FormSwitch.tsx
 delete mode 100644 public/app/core/components/InfoPopover/InfoPopover.tsx

diff --git a/public/app/core/components/FormSwitch/FormSwitch.tsx b/public/app/core/components/FormSwitch/FormSwitch.tsx
deleted file mode 100644
index 96260edde8a..00000000000
--- a/public/app/core/components/FormSwitch/FormSwitch.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-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;
diff --git a/public/app/core/components/InfoPopover/InfoPopover.tsx b/public/app/core/components/InfoPopover/InfoPopover.tsx
deleted file mode 100644
index eb08349aef1..00000000000
--- a/public/app/core/components/InfoPopover/InfoPopover.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React, { SFC } from 'react';
-interface Props {}
-const InfoPopover: SFC<Props> = props => {
-  return <div />;
-};
-
-export default InfoPopover;

From f95b80b7e13e6384d7e9639a4f5ea4714ee132c9 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 1 Nov 2018 14:01:06 +0100
Subject: [PATCH 16/25] remove this

---
 .../datasources/AddDataSourcePermissions.tsx  | 123 ------------------
 1 file changed, 123 deletions(-)
 delete mode 100644 public/app/features/datasources/AddDataSourcePermissions.tsx

diff --git a/public/app/features/datasources/AddDataSourcePermissions.tsx b/public/app/features/datasources/AddDataSourcePermissions.tsx
deleted file mode 100644
index 2f9b38ef48e..00000000000
--- a/public/app/features/datasources/AddDataSourcePermissions.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { PureComponent } from 'react';
-import { UserPicker } from 'app/core/components/Picker/UserPicker';
-import { Team, TeamPicker } from 'app/core/components/Picker/TeamPicker';
-import DescriptionPicker, { OptionWithDescription } from 'app/core/components/Picker/DescriptionPicker';
-import { dataSourceAclLevels, AclTarget, DataSourcePermissionLevel } from 'app/types/acl';
-import { User } from 'app/types';
-
-export interface Props {
-  onAddPermission: (state) => void;
-  onCancel: () => void;
-}
-
-interface State {
-  userId: number;
-  teamId: number;
-  type: AclTarget;
-  permission: DataSourcePermissionLevel;
-}
-
-export class AddDataSourcePermissions extends PureComponent<Props, State> {
-  cleanState = () => ({
-    userId: 0,
-    teamId: 0,
-    type: AclTarget.Team,
-    permission: DataSourcePermissionLevel.Query,
-  });
-
-  state = this.cleanState();
-
-  isValid() {
-    switch (this.state.type) {
-      case AclTarget.Team:
-        return this.state.teamId > 0;
-      case AclTarget.User:
-        return this.state.userId > 0;
-    }
-    return true;
-  }
-
-  onTeamSelected = (team: Team) => {
-    this.setState({ teamId: team ? team.id : 0 });
-  };
-
-  onUserSelected = (user: User) => {
-    this.setState({ userId: user ? user.id : 0 });
-  };
-
-  onPermissionChanged = (permission: OptionWithDescription) => {
-    this.setState({ permission: permission.value });
-  };
-
-  onTypeChanged = event => {
-    const type = event.target.value as AclTarget;
-
-    this.setState({ type: type, userId: 0, teamId: 0 });
-  };
-
-  onSubmit = async event => {
-    event.preventDefault();
-
-    await this.props.onAddPermission(this.state);
-    this.setState(this.cleanState());
-  };
-
-  render() {
-    const { onCancel } = this.props;
-    const { type, permission } = this.state;
-
-    const pickerClassName = 'width-20';
-    const aclTargets = [{ value: AclTarget.Team, text: 'Team' }, { value: AclTarget.User, text: 'User' }];
-
-    return (
-      <div className="gf-form-inline cta-form">
-        <button className="cta-form__close btn btn-transparent" onClick={onCancel}>
-          <i className="fa fa-close" />
-        </button>
-        <form name="addPermission" onSubmit={this.onSubmit}>
-          <h5>Add Permission For</h5>
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <select className="gf-form-input gf-size-auto" value={type} onChange={this.onTypeChanged}>
-                {aclTargets.map((option, idx) => {
-                  return (
-                    <option key={idx} value={option.value}>
-                      {option.text}
-                    </option>
-                  );
-                })}
-              </select>
-            </div>
-            {type === AclTarget.User && (
-              <div className="gf-form">
-                <UserPicker onSelected={this.onUserSelected} className={pickerClassName} />
-              </div>
-            )}
-
-            {type === AclTarget.Team && (
-              <div className="gf-form">
-                <TeamPicker onSelected={this.onTeamSelected} className={pickerClassName} />
-              </div>
-            )}
-            <div className="gf-form">
-              <DescriptionPicker
-                optionsWithDesc={dataSourceAclLevels}
-                onSelected={this.onPermissionChanged}
-                value={permission}
-                disabled={false}
-                className={'gf-form-input--form-dropdown-right'}
-              />
-            </div>
-            <div className="gf-form">
-              <button data-save-permission className="btn btn-success" type="submit" disabled={!this.isValid()}>
-                Save
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    );
-  }
-}
-
-export default AddDataSourcePermissions;

From 16d4109599b79e894743f72b2069b49290f889c6 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 1 Nov 2018 14:03:02 +0100
Subject: [PATCH 17/25] reverting babel change

---
 scripts/webpack/webpack.hot.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/webpack/webpack.hot.js b/scripts/webpack/webpack.hot.js
index 4288699bce1..9d798bb42c6 100644
--- a/scripts/webpack/webpack.hot.js
+++ b/scripts/webpack/webpack.hot.js
@@ -44,7 +44,7 @@ module.exports = merge(common, {
   module: {
     rules: [
       {
-        test: /(?!.*\.test)\.(ts|tsx)$/,
+        test: /\.tsx?$/,
         exclude: /node_modules/,
         use: [
           {

From e37fa486edaddd57fe049fa9659b99f590f301e7 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 1 Nov 2018 14:31:14 +0100
Subject: [PATCH 18/25] remove replaced components

---
 public/app/features/plugins/all.ts            |   1 -
 .../features/plugins/partials/ds_edit.html    |  72 -------
 .../app/features/plugins/plugin_edit_ctrl.ts  | 179 ------------------
 3 files changed, 252 deletions(-)
 delete mode 100644 public/app/features/plugins/partials/ds_edit.html
 delete mode 100644 public/app/features/plugins/plugin_edit_ctrl.ts

diff --git a/public/app/features/plugins/all.ts b/public/app/features/plugins/all.ts
index c9fb250266c..ce9bcbff3bc 100644
--- a/public/app/features/plugins/all.ts
+++ b/public/app/features/plugins/all.ts
@@ -1,4 +1,3 @@
-import './plugin_edit_ctrl';
 import './plugin_page_ctrl';
 import './import_list/import_list';
 import './ds_edit_ctrl';
diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html
deleted file mode 100644
index 0b83e69c7d2..00000000000
--- a/public/app/features/plugins/partials/ds_edit.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<page-header model="ctrl.navModel"></page-header>
-
-<div class="page-container page-body">
-  <h3 class="page-sub-heading">Settings</h3>
-
-  <form name="ctrl.editForm" ng-if="ctrl.current">
-    <div class="gf-form-group">
-      <div class="gf-form-inline">
-        <div class="gf-form max-width-30">
-          <span class="gf-form-label width-10">Name</span>
-          <input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
-          <info-popover offset="0px -135px" mode="right-absolute">
-            The name is used when you select the data source in panels.
-            The <em>Default</em> data source is preselected in new
-            panels.
-          </info-popover>
-        </div>
-        <gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
-      </div>
-    </div>
-
-    <div class="grafana-info-box" ng-if="ctrl.datasourceMeta.state === 'alpha'">
-      This plugin is marked as being in alpha state, which means it is in early development phase and
-      updates will include breaking changes.
-    </div>
-
-		<div class="grafana-info-box" ng-if="ctrl.datasourceMeta.state === 'beta'">
-      This plugin is marked as being in a beta development state. This means it is in currently in active development and could be
-      missing important features.
-    </div>
-
-    <rebuild-on-change property="ctrl.datasourceMeta.id">
-      <plugin-component type="datasource-config-ctrl">
-      </plugin-component>
-    </rebuild-on-change>
-
-    <div ng-if="ctrl.hasDashboards">
-      <h3 class="section-heading">Bundled Plugin Dashboards</h3>
-      <div class="section">
-        <dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
-      </div>
-    </div>
-
-    <div ng-if="ctrl.testing" class="gf-form-group section">
-      <h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-      <div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
-        <div class="alert-icon">
-          <i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
-          <i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
-        </div>
-        <div class="alert-body">
-          <div class="alert-title">{{ctrl.testing.message}}</div>
-        </div>
-      </div>
-    </div>
-
-		<div class="grafana-info-box span8" ng-if="ctrl.current.readOnly">
-			This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
-		</div>
-
-		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly"  ng-click="ctrl.saveChanges()">Save &amp; Test</button>
-			<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly"  ng-show="!ctrl.isNew" ng-click="ctrl.delete()">Delete</button>
-			<a class="btn btn-inverse" href="datasources">Back</a>
-		</div>
-
-		<br />
-		<br />
-		<br />
-
-	</form>
-</div>
diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts
deleted file mode 100644
index 44d3d31f996..00000000000
--- a/public/app/features/plugins/plugin_edit_ctrl.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import angular from 'angular';
-import _ from 'lodash';
-import Remarkable from 'remarkable';
-
-export class PluginEditCtrl {
-  model: any;
-  pluginIcon: string;
-  pluginId: any;
-  includes: any;
-  readmeHtml: any;
-  includedDatasources: any;
-  tab: string;
-  navModel: any;
-  hasDashboards: any;
-  preUpdateHook: () => any;
-  postUpdateHook: () => any;
-
-  /** @ngInject */
-  constructor(private $scope, private $rootScope, private backendSrv, private $sce, private $routeParams, navModelSrv) {
-    this.pluginId = $routeParams.pluginId;
-    this.preUpdateHook = () => Promise.resolve();
-    this.postUpdateHook = () => Promise.resolve();
-
-    this.init();
-  }
-
-  setNavModel(model) {
-    let defaultTab = 'readme';
-
-    this.navModel = {
-      main: {
-        img: model.info.logos.large,
-        subTitle: model.info.author.name,
-        url: '',
-        text: model.name,
-        breadcrumbs: [{ title: 'Plugins', url: 'plugins' }],
-        children: [
-          {
-            icon: 'fa fa-fw fa-file-text-o',
-            id: 'readme',
-            text: 'Readme',
-            url: `plugins/${this.model.id}/edit?tab=readme`,
-          },
-        ],
-      },
-    };
-
-    if (model.type === 'app') {
-      this.navModel.main.children.push({
-        icon: 'gicon gicon-cog',
-        id: 'config',
-        text: 'Config',
-        url: `plugins/${this.model.id}/edit?tab=config`,
-      });
-
-      const hasDashboards = _.find(model.includes, { type: 'dashboard' });
-
-      if (hasDashboards) {
-        this.navModel.main.children.push({
-          icon: 'gicon gicon-dashboard',
-          id: 'dashboards',
-          text: 'Dashboards',
-          url: `plugins/${this.model.id}/edit?tab=dashboards`,
-        });
-      }
-
-      defaultTab = 'config';
-    }
-
-    this.tab = this.$routeParams.tab || defaultTab;
-
-    for (const tab of this.navModel.main.children) {
-      if (tab.id === this.tab) {
-        tab.active = true;
-      }
-    }
-  }
-
-  init() {
-    return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => {
-      this.model = result;
-      this.pluginIcon = this.getPluginIcon(this.model.type);
-
-      this.model.dependencies.plugins.forEach(plug => {
-        plug.icon = this.getPluginIcon(plug.type);
-      });
-
-      this.includes = _.map(result.includes, plug => {
-        plug.icon = this.getPluginIcon(plug.type);
-        return plug;
-      });
-
-      this.setNavModel(this.model);
-      return this.initReadme();
-    });
-  }
-
-  initReadme() {
-    return this.backendSrv.get(`/api/plugins/${this.pluginId}/markdown/readme`).then(res => {
-      const md = new Remarkable({
-        linkify: true,
-      });
-      this.readmeHtml = this.$sce.trustAsHtml(md.render(res));
-    });
-  }
-
-  getPluginIcon(type) {
-    switch (type) {
-      case 'datasource':
-        return 'icon-gf icon-gf-datasources';
-      case 'panel':
-        return 'icon-gf icon-gf-panel';
-      case 'app':
-        return 'icon-gf icon-gf-apps';
-      case 'page':
-        return 'icon-gf icon-gf-endpoint-tiny';
-      case 'dashboard':
-        return 'icon-gf icon-gf-dashboard';
-      default:
-        return 'icon-gf icon-gf-apps';
-    }
-  }
-
-  update() {
-    this.preUpdateHook()
-      .then(() => {
-        const updateCmd = _.extend(
-          {
-            enabled: this.model.enabled,
-            pinned: this.model.pinned,
-            jsonData: this.model.jsonData,
-            secureJsonData: this.model.secureJsonData,
-          },
-          {}
-        );
-        return this.backendSrv.post(`/api/plugins/${this.pluginId}/settings`, updateCmd);
-      })
-      .then(this.postUpdateHook)
-      .then(res => {
-        window.location.href = window.location.href;
-      });
-  }
-
-  importDashboards() {
-    return Promise.resolve();
-  }
-
-  setPreUpdateHook(callback: () => any) {
-    this.preUpdateHook = callback;
-  }
-
-  setPostUpdateHook(callback: () => any) {
-    this.postUpdateHook = callback;
-  }
-
-  updateAvailable() {
-    const modalScope = this.$scope.$new(true);
-    modalScope.plugin = this.model;
-
-    this.$rootScope.appEvent('show-modal', {
-      src: 'public/app/features/plugins/partials/update_instructions.html',
-      scope: modalScope,
-    });
-  }
-
-  enable() {
-    this.model.enabled = true;
-    this.model.pinned = true;
-    this.update();
-  }
-
-  disable() {
-    this.model.enabled = false;
-    this.model.pinned = false;
-    this.update();
-  }
-}
-
-angular.module('grafana.controllers').controller('PluginEditCtrl', PluginEditCtrl);

From 52232f98b996e59357b68c54d425f8f3f3d0f655 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 5 Nov 2018 13:39:57 +0100
Subject: [PATCH 19/25] Exposing digest from angular component

---
 public/app/core/services/AngularLoader.ts                   | 4 ++++
 public/app/features/datasources/settings/PluginSettings.tsx | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/public/app/core/services/AngularLoader.ts b/public/app/core/services/AngularLoader.ts
index e3a7dec4351..3f5c535297f 100644
--- a/public/app/core/services/AngularLoader.ts
+++ b/public/app/core/services/AngularLoader.ts
@@ -4,6 +4,7 @@ import _ from 'lodash';
 
 export interface AngularComponent {
   destroy();
+  digest();
 }
 
 export class AngularLoader {
@@ -24,6 +25,9 @@ export class AngularLoader {
         scope.$destroy();
         compiledElem.remove();
       },
+      digest: () => {
+        scope.$digest();
+      },
     };
   }
 }
diff --git a/public/app/features/datasources/settings/PluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx
index ec6981927fa..e0b742985cc 100644
--- a/public/app/features/datasources/settings/PluginSettings.tsx
+++ b/public/app/features/datasources/settings/PluginSettings.tsx
@@ -40,6 +40,8 @@ export class PluginSettings extends PureComponent<Props> {
   componentDidUpdate(prevProps) {
     if (this.props.dataSource !== prevProps.dataSource) {
       this.scopeProps.ctrl.current = _.cloneDeep(this.props.dataSource);
+
+      this.component.digest();
     }
   }
 

From 6dc3e0399d5ee6aa9da5bece901f7571b6921efd Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 5 Nov 2018 16:33:43 +0100
Subject: [PATCH 20/25] added actions

---
 .gitignore                                    |  1 +
 .../app/features/datasources/state/actions.ts | 55 ++++++++++++++++++-
 public/app/types/series.ts                    |  1 +
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 21083741e14..7172e6af575 100644
--- a/.gitignore
+++ b/.gitignore
@@ -75,3 +75,4 @@ debug.test
 /devenv/bulk_alerting_dashboards/*.json
 
 /scripts/build/release_publisher/release_publisher
+*.patch
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index ff8af8b4c9d..1bef610ff29 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -1,11 +1,14 @@
 import { ThunkAction } from 'redux-thunk';
 import { DataSource, Plugin, StoreState } from 'app/types';
 import { getBackendSrv } from '../../../core/services/backend_srv';
+import { getDatasourceSrv } from '../../plugins/datasource_srv';
 import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
 import { updateLocation, updateNavIndex, UpdateNavIndexAction } from '../../../core/actions';
 import { UpdateLocationAction } from '../../../core/actions/location';
 import { buildNavModel } from './navModel';
 
+import config from '../../../core/config';
+
 export enum ActionTypes {
   LoadDataSources = 'LOAD_DATA_SOURCES',
   LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES',
@@ -159,7 +162,14 @@ export function loadDataSourceTypes(): ThunkResult<void> {
 
 export function updateDataSource(dataSource: DataSource): ThunkResult<void> {
   return async dispatch => {
-    await getBackendSrv().put(`/api/datasources/${dataSource.id}`, dataSource);
+    await getBackendSrv()
+      .put(`/api/datasources/${dataSource.id}`, dataSource)
+      .then(response => {
+        updateFrontendSettings().then(() => {
+          testDataSource(response.name);
+        });
+      });
+
     dispatch(loadDataSource(dataSource.id));
   };
 }
@@ -201,6 +211,49 @@ export function findNewName(dataSources, name) {
   return name;
 }
 
+function updateFrontendSettings() {
+  return getBackendSrv()
+    .get('/api/frontend/settings')
+    .then(settings => {
+      config.datasources = settings.datasources;
+      config.defaultDatasource = settings.defaultDatasource;
+      getDatasourceSrv().init();
+    });
+}
+
+function testDataSource(name) {
+  getDatasourceSrv()
+    .get(name)
+    .then(dataSource => {
+      if (!dataSource.testDatasource) {
+        return;
+      }
+
+      const testing = { done: false, status: 'error', message: '' };
+
+      // make test call in no backend cache context
+      getBackendSrv()
+        .withNoBackendCache(() => {
+          return dataSource
+            .testDatasource()
+            .then(result => {
+              testing.message = result.message;
+              testing.status = result.status;
+            })
+            .catch(err => {
+              if (err.statusText) {
+                testing.message = 'HTTP Error ' + err.statusText;
+              } else {
+                testing.message = err.message;
+              }
+            });
+        })
+        .finally(() => {
+          testing.done = true;
+        });
+    });
+}
+
 function nameHasSuffix(name) {
   return name.endsWith('-', name.length - 1);
 }
diff --git a/public/app/types/series.ts b/public/app/types/series.ts
index 5396880611b..997090bf541 100644
--- a/public/app/types/series.ts
+++ b/public/app/types/series.ts
@@ -88,4 +88,5 @@ export interface DataQueryOptions {
 
 export interface DataSourceApi {
   query(options: DataQueryOptions): Promise<DataQueryResponse>;
+  testDatasource(): Promise<any>;
 }

From ffc06e9962a8b2ed04825c6b846bdca8ee35d1f1 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 5 Nov 2018 16:54:48 +0100
Subject: [PATCH 21/25] extract store from configurestore

---
 public/app/core/services/bridge_srv.ts                 | 2 +-
 public/app/core/utils/connectWithReduxStore.tsx        | 2 +-
 public/app/features/dashboard/dashgrid/PanelEditor.tsx | 2 +-
 public/app/features/dashboard/dashgrid/PanelHeader.tsx | 2 +-
 public/app/features/plugins/ds_dashboards_ctrl.ts      | 2 +-
 public/app/features/plugins/ds_edit_ctrl.ts            | 2 +-
 public/app/routes/ReactContainer.tsx                   | 2 +-
 public/app/store/configureStore.ts                     | 7 +++----
 public/app/store/store.ts                              | 5 +++++
 9 files changed, 15 insertions(+), 11 deletions(-)
 create mode 100644 public/app/store/store.ts

diff --git a/public/app/core/services/bridge_srv.ts b/public/app/core/services/bridge_srv.ts
index ee184c243ac..07eddfad55f 100644
--- a/public/app/core/services/bridge_srv.ts
+++ b/public/app/core/services/bridge_srv.ts
@@ -1,6 +1,6 @@
 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import locationUtil from 'app/core/utils/location_util';
 import { updateLocation } from 'app/core/actions';
 
diff --git a/public/app/core/utils/connectWithReduxStore.tsx b/public/app/core/utils/connectWithReduxStore.tsx
index 92c61db4e77..be91958f8cd 100644
--- a/public/app/core/utils/connectWithReduxStore.tsx
+++ b/public/app/core/utils/connectWithReduxStore.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { store } from '../../store/configureStore';
+import { store } from '../../store/store';
 
 export function connectWithStore(WrappedComponent, ...args) {
   const ConnectedWrappedComponent = connect(...args)(WrappedComponent);
diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index 26ac8b7d2c1..9a69aeea6ac 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import { QueriesTab } from './QueriesTab';
 import { PanelPlugin, PluginExports } from 'app/types/plugins';
 import { VizTypePicker } from './VizTypePicker';
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader.tsx
index 12d5cd37253..276f12182fe 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import { updateLocation } from 'app/core/actions';
 
 interface PanelHeaderProps {
diff --git a/public/app/features/plugins/ds_dashboards_ctrl.ts b/public/app/features/plugins/ds_dashboards_ctrl.ts
index a0324215453..71639702e41 100644
--- a/public/app/features/plugins/ds_dashboards_ctrl.ts
+++ b/public/app/features/plugins/ds_dashboards_ctrl.ts
@@ -1,5 +1,5 @@
 import { coreModule } from 'app/core/core';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { buildNavModel } from './state/navModel';
 
diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts
index c223f444ef3..5e203a96e8b 100644
--- a/public/app/features/plugins/ds_edit_ctrl.ts
+++ b/public/app/features/plugins/ds_edit_ctrl.ts
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import config from 'app/core/config';
 import { coreModule, appEvents } from 'app/core/core';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { buildNavModel } from './state/navModel';
 
diff --git a/public/app/routes/ReactContainer.tsx b/public/app/routes/ReactContainer.tsx
index ed4d2d21827..807608e6960 100644
--- a/public/app/routes/ReactContainer.tsx
+++ b/public/app/routes/ReactContainer.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
 import coreModule from 'app/core/core_module';
-import { store } from 'app/store/configureStore';
+import { store } from 'app/store/store';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { ContextSrv } from 'app/core/services/context_srv';
diff --git a/public/app/store/configureStore.ts b/public/app/store/configureStore.ts
index e6d86eaa9c6..943aff80a70 100644
--- a/public/app/store/configureStore.ts
+++ b/public/app/store/configureStore.ts
@@ -11,6 +11,7 @@ import pluginReducers from 'app/features/plugins/state/reducers';
 import dataSourcesReducers from 'app/features/datasources/state/reducers';
 import usersReducers from 'app/features/users/state/reducers';
 import organizationReducers from 'app/features/org/state/reducers';
+import { setStore } from './store';
 
 const rootReducers = {
   ...sharedReducers,
@@ -25,8 +26,6 @@ const rootReducers = {
   ...organizationReducers,
 };
 
-export let store;
-
 export function addRootReducer(reducers) {
   Object.assign(rootReducers, ...reducers);
 }
@@ -38,8 +37,8 @@ export function configureStore() {
 
   if (process.env.NODE_ENV !== 'production') {
     // DEV builds we had the logger middleware
-    store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger())));
+    setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger()))));
   } else {
-    store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk)));
+    setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk))));
   }
 }
diff --git a/public/app/store/store.ts b/public/app/store/store.ts
new file mode 100644
index 00000000000..c8134ae77f3
--- /dev/null
+++ b/public/app/store/store.ts
@@ -0,0 +1,5 @@
+export let store;
+
+export function setStore(newStore) {
+  store = newStore;
+}

From b7d494551c42a8553e7f819cef2f8c066bc32963 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 7 Nov 2018 15:38:53 +0100
Subject: [PATCH 22/25] Added testing state in reducer

---
 .../settings/DataSourceSettings.test.tsx      |  3 +-
 .../settings/DataSourceSettings.tsx           | 30 +++++++++-
 .../DataSourceSettings.test.tsx.snap          | 12 ++++
 .../app/features/datasources/state/actions.ts | 60 +++++++++++++++----
 .../features/datasources/state/reducers.ts    | 22 ++++++-
 public/app/types/datasources.ts               |  7 +++
 public/app/types/index.ts                     |  3 +-
 7 files changed, 122 insertions(+), 15 deletions(-)

diff --git a/public/app/features/datasources/settings/DataSourceSettings.test.tsx b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
index 73c05fdd518..55968e5278d 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.test.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourceSettings, Props } from './DataSourceSettings';
-import { DataSource, NavModel } from '../../../types';
+import { DataSource, DataSourceTest, NavModel } from '../../../types';
 import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
 import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
 
@@ -15,6 +15,7 @@ const setup = (propOverrides?: object) => {
     loadDataSource: jest.fn(),
     setDataSourceName: jest.fn(),
     updateDataSource: jest.fn(),
+    testing: {} as DataSourceTest,
   };
 
   Object.assign(props, propOverrides);
diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx
index e5e9a60c03c..8fe580ee97c 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.tsx
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import { DataSource, NavModel, Plugin } from 'app/types/';
+import { DataSource, DataSourceTest, NavModel, Plugin } from 'app/types/';
 import PageHeader from '../../../core/components/PageHeader/PageHeader';
 import PageLoader from '../../../core/components/PageLoader/PageLoader';
 import PluginSettings from './PluginSettings';
@@ -18,6 +18,7 @@ export interface Props {
   dataSource: DataSource;
   dataSourceMeta: Plugin;
   pageId: number;
+  testing: DataSourceTest;
   deleteDataSource: typeof deleteDataSource;
   loadDataSource: typeof loadDataSource;
   setDataSourceName: typeof setDataSourceName;
@@ -111,7 +112,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
   }
 
   render() {
-    const { dataSource, dataSourceMeta, navModel } = this.props;
+    const { dataSource, dataSourceMeta, navModel, testing } = this.props;
 
     return (
       <div>
@@ -137,6 +138,30 @@ export class DataSourceSettings extends PureComponent<Props, State> {
                     onModelChange={this.onModelChange}
                   />
                 )}
+
+                <div className="gf-form-group section">
+                  {testing.inProgress && (
+                    <h5>
+                      Testing.... <i className="fa fa-spiner fa-spin" />
+                    </h5>
+                  )}
+                  {!testing.inProgress &&
+                    testing.status && (
+                      <div className={`alert-${testing.status} alert`}>
+                        <div className="alert-icon">
+                          {testing.status === 'error' ? (
+                            <i className="fa fa-exclamation-triangle" />
+                          ) : (
+                            <i className="fa fa-check" />
+                          )}
+                        </div>
+                        <div className="alert-body">
+                          <div className="alert-title">{testing.message}</div>
+                        </div>
+                      </div>
+                    )}
+                </div>
+
                 <ButtonRow
                   onSubmit={event => this.onSubmit(event)}
                   isReadOnly={this.isReadOnly()}
@@ -160,6 +185,7 @@ function mapStateToProps(state) {
     dataSource: getDataSource(state.dataSources, pageId),
     dataSourceMeta: getDataSourceMeta(state.dataSources, dataSource.type),
     pageId: pageId,
+    testing: state.dataSources.testing,
   };
 }
 
diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
index 5f44ca09fe4..ebb856ca354 100644
--- a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
+++ b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap
@@ -79,6 +79,9 @@ exports[`Render should render alpha info text 1`] = `
           }
           onModelChange={[Function]}
         />
+        <div
+          className="gf-form-group section"
+        />
         <ButtonRow
           isReadOnly={false}
           onDelete={[Function]}
@@ -169,6 +172,9 @@ exports[`Render should render beta info text 1`] = `
           }
           onModelChange={[Function]}
         />
+        <div
+          className="gf-form-group section"
+        />
         <ButtonRow
           isReadOnly={false}
           onDelete={[Function]}
@@ -254,6 +260,9 @@ exports[`Render should render component 1`] = `
           }
           onModelChange={[Function]}
         />
+        <div
+          className="gf-form-group section"
+        />
         <ButtonRow
           isReadOnly={false}
           onDelete={[Function]}
@@ -344,6 +353,9 @@ exports[`Render should render is ready only message 1`] = `
           }
           onModelChange={[Function]}
         />
+        <div
+          className="gf-form-group section"
+        />
         <ButtonRow
           isReadOnly={true}
           onDelete={[Function]}
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index 1bef610ff29..64b795eb107 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -18,6 +18,9 @@ export enum ActionTypes {
   SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE',
   SetDataSourceTypeSearchQuery = 'SET_DATA_SOURCE_TYPE_SEARCH_QUERY',
   SetDataSourceName = 'SET_DATA_SOURCE_NAME',
+  SetDataSourceTestingProgess = 'SET_TESTING_PROGRESS',
+  SetDataSourceTestingSuccess = 'SET_DATA_SOURCE_TESTING_SUCCESS',
+  SetDataSourceTestingFail = 'SET_DATA_SOURCE_TESTING_FAIL',
 }
 
 interface LoadDataSourcesAction {
@@ -60,6 +63,21 @@ interface SetDataSourceNameAction {
   payload: string;
 }
 
+interface SetDataSourceTestingProgessAction {
+  type: ActionTypes.SetDataSourceTestingProgess;
+  payload: boolean;
+}
+
+interface SetDataSourceTestingSuccessAction {
+  type: ActionTypes.SetDataSourceTestingSuccess;
+  payload: { status: string; message: string };
+}
+
+interface SetDataSourceTestingFailAction {
+  type: ActionTypes.SetDataSourceTestingFail;
+  payload: string;
+}
+
 const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({
   type: ActionTypes.LoadDataSources,
   payload: dataSources,
@@ -100,6 +118,24 @@ export const setDataSourceName = (name: string) => ({
   payload: name,
 });
 
+const setDataSourceTestingProgress = (state: boolean): SetDataSourceTestingProgessAction => ({
+  type: ActionTypes.SetDataSourceTestingProgess,
+  payload: state,
+});
+
+const setDataSourceTestingSuccess = (status: string, message: string): SetDataSourceTestingSuccessAction => ({
+  type: ActionTypes.SetDataSourceTestingSuccess,
+  payload: {
+    status: status,
+    message: message,
+  },
+});
+
+const setDataSourceTestingFail = (message: string): SetDataSourceTestingFailAction => ({
+  type: ActionTypes.SetDataSourceTestingFail,
+  payload: message,
+});
+
 export type Action =
   | LoadDataSourcesAction
   | SetDataSourcesSearchQueryAction
@@ -110,7 +146,10 @@ export type Action =
   | LoadDataSourceAction
   | UpdateNavIndexAction
   | LoadDataSourceMetaAction
-  | SetDataSourceNameAction;
+  | SetDataSourceNameAction
+  | SetDataSourceTestingProgessAction
+  | SetDataSourceTestingSuccessAction
+  | SetDataSourceTestingFailAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
@@ -166,7 +205,7 @@ export function updateDataSource(dataSource: DataSource): ThunkResult<void> {
       .put(`/api/datasources/${dataSource.id}`, dataSource)
       .then(response => {
         updateFrontendSettings().then(() => {
-          testDataSource(response.name);
+          testDataSource(dispatch, response.name);
         });
       });
 
@@ -221,7 +260,8 @@ function updateFrontendSettings() {
     });
 }
 
-function testDataSource(name) {
+function testDataSource(dispatch, name) {
+  dispatch(setDataSourceTestingProgress(true));
   getDatasourceSrv()
     .get(name)
     .then(dataSource => {
@@ -229,27 +269,27 @@ function testDataSource(name) {
         return;
       }
 
-      const testing = { done: false, status: 'error', message: '' };
-
       // make test call in no backend cache context
       getBackendSrv()
         .withNoBackendCache(() => {
           return dataSource
             .testDatasource()
             .then(result => {
-              testing.message = result.message;
-              testing.status = result.status;
+              dispatch(setDataSourceTestingSuccess(result.status, result.message));
             })
             .catch(err => {
+              let message = '';
+
               if (err.statusText) {
-                testing.message = 'HTTP Error ' + err.statusText;
+                message = 'HTTP Error ' + err.statusText;
               } else {
-                testing.message = err.message;
+                message = err.message;
               }
+              dispatch(setDataSourceTestingFail(message));
             });
         })
         .finally(() => {
-          testing.done = true;
+          dispatch(setDataSourceTestingProgress(false));
         });
     });
 }
diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts
index 33feae6770a..a09992a7a1f 100644
--- a/public/app/features/datasources/state/reducers.ts
+++ b/public/app/features/datasources/state/reducers.ts
@@ -1,4 +1,4 @@
-import { DataSource, DataSourcesState, Plugin } from 'app/types';
+import { DataSource, DataSourcesState, DataSourceTest, Plugin } from 'app/types';
 import { Action, ActionTypes } from './actions';
 import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
 
@@ -12,6 +12,7 @@ const initialState: DataSourcesState = {
   dataSourceTypeSearchQuery: '',
   hasFetched: false,
   dataSourceMeta: {} as Plugin,
+  testing: {} as DataSourceTest,
 };
 
 export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => {
@@ -39,6 +40,25 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
 
     case ActionTypes.SetDataSourceName:
       return { ...state, dataSource: { ...state.dataSource, name: action.payload } };
+
+    case ActionTypes.SetDataSourceTestingProgess:
+      return { ...state, testing: { ...state.testing, inProgress: action.payload } };
+
+    case ActionTypes.SetDataSourceTestingSuccess:
+      return {
+        ...state,
+        testing: {
+          status: action.payload.status,
+          message: action.payload.message,
+          inProgress: false,
+        },
+      };
+
+    case ActionTypes.SetDataSourceTestingFail:
+      return {
+        ...state,
+        testing: { status: 'error', message: action.payload, inProgress: false },
+      };
   }
 
   return state;
diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts
index 970ef4f11c8..ef6077ffc20 100644
--- a/public/app/types/datasources.ts
+++ b/public/app/types/datasources.ts
@@ -25,6 +25,12 @@ export interface DataSource {
   testDatasource?: () => Promise<any>;
 }
 
+export interface DataSourceTest {
+  inProgress: boolean;
+  message: string;
+  status: string;
+}
+
 export interface DataSourcesState {
   dataSources: DataSource[];
   searchQuery: string;
@@ -35,4 +41,5 @@ export interface DataSourcesState {
   dataSource: DataSource;
   dataSourceMeta: Plugin;
   hasFetched: boolean;
+  testing: DataSourceTest;
 }
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index fc176fed7e2..013c132a94f 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -7,7 +7,7 @@ import { DashboardState } from './dashboard';
 import { DashboardAcl, OrgRole, PermissionLevel } from './acl';
 import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState, UserState } from './user';
-import { DataSource, DataSourcesState } from './datasources';
+import { DataSource, DataSourceTest, DataSourcesState } from './datasources';
 import {
   TimeRange,
   LoadingState,
@@ -88,6 +88,7 @@ export {
   AppNotificationTimeout,
   DashboardSearchHit,
   UserState,
+  DataSourceTest,
 };
 
 export interface StoreState {

From 682697e2cdcdaa6295f1bdd6db2322f03482695b Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 7 Nov 2018 16:14:55 +0100
Subject: [PATCH 23/25] clear test box if success

---
 .../settings/DataSourceSettings.test.tsx      |  1 +
 .../settings/DataSourceSettings.tsx           | 23 ++++++++++++++++++-
 .../app/features/datasources/state/actions.ts | 12 +++++++++-
 .../features/datasources/state/reducers.ts    |  7 ++++--
 4 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/public/app/features/datasources/settings/DataSourceSettings.test.tsx b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
index 55968e5278d..222587d9249 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.test.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
@@ -16,6 +16,7 @@ const setup = (propOverrides?: object) => {
     setDataSourceName: jest.fn(),
     updateDataSource: jest.fn(),
     testing: {} as DataSourceTest,
+    clearTesting: jest.fn(),
   };
 
   Object.assign(props, propOverrides);
diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx
index 8fe580ee97c..e9a1b49c02a 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.tsx
@@ -8,7 +8,7 @@ import PluginSettings from './PluginSettings';
 import BasicSettings from './BasicSettings';
 import ButtonRow from './ButtonRow';
 import appEvents from '../../../core/app_events';
-import { deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
+import { clearTesting, deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
 import { getNavModel } from '../../../core/selectors/navModel';
 import { getRouteParamsId } from '../../../core/selectors/location';
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
@@ -23,9 +23,11 @@ export interface Props {
   loadDataSource: typeof loadDataSource;
   setDataSourceName: typeof setDataSourceName;
   updateDataSource: typeof updateDataSource;
+  clearTesting: typeof clearTesting;
 }
 interface State {
   dataSource: DataSource;
+  hasClosedTest: boolean;
 }
 
 enum DataSourceStates {
@@ -36,6 +38,7 @@ enum DataSourceStates {
 export class DataSourceSettings extends PureComponent<Props, State> {
   state = {
     dataSource: {} as DataSource,
+    hasClosedTest: false,
   };
 
   async componentDidMount() {
@@ -44,6 +47,23 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     await loadDataSource(pageId);
   }
 
+  componentDidUpdate(prevProps) {
+    const { clearTesting } = this.props;
+
+    if (!this.state.hasClosedTest && prevProps.testing.status === 'success') {
+      this.setState({ hasClosedTest: true });
+
+      setTimeout(() => {
+        clearTesting();
+        this.setState({ hasClosedTest: false });
+      }, 3000);
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.clearTesting();
+  }
+
   onSubmit = event => {
     event.preventDefault();
 
@@ -194,6 +214,7 @@ const mapDispatchToProps = {
   loadDataSource,
   setDataSourceName,
   updateDataSource,
+  clearTesting,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings));
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index 64b795eb107..8fda109c906 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -21,6 +21,7 @@ export enum ActionTypes {
   SetDataSourceTestingProgess = 'SET_TESTING_PROGRESS',
   SetDataSourceTestingSuccess = 'SET_DATA_SOURCE_TESTING_SUCCESS',
   SetDataSourceTestingFail = 'SET_DATA_SOURCE_TESTING_FAIL',
+  ClearTesting = 'CLEAR_TEST',
 }
 
 interface LoadDataSourcesAction {
@@ -78,6 +79,10 @@ interface SetDataSourceTestingFailAction {
   payload: string;
 }
 
+interface ClearTestingAction {
+  type: ActionTypes.ClearTesting;
+}
+
 const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({
   type: ActionTypes.LoadDataSources,
   payload: dataSources,
@@ -118,6 +123,10 @@ export const setDataSourceName = (name: string) => ({
   payload: name,
 });
 
+export const clearTesting = (): ClearTestingAction => ({
+  type: ActionTypes.ClearTesting,
+});
+
 const setDataSourceTestingProgress = (state: boolean): SetDataSourceTestingProgessAction => ({
   type: ActionTypes.SetDataSourceTestingProgess,
   payload: state,
@@ -149,7 +158,8 @@ export type Action =
   | SetDataSourceNameAction
   | SetDataSourceTestingProgessAction
   | SetDataSourceTestingSuccessAction
-  | SetDataSourceTestingFailAction;
+  | SetDataSourceTestingFailAction
+  | ClearTestingAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts
index a09992a7a1f..2fc6500e522 100644
--- a/public/app/features/datasources/state/reducers.ts
+++ b/public/app/features/datasources/state/reducers.ts
@@ -1,4 +1,4 @@
-import { DataSource, DataSourcesState, DataSourceTest, Plugin } from 'app/types';
+import { DataSource, DataSourcesState, Plugin } from 'app/types';
 import { Action, ActionTypes } from './actions';
 import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
 
@@ -12,7 +12,7 @@ const initialState: DataSourcesState = {
   dataSourceTypeSearchQuery: '',
   hasFetched: false,
   dataSourceMeta: {} as Plugin,
-  testing: {} as DataSourceTest,
+  testing: { inProgress: false, status: '', message: '' },
 };
 
 export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => {
@@ -59,6 +59,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
         ...state,
         testing: { status: 'error', message: action.payload, inProgress: false },
       };
+
+    case ActionTypes.ClearTesting:
+      return { ...state, testing: { inProgress: false, status: '', message: '' } };
   }
 
   return state;

From 29e18fddd0b57e058a4af3de864b0d49f140c782 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 7 Nov 2018 14:28:44 -0800
Subject: [PATCH 24/25] refactored how testing state was handled, using redux
 for this felt way to require way to much code

---
 .../settings/DataSourceSettings.test.tsx      |   4 +-
 .../settings/DataSourceSettings.tsx           | 134 +++++++++++-------
 .../app/features/datasources/state/actions.ts | 112 ++-------------
 .../features/datasources/state/reducers.ts    |  23 ---
 .../datasource/cloudwatch/datasource.ts       |  11 +-
 public/app/types/datasources.ts               |   7 -
 public/app/types/index.ts                     |   3 +-
 7 files changed, 95 insertions(+), 199 deletions(-)

diff --git a/public/app/features/datasources/settings/DataSourceSettings.test.tsx b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
index 222587d9249..73c05fdd518 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.test.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { DataSourceSettings, Props } from './DataSourceSettings';
-import { DataSource, DataSourceTest, NavModel } from '../../../types';
+import { DataSource, NavModel } from '../../../types';
 import { getMockDataSource } from '../__mocks__/dataSourcesMocks';
 import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks';
 
@@ -15,8 +15,6 @@ const setup = (propOverrides?: object) => {
     loadDataSource: jest.fn(),
     setDataSourceName: jest.fn(),
     updateDataSource: jest.fn(),
-    testing: {} as DataSourceTest,
-    clearTesting: jest.fn(),
   };
 
   Object.assign(props, propOverrides);
diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx
index e9a1b49c02a..e816c0231f0 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.tsx
@@ -1,33 +1,40 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
-import { DataSource, DataSourceTest, NavModel, Plugin } from 'app/types/';
-import PageHeader from '../../../core/components/PageHeader/PageHeader';
-import PageLoader from '../../../core/components/PageLoader/PageLoader';
+
+import PageHeader from 'app/core/components/PageHeader/PageHeader';
+import PageLoader from 'app/core/components/PageLoader/PageLoader';
 import PluginSettings from './PluginSettings';
 import BasicSettings from './BasicSettings';
 import ButtonRow from './ButtonRow';
-import appEvents from '../../../core/app_events';
-import { clearTesting, deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
-import { getNavModel } from '../../../core/selectors/navModel';
-import { getRouteParamsId } from '../../../core/selectors/location';
+
+import appEvents from 'app/core/app_events';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
+import { deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
+import { getNavModel } from 'app/core/selectors/navModel';
+import { getRouteParamsId } from 'app/core/selectors/location';
+
+import { DataSource, NavModel, Plugin } from 'app/types/';
 
 export interface Props {
   navModel: NavModel;
   dataSource: DataSource;
   dataSourceMeta: Plugin;
   pageId: number;
-  testing: DataSourceTest;
   deleteDataSource: typeof deleteDataSource;
   loadDataSource: typeof loadDataSource;
   setDataSourceName: typeof setDataSourceName;
   updateDataSource: typeof updateDataSource;
-  clearTesting: typeof clearTesting;
 }
+
 interface State {
   dataSource: DataSource;
-  hasClosedTest: boolean;
+  isTesting?: boolean;
+  testingMessage?: string;
+  testingStatus?: string;
 }
 
 enum DataSourceStates {
@@ -36,10 +43,13 @@ enum DataSourceStates {
 }
 
 export class DataSourceSettings extends PureComponent<Props, State> {
-  state = {
-    dataSource: {} as DataSource,
-    hasClosedTest: false,
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dataSource: {} as DataSource,
+    };
+  }
 
   async componentDidMount() {
     const { loadDataSource, pageId } = this.props;
@@ -47,27 +57,12 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     await loadDataSource(pageId);
   }
 
-  componentDidUpdate(prevProps) {
-    const { clearTesting } = this.props;
-
-    if (!this.state.hasClosedTest && prevProps.testing.status === 'success') {
-      this.setState({ hasClosedTest: true });
-
-      setTimeout(() => {
-        clearTesting();
-        this.setState({ hasClosedTest: false });
-      }, 3000);
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.clearTesting();
-  }
-
-  onSubmit = event => {
+  onSubmit = async event => {
     event.preventDefault();
 
-    this.props.updateDataSource({ ...this.state.dataSource, name: this.props.dataSource.name });
+    await this.props.updateDataSource({ ...this.state.dataSource, name: this.props.dataSource.name });
+
+    this.testDataSource();
   };
 
   onDelete = () => {
@@ -131,8 +126,45 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     );
   }
 
+  async testDataSource() {
+    const dsApi = await getDatasourceSrv().get(this.state.dataSource.name);
+
+    if (!dsApi.testDatasource) {
+      return;
+    }
+
+    this.setState({ isTesting: true, testingMessage: 'Testing...', testingStatus: 'info' });
+
+    getBackendSrv().withNoBackendCache(async () => {
+      try {
+        const result = await dsApi.testDatasource();
+
+        this.setState({
+          isTesting: false,
+          testingStatus: result.status,
+          testingMessage: result.message,
+        });
+      } catch (err) {
+        let message = '';
+
+        if (err.statusText) {
+          message = 'HTTP Error ' + err.statusText;
+        } else {
+          message = err.message;
+        }
+
+        this.setState({
+          isTesting: false,
+          testingStatus: 'error',
+          testingMessage: message,
+        });
+      }
+    });
+  }
+
   render() {
-    const { dataSource, dataSourceMeta, navModel, testing } = this.props;
+    const { dataSource, dataSourceMeta, navModel } = this.props;
+    const { testingMessage, testingStatus } = this.state;
 
     return (
       <div>
@@ -160,26 +192,20 @@ export class DataSourceSettings extends PureComponent<Props, State> {
                 )}
 
                 <div className="gf-form-group section">
-                  {testing.inProgress && (
-                    <h5>
-                      Testing.... <i className="fa fa-spiner fa-spin" />
-                    </h5>
-                  )}
-                  {!testing.inProgress &&
-                    testing.status && (
-                      <div className={`alert-${testing.status} alert`}>
-                        <div className="alert-icon">
-                          {testing.status === 'error' ? (
-                            <i className="fa fa-exclamation-triangle" />
-                          ) : (
-                            <i className="fa fa-check" />
-                          )}
-                        </div>
-                        <div className="alert-body">
-                          <div className="alert-title">{testing.message}</div>
-                        </div>
+                  {testingMessage && (
+                    <div className={`alert-${testingStatus} alert`}>
+                      <div className="alert-icon">
+                        {testingStatus === 'error' ? (
+                          <i className="fa fa-exclamation-triangle" />
+                        ) : (
+                          <i className="fa fa-check" />
+                        )}
                       </div>
-                    )}
+                      <div className="alert-body">
+                        <div className="alert-title">{testingMessage}</div>
+                      </div>
+                    </div>
+                  )}
                 </div>
 
                 <ButtonRow
@@ -205,7 +231,6 @@ function mapStateToProps(state) {
     dataSource: getDataSource(state.dataSources, pageId),
     dataSourceMeta: getDataSourceMeta(state.dataSources, dataSource.type),
     pageId: pageId,
-    testing: state.dataSources.testing,
   };
 }
 
@@ -214,7 +239,6 @@ const mapDispatchToProps = {
   loadDataSource,
   setDataSourceName,
   updateDataSource,
-  clearTesting,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings));
diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index 8fda109c906..c03860e1f01 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -1,13 +1,12 @@
 import { ThunkAction } from 'redux-thunk';
-import { DataSource, Plugin, StoreState } from 'app/types';
-import { getBackendSrv } from '../../../core/services/backend_srv';
-import { getDatasourceSrv } from '../../plugins/datasource_srv';
-import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
-import { updateLocation, updateNavIndex, UpdateNavIndexAction } from '../../../core/actions';
-import { UpdateLocationAction } from '../../../core/actions/location';
-import { buildNavModel } from './navModel';
-
 import config from '../../../core/config';
+import { getBackendSrv } from 'app/core/services/backend_srv';
+import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
+import { updateLocation, updateNavIndex, UpdateNavIndexAction } from 'app/core/actions';
+import { UpdateLocationAction } from 'app/core/actions/location';
+import { buildNavModel } from './navModel';
+import { DataSource, Plugin, StoreState } from 'app/types';
 
 export enum ActionTypes {
   LoadDataSources = 'LOAD_DATA_SOURCES',
@@ -18,10 +17,6 @@ export enum ActionTypes {
   SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE',
   SetDataSourceTypeSearchQuery = 'SET_DATA_SOURCE_TYPE_SEARCH_QUERY',
   SetDataSourceName = 'SET_DATA_SOURCE_NAME',
-  SetDataSourceTestingProgess = 'SET_TESTING_PROGRESS',
-  SetDataSourceTestingSuccess = 'SET_DATA_SOURCE_TESTING_SUCCESS',
-  SetDataSourceTestingFail = 'SET_DATA_SOURCE_TESTING_FAIL',
-  ClearTesting = 'CLEAR_TEST',
 }
 
 interface LoadDataSourcesAction {
@@ -64,25 +59,6 @@ interface SetDataSourceNameAction {
   payload: string;
 }
 
-interface SetDataSourceTestingProgessAction {
-  type: ActionTypes.SetDataSourceTestingProgess;
-  payload: boolean;
-}
-
-interface SetDataSourceTestingSuccessAction {
-  type: ActionTypes.SetDataSourceTestingSuccess;
-  payload: { status: string; message: string };
-}
-
-interface SetDataSourceTestingFailAction {
-  type: ActionTypes.SetDataSourceTestingFail;
-  payload: string;
-}
-
-interface ClearTestingAction {
-  type: ActionTypes.ClearTesting;
-}
-
 const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({
   type: ActionTypes.LoadDataSources,
   payload: dataSources,
@@ -123,28 +99,6 @@ export const setDataSourceName = (name: string) => ({
   payload: name,
 });
 
-export const clearTesting = (): ClearTestingAction => ({
-  type: ActionTypes.ClearTesting,
-});
-
-const setDataSourceTestingProgress = (state: boolean): SetDataSourceTestingProgessAction => ({
-  type: ActionTypes.SetDataSourceTestingProgess,
-  payload: state,
-});
-
-const setDataSourceTestingSuccess = (status: string, message: string): SetDataSourceTestingSuccessAction => ({
-  type: ActionTypes.SetDataSourceTestingSuccess,
-  payload: {
-    status: status,
-    message: message,
-  },
-});
-
-const setDataSourceTestingFail = (message: string): SetDataSourceTestingFailAction => ({
-  type: ActionTypes.SetDataSourceTestingFail,
-  payload: message,
-});
-
 export type Action =
   | LoadDataSourcesAction
   | SetDataSourcesSearchQueryAction
@@ -155,11 +109,7 @@ export type Action =
   | LoadDataSourceAction
   | UpdateNavIndexAction
   | LoadDataSourceMetaAction
-  | SetDataSourceNameAction
-  | SetDataSourceTestingProgessAction
-  | SetDataSourceTestingSuccessAction
-  | SetDataSourceTestingFailAction
-  | ClearTestingAction;
+  | SetDataSourceNameAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
@@ -211,15 +161,9 @@ export function loadDataSourceTypes(): ThunkResult<void> {
 
 export function updateDataSource(dataSource: DataSource): ThunkResult<void> {
   return async dispatch => {
-    await getBackendSrv()
-      .put(`/api/datasources/${dataSource.id}`, dataSource)
-      .then(response => {
-        updateFrontendSettings().then(() => {
-          testDataSource(dispatch, response.name);
-        });
-      });
-
-    dispatch(loadDataSource(dataSource.id));
+    await getBackendSrv().put(`/api/datasources/${dataSource.id}`, dataSource);
+    await updateFrontendSettings();
+    return dispatch(loadDataSource(dataSource.id));
   };
 }
 
@@ -270,40 +214,6 @@ function updateFrontendSettings() {
     });
 }
 
-function testDataSource(dispatch, name) {
-  dispatch(setDataSourceTestingProgress(true));
-  getDatasourceSrv()
-    .get(name)
-    .then(dataSource => {
-      if (!dataSource.testDatasource) {
-        return;
-      }
-
-      // make test call in no backend cache context
-      getBackendSrv()
-        .withNoBackendCache(() => {
-          return dataSource
-            .testDatasource()
-            .then(result => {
-              dispatch(setDataSourceTestingSuccess(result.status, result.message));
-            })
-            .catch(err => {
-              let message = '';
-
-              if (err.statusText) {
-                message = 'HTTP Error ' + err.statusText;
-              } else {
-                message = err.message;
-              }
-              dispatch(setDataSourceTestingFail(message));
-            });
-        })
-        .finally(() => {
-          dispatch(setDataSourceTestingProgress(false));
-        });
-    });
-}
-
 function nameHasSuffix(name) {
   return name.endsWith('-', name.length - 1);
 }
diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts
index 2fc6500e522..33feae6770a 100644
--- a/public/app/features/datasources/state/reducers.ts
+++ b/public/app/features/datasources/state/reducers.ts
@@ -12,7 +12,6 @@ const initialState: DataSourcesState = {
   dataSourceTypeSearchQuery: '',
   hasFetched: false,
   dataSourceMeta: {} as Plugin,
-  testing: { inProgress: false, status: '', message: '' },
 };
 
 export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => {
@@ -40,28 +39,6 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
 
     case ActionTypes.SetDataSourceName:
       return { ...state, dataSource: { ...state.dataSource, name: action.payload } };
-
-    case ActionTypes.SetDataSourceTestingProgess:
-      return { ...state, testing: { ...state.testing, inProgress: action.payload } };
-
-    case ActionTypes.SetDataSourceTestingSuccess:
-      return {
-        ...state,
-        testing: {
-          status: action.payload.status,
-          message: action.payload.message,
-          inProgress: false,
-        },
-      };
-
-    case ActionTypes.SetDataSourceTestingFail:
-      return {
-        ...state,
-        testing: { status: 'error', message: action.payload, inProgress: false },
-      };
-
-    case ActionTypes.ClearTesting:
-      return { ...state, testing: { inProgress: false, status: '', message: '' } };
   }
 
   return state;
diff --git a/public/app/plugins/datasource/cloudwatch/datasource.ts b/public/app/plugins/datasource/cloudwatch/datasource.ts
index 3eb8eff2d09..d9fb3450524 100644
--- a/public/app/plugins/datasource/cloudwatch/datasource.ts
+++ b/public/app/plugins/datasource/cloudwatch/datasource.ts
@@ -362,14 +362,9 @@ export default class CloudWatchDatasource {
     const metricName = 'EstimatedCharges';
     const dimensions = {};
 
-    return this.getDimensionValues(region, namespace, metricName, 'ServiceName', dimensions).then(
-      () => {
-        return { status: 'success', message: 'Data source is working' };
-      },
-      err => {
-        return { status: 'error', message: err.message };
-      }
-    );
+    return this.getDimensionValues(region, namespace, metricName, 'ServiceName', dimensions).then(() => {
+      return { status: 'success', message: 'Data source is working' };
+    });
   }
 
   awsRequest(url, data) {
diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts
index ef6077ffc20..970ef4f11c8 100644
--- a/public/app/types/datasources.ts
+++ b/public/app/types/datasources.ts
@@ -25,12 +25,6 @@ export interface DataSource {
   testDatasource?: () => Promise<any>;
 }
 
-export interface DataSourceTest {
-  inProgress: boolean;
-  message: string;
-  status: string;
-}
-
 export interface DataSourcesState {
   dataSources: DataSource[];
   searchQuery: string;
@@ -41,5 +35,4 @@ export interface DataSourcesState {
   dataSource: DataSource;
   dataSourceMeta: Plugin;
   hasFetched: boolean;
-  testing: DataSourceTest;
 }
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index 013c132a94f..fc176fed7e2 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -7,7 +7,7 @@ import { DashboardState } from './dashboard';
 import { DashboardAcl, OrgRole, PermissionLevel } from './acl';
 import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState, UserState } from './user';
-import { DataSource, DataSourceTest, DataSourcesState } from './datasources';
+import { DataSource, DataSourcesState } from './datasources';
 import {
   TimeRange,
   LoadingState,
@@ -88,7 +88,6 @@ export {
   AppNotificationTimeout,
   DashboardSearchHit,
   UserState,
-  DataSourceTest,
 };
 
 export interface StoreState {

From 7799ad81086da38957a8610a7656861ad5ec2a36 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 8 Nov 2018 09:34:14 +0100
Subject: [PATCH 25/25] added loading state

---
 .../app/features/datasources/settings/DataSourceSettings.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx
index e816c0231f0..0f07023b472 100644
--- a/public/app/features/datasources/settings/DataSourceSettings.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettings.tsx
@@ -18,6 +18,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParamsId } from 'app/core/selectors/location';
 
 import { DataSource, NavModel, Plugin } from 'app/types/';
+import { getDataSourceLoadingNav } from '../state/navModel';
 
 export interface Props {
   navModel: NavModel;
@@ -227,7 +228,7 @@ function mapStateToProps(state) {
   const dataSource = getDataSource(state.dataSources, pageId);
 
   return {
-    navModel: getNavModel(state.navIndex, `datasource-settings-${pageId}`),
+    navModel: getNavModel(state.navIndex, `datasource-settings-${pageId}`, getDataSourceLoadingNav('settings')),
     dataSource: getDataSource(state.dataSources, pageId),
     dataSourceMeta: getDataSourceMeta(state.dataSources, dataSource.type),
     pageId: pageId,