feat: ds edit nav

public/app/features/plugins/all.ts

@@ -3,6 +3,7 @@ import './plugin_page_ctrl';
 import './plugin_list_ctrl';
 import './import_list/import_list';
 import './ds_edit_ctrl';
+import './ds_dashboards_ctrl';
 import './ds_list_ctrl';
 import './datasource_srv';
 import './plugin_component';

public/app/features/plugins/ds_dashboards_ctrl.ts

@@ -0,0 +1,39 @@
+import { toJS } from 'mobx';
+import { coreModule } from 'app/core/core';
+import { store } from 'app/stores/store';
+
+export class DataSourceDashboardsCtrl {
+  datasourceMeta: any;
+  navModel: any;
+  current: any;
+
+  /** @ngInject */
+  constructor(private backendSrv, private $routeParams) {
+    if (this.$routeParams.id) {
+      this.getDatasourceById(this.$routeParams.id);
+    }
+  }
+
+  getDatasourceById(id) {
+    this.backendSrv
+      .get('/api/datasources/' + id)
+      .then(ds => {
+        this.current = ds;
+      })
+      .then(this.getPluginInfo.bind(this));
+  }
+
+  updateNav() {
+    store.nav.initDatasourceEditNav(this.current, this.datasourceMeta, 'datasource-dashboards');
+    this.navModel = toJS(store.nav);
+  }
+
+  getPluginInfo() {
+    return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => {
+      this.datasourceMeta = pluginInfo;
+      this.updateNav();
+    });
+  }
+}
+
+coreModule.controller('DataSourceDashboardsCtrl', DataSourceDashboardsCtrl);

public/app/features/plugins/ds_edit_ctrl.ts

@@ -1,7 +1,8 @@
 import _ from 'lodash';
-
+import { toJS } from 'mobx';
 import config from 'app/core/config';
 import { coreModule, appEvents } from 'app/core/core';
+import { store } from 'app/stores/store';
 
 var datasourceTypes = [];
 
@@ -23,8 +24,6 @@ export class DataSourceEditCtrl {
   types: any;
   testing: any;
   datasourceMeta: any;
-  tabIndex: number;
-  hasDashboards: boolean;
   editForm: any;
   gettingStarted: boolean;
   navModel: any;
@@ -39,8 +38,8 @@ export class DataSourceEditCtrl {
     navModelSrv
   ) {
     this.navModel = navModelSrv.getNav('cfg', 'datasources', 0);
+    this.navModel = thi;
     this.datasources = [];
-    this.tabIndex = 0;
 
     this.loadDatasourceTypes().then(() => {
       if (this.$routeParams.id) {
@@ -55,8 +54,6 @@ export class DataSourceEditCtrl {
     this.isNew = true;
     this.current = _.cloneDeep(defaults);
 
-    this.navModel.breadcrumbs.push({ text: 'New' });
-
     // We are coming from getting started
     if (this.$location.search().gettingstarted) {
       this.gettingStarted = true;
@@ -82,12 +79,6 @@ export class DataSourceEditCtrl {
     this.backendSrv.get('/api/datasources/' + id).then(ds => {
       this.isNew = false;
       this.current = ds;
-      this.navModel.node = {
-        text: ds.name,
-        icon: 'icon-gf icon-gf-fw icon-gf-datasources',
-        id: 'ds-new',
-      };
-      this.navModel.breadcrumbs.push(this.navModel.node);
 
       if (datasourceCreated) {
         datasourceCreated = false;
@@ -112,11 +103,15 @@ export class DataSourceEditCtrl {
     this.typeChanged();
   }
 
+  updateNav() {
+    store.nav.initDatasourceEditNav(this.current, this.datasourceMeta, 'datasource-settings');
+    this.navModel = toJS(store.nav);
+  }
+
   typeChanged() {
-    this.hasDashboards = false;
     return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => {
       this.datasourceMeta = pluginInfo;
-      this.hasDashboards = _.find(pluginInfo.includes, { type: 'dashboard' }) !== undefined;
+      this.updateNav();
     });
   }
 
@@ -171,6 +166,7 @@ export class DataSourceEditCtrl {
     if (this.current.id) {
       return this.backendSrv.put('/api/datasources/' + this.current.id, this.current).then(result => {
         this.current = result.datasource;
+        this.updateNav();
         this.updateFrontendSettings().then(() => {
           this.testDatasource();
         });

public/app/features/plugins/partials/ds_dashboards.html

@@ -0,0 +1,10 @@
+<page-header model="ctrl.navModel"></page-header>
+
+<div class="page-container page-body">
+
+	<h3 class="page-heading">Bundled Plugin Dashboards</h3>
+	<div class="section">
+		<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
+	</div>
+
+</div>

public/app/features/plugins/partials/ds_edit.html

@@ -8,9 +8,6 @@
     </div>
   </div>
 
-  <h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Data Source</h3>
-  <h3 class="page-sub-heading" ng-show="ctrl.isNew">New Data Source</h3>
-
   <form name="ctrl.editForm" ng-if="ctrl.current">
     <div class="gf-form-group">
       <div class="gf-form-inline">

public/app/routes/routes.ts

@@ -48,6 +48,11 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       controller: 'DataSourceEditCtrl',
       controllerAs: 'ctrl',
     })
+    .when('/datasources/edit/:id/dashboards', {
+      templateUrl: 'public/app/features/plugins/partials/ds_dashboards.html',
+      controller: 'DataSourceEditCtrl',
+      controllerAs: 'ctrl',
+    })
     .when('/datasources/new', {
       templateUrl: 'public/app/features/plugins/partials/ds_edit.html',
       controller: 'DataSourceEditCtrl',

public/app/stores/NavStore/NavStore.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { types, getEnv } from 'mobx-state-tree';
 import { NavItem } from './NavItem';
 
@@ -38,6 +39,7 @@ export const NavStore = types
       self.main = NavItem.create(main);
       self.node = NavItem.create(node);
     },
+
     initFolderNav(folder: any, activeChildId: string) {
       const folderUrl = createFolderUrl(folder.id, folder.slug);
 
@@ -75,6 +77,46 @@ export const NavStore = types
 
       self.main = NavItem.create(main);
     },
+
+    initDatasourceEditNav(ds: any, plugin: any, currentPage: string) {
+      let title = 'New';
+      let subTitle = `Type: ${plugin.name}`;
+
+      if (ds.id) {
+        title = ds.name;
+      }
+
+      let main = {
+        img: plugin.info.logos.large,
+        id: 'ds-edit-' + plugin.id,
+        subTitle: subTitle,
+        url: '',
+        text: title,
+        breadcrumbs: [{ title: 'Data Sources', url: 'datasources' }],
+        children: [
+          {
+            active: currentPage === 'datasource-settings',
+            icon: 'fa fa-fw fa-sliders',
+            id: 'datasource-settings',
+            text: 'Settings',
+            url: `datasources/edit/${ds.id}`,
+          },
+        ],
+      };
+
+      const hasDashboards = _.find(plugin.includes, { type: 'dashboard' }) !== undefined;
+      if (hasDashboards && ds.id) {
+        main.children.push({
+          active: currentPage === 'datasource-dashboards',
+          icon: 'fa fa-fw fa-th-large',
+          id: 'datasource-dashboards',
+          text: 'Dashboards',
+          url: `datasources/edit/${ds.id}/dashboards`,
+        });
+      }
+
+      self.main = NavItem.create(main);
+    },
   }));
 
 function createFolderUrl(folderId: number, slug: string) {