Skip to content

Commit

Permalink
Add remove button to table header
Browse files Browse the repository at this point in the history
  • Loading branch information
Rashid Khan committed Apr 7, 2015
1 parent 30cb1aa commit f1687ac
Show file tree
Hide file tree
Showing 10 changed files with 56 additions and 57 deletions.
9 changes: 5 additions & 4 deletions src/kibana/components/doc_table/components/table_header.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
<span ng-click="sort(indexPattern.timeFieldName)" tooltip="Sort by time">Time <i ng-class="headerClass(indexPattern.timeFieldName)"></i></span>
</th>
<th ng-repeat="name in columns">
<span ng-click="sort(name)" class="table-header-name" tooltip="{{tooltip(name)}}">
{{name | shortDots}} <i ng-class="headerClass(name)"></i>
<span class="table-header-name">
{{name | shortDots}} <i ng-class="headerClass(name)" ng-click="sort(name)" tooltip="{{tooltip(name)}}" tooltip-append-to-body="1"></i>
</span>
<span class="table-header-move">
<i ng-click="moveLeft(name)" class="fa fa-angle-double-left" ng-show="!$first" tooltip="Move column to the left"></i>
<i ng-click="moveRight(name)" class="fa fa-angle-double-right" ng-show="!$last" tooltip="Move column to the right"></i>
<i ng-click="toggleColumn(name)" ng-show="canRemove(name)" class="fa fa-remove" tooltip="Remove column" tooltip-append-to-body="1"></i>
<i ng-click="moveLeft(name)" class="fa fa-angle-double-left" ng-show="!$first" tooltip="Move column to the left" tooltip-append-to-body="1"></i>
<i ng-click="moveRight(name)" class="fa fa-angle-double-right" ng-show="!$last" tooltip="Move column to the right" tooltip-append-to-body="1"></i>
</span>
</th>
11 changes: 10 additions & 1 deletion src/kibana/components/doc_table/components/table_header.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,18 @@ define(function (require) {

var sortableField = function (field) {
if (!$scope.indexPattern) return;
return $scope.indexPattern.fields.byName[field].sortable;
var sortable = _.deepGet($scope.indexPattern.fields.byName[field], 'sortable');
return sortable;
};

$scope.tooltip = function (column) {
if (!sortableField(column)) return ''; else return 'Sort by ' + shortDotsFilter(column);
};

$scope.canRemove = function (name) {
return (name !== '_source' || $scope.columns.length !== 1);
};

$scope.headerClass = function (column) {
if (!sortableField(column)) return;

Expand All @@ -49,6 +54,10 @@ define(function (require) {
_.move($scope.columns, index, ++index);
};

$scope.toggleColumn = function (fieldName) {
_.toggleInOut($scope.columns, fieldName);
};

$scope.sort = function (column) {
if (!column || !sortableField(column)) return;

Expand Down
6 changes: 3 additions & 3 deletions src/kibana/components/doc_table/doc_table.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@ define(function (require) {
};

$scope.$watchCollection('columns', function (columns, oldColumns) {
if (oldColumns.length === 1 && oldColumns[0] === '_source' && columns.length > 1) {
_.pull(columns, '_source');
if (oldColumns.length === 1 && oldColumns[0] === '_source' && $scope.columns.length > 1) {
_.pull($scope.columns, '_source');
}

if (columns.length === 0) columns.push('_source');
if ($scope.columns.length === 0) $scope.columns.push('_source');
});


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h5>Selected Fields</h5>
</ul>

<div class="sidebar-list-header sidebar-item">
<h5>Fields
<h5>Available Fields
<i
ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
ng-click="showFields = !showFields"
Expand Down Expand Up @@ -106,9 +106,9 @@ <h5>Fields
</div>

<ul bindonce
ng-show="(fields | filter:filter.popularity).length > 0"
ng-show="(popularFields | filter:filter.isFieldFiltered).length > 0"
class="list-unstyled sidebar-well discover-popular-fields" ng-class="{ 'hidden-sm': !showFields, 'hidden-xs': !showFields }">
<li class="sidebar-item sidebar-list-header"><h6>Popular fields</h6></li>
<li class="sidebar-item sidebar-list-header"><h6>Popular</h6></li>
<discover-field ng-repeat="field in popularFields | filter:filter.isFieldFiltered">
</discover-field>
</ul>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ define(function (require) {
});

$scope.toggle = function (fieldName) {
$scope.increaseFieldCounter(fieldName);
_.toggleInOut($scope.columns, fieldName);
};

Expand Down Expand Up @@ -156,8 +157,8 @@ define(function (require) {
});
});

$scope.increaseFieldCounter = function (field) {
$scope.indexPattern.popularizeField(field.name, 1);
$scope.increaseFieldCounter = function (fieldName) {
$scope.indexPattern.popularizeField(fieldName, 1);
};

$scope.runAgg = function (field) {
Expand Down
23 changes: 4 additions & 19 deletions src/kibana/plugins/discover/controllers/discover.js
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,10 @@ define(function (require) {
$state.index = $scope.indexPattern.id;
$state.sort = getSort.array($state.sort, $scope.indexPattern);

$scope.$watchCollection('state.columns', function (columns) {
$state.save();
});

var metaFields = config.get('metaFields');
filterManager.init($state);

Expand Down Expand Up @@ -397,25 +401,12 @@ define(function (require) {
.set('filter', $state.filters || []);
});

// This is a hacky optimization for comparing the contents of a large array to a short one.
function arrayToKeys(array, value) {
var obj = {};
_.each(array, function (key) {
obj[key] = value || true;
});
return obj;
}

// TODO: On array fields, negating does not negate the combination, rather all terms
$scope.filterQuery = function (field, values, operation) {
$scope.indexPattern.popularizeField(field, 1);
filterManager.add(field, values, operation, $state.index);
};

$scope.toggleField = function (fieldName) {
_.toggleInOut($state.columns, fieldName);
};

$scope.toTop = function () {
$window.scrollTo(0, 0);
};
Expand All @@ -430,12 +421,6 @@ define(function (require) {
return str;
};

// TODO: Move to utility class
// https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
var regexEscape = function (str) {
return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
};

var loadingVis;
var setupVisualization = function () {
// If we're not setting anything up we need to return an empty promise
Expand Down
20 changes: 10 additions & 10 deletions test/unit/fixtures/hits.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
define(function (require) {
var _ = require('lodash');
return _.map([
{_source: {timestamp: 0, bytes: 10, request: 'foo'}},
{_source: {timestamp: 1, bytes: 20, request: 'bar'}},
{_source: {timestamp: 2, bytes: 30, request: 'bar'}},
{_source: {timestamp: 3, bytes: 30, request: 'baz'}},
{_source: {timestamp: 4, bytes: 30, request: 'baz'}},
{_source: {timestamp: 5, bytes: 30, request: 'baz'}},
{_source: {timestamp: 6, bytes: 40.1415926535, request: 'bat'}},
{_source: {timestamp: 7, bytes: 40.1415926535, request: 'bat'}},
{_source: {timestamp: 8, bytes: 40.1415926535, request: 'bat'}},
{_source: {timestamp: 9, bytes: 40.1415926535, request: 'bat'}},
{_source: {'@timestamp': 0, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 10, request: 'foo'}},
{_source: {'@timestamp': 1, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 20, request: 'bar'}},
{_source: {'@timestamp': 2, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 30, request: 'bar'}},
{_source: {'@timestamp': 3, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 30, request: 'baz'}},
{_source: {'@timestamp': 4, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 30, request: 'baz'}},
{_source: {'@timestamp': 5, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 30, request: 'baz'}},
{_source: {'@timestamp': 6, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 40.141592, request: 'bat'}},
{_source: {'@timestamp': 7, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 40.141592, request: 'bat'}},
{_source: {'@timestamp': 8, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 40.141592, request: 'bat'}},
{_source: {'@timestamp': 9, ssl: true, ip: '192.168.0.1', extension: 'php', 'machine.os': 'Linux', bytes: 40.141592, request: 'bat'}},
], function (p, i) {
return _.merge({}, p, {
_score: 1,
Expand Down
7 changes: 4 additions & 3 deletions test/unit/fixtures/logstash_fields.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ define(function (require) {
{ name: 'geo.src', type: 'string', indexed: true, analyzed: true, sortable: true, filterable: true },
{ name: '_type', type: 'string', indexed: true, analyzed: true, sortable: true, filterable: true },
{ name: '_id', type: 'string', indexed: false, analyzed: false, sortable: false, filterable: true},
{ name: 'custom_user_field', type: 'conflict', indexed: false, analyzed: false },
{ name: 'script string', type: 'string', scripted: true, script: '\'i am a string\'', lang: 'expression'},
{ name: 'script number', type: 'number', scripted: true, script: '1234', lang: 'expression'},
{ name: '_source', type: 'string', indexed: false, analyzed: false, sortable: false, filterable: false},
{ name: 'custom_user_field', type: 'conflict', indexed: false, analyzed: false, sortable: false, filterable: true },
{ name: 'script string', type: 'string', scripted: true, script: '\'i am a string\'', lang: 'expression'},
{ name: 'script number', type: 'number', scripted: true, script: '1234', lang: 'expression'},
].map(function (field) {
field.count = field.count || 0;
field.scripted = field.scripted || false;
Expand Down
24 changes: 13 additions & 11 deletions test/unit/specs/apps/discover/directives/field_chooser.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,17 @@ define(function (require) {

// Sets up the directive, take an element, and a list of properties to attach to the parent scope.
var init = function ($elem, props) {
inject(function ($rootScope, $compile, _config_) {
inject(function ($rootScope, $compile, $timeout, _config_) {
config = _config_;
$parentScope = $rootScope;
_.assign($parentScope, props);
$compile($elem)($parentScope);
$elem.scope().$digest();

// Required for test to run solo. Sigh
$timeout(function () {
$elem.scope().$digest();
}, 0);

$scope = $elem.isolateScope();
});
};
Expand All @@ -30,7 +35,7 @@ define(function (require) {
describe('discover field chooser directives', function () {
var $elem = angular.element(
'<disc-field-chooser' +
' fields="fields"' +
' columns="columns"' +
' toggle="toggle"' +
' data="data"' +
' filter="filter"' +
Expand All @@ -52,7 +57,7 @@ define(function (require) {
});

init($elem, {
fields: _.map(indexPattern.fields.raw, function (v, i) { return _.merge(v, {display: false, rowCount: i}); }),
columns: [],
toggle: sinon.spy(),
data: hits,
filter: sinon.spy(),
Expand Down Expand Up @@ -99,7 +104,7 @@ define(function (require) {
expect(section.popular.text()).to.not.contain('ip\n');

expect(section.unpopular.text()).to.contain('extension');
expect(section.unpopular.text()).to.contain('area');
expect(section.unpopular.text()).to.contain('machine.os');
expect(section.unpopular.text()).to.not.contain('ssl');
done();
});
Expand All @@ -116,14 +121,11 @@ define(function (require) {
// Re-init
destroy();
init($elem, {
fields: _.filter(
_.map(indexPattern.fields.raw, function (v, i) { return _.merge(v, {display: false, rowCount: i}); }),
{count: 0}
),
columns: [],
toggle: sinon.spy(),
data: require('fixtures/hits'),
filter: sinon.spy(),
indexPattern: indexPattern
indexPattern: indexPattern.fields
});

var section = getSections($elem);
Expand Down Expand Up @@ -201,7 +203,7 @@ define(function (require) {
it('should create buckets with formatted and raw values', function (done) {
$scope.details(field);
expect(field.details.buckets).to.not.be(undefined);
expect(field.details.buckets[0].value).to.be(40.1415926535);
expect(field.details.buckets[0].value).to.be(40.141592);
expect(field.details.buckets[0].display).to.be(40.142);
done();
});
Expand Down
2 changes: 1 addition & 1 deletion test/unit/specs/components/doc_table/doc_table.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ define(function (require) {
expect($scope.searchSource.size.called).to.be(true);
});

it('should have an addRows function that increases the row cound', function () {
it('should have an addRows function that increases the row count', function () {
expect($scope.addRows).to.be.a(Function);
searchSource.crankResults();
$scope.$digest();
Expand Down

0 comments on commit f1687ac

Please sign in to comment.