Skip to content

N
nexpie-grafana-theme
Commit 0bfedfe4 by Marcus Efraimsson
Options

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

parent 4846125e
Showing with 46 additions and 58 deletions
public/app/core/routes/routes.ts
...@@ -65,7 +65,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) { ...@@ -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"
}) })
......
public/app/features/dashboard/create_folder_ctrl.ts
...@@ -3,23 +3,22 @@ import appEvents from "app/core/app_events"; ...@@ -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 { ...@@ -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;
}
}); });
} }
} }
public/app/features/dashboard/dashboard_import_ctrl.ts
...@@ -13,16 +13,13 @@ export class DashboardImportCtrl { ...@@ -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,14 +90,20 @@ export class DashboardImportCtrl { ...@@ -93,14 +90,20 @@ 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;
}); });
} }
......
public/app/features/dashboard/partials/create_folder.html
...@@ -7,34 +7,25 @@ ...@@ -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>
......
public/app/features/dashboard/partials/dashboardImport.html → public/app/features/dashboard/partials/dashboard_import.html
...@@ -65,26 +65,17 @@ ...@@ -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>
......
public/app/features/dashboard/specs/dashboard_import_ctrl.jest.ts
...@@ -6,6 +6,7 @@ describe("DashboardImportCtrl", function() { ...@@ -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() { ...@@ -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() {
......
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