Skip to content

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

refactoring:: dashboard save modal and save as modal needed an update

parent f3980504
Showing with 193 additions and 219 deletions
public/app/core/services/backend_srv.ts
...@@ -202,8 +202,12 @@ export class BackendSrv { ...@@ -202,8 +202,12 @@ export class BackendSrv {
saveDashboard(dash, options) { saveDashboard(dash, options) {
options = (options || {}); options = (options || {});
const message = options.message || '';
return this.post('/api/dashboards/db/', {dashboard: dash, overwrite: options.overwrite === true, message}); return this.post('/api/dashboards/db/', {
dashboard: dash,
overwrite: options.overwrite === true,
message: options.message || '',
});
} }
} }
......
public/app/features/dashboard/all.js
...@@ -5,8 +5,8 @@ define([ ...@@ -5,8 +5,8 @@ define([
'./dashboardLoaderSrv', './dashboardLoaderSrv',
'./dashnav/dashnav', './dashnav/dashnav',
'./submenu/submenu', './submenu/submenu',
'./saveDashboardAsCtrl', './save_as_modal',
'./saveDashboardMessageCtrl', './save_modal',
'./shareModalCtrl', './shareModalCtrl',
'./shareSnapshotCtrl', './shareSnapshotCtrl',
'./dashboard_srv', './dashboard_srv',
...@@ -20,7 +20,6 @@ define([ ...@@ -20,7 +20,6 @@ define([
'./import/dash_import', './import/dash_import',
'./export/export_modal', './export/export_modal',
'./export_data/export_data_modal', './export_data/export_data_modal',
'./dash_list_ctrl',
'./ad_hoc_filters', './ad_hoc_filters',
'./row/row_ctrl', './row/row_ctrl',
'./repeat_option/repeat_option', './repeat_option/repeat_option',
......
public/app/features/dashboard/dash_list_ctrl.ts deleted 100644 → 0
///<reference path="../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
export class DashListCtrl {
/** @ngInject */
constructor() {
}
}
coreModule.controller('DashListCtrl', DashListCtrl);
public/app/features/dashboard/dashboard_srv.ts
...@@ -65,7 +65,7 @@ export class DashboardSrv { ...@@ -65,7 +65,7 @@ export class DashboardSrv {
icon: "fa-warning", icon: "fa-warning",
altActionText: "Save As", altActionText: "Save As",
onAltAction: () => { onAltAction: () => {
this.saveDashboardAs(); this.showSaveAsModal();
}, },
onConfirm: () => { onConfirm: () => {
this.saveDashboard({overwrite: true}, clone); this.saveDashboard({overwrite: true}, clone);
...@@ -102,36 +102,33 @@ export class DashboardSrv { ...@@ -102,36 +102,33 @@ export class DashboardSrv {
} }
if (this.dash.title === 'New dashboard') { if (this.dash.title === 'New dashboard') {
return this.saveDashboardAs(); return this.showSaveAsModal();
} }
if (this.dash.version > 0) { if (this.dash.version > 0) {
return this.saveDashboardMessage(); return this.showSaveModal();
} }
return this.save(this.dash.getSaveModelClone(), options); return this.save(this.dash.getSaveModelClone(), options);
} }
saveDashboardAs() { showSaveAsModal() {
var newScope = this.$rootScope.$new(); var newScope = this.$rootScope.$new();
newScope.clone = this.dash.getSaveModelClone(); newScope.clone = this.dash.getSaveModelClone();
newScope.clone.editable = true; newScope.clone.editable = true;
newScope.clone.hideControls = false; newScope.clone.hideControls = false;
this.$rootScope.appEvent('show-modal', { this.$rootScope.appEvent('show-modal', {
src: 'public/app/features/dashboard/partials/saveDashboardAs.html', templateHtml: '<save-dashboard-as-modal dismiss="dismiss()"></save-dashboard-as-modal>',
scope: newScope, scope: newScope,
modalClass: 'modal--narrow' modalClass: 'modal--narrow'
}); });
} }
saveDashboardMessage() { showSaveModal() {
var newScope = this.$rootScope.$new();
newScope.clone = this.dash.getSaveModelClone();
this.$rootScope.appEvent('show-modal', { this.$rootScope.appEvent('show-modal', {
src: 'public/app/features/dashboard/partials/saveDashboardMessage.html', templateHtml: '<save-dashboard-modal dismiss="dismiss()"></save-dashboard-modal>"',
scope: newScope, scope: this.$rootScope.$new(),
modalClass: 'modal--narrow' modalClass: 'modal--narrow'
}); });
} }
......
public/app/features/dashboard/dashnav/dashnav.ts
...@@ -87,8 +87,8 @@ export class DashNavCtrl { ...@@ -87,8 +87,8 @@ export class DashNavCtrl {
this.$rootScope.appEvent('panel-change-view', {fullscreen: false, edit: false}); this.$rootScope.appEvent('panel-change-view', {fullscreen: false, edit: false});
} }
saveDashboard(options) { saveDashboard() {
return this.dashboardSrv.saveDashboard(options); return this.dashboardSrv.saveDashboard();
} }
deleteDashboard() { deleteDashboard() {
...@@ -126,7 +126,7 @@ export class DashNavCtrl { ...@@ -126,7 +126,7 @@ export class DashNavCtrl {
} }
saveDashboardAs() { saveDashboardAs() {
return this.dashboardSrv.saveDashboardAs(); return this.dashboardSrv.showSaveAsModal();
} }
viewJson() { viewJson() {
......
public/app/features/dashboard/partials/dash_list.html deleted 100644 → 0
<navbar title="Dashboards" title-url="dashboards" icon="icon-gf icon-gf-dashboard">
</navbar>
<div class="page-container">
<div class="page-header">
<h1>Dashboards</h1>
</div>
</div>
public/app/features/dashboard/partials/graphiteImport.html deleted 100644 → 0
<div ng-controller="GraphiteImportCtrl" ng-init="init()">
<div ng-if="datasources.length > 0">
<h2 class="page-heading">Load dashboard from Graphite-Web</h2>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-10">Data source</span>
</div>
<div class="gf-form">
<div class="gf-form-select-wrapper">
<select type="text" ng-model="options.sourceName" class="gf-form-input gf-size-auto" ng-options="f for f in datasources">
</select>
</div>
</div>
<div class="gf-form">
<button class="btn btn-success pull-right" ng-click="listAll()">List dashboards</button>
</div>
</div>
</div>
<table class="grafana-options-table" style="margin-top: 20px;">
<tr ng-repeat="dash in dashboards">
<td style="">{{dash.name}}</td>
<td>
<button class="btn btn-inverse pull-right" ng-click="import(dash.name)">
Load
</button>
</td>
</tr>
</table>
</div>
</div>
public/app/features/dashboard/partials/saveDashboardAs.html deleted 100644 → 0
<div class="modal-body" ng-controller="SaveDashboardAsCtrl" ng-init="init();">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-copy"></i>
<span class="p-l-1">Save As...</span>
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content">
<div class="p-t-2">
<div class="gf-form">
<label class="gf-form-label">New name</label>
<input type="text" class="gf-form-input" ng-model="clone.title" give-focus="true" ng-keydown="keyDown($event)">
</div>
</div>
<div class="gf-form-button-row text-center">
<a class="btn btn-success" ng-click="saveClone();">Save</a>
<a class="btn-text" ng-click="dismiss();">Cancel</a>
</div>
</div>
</div>
public/app/features/dashboard/partials/saveDashboardMessage.html deleted 100644 → 0
<div class="modal-body" ng-controller="SaveDashboardMessageCtrl" ng-init="init();">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-save"></i>
<span class="p-l-1">Save Dashboard</span>
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<form name="saveMessage" ng-submit="saveVersion(saveMessage.$valid)" class="modal-content" novalidate>
<h6 class="text-center">Add a note to describe the changes in this version</h6>
<div class="p-t-2">
<div class="gf-form">
<label class="gf-form-hint">
<input
type="text"
name="message"
class="gf-form-input"
placeholder="Updates to &hellip;"
give-focus="true"
ng-model="clone.message"
ng-model-options="{allowInvalid: true}"
ng-keydown="keyDown($event)"
ng-maxlength="clone.max"
autocomplete="off"
required />
<small class="gf-form-hint-text muted" ng-cloak>
<span ng-class="{'text-error': saveMessage.message.$invalid && saveMessage.message.$dirty }">
{{clone.message.length || 0}}
</span>
/ {{clone.max}} characters
</small>
</label>
</div>
</div>
<div class="gf-form-button-row text-center">
<button type="submit" class="btn btn-success" ng-disabled="saveMessage.$invalid">
Save
</button>
<button class="btn btn-inverse" ng-click="dismiss();">Cancel</button>
</div>
</form>
</div>
public/app/features/dashboard/saveDashboardAsCtrl.js deleted 100644 → 0
define([
'angular',
],
function (angular) {
'use strict';
var module = angular.module('grafana.controllers');
module.controller('SaveDashboardAsCtrl', function($scope, dashboardSrv) {
$scope.init = function() {
$scope.clone.id = null;
$scope.clone.editable = true;
$scope.clone.title = $scope.clone.title + " Copy";
// remove alerts
$scope.clone.rows.forEach(function(row) {
row.panels.forEach(function(panel) {
delete panel.alert;
});
});
// remove auto update
delete $scope.clone.autoUpdate;
};
$scope.keyDown = function (evt) {
if (evt.keyCode === 13) {
$scope.saveClone();
}
};
$scope.saveClone = function() {
return dashboardSrv.save($scope.clone, {overwrite: false})
.then(function() { $scope.dismiss(); });
};
});
});
public/app/features/dashboard/saveDashboardMessageCtrl.js deleted 100644 → 0
define([
'angular',
],
function (angular) {
'use strict';
var module = angular.module('grafana.controllers');
module.controller('SaveDashboardMessageCtrl', function($scope, dashboardSrv) {
$scope.init = function() {
$scope.clone.message = '';
$scope.clone.max = 64;
};
function saveDashboard(options) {
options.message = $scope.clone.message;
return dashboardSrv.save($scope.clone, options)
.then(function() { $scope.dismiss(); });
}
$scope.saveVersion = function(isValid) {
if (!isValid) { return; }
saveDashboard({overwrite: false});
};
});
});
public/app/features/dashboard/save_as_modal.ts 0 → 100644
///<reference path="../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
const template = `
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-copy"></i>
<span class="p-l-1">Save As...</span>
</h2>
<a class="modal-header-close" ng-click="ctrl.dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content">
<div class="p-t-2">
<div class="gf-form">
<label class="gf-form-label">New name</label>
<input type="text" class="gf-form-input" ng-model="ctrl.clone.title" give-focus="true" ng-keydown="ctrl.keyDown($event)">
</div>
</div>
<div class="gf-form-button-row text-center">
<a class="btn btn-success" ng-click="ctrl.save();">Save</a>
<a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
</div>
</div>
</div>
`;
export class SaveDashboardAsModalCtrl {
clone: any;
dismiss: () => void;
/** @ngInject */
constructor(private $scope, private dashboardSrv) {
var dashboard = this.dashboardSrv.getCurrent();
this.clone = dashboard.getSaveModelClone();
this.clone.id = null;
this.clone.title += ' Copy';
this.clone.editable = true;
this.clone.hideControls = false;
// remove alerts
this.clone.rows.forEach(row => {
row.panels.forEach(panel => {
delete panel.alert;
});
});
delete this.clone.autoUpdate;
}
save() {
return this.dashboardSrv.save(this.clone).then(this.dismiss);
}
keyDown(evt) {
if (evt.keyCode === 13) {
this.save();
}
}
}
export function saveDashboardAsDirective() {
return {
restrict: 'E',
template: template,
controller: SaveDashboardAsModalCtrl,
bindToController: true,
controllerAs: 'ctrl',
scope: {dismiss: "&"}
};
}
coreModule.directive('saveDashboardAsModal', saveDashboardAsDirective);
public/app/features/dashboard/save_modal.ts 0 → 100644
///<reference path="../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
const template = `
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-save"></i>
<span class="p-l-1">Save Dashboard</span>
</h2>
<a class="modal-header-close" ng-click="ctrl.dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<form name="ctrl.saveForm" ng-submit="ctrl.save()" class="modal-content" novalidate>
<h6 class="text-center">Add a note to describe your changes</h6>
<div class="p-t-2">
<div class="gf-form">
<label class="gf-form-hint">
<input
type="text"
name="message"
class="gf-form-input"
placeholder="Updates to &hellip;"
give-focus="true"
ng-model="ctrl.message"
ng-model-options="{allowInvalid: true}"
ng-maxlength="this.max"
ng-keydown="ctrl.keyDown($event)"
autocomplete="off"
required />
<small class="gf-form-hint-text muted" ng-cloak>
<span ng-class="{'text-error': ctrl.saveForm.message.$invalid && ctrl.saveForm.message.$dirty }">
{{ctrl.message.length || 0}}
</span>
/ {{ctrl.max}} characters
</small>
</label>
</div>
</div>
<div class="gf-form-button-row text-center">
<button type="submit" class="btn btn-success" ng-disabled="ctrl.saveForm.$invalid">Save</button>
<button class="btn btn-inverse" ng-click="ctrl.dismiss();">Cancel</button>
</div>
</form>
</div>
`;
export class SaveDashboardModalCtrl {
message: string;
max: number;
saveForm: any;
dismiss: () => void;
/** @ngInject */
constructor(private $scope, private dashboardSrv) {
this.message = '';
this.max = 64;
}
save() {
if (!this.saveForm.$valid) {
return;
}
var dashboard = this.dashboardSrv.getCurrent();
var saveModel = dashboard.getSaveModelClone();
var options = {message: this.message};
return this.dashboardSrv.save(saveModel, options).then(this.dismiss);
}
keyDown(evt) {
if (evt.keyCode === 13) {
this.save();
}
}
}
export function saveDashboardModalDirective() {
return {
restrict: 'E',
template: template,
controller: SaveDashboardModalCtrl,
bindToController: true,
controllerAs: 'ctrl',
scope: {dismiss: "&"}
};
}
coreModule.directive('saveDashboardModal', saveDashboardModalDirective);
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