Skip to content

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

Make panel extra icons more obvious, fix overlap, add tooltips, add method for… 

Make panel extra icons more obvious, fix overlap, add tooltips, add method for panels to define custom modals
parent 04db0fd4
Showing with 113 additions and 72 deletions
src/app/directives/kibanaPanel.js
......@@ -10,9 +10,24 @@ function (angular) {
var editorTemplate =
'<i class="icon-spinner small icon-spin icon-large panel-loading"' +
'ng-show="panelMeta.loading == true && !panel.title"></i>' +
'<span class="editlink panelextra pointer" style="right:15px;top:0px"' +
'bs-modal="\'app/partials/paneleditor.html\'" ng-show="panel.editable != false">' +
'<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i></span>' +
// Editor link
'<span class="panelextra">' +
'<span ng-repeat="task in panelMeta.modals" ng-show="task.show">' +
'<span bs-modal="task.partial" class="pointer"><i ' +
'bs-tooltip="task.description" ng-class="task.icon" class="pointer"></i></span>'+
' / </span>' +
'<span ng-show="panel.editable != false">' +
'<span bs-modal="\'app/partials/paneleditor.html\'" class="pointer">'+
'<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+
' / </span>' +
'<span class="small strong">{{panel.type}}</span> ' +
'</span>' +
'<h4 ng-show="panel.title">' +
'{{panel.title}}' +
'<i class="icon-spinner smaller icon-spin icon-large"' +
......
src/app/panels/bettermap/module.html
<div ng-controller='bettermap' ng-init="init()">
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
</span>
<!-- This solution might work well for other panels that have trouble with heights -->
<div style="padding-right:10px;padding-top:10px;height:{{panel.height|| row.height}};overflow:hidden">
<div bettermap id='bettermap' params="{{panel}}" style="height:100%"></div>
......
src/app/panels/bettermap/module.js
......@@ -32,6 +32,14 @@ function (angular, app, _, L, localRequire) {
src: 'app/partials/querySelect.html'
}
],
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
status : "Experimental",
description : "Displays geo points in clustered groups on a map. The cavaet for this panel is"+
" that, for better or worse, it does NOT use the terms facet and it <b>does</b> query "+
......
src/app/panels/derivequeries/module.html
......@@ -17,10 +17,6 @@
box-sizing: border-box; /* Opera/IE 8+ */
}
</style>
<span ng-show='panel.spyable' style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
</span>
<label class="small">Create new queries from
<span class="panel-derive-field" ng-show="!editing" ng-click="editing=true">{{panel.field}}</span>
<select ng-show="editing && fields.list.length>1" class="input-medium" ng-model="panel.field" ng-options="f for f in fields.list" ng-change='editing=false' ng-blur="editing=false"></select>
......
src/app/panels/derivequeries/module.js
......@@ -24,6 +24,14 @@ function (angular, app, _) {
module.controller('derivequeries', function($scope, $rootScope, querySrv, fields, dashboard, filterSrv) {
$scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
status : "Experimental",
description : "Creates a new set of queries using the Elasticsearch terms facet. For example,"+
" you might want to create 5 queries showing the most frequent HTTP response codes. Be "+
......
src/app/panels/histogram/module.html
......@@ -25,9 +25,6 @@
margin: 0px 0px 0px 10px !important;
}
</style>
<span ng-show="panel.spyable" class='spy panelextra pointer'>
<i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
</span>
<div>
<span ng-show='panel.options'>
<a class="link underline small" ng-show='panel.options' ng-click="options=!options">
......
src/app/panels/histogram/module.js
......@@ -52,6 +52,14 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
module.controller('histogram', function($scope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [
{
title:'Queries',
......
src/app/panels/hits/module.html
<div ng-controller='hits' ng-init="init()">
<span ng-show="panel.spyable" class='spy panelextra pointer'>
<i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
</span>
<div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend -->
<table class="small" ng-show="panel.arrangement == 'vertical'">
......
src/app/panels/hits/module.js
......@@ -28,6 +28,14 @@ define([
module.controller('hits', function($scope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'}
],
......
src/app/panels/map/module.html
......@@ -59,8 +59,5 @@
z-index: 99;
}
</style>
<span ng-show="panel.spyable" class='spy panelextra pointer'>
<i bs-modal="'app/partials/modal.html'" class="icon-eye-open"></i>
</span>
<div class="jvectormap" map params="{{panel}}" style="height:{{panel.height || row.height}}"></div>
</div>
\ No newline at end of file
src/app/panels/map/module.js
......@@ -22,7 +22,7 @@ define([
'config',
'./lib/jquery.jvectormap.min'
],
function (angular, app, _, $, config) {
function (angular, app, _, $) {
'use strict';
var module = angular.module('kibana.panels.map', []);
......@@ -33,6 +33,14 @@ function (angular, app, _, $, config) {
editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'}
],
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
status : "Stable",
description : "Displays a map of shaded regions using a field containing a 2 letter country "+
", or US state, code. Regions with more hit are shaded darker. Node that this does use the"+
......@@ -108,13 +116,7 @@ function (angular, app, _, $, config) {
// I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function(request) {
$scope.modal = {
title: "Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+
'curl -XGET '+config.elasticsearch+'/'+dashboard.indices+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+
"'</pre>",
};
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
};
$scope.build_search = function(field,value) {
......
src/app/panels/pie/module.html
<div ng-controller='pie' ng-init="init()">
<span ng-show='panel.spyable' style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'app/partials/modal.html'" class="icon-eye-open"></i>
</span>
<div ng-show="panel.legend == 'above'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
<span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
</div><br>
......
src/app/panels/pie/module.js
......@@ -23,7 +23,7 @@ define([
'jquery',
'kbn',
'config'
], function (angular, app, _, $, kbn, config) {
], function (angular, app, _, $, kbn) {
'use strict';
var module = angular.module('kibana.panels.pie', []);
......@@ -32,6 +32,17 @@ define([
module.controller('pie', function($scope, $rootScope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = {
editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'}
],
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
status : "Deprecated",
description : "Uses an Elasticsearch terms facet to create a pie chart. You should really only"+
" point this at not_analyzed fields for that reason. This panel is going away soon, it has"+
......@@ -40,9 +51,6 @@ define([
// Set and populate defaults
var _d = {
editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'}
],
query : { field:"_type", goal: 100},
queries : {
mode : 'all',
......@@ -123,7 +131,7 @@ define([
filterSrv.getBoolFilter(filterSrv.ids)
)))).size(0);
$scope.populate_modal(request);
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
results = request.doSearch();
......@@ -148,7 +156,7 @@ define([
.filter(filterSrv.getBoolFilter(filterSrv.ids))
.size(0);
$scope.populate_modal(request);
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
results = request.doSearch();
......@@ -165,17 +173,6 @@ define([
}
};
// I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function(request) {
$scope.modal = {
title: "Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+
'curl -XGET '+config.elasticsearch+'/'+dashboard.indices+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+
"'</pre>",
};
};
});
module.directive('pie', function(querySrv, filterSrv, dashboard) {
......
src/app/panels/table/module.html
......@@ -6,11 +6,6 @@
overflow-x: scroll;
}
</style>
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
</span>
<div class="row-fluid">
<div ng-class="{'span3':panel.field_list}" ng-show="panel.field_list">
<div class="sidebar-nav">
......
src/app/panels/table/module.js
......@@ -35,6 +35,14 @@ function (angular, app, _, kbn, moment) {
module.controller('table', function($rootScope, $scope, fields, querySrv, dashboard, filterSrv) {
$scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [
{
title:'Paging',
......
src/app/panels/terms/module.html
<div ng-controller='terms' ng-init="init()">
<span ng-show="panel.spyable" class='spy panelextra pointer'>
<i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
</span>
<!-- START Pie or bar chart -->
<div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend above -->
......
src/app/panels/terms/module.js
......@@ -25,6 +25,14 @@ function (angular, app, _, $, kbn) {
module.controller('terms', function($scope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'}
],
......
src/app/panels/trends/editor.html
<div>
<div class="row-fluid">
<div class="span12">
The trends panel will give you a percentage representation of how your query
has moved in your current timespan compared a specified amount of time ago. For
example, if the time is 1:10pm, your time picker was set to "Last 10m", and the
"Time Ago" parameter was set to '1h', the panel would show how much the query
results have changed since 12:00-12:10pm
</div>
</div>
<h4>Settings</h4>
<div class="row-fluid">
<div class="span3" ng-hide='panel.auto_int'>
......
src/app/panels/trends/module.js
......@@ -21,7 +21,16 @@ function (angular, app, _, kbn) {
app.useModule(module);
module.controller('trends', function($scope, kbnIndex, querySrv, dashboard, filterSrv) {
$scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'}
],
......@@ -32,7 +41,6 @@ function (angular, app, _, kbn) {
" since 12:00-12:10pm"
};
// Set and populate defaults
var _d = {
queries : {
......@@ -42,6 +50,7 @@ function (angular, app, _, kbn) {
style : { "font-size": '14pt'},
ago : '1d',
arrangement : 'vertical',
spyable: true
};
_.defaults($scope.panel,_d);
......@@ -122,8 +131,8 @@ function (angular, app, _, kbn) {
});
// TODO: Spy for trend panel
//$scope.populate_modal(request);
// Populate the inspector panel
$scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
// If we're on the first segment we need to get our indices
if (_segment === 0) {
......
src/app/partials/panelgeneral.html
......@@ -15,7 +15,7 @@
</div>
<div class="span2" ng-show="!_.isUndefined(panel.spyable)">
<label class="small">
Spyable <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
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>
......
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/overrides.less
......@@ -10,6 +10,8 @@
color: @black;
}
.editor-title {
margin-right: 10px;
font-size: 1.7em;
......@@ -109,14 +111,20 @@
position: absolute;
z-index: 800;
display: none;
opacity: 0.7;
right:15px;
top:-13px;
}
.panel span.panelextra .link {
margin-right: 5px;
}
.panel:hover span.panelextra {
display: block;
opacity: 0.3;
}
.panel span.panelextra:hover {
.panel span.panelextra .editlink:hover {
opacity: 1;
}
......
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