apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added dashboard editor, row adding/moving/removing

Browse Source
pull/7/head
Rashid Khan 13 years ago
parent b162bd64ce
commit 42b415cf26
7 changed files with 110 additions and 24 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 9
      common/css/main.css
  2. 1
      index.html
  3. 30
      js/controllers.js
  4. 2
      panels/sort/module.html
  5. 5
      partials/dashboard.html
  6. 53
      partials/dasheditor.html
  7. 8
      partials/roweditor.html

9
common/css/main.css
Unescape View File

@ -27,6 +27,10 @@
display: none;
}
.pointer:hover {
color: #0088CC;
}
.panel:hover i.editlink {
display: block;
opacity: 0.3;
@ -36,18 +40,19 @@
opacity: 1;
}
/*
.row-header i.editlink {
display: none;
opacity: 0;
}
.row-header:hover i.editlink {
display: inline-block;
opacity: 0.3;
}
.row-header i.editlink:hover {
opacity: 1;
}
*/
.pointer {
cursor: pointer;

1
index.html
Unescape View File

@ -34,6 +34,7 @@
<div class="container-fluid">
<span class="brand"><small>Kibana Preview</small></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-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>

30
js/controllers.js
Unescape View File

@ -5,9 +5,11 @@
angular.module('kibana.controllers', [])
.controller('DashCtrl', function($scope, $rootScope, ejsResource, timer) {
$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 &&
@ -20,6 +22,7 @@ angular.module('kibana.controllers', [])
}
var ejs = $scope.ejs = ejsResource(config.elasticsearch);
}
$scope.export = function() {
var blob = new Blob([angular.toJson($scope.dashboards)], {type: "application/json;charset=utf-8"});
@ -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) {
var _d = {
title: "Row",
height: "150px",
collapse: false,
editable: true,
panels: [],
}
_.defaults($scope.row,_d)
$scope.init = function(){
$scope.reset_panel();
}

2
panels/sort/module.html
Unescape View File

@ -1,5 +1,5 @@
<kibana-panel ng-controller='sort' style="white-space: nowrap;">
<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>
<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>

5
partials/dashboard.html
Unescape View File

@ -5,9 +5,8 @@
<div class="span12">
<div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
<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>
<span ng-click="toggle_row(row)" class="pointer"><small>{{row.title}}</small></span>
<i class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></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"><i class="pointer" ng-class="{'icon-caret-down': !row.collapse,'icon-caret-right': row.collapse}"></i> <small>{{row.title}}</small></span>
</div>
</div>
<div class="row-fluid" style="padding-top:10px" ng-hide="row.collapse">

53
partials/dasheditor.html
Unescape View File

@ -0,0 +1,53 @@
<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>

8
partials/roweditor.html
Unescape View File

@ -12,7 +12,7 @@
<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="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 class="row-fluid">
@ -28,9 +28,9 @@
<tr ng-repeat="panel in row.panels">
<td>{{panel.title}}</td>
<td>{{panel.type}}</td>
<td><i ng-click="row.panels = _.without(row.panels,panel)" class="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="$last" class="icon-arrow-down"></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="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
</tr>
</table>
</div>

Write Preview
Loading…
Cancel
Save