Skip to content

N
nexpie-grafana-theme
Commit 42b415cf by Rashid Khan
Options

Added dashboard editor, row adding/moving/removing

parent b162bd64
Showing with 112 additions and 24 deletions
common/css/main.css
...@@ -27,6 +27,10 @@ ...@@ -27,6 +27,10 @@
display: none; display: none;
} }
.pointer:hover {
color: #0088CC;
}
.panel:hover i.editlink { .panel:hover i.editlink {
display: block; display: block;
opacity: 0.3; opacity: 0.3;
...@@ -36,18 +40,19 @@ ...@@ -36,18 +40,19 @@
opacity: 1; opacity: 1;
} }
/*
.row-header i.editlink { .row-header i.editlink {
display: none; opacity: 0;
} }
.row-header:hover i.editlink { .row-header:hover i.editlink {
display: inline-block;
opacity: 0.3; opacity: 0.3;
} }
.row-header i.editlink:hover { .row-header i.editlink:hover {
opacity: 1; opacity: 1;
} }
*/
.pointer { .pointer {
cursor: pointer; cursor: pointer;
......
index.html
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
<div class="container-fluid"> <div class="container-fluid">
<span class="brand"><small>Kibana Preview</small></span> <span class="brand"><small>Kibana Preview</small></span>
<span class="brand">{{dashboards.title}}</span> <span class="brand">{{dashboards.title}}</span>
<div class="brand"><i class='icon-edit pointer' bs-modal="'partials/dasheditor.html'" bs-tooltip="'Edit Dashboard'" data-placement="bottom"></i></div>
<div class="brand"><i class='icon-download pointer' ng-click="export()" bs-tooltip="'Export this dashboard'" data-placement="bottom"></i></div> <div class="brand"><i class='icon-download pointer' ng-click="export()" bs-tooltip="'Export this dashboard'" data-placement="bottom"></i></div>
<div class="brand"><i class='icon-bookmark pointer' ng-click="default()" bs-tooltip="'Set as default dashboard'" data-placement="bottom"></i></div> <div class="brand"><i class='icon-bookmark pointer' ng-click="default()" bs-tooltip="'Set as default dashboard'" data-placement="bottom"></i></div>
<div class="brand"><i class='icon-ban-circle pointer' ng-click="purge()" bs-tooltip="'Clear default dashboard settings'" data-placement="bottom"></i></div> <div class="brand"><i class='icon-ban-circle pointer' ng-click="purge()" bs-tooltip="'Clear default dashboard settings'" data-placement="bottom"></i></div>
......
js/controllers.js
...@@ -5,21 +5,24 @@ ...@@ -5,21 +5,24 @@
angular.module('kibana.controllers', []) angular.module('kibana.controllers', [])
.controller('DashCtrl', function($scope, $rootScope, ejsResource, timer) { .controller('DashCtrl', function($scope, $rootScope, ejsResource, timer) {
$scope.config = config;
$scope._ = _;
// The global dashboards object should be moved to an $http request for json
if (Modernizr.localstorage &&
!(_.isUndefined(localStorage['dashboard'])) &&
localStorage['dashboard'] !== ''
) {
$scope.dashboards = JSON.parse(localStorage['dashboard']);
} else {
$scope.dashboards = dashboards;
}
var ejs = $scope.ejs = ejsResource(config.elasticsearch); $scope.init = function() {
$scope.config = config;
$scope._ = _;
$scope.reset_row();
// The global dashboards object should be moved to an $http request for json
if (Modernizr.localstorage &&
!(_.isUndefined(localStorage['dashboard'])) &&
localStorage['dashboard'] !== ''
) {
$scope.dashboards = JSON.parse(localStorage['dashboard']);
} else {
$scope.dashboards = dashboards;
}
var ejs = $scope.ejs = ejsResource(config.elasticsearch);
}
$scope.export = function() { $scope.export = function() {
var blob = new Blob([angular.toJson($scope.dashboards)], {type: "application/json;charset=utf-8"}); var blob = new Blob([angular.toJson($scope.dashboards)], {type: "application/json;charset=utf-8"});
...@@ -44,9 +47,34 @@ angular.module('kibana.controllers', []) ...@@ -44,9 +47,34 @@ angular.module('kibana.controllers', [])
} }
} }
$scope.add_row = function(dashboards,row) {
$scope.dashboards.rows.push(row);
}
$scope.reset_row = function() {
$scope.row = {
title: '',
height: '150px',
editable: true,
};
};
$scope.init();
}) })
.controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, timer) { .controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, timer) {
var _d = {
title: "Row",
height: "150px",
collapse: false,
editable: true,
panels: [],
}
_.defaults($scope.row,_d)
$scope.init = function(){ $scope.init = function(){
$scope.reset_panel(); $scope.reset_panel();
} }
......
panels/sort/module.html
<kibana-panel ng-controller='sort' style="white-space: nowrap;"> <kibana-panel ng-controller='sort' style="white-space: nowrap;">
<label><small>{{panel.label}}</small></label> <label><small>{{panel.label}}</small></label>
<select style="width:85%" ng-model="panel.sort[0]" ng-change="set_sort()" ng-options="f for f in fields"></select> <select style="width:85%" ng-model="panel.sort[0]" ng-change="set_sort()" ng-options="f for f in fields"></select>
<i ng-click="toggle_sort()" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i> <i ng-click="toggle_sort()" class="pointer" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
</kibana-panel> </kibana-panel>
\ No newline at end of file
partials/dashboard.html
...@@ -5,9 +5,8 @@ ...@@ -5,9 +5,8 @@
<div class="span12"> <div class="span12">
<div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px"> <div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
<div class="span12" style="min-height:5px;vertical-align:bottom"> <div class="span12" style="min-height:5px;vertical-align:bottom">
<i class="pointer" ng-class="{'icon-minus': !row.collapse,'icon-plus': row.collapse}" ng-click="toggle_row(row)"></i> <i ng-show="row.editable" class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></i>
<span ng-click="toggle_row(row)" class="pointer"><small>{{row.title}}</small></span> <span ng-click="toggle_row(row)" class="pointer"><i class="pointer" ng-class="{'icon-caret-down': !row.collapse,'icon-caret-right': row.collapse}"></i> <small>{{row.title}}</small></span>
<i class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></i>
</div> </div>
</div> </div>
<div class="row-fluid" style="padding-top:10px" ng-hide="row.collapse"> <div class="row-fluid" style="padding-top:10px" ng-hide="row.collapse">
......
partials/dasheditor.html 0 → 100644
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{dashboards.title}} <small> editor</small></h3>
</div>
<div class="modal-body">
<h4>Dashboard Control</h4>
<div class="row-fluid">
<div class="span8">
<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboards.title'></input>
</div>
<div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="row.editable" ng-checked="dashboards.editable" />
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4>Panels</h4>
<table class="table table-condensed table-striped">
<thead>
<th>Title</th>
<th>Delete</th>
<th>Move</th>
</thead>
<tr ng-repeat="row in dashboards.rows">
<td>{{row.title}}</td>
<td><i ng-click="dashboards.rows = _.without(dashboards.rows,row)" class="pointer icon-remove"></i></td>
<td><i ng-click="_.move(dashboards.rows,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(dashboards.rows,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
</tr>
</table>
</div>
</div>
<h4>New row</h4>
<div class="row-fluid">
<div class="span8">
<label class="small">Title</label>
<input type="text" class="input-large" ng-model='row.title'></input>
</div>
<div class="span2">
<label class="small">Height</label>
<input type="text" class="input-mini" ng-model='row.height'></input>
</div>
<div class="span1">
<label class="small"> Editable </label>
<input type="checkbox" ng-model="row.editable" ng-checked="row.editable" />
</div>
</div>
<button ng-click="add_row(dashboards,row); reset_row();" class="btn btn-primary">Create Row</button><br>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();">Close</button>
</div>
\ No newline at end of file
partials/roweditor.html
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input> <label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input>
</div> </div>
<div class="span1"> <div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="row.editable" /> <label class="small"> Editable </label><input type="checkbox" ng-model="row.editable" ng-checked="row.editable" />
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
...@@ -28,9 +28,9 @@ ...@@ -28,9 +28,9 @@
<tr ng-repeat="panel in row.panels"> <tr ng-repeat="panel in row.panels">
<td>{{panel.title}}</td> <td>{{panel.title}}</td>
<td>{{panel.type}}</td> <td>{{panel.type}}</td>
<td><i ng-click="row.panels = _.without(row.panels,panel)" class="icon-remove"></i></td> <td><i ng-click="row.panels = _.without(row.panels,panel)" class="pointer icon-remove"></i></td>
<td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="icon-arrow-up"></i></td> <td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="icon-arrow-down"></i></td> <td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
</tr> </tr>
</table> </table>
</div> </div>
......
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