Skip to content

N
nexpie-grafana-theme
Commit cc046f03 by Torkel Ödegaard
Options

ux: dashboard settings progress

parent 97bd00c5
Showing with 77 additions and 41 deletions
public/app/features/dashboard/settings/settings.html
...@@ -86,20 +86,30 @@ ...@@ -86,20 +86,30 @@
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'delete'"> <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'delete'">
<h3 class="dashboard-settings__header">Delete dashboard</h3> <h3 class="dashboard-settings__header">Delete dashboard</h3>
<div ng-if="ctrl.dashboard.meta.canSave"> <div class="p-b-2" ng-if="ctrl.alertCount > 1">
<div class="p-b-2" ng-if="ctrl.alertCount > 1"> <h5>This dashboard contains {{ctrl.alertCount}} alerts. Deleting this dashboard will also delete those alerts</h5>
<h5>This dashboard contains {{ctrl.alertCount}} alerts. Deleting this dashboard will also delete those alerts</h5> <input type="text" class="gf-form-input width-16" style="display: inline-block;" placeholder="Type DELETE to confirm" ng-model="ctrl.confirmText" ng-change="ctrl.confirmTextChanged()">
<input type="text" class="gf-form-input width-16" style="display: inline-block;" placeholder="Type DELETE to confirm" ng-model="ctrl.confirmText" ng-change="ctrl.confirmTextChanged()">
</div>
<button class="btn btn-danger" ng-click="ctrl.deleteDashboard()" ng-disabled="!ctrl.confirmValid" >
<i class="fa fa-trash"></i>
Delete
</button>
</div> </div>
<div ng-if="!ctrl.dashboard.meta.canSave"> <button class="btn btn-danger" ng-click="ctrl.deleteDashboard()" ng-disabled="!ctrl.confirmValid" >
<h5>You cannot delete this dashboard</h5> <i class="fa fa-trash"></i>
Delete
</button>
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === '404'">
<h3 class="dashboard-settings__header">Settings view not found</h3>
<div>
<h5>The settings page could not be found or you do not have permission to access it</h5>
</div> </div>
</div>
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'make_editable'">
<h3 class="dashboard-settings__header">Make Editable</h3>
<button class="btn btn-success" ng-click="ctrl.makeEditable()">
Make Editable
</button>
</div> </div>
public/app/features/dashboard/settings/settings.ts
import {coreModule, appEvents} from 'app/core/core'; import { coreModule, appEvents, contextSrv } from 'app/core/core';
import {DashboardModel} from '../dashboard_model'; import { DashboardModel } from '../dashboard_model';
import $ from 'jquery'; import $ from 'jquery';
import _ from 'lodash'; import _ from 'lodash';
...@@ -11,17 +11,7 @@ export class SettingsCtrl { ...@@ -11,17 +11,7 @@ export class SettingsCtrl {
alertCount: number; alertCount: number;
confirmValid: boolean; confirmValid: boolean;
confirmText: string; confirmText: string;
sections: any[];
sections: any[] = [
{title: 'General', id: 'settings', icon: "fa fa-fw fa-sliders"},
{title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"},
{title: 'Variables', id: 'templating', icon: "fa fa-fw fa-dollar"},
{title: 'Links', id: 'links', icon: "fa fa-fw fa-external-link"},
{title: 'Versions', id: 'versions', icon: "fa fa-fw fa-history"},
{title: 'View JSON', id: 'view_json', icon: "fa fa-fw fa-code"},
{title: 'Save As', id: 'save_as', icon: "fa fa-fw fa-copy"},
{title: 'Delete', id: 'delete', icon: "fa fa-fw fa-trash"},
];
/** @ngInject */ /** @ngInject */
constructor(private $scope, private $location, private $rootScope, private backendSrv, private dashboardSrv) { constructor(private $scope, private $location, private $rootScope, private backendSrv, private dashboardSrv) {
...@@ -29,17 +19,9 @@ export class SettingsCtrl { ...@@ -29,17 +19,9 @@ export class SettingsCtrl {
// that rely on inherited scope // that rely on inherited scope
$scope.dashboard = this.dashboard; $scope.dashboard = this.dashboard;
const params = this.$location.search();
const url = $location.path();
for (let section of this.sections) {
const sectionParams = _.defaults({editview: section.id}, params);
section.url = url + '?' + $.param(sectionParams);
}
this.$scope.$on('$destroy', () => { this.$scope.$on('$destroy', () => {
this.dashboard.updateSubmenuVisibility(); this.dashboard.updateSubmenuVisibility();
this.$rootScope.$broadcast("refresh"); this.$rootScope.$broadcast('refresh');
}); });
this.alertCount = _.sumBy(this.dashboard.panels, panel => { this.alertCount = _.sumBy(this.dashboard.panels, panel => {
...@@ -47,9 +29,54 @@ export class SettingsCtrl { ...@@ -47,9 +29,54 @@ export class SettingsCtrl {
}); });
this.confirmValid = this.alertCount === 0; this.confirmValid = this.alertCount === 0;
this.onRouteUpdated(); this.onRouteUpdated();
$rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope); this.buildSectionList();
$rootScope.onAppEvent('$routeUpdate', this.onRouteUpdated.bind(this), $scope);
}
buildSectionList() {
this.sections = [];
if (this.dashboard.meta.canEdit) {
this.sections.push({ title: 'General', id: 'settings', icon: 'fa fa-fw fa-sliders' });
this.sections.push({ title: 'Annotations', id: 'annotations', icon: 'fa fa-fw fa-comment-o' });
this.sections.push({ title: 'Variables', id: 'templating', icon: 'fa fa-fw fa-dollar' });
this.sections.push({ title: 'Links', id: 'links', icon: 'fa fa-fw fa-external-link' });
if (this.dashboard.id) {
this.sections.push({ title: 'Versions', id: 'versions', icon: 'fa fa-fw fa-history' });
}
}
if (contextSrv.isEditor && !this.dashboard.editable) {
this.sections.push({ title: 'Make Editable', icon: 'fa fa-fw fa-edit', id: 'make_editable' });
this.viewId = 'make_editable';
}
this.sections.push({ title: 'View JSON', id: 'view_json', icon: 'fa fa-fw fa-code' });
if (contextSrv.isEditor) {
this.sections.push({ title: 'Save As', id: 'save_as', icon: 'fa fa-fw fa-copy' });
}
if (this.dashboard.meta.canSave) {
this.sections.push({ title: 'Delete', id: 'delete', icon: 'fa fa-fw fa-trash' });
}
const params = this.$location.search();
const url = this.$location.path();
for (let section of this.sections) {
const sectionParams = _.defaults({ editview: section.id }, params);
section.url = url + '?' + $.param(sectionParams);
}
const currentSection = _.find(this.sections, { id: this.viewId });
if (!currentSection) {
this.sections.unshift({ title: 'Not found', id: '404', icon: 'fa fa-fw fa-warning' });
this.viewId = '404';
return;
}
} }
onRouteUpdated() { onRouteUpdated() {
...@@ -73,14 +100,14 @@ export class SettingsCtrl { ...@@ -73,14 +100,14 @@ export class SettingsCtrl {
makeEditable() { makeEditable() {
this.dashboard.editable = true; this.dashboard.editable = true;
return this.dashboardSrv.saveDashboard({makeEditable: true, overwrite: false}).then(() => { return this.dashboardSrv.saveDashboard({ makeEditable: true, overwrite: false }).then(() => {
// force refresh whole page // force refresh whole page
window.location.href = window.location.href; window.location.href = window.location.href;
}); });
} }
confirmTextChanged() { confirmTextChanged() {
this.confirmValid = this.confirmText === "DELETE"; this.confirmValid = this.confirmText === 'DELETE';
} }
deleteDashboard() { deleteDashboard() {
...@@ -93,7 +120,7 @@ export class SettingsCtrl { ...@@ -93,7 +120,7 @@ export class SettingsCtrl {
onFolderChange(folder) { onFolderChange(folder) {
this.dashboard.folderId = folder.id; this.dashboard.folderId = folder.id;
this.dashboard.meta.folderId = folder.id; this.dashboard.meta.folderId = folder.id;
this.dashboard.meta.folderTitle= folder.title; this.dashboard.meta.folderTitle = folder.title;
} }
} }
...@@ -105,7 +132,7 @@ export function dashboardSettings() { ...@@ -105,7 +132,7 @@ export function dashboardSettings() {
bindToController: true, bindToController: true,
controllerAs: 'ctrl', controllerAs: 'ctrl',
transclude: true, transclude: true,
scope: { dashboard: "=" } scope: { dashboard: '=' },
}; };
} }
......
public/app/partials/confirm_modal.html
...@@ -21,7 +21,6 @@ ...@@ -21,7 +21,6 @@
</div> </div>
</div> </div>
<div class="modal-content-confirm-text" ng-if="confirmText"> <div class="modal-content-confirm-text" ng-if="confirmText">
<input type="text" class="gf-form-input width-16" style="display: inline-block;" placeholder="Type {{confirmText}} to confirm" ng-model="confirmInput" ng-change="updateConfirmText(confirmInput)"> <input type="text" class="gf-form-input width-16" style="display: inline-block;" placeholder="Type {{confirmText}} to confirm" ng-model="confirmInput" ng-change="updateConfirmText(confirmInput)">
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment