dashfolders: create folder page

Fixes #10085

pkg/api/index.go

@@ -95,7 +95,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 			Url:  "#",
 			Children: []*dtos.NavLink{
 				{Text: "Dashboard", Icon: "gicon gicon-dashboard-new", Url: setting.AppSubUrl + "/dashboard/new"},
-				{Text: "Folder", Icon: "gicon gicon-folder-new", Url: setting.AppSubUrl + "/dashboard/new/?editview=new-folder"},
+				{Text: "Folder", SubTitle: "Create a new folder to organize your dashboards", Id: "folder", Icon: "gicon gicon-folder-new", Url: setting.AppSubUrl + "/dashboards/folder/new"},
 				{Text: "Import", SubTitle: "Import dashboard from file or Grafana.com", Id: "import", Icon: "gicon gicon-dashboard-import", Url: setting.AppSubUrl + "/dashboard/import"},
 			},
 		})

public/app/core/components/manage_dashboards/manage_dashboards.html

@@ -8,7 +8,7 @@
     <i class="fa fa-plus"></i>
     Dashboard
   </a>
-  <a class="btn btn-success" href="/dashboard/new/?editview=new-folder" ng-if="!ctrl.folderId">
+  <a class="btn btn-success" href="/dashboards/folder/new" ng-if="!ctrl.folderId">
     <i class="fa fa-plus"></i>
     Folder
   </a>

public/app/core/routes/routes.ts

@@ -73,6 +73,11 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     controller : 'DashboardListCtrl',
     controllerAs: 'ctrl',
   })
+  .when('/dashboards/folder/new', {
+    templateUrl: 'public/app/features/dashboard/partials/create_folder.html',
+    controller : 'CreateFolderCtrl',
+    controllerAs: 'ctrl',
+  })
   .when('/dashboards/folder/:folderId/:type/:slug/permissions', {
     templateUrl: 'public/app/features/dashboard/partials/folder_permissions.html',
     controller : 'FolderPermissionsCtrl',

public/app/features/dashboard/all.ts

@@ -32,8 +32,10 @@ import {DashboardListCtrl} from './dashboard_list_ctrl';
 import {FolderDashboardsCtrl} from './folder_dashboards_ctrl';
 import {FolderPermissionsCtrl} from './folder_permissions_ctrl';
 import {DashboardImportCtrl} from './dashboard_import_ctrl';
+import {CreateFolderCtrl} from './create_folder_ctrl';
 
 coreModule.controller('DashboardListCtrl', DashboardListCtrl);
 coreModule.controller('FolderDashboardsCtrl', FolderDashboardsCtrl);
 coreModule.controller('FolderPermissionsCtrl', FolderPermissionsCtrl);
 coreModule.controller('DashboardImportCtrl', DashboardImportCtrl);
+coreModule.controller('CreateFolderCtrl', CreateFolderCtrl);

public/app/features/dashboard/create_folder_ctrl.ts

+import appEvents from 'app/core/app_events';
+
+export class CreateFolderCtrl {
+  title = '';
+  navModel: any;
+  nameExists = false;
+  titleTouched = false;
+
+  constructor(private backendSrv, private $location, navModelSrv) {
+    this.navModel = navModelSrv.getNav('create', 'folder');
+  }
+
+  create() {
+    if (!this.title || this.title.trim().length === 0) {
+      return;
+    }
+
+    const title = this.title.trim();
+
+    return this.backendSrv.createDashboardFolder(title).then(result => {
+      appEvents.emit('alert-success', ['Folder Created', 'OK']);
+
+      var folderUrl = `/dashboards/folder/${result.id}/db/${result.slug}`;
+      this.$location.url(folderUrl);
+    });
+  }
+
+  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;
+        }
+      }
+    });
+  }
+}

public/app/features/dashboard/partials/create_folder.html

+<page-header model="ctrl.navModel"></page-header>
+
+<div class="page-container page-body" ng-cloak>
+  <h3 class="section-heading">
+    Create New Folder
+  </h3>
+
+  <form name="ctrl.saveForm" ng-submit="ctrl.create()" class="modal-content folder-modal" novalidate>
+    <div class="gf-form-group">
+      <div class="gf-form-inline">
+        <div class="gf-form gf-form--grow">
+          <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.nameExists && ctrl.title">
+            <i class="fa fa-check"></i>
+          </label>
+        </div>
+      </div>
+
+      <div class="gf-form-inline" ng-if="ctrl.nameExists">
+        <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
+          </label>
+        </div>
+      </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">
+        <i class="fa fa-save"></i> Create
+      </button>
+    </div>
+  </form>
+
+</div>