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

dashfolders: use validation service for folder creation and dashboard import. #10197

Browse Source
This commit is contained in:
Marcus Efraimsson
2017-12-19 13:39:10 +01:00
parent 4846125ec0
commit 0bfedfe4d6
6 changed files with 49 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/routes/routes.ts
View File

@@ -65,7 +65,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
}) })
.when("/dashboard/import", { .when("/dashboard/import", {
templateUrl: templateUrl:
"public/app/features/dashboard/partials/dashboardImport.html", "public/app/features/dashboard/partials/dashboard_import.html",
controller: "DashboardImportCtrl", controller: "DashboardImportCtrl",
controllerAs: "ctrl" controllerAs: "ctrl"
}) })

32
public/app/features/dashboard/create_folder_ctrl.ts
View File

@@ -3,23 +3,22 @@ import appEvents from "app/core/app_events";
export class CreateFolderCtrl { export class CreateFolderCtrl {
title = ""; title = "";
navModel: any; navModel: any;
nameExists = false;
titleTouched = false; titleTouched = false;
hasValidationError: boolean;
validationError: any;
/** @ngInject **/ /** @ngInject **/
constructor(private backendSrv, private $location, navModelSrv) { constructor(private backendSrv, private $location, private validationSrv, navModelSrv) {
this.navModel = navModelSrv.getNav("dashboards", "manage-dashboards", 0); this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0);
} }
create() { create() {
if (!this.title || this.title.trim().length === 0) { if (this.hasValidationError) {
return; return;
} }
const title = this.title.trim(); return this.backendSrv.createDashboardFolder(this.title).then(result => {
appEvents.emit('alert-success', ['Folder Created', 'OK']);
return this.backendSrv.createDashboardFolder(title).then(result => {
appEvents.emit("alert-success", ["Folder Created", "OK"]);
var folderUrl = `/dashboards/folder/${result.dashboard.id}/${ var folderUrl = `/dashboards/folder/${result.dashboard.id}/${
result.meta.slug result.meta.slug
@@ -31,14 +30,13 @@ export class CreateFolderCtrl {
titleChanged() { titleChanged() {
this.titleTouched = true; this.titleTouched = true;
this.backendSrv.search({ query: this.title }).then(res => { this.validationSrv.validateNewDashboardOrFolderName(this.title)
this.nameExists = false; .then(() => {
for (let hit of res) { this.hasValidationError = false;
if (this.title === hit.title) { })
this.nameExists = true; .catch(err => {
break; this.hasValidationError = true;
} this.validationError = err.message;
} });
});
} }
} }

33
public/app/features/dashboard/dashboard_import_ctrl.ts
View File

@@ -13,16 +13,13 @@ export class DashboardImportCtrl {
gnetUrl: string; gnetUrl: string;
gnetError: string; gnetError: string;
gnetInfo: any; gnetInfo: any;
titleTouched: boolean;
hasNameValidationError: boolean;
nameValidationError: any;
/** @ngInject */ /** @ngInject */
constructor( constructor(private backendSrv, private validationSrv, navModelSrv, private $location, private $scope, $routeParams) {
private backendSrv, this.navModel = navModelSrv.getNav('create', 'import');
navModelSrv,
private $location,
private $scope,
$routeParams
) {
this.navModel = navModelSrv.getNav("create", "import");
this.step = 1; this.step = 1;
this.nameExists = false; this.nameExists = false;
@@ -93,15 +90,21 @@ export class DashboardImportCtrl {
} }
titleChanged() { titleChanged() {
this.backendSrv.search({ query: this.dash.title }).then(res => { this.titleTouched = true;
this.nameExists = false; this.nameExists = false;
for (let hit of res) {
if (this.dash.title === hit.title) { this.validationSrv.validateNewDashboardOrFolderName(this.dash.title)
.then(() => {
this.hasNameValidationError = false;
})
.catch(err => {
if (err.type === 'EXISTING') {
this.nameExists = true; this.nameExists = true;
break;
} }
}
}); this.hasNameValidationError = true;
this.nameValidationError = err.message;
});
} }
saveDashboard() { saveDashboard() {

21
public/app/features/dashboard/partials/create_folder.html
View File

@@ -7,34 +7,25 @@
<form name="ctrl.saveForm" ng-submit="ctrl.create()" novalidate> <form name="ctrl.saveForm" ng-submit="ctrl.create()" novalidate>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<label class="gf-form-label width-10">Folder name</label> <label class="gf-form-label width-10">Name</label>
<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-model-options="{ debounce: 400 }" ng-class="{'validation-error': ctrl.nameExists || !ctrl.dash.title}"> <input type="text" class="gf-form-input" ng-model="ctrl.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-model-options="{ debounce: 400 }" ng-class="{'validation-error': ctrl.nameExists || !ctrl.dash.title}">
<label class="gf-form-label text-success" ng-if="!ctrl.nameExists && ctrl.title"> <label class="gf-form-label text-success" ng-if="ctrl.titleTouched && !ctrl.hasValidationError">
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
</label> </label>
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-if="ctrl.nameExists"> <div class="gf-form-inline" ng-if="ctrl.hasValidationError">
<div class="gf-form offset-width-10 gf-form--grow"> <div class="gf-form offset-width-10 gf-form--grow">
<label class="gf-form-label text-warning gf-form-label--grow"> <label class="gf-form-label text-warning gf-form-label--grow">
<i class="fa fa-warning"></i> <i class="fa fa-warning"></i>
A Folder or Dashboard with the same name already exists {{ctrl.validationError}}
</label>
</div>
</div>
<div class="gf-form-inline" ng-if="!ctrl.title && ctrl.titleTouched">
<div class="gf-form offset-width-10 gf-form--grow">
<label class="gf-form-label text-warning gf-form-label--grow">
<i class="fa fa-warning"></i>
A Folder should have a name
</label> </label>
</div> </div>
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-success width-12" ng-disabled="ctrl.nameExists || ctrl.title.length === 0"> <button type="submit" class="btn btn-success width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError">
<i class="fa fa-save"></i> Create <i class="fa fa-save"></i> Create
</button> </button>
</div> </div>

15
public/app/features/dashboard/partials/dashboardImport.html → public/app/features/dashboard/partials/dashboard_import.html
View File

@@ -65,26 +65,17 @@
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<label class="gf-form-label width-15">Name</label> <label class="gf-form-label width-15">Name</label>
<input type="text" class="gf-form-input" ng-model="ctrl.dash.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-class="{'validation-error': ctrl.nameExists || !ctrl.dash.title}"> <input type="text" class="gf-form-input" ng-model="ctrl.dash.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-class="{'validation-error': ctrl.nameExists || !ctrl.dash.title}">
<label class="gf-form-label text-success" ng-if="!ctrl.nameExists && ctrl.dash.title"> <label class="gf-form-label text-success" ng-if="ctrl.titleTouched && !ctrl.hasNameValidationError">
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
</label> </label>
</div> </div>
</div> </div>
<div class="gf-form-inline" ng-if="ctrl.nameExists"> <div class="gf-form-inline" ng-if="ctrl.hasNameValidationError">
<div class="gf-form offset-width-15 gf-form--grow"> <div class="gf-form offset-width-15 gf-form--grow">
<label class="gf-form-label text-warning gf-form-label--grow"> <label class="gf-form-label text-warning gf-form-label--grow">
<i class="fa fa-warning"></i> <i class="fa fa-warning"></i>
A Dashboard with the same name already exists {{ctrl.nameValidationError}}
</label>
</div>
</div>
<div class="gf-form-inline" ng-if="!ctrl.dash.title">
<div class="gf-form offset-width-15 gf-form--grow">
<label class="gf-form-label text-warning gf-form-label--grow">
<i class="fa fa-warning"></i>
A Dashboard should have a name
</label> </label>
</div> </div>
</div> </div>

7
public/app/features/dashboard/specs/dashboard_import_ctrl.jest.ts
View File

@@ -6,6 +6,7 @@ describe("DashboardImportCtrl", function() {
let navModelSrv; let navModelSrv;
let backendSrv; let backendSrv;
let validationSrv;
beforeEach(() => { beforeEach(() => {
navModelSrv = { navModelSrv = {
@@ -17,7 +18,11 @@ describe("DashboardImportCtrl", function() {
get: jest.fn() get: jest.fn()
}; };
ctx.ctrl = new DashboardImportCtrl(backendSrv, navModelSrv, {}, {}, {}); validationSrv = {
validateNewDashboardOrFolderName: jest.fn().mockReturnValue(Promise.resolve())
};
ctx.ctrl = new DashboardImportCtrl(backendSrv, validationSrv, navModelSrv, {}, {}, {});
}); });
describe("when uploading json", function() { describe("when uploading json", function() {