From 882ee4d49f1df4550e898a914b4d17d40add4ddf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 4 Feb 2015 11:35:19 +0100 Subject: [PATCH] A start on a dashboard list panel, can now list starred dashboards --- src/app/components/settings.js | 28 +++++------ src/app/features/dashboard/dashboardCtrl.js | 6 +-- src/app/features/dashboard/rowCtrl.js | 13 ++--- src/app/features/panel/panelSrv.js | 7 ++- src/app/panels/dashlist/module.html | 13 +++++ src/app/panels/dashlist/module.js | 56 +++++++++++++++++++++ src/app/panels/starred/module.html | 3 -- src/app/panels/starred/module.js | 33 ------------ src/app/partials/dashboard.html | 4 +- src/css/less/dashlist.less | 16 ++++++ src/css/less/grafana.less | 1 + src/css/less/navbar.less | 14 +++--- src/dashboards/home.json | 12 +++-- 13 files changed, 132 insertions(+), 74 deletions(-) create mode 100644 src/app/panels/dashlist/module.html create mode 100644 src/app/panels/dashlist/module.js delete mode 100644 src/app/panels/starred/module.html delete mode 100644 src/app/panels/starred/module.js create mode 100644 src/css/less/dashlist.less diff --git a/src/app/components/settings.js b/src/app/components/settings.js index bf5f3adcb9f..7e896b475ea 100644 --- a/src/app/components/settings.js +++ b/src/app/components/settings.js @@ -16,23 +16,19 @@ function (_, crypto) { datasources : {}, window_title_prefix : 'Grafana - ', panels : { - 'graph': { path: 'panels/graph' }, - 'singlestat': { path: 'panels/singlestat' }, - 'text': { path: 'panels/text' }, - 'starred': { path: 'panels/starred', hide: true }, + 'graph': { path: 'panels/graph', name: 'Graph' }, + 'singlestat': { path: 'panels/singlestat', name: 'Single stat' }, + 'text': { path: 'panels/text', name: 'Text' }, + 'dashlist': { path: 'panels/dashlist', name: 'Dashboard list' }, }, - plugins : {}, - default_route : '/dashboard/file/default.json', - playlist_timespan : "1m", - unsaved_changes_warning : true, - search : { max_results: 100 }, - admin : {}, - appSubUrl: "", - buildInfo: { - version: 'master', - commit: 'NA', - buildstamp: new Date().getTime() - } + new_panel_title: 'no title (click here)', + plugins: {}, + default_route: '/dashboard/file/default.json', + playlist_timespan: "1m", + unsaved_changes_warning: true, + search: { max_results: 100 }, + admin: {}, + appSubUrl: "" }; var settings = _.extend({}, defaults, options); diff --git a/src/app/features/dashboard/dashboardCtrl.js b/src/app/features/dashboard/dashboardCtrl.js index ef3db122882..fe41dcccf0c 100644 --- a/src/app/features/dashboard/dashboardCtrl.js +++ b/src/app/features/dashboard/dashboardCtrl.js @@ -4,7 +4,7 @@ define([ 'config', 'lodash', ], -function (angular, $, config, _) { +function (angular, $, config) { "use strict"; var module = angular.module('grafana.controllers'); @@ -20,11 +20,11 @@ function (angular, $, config, _) { $timeout) { $scope.editor = { index: 0 }; - $scope.panelNames = _.map(config.panels, function(value, key) { return key; }); + $scope.panels = config.panels; + var resizeEventTimeout; this.init = function(dashboard) { - $scope.availablePanels = config.panels; $scope.reset_row(); $scope.registerWindowResizeEvent(); $scope.onAppEvent('show-json-editor', $scope.showJsonEditor); diff --git a/src/app/features/dashboard/rowCtrl.js b/src/app/features/dashboard/rowCtrl.js index dfd602751fb..bf10d9842a3 100644 --- a/src/app/features/dashboard/rowCtrl.js +++ b/src/app/features/dashboard/rowCtrl.js @@ -1,9 +1,10 @@ define([ 'angular', 'app', - 'lodash' + 'lodash', + 'config' ], -function (angular, app, _) { +function (angular, app, _, config) { 'use strict'; var module = angular.module('grafana.controllers'); @@ -107,11 +108,11 @@ function (angular, app, _) { var _as = 12 - $scope.dashboard.rowSpan($scope.row); $scope.panel = { - title: 'no title (click here)', - error : false, - span : _as < defaultSpan && _as > 0 ? _as : defaultSpan, + title: config.new_panel_title, + error: false, + span: _as < defaultSpan && _as > 0 ? _as : defaultSpan, editable: true, - type : type + type: type }; function fixRowHeight(height) { diff --git a/src/app/features/panel/panelSrv.js b/src/app/features/panel/panelSrv.js index 2f475c249c0..88f53e5edc6 100644 --- a/src/app/features/panel/panelSrv.js +++ b/src/app/features/panel/panelSrv.js @@ -1,8 +1,9 @@ define([ 'angular', 'lodash', + 'config', ], -function (angular, _) { +function (angular, _, config) { 'use strict'; var module = angular.module('grafana.services'); @@ -77,6 +78,10 @@ function (angular, _) { $scope.editorHelpIndex = index; }; + $scope.isNewPanel = function() { + return $scope.panel.title === config.new_panel_title; + }; + $scope.toggleFullscreen = function(edit) { $scope.dashboardViewState.update({ fullscreen: true, edit: edit, panelId: $scope.panel.id }); }; diff --git a/src/app/panels/dashlist/module.html b/src/app/panels/dashlist/module.html new file mode 100644 index 00000000000..3ecf6372fca --- /dev/null +++ b/src/app/panels/dashlist/module.html @@ -0,0 +1,13 @@ + +
+
+ + + {{dash.title}} + + + + + +
+ diff --git a/src/app/panels/dashlist/module.js b/src/app/panels/dashlist/module.js new file mode 100644 index 00000000000..8298169674f --- /dev/null +++ b/src/app/panels/dashlist/module.js @@ -0,0 +1,56 @@ +define([ + 'angular', + 'app', + 'lodash', + 'config', + 'components/panelmeta', +], +function (angular, app, _, config, PanelMeta) { + 'use strict'; + + var module = angular.module('grafana.panels.dashlist', []); + app.useModule(module); + + module.directive('grafanaPanelDashlist', function() { + return { + controller: 'DashListPanelCtrl', + templateUrl: 'app/panels/dashlist/module.html', + }; + }); + + module.controller('DashListPanelCtrl', function($scope, panelSrv, backendSrv) { + + $scope.panelMeta = new PanelMeta({ + panelName: 'Dash list', + editIcon: "fa fa-star", + fullscreen: true, + }); + + var defaults = { + }; + + _.defaults($scope.panel, defaults); + + $scope.dashList = []; + + $scope.init = function() { + panelSrv.init($scope); + + + if ($scope.isNewPanel()) { + $scope.panel.title = "Starred Dashboards"; + } + + $scope.$on('refresh', $scope.get_data); + }; + + $scope.get_data = function() { + backendSrv.get('/api/search', { starred: 1 }).then(function(result) { + $scope.dashList = result.dashboards; + $scope.panelMeta.loading = false; + }); + }; + + $scope.init(); + }); +}); diff --git a/src/app/panels/starred/module.html b/src/app/panels/starred/module.html deleted file mode 100644 index afc74b1e840..00000000000 --- a/src/app/panels/starred/module.html +++ /dev/null @@ -1,3 +0,0 @@ - -

Starred

- diff --git a/src/app/panels/starred/module.js b/src/app/panels/starred/module.js deleted file mode 100644 index de012a32bcf..00000000000 --- a/src/app/panels/starred/module.js +++ /dev/null @@ -1,33 +0,0 @@ -define([ - 'angular', - 'app', - 'components/panelmeta', -], -function (angular, app, PanelMeta) { - 'use strict'; - - var module = angular.module('grafana.panels.starred', []); - app.useModule(module); - - module.directive('grafanaPanelStarred', function() { - return { - controller: 'StarredPanelCtrl', - templateUrl: 'app/panels/starred/module.html', - }; - }); - - module.controller('StarredPanelCtrl', function($scope, panelSrv) { - - $scope.panelMeta = new PanelMeta({ - panelName: 'Starred', - editIcon: "fa fa-star", - fullscreen: true, - }); - - $scope.init = function() { - panelSrv.init($scope); - }; - - $scope.init(); - }); -}); diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html index d6d9e1bde28..b4c0c517968 100644 --- a/src/app/partials/dashboard.html +++ b/src/app/partials/dashboard.html @@ -35,8 +35,8 @@
  • Add Panel
      -
    • - +
    • +
    • diff --git a/src/css/less/dashlist.less b/src/css/less/dashlist.less new file mode 100644 index 00000000000..87264a0d963 --- /dev/null +++ b/src/css/less/dashlist.less @@ -0,0 +1,16 @@ +.dashlist-item { + +} + +.dashlist-link { + display: block; + margin: 5px; + padding: 7px; + background-color: @grafanaTargetBackground; + border: 1px solid @grafanaTargetBorder; + .fa { + float: right; + color: @orange; + padding-top: 3px; + } +} diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 15bef42014d..e55cc6aca4b 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -11,6 +11,7 @@ @import "sidemenu.less"; @import "gfbox.less"; @import "navbar.less"; +@import "dashlist.less"; .row-control-inner { padding:0px; diff --git a/src/css/less/navbar.less b/src/css/less/navbar.less index a96372e86f5..2398de3c7f2 100644 --- a/src/css/less/navbar.less +++ b/src/css/less/navbar.less @@ -3,8 +3,8 @@ } .navbar .nav>li>a { - padding: 19px 15px 8px; - .fa { font-size: 130%; } + padding: 17px 15px 11px; + .fa { font-size: 115%; } } .top-nav { @@ -12,7 +12,7 @@ } .fa.top-nav-breadcrumb-icon { - margin: 17px 21px 8px 0px; + margin: 15px 21px 8px 0px; float: left; font-size: 160%; color: @textColor; @@ -37,13 +37,13 @@ font-size: 150%; opacity: 0; position: absolute; - transition: opacity .25s ease-in-out; + transition: opacity .35s ease-in-out; } img { width: 30px; position: absolute; opacity: 1; - transition: opacity .25s ease-in-out; + transition: opacity .35s ease-in-out; } &:hover { .fa { @@ -58,7 +58,7 @@ .top-nav-dashboards-btn { display: block; float: left; - margin: 10px 8px 5px 14px; + margin: 9px 8px 5px 14px; border-radius: 3px; font-size: 1.4em; font-weight: bold; @@ -113,7 +113,7 @@ .top-nav-title { display: block; float: left; - padding: 18px 10px 10px 0px; + padding: 16px 10px 10px 0px; font-size: 1.3em; font-weight: bold; i { diff --git a/src/dashboards/home.json b/src/dashboards/home.json index c600d1b0f75..15b6e5bfd3b 100644 --- a/src/dashboards/home.json +++ b/src/dashboards/home.json @@ -1,5 +1,5 @@ { - "title": "Grafana Home", + "title": "Home", "tags": [], "style": "dark", "timezone": "browser", @@ -24,13 +24,19 @@ ] }, { - "height": "210px", + "height": "410px", "panels": [ { "id": 2, "span": 6, - "type": "starred", + "type": "dashlist", "title": "Starred dashboards" + }, + { + "id": 3, + "span": 6, + "type": "dashlist", + "title": "Previously visited dashboards" } ] }