IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 01:23:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

worked on favorites feature and dashboard playlist, #36

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-03-08 16:27:01 +01:00
parent a387d48b48
commit 5100834156
11 changed files with 149 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/controllers/dashLoader.js
View File

@ -154,8 +154,22 @@ function (angular, _, moment) {
});
};
$scope.openSaveDropdown = function() {
$scope.isFavorite = playlistSrv.isCurrentFavorite();
};
$scope.markAsFavorite = function() {
playlistSrv.markAsFavorite();
$scope.isFavorite = true;
};
$scope.removeAsFavorite = function() {
playlistSrv.removeAsFavorite(dashboard.current);
$scope.isFavorite = false;
};
$scope.stopPlaylist = function() {
playlistSrv.stop(1);
};
});

17
src/app/controllers/playlistCtrl.js
View File

@ -1,7 +1,8 @@
define([
'angular'
'angular',
'underscore'
],
function (angular) {
function (angular, _) {
'use strict';
var module = angular.module('kibana.controllers');
@ -16,10 +17,20 @@ function (angular) {
$scope.loadFavorites = function() {
$scope.favDashboards = playlistSrv.getFavorites().dashboards;
_.each($scope.favDashboards, function(dashboard) {
dashboard.include = true;
});
};
$scope.removeAsFavorite = function(dashboard) {
playlistSrv.removeAsFavorite(dashboard);
$scope.loadFavorites();
};
$scope.start = function() {
playlistSrv.start($scope.favDashboards, $scope.timespan);
var included = _.where($scope.favDashboards, { include: true });
playlistSrv.start(included, $scope.timespan);
};
});

3
src/app/directives/configModal.js
View File

@ -18,6 +18,7 @@ function (angular, _, $) {
elem.bind('click',function() {
if ($(id).length) {
elem.attr('data-target', id).attr('data-toggle', 'modal');
scope.$apply(function() { scope.$broadcast('modal-opened'); });
return;
}
@ -32,8 +33,6 @@ function (angular, _, $) {
$q.when(panelModal).then(function(modalEl) {
elem.attr('data-target', id).attr('data-toggle', 'modal');
scope.$emit('modal-opened');
$timeout(function () {
if (!modalEl.data('modal').isShown) {
modalEl.modal('show');

12
src/app/partials/dashLoader.html
View File

@ -19,7 +19,7 @@
<li ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable"><kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel></li>
<li class="dropdown grafana-menu-save" ng-show="showDropdown('save')">
<a href="#" bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown">
<a href="#" bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="openSaveDropdown()">
<i class='icon-save'></i>
</a>
@ -38,9 +38,12 @@
<li ng-show="dashboard.current.loader.save_default">
<a class="link" ng-click="purge_default()">Reset Home</a>
</li>
<li>
<li ng-show="!isFavorite">
<a class="link" ng-click="markAsFavorite()">Mark as favorite</a>
</li>
<li ng-show="isFavorite">
<a class="link" ng-click="removeAsFavorite()">Remove as favorite</a>
</li>
<li ng-show="dashboard.current.loader.save_local">
<a class="link" ng-click="dashboard.to_file()">Export schema</a>
</li>
@ -67,3 +70,8 @@
<li class="grafana-menu-edit" ng-show="dashboard.current.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" config-modal="app/partials/dasheditor.html"><i class='icon-cog pointer'></i></a></li>
<li class="grafana-menu-stop-playlist hide">
<a class='small' ng-click='stopPlaylist(2)'>
Stop playlist
</a>
</li>

3
src/app/partials/dashboard.html
View File

@ -68,7 +68,7 @@
</div>
</div>
<div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints' class="add-row-panel-hint">
<div ng-show='dashboard.current.editable && dashboard.current.panel_hints' class="row-fluid add-row-panel-hint">
<div class="span12" style="text-align:right;">
<span style="margin-left: 0px;" class="pointer btn btn-mini" config-modal="app/partials/dasheditor.html">
<span ng-click="editor.index = 1"><i class="icon-plus-sign"></i> ADD A ROW</span>
@ -76,7 +76,6 @@
</div>
</div>
</div>
</div>
</div>

88
src/app/partials/playlist.html
View File

@ -1,38 +1,54 @@
<div ng-controller="PlaylistCtrl" ng-init="init()">
<div class="modal-header">
<h3>Start playlist</h3>
</div>
<div class="modal-body">
<div class="editor-row">
<div class="section span4">
<div class="editor-option">
<label class="small">Dashboards</label>
<table class="table table-striped" style="width: 300px">
<tr ng-repeat="dashboard in favDashboards">
<td>
{{dashboard.title}}
</td>
</tr>
</table>
</div>
</div>
<div class="section span4">
<label>
Timespan between change
</label>
<input type="text" class="input-small" ng-model="timespan" />
</div>
<div class="section">
<span>
Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage).
To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Favorites > Mark as favorite
</span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="start();dismiss();"><i class="icon-play"></i> Start</button>
<button type="button" class="btn btn-primary" ng-click="dismiss();"><i class="icon-ban-circle"></i> Cancel</button>
</div>
<div class="modal-header">
<h3>Start dashboard playlist</h3>
</div>
<div class="modal-body">
<div class="editor-row">
<div class="section">
<div class="editor-option">
<table class="table table-striped span4">
<tr>
<th>Dashboard</th>
<th>Include</th>
<th style="white-space: nowrap;">Remove as favorite</th>
</tr>
<tr ng-repeat="dashboard in favDashboards">
<td style="white-space: nowrap;">
{{dashboard.title}}
</td>
<td style="text-align: center">
<input type="checkbox" ng-model="dashboard.include" ng-checked="dashboard.include" />
</td>
<td style="text-align: center">
<i class="icon-remove pointer" ng-click="removeAsFavorite(dashboard)"></i>
</td>
</tr>
<tr ng-hide="favDashboards.length">
<td colspan="3">
<i class="icon-warning"></i> No dashboards marked as favorites
</td>
</tr>
</table>
</div>
<div class="editor-option">
<div class="span4">
<span><i class="icon-question-sign"></i>
Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage).
To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Mark as favorite
<br/><br/>
</span>
</div>
</div>
<div class="editor-option">
<label>
Timespan between change
</label>
<input type="text" class="input-small" ng-model="timespan" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="start();dismiss();"><i class="icon-play"></i> Start</button>
<button type="button" class="btn btn-primary" ng-click="dismiss();"><i class="icon-ban-circle"></i> Cancel</button>
</div>
</div>

1
src/app/partials/search.html
View File

@ -55,7 +55,6 @@
</a>
</td>
<td style="width:100%;padding-left: 10px;font-weight: bold;">
</td>
</tr>
</table>

68
src/app/services/playlistSrv.js
View File

@ -9,29 +9,53 @@ function (angular, _, kbn) {
var module = angular.module('kibana.services');
module.service('playlistSrv', function(dashboard, $location, $rootScope) {
var timerInstance;
var favorites = { dashboards: [] };
this.markAsFavorite = function() {
var favorites = this.getFavorites();
var existing = _.findWhere(favorites.dashboards, { title: dashboard.current.title });
if (existing) {
favorites.dashboard = _.without(favorites.dashboards, existing);
}
favorites.dashboards.push({ url: $location.path(), title: dashboard.current.title });
window.localStorage["grafana-favorites"] = angular.toJson(favorites);
};
this.getFavorites = function() {
var favorites = { dashboards: [] };
this.init = function() {
var existingJson = window.localStorage["grafana-favorites"];
if (existingJson) {
favorites = angular.fromJson(existingJson);
}
};
this._save = function() {
window.localStorage["grafana-favorites"] = angular.toJson(favorites);
};
this._find = function(title) {
return _.findWhere(favorites.dashboards, { title: title });
};
this._remove = function(existing) {
if (existing) {
favorites.dashboards = _.without(favorites.dashboards, existing);
}
};
this.isCurrentFavorite = function() {
return this._find(dashboard.current.title) ? true : false;
};
this.markAsFavorite = function() {
var existing = this._find(dashboard.current.title);
this._remove(existing);
favorites.dashboards.push({
url: $location.path(),
title: dashboard.current.title
});
this._save();
};
this.removeAsFavorite = function(toRemove) {
var existing = this._find(toRemove.title);
this._remove(existing);
this._save();
};
this.getFavorites = function() {
return favorites;
};
@ -40,9 +64,8 @@ function (angular, _, kbn) {
var index = 0;
$rootScope.playlist_active = true;
$rootScope.playlist_interval = interval;
setInterval(function() {
timerInstance = setInterval(function() {
$rootScope.$apply(function() {
$location.path(dashboards[index % dashboards.length].url);
index++;
@ -50,6 +73,13 @@ function (angular, _, kbn) {
}, interval);
};
this.stop = function() {
clearInterval(timerInstance);
$rootScope.playlist_active = false;
};
this.init();
});
});

2
src/css/bootstrap.dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
src/css/bootstrap.light.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
src/css/less/grafana.less
View File

@ -18,11 +18,16 @@
.grafana-menu-zoom-out,
.grafana-menu-save,
.grafana-menu-load,
.add-row-panel-hint,
.grafana-menu-home,
.grafana-menu-refresh,
.grafana-menu-edit {
display: none;
}
.grafana-menu-stop-playlist {
display: list-item;
}
}
// Search
@ -61,7 +66,7 @@
.search-tagview-switch {
position: absolute;
top: 15px;
right: 180px;
right: 263px;
color: darken(@linkColor, 30%);
&.active {
color: @linkColor;