All files / src/views/load-data-view/filter-table filter-table.tsx

63.89% Statements 23/36
25% Branches 4/16
57.14% Functions 4/7
71.88% Lines 23/32

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)` : ''}&nbsp;</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}
    />
  );
});