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 49 additions and 61 deletions
public/app/core/routes/routes.ts
......@@ -65,7 +65,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
})
.when("/dashboard/import", {
templateUrl:
"public/app/features/dashboard/partials/dashboardImport.html",
"public/app/features/dashboard/partials/dashboard_import.html",
controller: "DashboardImportCtrl",
controllerAs: "ctrl"
})
......
public/app/features/dashboard/create_folder_ctrl.ts
......@@ -3,23 +3,22 @@ import appEvents from "app/core/app_events";
export class CreateFolderCtrl {
title = "";
navModel: any;
nameExists = false;
titleTouched = false;
hasValidationError: boolean;
validationError: any;
/** @ngInject **/
constructor(private backendSrv, private $location, navModelSrv) {
this.navModel = navModelSrv.getNav("dashboards", "manage-dashboards", 0);
constructor(private backendSrv, private $location, private validationSrv, navModelSrv) {
this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0);
}
create() {
if (!this.title || this.title.trim().length === 0) {
if (this.hasValidationError) {
return;
}
const title = this.title.trim();
return this.backendSrv.createDashboardFolder(title).then(result => {
appEvents.emit("alert-success", ["Folder Created", "OK"]);
return this.backendSrv.createDashboardFolder(this.title).then(result => {
appEvents.emit('alert-success', ['Folder Created', 'OK']);
var folderUrl = `/dashboards/folder/${result.dashboard.id}/${
result.meta.slug
......@@ -31,14 +30,13 @@ export class CreateFolderCtrl {
titleChanged() {
this.titleTouched = true;
this.backendSrv.search({ query: this.title }).then(res => {
this.nameExists = false;
for (let hit of res) {
if (this.title === hit.title) {
this.nameExists = true;
break;
}
}
});
this.validationSrv.validateNewDashboardOrFolderName(this.title)
.then(() => {
this.hasValidationError = false;
})
.catch(err => {
this.hasValidationError = true;
this.validationError = err.message;
});
}
}
public/app/features/dashboard/dashboard_import_ctrl.ts
......@@ -13,16 +13,13 @@ export class DashboardImportCtrl {
gnetUrl: string;
gnetError: string;
gnetInfo: any;
titleTouched: boolean;
hasNameValidationError: boolean;
nameValidationError: any;
/** @ngInject */
constructor(
private backendSrv,
navModelSrv,
private $location,
private $scope,
$routeParams
) {
this.navModel = navModelSrv.getNav("create", "import");
constructor(private backendSrv, private validationSrv, navModelSrv, private $location, private $scope, $routeParams) {
this.navModel = navModelSrv.getNav('create', 'import');
this.step = 1;
this.nameExists = false;
......@@ -93,15 +90,21 @@ export class DashboardImportCtrl {
}
titleChanged() {
this.backendSrv.search({ query: this.dash.title }).then(res => {
this.nameExists = false;
for (let hit of res) {
if (this.dash.title === hit.title) {
this.titleTouched = true;
this.nameExists = false;
this.validationSrv.validateNewDashboardOrFolderName(this.dash.title)
.then(() => {
this.hasNameValidationError = false;
})
.catch(err => {
if (err.type === 'EXISTING') {
this.nameExists = true;
break;
}
}
});
this.hasNameValidationError = true;
this.nameValidationError = err.message;
});
}
saveDashboard() {
......
public/app/features/dashboard/partials/create_folder.html
......@@ -7,34 +7,25 @@
<form name="ctrl.saveForm" ng-submit="ctrl.create()" novalidate>
<div class="gf-form-inline">
<div class="gf-form gf-form--grow">
<label class="gf-form-label width-10">Folder 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}">
<label class="gf-form-label text-success" ng-if="!ctrl.nameExists && ctrl.title">
<label class="gf-form-label width-10">Name</label>
<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.titleTouched && !ctrl.hasValidationError">
<i class="fa fa-check"></i>
</label>
</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">
<label class="gf-form-label text-warning gf-form-label--grow">
<i class="fa fa-warning"></i>
A Folder or Dashboard with the same name already exists
</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
{{ctrl.validationError}}
</label>
</div>
</div>
<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
</button>
</div>
......
public/app/features/dashboard/partials/dashboardImport.html → public/app/features/dashboard/partials/dashboard_import.html
......@@ -65,26 +65,17 @@
<div class="gf-form gf-form--grow">
<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}">
<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>
</label>
</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">
<label class="gf-form-label text-warning gf-form-label--grow">
<i class="fa fa-warning"></i>
A Dashboard with the same name already exists
</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
{{ctrl.nameValidationError}}
</label>
</div>
</div>
......
public/app/features/dashboard/specs/dashboard_import_ctrl.jest.ts
......@@ -6,6 +6,7 @@ describe("DashboardImportCtrl", function() {
let navModelSrv;
let backendSrv;
let validationSrv;
beforeEach(() => {
navModelSrv = {
......@@ -17,7 +18,11 @@ describe("DashboardImportCtrl", function() {
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() {
......
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