github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

visual improvements and discover-field directive

Browse source
This commit is contained in:
Rashid Khan 2014-04-06 21:43:52 -07:00
parent 069bd24fcc
commit 41293d1acd
12 changed files with 135 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/bower_components/K4D3/src/modules/histogram.js vendored
View file

@ -67,7 +67,7 @@ define(function(require) {
/* *************** D3 parameters ********************* */
xScale = d3.scale.ordinal().domain(keys).rangeRoundBands([0, width], 0.1),
yScale = d3.scale.linear().range([height, 0]).nice(),
xAxis = d3.svg.axis().scale(xScale).ticks(6).tickSize(3, 0).tickPadding(6).orient('bottom'),
xAxis = d3.svg.axis().scale(xScale).tickSize(3, 0).tickPadding(6).tickValues(xScale.domain().filter(function(d, i) { return (i % 5); })).orient('bottom'),
yAxis = d3.svg.axis().scale(yScale).ticks(6).tickSize(-(width), 0).tickPadding(4).orient('left'),
color = d3.scale.linear().domain([0, m - 1]).range(['#e24700', '#f9e593']),
/*
@ -252,7 +252,8 @@ define(function(require) {
/* Update the range of the scale with new width/height */
xScale.rangeRoundBands([0, width], 0.1);
yScale.range([height, 0]).nice();
xAxis.ticks(Math.max(width/50, 2));
xAxis.tickValues(xScale.domain().filter(function(d, i) { return (i % Math.min(width/80, 5)); }));
//xAxis.ticks(Math.max(width/50, 2));
yAxis.ticks(Math.max(height/20, 2)).tickSize(-(width), 0);
if (width < 300 && height < 80) {

17
src/kibana/apps/discover/directives/discover_field.js Normal file
View file

@ -0,0 +1,17 @@
define(function (require) {
var app = require('modules').get('app/discover');
var html = require('text!../partials/discover_field.html');
var _ = require('lodash');
require('directives/css_truncate');
require('directives/field_name');
app.directive('discoverField', function () {
return {
restrict: 'E',
template: html,
replace: true
};
});
});

21
src/kibana/apps/discover/field_chooser.js → src/kibana/apps/discover/directives/field_chooser.js
View file

@ -1,10 +1,12 @@
define(function (require) {
var app = require('modules').get('app/discover');
var html = require('text!./partials/field_chooser.html');
var html = require('text!../partials/field_chooser.html');
var _ = require('lodash');
require('directives/css_truncate');
require('directives/field_name');
require('./discover_field');
app.directive('discFieldChooser', function () {
@ -45,23 +47,6 @@ define(function (require) {
$scope.filterFunc(field.name, value, operation);
};
$scope.typeIcon = function (fieldType) {
switch (fieldType)
{
case 'source':
return 'fa-file-text-o';
case 'string':
return 'fa-sort-alpha-asc';
case 'number':
return 'fa-sort-numeric-asc';
case 'date':
return 'fa-clock-o';
case 'ip':
return 'fa-laptop';
default:
}
};
var getFieldValues = function (data, field) {
return _.map(data, function (row) {
var val;

0
src/kibana/apps/discover/timechart.js → src/kibana/apps/discover/directives/timechart.js
View file

2
src/kibana/apps/discover/index.html
View file

@ -19,7 +19,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-2 discovery-field-container">
<div class="col-md-2 discover-field-container">
<disc-field-chooser
fields="fields"
toggle="toggleField"

4
src/kibana/apps/discover/index.js
View file

@ -1,8 +1,8 @@
define(function (require, module, exports) {
require('directives/table');
require('./field_chooser');
require('./services/saved_searches');
require('./timechart');
require('./directives/timechart');
require('./directives/field_chooser');
require('./controllers/discover');
var app = require('modules').get('app/discover');

37
src/kibana/apps/discover/partials/discover_field.html Normal file
View file

@ -0,0 +1,37 @@
<li class="discover-field-item">
<div ng-click="details(field)" class="discover-field-name">
<span field-name="field.name" field-type="field.type"></span>
</div>
<div class="discover-field-details" ng-if="field.details">
<a ng-click="toggle(field.name)" class="pull-right btn btn-default btn-xs discover-field-toggle">
{{field.display ? 'Hide' : 'Show'}}
</a>
<span bo-if="!field.details.error">Present in {{field.details.exists}}/{{field.details.total}} records</span>
<div class="clearfix"></div>
<div bo-if="field.details.error" class="discover-field-details-error">{{field.details.error}}</div>
<div bo-if="!field.details.error">
<div ng-repeat="bucket in field.details.buckets" class="discover-field-details-item">
<div>
<i class="fa fa-search-minus pull-right discover-field-details-filter"
ng-click="filter(field, bucket.value, '-')"></i>
<i class="fa fa-search-plus pull-right discover-field-details-filter"
ng-click="filter(field, bucket.value, '+')"></i>
<div css-truncate css-truncate-expandable="true" class="discover-field-details-value">
{{bucket.value}}
</div>
</div>
<progressbar value="bucket.percent" max="100" animate="false"><span>{{bucket.percent}}%</span></progressbar>
</div>
</div>
<div>
</li>

63
src/kibana/apps/discover/partials/field_chooser.html
View file

@ -1,68 +1,13 @@
<div class="discover-field-list">
<h5>Selected</h5>
<ul bindonce class="list-unstyled">
<li ng-repeat="field in fields|filter:{display:true}" class="discover-field-item">
<span ng-click="details(field)" class="discover-field-name">
<span field-name="field.name" field-type="field.type"></span>
</span>
<div class="discover-field-details" ng-if="field.details">
<a ng-click="toggle(field.name)" class="btn btn-default btn-xs discover-field-add">
Remove Column
</a>
<div bo-if="field.details.error" class="discover-field-details-error">{{field.details.error}}</div>
<div bo-if="!field.details.error">
<div ng-repeat="bucket in field.details.buckets" class="discover-field-details-item">
<div>
<i class="fa fa-search-minus pull-right discover-field-details-filter"
ng-click="filter(field, bucket.value, '-')"></i>
<i class="fa fa-search-plus pull-right discover-field-details-filter"
ng-click="filter(field, bucket.value, '+')"></i>
<div css-truncate css-truncate-expandable="true" class="discover-field-details-value">
{{bucket.value}}
</div>
</div>
<progressbar value="bucket.percent" max="100" animate="false"><span>{{bucket.percent}}%</span></progressbar>
</div>
</div>
<div>
</li>
<discover-field field="field" ng-repeat="field in fields|filter:{display:true}">
</discover-field>
</ul>
<h5>Available</h5>
<ul bindonce class="list-unstyled">
<li ng-repeat="field in fields|filter:{display:!true}" class="discover-field-item">
<span ng-click="details(field)" class="discover-field-name">
<span field-name="field.name" field-type="field.type"></span>
</span>
<div class="discover-field-details" ng-if="field.details">
<a ng-click="toggle(field.name)" class="btn btn-default btn-xs discover-field-add">
Add Column
</a>
<div bo-if="field.details.error" class="discover-field-details-error">{{field.details.error}}</div>
<div bo-if="!field.details.error">
<div ng-repeat="bucket in field.details.buckets" class="discover-field-details-item">
<div>
<i class="fa fa-search-minus pull-right discover-field-details-filter"
ng-click="filter(field, bucket.value, '-')"></i>
<i class="fa fa-search-plus pull-right discover-field-details-filter"
ng-click="filter(field, bucket.value, '+')"></i>
<div css-truncate css-truncate-expandable="true" class="discover-field-details-value">
{{bucket.value}}
</div>
</div>
<progressbar value="bucket.percent" max="100" animate="false"><span>{{bucket.percent}}%</span></progressbar>
</div>
</div>
<div>
</li>
<discover-field field="field" ng-repeat="field in fields|filter:{display:false}">
</discover-field>
</ul>
</div>

29
src/kibana/apps/discover/styles/main.css
View file

@ -78,21 +78,36 @@
padding-left: 0px !important;
padding-right: 0px !important;
}
.discover-field-container {
padding-left: 0px !important;
padding-right: 0px !important;
background-color: #f5f5f5;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}
.discover-field-list h5 {
padding-left: 5px;
}
.discover-field-list .discover-field-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
border-top: 1px solid #e3e3e3;
}
.discover-field-list .discover-field-item [field-name]:hover {
color: #428bca;
.discover-field-list .discover-field-name {
padding: 5px 10px;
}
.discover-field-list .discover-field-name:hover,
.discover-field-list .discover-field-name:hover .text-muted {
background-color: #428bca;
color: #ffffff;
}
.discover-field-list .discover-field-details {
padding: 5px;
background-color: #f5f5f5;
border-radius: 4px;
border: 1px solid #dddddd;
margin-bottom: 5px;
border-top: 1px solid #e3e3e3;
padding: 5px 10px;
background-color: #ffffff;
color: #333333;
}
.discover-field-list .discover-field-details .discover-field-details-error {
margin-top: 5px;

31
src/kibana/apps/discover/styles/main.less
View file

@ -14,25 +14,42 @@
padding-right: 0px !important;
}
.discover-field-container {
padding-left: 0px !important;
padding-right: 0px !important;
background-color: @well-bg;
border-right: 1px solid @well-border;
border-bottom: 1px solid @well-border;
}
.discover-field-list {
h5 {
padding-left: 5px;
}
.discover-field-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: @font-size-smaller;
border-top: 1px solid @well-border;
}
.discover-field-item [field-name]:hover {
color: @link-color;
.discover-field-name {
padding: 5px 10px;
}
.discover-field-name:hover, .discover-field-name:hover .text-muted {
background-color: @component-active-bg;
color: @component-active-color;
}
.discover-field-details {
padding: 5px;
background-color: @well-bg;
border-radius: @border-radius-base;
border: 1px solid @table-border-color;
margin-bottom: 5px;
border-top: 1px solid @well-border;
padding: 5px 10px;
background-color: @body-bg;
color: @text-color;
.discover-field-details-error {
margin-top: 5px;

29
src/kibana/styles/main.css
View file

@ -6704,21 +6704,36 @@ kbn-table tr.even td {
padding-left: 0px !important;
padding-right: 0px !important;
}
.discover-field-container {
padding-left: 0px !important;
padding-right: 0px !important;
background-color: #f5f5f5;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
}
.discover-field-list h5 {
padding-left: 5px;
}
.discover-field-list .discover-field-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
border-top: 1px solid #e3e3e3;
}
.discover-field-list .discover-field-item [field-name]:hover {
color: #428bca;
.discover-field-list .discover-field-name {
padding: 5px 10px;
}
.discover-field-list .discover-field-name:hover,
.discover-field-list .discover-field-name:hover .text-muted {
background-color: #428bca;
color: #ffffff;
}
.discover-field-list .discover-field-details {
padding: 5px;
background-color: #f5f5f5;
border-radius: 4px;
border: 1px solid #dddddd;
margin-bottom: 5px;
border-top: 1px solid #e3e3e3;
padding: 5px 10px;
background-color: #ffffff;
color: #333333;
}
.discover-field-list .discover-field-details .discover-field-details-error {
margin-top: 5px;

1
src/kibana/styles/theme/_theme.less
View file

@ -1 +0,0 @@