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([
'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();
});
}
......
src/app/directives/kibanaPanel.js
......@@ -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>'+
......
src/app/panels/annotations/editor.html
......@@ -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>
src/app/panels/annotations/module.js
......@@ -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;
......
src/app/panels/graphite/editor.html
......@@ -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>
......
src/app/partials/dashLoader.html
......@@ -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>
src/app/partials/dashboard.html
......@@ -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>
......
src/app/partials/paneleditor.html
......@@ -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>
\ 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