Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF 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 classNames from 'classnames';
import React from 'react';
import ReactTable from 'react-table';
import { TableCell } from '../../../components';
import { caseInsensitiveContains, filterMap } from '../../../utils';
import { DruidFilter } from '../../../utils/ingestion-spec';
import { HeaderAndRows, SampleEntry } from '../../../utils/sampler';
import './filter-table.scss';
export function filterTableSelectedColumnName(
sampleData: HeaderAndRows,
selectedFilter: DruidFilter | undefined,
): string | undefined {
if (!selectedFilter) return;
const selectedFilterName = selectedFilter.dimension;
if (!sampleData.header.includes(selectedFilterName)) return;
return selectedFilterName;
}
export interface FilterTableProps {
sampleData: HeaderAndRows;
columnFilter: string;
dimensionFilters: DruidFilter[];
selectedFilterName: string | undefined;
onShowGlobalFilter: () => void;
onFilterSelect: (filter: DruidFilter, index: number) => void;
}
export const FilterTable = React.memo(function FilterTable(props: FilterTableProps) {
const {
sampleData,
columnFilter,
dimensionFilters,
selectedFilterName,
onShowGlobalFilter,
onFilterSelect,
} = props;
return (
<ReactTable
className="filter-table -striped -highlight"
data={sampleData.rows}
columns={filterMap(sampleData.header, (columnName, i) => {
Iif (!caseInsensitiveContains(columnName, columnFilter)) return;
const timestamp = columnName === '__time';
const filterIndex = dimensionFilters.findIndex(f => f.dimension === columnName);
const filter = dimensionFilters[filterIndex];
const columnClassName = classNames({
filtered: filter,
selected: columnName === selectedFilterName,
});
return {
Header: (
<div
className={classNames('clickable')}
onClick={() => {
if (timestamp) {
onShowGlobalFilter();
} else if (filter) {
onFilterSelect(filter, filterIndex);
} else {
onFilterSelect({ type: 'selector', dimension: columnName, value: '' }, -1);
}
}}
>
<div className="column-name">{columnName}</div>
<div className="column-detail">{filter ? `(filtered)` : ''} </div>
</div>
),
headerClassName: columnClassName,
className: columnClassName,
id: String(i),
accessor: (row: SampleEntry) => (row.parsed ? row.parsed[columnName] : null),
Cell: row => <TableCell value={timestamp ? new Date(row.value) : row.value} />,
};
})}
defaultPageSize={50}
showPagination={false}
sortable={false}
/>
);
});
|