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

Added tabs to editor panels

Browse Source
This commit is contained in:
Rashid Khan committed 2013-07-23 10:10:00 -07:00
1 parent cc5da00bd0
commit d22e1c43f8
8 files changed
+70 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

common/css/bootstrap.dark.min.css
Vendored
+2 -2
View File
@@ -3172,9 +3172,9 @@ table th[class*="span"],
font-size: 20px;
font-weight: bold;
line-height: 21px;
color: #000000;
color: #FFF;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
opacity: 0.3;
filter: alpha(opacity=20);
}
common/css/main.css
+7
View File
@@ -6,6 +6,13 @@
color: #000;
}
.editor-title {
margin-right: 10px;
font-size: 1.7em;
font-weight: bold;
text-transform:capitalize;
}
.spy {
position:absolute;
right:0px;
common/lib/angular-strap.min.js
Vendored
+3 -3
View File
@@ -1,8 +1,8 @@
/**
* AngularStrap - Twitter Bootstrap directives for AngularJS
* @version v0.6.3 - 2013-01-25
* @version v0.7.5 - 2013-07-21
* @link http://mgcrea.github.com/angular-strap
* @author Olivier Louvignes
* @author Olivier Louvignes <olivier@mg-crea.com>
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
angular.module("$strap.config",[]).value("$strap.config",{}),angular.module("$strap.filters",["$strap.config"]),angular.module("$strap.directives",["$strap.config"]),angular.module("$strap",["$strap.filters","$strap.directives","$strap.config"]),angular.module("$strap.directives").directive("bsAlert",["$parse","$timeout","$compile",function(e,t,n){"use strict";return{restrict:"A",link:function(r,i,s){r.$watch(s.bsAlert,function(e,s){if(typeof e=="undefined"){typeof s!="undefined"&&i.remove();return}i.html((e.title?"<strong>"+e.title+"</strong>&nbsp;":"")+e.content||""),t(function(){n(i.contents())(r)});if(e.type||s.type)s.type&&i.removeClass("alert-"+s.type),e.type&&i.addClass("alert-"+e.type);e.close!==!1&&i.prepend('<button type="button" class="close" data-dismiss="alert">&times;</button>')},!0),!s.bsAlert&&s.close!=="0"&&i.prepend('<button type="button" class="close" data-dismiss="alert">&times;</button>'),i.addClass("alert").alert()}}}]),angular.module("$strap.directives").directive("bsButton",["$parse","$timeout",function(e,t){"use strict";return{restrict:"A",require:"?ngModel",link:function(n,r,i,s){s&&(r.parent('[data-toggle="buttons-checkbox"], [data-toggle="buttons-radio"]').length||r.attr("data-toggle","button"),!n.$eval(i.ngModel)||r.addClass("active"),n.$watch(i.ngModel,function(e,t){var n=!!e,r=!!t;n!==r&&$.fn.button.Constructor.prototype.toggle.call(o)})),r.hasClass("btn")||r.on("click.button.data-api",function(e){r.button("toggle")}),r.button();var o=r.data("button");o.toggle=function(){if(!s)return $.fn.button.Constructor.prototype.toggle.call(this);var t=r.parent('[data-toggle="buttons-radio"]');t.length?(r.siblings("[ng-model]").each(function(t,r){e($(r).attr("ng-model")).assign(n,!1)}),n.$digest(),s.$modelValue||(s.$setViewValue(!s.$modelValue),n.$digest())):n.$apply(function(){s.$setViewValue(!s.$modelValue)})}}}}]).directive("bsButtonsCheckbox",["$parse",function(e){"use strict";return{restrict:"A",require:"?ngModel",compile:function(t,n,r){t.attr("data-toggle","buttons-checkbox").find("a, button").each(function(e,t){$(t).attr("bs-button","")})}}}]).directive("bsButtonsRadio",["$parse",function(e){"use strict";return{restrict:"A",require:"?ngModel",compile:function(t,n,r){return t.attr("data-toggle","buttons-radio"),n.ngModel||t.find("a, button").each(function(e,t){$(t).attr("bs-button","")}),function(t,n,r,i){i&&(n.find("[value]").button().filter('[value="'+t.$eval(r.ngModel)+'"]').addClass("active"),n.on("click.button.data-api",function(e){t.$apply(function(){i.$setViewValue($(e.target).closest("button").attr("value"))})}),t.$watch(r.ngModel,function(e,i){if(e!==i){var s=n.find('[value="'+t.$eval(r.ngModel)+'"]');$.fn.button.Constructor.prototype.toggle.call(s.data("button"))}}))}}}}]),angular.module("$strap.directives").directive("bsButtonSelect",["$parse","$timeout",function(e,t){"use strict";return{restrict:"A",require:"?ngModel",link:function(n,r,i,s){var o=e(i.bsButtonSelect),u=o.assign;s&&(r.text(n.$eval(i.ngModel)),n.$watch(i.ngModel,function(e,t){r.text(e)}));var a,f,l,c;r.on("click",function(){a=o(n),f=s?n.$eval(i.ngModel):r.text(),l=a.indexOf(f),c=l>a.length-2?a[0]:a[l+1],n.$apply(function(){r.text(c),s&&s.$setViewValue(c)})})}}}]),angular.module("$strap.directives").directive("bsDatepicker",["$timeout",function(e){"use strict";var t="ontouchstart"in window&&!window.navigator.userAgent.match(/PhantomJS/i),n={"/":"[\\/]","-":"[-]",".":"[.]",dd:"(?:(?:[0-2]?[0-9]{1})|(?:[3][01]{1}))",d:"(?:(?:[0-2]?[0-9]{1})|(?:[3][01]{1}))",mm:"(?:[0]?[1-9]|[1][012])",m:"(?:[0]?[1-9]|[1][012])",yyyy:"(?:(?:[1]{1}[0-9]{1}[0-9]{1}[0-9]{1})|(?:[2]{1}[0-9]{3}))(?![[0-9]])",yy:"(?:(?:[0-9]{1}[0-9]{1}))(?![[0-9]])"};return{restrict:"A",require:"?ngModel",link:function(r,i,s,o){var u=function(e,t){t||(t={});var r=e,i=n;return angular.forEach(i,function(e,t){r=r.split(t).join(e)}),new RegExp("^"+r+"$",["i"])},a=t?"yyyy/mm/dd":u(s.dateFormat||"mm/dd/yyyy");o&&o.$parsers.unshift(function(e){return!e||a.test(e)?(o.$setValidity("date",!0),e):(o.$setValidity("date",!1),undefined)});var f=i.next('[data-toggle="datepicker"]');f.length&&f.on("click",function(){t?i.trigger("focus"):i.datepicker("show")});if(t&&i.prop("type")==="text")i.prop("type","date"),i.on("change",function(e){r.$apply(function(){o.$setViewValue(i.val())})});else{o&&i.on("changeDate",function(e){r.$apply(function(){o.$setViewValue(i.val())})});var l=i.closest(".popover");l&&l.on("hide",function(e){var t=i.data("datepicker");t&&(t.picker.remove(),i.data("datepicker",null))}),i.attr("data-toggle","datepicker"),i.datepicker({autoclose:!0})}}}}]),angular.module("$strap.directives").directive("bsDropdown",["$parse","$compile",function(e,t){"use strict";var n=Array.prototype.slice,r='<ul class="dropdown-menu" role="menu" aria-labelledby="drop1"><li ng-repeat="item in items" ng-class="{divider: !!item.divider, \'dropdown-submenu\': !!item.submenu && item.submenu.length}"><a ng-hide="!!item.divider" tabindex="-1" ng-href="{{item.href}}" ng-clickLine truncated
angular.module("$strap.config",[]).value("$strapConfig",{}),angular.module("$strap.filters",["$strap.config"]),angular.module("$strap.directives",["$strap.config"]),angular.module("$strap",["$strap.filters","$strap.directives","$strap.config"]),angular.module("$strap.directives").directive("bsAlert",["$parse","$timeout","$compile",function(t,e,n){return{restrict:"A",link:function(a,i,o){var r=t(o.bsAlert),s=(r.assign,r(a)),l=function(t){e(function(){i.alert("close")},1*t)};o.bsAlert?a.$watch(o.bsAlert,function(t,e){s=t,i.html((t.title?"<strong>"+t.title+"</strong>&nbsp;":"")+t.content||""),t.closed&&i.hide(),n(i.contents())(a),(t.type||e.type)&&(e.type&&i.removeClass("alert-"+e.type),t.type&&i.addClass("alert-"+t.type)),angular.isDefined(t.closeAfter)?l(t.closeAfter):o.closeAfter&&l(o.closeAfter),(angular.isUndefined(o.closeButton)||"0"!==o.closeButton&&"false"!==o.closeButton)&&i.prepend('<button type="button" class="close" data-dismiss="alert">&times;</button>')},!0):((angular.isUndefined(o.closeButton)||"0"!==o.closeButton&&"false"!==o.closeButton)&&i.prepend('<button type="button" class="close" data-dismiss="alert">&times;</button>'),o.closeAfter&&l(o.closeAfter)),i.addClass("alert").alert(),i.hasClass("fade")&&(i.removeClass("in"),setTimeout(function(){i.addClass("in")}));var u=o.ngRepeat&&o.ngRepeat.split(" in ").pop();i.on("close",function(t){var e;u?(t.preventDefault(),i.removeClass("in"),e=function(){i.trigger("closed"),a.$parent&&a.$parent.$apply(function(){for(var t=u.split("."),e=a.$parent,n=0;t.length>n;++n)e&&(e=e[t[n]]);e&&e.splice(a.$index,1)})},$.support.transition&&i.hasClass("fade")?i.on($.support.transition.end,e):e()):s&&(t.preventDefault(),i.removeClass("in"),e=function(){i.trigger("closed"),a.$apply(function(){s.closed=!0})},$.support.transition&&i.hasClass("fade")?i.on($.support.transition.end,e):e())})}}}]),angular.module("$strap.directives").directive("bsButton",["$parse","$timeout",function(t){return{restrict:"A",require:"?ngModel",link:function(e,n,a,i){if(i){n.parent('[data-toggle="buttons-checkbox"], [data-toggle="buttons-radio"]').length||n.attr("data-toggle","button");var o=!!e.$eval(a.ngModel);o&&n.addClass("active"),e.$watch(a.ngModel,function(t,e){var a=!!t,i=!!e;a!==i?$.fn.button.Constructor.prototype.toggle.call(r):a&&!o&&n.addClass("active")})}n.hasClass("btn")||n.on("click.button.data-api",function(){n.button("toggle")}),n.button();var r=n.data("button");r.toggle=function(){if(!i)return $.fn.button.Constructor.prototype.toggle.call(this);var a=n.parent('[data-toggle="buttons-radio"]');a.length?(n.siblings("[ng-model]").each(function(n,a){t($(a).attr("ng-model")).assign(e,!1)}),e.$digest(),i.$modelValue||(i.$setViewValue(!i.$modelValue),e.$digest())):e.$apply(function(){i.$setViewValue(!i.$modelValue)})}}}}]).directive("bsButtonsCheckbox",["$parse",function(){return{restrict:"A",require:"?ngModel",compile:function(t){t.attr("data-toggle","buttons-checkbox").find("a, button").each(function(t,e){$(e).attr("bs-button","")})}}}]).directive("bsButtonsRadio",["$timeout",function(t){return{restrict:"A",require:"?ngModel",compile:function(e,n){return e.attr("data-toggle","buttons-radio"),n.ngModel||e.find("a, button").each(function(t,e){$(e).attr("bs-button","")}),function(e,n,a,i){i&&(t(function(){n.find("[value]").button().filter('[value="'+i.$viewValue+'"]').addClass("active")}),n.on("click.button.data-api",function(t){e.$apply(function(){i.$setViewValue($(t.target).closest("button").attr("value"))})}),e.$watch(a.ngModel,function(t,i){if(t!==i){var o=n.find('[value="'+e.$eval(a.ngModel)+'"]');o.length&&o.button("toggle")}}))}}}}]),angular.module("$strap.directives").directive("bsButtonSelect",["$parse","$timeout",function(t){return{restrict:"A",require:"?ngModel",link:function(e,n,a,i){var o=t(a.bsButtonSelect);o.assign,i&&(n.text(e.$eval(a.ngModel)),e.$watch(a.ngModel,function(t){n.text(t)}));var r,s,l,u;n.bind("click",function(){r=o(e),s=i?e.$eval(a.ngModel):n.text(),l=r.indexOf(s),u=l>r.length-2?r[0]:r[l+1],e.$apply(function(){n.text(u),i&&i.$setViewValue(u)})})}}}]),angular.module("$strap.directives").directive("bsDatepicker",["$timeout","$strapConfig",function(t,e){var n=/(iP(a|o)d|iPhone)/g.test(navigator.userAgent),a=function a(t){return t=t||"en",{"/":"[\\/]","-":"[-]",".":"[.]"," ":"[\\s]",dd:"(?:(?:[0-2]?[0-9]{1})|(?:[3][01]{1}))",d:"(?:(?:[0-2]?[0-9]{1})|(?:[3][01]{1}))",mm:"(?:[0]?[1-9]|[1][012])",m:"(?:[0]?[1-9]|[1][012])",DD:"(?:"+$.fn.datepicker.dates[t].days.join("|")+")",D:"(?:"+$.fn.datepicker.dates[t].daysShort.join("|")+")",MM:"(?:"+$.fn.datepicker.dates[t].months.join("|")+")",M:"(?:"+$.fn.datepicker.dates[t].monthsShort.join("|")+")",yyyy:"(?:(?:[1]{1}[0-9]{1}[0-9]{1}[0-9]{1})|(?:[2]{1}[0-9]{3}))(?![[0-9]])",yy:"(?:(?:[0-9]{1}[0-9]{1}))(?![[0-9]])"}},i=function i(t,e){var n,i=t,o=a(e);return n=0,angular.forEach(o,function(t,e){i=i.split(e).join("${"+n+"}"),n++}),n=0,angular.forEach(o,function(t){i=i.split("${"+n+"}").join(t),n++}),RegExp("^"+i+"$",["i"Line truncated
js/controllers.js
+5
View File
@@ -13,6 +13,11 @@ angular.module('kibana.controllers', [])
last: null
};
// For
$scope.editor = {
index: 0
};
$scope.init = function() {
$scope.config = config;
partials/dasheditor.html
+15 -13
View File
@@ -1,18 +1,21 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{dashboard.current.title}} <small> editor</small></h3>
</div>
<div class="modal-body">
<h4>Dashboard Control</h4>
<div class="row-fluid">
<div class="span8">
<div class="pull-right editor-title">Dashboard settings</div>
<div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in ['General','Index','Rows']" data-title="{{tab}}">
</div>
</div>
<div class="row-fluid" ng-show="editor.index == 0">
<div class="span4">
<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.current.title'></input>
</div>
<div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" />
</div>
</div>
<div class="row-fluid">
<div class="row-fluid" ng-show="editor.index == 1">
<h4>Index Settings</h4>
<div ng-show="dashboard.current.index.interval != 'none'" class="row-fluid">
<div class="span12">
@@ -46,9 +49,8 @@
</div>
</div>
</div>
<hr/>
<h4>Rows</h4>
<div class="row-fluid">
<div class="row-fluid" ng-show="editor.index == 2">
<h4>Rows</h4>
<form>
<div class="span5">
<label class="small">Title</label>
@@ -68,7 +70,7 @@
</div>
</form>
</div>
<div class="row-fluid">
<div class="row-fluid" ng-show="editor.index == 2">
<div class="span12">
<table class="table table-condensed table-striped">
<thead>
@@ -87,5 +89,5 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();dashboard.refresh()">Close</button>
<button type="button" class="btn btn-success" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
</div>
partials/paneleditor.html
+14 -10
View File
@@ -1,18 +1,22 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{panel.title}} Editor</h3>
</div>
<div class="modal-body">
<h4>General <small> panel settings</small></h4>
<div ng-include src="'partials/panelgeneral.html'"></div>
<div class="modal-body" >
<div class="pull-right editor-title">{{panel.type}} settings</div>
<div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in ['General','Panel']" data-title="{{tab}}">
</div>
</div>
<div ng-show="editor.index == 0">
<h4>{{panel.title}} General <small> panel settings</small></h4>
<div ng-include src="'partials/panelgeneral.html'"></div>
</div>
<div ng-show="editor.index == 1">
<h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings. <strong ng-show="!_.isUndefined(panel.status)">({{panel.status}})</strong></small></h4>
<div ng-include src="edit_path(panel.type)">No additional settings are available for this type of panel.</div>
</div>
</div>
<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="close_edit();dismiss()">Close</button>
<button type="button" class="btn btn-success" ng-click="editor.index=0;close_edit();dismiss()">Close</button>
</div>
partials/querySelect.html
+14
View File
@@ -0,0 +1,14 @@
<style>
.querySelect .query {
margin-right: 5px;
}
</style>
<h4>Queries</h4>
<div class="span2" style="margin-left:0px">
<select class="input-small" ng-change="set_refresh(true);" ng-model="panel.queries.mode" ng-options="f for f in ['all','pinned','selected']"></select>
</div>
<div class="span9 querySelect" ng-show="panel.queries.mode == 'selected'">
<span ng-repeat="id in querySrv.ids" class="query badge">
<i ng-click="panel.queries.ids = _.toggleInOut(panel.queries.ids,id);set_refresh(true);" ng-class="{'icon-check': _.contains(panel.queries.ids,id),'icon-check-empty': !_.contains(panel.queries.ids,id)}"></i> <i class="icon-circle" ng-style="{color: querySrv.list[id].color}"></i><span> {{querySrv.list[id].alias || querySrv.list[id].query}}</span>
</span>
</div>
partials/roweditor.html
+10 -8
View File
@@ -1,10 +1,12 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{row.title}} <small>row editor</small></h3>
</div>
<div class="modal-body">
<h4>Row Control</h4>
<div class="row-fluid">
<div class="pull-right editor-title">Row settings</div>
<div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in ['General','Panels']" data-title="{{tab}}">
</div>
</div>
<div class="row-fluid" ng-show="editor.index == 0">
<div class="span4">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input>
</div>
@@ -18,7 +20,7 @@
<label class="small"> Collapsable </label><input type="checkbox" ng-model="row.collapsable" ng-checked="row.collapsable" />
</div>
</div>
<div class="row-fluid">
<div class="row-fluid" ng-show="editor.index == 1">
<h4>New Panel</h4>
<form class="input-append">
<select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.modules|stringSort"></select>
@@ -30,7 +32,7 @@
<div add-panel="{{panel.type}}"></div>
</div>
</div>
<div class="row-fluid">
<div class="row-fluid" ng-show="editor.index == 1">
<div class="span12">
<h4>Panels</h4>
<table class="table table-condensed table-striped">