From 31441f0b4361d7baef3a637d5a3815194c8636d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Apr 2016 16:21:25 -0400 Subject: [PATCH] feat(dashlist): updated dashlist --- public/app/core/components/switch.ts | 7 +- .../features/panel/partials/panelTime.html | 2 +- public/app/plugins/panel/dashlist/editor.html | 58 +++++----- public/app/plugins/panel/dashlist/module.html | 27 +++-- public/app/plugins/panel/dashlist/module.js | 91 ++++++++++++++++ public/app/plugins/panel/dashlist/module.ts | 102 +++++++++++++----- public/dashboards/home.json | 58 +++++----- public/sass/components/_panel_dashlist.scss | 8 +- public/sass/pages/_dashboard.scss | 4 +- tsconfig.json | 30 +----- 10 files changed, 254 insertions(+), 133 deletions(-) create mode 100644 public/app/plugins/panel/dashlist/module.js diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts index 10211b5b914..e2ba60d92e8 100644 --- a/public/app/core/components/switch.ts +++ b/public/app/core/components/switch.ts @@ -27,11 +27,8 @@ export class SwitchCtrl { } internalOnChange() { - return new Promise(resolve => { - this.$timeout(() => { - this.onChange(); - resolve(); - }); + return this.$timeout(() => { + return this.onChange(); }); } diff --git a/public/app/features/panel/partials/panelTime.html b/public/app/features/panel/partials/panelTime.html index 4047558317f..18b9cbbda8e 100644 --- a/public/app/features/panel/partials/panelTime.html +++ b/public/app/features/panel/partials/panelTime.html @@ -31,7 +31,7 @@ + checked="ctrl.panel.hideTimeOverride" switch-class="max-width-6" on-change="ctrl.refresh()"> diff --git a/public/app/plugins/panel/dashlist/editor.html b/public/app/plugins/panel/dashlist/editor.html index c0577578598..d2159093476 100644 --- a/public/app/plugins/panel/dashlist/editor.html +++ b/public/app/plugins/panel/dashlist/editor.html @@ -1,40 +1,32 @@ -
-
-
- Mode -
- -
-
-
- - - -
-
+
+
+
Options
-
-
- Search options - Query + + + - + -
+
+ Max items + +
+
-
- Tags +
+
Search
- - -
-
+
+ Query + +
+ +
+ Tags + + +
+
-
-
- Limit number to - -
-
diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html index 79952d0032c..b5c59862e5d 100644 --- a/public/app/plugins/panel/dashlist/module.html +++ b/public/app/plugins/panel/dashlist/module.html @@ -1,12 +1,17 @@ -
-
- - - {{dash.title}} - - - - - -
+
+
+
+ {{group.header}} +
+
+ + + {{dash.title}} + + + + + +
+
diff --git a/public/app/plugins/panel/dashlist/module.js b/public/app/plugins/panel/dashlist/module.js new file mode 100644 index 00000000000..5bc42c505fd --- /dev/null +++ b/public/app/plugins/panel/dashlist/module.js @@ -0,0 +1,91 @@ +/// +"use strict"; +var __extends = (this && this.__extends) || function (d, b) { + for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); +}; +var lodash_1 = require('lodash'); +var sdk_1 = require('app/plugins/sdk'); +var impression_store_1 = require('app/features/dashboard/impression_store'); +// Set and populate defaults +var panelDefaults = { + mode: 'starred', + query: '', + limit: 10, + tags: [], + recent: false, + search: false, + starred: true +}; +var DashListCtrl = (function (_super) { + __extends(DashListCtrl, _super); + /** @ngInject */ + function DashListCtrl($scope, $injector, backendSrv) { + _super.call(this, $scope, $injector); + this.backendSrv = backendSrv; + lodash_1["default"].defaults(this.panel, panelDefaults); + if (this.panel.tag) { + this.panel.tags = [this.panel.tag]; + delete this.panel.tag; + } + this.events.on('refresh', this.onRefresh.bind(this)); + this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); + } + DashListCtrl.prototype.onInitEditMode = function () { + this.editorTabIndex = 1; + this.modes = ['starred', 'search', 'recently viewed']; + this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html'); + }; + DashListCtrl.prototype.onRefresh = function () { + var promises = []; + if (this.panel.recent) { + promises.push(this.getRecentDashboards()); + } + if (this.panel.starred) { + promises.push(this.getStarred()); + } + if (this.panel.search) { + promises.push(this.getSearch()); + } + return Promise.all(promises) + .then(this.renderingCompleted.bind(this)); + }; + DashListCtrl.prototype.getSearch = function () { + var _this = this; + var params = { + limit: this.panel.limit, + query: this.panel.query, + tag: this.panel.tags + }; + return this.backendSrv.search(params).then(function (result) { + _this.dashList = result; + _this.renderingCompleted(); + }); + }; + DashListCtrl.prototype.getStarred = function () { + var _this = this; + var params = { limit: this.panel.limit, starred: "true" }; + return this.backendSrv.search(params).then(function (result) { + _this.dashList = result; + _this.renderingCompleted(); + }); + }; + DashListCtrl.prototype.getRecentDashboards = function () { + var _this = this; + var dashIds = lodash_1["default"].first(impression_store_1.impressions.getDashboardOpened(), this.panel.limit); + return this.backendSrv.search({ dashboardIds: dashIds, limit: this.panel.limit }).then(function (result) { + _this.dashList = dashIds.map(function (orderId) { + return lodash_1["default"].find(result, function (dashboard) { + return dashboard.id === orderId; + }); + }).filter(function (el) { + return el !== undefined; + }); + }); + }; + DashListCtrl.templateUrl = 'module.html'; + return DashListCtrl; +}(sdk_1.PanelCtrl)); +exports.DashListCtrl = DashListCtrl; +exports.PanelCtrl = DashListCtrl; diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index b619b7ea7d7..77029bd7ceb 100644 --- a/public/app/plugins/panel/dashlist/module.ts +++ b/public/app/plugins/panel/dashlist/module.ts @@ -7,16 +7,19 @@ import {impressions} from 'app/features/dashboard/impression_store'; // Set and populate defaults var panelDefaults = { - mode: 'starred', query: '', limit: 10, - tags: [] + tags: [], + recent: false, + search: false, + starred: true, + headings: true, }; class DashListCtrl extends PanelCtrl { static templateUrl = 'module.html'; - dashList: any[]; + groups: any[]; modes: any[]; /** @ngInject */ @@ -31,6 +34,31 @@ class DashListCtrl extends PanelCtrl { this.events.on('refresh', this.onRefresh.bind(this)); this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); + + this.groups = [ + {list: [], show: false, header: "Starred dashboards",}, + {list: [], show: false, header: "Recently viewed dashboards"}, + {list: [], show: false, header: "Search"}, + ]; + + // update capability + if (this.panel.mode) { + if (this.panel.mode === 'starred') { + this.panel.starred = true; + this.panel.headings = false; + } + if (this.panel.mode === 'recently viewed') { + this.panel.recent = true; + this.panel.starred = false; + this.panel.headings = false; + } + if (this.panel.mode === 'search') { + this.panel.search = true; + this.panel.starred = false; + this.panel.headings = false; + } + delete this.panel.mode; + } } onInitEditMode() { @@ -40,34 +68,60 @@ class DashListCtrl extends PanelCtrl { } onRefresh() { - var params: any = {limit: this.panel.limit}; + var promises = []; - if (this.panel.mode === 'recently viewed') { - var dashIds = _.first(impressions.getDashboardOpened(), this.panel.limit); + promises.push(this.getRecentDashboards()); + promises.push(this.getStarred()); + promises.push(this.getSearch()); - return this.backendSrv.search({dashboardIds: dashIds, limit: this.panel.limit}).then(result => { - this.dashList = dashIds.map(orderId => { - return _.find(result, dashboard => { - return dashboard.id === orderId; - }); - }).filter(el => { - return el !== undefined; - }); + return Promise.all(promises) + .then(this.renderingCompleted.bind(this)); + } - this.renderingCompleted(); - }); + getSearch() { + this.groups[2].show = this.panel.search; + if (!this.panel.search) { + return Promise.resolve(); } - if (this.panel.mode === 'starred') { - params.starred = "true"; - } else { - params.query = this.panel.query; - params.tag = this.panel.tags; - } + var params = { + limit: this.panel.limit, + query: this.panel.query, + tag: this.panel.tags, + }; return this.backendSrv.search(params).then(result => { - this.dashList = result; - this.renderingCompleted(); + this.groups[2].list = result; + }); + } + + getStarred() { + this.groups[0].show = this.panel.starred; + if (!this.panel.starred) { + return Promise.resolve(); + } + + var params = {limit: this.panel.limit, starred: "true"}; + return this.backendSrv.search(params).then(result => { + this.groups[0].list = result; + }); + } + + getRecentDashboards() { + this.groups[1].show = this.panel.recent; + if (!this.panel.recent) { + return Promise.resolve(); + } + + var dashIds = _.first(impressions.getDashboardOpened(), this.panel.limit); + return this.backendSrv.search({dashboardIds: dashIds, limit: this.panel.limit}).then(result => { + this.groups[1].list = dashIds.map(orderId => { + return _.find(result, dashboard => { + return dashboard.id === orderId; + }); + }).filter(el => { + return el !== undefined; + }); }); } } diff --git a/public/dashboards/home.json b/public/dashboards/home.json index 5825f849375..c3ed1017bad 100644 --- a/public/dashboards/home.json +++ b/public/dashboards/home.json @@ -9,65 +9,61 @@ "hideControls": true, "sharedCrosshair": false, "rows": [ - { + { "collapse": false, "editable": true, - "height": "90px", + "height": "25px", "panels": [ { "content": "
\n Home Dashboard\n
", "editable": true, "id": 1, + "links": [], "mode": "html", "span": 12, "style": {}, "title": "", "transparent": true, - "type": "text", - "links": [] + "type": "text" } ], "title": "New row" - }, - { + }, + { "collapse": false, "editable": true, "height": "510px", "panels": [ - { - "id": 2, - "limit": 10, - "mode": "starred", - "query": "", - "span": 3.75, - "tags": [], - "title": "Starred dashboards", - "type": "dashlist" - }, { "id": 3, - "limit": 10, - "mode": "recently viewed", + "limit": 4, + "links": [], "query": "", - "span": 3.75, + "span": 7, "tags": [], - "title": "Recently viewed dashboards", - "type": "dashlist" + "title": "", + "transparent": false, + "type": "dashlist", + "recent": true, + "search": false, + "starred": true, + "headings": true }, { - "title": "", - "error": false, - "span": 4.5, "editable": true, - "type": "pluginlist", - "isNew": true, + "error": false, "id": 4, - "links": [] + "isNew": true, + "links": [], + "span": 5, + "title": "", + "transparent": false, + "type": "pluginlist" } ], "title": "Row" - } - ], + } + ], "time": { "from": "now-6h", "to": "now" @@ -105,7 +101,7 @@ "annotations": { "list": [] }, - "schemaVersion": 9, - "version": 5, + "schemaVersion": 12, + "version": 2, "links": [] } diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss index a69d1654e04..4256c80ac82 100644 --- a/public/sass/components/_panel_dashlist.scss +++ b/public/sass/components/_panel_dashlist.scss @@ -1,5 +1,11 @@ -.dashlist-item { +.dashlist-section-header { + margin-bottom: $spacer; + color: $text-color-weak; +} + +.dashlist-section { + margin-bottom: $spacer; } .dashlist-link { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 2b04f0e9b29..9249af41077 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -278,11 +278,11 @@ div.flot-text { .dashboard-header { font-family: $headings-font-family; - font-size: $font-size-h2; + font-size: $font-size-h3; text-align: center; span { display: inline-block; @include brand-bottom-border(); - padding: 1.2rem .5rem .4rem .5rem; + padding: 0.5rem .5rem .2rem .5rem; } } diff --git a/tsconfig.json b/tsconfig.json index 43a3888f711..0afaa053449 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,33 +6,13 @@ "noImplicitAny": false, "target": "es5", "rootDir": "public/", + "sourceRoot": "public/", "module": "system", "noEmitOnError": true, - "emitDecoratorMetadata": true + "emitDecoratorMetadata": true, + "experimentalDecorators": true }, "files": [ - "public/app/app.ts", - "public/app/core/controllers/grafana_ctrl.ts", - "public/app/core/controllers/signup_ctrl.ts", - "public/app/core/core.ts", - "public/app/core/core_module.ts", - "public/app/core/directives/array_join.ts", - "public/app/core/directives/give_focus.ts", - "public/app/core/filters/filters.ts", - "public/app/core/routes/bundle_loader.ts", - "public/app/core/table_model.ts", - "public/app/core/time_series.ts", - "public/app/core/utils/datemath.ts", - "public/app/core/utils/flatten.ts", - "public/app/core/utils/rangeutil.ts", - "public/app/features/dashboard/timepicker/timepicker.ts", - "public/app/features/panel/panel_meta.ts", - "public/app/plugins/datasource/influxdb/influx_query.ts", - "public/app/plugins/datasource/influxdb/query_part.ts", - "public/app/plugins/panels/table/controller.ts", - "public/app/plugins/panels/table/editor.ts", - "public/app/plugins/panels/table/module.ts", - "public/app/plugins/panels/table/renderer.ts", - "public/app/plugins/panels/table/transformers.ts" + "public/app/**/*.ts" ] -} \ No newline at end of file +}