From c609586ff0c9c79444e79aa54eb7f8518ee78447 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 26 Oct 2016 17:42:39 +0200 Subject: [PATCH] ux(dashboard): making progress on new add panel experiance --- pkg/api/frontendsettings.go | 20 +++ public/app/core/routes/dashboard_loaders.js | 9 +- .../app/features/dashboard/dashboard_ctrl.ts | 1 + .../app/features/dashboard/row/options.html | 95 +++++++++----- public/app/features/dashboard/row/options.ts | 116 +++++++++++++++++- public/app/features/dashboard/row/row.html | 73 +++-------- public/app/features/dashboard/row/row.ts | 67 ++-------- public/sass/components/edit_sidemenu.scss | 2 +- public/sass/pages/_dashboard.scss | 45 +++++-- 9 files changed, 263 insertions(+), 165 deletions(-) diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index d599dd10735..384dd7f0ea1 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -127,6 +127,7 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro "name": panel.Name, "id": panel.Id, "info": panel.Info, + "sort": getPanelSort(panel.Id), } } @@ -150,6 +151,25 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro return jsonObj, nil } +func getPanelSort(id string) int { + sort := 100 + switch id { + case "graph": + sort = 1 + case "singlestat": + sort = 2 + case "table": + sort = 3 + case "text": + sort = 4 + case "alertlist": + sort = 5 + case "dashlist": + sort = 6 + } + return sort +} + func GetFrontendSettings(c *middleware.Context) { settings, err := getFrontendSettingsMap(c) if err != nil { diff --git a/public/app/core/routes/dashboard_loaders.js b/public/app/core/routes/dashboard_loaders.js index 3c16b15c9c3..8a5ce7ad7ed 100644 --- a/public/app/core/routes/dashboard_loaders.js +++ b/public/app/core/routes/dashboard_loaders.js @@ -31,7 +31,14 @@ function (coreModule) { meta: { canStar: false, canShare: false }, dashboard: { title: "New dashboard", - rows: [{title: 'Dashboard Row', height: '250px', panels:[] }] + rows: [ + { + title: 'Dashboard Row', + height: '250px', + panels:[], + isNew: true, + } + ] }, }, $scope); }); diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 1dfe54c6636..8845717659d 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -107,6 +107,7 @@ export class DashboardCtrl { title: 'New row', panels: [], height: '250px', + isNew: true, }); }; diff --git a/public/app/features/dashboard/row/options.html b/public/app/features/dashboard/row/options.html index 19d3b92aeed..d30ffb78dc0 100644 --- a/public/app/features/dashboard/row/options.html +++ b/public/app/features/dashboard/row/options.html @@ -1,42 +1,77 @@
-
-

- Row Options -

+
+ - -
- -
- -
-
- -
- Title - +
+
Add Panel
+
+
+ Search + +
-
- Height - + +
+
+
+ +
{{panel.name}}
+
+
- - +
-
-
Row Templating
+
+
+
Options
+
+
+ Title + +
+
+ +
+ +
+
+ + +
+
+
+ Height + +
+
+
-
-
- Repeat Row -
- + +
+
+
diff --git a/public/app/features/dashboard/row/options.ts b/public/app/features/dashboard/row/options.ts index 894596c1bca..c8462985eec 100644 --- a/public/app/features/dashboard/row/options.ts +++ b/public/app/features/dashboard/row/options.ts @@ -2,9 +2,120 @@ import _ from 'lodash'; -import {coreModule} from 'app/core/core'; +import config from 'app/core/config'; +import {coreModule, appEvents} from 'app/core/core'; export class RowOptionsCtrl { + row: any; + dashboard: any; + rowCtrl: any; + subTabIndex: number; + allPanels: any; + panelHits: any; + activeIndex: any; + panelSearch: any; + + fontSizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; + + /** @ngInject */ + constructor(private $scope, private $timeout, private $rootScope) { + this.row = this.rowCtrl.row; + this.dashboard = this.rowCtrl.dashboard; + this.subTabIndex = 0; + this.row.titleSize = this.row.titleSize || 'h6'; + this.allPanels = _.orderBy(_.map(config.panels, item => item), 'sort'); + this.panelHits = this.allPanels; + this.activeIndex = 0; + } + + keyDown(evt) { + if (evt.keyCode === 27) { + this.rowCtrl.showOptions = false; + return; + } + + if (evt.keyCode === 40 || evt.keyCode === 39) { + this.moveSelection(1); + } + + if (evt.keyCode === 38 || evt.keyCode === 37) { + this.moveSelection(-1); + } + + if (evt.keyCode === 13) { + var selectedPanel = this.panelHits[this.activeIndex]; + if (selectedPanel) { + this.addPanel(selectedPanel); + } + } + } + + moveSelection(direction) { + var max = this.panelHits.length; + var newIndex = this.activeIndex + direction; + this.activeIndex = ((newIndex %= max) < 0) ? newIndex + max : newIndex; + } + + panelSearchChanged() { + var items = this.allPanels.slice(); + var startsWith = []; + var contains = []; + var searchLower = this.panelSearch.toLowerCase(); + var item; + + while (item = items.shift()) { + var nameLower = item.name.toLowerCase(); + if (nameLower.indexOf(searchLower) === 0) { + startsWith.push(item); + } else if (nameLower.indexOf(searchLower) !== -1) { + contains.push(item); + } + } + + this.panelHits = startsWith.concat(contains); + this.activeIndex = 0; + } + + addPanel(panelPluginInfo) { + var defaultSpan = 12; + var _as = 12 - this.dashboard.rowSpan(this.row); + + var panel = { + id: null, + title: config.new_panel_title, + error: false, + span: _as < defaultSpan && _as > 0 ? _as : defaultSpan, + editable: true, + type: panelPluginInfo.id, + isNew: true, + }; + + this.rowCtrl.showOptions = false; + this.dashboard.addPanel(panel, this.row); + this.$timeout(() => { + this.$rootScope.appEvent('panel-change-view', { + fullscreen: true, edit: true, panelId: panel.id + }); + }); + } + + deleteRow() { + if (!this.row.panels.length) { + this.dashboard.rows = _.without(this.dashboard.rows, this.row); + return; + } + + appEvents.emit('confirm-modal', { + title: 'Delete', + text: 'Are you sure you want to delete this row?', + icon: 'fa-trash', + yesText: 'Delete', + onConfirm: () => { + this.dashboard.rows = _.without(this.dashboard.rows, this.row); + } + }); + } + } export function rowOptionsDirective() { @@ -15,8 +126,7 @@ export function rowOptionsDirective() { bindToController: true, controllerAs: 'ctrl', scope: { - row: "=", - onClose: "&" + rowCtrl: "=", }, }; } diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html index b9317bc9638..43d9f6f3ed9 100644 --- a/public/app/features/dashboard/row/row.html +++ b/public/app/features/dashboard/row/row.html @@ -1,70 +1,25 @@ -
-
- - {{ctrl.row.title}} - +
+ + {{ctrl.row.title}} + + + +
+
+ +
+ + + - - - - - Add Panel - - - -
- - - - -
- +
-
-
- -
{{panel.name}}
-
-
-
diff --git a/public/app/features/dashboard/row/row.ts b/public/app/features/dashboard/row/row.ts index 56958169558..0bb74569312 100644 --- a/public/app/features/dashboard/row/row.ts +++ b/public/app/features/dashboard/row/row.ts @@ -5,36 +5,23 @@ import $ from 'jquery'; import angular from 'angular'; import config from 'app/core/config'; -import {coreModule, appEvents} from 'app/core/core'; +import {coreModule} from 'app/core/core'; import './options'; export class DashRowCtrl { dashboard: any; row: any; - panelPlugins; - addPanelSegment; + showOptions: boolean; - /** @ngInject */ + /** @ngInject */ constructor(private $scope, private $rootScope, private $timeout, private uiSegmentSrv, private $q) { - this.panelPlugins = config.panels; - console.log(this.panelPlugins); - this.row.title = this.row.title || 'Row title'; - this.addPanelSegment = uiSegmentSrv.newSegment({ - value: 'add', - custom: 'false', - html: 'Add Panel ', - renderer: (item, defaultHighlighter) => { - return '' + defaultHighlighter(item.text); - } - }); - } - getPanels() { - return this.$q.when(_.map(config.panels, panel => { - return this.uiSegmentSrv.newSegment({value: panel.name}); - })); + if (this.row.isNew) { + this.showOptions = true; + delete this.row.isNew; + } } onDrop(panelId, dropTarget) { @@ -55,51 +42,11 @@ export class DashRowCtrl { this.$rootScope.$broadcast('render'); } - addPanel(panel) { - this.dashboard.addPanel(panel, this.row); - this.$timeout(() => { - this.$scope.$broadcast('render'); - }); - } - setHeight(height) { this.row.height = height; this.$scope.$broadcast('render'); } - addPanelDefault(type) { - var defaultSpan = 12; - var _as = 12 - this.dashboard.rowSpan(this.row); - - var panel = { - title: config.new_panel_title, - error: false, - span: _as < defaultSpan && _as > 0 ? _as : defaultSpan, - editable: true, - type: type, - isNew: true, - }; - - this.addPanel(panel); - } - - deleteRow() { - if (!this.row.panels.length) { - this.dashboard.rows = _.without(this.dashboard.rows, this.row); - return; - } - - appEvents.emit('confirm-modal', { - title: 'Delete', - text: 'Are you sure you want to delete this row?', - icon: 'fa-trash', - yesText: 'Delete', - onConfirm: () => { - this.dashboard.rows = _.without(this.dashboard.rows, this.row); - } - }); - } - moveRow(direction) { var rowsList = this.dashboard.rows; var rowIndex = _.indexOf(rowsList, this.row); diff --git a/public/sass/components/edit_sidemenu.scss b/public/sass/components/edit_sidemenu.scss index aa6f1c3535d..babd2082929 100644 --- a/public/sass/components/edit_sidemenu.scss +++ b/public/sass/components/edit_sidemenu.scss @@ -9,7 +9,7 @@ } .edit-sidemenu-aside { - width: 16rem; + min-width: 16rem; } .edit-sidemenu { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 5866f818f88..23d800d327d 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -211,19 +211,40 @@ div.flot-text { .dash-row-header { display: flex; flex-direction: row; - text-align: left; - align-items: center; margin-right: $panel-margin; margin-left: $gf-form-margin; + border-bottom: $panel-border; } .dash-row-header-title { - font-family: $headings-font-family; padding: 0.7rem; + i { + font-size: 0.9rem; + position: relative; + top: 2px; + left: 1px; + color: $text-muted; + } } -.dash-row-header-chevron { - flex-grow: 100; +.dash-row-header-add-panel { + padding: 0.7rem; + i { + font-size: 0.9rem; + position: relative; + top: 2px; + left: 1px; + color: $text-muted; + } +} + +.dash-row-header-spacer { + flex: 50; +} + +.dash-row-collapse-toggle { + flex-grow: 30; + cursor: pointer; text-align: right; margin-right: 0.6rem; font-size: $font-size-sm; @@ -247,7 +268,7 @@ div.flot-text { .dash-row-options { background: $panel-bg; margin: 0 $panel-margin*2 0 $panel-margin; - padding: $spacer*2; + padding: $spacer*1.5; } .dash-row-options-close-btn { @@ -266,18 +287,20 @@ div.flot-text { } } -.add-panel-container { - display: flex; - flex-direction: row; +.add-panel-panels { } .add-panel-item { - background: $panel-bg; + background: $input-label-bg; padding: $spacer; min-width: 10rem; max-width: 10rem; text-align: center; - margin: $panel-margin; + margin: $gf-form-margin; + float: left; + cursor: pointer; + + &.active, &:hover { box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 5px rgba(82,168,236,10.8) }