From d9dca72ee4a4aa3cd8f1632fa7e7e8a9a2108cdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 16 Jun 2017 16:57:37 -0400 Subject: [PATCH] dashboard_folders: refactoring picker and folder selection in dashboard settings & save as menu --- pkg/api/dashboard.go | 48 ++++++++------ pkg/api/dtos/dashboard.go | 35 ++++++----- public/app/core/nav_model_srv.ts | 2 +- .../app/features/dashboard/dashboard_ctrl.ts | 6 +- .../app/features/dashboard/dashboard_srv.ts | 10 --- .../dashboard/folder_picker/picker.html | 8 --- .../dashboard/folder_picker/picker.ts | 63 ++++++++++--------- .../features/dashboard/partials/settings.html | 6 +- .../app/features/dashboard/save_as_modal.ts | 12 ++-- public/app/plugins/panel/dashlist/editor.html | 6 +- public/app/plugins/panel/dashlist/module.ts | 14 +++-- 11 files changed, 113 insertions(+), 97 deletions(-) delete mode 100644 public/app/features/dashboard/folder_picker/picker.html diff --git a/pkg/api/dashboard.go b/pkg/api/dashboard.go index ce81df0fc44..0364c0ab681 100644 --- a/pkg/api/dashboard.go +++ b/pkg/api/dashboard.go @@ -40,8 +40,8 @@ func GetDashboard(c *middleware.Context) Response { slug := strings.ToLower(c.Params(":slug")) query := m.GetDashboardQuery{Slug: slug, OrgId: c.OrgId} - err := bus.Dispatch(&query) - if err != nil { + + if err := bus.Dispatch(&query); err != nil { return ApiError(404, "Dashboard not found", err) } @@ -70,27 +70,39 @@ func GetDashboard(c *middleware.Context) Response { creator = getUserLogin(dash.CreatedBy) } + meta := dtos.DashboardMeta{ + IsStarred: isStarred, + Slug: slug, + Type: m.DashTypeDB, + CanStar: c.IsSignedIn, + CanSave: canSave, + CanEdit: canEdit, + Created: dash.Created, + Updated: dash.Updated, + UpdatedBy: updater, + CreatedBy: creator, + Version: dash.Version, + HasAcl: dash.HasAcl, + IsFolder: dash.IsFolder, + FolderId: dash.ParentId, + FolderTitle: "Root", + } + + // lookup folder title + if dash.ParentId > 0 { + query := m.GetDashboardQuery{Id: dash.ParentId, OrgId: c.OrgId} + if err := bus.Dispatch(&query); err != nil { + return ApiError(500, "Dashboard folder could not be read", err) + } + meta.FolderTitle = query.Result.Title + } + // make sure db version is in sync with json model version dash.Data.Set("version", dash.Version) dto := dtos.DashboardFullWithMeta{ Dashboard: dash.Data, - Meta: dtos.DashboardMeta{ - IsStarred: isStarred, - Slug: slug, - Type: m.DashTypeDB, - CanStar: c.IsSignedIn, - CanSave: canSave, - CanEdit: canEdit, - Created: dash.Created, - Updated: dash.Updated, - UpdatedBy: updater, - CreatedBy: creator, - Version: dash.Version, - HasAcl: dash.HasAcl, - IsFolder: dash.IsFolder, - ParentId: dash.ParentId, - }, + Meta: meta, } c.TimeRequest(metrics.M_Api_Dashboard_Get) diff --git a/pkg/api/dtos/dashboard.go b/pkg/api/dtos/dashboard.go index 5fbba1c9844..8e6407d770c 100644 --- a/pkg/api/dtos/dashboard.go +++ b/pkg/api/dtos/dashboard.go @@ -7,23 +7,24 @@ import ( ) type DashboardMeta struct { - IsStarred bool `json:"isStarred,omitempty"` - IsHome bool `json:"isHome,omitempty"` - IsSnapshot bool `json:"isSnapshot,omitempty"` - Type string `json:"type,omitempty"` - CanSave bool `json:"canSave"` - CanEdit bool `json:"canEdit"` - CanStar bool `json:"canStar"` - Slug string `json:"slug"` - Expires time.Time `json:"expires"` - Created time.Time `json:"created"` - Updated time.Time `json:"updated"` - UpdatedBy string `json:"updatedBy"` - CreatedBy string `json:"createdBy"` - Version int `json:"version"` - HasAcl bool `json:"hasAcl"` - IsFolder bool `json:"isFolder"` - ParentId int64 `json:"parentId"` + IsStarred bool `json:"isStarred,omitempty"` + IsHome bool `json:"isHome,omitempty"` + IsSnapshot bool `json:"isSnapshot,omitempty"` + Type string `json:"type,omitempty"` + CanSave bool `json:"canSave"` + CanEdit bool `json:"canEdit"` + CanStar bool `json:"canStar"` + Slug string `json:"slug"` + Expires time.Time `json:"expires"` + Created time.Time `json:"created"` + Updated time.Time `json:"updated"` + UpdatedBy string `json:"updatedBy"` + CreatedBy string `json:"createdBy"` + Version int `json:"version"` + HasAcl bool `json:"hasAcl"` + IsFolder bool `json:"isFolder"` + FolderId int64 `json:"folderId"` + FolderTitle string `json:"folderTitle"` } type DashboardFullWithMeta struct { diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index a8184a40505..058247b7fd8 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -197,7 +197,7 @@ export class NavModelSrv { clickHandler: () => dashNavCtrl.showHelpModal() }); - if (this.contextSrv.isEditor) { + if (this.contextSrv.isEditor && !dashboard.meta.isFolder) { menu.push({ title: 'Save As ...', icon: 'fa fa-fw fa-save', diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 61778120506..4a23905be8c 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -128,8 +128,10 @@ export class DashboardCtrl { $rootScope.$broadcast("refresh"); }; - $scope.onFolderChange = function(parentId) { - $scope.dashboard.parentId = parentId; + $scope.onFolderChange = function(folder) { + $scope.dashboard.parentId = folder.id; + $scope.dashboard.meta.folderId = folder.id; + $scope.dashboard.meta.folderTitle= folder.title; }; } diff --git a/public/app/features/dashboard/dashboard_srv.ts b/public/app/features/dashboard/dashboard_srv.ts index 1269ed571dc..6d799a907f9 100644 --- a/public/app/features/dashboard/dashboard_srv.ts +++ b/public/app/features/dashboard/dashboard_srv.ts @@ -113,17 +113,8 @@ export class DashboardSrv { } showSaveAsModal() { - var newScope = this.$rootScope.$new(); - newScope.clone = this.dash.getSaveModelClone(); - newScope.clone.editable = true; - newScope.clone.hideControls = false; - newScope.clone.meta = {}; - newScope.clone.meta.parentId = this.dash.meta.parentId; - newScope.clone.meta.isFolder = this.dash.meta.isFolder; - this.$rootScope.appEvent('show-modal', { templateHtml: '', - scope: newScope, modalClass: 'modal--narrow' }); } @@ -131,7 +122,6 @@ export class DashboardSrv { showSaveModal() { this.$rootScope.appEvent('show-modal', { templateHtml: '', - scope: this.$rootScope.$new(), modalClass: 'modal--narrow' }); } diff --git a/public/app/features/dashboard/folder_picker/picker.html b/public/app/features/dashboard/folder_picker/picker.html deleted file mode 100644 index 09947f32751..00000000000 --- a/public/app/features/dashboard/folder_picker/picker.html +++ /dev/null @@ -1,8 +0,0 @@ -
- -
- -
-
diff --git a/public/app/features/dashboard/folder_picker/picker.ts b/public/app/features/dashboard/folder_picker/picker.ts index bb823db632b..d79dddd63fb 100644 --- a/public/app/features/dashboard/folder_picker/picker.ts +++ b/public/app/features/dashboard/folder_picker/picker.ts @@ -6,47 +6,38 @@ import _ from 'lodash'; export class FolderPickerCtrl { folders: Folder[]; - selectedFolder: number; - selectedFolderSegment: any; + selectedOption: any; + initialTitle: string; onChange: any; - rootFolderName: string; + labelClass: string; /** @ngInject */ - constructor(private backendSrv, private $scope, private $sce, private uiSegmentSrv) { - this.selectedFolderSegment = this.uiSegmentSrv.newSegment({value: this.rootFolderName || 'Root', selectMode: true}); - this.get(); + constructor(private backendSrv, private $scope, private $sce) { + if (!this.labelClass) { + this.labelClass = "width-7"; + } + + this.selectedOption = {text: this.initialTitle, value: null}; } - get() { + getOptions(query) { var params = { + query: query, type: 'dash-folder', }; return this.backendSrv.search(params).then(result => { - this.folders = [{id: 0, title: this.rootFolderName || 'Root', type: 'dash-folder'}]; - this.folders.push(...result); - - if (this.selectedFolder) { - const selected = _.find(this.folders, {id: this.selectedFolder}); - - this.selectedFolderSegment.value = selected.title; - this.selectedFolderSegment.text = selected.title; - this.selectedFolderSegment.html = this.$sce.trustAsHtml(selected.title); + if (query === "") { + result.unshift({title: "Root", value: 0}); } + return _.map(result, item => { + return {text: item.title, value: item.id}; + }); }); } - getOptions() { - return Promise.resolve(this.folders.map(folder => { - return this.uiSegmentSrv.newSegment(folder.title); - })); - } - - folderChanged() { - const selected = _.find(this.folders, {title: this.selectedFolderSegment.value}); - if (selected) { - this.onChange({$folderId: selected.id}); - } + folderChanged(option) { + this.onChange({$folder: {id: option.value, title: option.text}}); } } @@ -61,17 +52,29 @@ export interface Folder { dashboards?: any; } +const template = ` +
+ +
+ + +
+
+`; + export function folderPicker() { return { restrict: 'E', - templateUrl: 'public/app/features/dashboard/folder_picker/picker.html', + template: template, controller: FolderPickerCtrl, bindToController: true, controllerAs: 'ctrl', scope: { - selectedFolder: "<", + initialTitle: "<", onChange: "&", - rootFolderName: "@" + labelClass: "@", } }; } diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 8527c808e22..113bf6b83f0 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -45,7 +45,11 @@ - + +
diff --git a/public/app/features/dashboard/save_as_modal.ts b/public/app/features/dashboard/save_as_modal.ts index 336b410f574..2c31bc2b754 100644 --- a/public/app/features/dashboard/save_as_modal.ts +++ b/public/app/features/dashboard/save_as_modal.ts @@ -18,11 +18,13 @@ const template = `
- +
- +
@@ -37,6 +39,7 @@ const template = ` export class SaveDashboardAsModalCtrl { clone: any; + folderTitle: any; dismiss: () => void; /** @ngInject */ @@ -47,6 +50,7 @@ export class SaveDashboardAsModalCtrl { this.clone.title += ' Copy'; this.clone.editable = true; this.clone.hideControls = false; + this.folderTitle = dashboard.meta.folderTitle || 'Root'; // remove alerts this.clone.rows.forEach(row => { @@ -68,8 +72,8 @@ export class SaveDashboardAsModalCtrl { } } - onFolderChange(parentId) { - this.clone.parentId = parentId; + onFolderChange(folder) { + this.clone.parentId = folder.id; } } diff --git a/public/app/plugins/panel/dashlist/editor.html b/public/app/plugins/panel/dashlist/editor.html index c789fffeb93..72e50d99138 100644 --- a/public/app/plugins/panel/dashlist/editor.html +++ b/public/app/plugins/panel/dashlist/editor.html @@ -23,8 +23,10 @@
- Folder - + +
diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index 4b719fe0c1a..96ee9976ff6 100644 --- a/public/app/plugins/panel/dashlist/module.ts +++ b/public/app/plugins/panel/dashlist/module.ts @@ -10,6 +10,7 @@ class DashListCtrl extends PanelCtrl { groups: any[]; modes: any[]; + folderTitle: any; panelDefaults = { query: '', @@ -19,7 +20,7 @@ class DashListCtrl extends PanelCtrl { search: false, starred: true, headings: true, - folderId: 0 + folderId: 0, }; /** @ngInject */ @@ -65,6 +66,10 @@ class DashListCtrl extends PanelCtrl { this.editorTabIndex = 1; this.modes = ['starred', 'search', 'recently viewed']; this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html'); + + if (!this.panel.folderId) { + this.folderTitle = "All"; + } } onRefresh() { @@ -126,9 +131,10 @@ class DashListCtrl extends PanelCtrl { }); } - onFolderChange(parentId) { - this.$scope.$parent.ctrl.panel.folderId = parentId; - this.$scope.$parent.ctrl.refresh(); + onFolderChange(folder) { + this.panel.folderId = folder.id; + this.panel.folderTitle = folder.title; + this.refresh(); } }