Skip to content

N
nexpie-grafana-theme
Commit 882ee4d4 by Torkel Ödegaard
Options

A start on a dashboard list panel, can now list starred dashboards

parent df51be02
Showing with 106 additions and 48 deletions
src/app/components/settings.js
...@@ -16,23 +16,19 @@ function (_, crypto) { ...@@ -16,23 +16,19 @@ function (_, crypto) {
datasources : {}, datasources : {},
window_title_prefix : 'Grafana - ', window_title_prefix : 'Grafana - ',
panels : { panels : {
'graph': { path: 'panels/graph' }, 'graph': { path: 'panels/graph', name: 'Graph' },
'singlestat': { path: 'panels/singlestat' }, 'singlestat': { path: 'panels/singlestat', name: 'Single stat' },
'text': { path: 'panels/text' }, 'text': { path: 'panels/text', name: 'Text' },
'starred': { path: 'panels/starred', hide: true }, 'dashlist': { path: 'panels/dashlist', name: 'Dashboard list' },
}, },
plugins : {}, new_panel_title: 'no title (click here)',
default_route : '/dashboard/file/default.json', plugins: {},
playlist_timespan : "1m", default_route: '/dashboard/file/default.json',
unsaved_changes_warning : true, playlist_timespan: "1m",
search : { max_results: 100 }, unsaved_changes_warning: true,
admin : {}, search: { max_results: 100 },
appSubUrl: "", admin: {},
buildInfo: { appSubUrl: ""
version: 'master',
commit: 'NA',
buildstamp: new Date().getTime()
}
}; };
var settings = _.extend({}, defaults, options); var settings = _.extend({}, defaults, options);
......
src/app/features/dashboard/dashboardCtrl.js
...@@ -4,7 +4,7 @@ define([ ...@@ -4,7 +4,7 @@ define([
'config', 'config',
'lodash', 'lodash',
], ],
function (angular, $, config, _) { function (angular, $, config) {
"use strict"; "use strict";
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
...@@ -20,11 +20,11 @@ function (angular, $, config, _) { ...@@ -20,11 +20,11 @@ function (angular, $, config, _) {
$timeout) { $timeout) {
$scope.editor = { index: 0 }; $scope.editor = { index: 0 };
$scope.panelNames = _.map(config.panels, function(value, key) { return key; }); $scope.panels = config.panels;
var resizeEventTimeout; var resizeEventTimeout;
this.init = function(dashboard) { this.init = function(dashboard) {
$scope.availablePanels = config.panels;
$scope.reset_row(); $scope.reset_row();
$scope.registerWindowResizeEvent(); $scope.registerWindowResizeEvent();
$scope.onAppEvent('show-json-editor', $scope.showJsonEditor); $scope.onAppEvent('show-json-editor', $scope.showJsonEditor);
......
src/app/features/dashboard/rowCtrl.js
define([ define([
'angular', 'angular',
'app', 'app',
'lodash' 'lodash',
'config'
], ],
function (angular, app, _) { function (angular, app, _, config) {
'use strict'; 'use strict';
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
...@@ -107,11 +108,11 @@ function (angular, app, _) { ...@@ -107,11 +108,11 @@ function (angular, app, _) {
var _as = 12 - $scope.dashboard.rowSpan($scope.row); var _as = 12 - $scope.dashboard.rowSpan($scope.row);
$scope.panel = { $scope.panel = {
title: 'no title (click here)', title: config.new_panel_title,
error : false, error: false,
span : _as < defaultSpan && _as > 0 ? _as : defaultSpan, span: _as < defaultSpan && _as > 0 ? _as : defaultSpan,
editable: true, editable: true,
type : type type: type
}; };
function fixRowHeight(height) { function fixRowHeight(height) {
......
src/app/features/panel/panelSrv.js
define([ define([
'angular', 'angular',
'lodash', 'lodash',
'config',
], ],
function (angular, _) { function (angular, _, config) {
'use strict'; 'use strict';
var module = angular.module('grafana.services'); var module = angular.module('grafana.services');
...@@ -77,6 +78,10 @@ function (angular, _) { ...@@ -77,6 +78,10 @@ function (angular, _) {
$scope.editorHelpIndex = index; $scope.editorHelpIndex = index;
}; };
$scope.isNewPanel = function() {
return $scope.panel.title === config.new_panel_title;
};
$scope.toggleFullscreen = function(edit) { $scope.toggleFullscreen = function(edit) {
$scope.dashboardViewState.update({ fullscreen: true, edit: edit, panelId: $scope.panel.id }); $scope.dashboardViewState.update({ fullscreen: true, edit: edit, panelId: $scope.panel.id });
}; };
......
src/app/panels/dashlist/module.html 0 → 100644
<grafana-panel>
<div class="dashlist">
<div class="dashlist-item" ng-repeat="dash in dashList">
<a class="dashlist-link" href="{{dash.url}}">
<span class="dashlist-title">
{{dash.title}}
</span>
<span class="dashlist-star">
<i class="fa fa-star"></i>
</span>
</a>
</div>
</grafana-panel>
src/app/panels/starred/module.js → src/app/panels/dashlist/module.js
define([ define([
'angular', 'angular',
'app', 'app',
'lodash',
'config',
'components/panelmeta', 'components/panelmeta',
], ],
function (angular, app, PanelMeta) { function (angular, app, _, config, PanelMeta) {
'use strict'; 'use strict';
var module = angular.module('grafana.panels.starred', []); var module = angular.module('grafana.panels.dashlist', []);
app.useModule(module); app.useModule(module);
module.directive('grafanaPanelStarred', function() { module.directive('grafanaPanelDashlist', function() {
return { return {
controller: 'StarredPanelCtrl', controller: 'DashListPanelCtrl',
templateUrl: 'app/panels/starred/module.html', templateUrl: 'app/panels/dashlist/module.html',
}; };
}); });
module.controller('StarredPanelCtrl', function($scope, panelSrv) { module.controller('DashListPanelCtrl', function($scope, panelSrv, backendSrv) {
$scope.panelMeta = new PanelMeta({ $scope.panelMeta = new PanelMeta({
panelName: 'Starred', panelName: 'Dash list',
editIcon: "fa fa-star", editIcon: "fa fa-star",
fullscreen: true, fullscreen: true,
}); });
var defaults = {
};
_.defaults($scope.panel, defaults);
$scope.dashList = [];
$scope.init = function() { $scope.init = function() {
panelSrv.init($scope); 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(); $scope.init();
......
src/app/panels/starred/module.html deleted 100644 → 0
<grafana-panel>
<h2>Starred</h2>
</grafana-panel>
src/app/partials/dashboard.html
...@@ -35,8 +35,8 @@ ...@@ -35,8 +35,8 @@
<li class="dropdown-submenu"> <li class="dropdown-submenu">
<a href="javascript:void(0);">Add Panel</a> <a href="javascript:void(0);">Add Panel</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li bindonce ng-repeat="name in panelNames"> <li bindonce ng-repeat="(key, value) in panels">
<a ng-click="add_panel_default(name)" bo-text="name"></a> <a ng-click="add_panel_default(key)" bo-text="value.name"></a>
</li> </li>
</ul> </ul>
</li> </li>
......
src/css/less/dashlist.less 0 → 100644
.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;
}
}
src/css/less/grafana.less
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
@import "sidemenu.less"; @import "sidemenu.less";
@import "gfbox.less"; @import "gfbox.less";
@import "navbar.less"; @import "navbar.less";
@import "dashlist.less";
.row-control-inner { .row-control-inner {
padding:0px; padding:0px;
......
src/css/less/navbar.less
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
} }
.navbar .nav>li>a { .navbar .nav>li>a {
padding: 19px 15px 8px; padding: 17px 15px 11px;
.fa { font-size: 130%; } .fa { font-size: 115%; }
} }
.top-nav { .top-nav {
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
} }
.fa.top-nav-breadcrumb-icon { .fa.top-nav-breadcrumb-icon {
margin: 17px 21px 8px 0px; margin: 15px 21px 8px 0px;
float: left; float: left;
font-size: 160%; font-size: 160%;
color: @textColor; color: @textColor;
...@@ -37,13 +37,13 @@ ...@@ -37,13 +37,13 @@
font-size: 150%; font-size: 150%;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
transition: opacity .25s ease-in-out; transition: opacity .35s ease-in-out;
} }
img { img {
width: 30px; width: 30px;
position: absolute; position: absolute;
opacity: 1; opacity: 1;
transition: opacity .25s ease-in-out; transition: opacity .35s ease-in-out;
} }
&:hover { &:hover {
.fa { .fa {
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
.top-nav-dashboards-btn { .top-nav-dashboards-btn {
display: block; display: block;
float: left; float: left;
margin: 10px 8px 5px 14px; margin: 9px 8px 5px 14px;
border-radius: 3px; border-radius: 3px;
font-size: 1.4em; font-size: 1.4em;
font-weight: bold; font-weight: bold;
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
.top-nav-title { .top-nav-title {
display: block; display: block;
float: left; float: left;
padding: 18px 10px 10px 0px; padding: 16px 10px 10px 0px;
font-size: 1.3em; font-size: 1.3em;
font-weight: bold; font-weight: bold;
i { i {
......
src/dashboards/home.json
{ {
"title": "Grafana Home", "title": "Home",
"tags": [], "tags": [],
"style": "dark", "style": "dark",
"timezone": "browser", "timezone": "browser",
...@@ -24,13 +24,19 @@ ...@@ -24,13 +24,19 @@
] ]
}, },
{ {
"height": "210px", "height": "410px",
"panels": [ "panels": [
{ {
"id": 2, "id": 2,
"span": 6, "span": 6,
"type": "starred", "type": "dashlist",
"title": "Starred dashboards" "title": "Starred dashboards"
},
{
"id": 3,
"span": 6,
"type": "dashlist",
"title": "Previously visited dashboards"
} }
] ]
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment