fixed routes and page

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() {
+  async componentDidMount() {
-    // importPluginModule(this.props.dataSourceMeta.module).then(pluginExports => {
+    const { loadDataSource, pageId } = this.props;
-    //   console.log(pluginExports);
+
-    // });
+    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}>
+        <PageHeader model={this.props.navModel} />
-          <div className="gf-form-group">
+        <div className="page-container page-body">
-            <div className="gf-form-inline">
+          <div>
-              <div className="gf-form max-width-30">
+            <form onSubmit={this.onSubmit}>
-                <span className="gf-form-label width-10">Name</span>
+              <div className="gf-form-group">
-                <input
+                <div className="gf-form-inline">
-                  className="gf-form-input max-width-23"
+                  <div className="gf-form max-width-30">
-                  type="text"
+                    <span className="gf-form-label width-10">Name</span>
-                  value={name}
+                    <input
-                  placeholder="Name"
+                      className="gf-form-input max-width-23"
-                  onChange={this.onNameChange}
+                      type="text"
-                  required
+                      value={name}
-                />
+                      placeholder="Name"
-                <div onClick={this.onTogglePopover}>
+                      onChange={this.onNameChange}
-                  <i className="fa fa-info-circle" />
+                      required
-                </div>
+                    />
-                {showNamePopover && (
+                    <div onClick={this.onTogglePopover}>
-                  <div
+                      <i className="fa fa-info-circle" />
-                    style={{
+                    </div>
-                      position: 'absolute',
+                    {showNamePopover && (
-                      left: '450px',
+                      <div
-                      top: '-20px',
+                        style={{
-                      padding: '10px',
+                          position: 'absolute',
-                      backgroundColor: 'black',
+                          left: '450px',
-                      zIndex: 2,
+                          top: '-20px',
-                      width: '300px',
+                          padding: '10px',
-                      border: '1px solid gray',
+                          backgroundColor: 'black',
-                      borderRadius: '3px',
+                          zIndex: 2,
-                    }}
+                          width: '300px',
-                  >
+                          border: '1px solid gray',
-                    The name is used when you select the data source in panels. The <em>Default</em> data source is
+                          borderRadius: '3px',
-                    preselected in new panels.
+                        }}
+                      >
+                        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>}
+        </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>
     );
   }
 }
 
 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);

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: {},
   };
 };

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: {

public/app/types/plugins.ts

@@ -60,6 +60,7 @@ export interface Plugin {
   pinned: boolean;
   state: string;
   type: string;
+  module: any;
 }
 
 export interface PluginDashboard {