mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
added terms facet button to table micropanel
This commit is contained in:
parent
1fba324e97
commit
cf29ef2d04
@ -20,6 +20,7 @@ function ($) {
|
||||
'font-weight' : 200,
|
||||
'background-color': '#1f1f1f',
|
||||
'border-radius': '5px',
|
||||
'z-index': 9999
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -1,12 +1,19 @@
|
||||
define([
|
||||
'angular'
|
||||
'angular',
|
||||
'underscore'
|
||||
],
|
||||
function (angular) {
|
||||
function (angular, _) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('kibana.directives')
|
||||
.directive('kibanaSimplePanel', function($compile) {
|
||||
var panelLoading = '<span ng-show="panelMeta.loading == true">' +
|
||||
'<span style="font-size:72px;font-weight:200">'+
|
||||
'<i class="icon-spinner icon-spin"></i> loading ...' +
|
||||
'</span>'+
|
||||
'</span>';
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
link: function($scope, elem, attr) {
|
||||
@ -22,10 +29,10 @@ function (angular) {
|
||||
elem.removeClass("ng-cloak");
|
||||
}
|
||||
|
||||
$scope.$watch(attr.type, function (name) {
|
||||
function loadController(name) {
|
||||
elem.addClass("ng-cloak");
|
||||
|
||||
// load the panels module file, then render it in the dom.
|
||||
|
||||
$scope.require([
|
||||
'jquery',
|
||||
'text!panels/'+name+'/module.html'
|
||||
@ -37,6 +44,7 @@ function (angular) {
|
||||
$controllers = $controllers.add($module.find('ngcontroller, [ng-controller], .ng-controller'));
|
||||
|
||||
if ($controllers.length) {
|
||||
$controllers.first().prepend(panelLoading);
|
||||
$scope.require([
|
||||
'panels/'+name+'/module'
|
||||
], function() {
|
||||
@ -46,6 +54,19 @@ function (angular) {
|
||||
loadModule($module);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$scope.$watch(attr.type, function (name) {
|
||||
loadController(name);
|
||||
});
|
||||
|
||||
$scope.$watch(attr.panel, function (panel) {
|
||||
// If the panel attribute is specified, create a new scope. This ruins configuration
|
||||
// so don't do it with anything that needs to use editor.html
|
||||
if(!_.isUndefined(panel)) {
|
||||
$scope = $scope.$new();
|
||||
$scope.panel = angular.fromJson(panel);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
@ -41,4 +41,12 @@
|
||||
<div class="progress" ng-show="micropanel.grouped">
|
||||
<div ng-repeat='field in micropanel.values' bs-tooltip="field[0]+' ('+percent(field[1],data.length)+')'" class="bar {{micropanelColor($index)}}" ng-style="{width: percent(field[1],data.length)};"></div>
|
||||
</div>
|
||||
<span ng-repeat='(field,count) in micropanel.related track by $index'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span>
|
||||
<div>
|
||||
<span ng-repeat='(field,count) in micropanel.related track by $index'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<h5>Facets</h5>
|
||||
<button class="btn" ng-click="termsModal(field);dismiss();"><i class="icon-list-ol"></i> Terms</button>
|
||||
</div>
|
||||
</div>
|
45
src/app/panels/table/modal.html
Normal file
45
src/app/panels/table/modal.html
Normal file
@ -0,0 +1,45 @@
|
||||
<div class="modal-body">
|
||||
<style>
|
||||
.timepicker-to-column {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.timepicker-input input {
|
||||
outline: 0 !important;
|
||||
border: 0px !important;
|
||||
-webkit-box-shadow: 0;
|
||||
-moz-box-shadow: 0;
|
||||
box-shadow: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timepicker-input input::-webkit-outer-spin-button,
|
||||
.timepicker-input input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input.timepicker-date {
|
||||
width: 90px;
|
||||
}
|
||||
input.timepicker-hms {
|
||||
width: 20px;
|
||||
}
|
||||
input.timepicker-ms {
|
||||
width: 25px;
|
||||
}
|
||||
div.timepicker-now {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
<h4>Top 10 terms in field {{modalField}}</h4>
|
||||
<div>
|
||||
<kibana-simple-panel ng-click="dismiss();" type="'{{facetType}}'" panel='{{facetPanel}}' ng-cloak></kibana-simple-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<form name="input" style="margin-bottom:0">
|
||||
<button ng-click="dismiss();" class="btn btn-danger">Close</button>
|
||||
</form>
|
||||
</div>
|
@ -13,7 +13,7 @@
|
||||
<ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;">
|
||||
<li ng-style="panel.style" ng-repeat="field in fields.list" >
|
||||
<i class="pointer" ng-class="{'icon-check': _.contains(panel.fields,field),'icon-check-empty': !_.contains(panel.fields,field)}" ng-click="toggle_field(field)"></i>
|
||||
<a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="right" ng-click="toggle_micropanel(field,true)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
|
||||
<a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
@ -33,7 +33,7 @@ function (angular, app, _, kbn, moment) {
|
||||
var module = angular.module('kibana.panels.table', []);
|
||||
app.useModule(module);
|
||||
|
||||
module.controller('table', function($rootScope, $scope, fields, querySrv, dashboard, filterSrv) {
|
||||
module.controller('table', function($rootScope, $scope, $modal, $q, $compile, fields, querySrv, dashboard, filterSrv) {
|
||||
$scope.panelMeta = {
|
||||
modals : [
|
||||
{
|
||||
@ -93,8 +93,42 @@ function (angular, app, _, kbn, moment) {
|
||||
$scope.get_data();
|
||||
};
|
||||
|
||||
// Create a percent function for the view
|
||||
$scope.percent = kbn.to_percent;
|
||||
|
||||
$scope.termsModal = function(field) {
|
||||
$scope.modalField = field;
|
||||
showModal(
|
||||
'{"height":"200px","chart":"bar","field":"'+field+'"}','terms');
|
||||
};
|
||||
|
||||
$scope.statsModal = function(field) {
|
||||
$scope.modalField = field;
|
||||
showModal(
|
||||
'{"field":"'+field+'"}','statistics');
|
||||
};
|
||||
|
||||
var showModal = function(panel,type) {
|
||||
|
||||
$scope.facetPanel = panel;
|
||||
$scope.facetType = type;
|
||||
|
||||
// create a new modal. Can't reuse one modal unforunately as the directive will not
|
||||
// re-render on show.
|
||||
var panelModal = $modal({
|
||||
template: './app/panels/table/modal.html',
|
||||
persist: true,
|
||||
show: false,
|
||||
scope: $scope,
|
||||
keyboard: false
|
||||
});
|
||||
|
||||
// and show it
|
||||
$q.when(panelModal).then(function(modalEl) {
|
||||
modalEl.modal('show');
|
||||
});
|
||||
};
|
||||
|
||||
$scope.toggle_micropanel = function(field,groups) {
|
||||
var docs = _.map($scope.data,function(_d){return _d.kibana._source;});
|
||||
var topFieldValues = kbn.top_field_values(docs,field,10,groups);
|
||||
|
@ -4,7 +4,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<li ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable"><kibana-simple-panel type="pulldown.type" panel="pulldown" ng-cloak></kibana-simple-panel></li>
|
||||
<li ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable"><kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel></li>
|
||||
|
||||
<li><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/dashboard'><i class='icon-home'></i></a></li>
|
||||
<li class="dropdown" bs-tooltip="'Load'" data-placement="bottom" ng-show="showDropdown('load')" >
|
||||
|
Loading…
Reference in New Issue
Block a user