Make detailscard table columns filterable (#580)

* WIP: Add FilterDropdown to DetailsCard _makeColumn TODO: Finish cancel, style, test, verify single select FilteredList * WIP: Add cancel, style, verify old FilteredLists TODO: Test, fix FilteredList styles, four tooltips * Add tooltips, fix height, -empty filters, test * Handle cancel after click outside list, fix tips * Clean up Signed-off-by: Everett Ross <reverett@uber.com>
jaegertracing · May 19, 2020 · 3335512 · 3335512
1 parent bff253e
commit 3335512
Show file tree

Hide file tree

Showing 18 changed files with 979 additions and 70 deletions.
diff --git a/...-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap b/...-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap
@@ -1372,7 +1372,6 @@ exports[`<DdgNodeContent> renders the number of operations if there are multiple
         <Popover
           content={
             <FilteredList
-              cancel={[Function]}
               options={
                 Array [
                   "op0",

diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx
@@ -296,14 +296,7 @@ export class UnconnectedDdgNodeContent extends React.PureComponent<TProps, TStat
               >
                 {Array.isArray(operation) ? (
                   <Popover
-                    content={
-                      <FilteredList
-                        cancel={() => {}}
-                        options={operation}
-                        value={null}
-                        setValue={this.setOperation}
-                      />
-                    }
+                    content={<FilteredList options={operation} value={null} setValue={this.setOperation} />}
                     placement="bottom"
                     title="Select Operation to Filter Graph"
                   >

diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.test.js
@@ -14,9 +14,20 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import { Icon } from 'antd';
+import FaFilter from 'react-icons/lib/fa/filter.js';
 
 import ExamplesLink from '../ExamplesLink';
-import DetailTable, { _onCell, _makeColumns, _renderCell, _rowKey, _sort } from './DetailTable';
+import DetailTableDropdown from './DetailTableDropdown';
+import DetailTable, {
+  _makeColumns,
+  _makeFilterDropdown,
+  _onCell,
+  _onFilter,
+  _renderCell,
+  _rowKey,
+  _sort,
+} from './DetailTable';
 
 describe('DetailTable', () => {
   describe('render', () => {
@@ -92,13 +103,16 @@ describe('DetailTable', () => {
     const stringColumn = 'stringCol';
 
     describe('static props', () => {
-      const makeColumn = def => _makeColumns({ defs: [def] })[0];
+      const makeColumn = (def, rows = []) => _makeColumns({ defs: [def], rows })[0];
 
       it('renders string column', () => {
         expect(makeColumn(stringColumn)).toEqual({
           dataIndex: stringColumn,
           key: stringColumn,
           title: stringColumn,
+          filterDropdown: false,
+          filterIcon: expect.any(Function),
+          onFilter: expect.any(Function),
           onCell: expect.any(Function),
           onHeaderCell: expect.any(Function),
           render: expect.any(Function),
@@ -111,6 +125,9 @@ describe('DetailTable', () => {
           dataIndex: stringColumn,
           key: stringColumn,
           title: stringColumn,
+          filterDropdown: false,
+          filterIcon: expect.any(Function),
+          onFilter: expect.any(Function),
           onCell: expect.any(Function),
           onHeaderCell: expect.any(Function),
           render: expect.any(Function),
@@ -129,6 +146,9 @@ describe('DetailTable', () => {
           dataIndex: stringColumn,
           key: stringColumn,
           title: label,
+          filterDropdown: false,
+          filterIcon: expect.any(Function),
+          onFilter: expect.any(Function),
           onCell: expect.any(Function),
           onHeaderCell: expect.any(Function),
           render: expect.any(Function),
@@ -149,6 +169,36 @@ describe('DetailTable', () => {
         ).toBe(styling);
       });
 
+      it('renders filter icon without filter set', () => {
+        const icon = makeColumn(stringColumn).filterIcon();
+        expect(icon.type).toBe(Icon);
+        expect(icon.props.type).toBe('filter');
+      });
+
+      it('renders filter icon with filter set', () => {
+        const icon = makeColumn(stringColumn).filterIcon(true);
+        expect(icon.type).toBe(FaFilter);
+      });
+
+      it('renders filterable column if there are filterable values', () => {
+        const filterableValues = ['foo', 'bar', { value: 'obj foo' }, { value: 'obj baz' }];
+        const expected = new Set(filterableValues.map(v => v.value || v));
+        const values = [
+          ...filterableValues,
+          <ExamplesLink examples={[]} />,
+          <ExamplesLink key="fookey" examples={[]} />,
+          undefined,
+        ];
+        const rows = values.map(value => ({
+          [stringColumn]: value,
+        }));
+        const column = makeColumn(stringColumn, rows);
+        const dropdown = column.filterDropdown();
+
+        expect(dropdown.props.options).toEqual(expected);
+        expect(dropdown.type).toBe(DetailTableDropdown);
+      });
+
       it('renders object column without sort', () => {
         expect(
           makeColumn({
@@ -159,6 +209,9 @@ describe('DetailTable', () => {
           dataIndex: stringColumn,
           key: stringColumn,
           title: stringColumn,
+          filterDropdown: false,
+          filterIcon: expect.any(Function),
+          onFilter: expect.any(Function),
           onCell: expect.any(Function),
           onHeaderCell: expect.any(Function),
           render: expect.any(Function),
@@ -175,6 +228,25 @@ describe('DetailTable', () => {
           }))
         );
 
+      describe('_makeFilterDropdown', () => {
+        it('returns DetailsTableDropdown with correct props', () => {
+          const options = ['foo', 'bar'];
+          const mockAntdDropdownProps = {
+            foo: 'bar',
+            bar: 'baz',
+            baz: 'foo',
+          };
+          const filterDropdown = _makeFilterDropdown(stringColumn, options)(mockAntdDropdownProps);
+
+          expect(filterDropdown.type).toBe(DetailTableDropdown);
+          expect(filterDropdown.props).toEqual({
+            ...mockAntdDropdownProps,
+            options,
+          });
+          expect(filterDropdown.key).toBe(stringColumn);
+        });
+      });
+
       describe('_onCell', () => {
         const onCell = makeTestFn(_onCell);
 
@@ -204,6 +276,36 @@ describe('DetailTable', () => {
         });
       });
 
+      describe('_onFilter', () => {
+        const onFilter = (filterValue, testValue) =>
+          _onFilter(stringColumn)(filterValue, { [stringColumn]: testValue });
+        const value = 'test-value';
+
+        it('returns true if string value is filter', () => {
+          expect(onFilter(value, value)).toBe(true);
+        });
+
+        it('returns true if object value is filter', () => {
+          expect(onFilter(value, { value })).toBe(true);
+        });
+
+        it('returns false if string value is not filter', () => {
+          expect(onFilter(value, `not-${value}`)).toBe(false);
+        });
+
+        it('returns false if object value is not filter', () => {
+          expect(onFilter(value, { value: `not-${value}` })).toBe(false);
+        });
+
+        it('returns false for array value', () => {
+          expect(onFilter(value, [value])).toBe(false);
+        });
+
+        it('returns false for undefined value', () => {
+          expect(onFilter(value)).toBe(false);
+        });
+      });
+
       describe('_renderCell', () => {
         it('renders a string', () => {
           expect(_renderCell('a')).toBe('a');

diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx
@@ -13,12 +13,21 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Table } from 'antd';
+import { Icon, Table } from 'antd';
+import FaFilter from 'react-icons/lib/fa/filter.js';
 import _isEmpty from 'lodash/isEmpty';
 
 import ExamplesLink, { TExample } from '../ExamplesLink';
+import DetailTableDropdown from './DetailTableDropdown';
 
-import { TColumnDef, TColumnDefs, TRow, TStyledValue } from './types';
+import { TColumnDef, TColumnDefs, TFilterDropdownProps, TRow, TStyledValue } from './types';
+
+// exported for tests
+export const _makeFilterDropdown = (dataIndex: string, options: Set<string>) => (
+  props: TFilterDropdownProps
+) => {
+  return <DetailTableDropdown {...props} key={dataIndex} options={options} />;
+};
 
 // exported for tests
 export const _onCell = (dataIndex: string) => (row: TRow) => {
@@ -31,6 +40,15 @@ export const _onCell = (dataIndex: string) => (row: TRow) => {
   };
 };
 
+// exported for tests
+export const _onFilter = (dataIndex: string) => (value: string, row: TRow) => {
+  const data = row[dataIndex];
+  if (typeof data === 'object' && !Array.isArray(data) && typeof data.value === 'string') {
+    return data.value === value;
+  }
+  return data === value;
+};
+
 // exported for tests
 export const _renderCell = (cellData: undefined | string | TStyledValue) => {
   if (!cellData || typeof cellData !== 'object') return cellData;
@@ -62,7 +80,7 @@ export const _sort = (dataIndex: string) => (a: TRow, b: TRow) => {
 };
 
 // exported for tests
-export const _makeColumns = ({ defs }: { defs: TColumnDefs }) =>
+export const _makeColumns = ({ defs, rows }: { defs: TColumnDefs; rows: TRow[] }) =>
   defs.map((def: TColumnDef | string) => {
     let dataIndex: string;
     let key: string;
@@ -80,14 +98,29 @@ export const _makeColumns = ({ defs }: { defs: TColumnDefs }) =>
       if (def.preventSort) sortable = false;
     }
 
+    const options = new Set<string>();
+    rows.forEach(row => {
+      const value = row[dataIndex];
+      if (typeof value === 'string' && value) options.add(value);
+      else if (typeof value === 'object' && !Array.isArray(value) && typeof value.value === 'string') {
+        options.add(value.value);
+      }
+    });
+
     return {
       dataIndex,
       key,
       title,
+      filterDropdown: Boolean(options.size) && _makeFilterDropdown(dataIndex, options),
+      filterIcon: (filtered: boolean) => {
+        if (filtered) return <FaFilter />;
+        return <Icon type="filter" />;
+      },
       onCell: _onCell(dataIndex),
       onHeaderCell: () => ({
         style,
       }),
+      onFilter: _onFilter(dataIndex),
       render: _renderCell,
       sorter: sortable && _sort(dataIndex),
     };
@@ -138,7 +171,7 @@ export default function DetailTable({
     <Table
       key="table"
       size="middle"
-      columns={_makeColumns({ defs: columnDefs })}
+      columns={_makeColumns({ defs: columnDefs, rows: details })}
       dataSource={details}
       pagination={false}
       rowKey={_rowKey}

diff --git a/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.css b/packages/jaeger-ui/src/components/common/DetailsCard/DetailTableDropdown.css
@@ -0,0 +1,65 @@
+/*
+Copyright (c) 2019 Uber Technologies, Inc.
+
+Licensed 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.
+*/
+
+.DetailTableDropdown--Footer {
+  background: white;
+  border: 1px solid #ccc;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.3em;
+}
+
+.DetailTableDropdown--Footer--CancelConfirm {
+  display: flex;
+}
+
+.DetailTableDropdown--Btn {
+  align-items: center;
+  border-radius: 0;
+  color: #ddd;
+  display: flex;
+  padding: 0.3em 0.7em 0.3em 0.6em;
+}
+
+.DetailTableDropdown--Btn ~ .DetailTableDropdown--Btn {
+  margin-left: 0.3em;
+}
+
+.DetailTableDropdown--Btn > *:not(:first-child) {
+  margin-left: 0.3em;
+}
+
+.DetailTableDropdown--Btn.Apply {
+  background: #4c21ce;
+}
+
+.DetailTableDropdown--Btn.Cancel {
+  background: #007272;
+}
+
+.DetailTableDropdown--Btn.Clear {
+  background: #ff2626;
+}
+
+.DetailTableDropdown--Tooltip {
+  max-width: unset;
+  white-space: nowrap;
+}
+
+.DetailTableDropdown--Tooltip--Body {
+  display: flex;
+  flex-direction: column;
+}