From ccde8d9e2f7cb5c91287d7b192f79debc6661a16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 18 Jan 2018 17:42:40 +0100 Subject: [PATCH] feat: ds edit nav --- public/app/features/plugins/all.ts | 1 + .../features/plugins/ds_dashboards_ctrl.ts | 39 +++++++++++++++++ public/app/features/plugins/ds_edit_ctrl.ts | 24 +++++------ .../plugins/partials/ds_dashboards.html | 10 +++++ .../features/plugins/partials/ds_edit.html | 3 -- public/app/routes/routes.ts | 5 +++ public/app/stores/NavStore/NavStore.ts | 42 +++++++++++++++++++ 7 files changed, 107 insertions(+), 17 deletions(-) create mode 100644 public/app/features/plugins/ds_dashboards_ctrl.ts create mode 100644 public/app/features/plugins/partials/ds_dashboards.html diff --git a/public/app/features/plugins/all.ts b/public/app/features/plugins/all.ts index a0d4e61962c..fd19ea963b6 100644 --- a/public/app/features/plugins/all.ts +++ b/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'; diff --git a/public/app/features/plugins/ds_dashboards_ctrl.ts b/public/app/features/plugins/ds_dashboards_ctrl.ts new file mode 100644 index 00000000000..950fe2a04bd --- /dev/null +++ b/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); diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 5a48ba74dbc..2f5ad470dc0 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/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(); }); diff --git a/public/app/features/plugins/partials/ds_dashboards.html b/public/app/features/plugins/partials/ds_dashboards.html new file mode 100644 index 00000000000..50be10819b5 --- /dev/null +++ b/public/app/features/plugins/partials/ds_dashboards.html @@ -0,0 +1,10 @@ + + +
+ +

Bundled Plugin Dashboards

+
+ +
+ +
diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 69a649b132b..f0bb8867f83 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -8,9 +8,6 @@ -

Edit Data Source

-

New Data Source

-
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts index f4285cbeb86..917c80c0e7a 100644 --- a/public/app/routes/routes.ts +++ b/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', diff --git a/public/app/stores/NavStore/NavStore.ts b/public/app/stores/NavStore/NavStore.ts index 3874316e231..d04c5bf0259 100644 --- a/public/app/stores/NavStore/NavStore.ts +++ b/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) {