IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-06-05 14:56:11 +02:00
parent f3980504e2
commit fdfcd5cbf0
13 changed files with 193 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/core/services/backend_srv.ts
View File

@@ -202,8 +202,12 @@ export class BackendSrv {
saveDashboard(dash, 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 || '',
});
}
}

5
public/app/features/dashboard/all.js
View File

@@ -5,8 +5,8 @@ define([
'./dashboardLoaderSrv',
'./dashnav/dashnav',
'./submenu/submenu',
'./saveDashboardAsCtrl',
'./saveDashboardMessageCtrl',
'./save_as_modal',
'./save_modal',
'./shareModalCtrl',
'./shareSnapshotCtrl',
'./dashboard_srv',
@@ -20,7 +20,6 @@ define([
'./import/dash_import',
'./export/export_modal',
'./export_data/export_data_modal',
'./dash_list_ctrl',
'./ad_hoc_filters',
'./row/row_ctrl',
'./repeat_option/repeat_option',

11
public/app/features/dashboard/dash_list_ctrl.ts
View File

@@ -1,11 +0,0 @@
///<reference path="../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
export class DashListCtrl {
/** @ngInject */
constructor() {
}
}
coreModule.controller('DashListCtrl', DashListCtrl);

19
public/app/features/dashboard/dashboard_srv.ts
View File

@@ -65,7 +65,7 @@ export class DashboardSrv {
icon: "fa-warning",
altActionText: "Save As",
onAltAction: () => {
this.saveDashboardAs();
this.showSaveAsModal();
},
onConfirm: () => {
this.saveDashboard({overwrite: true}, clone);
@@ -102,36 +102,33 @@ export class DashboardSrv {
}
if (this.dash.title === 'New dashboard') {
return this.saveDashboardAs();
return this.showSaveAsModal();
}
if (this.dash.version > 0) {
return this.saveDashboardMessage();
return this.showSaveModal();
}
return this.save(this.dash.getSaveModelClone(), options);
}
saveDashboardAs() {
showSaveAsModal() {
var newScope = this.$rootScope.$new();
newScope.clone = this.dash.getSaveModelClone();
newScope.clone.editable = true;
newScope.clone.hideControls = false;
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,
modalClass: 'modal--narrow'
});
}
saveDashboardMessage() {
var newScope = this.$rootScope.$new();
newScope.clone = this.dash.getSaveModelClone();
showSaveModal() {
this.$rootScope.appEvent('show-modal', {
src: 'public/app/features/dashboard/partials/saveDashboardMessage.html',
scope: newScope,
templateHtml: '<save-dashboard-modal dismiss="dismiss()"></save-dashboard-modal>"',
scope: this.$rootScope.$new(),
modalClass: 'modal--narrow'
});
}

6
public/app/features/dashboard/dashnav/dashnav.ts
View File

@@ -87,8 +87,8 @@ export class DashNavCtrl {
this.$rootScope.appEvent('panel-change-view', {fullscreen: false, edit: false});
}
saveDashboard(options) {
return this.dashboardSrv.saveDashboard(options);
saveDashboard() {
return this.dashboardSrv.saveDashboard();
}
deleteDashboard() {
@@ -126,7 +126,7 @@ export class DashNavCtrl {
}
saveDashboardAs() {
return this.dashboardSrv.saveDashboardAs();
return this.dashboardSrv.showSaveAsModal();
}
viewJson() {

10
public/app/features/dashboard/partials/dash_list.html
View File

@@ -1,10 +0,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>

35
public/app/features/dashboard/partials/graphiteImport.html
View File

@@ -1,35 +0,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>

27
public/app/features/dashboard/partials/saveDashboardAs.html
View File

@@ -1,27 +0,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>

49
public/app/features/dashboard/partials/saveDashboardMessage.html
View File

@@ -1,49 +0,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>

39
public/app/features/dashboard/saveDashboardAsCtrl.js
View File

@@ -1,39 +0,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(); });
};
});
});

29
public/app/features/dashboard/saveDashboardMessageCtrl.js
View File

@@ -1,29 +0,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});
};
});
});

79
public/app/features/dashboard/save_as_modal.ts Normal file
View File

@@ -0,0 +1,79 @@
///<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);

95
public/app/features/dashboard/save_modal.ts Normal file
View File

@@ -0,0 +1,95 @@
///<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);