Skip to content

N
nexpie-grafana-theme
Commit 82e40230 by Rashid Khan
Options

Fixed bug in pie editor, switched up edit icon, added ability to disable drag to… 

Fixed bug in pie editor, switched up edit icon, added ability to disable drag to select in histogram
parent fe2c9c21
Showing with 32 additions and 27 deletions
index.html
...@@ -19,6 +19,14 @@ ...@@ -19,6 +19,14 @@
<link rel="stylesheet" href="common/css/main.css"> <link rel="stylesheet" href="common/css/main.css">
<link rel="stylesheet" href="common/css/elasticjs.css"> <link rel="stylesheet" href="common/css/elasticjs.css">
<link rel="stylesheet" href="common/css/timepicker.css"> <link rel="stylesheet" href="common/css/timepicker.css">
<!-- project dependency libs -->
<script src="common/lib/LAB.min.js"></script>
<script src="common/lib/underscore.min.js"></script>
<script src="common/lib/settings.js"></script>
<script src="config.js"></script>
<script src="js/app.js"></script>
</head> </head>
...@@ -32,7 +40,7 @@ ...@@ -32,7 +40,7 @@
<div class="container-fluid"> <div class="container-fluid">
<p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone 2</small></small></p> <p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone 2</small></small></p>
<span class="brand">{{dashboards.title}}</span> <span class="brand">{{dashboards.title}}</span>
<div class="brand"><i class='icon-edit pointer' ng-show='dashboards.editable' bs-modal="'partials/dasheditor.html'"></i></div> <div class="brand"><i class='icon-cog pointer' ng-show='dashboards.editable' bs-modal="'partials/dasheditor.html'"></i></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -43,11 +51,4 @@ ...@@ -43,11 +51,4 @@
</div> </div>
</body> </body>
<!-- project dependency libs -->
<script src="common/lib/LAB.min.js"></script>
<script src="common/lib/underscore.min.js"></script>
<script src="common/lib/settings.js"></script>
<script src="config.js"></script>
<script src="js/app.js"></script>
</html> </html>
js/app.js
...@@ -17,12 +17,9 @@ var modules = [ ...@@ -17,12 +17,9 @@ var modules = [
var scripts = [] var scripts = []
var labjs = $LAB var labjs = $LAB
.script("common/lib/jquery-1.8.0.min.js").wait() .script("common/lib/jquery-1.8.0.min.js")
.script("common/lib/modernizr-2.6.1.min.js") .script("common/lib/modernizr-2.6.1.min.js")
.script("common/lib/underscore.min.js") .script("common/lib/underscore.min.js")
.script("common/lib/bootstrap.min.js")
.script('common/lib/datepicker.js')
.script('common/lib/timepicker.js')
.script("common/lib/angular.min.js") .script("common/lib/angular.min.js")
.script("common/lib/angular-strap.min.js") .script("common/lib/angular-strap.min.js")
.script("common/lib/angular-sanitize.min.js") .script("common/lib/angular-sanitize.min.js")
...@@ -31,6 +28,9 @@ var labjs = $LAB ...@@ -31,6 +28,9 @@ var labjs = $LAB
.script("common/lib/moment.js") .script("common/lib/moment.js")
.script("common/lib/shared.js") .script("common/lib/shared.js")
.script("common/lib/filesaver.js") .script("common/lib/filesaver.js")
.script("common/lib/bootstrap.min.js")
.script('common/lib/datepicker.js')
.script('common/lib/timepicker.js')
.script("js/services.js") .script("js/services.js")
.script("js/controllers.js") .script("js/controllers.js")
.script("js/filters.js") .script("js/filters.js")
......
js/directives.js
...@@ -8,8 +8,8 @@ angular.module('kibana.directives', []) ...@@ -8,8 +8,8 @@ angular.module('kibana.directives', [])
restrict: 'E', restrict: 'E',
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panel.loading == true">'+ var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panel.loading == true">'+
'<span class="editlink panelextra pointer" style="right:15px;top:0px" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+ ' <span class="editlink panelextra pointer" style="right:15px;top:0px" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
'<span class="small">{{panel.type}}</span> <i class="icon-edit pointer"></i>'+ '<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i> '+
'</span><h4>{{panel.title}}</h4>'; '</span><h4>{{panel.title}}</h4>';
elem.prepend($compile(angular.element(template))(scope)); elem.prepend($compile(angular.element(template))(scope));
} }
......
panels/histogram/editor.html
...@@ -66,10 +66,11 @@ ...@@ -66,10 +66,11 @@
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span2">
<label class="small">Time correction</label> <label class="small">Time correction</label>
<select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select> <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div> </div>
<div class="span1"> <label class="small">Selectable</label><input type="checkbox" ng-model="panel.interactive" ng-checked="panel.interactive"></div>
<div class="span2"> <div class="span2">
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" /> <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
</div> </div>
......
panels/histogram/module.js
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
* legend :: Show the legend? * legend :: Show the legend?
* x-axis :: Show x-axis labels and grid lines * x-axis :: Show x-axis labels and grid lines
* y-axis :: Show y-axis labels and grid lines * y-axis :: Show y-axis labels and grid lines
* interactive :: Allow drag to select time range
### Group Events ### Group Events
#### Receives #### Receives
* time :: An object containing the time range to use and the index(es) to query * time :: An object containing the time range to use and the index(es) to query
...@@ -64,7 +65,8 @@ angular.module('kibana.histogram', []) ...@@ -64,7 +65,8 @@ angular.module('kibana.histogram', [])
legend : true, legend : true,
'x-axis' : true, 'x-axis' : true,
'y-axis' : true, 'y-axis' : true,
percentage : false percentage : false,
interactive : true,
} }
_.defaults($scope.panel,_d) _.defaults($scope.panel,_d)
...@@ -288,7 +290,7 @@ angular.module('kibana.histogram', []) ...@@ -288,7 +290,7 @@ angular.module('kibana.histogram', [])
// Populate element // Populate element
try { try {
scope.plot = $.plot(elem, scope.data, { var options = {
legend: { show: false }, legend: { show: false },
series: { series: {
stackpercent: scope.panel.stack ? scope.panel.percentage : false, stackpercent: scope.panel.stack ? scope.panel.percentage : false,
...@@ -317,10 +319,6 @@ angular.module('kibana.histogram', []) ...@@ -317,10 +319,6 @@ angular.module('kibana.histogram', [])
label: "Datetime", label: "Datetime",
color: "#c8c8c8", color: "#c8c8c8",
}, },
selection: {
mode: "x",
color: '#ccc'
},
grid: { grid: {
backgroundColor: null, backgroundColor: null,
borderWidth: 0, borderWidth: 0,
...@@ -329,7 +327,12 @@ angular.module('kibana.histogram', []) ...@@ -329,7 +327,12 @@ angular.module('kibana.histogram', [])
hoverable: true, hoverable: true,
}, },
colors: ['#86B22D','#BF6730','#1D7373','#BFB930','#BF3030','#77207D'] colors: ['#86B22D','#BF6730','#1D7373','#BFB930','#BF3030','#77207D']
}) }
if(scope.panel.interactive)
options.selection = { mode: "x", color: '#aaa' };
scope.plot = $.plot(elem, scope.data, options)
// Work around for missing legend at initialization // Work around for missing legend at initialization
if(!scope.$$phase) if(!scope.$$phase)
......
panels/pie/editor.html
<div class="row-fluid" ng-switch="panel.mode"> <div class="row-fluid" ng-switch="panel.mode">
<div class="span3">
<label class="small">Mode</label>
<select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
</div>
<div ng-switch-when="terms"> <div ng-switch-when="terms">
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<label class="small">Mode</label>
<select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
</div>
<div class="span3">
<form style="margin-bottom: 0px"> <form style="margin-bottom: 0px">
<label class="small">Field</label> <label class="small">Field</label>
<input type="text" style="width:90%" bs-typeahead="fields.list" ng-model="panel.query.field"> <input type="text" style="width:90%" bs-typeahead="fields.list" ng-model="panel.query.field">
......
partials/dashboard.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div ng-show="row.collapsable"> <div ng-show="row.collapsable">
<div ng-class="{'row-open': !row.collapse, 'row-close': row.collapse}" style="position:absolute;margin-left:-60px;"> <div ng-class="{'row-open': !row.collapse, 'row-close': row.collapse}" style="position:absolute;margin-left:-60px;">
<span class='pointer' ng-click="toggle_row(row)">{{row.title}}</span> <span class='pointer' ng-click="toggle_row(row)">{{row.title}}</span>
<i ng-show="row.editable" class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></i> <i ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'partials/roweditor.html'"></i>
</div> </div>
</div> </div>
<small ng-hide="row.collapsable" class="rotated">{{row.title}}</small> <small ng-hide="row.collapsable" class="rotated">{{row.title}}</small>
......
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