mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux: dashboard settings progress
This commit is contained in:
Torkel Ödegaard
parent
97bd00c520
commit
cc046f03aa
@ -86,20 +86,30 @@
|
||||
<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'delete'">
|
||||
<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">
|
||||
<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()">
|
||||
</div>
|
||||
|
||||
<button class="btn btn-danger" ng-click="ctrl.deleteDashboard()" ng-disabled="!ctrl.confirmValid" >
|
||||
<i class="fa fa-trash"></i>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div ng-if="!ctrl.dashboard.meta.canSave">
|
||||
<h5>You cannot delete this dashboard</h5>
|
||||
<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>
|
||||
<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 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 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>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {coreModule, appEvents} from 'app/core/core';
|
||||
import {DashboardModel} from '../dashboard_model';
|
||||
import { coreModule, appEvents, contextSrv } from 'app/core/core';
|
||||
import { DashboardModel } from '../dashboard_model';
|
||||
import $ from 'jquery';
|
||||
import _ from 'lodash';
|
||||
|
||||
@ -11,17 +11,7 @@ export class SettingsCtrl {
|
||||
alertCount: number;
|
||||
confirmValid: boolean;
|
||||
confirmText: string;
|
||||
|
||||
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"},
|
||||
];
|
||||
sections: any[];
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $scope, private $location, private $rootScope, private backendSrv, private dashboardSrv) {
|
||||
@ -29,17 +19,9 @@ export class SettingsCtrl {
|
||||
// that rely on inherited scope
|
||||
$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.dashboard.updateSubmenuVisibility();
|
||||
this.$rootScope.$broadcast("refresh");
|
||||
this.$rootScope.$broadcast('refresh');
|
||||
});
|
||||
|
||||
this.alertCount = _.sumBy(this.dashboard.panels, panel => {
|
||||
@ -47,9 +29,54 @@ export class SettingsCtrl {
|
||||
});
|
||||
|
||||
this.confirmValid = this.alertCount === 0;
|
||||
|
||||
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() {
|
||||
@ -73,14 +100,14 @@ export class SettingsCtrl {
|
||||
makeEditable() {
|
||||
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
|
||||
window.location.href = window.location.href;
|
||||
});
|
||||
}
|
||||
|
||||
confirmTextChanged() {
|
||||
this.confirmValid = this.confirmText === "DELETE";
|
||||
this.confirmValid = this.confirmText === 'DELETE';
|
||||
}
|
||||
|
||||
deleteDashboard() {
|
||||
@ -93,7 +120,7 @@ export class SettingsCtrl {
|
||||
onFolderChange(folder) {
|
||||
this.dashboard.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() {
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
transclude: true,
|
||||
scope: { dashboard: "=" }
|
||||
scope: { dashboard: '=' },
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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)">
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user