Skip to content

N
nexpie-grafana-theme
Commit f2b987b9 by Torkel Ödegaard
Options

major improvement to how modals are loaded, much more reuse in html dom… 

major improvement to how modals are loaded, much more reuse in html dom elements, hopefully solves #109.
parent 7f28157b
Showing with 31 additions and 46 deletions
src/app/directives/configModal.js
define([ define([
'angular', 'angular',
'underscore' 'underscore',
'jquery'
], ],
function (angular, _) { function (angular, _, $) {
'use strict'; 'use strict';
angular angular
.module('kibana.directives') .module('kibana.directives')
.directive('configModal', function($modal,$q) { .directive('configModal', function($modal, $q, $timeout) {
return { return {
restrict: 'A', restrict: 'A',
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
var var partial = attrs.configModal;
model = attrs.kbnModel, var id = '#' + partial.replace('.html', '').replace(/[\/|\.|:]/g, '-') + '-' + scope.$id;
partial = attrs.configModal;
elem.bind('click',function() {
// create a new modal. Can't reuse one modal unforunately as the directive will not if ($(id).length) {
// re-render on show. elem.attr('data-target', id).attr('data-toggle', 'modal');
elem.bind('click',function(){ return;
}
// 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];
});
};
var panelModal = $modal({ var panelModal = $modal({
template: partial, template: partial,
persist: true, persist: true,
show: false, show: false,
scope: tmpScope, scope: scope,
keyboard: false keyboard: false
}); });
// and show it
$q.when(panelModal).then(function(modalEl) { $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(); scope.$apply();
}); });
} }
......
src/app/directives/kibanaPanel.js
...@@ -45,7 +45,7 @@ function (angular, $) { ...@@ -45,7 +45,7 @@ function (angular, $) {
'</span>'+ '</span>'+
'<span ng-if="!panelMeta.menuItems" config-modal="./app/partials/paneleditor.html" ' + '<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}}' + '{{panel.title}}' +
'</span>'+ '</span>'+
......
src/app/panels/annotations/editor.html
...@@ -4,20 +4,20 @@ ...@@ -4,20 +4,20 @@
<div class="editor-row"> <div class="editor-row">
<table class="table table-striped annotation-editor-table"> <table class="table table-striped annotation-editor-table">
<thead> <thead>
<th width="1%"></th>
<th width="1%">Type</th> <th width="1%">Type</th>
<th width="90%">Name</th> <th width="90%">Name</th>
<th width="1%"></th> <th width="1%"></th>
<th width="1%"></th> <th width="1%"></th>
<th width="1%"></th> <th width="1%"></th>
<th width="1%"></th>
</thead> </thead>
<tr ng-repeat="annotation in panel.annotations"> <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.type}}</td>
<td>{{annotation.name}}</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="$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="_.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><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> </tr>
</table> </table>
</div> </div>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Type</label> <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>
</div> </div>
...@@ -53,8 +53,7 @@ ...@@ -53,8 +53,7 @@
</div> </div>
<div class="modal-footer"> <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="add()">Add annotation</button>
<button ng-show="!currentIsNew" type="button" class="btn btn-success" ng-click="update()">Update</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> </div>
src/app/panels/annotations/module.js
...@@ -38,19 +38,11 @@ function (angular, app, _) { ...@@ -38,19 +38,11 @@ function (angular, app, _) {
$scope.currentIsNew = true; $scope.currentIsNew = true;
}; };
$scope.getAnnotationInfo = function(annotation) {
return annotation.target;
};
$scope.edit = function(annotation) { $scope.edit = function(annotation) {
$scope.currentAnnnotation = annotation; $scope.currentAnnnotation = annotation;
$scope.currentIsNew = false; $scope.currentIsNew = false;
}; };
$scope.getInfo = function(annotation) {
return annotation.target;
};
$scope.update = function() { $scope.update = function() {
$scope.currentAnnnotation = angular.copy(annotationDefaults); $scope.currentAnnnotation = angular.copy(annotationDefaults);
$scope.currentIsNew = true; $scope.currentIsNew = true;
......
src/app/panels/graphite/editor.html
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
focus-me="segment.focus" focus-me="segment.focus"
ng-bind-html-unsafe="segment.html"> ng-bind-html-unsafe="segment.html">
</a> </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"> <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> <a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
</li> </li>
......
src/app/partials/dashLoader.html
...@@ -68,5 +68,5 @@ ...@@ -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="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>
src/app/partials/dashboard.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="row-control"> <div class="row-control">
<div class="grafana-row" style="padding:0px;margin:0px;position:relative;"> <div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
<div class="row-close" ng-show="row.collapse" data-placement="bottom" > <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> <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
</span> </span>
<span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable"> <span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<i bs-tooltip="'Collapse row'" data-placement="right" class="icon-caret-right" ></i> <i bs-tooltip="'Collapse row'" data-placement="right" class="icon-caret-right" ></i>
<br> <br>
</div> </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> <i bs-tooltip="'Configure row'" data-placement="right" class="icon-cog pointer"></i>
<br> <br>
</div> </div>
...@@ -58,7 +58,7 @@ ...@@ -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 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> </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> <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> </span>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints'> <div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints'>
<div class="span12" style="text-align:right;"> <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 ng-click="editor.index = 1"><i class="icon-plus-sign"></i> ADD A ROW</span>
</span> </span>
</div> </div>
......
src/app/partials/paneleditor.html
...@@ -19,6 +19,5 @@ ...@@ -19,6 +19,5 @@
<div class="modal-footer"> <div class="modal-footer">
<!-- close_edit() is provided here to allow for a scope to perform action on dismiss --> <!-- 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> <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss()">Cancel</button>
</div> </div>
\ No newline at end of file
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