Commit cc69a90f by Rashid Khan

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
...@@ -10,9 +10,24 @@ function (angular) { ...@@ -10,9 +10,24 @@ function (angular) {
var editorTemplate = var editorTemplate =
'<i class="icon-spinner small icon-spin icon-large panel-loading"' + '<i class="icon-spinner small icon-spin icon-large panel-loading"' +
'ng-show="panelMeta.loading == true && !panel.title"></i>' + '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">' + // Editor link
'<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i></span>' + '<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">' + '<h4 ng-show="panel.title">' +
'{{panel.title}}' + '{{panel.title}}' +
'<i class="icon-spinner smaller icon-spin icon-large"' + '<i class="icon-spinner smaller icon-spin icon-large"' +
......
<div ng-controller='bettermap' ng-init="init()"> <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 --> <!-- 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 style="padding-right:10px;padding-top:10px;height:{{panel.height|| row.height}};overflow:hidden">
<div bettermap id='bettermap' params="{{panel}}" style="height:100%"></div> <div bettermap id='bettermap' params="{{panel}}" style="height:100%"></div>
......
...@@ -32,6 +32,14 @@ function (angular, app, _, L, localRequire) { ...@@ -32,6 +32,14 @@ function (angular, app, _, L, localRequire) {
src: 'app/partials/querySelect.html' src: 'app/partials/querySelect.html'
} }
], ],
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
status : "Experimental", status : "Experimental",
description : "Displays geo points in clustered groups on a map. The cavaet for this panel is"+ 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 "+ " that, for better or worse, it does NOT use the terms facet and it <b>does</b> query "+
......
...@@ -17,10 +17,6 @@ ...@@ -17,10 +17,6 @@
box-sizing: border-box; /* Opera/IE 8+ */ box-sizing: border-box; /* Opera/IE 8+ */
} }
</style> </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 <label class="small">Create new queries from
<span class="panel-derive-field" ng-show="!editing" ng-click="editing=true">{{panel.field}}</span> <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> <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>
......
...@@ -24,6 +24,14 @@ function (angular, app, _) { ...@@ -24,6 +24,14 @@ function (angular, app, _) {
module.controller('derivequeries', function($scope, $rootScope, querySrv, fields, dashboard, filterSrv) { module.controller('derivequeries', function($scope, $rootScope, querySrv, fields, dashboard, filterSrv) {
$scope.panelMeta = { $scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
status : "Experimental", status : "Experimental",
description : "Creates a new set of queries using the Elasticsearch terms facet. For example,"+ 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 "+ " you might want to create 5 queries showing the most frequent HTTP response codes. Be "+
......
...@@ -25,9 +25,6 @@ ...@@ -25,9 +25,6 @@
margin: 0px 0px 0px 10px !important; margin: 0px 0px 0px 10px !important;
} }
</style> </style>
<span ng-show="panel.spyable" class='spy panelextra pointer'>
<i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
</span>
<div> <div>
<span ng-show='panel.options'> <span ng-show='panel.options'>
<a class="link underline small" ng-show='panel.options' ng-click="options=!options"> <a class="link underline small" ng-show='panel.options' ng-click="options=!options">
......
...@@ -52,6 +52,14 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -52,6 +52,14 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
module.controller('histogram', function($scope, querySrv, dashboard, filterSrv) { module.controller('histogram', function($scope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = { $scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [ editorTabs : [
{ {
title:'Queries', title:'Queries',
......
<div ng-controller='hits' ng-init="init()"> <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'> <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend --> <!-- vertical legend -->
<table class="small" ng-show="panel.arrangement == 'vertical'"> <table class="small" ng-show="panel.arrangement == 'vertical'">
......
...@@ -28,6 +28,14 @@ define([ ...@@ -28,6 +28,14 @@ define([
module.controller('hits', function($scope, querySrv, dashboard, filterSrv) { module.controller('hits', function($scope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = { $scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [ editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'} {title:'Queries', src:'app/partials/querySelect.html'}
], ],
......
...@@ -59,8 +59,5 @@ ...@@ -59,8 +59,5 @@
z-index: 99; z-index: 99;
} }
</style> </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 class="jvectormap" map params="{{panel}}" style="height:{{panel.height || row.height}}"></div>
</div> </div>
\ No newline at end of file
...@@ -22,7 +22,7 @@ define([ ...@@ -22,7 +22,7 @@ define([
'config', 'config',
'./lib/jquery.jvectormap.min' './lib/jquery.jvectormap.min'
], ],
function (angular, app, _, $, config) { function (angular, app, _, $) {
'use strict'; 'use strict';
var module = angular.module('kibana.panels.map', []); var module = angular.module('kibana.panels.map', []);
...@@ -33,6 +33,14 @@ function (angular, app, _, $, config) { ...@@ -33,6 +33,14 @@ function (angular, app, _, $, config) {
editorTabs : [ editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'} {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", status : "Stable",
description : "Displays a map of shaded regions using a field containing a 2 letter country "+ 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"+ ", 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) { ...@@ -108,13 +116,7 @@ function (angular, app, _, $, config) {
// I really don't like this function, too much dom manip. Break out into directive? // I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function(request) { $scope.populate_modal = function(request) {
$scope.modal = { $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
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.build_search = function(field,value) { $scope.build_search = function(field,value) {
......
<div ng-controller='pie' ng-init="init()"> <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;"> <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> <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> </div><br>
......
...@@ -23,7 +23,7 @@ define([ ...@@ -23,7 +23,7 @@ define([
'jquery', 'jquery',
'kbn', 'kbn',
'config' 'config'
], function (angular, app, _, $, kbn, config) { ], function (angular, app, _, $, kbn) {
'use strict'; 'use strict';
var module = angular.module('kibana.panels.pie', []); var module = angular.module('kibana.panels.pie', []);
...@@ -32,6 +32,17 @@ define([ ...@@ -32,6 +32,17 @@ define([
module.controller('pie', function($scope, $rootScope, querySrv, dashboard, filterSrv) { module.controller('pie', function($scope, $rootScope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = { $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", status : "Deprecated",
description : "Uses an Elasticsearch terms facet to create a pie chart. You should really only"+ 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"+ " point this at not_analyzed fields for that reason. This panel is going away soon, it has"+
...@@ -40,9 +51,6 @@ define([ ...@@ -40,9 +51,6 @@ define([
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'}
],
query : { field:"_type", goal: 100}, query : { field:"_type", goal: 100},
queries : { queries : {
mode : 'all', mode : 'all',
...@@ -123,7 +131,7 @@ define([ ...@@ -123,7 +131,7 @@ define([
filterSrv.getBoolFilter(filterSrv.ids) filterSrv.getBoolFilter(filterSrv.ids)
)))).size(0); )))).size(0);
$scope.populate_modal(request); $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
results = request.doSearch(); results = request.doSearch();
...@@ -148,7 +156,7 @@ define([ ...@@ -148,7 +156,7 @@ define([
.filter(filterSrv.getBoolFilter(filterSrv.ids)) .filter(filterSrv.getBoolFilter(filterSrv.ids))
.size(0); .size(0);
$scope.populate_modal(request); $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
results = request.doSearch(); results = request.doSearch();
...@@ -165,17 +173,6 @@ define([ ...@@ -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) { module.directive('pie', function(querySrv, filterSrv, dashboard) {
......
...@@ -6,11 +6,6 @@ ...@@ -6,11 +6,6 @@
overflow-x: scroll; overflow-x: scroll;
} }
</style> </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 class="row-fluid">
<div ng-class="{'span3':panel.field_list}" ng-show="panel.field_list"> <div ng-class="{'span3':panel.field_list}" ng-show="panel.field_list">
<div class="sidebar-nav"> <div class="sidebar-nav">
......
...@@ -35,6 +35,14 @@ function (angular, app, _, kbn, moment) { ...@@ -35,6 +35,14 @@ function (angular, app, _, kbn, moment) {
module.controller('table', function($rootScope, $scope, fields, querySrv, dashboard, filterSrv) { module.controller('table', function($rootScope, $scope, fields, querySrv, dashboard, filterSrv) {
$scope.panelMeta = { $scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [ editorTabs : [
{ {
title:'Paging', title:'Paging',
......
<div ng-controller='terms' ng-init="init()"> <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 --> <!-- START Pie or bar chart -->
<div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'> <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend above --> <!-- vertical legend above -->
......
...@@ -25,6 +25,14 @@ function (angular, app, _, $, kbn) { ...@@ -25,6 +25,14 @@ function (angular, app, _, $, kbn) {
module.controller('terms', function($scope, querySrv, dashboard, filterSrv) { module.controller('terms', function($scope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = { $scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [ editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'} {title:'Queries', src:'app/partials/querySelect.html'}
], ],
......
<div> <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> <h4>Settings</h4>
<div class="row-fluid"> <div class="row-fluid">
<div class="span3" ng-hide='panel.auto_int'> <div class="span3" ng-hide='panel.auto_int'>
<label class="small">Use Elasticsearch date math format here (eg 1m, 5m, 1d, 2w, 1y)</label> <label class="small">Use Elasticsearch date math format here (eg 1m, 5m, 1d, 2w, 1y)</label>
</div> </div>
<div class="span3"> <div class="span3">
...@@ -18,11 +9,11 @@ ...@@ -18,11 +9,11 @@
<input type="text" class="input-small" ng-model="panel.ago" ng-change="set_refresh(true)"> <input type="text" class="input-small" ng-model="panel.ago" ng-change="set_refresh(true)">
</div> </div>
<div class="span2"> <div class="span2">
<label class="small">Font Size</label> <label class="small">Font Size</label>
<select class="input-small" 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> <select class="input-small" 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>
<div class="span3"> <div class="span3">
<label class="small" >List Format</label> <label class="small" >List Format</label>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span> <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
</div> </div>
</div> </div>
......
...@@ -21,7 +21,16 @@ function (angular, app, _, kbn) { ...@@ -21,7 +21,16 @@ function (angular, app, _, kbn) {
app.useModule(module); app.useModule(module);
module.controller('trends', function($scope, kbnIndex, querySrv, dashboard, filterSrv) { module.controller('trends', function($scope, kbnIndex, querySrv, dashboard, filterSrv) {
$scope.panelMeta = { $scope.panelMeta = {
modals : [
{
description: "Inspect",
icon: "icon-info-sign",
partial: "app/partials/inspector.html",
show: $scope.panel.spyable
}
],
editorTabs : [ editorTabs : [
{title:'Queries', src:'app/partials/querySelect.html'} {title:'Queries', src:'app/partials/querySelect.html'}
], ],
...@@ -32,7 +41,6 @@ function (angular, app, _, kbn) { ...@@ -32,7 +41,6 @@ function (angular, app, _, kbn) {
" since 12:00-12:10pm" " since 12:00-12:10pm"
}; };
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
queries : { queries : {
...@@ -42,6 +50,7 @@ function (angular, app, _, kbn) { ...@@ -42,6 +50,7 @@ function (angular, app, _, kbn) {
style : { "font-size": '14pt'}, style : { "font-size": '14pt'},
ago : '1d', ago : '1d',
arrangement : 'vertical', arrangement : 'vertical',
spyable: true
}; };
_.defaults($scope.panel,_d); _.defaults($scope.panel,_d);
...@@ -122,8 +131,8 @@ function (angular, app, _, kbn) { ...@@ -122,8 +131,8 @@ function (angular, app, _, kbn) {
}); });
// TODO: Spy for trend panel // Populate the inspector panel
//$scope.populate_modal(request); $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
// If we're on the first segment we need to get our indices // If we're on the first segment we need to get our indices
if (_segment === 0) { if (_segment === 0) {
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="modal-body"> <div class="modal-body">
<div ng-bind-html='modal.body'></div> <div ng-bind-html='modal.body'></div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-danger" ng-click="dismiss()">Close</button> <button type="button" class="btn btn-danger" ng-click="dismiss()">Close</button>
......
...@@ -10,12 +10,12 @@ ...@@ -10,12 +10,12 @@
<div class="span2" ng-hide="panel.sizeable == false"> <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> <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>
<div class="span2"> <div class="span2">
<label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable"> <label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
</div> </div>
<div class="span2" ng-show="!_.isUndefined(panel.spyable)"> <div class="span2" ng-show="!_.isUndefined(panel.spyable)">
<label class="small"> <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> </label>
<input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable"> <input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div> </div>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
color: @black; color: @black;
} }
.editor-title { .editor-title {
margin-right: 10px; margin-right: 10px;
font-size: 1.7em; font-size: 1.7em;
...@@ -109,14 +111,20 @@ ...@@ -109,14 +111,20 @@
position: absolute; position: absolute;
z-index: 800; z-index: 800;
display: none; display: none;
opacity: 0.7;
right:15px;
top:-13px;
}
.panel span.panelextra .link {
margin-right: 5px;
} }
.panel:hover span.panelextra { .panel:hover span.panelextra {
display: block; display: block;
opacity: 0.3;
} }
.panel span.panelextra:hover { .panel span.panelextra .editlink:hover {
opacity: 1; 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