From fd8003f3d3fc3b6744fdcbb322ed56f84a164766 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 16 Jul 2019 07:36:35 +0200 Subject: [PATCH 01/16] Initial TableHeader react component --- .../components/table_header/table_header.tsx | 143 ++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx new file mode 100644 index 0000000000000..eff8c62246832 --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx @@ -0,0 +1,143 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import _ from 'lodash'; + +interface Props { + indexPattern: any; + hideTimeColumn: number; + totalItems: number; + columns: string[]; + headerClass: (name: string) => string; + cycleSortOrder: (name: string) => string; + getShortDotsName: (name: string) => string; + isSortableColumn: (name: string) => boolean; + getAriaLabelForColumn: (name: string) => string; + tooltip: (name: string) => string; + moveColumnLeft: (name: string) => boolean; + onRemoveColumn: (name: string) => void; + canMoveColumnRight: (name: string) => boolean; + canRemoveColumn: (name: string) => boolean; + canMoveColumnLeft: (name: string) => boolean; + moveColumnRight: (name: string) => void; + onChangeSortOrder: () => void; +} + +export function TableHeader({ + indexPattern, + hideTimeColumn, + columns, + headerClass, + cycleSortOrder, + getShortDotsName, + getAriaLabelForColumn, + tooltip, + moveColumnLeft, + onRemoveColumn, + canRemoveColumn, + canMoveColumnLeft, + canMoveColumnRight, + moveColumnRight, + onChangeSortOrder, +}: Props) { + function isSortableColumn(columnName: string) { + return ( + !!indexPattern && + typeof onChangeSortOrder === 'function' && + _.get(indexPattern, ['fields', 'byName', columnName, 'sortable'], false) + ); + } + + return ( + + + {indexPattern.timeFieldName && !hideTimeColumn && ( + + + + + + + )} + {columns.map((name: string) => ( + + + {getShortDotsName(name)} + {isSortableColumn(name) && ( + + )} + + {canRemoveColumn(name) && ( + + )} + {canMoveColumnLeft(name) && ( + + )} + {canMoveColumnRight(name) && ( + + )} + + ))} + + ); +} From 7e667caf2177ecccaec1828728ed1d161f0b3c83 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Tue, 16 Jul 2019 18:14:10 +0200 Subject: [PATCH 02/16] Initial migration of kbnTableHeader to react --- .../doc_table/components/table_header.js | 43 ++--- .../components/table_header/helpers.tsx | 42 +++++ .../components/table_header/table_header.tsx | 156 ++++++------------ .../table_header/table_header_column.tsx | 128 ++++++++++++++ .../table_header/table_header_time_column.tsx | 54 ++++++ 5 files changed, 302 insertions(+), 121 deletions(-) create mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/helpers.tsx create mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx create mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_time_column.tsx diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js index 60d440b1f957d..9acafe5831bc8 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js @@ -19,13 +19,24 @@ import _ from 'lodash'; import { i18n } from '@kbn/i18n'; +import { wrapInI18nContext } from 'ui/i18n'; import { shortenDottedString } from '../../../../common/utils/shorten_dotted_string'; import headerHtml from './table_header.html'; import { uiModules } from 'ui/modules'; +import { TableHeader } from './table_header/table_header'; const module = uiModules.get('app/discover'); +module.directive('kbnTableHeader', function (reactDirective, config) { + return reactDirective( + wrapInI18nContext(TableHeader), + undefined, + { restrict: 'A' }, + { + hideTimeColumn: config.get('doc_table:hideTimeColumn'), + isShortDots: config.get('shortDots:enable'), + } + ); -module.directive('kbnTableHeader', function () { return { restrict: 'A', scope: { @@ -47,9 +58,9 @@ module.directive('kbnTableHeader', function () { $scope.isSortableColumn = function isSortableColumn(columnName) { return ( - !!$scope.indexPattern - && _.isFunction($scope.onChangeSortOrder) - && _.get($scope, ['indexPattern', 'fields', 'byName', columnName, 'sortable'], false) + !!$scope.indexPattern && + _.isFunction($scope.onChangeSortOrder) && + _.get($scope, ['indexPattern', 'fields', 'byName', columnName, 'sortable'], false) ); }; @@ -63,23 +74,20 @@ module.directive('kbnTableHeader', function () { }; $scope.canMoveColumnLeft = function canMoveColumn(columnName) { - return ( - _.isFunction($scope.onMoveColumn) - && $scope.columns.indexOf(columnName) > 0 - ); + return _.isFunction($scope.onMoveColumn) && $scope.columns.indexOf(columnName) > 0; }; $scope.canMoveColumnRight = function canMoveColumn(columnName) { return ( - _.isFunction($scope.onMoveColumn) - && $scope.columns.indexOf(columnName) < $scope.columns.length - 1 + _.isFunction($scope.onMoveColumn) && + $scope.columns.indexOf(columnName) < $scope.columns.length - 1 ); }; $scope.canRemoveColumn = function canRemoveColumn(columnName) { return ( - _.isFunction($scope.onRemoveColumn) - && (columnName !== '_source' || $scope.columns.length > 1) + _.isFunction($scope.onRemoveColumn) && + (columnName !== '_source' || $scope.columns.length > 1) ); }; @@ -119,11 +127,8 @@ module.directive('kbnTableHeader', function () { } const [currentColumnName, currentDirection = 'asc'] = $scope.sortOrder; - const newDirection = ( - (columnName === currentColumnName && currentDirection === 'asc') - ? 'desc' - : 'asc' - ); + const newDirection = + columnName === currentColumnName && currentDirection === 'asc' ? 'desc' : 'asc'; $scope.onChangeSortOrder(columnName, newDirection); }; @@ -132,7 +137,7 @@ module.directive('kbnTableHeader', function () { if (!$scope.isSortableColumn(name)) return null; const [currentColumnName, currentDirection = 'asc'] = $scope.sortOrder; - if(name === currentColumnName && currentDirection === 'asc') { + if (name === currentColumnName && currentDirection === 'asc') { return i18n.translate('kbn.docTable.tableHeader.sortByColumnDescendingAriaLabel', { defaultMessage: 'Sort {columnName} descending', values: { columnName: name }, @@ -143,6 +148,6 @@ module.directive('kbnTableHeader', function () { values: { columnName: name }, }); }; - } + }, }; }); diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/helpers.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/helpers.tsx new file mode 100644 index 0000000000000..22e0bdd34c3e5 --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/helpers.tsx @@ -0,0 +1,42 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { i18n } from '@kbn/i18n'; + +export type SortOrder = [string, string]; + +export function getAriaSortLabel(columnName: string, sortOrder: SortOrder) { + const [currentColumnName, currentDirection = 'asc'] = sortOrder; + if (name === currentColumnName && currentDirection === 'asc') { + return i18n.translate('kbn.docTable.tableHeader.sortByColumnDescendingAriaLabel', { + defaultMessage: 'Sort {columnName} descending', + values: { columnName }, + }); + } + return i18n.translate('kbn.docTable.tableHeader.sortByColumnAscendingAriaLabel', { + defaultMessage: 'Sort {columnName} ascending', + values: { columnName }, + }); +} + +export function getSortHeaderClass(columnName: string, sortOrder: SortOrder) { + const defaultClass = ['fa', 'fa-sort-up', 'kbnDocTableHeader__sortChange']; + + if (!sortOrder || columnName !== sortOrder[0]) return defaultClass.join(' '); + return ['fa', sortOrder[1] === 'asc' ? 'fa-sort-up' : 'fa-sort-down'].join(' '); +} diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx index eff8c62246832..93a6c8a7e93ed 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx @@ -17,127 +17,79 @@ * under the License. */ import React from 'react'; -import { FormattedMessage } from '@kbn/i18n/react'; -import _ from 'lodash'; +import { isFunction, get } from 'lodash'; +// @ts-ignore +import { IndexPattern } from 'src/legacy/core_plugins/data/public'; +import { shortenDottedString } from '../../../../../common/utils/shorten_dotted_string'; + +import { TableHeaderColumn } from './table_header_column'; +import { TableHeaderTimeColumn } from './table_header_time_column'; +import { SortOrder } from './helpers'; interface Props { - indexPattern: any; + indexPattern: IndexPattern; hideTimeColumn: number; - totalItems: number; columns: string[]; - headerClass: (name: string) => string; - cycleSortOrder: (name: string) => string; - getShortDotsName: (name: string) => string; - isSortableColumn: (name: string) => boolean; - getAriaLabelForColumn: (name: string) => string; - tooltip: (name: string) => string; - moveColumnLeft: (name: string) => boolean; + sortOrder: SortOrder; + isShortDots: boolean; onRemoveColumn: (name: string) => void; - canMoveColumnRight: (name: string) => boolean; - canRemoveColumn: (name: string) => boolean; - canMoveColumnLeft: (name: string) => boolean; - moveColumnRight: (name: string) => void; - onChangeSortOrder: () => void; + onChangeSortOrder: (name: string, direction: 'asc' | 'desc') => void; + onMoveColumn: (name: string, index: number) => void; } export function TableHeader({ indexPattern, hideTimeColumn, columns, - headerClass, - cycleSortOrder, - getShortDotsName, - getAriaLabelForColumn, - tooltip, - moveColumnLeft, onRemoveColumn, - canRemoveColumn, - canMoveColumnLeft, - canMoveColumnRight, - moveColumnRight, onChangeSortOrder, + sortOrder, + isShortDots, + onMoveColumn, }: Props) { - function isSortableColumn(columnName: string) { - return ( - !!indexPattern && - typeof onChangeSortOrder === 'function' && - _.get(indexPattern, ['fields', 'byName', columnName, 'sortable'], false) - ); + const { timeFieldName } = indexPattern; + + function cycleSortOrder(colName: string) { + const [currColumnName, currDirection = 'asc'] = sortOrder; + const newDirection = colName === currColumnName && currDirection === 'asc' ? 'desc' : 'asc'; + + onChangeSortOrder(colName, newDirection); } return ( - - {indexPattern.timeFieldName && !hideTimeColumn && ( - - - - - - + + {timeFieldName && !hideTimeColumn && ( + )} - {columns.map((name: string) => ( - - - {getShortDotsName(name)} - {isSortableColumn(name) && ( - - )} - - {canRemoveColumn(name) && ( - - )} - {canMoveColumnLeft(name) && ( - - )} - {canMoveColumnRight(name) && ( - - )} - - ))} + {columns.map((name: string, idx: number) => { + const canRemoveColumn = + isFunction(onRemoveColumn) && (name !== '_source' || columns.length > 1); + const isSortable = + isFunction(onChangeSortOrder) && + get(indexPattern, ['fields', 'byName', name, 'sortable'], false); + + const colLeftIdx = idx - 1 < 0 ? -1 : idx - 1; + const colRightIdx = idx + 1 >= columns.length ? -1 : idx + 1; + const displayName = isShortDots ? shortenDottedString(name) : name; + + return ( + cycleSortOrder(name) : undefined} + onMoveColumnLeft={colLeftIdx >= 0 ? () => onMoveColumn(name, colLeftIdx) : undefined} + onMoveColumnRight={colRightIdx >= 0 ? () => onMoveColumn(name, colRightIdx) : undefined} + onRemoveColumn={canRemoveColumn ? () => onRemoveColumn(name) : undefined} + /> + ); + })} ); } diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx new file mode 100644 index 0000000000000..9de33e247b094 --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx @@ -0,0 +1,128 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import _ from 'lodash'; +import { i18n } from '@kbn/i18n'; +import { EuiToolTip } from '@elastic/eui'; +import { getAriaSortLabel, getSortHeaderClass } from './helpers'; +// @ts-ignore +import { shortenDottedString } from '../../../../../common/utils/shorten_dotted_string'; + +interface Props { + name: string; + displayName: string; + sortOrder: [string, string]; + onMoveColumnRight?: (name: string) => void; + onMoveColumnLeft?: (name: string) => void; + onRemoveColumn?: (name: string) => void; + onCycleSortOrder?: (name: string) => void; +} + +export function TableHeaderColumn({ + name, + displayName, + sortOrder, + onRemoveColumn, + onMoveColumnLeft, + onMoveColumnRight, + onCycleSortOrder, +}: Props) { + return ( + + + {displayName} + {onCycleSortOrder && ( + + + + )} + + {onRemoveColumn && ( + + } + > + + + )} + {onMoveColumnLeft && ( + + } + > + + + )} + {onMoveColumnRight && ( + + } + > + + + )} + + ); +} diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_time_column.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_time_column.tsx new file mode 100644 index 0000000000000..86fc4a0db77e4 --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_time_column.tsx @@ -0,0 +1,54 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import React from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiToolTip } from '@elastic/eui'; +import { getAriaSortLabel, getSortHeaderClass, SortOrder } from './helpers'; + +interface Props { + onCycleSortOrder: (name: string) => void; + timeFieldName: string; + sortOrder: SortOrder; +} + +export function TableHeaderTimeColumn({ timeFieldName, onCycleSortOrder, sortOrder }: Props) { + return ( + + + + + + } + > + + + + + ); +} From baa505767ea5f0c2fc6172edc7f137b4cdcfde8d Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 17 Jul 2019 11:29:32 +0200 Subject: [PATCH 03/16] Refactoring --- .../doc_table/components/_table_header.scss | 1 + .../components/table_header/table_header.tsx | 63 ++++--- .../table_header/table_header_column.tsx | 165 +++++++++--------- 3 files changed, 116 insertions(+), 113 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss index 226140c7125ba..721a5fb6a4ecb 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss @@ -1,6 +1,7 @@ .kbnDocTableHeader__move, .kbnDocTableHeader__sortChange { opacity: 0; + margin-left: 3px; th:hover &, &:focus { diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx index 93a6c8a7e93ed..b0a2a8dad1237 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx @@ -18,12 +18,10 @@ */ import React from 'react'; import { isFunction, get } from 'lodash'; +import { IndexPattern } from 'ui/index_patterns'; // @ts-ignore -import { IndexPattern } from 'src/legacy/core_plugins/data/public'; import { shortenDottedString } from '../../../../../common/utils/shorten_dotted_string'; - import { TableHeaderColumn } from './table_header_column'; -import { TableHeaderTimeColumn } from './table_header_time_column'; import { SortOrder } from './helpers'; interface Props { @@ -56,37 +54,46 @@ export function TableHeader({ onChangeSortOrder(colName, newDirection); } + const columnData = columns.map((name, idx) => { + return { + name, + displayName: isShortDots ? shortenDottedString(name) : name, + isSortable: + isFunction(onChangeSortOrder) && + get(indexPattern, ['fields', 'byName', name, 'sortable'], false), + isRemoveable: isFunction(onRemoveColumn) && (name !== '_source' || columns.length > 1), + colLeftIdx: idx - 1 < 0 ? -1 : idx - 1, + colRightIdx: idx + 1 >= columns.length ? -1 : idx + 1, + }; + }); + + const displayedColumns = + timeFieldName && !hideTimeColumn + ? [ + { + name: timeFieldName, + displayName: 'Time', + isSortable: true, + isRemoveable: false, + colLeftIdx: -1, + colRightIdx: -1, + }, + ...columnData, + ] + : columnData; + return ( - {timeFieldName && !hideTimeColumn && ( - - )} - {columns.map((name: string, idx: number) => { - const canRemoveColumn = - isFunction(onRemoveColumn) && (name !== '_source' || columns.length > 1); - const isSortable = - isFunction(onChangeSortOrder) && - get(indexPattern, ['fields', 'byName', name, 'sortable'], false); - - const colLeftIdx = idx - 1 < 0 ? -1 : idx - 1; - const colRightIdx = idx + 1 >= columns.length ? -1 : idx + 1; - const displayName = isShortDots ? shortenDottedString(name) : name; - + {displayedColumns.map(col => { return ( cycleSortOrder(name) : undefined} - onMoveColumnLeft={colLeftIdx >= 0 ? () => onMoveColumn(name, colLeftIdx) : undefined} - onMoveColumnRight={colRightIdx >= 0 ? () => onMoveColumn(name, colRightIdx) : undefined} - onRemoveColumn={canRemoveColumn ? () => onRemoveColumn(name) : undefined} + {...col} + onMoveColumn={onMoveColumn} + onRemoveColumn={onRemoveColumn} + onChangeSortOrder={cycleSortOrder} /> ); })} diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx index 9de33e247b094..5ab966ff08d5a 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx @@ -17,7 +17,6 @@ * under the License. */ import React from 'react'; -import { FormattedMessage } from '@kbn/i18n/react'; import _ from 'lodash'; import { i18n } from '@kbn/i18n'; import { EuiToolTip } from '@elastic/eui'; @@ -26,103 +25,99 @@ import { getAriaSortLabel, getSortHeaderClass } from './helpers'; import { shortenDottedString } from '../../../../../common/utils/shorten_dotted_string'; interface Props { - name: string; + colLeftIdx: number; // idx of the column to the left, -1 if moving is not possible + colRightIdx: number; // idx of the column to the right, -1 if moving is not possible displayName: string; - sortOrder: [string, string]; - onMoveColumnRight?: (name: string) => void; - onMoveColumnLeft?: (name: string) => void; + isRemoveable: boolean; + isSortable: boolean; + name: string; + onChangeSortOrder?: (name: string) => void; + onMoveColumn?: (name: string, idx: number) => void; onRemoveColumn?: (name: string) => void; - onCycleSortOrder?: (name: string) => void; + sortOrder: [string, string]; } export function TableHeaderColumn({ - name, + colLeftIdx, + colRightIdx, displayName, - sortOrder, + isRemoveable, + isSortable, + name, + onChangeSortOrder, + onMoveColumn, onRemoveColumn, - onMoveColumnLeft, - onMoveColumnRight, - onCycleSortOrder, + sortOrder, }: Props) { + const buttons = [ + { + active: isSortable, + ariaLabel: getAriaSortLabel(name, sortOrder), + className: getSortHeaderClass(name, sortOrder), + onClick: () => onChangeSortOrder && onChangeSortOrder(name), + testSubject: `docTableHeaderFieldSort_${name}`, + tooltip: i18n.translate('kbn.docTable.tableHeader.sortByColumnTooltip', { + defaultMessage: 'Sort by {columnName}', + values: { columnName: displayName }, + }), + }, + { + active: isRemoveable, + ariaLabel: i18n.translate('kbn.docTable.tableHeader.removeColumnButtonAriaLabel', { + defaultMessage: 'Remove {columnName} column', + values: { columnName: name }, + }), + className: 'fa fa-remove kbnDocTableHeader__move', + onClick: () => onRemoveColumn && onRemoveColumn(name), + testSubject: `docTableRemoveHeader-${name}`, + tooltip: i18n.translate('kbn.docTable.tableHeader.removeColumnButtonTooltip', { + defaultMessage: 'Remove Column', + values: { columnName: displayName }, + }), + }, + { + active: colLeftIdx >= 0, + ariaLabel: i18n.translate('kbn.docTable.tableHeader.moveColumnLeftButtonAriaLabel', { + defaultMessage: 'Move {columnName} column to the left', + values: { columnName: name }, + }), + className: 'fa fa-angle-double-left kbnDocTableHeader__move', + onClick: () => onMoveColumn && onMoveColumn(name, colLeftIdx), + tooltip: i18n.translate('kbn.docTable.tableHeader.moveColumnLeftButtonTooltip', { + defaultMessage: 'Move column to the left', + }), + }, + { + active: colRightIdx >= 0, + ariaLabel: i18n.translate('kbn.docTable.tableHeader.moveColumnRightButtonAriaLabel', { + defaultMessage: 'Move {columnName} column to the right', + values: { columnName: name }, + }), + className: 'fa fa-angle-double-right kbnDocTableHeader__move', + onClick: () => onMoveColumn && onMoveColumn(name, colRightIdx), + tooltip: i18n.translate('kbn.docTable.tableHeader.moveColumnRightButtonTooltip', { + defaultMessage: 'Move column to the right', + }), + }, + ]; + return ( {displayName} - {onCycleSortOrder && ( - - - - )} + {buttons + .filter(button => button.active) + .map(button => ( + + - - )} - {onMoveColumnLeft && ( - - } - > - - - )} - {onMoveColumnRight && ( - - } - > - - - )} ); } From 0769209e42bca4695b11a06a64d31dd0afed5228 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 17 Jul 2019 16:23:50 +0200 Subject: [PATCH 04/16] Remove invalid translation usage --- .../doc_table/components/table_header/table_header_column.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx index 5ab966ff08d5a..2d51a9cef9eff 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx @@ -72,7 +72,6 @@ export function TableHeaderColumn({ testSubject: `docTableRemoveHeader-${name}`, tooltip: i18n.translate('kbn.docTable.tableHeader.removeColumnButtonTooltip', { defaultMessage: 'Remove Column', - values: { columnName: displayName }, }), }, { From b9f9997082a7a4e5abb79ccac7087729a8734b78 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 17 Jul 2019 16:24:26 +0200 Subject: [PATCH 05/16] Cleanup, removal of angular template and usage --- .../doc_table/components/table_header.html | 79 ------------ .../doc_table/components/table_header.js | 119 ------------------ 2 files changed, 198 deletions(-) delete mode 100644 src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.html diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.html b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.html deleted file mode 100644 index b254461f70429..0000000000000 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - - {{getShortDotsName(name)}} - - - - - - - diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js index 9acafe5831bc8..3af22a363e6db 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header.js @@ -16,12 +16,7 @@ * specific language governing permissions and limitations * under the License. */ - -import _ from 'lodash'; -import { i18n } from '@kbn/i18n'; import { wrapInI18nContext } from 'ui/i18n'; -import { shortenDottedString } from '../../../../common/utils/shorten_dotted_string'; -import headerHtml from './table_header.html'; import { uiModules } from 'ui/modules'; import { TableHeader } from './table_header/table_header'; const module = uiModules.get('app/discover'); @@ -36,118 +31,4 @@ module.directive('kbnTableHeader', function (reactDirective, config) { isShortDots: config.get('shortDots:enable'), } ); - - return { - restrict: 'A', - scope: { - columns: '=', - sortOrder: '=', - indexPattern: '=', - onChangeSortOrder: '=?', - onRemoveColumn: '=?', - onMoveColumn: '=?', - }, - template: headerHtml, - controller: function ($scope, config) { - $scope.hideTimeColumn = config.get('doc_table:hideTimeColumn'); - $scope.isShortDots = config.get('shortDots:enable'); - - $scope.getShortDotsName = function getShortDotsName(columnName) { - return $scope.isShortDots ? shortenDottedString(columnName) : columnName; - }; - - $scope.isSortableColumn = function isSortableColumn(columnName) { - return ( - !!$scope.indexPattern && - _.isFunction($scope.onChangeSortOrder) && - _.get($scope, ['indexPattern', 'fields', 'byName', columnName, 'sortable'], false) - ); - }; - - $scope.tooltip = function (column) { - if (!$scope.isSortableColumn(column)) return ''; - const name = $scope.isShortDots ? shortenDottedString(column) : column; - return i18n.translate('kbn.docTable.tableHeader.sortByColumnTooltip', { - defaultMessage: 'Sort by {columnName}', - values: { columnName: name }, - }); - }; - - $scope.canMoveColumnLeft = function canMoveColumn(columnName) { - return _.isFunction($scope.onMoveColumn) && $scope.columns.indexOf(columnName) > 0; - }; - - $scope.canMoveColumnRight = function canMoveColumn(columnName) { - return ( - _.isFunction($scope.onMoveColumn) && - $scope.columns.indexOf(columnName) < $scope.columns.length - 1 - ); - }; - - $scope.canRemoveColumn = function canRemoveColumn(columnName) { - return ( - _.isFunction($scope.onRemoveColumn) && - (columnName !== '_source' || $scope.columns.length > 1) - ); - }; - - $scope.headerClass = function (column) { - if (!$scope.isSortableColumn(column)) return; - - const sortOrder = $scope.sortOrder; - const defaultClass = ['fa', 'fa-sort-up', 'kbnDocTableHeader__sortChange']; - - if (!sortOrder || column !== sortOrder[0]) return defaultClass; - return ['fa', sortOrder[1] === 'asc' ? 'fa-sort-up' : 'fa-sort-down']; - }; - - $scope.moveColumnLeft = function moveLeft(columnName) { - const newIndex = $scope.columns.indexOf(columnName) - 1; - - if (newIndex < 0) { - return; - } - - $scope.onMoveColumn(columnName, newIndex); - }; - - $scope.moveColumnRight = function moveRight(columnName) { - const newIndex = $scope.columns.indexOf(columnName) + 1; - - if (newIndex >= $scope.columns.length) { - return; - } - - $scope.onMoveColumn(columnName, newIndex); - }; - - $scope.cycleSortOrder = function cycleSortOrder(columnName) { - if (!$scope.isSortableColumn(columnName)) { - return; - } - - const [currentColumnName, currentDirection = 'asc'] = $scope.sortOrder; - const newDirection = - columnName === currentColumnName && currentDirection === 'asc' ? 'desc' : 'asc'; - - $scope.onChangeSortOrder(columnName, newDirection); - }; - - $scope.getAriaLabelForColumn = function getAriaLabelForColumn(name) { - if (!$scope.isSortableColumn(name)) return null; - - const [currentColumnName, currentDirection = 'asc'] = $scope.sortOrder; - if (name === currentColumnName && currentDirection === 'asc') { - return i18n.translate('kbn.docTable.tableHeader.sortByColumnDescendingAriaLabel', { - defaultMessage: 'Sort {columnName} descending', - values: { columnName: name }, - }); - } - return i18n.translate('kbn.docTable.tableHeader.sortByColumnAscendingAriaLabel', { - defaultMessage: 'Sort {columnName} ascending', - values: { columnName: name }, - }); - }; - }, - }; }); From 1bd828ad7c87343b146d2b2dbf3ca430e8feb00d Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 18 Jul 2019 11:48:14 +0200 Subject: [PATCH 06/16] Disable mocha tests --- .../discover/doc_table/__tests__/lib/rows_headers.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/__tests__/lib/rows_headers.js b/src/legacy/core_plugins/kibana/public/discover/doc_table/__tests__/lib/rows_headers.js index b2660facf7a5a..319b9e0b6cc3e 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/__tests__/lib/rows_headers.js +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/__tests__/lib/rows_headers.js @@ -27,8 +27,8 @@ import $ from 'jquery'; import 'plugins/kibana/discover/index'; import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern'; -const SORTABLE_FIELDS = ['bytes', '@timestamp']; -const UNSORTABLE_FIELDS = ['request_body']; +//const SORTABLE_FIELDS = ['bytes', '@timestamp']; +//const UNSORTABLE_FIELDS = ['request_body']; describe('Doc Table', function () { let $parentScope; @@ -119,6 +119,7 @@ describe('Doc Table', function () { }); }; + /** describe('kbnTableHeader', function () { const $elem = angular.element(` $scope.cycleSortOrder(SORTABLE_FIELDS[0])).to.not.throwException(); }); }); - describe('headerClass function', function () { it('should exist', function () { expect($scope.headerClass).to.be.a(Function); @@ -267,6 +266,7 @@ describe('Doc Table', function () { }); }); }); + */ describe('kbnTableRow', function () { const $elem = angular.element( From 25bcd121c8a77bcd02bfb727413fb111a31ff560 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Thu, 18 Jul 2019 11:56:54 +0200 Subject: [PATCH 07/16] Add key to columns to remove console warning --- .../components/table_header/table_header_column.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx index 2d51a9cef9eff..84e9ae57b83fb 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx @@ -101,13 +101,13 @@ export function TableHeaderColumn({ ]; return ( - + {displayName} {buttons .filter(button => button.active) - .map(button => ( - + .map((button,idx) => ( + - - - - ); -} From 844ded43f4bb541d846c499a267b1e3c3a4def40 Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Sun, 21 Jul 2019 08:30:47 +0200 Subject: [PATCH 15/16] Remove unused translations --- x-pack/plugins/translations/translations/ja-JP.json | 2 -- x-pack/plugins/translations/translations/zh-CN.json | 2 -- 2 files changed, 4 deletions(-) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 258252a30335c..9451e7aa5fb39 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -1601,8 +1601,6 @@ "kbn.docTable.tableHeader.sortByColumnAscendingAriaLabel": "{columnName} を昇順に並べ替える", "kbn.docTable.tableHeader.sortByColumnDescendingAriaLabel": "{columnName} を降順に並べ替える", "kbn.docTable.tableHeader.sortByColumnTooltip": "{columnName} で並べ替えます", - "kbn.docTable.tableHeader.sortByTimeTooltip": "時間で並べ替えます", - "kbn.docTable.tableHeader.timeHeaderCellTitle": "時間", "kbn.docTable.tableRow.detailHeading": "拡張ドキュメント", "kbn.docTable.tableRow.filterForValueButtonAriaLabel": "値でフィルタリング", "kbn.docTable.tableRow.filterForValueButtonTooltip": "値でフィルタリング", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index bf6af4c68ecda..b7060d61c303d 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -1601,8 +1601,6 @@ "kbn.docTable.tableHeader.sortByColumnAscendingAriaLabel": "升序排序 {columnName}", "kbn.docTable.tableHeader.sortByColumnDescendingAriaLabel": "降序排序 {columnName}", "kbn.docTable.tableHeader.sortByColumnTooltip": "按“{columnName}”排序", - "kbn.docTable.tableHeader.sortByTimeTooltip": "按时间排序", - "kbn.docTable.tableHeader.timeHeaderCellTitle": "时间", "kbn.docTable.tableRow.detailHeading": "已展开文档", "kbn.docTable.tableRow.filterForValueButtonAriaLabel": "筛留值", "kbn.docTable.tableRow.filterForValueButtonTooltip": "筛留值", From ef7e1fb9ea9dc92cb4a209005a86a06653c1b30b Mon Sep 17 00:00:00 2001 From: Matthias Wilhelm Date: Wed, 24 Jul 2019 10:25:27 +0200 Subject: [PATCH 16/16] Set button margin to $euiSizeXS --- .../public/discover/doc_table/components/_table_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss index 777119f1bfa2e..099286f8c875c 100644 --- a/src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss +++ b/src/legacy/core_plugins/kibana/public/discover/doc_table/components/_table_header.scss @@ -1,5 +1,5 @@ .kbnDocTableHeader button { - margin-left: 3px; + margin-left: $euiSizeXS; } .kbnDocTableHeader__move, .kbnDocTableHeader__sortChange {