From dd3c9da0093414715bfe483110edb74372166025 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 6 Dec 2017 14:11:25 +0100 Subject: [PATCH] dashboard: Dashboard folder page wip #10083 --- .../components/search/search_results.html | 8 ++- .../core/components/search/search_results.ts | 14 ++++ public/app/core/routes/routes.ts | 5 ++ public/app/core/services/search_srv.ts | 4 +- .../features/dashboard/dashboard_list_ctrl.ts | 21 ++++-- .../dashboard/partials/dashboardList.html | 61 ++++++++++------ .../specs/dashboard_list_ctrl.jest.ts | 2 +- public/sass/components/_dashboard_list.scss | 15 ++-- public/sass/components/_switch.scss | 72 +++++++------------ 9 files changed, 120 insertions(+), 82 deletions(-) diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index 582fbe2b059..4a235801ee9 100644 --- a/public/app/core/components/search/search_results.html +++ b/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"> {{::section.title}} +
+   +
+
@@ -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">
diff --git a/public/app/core/components/search/search_results.ts b/public/app/core/components/search/search_results.ts index de34d5bd5d0..0757a53a517 100644 --- a/public/app/core/components/search/search_results.ts +++ b/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; diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index d3ef3d51477..f4132400c7d 100644 --- a/public/app/core/routes/routes.ts +++ b/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', diff --git a/public/app/core/services/search_srv.ts b/public/app/core/services/search_srv.ts index fdd9b8ca77f..c9e6e60e3e3 100644 --- a/public/app/core/services/search_srv.ts +++ b/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 => { diff --git a/public/app/features/dashboard/dashboard_list_ctrl.ts b/public/app/features/dashboard/dashboard_list_ctrl.ts index ebb7d426089..72861377f71 100644 --- a/public/app/features/dashboard/dashboard_list_ctrl.ts +++ b/public/app/features/dashboard/dashboard_list_ctrl.ts @@ -14,16 +14,29 @@ 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]; - this.getDashboards().then(() => { - this.getTags(); - }); + 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() { diff --git a/public/app/features/dashboard/partials/dashboardList.html b/public/app/features/dashboard/partials/dashboardList.html index 8a994f12c8c..7cd523dd671 100644 --- a/public/app/features/dashboard/partials/dashboardList.html +++ b/public/app/features/dashboard/partials/dashboardList.html @@ -1,17 +1,35 @@
+
+
+

+  {{ctrl.folderTitle}} +

+
+
+ + + + Dashboard + + + + Folder + +
+
- + Dashboard - + Folder @@ -39,29 +57,12 @@
-
-
- - -
-
-
+
+ + +
-
No dashboards matching your query were found.
+
No dashboards matching your query were found.
{ } }, q, searchSrvStub); + return new DashboardListCtrl({}, { getNav: () => { } }, q, searchSrvStub, {}); } diff --git a/public/sass/components/_dashboard_list.scss b/public/sass/components/_dashboard_list.scss index 9d0b3144ba6..e1574f46da6 100644 --- a/public/sass/components/_dashboard_list.scss +++ b/public/sass/components/_dashboard_list.scss @@ -1,20 +1,25 @@ .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 { diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index 4888f5c9c4a..b612091d171 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -102,12 +102,23 @@ $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; + } + + input + label::before, input + label::after { + background: transparent; + } + + &:hover { + input + label::before { + background: transparent; + } + + input + label::after { + background: transparent; + } } } @@ -115,57 +126,24 @@ $switch-height: 1.5rem; min-width: 3.3rem; margin-right: -0.3rem; - &:hover { - input + label::before { - @include buttonBackground($panel-bg, $panel-bg); - } - - input + label::after { - @include buttonBackground($panel-bg, $panel-bg, lighten($orange, 10%)); - } - } - - input + label::before, input + label::after { - @include buttonBackground($panel-bg, $panel-bg); - } - - input + label::before { - color: $gray-2 - } - - 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; } }