IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

major improvement to how modals are loaded, much more reuse in html dom elements, hopefully solves #109.

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-02-19 21:50:47 +01:00
parent 7f28157b32
commit f2b987b96b
8 changed files with 31 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,48 +1,44 @@
define([
'angular',
'underscore'
'underscore',
'jquery'
],
function (angular, _) {
function (angular, _, $) {
'use strict';
angular
.module('kibana.directives')
.directive('configModal', function($modal,$q) {
.directive('configModal', function($modal, $q, $timeout) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
var
model = attrs.kbnModel,
partial = attrs.configModal;
var partial = attrs.configModal;
var id = '#' + partial.replace('.html', '').replace(/[\/|\.|:]/g, '-') + '-' + scope.$id;
// create a new modal. Can't reuse one modal unforunately as the directive will not
// re-render on show.
elem.bind('click',function(){
// Create a temp scope so we can discard changes to it if needed
var tmpScope = scope.$new();
tmpScope[model] = angular.copy(scope[model]);
tmpScope.editSave = function(panel) {
// Correctly set the top level properties of the panel object
_.each(panel,function(v,k) {
scope[model][k] = panel[k];
});
};
elem.bind('click',function() {
if ($(id).length) {
elem.attr('data-target', id).attr('data-toggle', 'modal');
return;
}
var panelModal = $modal({
template: partial,
persist: true,
show: false,
scope: tmpScope,
scope: scope,
keyboard: false
});
// and show it
$q.when(panelModal).then(function(modalEl) {
modalEl.modal('show');
elem.attr('data-target', id).attr('data-toggle', 'modal');
$timeout(function () {
if (!modalEl.data('modal').isShown) {
modalEl.modal('show');
}
}, 50);
});
scope.$apply();
});
}

2
src/app/directives/kibanaPanel.js
View File

@ -45,7 +45,7 @@ function (angular, $) {
'</span>'+
'<span ng-if="!panelMeta.menuItems" config-modal="./app/partials/paneleditor.html" ' +
' kbn-model="panel" class="panel-text panel-title pointer" >' +
' class="panel-text panel-title pointer" >' +
'{{panel.title}}' +
'</span>'+

9
src/app/panels/annotations/editor.html
View File

@ -4,20 +4,20 @@
<div class="editor-row">
<table class="table table-striped annotation-editor-table">
<thead>
<th width="1%"></th>
<th width="1%">Type</th>
<th width="90%">Name</th>
<th width="1%"></th>
<th width="1%"></th>
<th width="1%"></th>
<th width="1%"></th>
</thead>
<tr ng-repeat="annotation in panel.annotations">
<td><a ng-click="edit(annotation)"><i class="icon-pencil" /></a></td>
<td>{{annotation.type}}</td>
<td>{{annotation.name}}</td>
<td><i ng-click="_.move(panel.annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(panel.annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
<td><i ng-click="panel.annotations = _.without(panel.annotations, annotation)" class="pointer icon-remove"></i></td>
<td><a ng-click="edit(annotation)"><i class="icon-pencil" /></a></td>
</tr>
</table>
</div>
@ -32,7 +32,7 @@
</div>
<div class="editor-option">
<label class="small">Type</label>
<select ng-model="currentAnnnotation.type" ng-options="f for f in ['graphite metric']"></select>
<select ng-model="currentAnnnotation.type" ng-options="f for f in ['graphite metric', 'graphite events']"></select>
</div>
</div>
@ -53,8 +53,7 @@
</div>
<div class="modal-footer">
<!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add annotation</button>
<button ng-show="!currentIsNew" type="button" class="btn btn-success" ng-click="update()">Update</button>
<button type="button" class="btn btn-danger" ng-click="editSave(panel);close_edit();dismiss()">Close</button>
<button type="button" class="btn btn-danger" ng-click="close_edit();dismiss()">Close</button>
</div>

8
src/app/panels/annotations/module.js
View File

@ -38,19 +38,11 @@ function (angular, app, _) {
$scope.currentIsNew = true;
};
$scope.getAnnotationInfo = function(annotation) {
return annotation.target;
};
$scope.edit = function(annotation) {
$scope.currentAnnnotation = annotation;
$scope.currentIsNew = false;
};
$scope.getInfo = function(annotation) {
return annotation.target;
};
$scope.update = function() {
$scope.currentAnnnotation = angular.copy(annotationDefaults);
$scope.currentIsNew = true;

2
src/app/panels/graphite/editor.html
View File

@ -68,7 +68,7 @@
focus-me="segment.focus"
ng-bind-html-unsafe="segment.html">
</a>
<ul class="dropdown-menu scrollable" role="menu">
<ul class="dropdown-menu scrollable grafana-segment-dropdown-menu" role="menu">
<li ng-repeat="altSegment in altSegments" role="menuitem">
<a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
</li>

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

@ -68,5 +68,5 @@
<li ng-show="showDropdown('share')"><a bs-tooltip="'Share'" data-placement="bottom" ng-click="elasticsearch_save('temp',dashboard.current.loader.save_temp_ttl)" bs-modal="'app/partials/dashLoaderShare.html'"><i class='icon-share'></i></a></li>
<li ng-show="dashboard.current.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a href='#' bs-modal="'app/partials/dasheditor.html'"><i class='icon-cog pointer'></i></a></li>
<li 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>

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

@ -19,7 +19,7 @@
<div class="row-control">
<div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
<div class="row-close" ng-show="row.collapse" data-placement="bottom" >
<span class="row-button bgWarning" bs-modal="'app/partials/roweditor.html'" class="pointer">
<span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
</span>
<span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
@ -33,7 +33,7 @@
<i bs-tooltip="'Collapse row'" data-placement="right" class="icon-caret-right" ></i>
<br>
</div>
<div bs-modal="'app/partials/roweditor.html'" class='row-tab bgWarning' ng-show="row.editable">
<div config-modal="app/partials/roweditor.html" class='row-tab bgWarning' ng-show="row.editable">
<i bs-tooltip="'Configure row'" data-placement="right" class="icon-cog pointer"></i>
<br>
</div>
@ -58,7 +58,7 @@
<div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
</div>
<span bs-modal="'app/partials/roweditor.html'" ng-show="!dashboard.panelDragging && !dashboard.current.hideControls">
<span config-modal="app/partials/roweditor.html" ng-show="!dashboard.panelDragging && !dashboard.current.hideControls">
<i ng-hide="rowSpan(row) >= 10" class="pointer icon-plus-sign" ng-click="editor.index = 2" bs-tooltip="'Add a panel to this row'" data-placement="right"></i>
</span>
@ -70,7 +70,7 @@
<div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints'>
<div class="span12" style="text-align:right;">
<span style="margin-left: 0px;" class="pointer btn btn-mini" bs-modal="'app/partials/dasheditor.html'">
<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>
</span>
</div>

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

@ -19,6 +19,5 @@
<div class="modal-footer">
<!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
<button type="button" class="btn btn-success" ng-click="editor.index=0;editSave(panel);close_edit();dismiss()">Save</button>
<button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss()">Cancel</button>
</div>