dashboard: Dashboard folder page wip #10083

public/app/core/components/search/search_results.html

@@ -5,14 +5,18 @@
         ng-show="ctrl.editable"
         on-change="ctrl.selectionChanged($event)"
         checked="section.checked"
-        switch-class="gf-form-switch--search-result__section">
+        switch-class="gf-form-switch--transparent gf-form-switch--search-result__section">
       </gf-form-switch>
     </div>
     <i class="search-section__header__icon" ng-class="section.icon"></i>
     <span class="search-section__header__text">{{::section.title}}</span>
+    <div ng-show="ctrl.editable && section.id > 0 && section.expanded" ng-click="ctrl.navigateToFolder(section, $event)">
+        <i class="fa fa-cog search-section__header__toggle"></i>&nbsp;
+    </div>
     <i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
     <i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
   </a>
+  <div class="search-section__header" ng-show="section.hideHeader"></div>
 
   <div ng-if="section.expanded">
     <a ng-repeat="item in section.items" class="search-item" ng-class="{'selected': item.selected}" ng-href="{{::item.url}}">
@@ -21,7 +25,7 @@
           ng-show="ctrl.editable"
           on-change="ctrl.selectionChanged()"
           checked="item.checked"
-          switch-class="gf-form-switch--search-result__item">
+          switch-class="gf-form-switch--transparent gf-form-switch--search-result__item">
         </gf-form-switch>
       </div>
       <span class="search-item__icon">

public/app/core/components/search/search_results.ts

@@ -6,12 +6,26 @@ export class SearchResultsCtrl {
   onSelectionChanged: any;
   onTagSelected: any;
 
+  /** @ngInject */
+  constructor(private $location) {
+
+  }
+
   toggleFolderExpand(section) {
     if (section.toggle) {
       section.toggle(section);
     }
   }
 
+  navigateToFolder(section, evt) {
+    this.$location.path('/dashboards/folder/' + section.id + '/' + section.uri);
+
+    if (evt) {
+      evt.stopPropagation();
+      evt.preventDefault();
+    }
+  }
+
   toggleSelection(item, evt) {
     item.checked = !item.checked;
 

public/app/core/routes/routes.ts

@@ -73,6 +73,11 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     controller : 'DashboardListCtrl',
     controllerAs: 'ctrl',
   })
+  .when('/dashboards/folder/:folderId/:type/:slug', {
+    templateUrl: 'public/app/features/dashboard/partials/dashboardList.html',
+    controller : 'DashboardListCtrl',
+    controllerAs: 'ctrl',
+  })
   .when('/org', {
     templateUrl: 'public/app/features/org/partials/orgDetails.html',
     controller : 'OrgDetailsCtrl',

public/app/core/services/search_srv.ts

@@ -154,12 +154,12 @@ export class SearchSrv {
   }
 
   search(options) {
-    if (!options.query && (!options.tag || options.tag.length === 0) && !options.starred) {
+    if (!options.folderIds && !options.query && (!options.tag || options.tag.length === 0) && !options.starred) {
       return this.browse(options);
     }
 
     let query = _.clone(options);
-    query.folderIds = [];
+    query.folderIds = options.folderIds || [];
     query.type = 'dash-db';
 
     return this.backendSrv.search(query).then(results => {

public/app/features/dashboard/dashboard_list_ctrl.ts

@@ -14,17 +14,30 @@ export class DashboardListCtrl {
   selectAllChecked = false;
   starredFilterOptions = [{text: 'Filter by Starred', disabled: true}, {text: 'Yes'}, {text: 'No'}];
   selectedStarredFilter: any;
+  folderTitle = null;
 
   /** @ngInject */
-  constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) {
+  constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv, private $routeParams) {
     this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0);
     this.query = {query: '', mode: 'tree', tag: [], starred: false, skipRecent: true, skipStarred: true};
+
     this.selectedStarredFilter = this.starredFilterOptions[0];
 
+    if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) {
+      backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => {
+        this.folderTitle = result.dashboard.title;
+        this.query.folderIds = [result.dashboard.id];
+
+        this.getDashboards().then(() => {
+          this.getTags();
+        });
+      });
+    } else {
       this.getDashboards().then(() => {
         this.getTags();
       });
     }
+  }
 
   getDashboards() {
     return this.searchSrv.search(this.query).then((result) => {

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

 <page-header model="ctrl.navModel"></page-header>
 
 <div class="page-container page-body">
+  <div class="page-action-bar" ng-show="ctrl.folderTitle">
+      <div class="gf-form gf-form--grow">
+          <h3 class="page-sub-heading">
+            <i class="fa fa-folder-open"></i>&nbsp;{{ctrl.folderTitle}}
+          </h3>
+      </div>
+      <div class="page-action-bar__spacer"></div>
+      <button class="btn btn-inverse" disabled>Permissions</button>
+      <a class="btn btn-success" href="/dashboard/new">
+        <i class="fa fa-plus"></i>
+        Dashboard
+      </a>
+      <a class="btn btn-success" href="/dashboard/new/?editview=new-folder">
+        <i class="fa fa-plus"></i>
+        Folder
+      </a>
+    </div>
+
   <div class="page-action-bar">
     <div class="gf-form gf-form--grow">
       <label class="gf-form-label">Search</label>
       <input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
     </div>
     <div class="page-action-bar__spacer"></div>
-    <a class="btn btn-success" href="/dashboard/new">
+    <a class="btn btn-success" href="/dashboard/new" ng-hide="ctrl.folderTitle">
       <i class="fa fa-plus"></i>
       Dashboard
     </a>
-    <a class="btn btn-success" href="/dashboard/new/?editview=new-folder">
+    <a class="btn btn-success" href="/dashboard/new/?editview=new-folder" ng-hide="ctrl.folderTitle">
       <i class="fa fa-plus"></i>
       Folder
     </a>
@@ -39,29 +57,12 @@
       </div>
   </div>
 
-  <div class="gf-form-group">
-    <div class="gf-form-button-row">
-      <button	type="button"
-          class="btn gf-form-button btn-secondary"
-          ng-disabled="!ctrl.canMove"
-          ng-click="ctrl.moveTo()"
-          bs-tooltip="ctrl.canMove ? '' : 'Select a dashboard to move (cannot move folders)'" data-placement="bottom">
-        <i class="fa fa-exchange"></i>&nbsp;&nbsp;Move to...
-      </button>
-      <button  type="button"
-          class="btn gf-form-button btn-inverse"
-          ng-click="ctrl.delete()"
-          ng-disabled="!ctrl.canDelete">
-          <i class="fa fa-trash"></i>&nbsp;&nbsp;Delete
-      </button>
-    </div>
-  </div>
-
   <div class="dashboard-list">
     <div class="search-results-filter-row">
       <gf-form-switch
         on-change="ctrl.onSelectAllChanged()"
         checked="ctrl.selectAllChecked"
+        switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
       />
       <div class="search-results-filter-row__filters">
         <select
@@ -69,13 +70,31 @@
           ng-model="ctrl.selectedStarredFilter"
           ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
           ng-change="ctrl.onStarredFilterChange()"
+          ng-show="!(ctrl.canMove || ctrl.canDelete)"
         />
         <select
           class="search-results-filter-row__filters-item gf-form-input"
           ng-model="ctrl.selectedTagFilter"
           ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
           ng-change="ctrl.onTagFilterChange()"
+          ng-show="!(ctrl.canMove || ctrl.canDelete)"
         />
+        <div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete">
+          <button	type="button"
+              class="btn gf-form-button btn-inverse"
+              ng-disabled="!ctrl.canMove"
+              ng-click="ctrl.moveTo()"
+              bs-tooltip="ctrl.canMove ? '' : 'Select a dashboard to move (cannot move folders)'"
+              data-placement="bottom">
+            <i class="fa fa-exchange"></i>&nbsp;&nbsp;Move
+          </button>
+          <button  type="button"
+              class="btn gf-form-button btn-danger"
+              ng-click="ctrl.delete()"
+              ng-disabled="!ctrl.canDelete">
+              <i class="fa fa-trash"></i>&nbsp;&nbsp;Delete
+          </button>
+        </div>
       </div>
     </div>
     <div class="search-results-container">

public/app/features/dashboard/specs/dashboard_list_ctrl.jest.ts

@@ -545,5 +545,5 @@ function createCtrlWithStubs(searchResponse: any, tags?: any) {
     }
   };
 
-  return new DashboardListCtrl({}, { getNav: () => { } }, q, <SearchSrv>searchSrvStub);
+  return new DashboardListCtrl({}, { getNav: () => { } }, q, <SearchSrv>searchSrvStub, {});
 }

public/sass/components/_dashboard_list.scss

 .dashboard-list {
-    height: 75%;
-
     .search-results-container {
-        padding-left: 0;
-        padding-right: 0;
+        padding: 5px 0 0 0;
     }
 }
 
 .search-results-filter-row {
+    height: 35px;
     display: flex;
     justify-content: space-between;
+
+    .gf-form-button-row {
+        padding-top: 0;
+
+        button:last-child {
+            margin-right: 0;
+        }
+    }
 }
 
 .search-results-filter-row__filters {
     display: flex;
-    width: 300px;
 }
 
 .search-results-filter-row__filters-item {

public/sass/components/_switch.scss

@@ -102,70 +102,48 @@ $switch-height: 1.5rem;
   }
 }
 
-.gf-form-switch--search-result__section, .gf-form-switch--search-result__item {
-  min-width: 2.6rem;
-
+.gf-form-switch--transparent {
   input + label {
-    background-color: inherit;
-    height: 1.7rem;
+    background: transparent;
   }
-}
 
-.gf-form-switch--search-result__section {
-  min-width: 3.3rem;
-  margin-right: -0.3rem;
+  input + label::before, input + label::after {
+    background: transparent;
+  }
 
   &:hover {
     input + label::before {
-      @include buttonBackground($panel-bg, $panel-bg);
+      background: transparent;
     }
 
     input + label::after {
-      @include buttonBackground($panel-bg, $panel-bg, lighten($orange, 10%));
+      background: transparent;
     }
   }
+}
 
-  input + label::before, input + label::after {
-    @include buttonBackground($panel-bg, $panel-bg);
-  }
-
-  input + label::before {
-    color: $gray-2
-  }
+.gf-form-switch--search-result__section {
+  min-width: 3.3rem;
+  margin-right: -0.3rem;
 
-  input + label::after {
-    color: $orange
+  input + label {
+    height: 1.7rem;
   }
 }
 
 .gf-form-switch--search-result__item {
+  min-width: 2.6rem;
+
   input + label {
     height: 2.7rem;
   }
+}
 
+.gf-form-switch--search-result-filter-row__checkbox {
+  min-width: 4.7rem;
 
-  &:hover {
-    input + label::before {
-      @include buttonBackground($list-item-hover-bg, $list-item-hover-bg);
-    }
-
-    input + label::after {
-      @include buttonBackground($list-item-hover-bg, $list-item-hover-bg);
-      color: lighten($orange, 10%);
-    }
-
-  }
-
-  input + label::before, input + label::after {
-    @include buttonBackground($list-item-hover-bg, $list-item-hover-bg);
-  }
-
-  input + label::before {
-    color: $gray-2
-  }
-
-  input + label::after {
-    color: $orange
+  input + label {
+    height: 2.5rem;
   }
 }