Skip to content

N
nexpie-grafana-theme
Commit 83021709 by Rashid Khan
Options

More efficient loading of setting panels and improved layuout

parent 072eda28
Showing with 236 additions and 186 deletions
src/app/directives/all.js
......@@ -8,5 +8,6 @@ define([
'./ngModelOnBlur',
'./tip',
'./confirmClick',
'./esVersion'
'./esVersion',
'./configModal'
], function () {});
\ No newline at end of file
src/app/directives/configModal.js 0 → 100644
define([
'angular',
'app',
],
function (angular) {
'use strict';
angular
.module('kibana.directives')
.directive('configModal', function($modal,$q) {
return {
restrict: 'A',
link: function(scope, elem) {
// create a new modal. Can't reuse one modal unforunately as the directive will not
// re-render on show.
elem.bind('click',function(){
var panelModal = $modal({
template: './app/partials/paneleditor.html',
persist: true,
show: false,
scope: scope,
keyboard: false
});
// and show it
$q.when(panelModal).then(function(modalEl) {
modalEl.modal('show');
});
scope.$apply();
});
}
};
});
});
\ No newline at end of file
src/app/directives/kibanaPanel.js
......@@ -36,7 +36,7 @@ function (angular) {
'</span>' +
'<span class="row-button extra" ng-show="panel.editable != false">' +
'<span bs-modal="\'app/partials/paneleditor.html\'" class="pointer">'+
'<span config-modal class="pointer">'+
'<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+
'</span>' +
......
src/app/panels/bettermap/editor.html
<div class="row-fluid">
<div class="span4">
<div class="editor-row">
<div class="editor-option">
<form>
<h6>Coordinate Field <tip>geoJSON array! Long,Lat NOT Lat,Long</tip></h6>
<input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.field">
</form>
</div>
<div class="span4">
<div class="editor-option">
<form>
<h6>Tooltip Field</h6>
<input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.tooltip">
</form>
</div>
<div class="span2"><h6>Max Points</h6>
<div class="editor-option"><h6>Max Points</h6>
<input type="number" class="input-small" ng-model="panel.size">
</div>
</div>
src/app/panels/histogram/editor.html
......@@ -7,7 +7,7 @@
</div>
<div class="editor-option" ng-show="panel.mode != 'count'">
<label class="small">Value Field <tip>This field must contain a numeric value</tip></label>
<input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-large" ng-model="panel.value_field">
<input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-medium" ng-model="panel.value_field">
</div>
</div>
<div class="section">
......@@ -23,26 +23,26 @@
<label class="small">Derivative <tip>Plot the change per interval in the series</tip></label><input type="checkbox" ng-model="panel.derivative" ng-checked="panel.derivative" ng-change="set_refresh(true)">
</div>
</div>
</div>
<h5>Time Options</h5>
<div class="editor-row">
<div class="editor-option">
<label class="small">Time Field</label>
<input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.time_field">
</div>
<div class="editor-option">
<label class="small">Time correction</label>
<select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div>
<div class="editor-option">
<label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
</div>
<div class="editor-option" ng-show='panel.auto_int'>
<label class="small">Resolution <tip>Shoot for this many data points, rounding to sane intervals</tip></label>
<input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
</div>
<div class="editor-option" ng-hide='panel.auto_int'>
<label class="small">Interval <tip>Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</tip></label>
<input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
<div class="section">
<h5>Time Options</h5>
<div class="editor-option">
<label class="small">Time Field</label>
<input ng-change="set_refresh(true)" placeholder="Start typing" bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.time_field">
</div>
<div class="editor-option">
<label class="small">Time correction</label>
<select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div>
<div class="editor-option">
<label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
</div>
<div class="editor-option" ng-show='panel.auto_int'>
<label class="small">Resolution <tip>Shoot for this many data points, rounding to sane intervals</tip></label>
<input type="number" class='input-mini' ng-model="panel.resolution" ng-change='set_refresh(true)'/>
</div>
<div class="editor-option" ng-hide='panel.auto_int'>
<label class="small">Interval <tip>Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</tip></label>
<input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
</div>
</div>
</div>
\ No newline at end of file
src/app/panels/hits/editor.html
<div>
<div class="row-fluid">
<div class="span3">
<div class="editor-row">
<div class="section">
<div class="editor-option">
<label class="small">Style</label>
<select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','list','total']"></select></span>
</div>
<div class="span2" ng-show="panel.chart == 'total' || panel.chart == 'list'">
<div class="editor-option" ng-show="panel.chart == 'total' || panel.chart == 'list'">
<label class="small">Font Size</label>
<select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
</div>
<div class="span3" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
<div class="editor-option" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
<label class="small">Legend</label>
<select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
</div>
<div class="span3" ng-show="panel.chart != 'total' && panel.counter_pos != 'none'">
<div class="editor-option" ng-show="panel.chart != 'total' && panel.counter_pos != 'none'">
<label class="small" >List Format</label>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
</div>
<div class="span1" ng-show="panel.chart == 'pie'">
<div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
</div>
<div class="span1" ng-show="panel.chart == 'pie'">
<div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
</div>
<div class="span1" ng-show="panel.chart == 'pie'">
<div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div>
</div>
......
src/app/panels/map/editor.html
<div class="row-fluid">
<div class="span3">
<div class="editor-row">
<div class="editor-option">
<form>
<h6>Field <tip>2 letter country or state code</tip></h6>
<input bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.field" ng-change="set_refresh(true)">
</form>
</div>
<div class="span2">
<div class="editor-option">
<h6>Max <tip>Maximum countries to plot</tip></h6>
<input class="input-mini" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
</div>
<div class="span1"><h6>Map</h6>
<div class="editor-option"><h6>Map</h6>
<select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
</div>
</div>
src/app/panels/pie/editor.html
<div class="row-fluid" ng-switch="panel.mode">
<div class="row-fluid">
<div class="span2">
<label class="small">Mode</label>
<div class="editor-row" ng-switch="panel.mode">
<div class="section">
<h5>Mode</h5>
<div class="editor-option">
<label class="small">Mode</label>
<select class="input-small" ng-change="set_mode(panel.mode);set_refresh(true)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
</div>
</div>
<div ng-switch-when="terms">
<div class="row-fluid">
<div class="span2">
<label class="small">Field</label>
<input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.query.field" ng-change="set_refresh(true)">
</div>
<div class="span2">
<label class="small">Length</label>
<input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
</div>
<div class="span6">
<label class="small">Exclude Terms(s) (comma seperated)</label>
<input array-join type="text" ng-model='panel.exclude'></input>
</div>
</div>
</div>
<div ng-switch-when="goal">
<div class="row-fluid">
<div class="span2">
<form style="margin-bottom: 0px">
<label class="small">Goal</label>
<input type="number" style="width:90%" ng-model="panel.query.goal" ng-change="set_refresh(true)">
</form>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span1">
<label class="small"> Donut </label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
</div>
<div class="span1">
<label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
<div class="section" ng-switch-when="terms">
<h5>Parameters</h5>
<div class="editor-option">
<label class="small">Field</label>
<input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.query.field" ng-change="set_refresh(true)">
</div>
<div class="editor-option">
<label class="small">Length</label>
<input class="input-mini" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
</div>
<div class="editor-option">
<label class="small">Exclude Terms(s) (comma seperated)</label>
<input array-join type="text" ng-model='panel.exclude'></input>
</div>
</div>
<div class="span1">
<label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
<div class="section" ng-switch-when="goal">
<h5>Parameters</h5>
<div class="editor-option">
<form style="margin-bottom: 0px">
<label class="small">Goal</label>
<input type="number" style="width:90%" ng-model="panel.query.goal" ng-change="set_refresh(true)">
</form>
</div>
</div>
<div class="span3">
<label class="small">Legend</label>
<select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
<div class="section">
<h5>View Options</h5>
<div class="editor-option">
<label class="small"> Donut </label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
</div>
<div class="editor-option">
<label class="small"> Tilt </label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
</div>
<div class="editor-option">
<label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div>
<div class="editor-option">
<label class="small">Legend</label>
<select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
</div>
</div>
</div>
\ No newline at end of file
src/app/panels/table/pagination.html
<div class="row-fluid">
<div class="span3">
<h6>Show Controls</h6><input type="checkbox" ng-model="panel.paging" ng-checked="panel.paging">
<div class="editor-row">
<div class="section">
<div class="editor-option">
<h6>Show Controls</h6><input type="checkbox" ng-model="panel.paging" ng-checked="panel.paging">
</div>
<div class="editor-option">
<h6>Overflow</h6>
<select class="input-small" ng-model="panel.overflow" ng-options="f.value as f.key for f in [{key:'scroll',value:'height'},{key:'expand',value:'min-height'}]"></select>
</div>
</div>
<div class="span2">
<h6>Overflow</h6>
<select class="input-small" ng-model="panel.overflow" ng-options="f.value as f.key for f in [{key:'scroll',value:'height'},{key:'expand',value:'min-height'}]"></select>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<h6>Per Page</h6>
<input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
</div>
<div class="span1">
<h6>&nbsp;</h6>
<center><i class='icon-remove'></i><center>
</div>
<div class="span2">
<h6>Page limit</h6>
<input type="number" class="input-mini" ng-model="panel.pages" ng-change="get_data()">
</div>
<div class="span2 large">
<h6>Pageable</h6>
<strong class="large">= {{panel.size * panel.pages}}</strong>
<div class="section">
<div class="editor-option">
<h6>Per Page</h6>
<input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
</div>
<div class="editor-option">
<h6>&nbsp;</h6>
<center><i class='icon-remove'></i><center>
</div>
<div class="editor-option">
<h6>Page limit</h6>
<input type="number" class="input-mini" ng-model="panel.pages" ng-change="get_data()">
</div>
<div class="editor-option large">
<h6>Pageable</h6>
<strong class="large">= {{panel.size * panel.pages}}</strong>
</div>
</div>
</div>
src/app/panels/terms/editor.html
<div class="row-fluid">
<div class="span2">
<label class="small">Field</label>
<input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.field" ng-change="set_refresh(true)">
</div>
<div class="span2">
<label class="small">Length</label>
<input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
</div>
<div class="span3">
<label class="small">Order</label>
<select class="input-medium" ng-model="panel.order" ng-options="f for f in ['count','term','reverse_count','reverse_term']" ng-change="set_refresh(true)"></select></span>
</div>
<div class="span4">
<label class="small">Exclude Terms(s) (comma seperated)</label>
<input array-join type="text" ng-model='panel.exclude'></input>
<div class="editor-row">
<div class="section">
<h5>Parameters</h5>
<div class="editor-option">
<label class="small">Field</label>
<input type="text" class="input-small" bs-typeahead="fields.list" ng-model="panel.field" ng-change="set_refresh(true)">
</div>
<div class="editor-option">
<label class="small">Length</label>
<input class="input-small" type="number" ng-model="panel.size" ng-change="set_refresh(true)">
</div>
<div class="editor-option">
<label class="small">Order</label>
<select class="input-medium" ng-model="panel.order" ng-options="f for f in ['count','term','reverse_count','reverse_term']" ng-change="set_refresh(true)"></select></span>
</div>
<div class="editor-option">
<label class="small">Exclude Terms(s) (comma seperated)</label>
<input array-join type="text" ng-model='panel.exclude'></input>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<label class="small">Style</label>
<select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','table']"></select></span>
</div>
<div class="span2" ng-show="panel.chart == 'table'">
<label class="small">Font Size</label>
<select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
</div>
<div class="span2" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
<label class="small">Legend</label>
<select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
</div>
<div class="span3" ng-show="panel.chart != 'table' && panel.counter_pos != 'none'">
<label class="small" >Legend Format</label>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
</div>
<div class="span1">
<label class="small">Missing</label><input type="checkbox" ng-model="panel.missing" ng-checked="panel.missing">
</div>
<div class="span1">
<label class="small">Other</label><input type="checkbox" ng-model="panel.other" ng-checked="panel.other">
</div>
<div class="span1" ng-show="panel.chart == 'pie'">
<label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
</div>
<div class="span1" ng-show="panel.chart == 'pie'">
<label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
</div>
<div class="span1" ng-show="panel.chart == 'pie'">
<label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
<div class="editor-row">
<div class="section">
<h5>View Options</h5>
<div class="editor-option">
<label class="small">Style</label>
<select class="input-small" ng-model="panel.chart" ng-options="f for f in ['bar','pie','table']"></select></span>
</div>
<div class="editor-option" ng-show="panel.chart == 'table'">
<label class="small">Font Size</label>
<select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
</div>
<div class="editor-option" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
<label class="small">Legend</label>
<select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
</div>
<div class="editor-option" ng-show="panel.chart != 'table' && panel.counter_pos != 'none'">
<label class="small" >Legend Format</label>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
</div>
<div class="editor-option">
<label class="small">Missing</label><input type="checkbox" ng-model="panel.missing" ng-checked="panel.missing">
</div>
<div class="editor-option">
<label class="small">Other</label><input type="checkbox" ng-model="panel.other" ng-checked="panel.other">
</div>
<div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">
</div>
<div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">
</div>
<div class="editor-option" ng-show="panel.chart == 'pie'">
<label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div>
</div>
</div>
src/app/partials/paneladd.html
<div ng-include="'app/partials/panelgeneral.html'"></div>
<div ng-include="edit_path(panel.type)"></div>
<div ng-repeat="tab in panelMeta.editorTabs">
<h4>{{tab.title}}</h4>
<h5>{{tab.title}}</h5>
<div ng-include="tab.src"></div>
</div>
\ No newline at end of file
src/app/partials/panelgeneral.html
<div class="row-fluid">
<div class="span12">
<div class="editor-row">
<div class="section">
<strong>{{panelMeta.status}}</strong> // <span ng-bind-html="panelMeta.description"></span>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
</div>
<div class="span2" ng-hide="panel.sizeable == false">
<label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="span2">
<label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
</div>
<div class="span2" ng-show="!_.isUndefined(panel.spyable)">
<label class="small">
Inspect <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
</label>
<input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
<div class="editor-row">
<div class="section">
<div class="editor-option">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
</div>
<div class="editor-option" ng-hide="panel.sizeable == false">
<label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="editor-option">
<label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
</div>
<div class="editor-option" ng-show="!_.isUndefined(panel.spyable)">
<label class="small">
Inspect <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
</label>
<input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
</div>
</div>
\ No newline at end of file
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/vendor/bootstrap/less/modals.less
......@@ -22,17 +22,10 @@
// Base modal
.modal {
position: fixed;
top: 10%;
left: 50%;
position: absolute;
z-index: @zindexModal;
width: 560px;
margin-left: -280px;
width: 100%;
background-color: @white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
*border: 1px solid #999; /* IE6-7 */
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box);
// Remove focus outline from opened modal
......@@ -60,7 +53,7 @@
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
max-height: 700px;
padding: 15px;
}
// Remove bottom margin if need be
......@@ -75,7 +68,6 @@
text-align: right; // right align buttons
background-color: #f5f5f5;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix(); // clear it in case folks use .pull-* classes on buttons
......
src/vendor/bootstrap/less/overrides.less
......@@ -210,9 +210,8 @@ form input.ng-invalid {
}
.modal {
width: 770px;
margin-left: -385px;
top: 10px !important;
width: 100%;
top: 0px !important;
}
.tiny {
......
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