Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HITS panel : new features, new design #153

Closed
wants to merge 9 commits into from
Closed

HITS panel : new features, new design #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
52185b6
add possibility to hide a row
jsm-oxa Jun 5, 2013
e546d5e
add possibility to hide a row
jsm-oxa Jun 5, 2013
281e37a
issue:display exclude terms in pie panel
Jun 19, 2013
05cb9d4
Revert "issue:display exclude terms in pie panel"
Jun 19, 2013
a0f6a95
Merge branch 'master' of https://github.com/elasticsearch/kibana
Jun 19, 2013
8f93bd8
Merge branch 'master' of https://github.com/elasticsearch/kibana
Jun 24, 2013
26ad95b
fix label display in pie editor
Jun 24, 2013
6887c4f
Merge branch 'hide-row'
Jun 24, 2013
268c643
hits-design-percent
Jun 24, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 55 additions & 11 deletions panels/hits/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,49 @@
<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>
<div class="span1" ng-show='panel.chart == "list"'>
<label class="small">Percent</label><input type="checkbox" ng-model="panel.percent" ng-checked="panel.percent">
</div>
<div class="span1" ng-show='panel.chart == "list"'>
<label class="small">Count</label><input type="checkbox" ng-model="panel.count" ng-checked="panel.count">
</div>
<div class="span1" ng-show='panel.chart == "list"'>
<label class="small">Alerts</label><input type="checkbox" ng-model="panel.alerts" ng-checked="panel.alerts">
</div>
</div>
<h5>Queries</h5>
<div class="row-fluid">
<div class="span3">
<form style="margin-bottom: 0px">
<label class="small">Label</label>
<label class="small">Label</label>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the label here be inside the form? This same issue shows up a number of places.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi,

When the label is inside the form, it is not displayed...I'm the only one who has this problem ?

<form style="margin-bottom: 25px">
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<label class="small">Query</label>
<input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
<button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery='';set_refresh(true)"><i class="icon-plus"></i></button>
<div class="span5">
<label class="small">Query</label>
<form class="input-append" ng-hide="panel.alerts" style="margin-bottom: 0px">
<input type="text" placeholder="New Query" ng-model="newquery">
<button class="btn" ng-click="add_query(newlabel,newquery,warnTH,critTH);newlabel='';newquery='';warnTH=undefined;critTH=undefined;set_refresh(true)"><i class="icon-plus"></i></button>
</form>
<form ng-show="panel.alerts" style="margin-bottom: 0px">
<input type="text" placeholder="New Query" ng-model="newquery">
</form>
</div>
<div ng-show="panel.alerts">
<div class="span2">
<label class="small">Warning</label>
<form style="margin-bottom: 5px">
<input type="number" min="0" max="100" step="any" placeholder="100" style="width: 50px" ng-model="warnTH">
</form>
</div>
<div class="span2" style="margin-left: 0px">
<label class="small">Critical</label>
<form class="input-append" style="margin-bottom: 5px">
<input type="number" min="0" max="100" step="any" placeholder="100" style="width: 50px" ng-model="critTH">
<button class="btn" ng-click="add_query(newlabel,newquery,warnTH,critTH);newlabel='';newquery='';warnTH=undefined;critTH=undefined;set_refresh(true)"><i class="icon-plus"></i></button>
</form>
</div>
</div>
<div class="span1">
</div>
</div>
Expand All @@ -50,13 +77,30 @@ <h5>Queries</h5>
<input type="text" style="width:70%" ng-model="q.label" ng-change="set_refresh(true)">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query" ng-change="set_refresh(true)">
<div class="span5">
<form class="input-append" ng-hide="panel.alerts" style="margin-bottom: 0px">
<input type="text" ng-model="q.query" ng-change="set_refresh(true)">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
<form ng-show="panel.alerts" style="margin-bottom: 0px">
<input type="text" ng-model="q.query" ng-change="set_refresh(true)">
</form>
</div>
<div class="span1">
<div ng-show="panel.alerts">
<div class="span2">
<form style="margin-bottom: 0px">
<input type="number" min="0" max="100" step="any" style="width: 50px" ng-model="q.warnTH" ng-change="set_refresh(true)">
</form>
</div>
<div class="span2" style="margin-left: 0px">
<form class="input-append" style="margin-bottom: 0px">
<input type="number" min="0" max="100" step="any" style="width: 50px" ng-model="q.critTH" ng-change="set_refresh(true)">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
<span style="margin-left: 20px;"><i class="icon-remove pointer" ng-click="remove_query(q)"></i></span>
</div>
<div ng-hide="panel.alerts" class="span1" style="margin-left: 0px;">
<i class="icon-remove pointer" ng-click="remove_query(q)"></i>
</div>
</div>
Expand Down
29 changes: 27 additions & 2 deletions panels/hits/module.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,31 @@

<div ng-show="panel.chart == 'total'"><div ng-style="panel.style" style="line-height:{{panel.style['font-size']}}">{{hits}}</div></div>

<span ng-show="panel.chart == 'list'"><span ng-style="panel.style" style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">{{query.label}} ({{query.hits}})<span></span><br ng-show="panel.arrangement == 'vertical' && panel.chart == 'list'">
<!-- vertical legend -->
<div ng-show="panel.arrangement == 'vertical'">
<div ng-show="panel.alerts">
<table class="table table-condensed table-bordered" ng-show="panel.chart == 'list'" width="100%" style="line-height:{{panel.style['font-size']}}" ng-style="panel.style">
<tr ng-repeat="query in data" style="{{ ( (((100*query.data[0][1])/hits)| number:2) >= query.data[0][3] ) && ('background-color:rgb(185,74,72);') || ( (((100*query.data[0][1])/hits)| number:2) >= query.data[0][2] && ('background-color:rgb(211,129,37);') || ('background-color:rgb(70,136,71);') )}}">
<td width="100%">{{query.label}}</td><td ng-show="panel.percent">{{((100*query.data[0][1])/hits)| number:2}}%</td><td ng-show="panel.count">{{query.data[0][1]}}</td>
</tr>
</table>
</div>
<div ng-hide="panel.alerts">
<table class="table table-condensed table-bordered table-striped" ng-show="panel.chart == 'list'" width="100%" style="line-height:{{panel.style['font-size']}}" ng-style="panel.style">
<tr ng-repeat="query in data">
<td width="100%">{{query.label}}</td><td ng-show="panel.percent">{{((100*query.data[0][1])/hits)| number:2}}%</td><td ng-show="panel.count">{{query.data[0][1]}}</td>
</tr>
</table>
</div>
</div>

<!-- horizontal legend -->
<span ng-show="panel.arrangement == 'horizontal' && panel.chart == 'list'">
<span ng-style="panel.style" style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">
<span>{{query.label}}:</span>
<span ng-show="panel.percent">{{((100*query.data[0][1])/hits)| number:2}}%</span>
<span ng-show="panel.percent && panel.count">(</span><span ng-show="panel.count">{{query.hits}}</span><span ng-show="panel.percent && panel.count">)</span>
</span>
</span>

</kibana-panel>
</kibana-panel>
13 changes: 9 additions & 4 deletions panels/hits/module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,15 +116,14 @@ angular.module('kibana.hits', [])
$scope.data[i] = {
label: $scope.panel.query[i].label || "query"+(parseInt(i)+1),
hits: hits,
data: [[i,hits]]
data: [[i,hits,($scope.panel.query[i].warnTH || ($scope.panel.query[i].warnTH=100)),($scope.panel.query[i].critTH || ($scope.panel.query[i].critTH=100))]]
};

i++;
});
$scope.$emit('render');
if(_segment < $scope.index.length-1)
$scope.get_data(_segment+1,query_id)

$scope.get_data(_segment+1,query_id)
}
});
}
Expand All @@ -134,11 +133,17 @@ angular.module('kibana.hits', [])
$scope.get_data();
}

$scope.add_query = function(label,query) {
$scope.add_query = function(label,query,warnTH,critTH) {
warnTH = _.isUndefined(warnTH) ? 100 : warnTH
critTH = _.isUndefined(critTH) ? 100 : critTH

$scope.panel.query.unshift({
query: query,
label: label,
warnTH: warnTH,
critTH: critTH,
});

$scope.get_data();
}

Expand Down
2 changes: 1 addition & 1 deletion panels/pie/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
<input type="number" style="width:80%" ng-model="panel.size" ng-change="get_data()">
</div>
<div class="span8">
<label class="small">Exclude Terms(s) (comma seperated)</label>
<form class="input-append" style="margin-bottom: 0px">
<label class="small">Exclude Terms(s) (comma seperated)</label>
<input array-join type="text" style="width:90%" ng-model='panel.exclude'></input>
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
Expand Down
5 changes: 2 additions & 3 deletions partials/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@

<div class="row-fluid container" style="margin-top:10px">
<!-- Rows -->
<div ng-controller="dashcontrol" ng-init="init()"></div>
<div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboards.rows" ng-style="row_style(row)">
<div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboards.rows" ng-style="row_style(row)" ng-hide="row.hide">
<div class="row-control">
<div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
<div style="vertical-align:bottom">
Expand Down Expand Up @@ -33,4 +32,4 @@
</div>
</div>
</div>
</div>
</div>
5 changes: 4 additions & 1 deletion partials/dasheditor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,15 @@ <h4>Rows</h4>
<th>Title</th>
<th>Delete</th>
<th>Move</th>
<th></th>
<th>Hide</th>
</thead>
<tr ng-repeat="row in dashboards.rows">
<td>{{row.title}}</td>
<td><i ng-click="dashboards.rows = _.without(dashboards.rows,row)" class="pointer icon-remove"></i></td>
<td><i ng-click="_.move(dashboards.rows,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(dashboards.rows,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
<td><input type="checkbox" ng-model="row.hide" ng-checked="row.hide"></td>
</tr>
</table>
</div>
Expand All @@ -50,4 +53,4 @@ <h4>New row</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();">Close</button>
</div>
</div>