public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added dashboard editor, row adding/moving/removing

Browse Source
This commit is contained in:
Rashid Khan
2013-02-13 14:24:32 -07:00
parent b162bd64ce
commit 42b415cf26
7 changed files with 108 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
partials/dashboard.html
+2 -3
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">
partials/dasheditor.html
+53
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>
partials/roweditor.html
+4 -4
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>