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() {
-    // 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,7 +95,12 @@ export class DataSourceSettings extends PureComponent<Props, State> {
   render() {
     const { name, showNamePopover } = this.state;
 
+    console.log(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">
@@ -126,8 +142,8 @@ export class DataSourceSettings extends PureComponent<Props, State> {
               {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 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} />
@@ -144,15 +160,25 @@ export class DataSourceSettings extends PureComponent<Props, State> {
               </div>
             </form>
           </div>
+        </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);

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 {