diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx index 3b95dd91599..55be6417742 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx @@ -1,13 +1,14 @@ import { css } from '@emotion/css'; -import { ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react'; +import { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { TableAutoCellOptions, TableCellDisplayMode } from '@grafana/schema'; import { useStyles2 } from '../../../../themes'; +import { t } from '../../../../utils/i18n'; import { IconButton } from '../../../IconButton/IconButton'; import { TableCellInspectorMode } from '../../TableCellInspector'; -import { CellColors, TableCellNGProps } from '../types'; +import { CellColors, FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellNGProps } from '../types'; import { getCellColors, getTextAlign } from '../utils'; import { ActionsCell } from './ActionsCell'; @@ -34,6 +35,7 @@ export function TableCellNG(props: TableCellNGProps) { cellInspect, getActions, rowBg, + onCellFilterAdded, } = props; const { config: fieldConfig } = field; @@ -41,6 +43,8 @@ export function TableCellNG(props: TableCellNGProps) { const cellOptions = fieldConfig.custom?.cellOptions ?? defaultCellOptions; const { type: cellType } = cellOptions; + const showFilters = field.config.filterable && onCellFilterAdded; + const isRightAligned = getTextAlign(field) === 'flex-end'; const displayValue = field.display!(value); let colors: CellColors = { bgColor: '', textColor: '', bgHoverColor: '' }; @@ -160,25 +164,53 @@ export function TableCellNG(props: TableCellNGProps) { } }; + const onFilterFor = useCallback(() => { + if (onCellFilterAdded) { + onCellFilterAdded({ key: field.name, operator: FILTER_FOR_OPERATOR, value: String(value ?? '') }); + } + }, [field.name, onCellFilterAdded, value]); + + const onFilterOut = useCallback(() => { + if (onCellFilterAdded) { + onCellFilterAdded({ key: field.name, operator: FILTER_OUT_OPERATOR, value: String(value ?? '') }); + } + }, [field.name, onCellFilterAdded, value]); + return (
{cell} - {cellInspect && isHovered && ( + {isHovered && (
- { - setContextMenuProps({ - value: String(value ?? ''), - mode: - cellType === TableCellDisplayMode.JSONView - ? TableCellInspectorMode.code - : TableCellInspectorMode.text, - }); - setIsInspecting(true); - }} - /> + {cellInspect && ( + { + setContextMenuProps({ + value: String(value ?? ''), + mode: + cellType === TableCellDisplayMode.JSONView + ? TableCellInspectorMode.code + : TableCellInspectorMode.text, + }); + setIsInspecting(true); + }} + /> + )} + {showFilters && ( + <> + + + + )}
)}
diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx index 7b9bff47547..0daa8754270 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx @@ -74,6 +74,7 @@ export function TableNG(props: TableNGProps) { height, initialSortBy, noHeader, + onCellFilterAdded, onColumnResize, onSortByChange, width, @@ -386,6 +387,7 @@ export function TableNG(props: TableNGProps) { filter, headerCellRefs, isCountRowsSet, + onCellFilterAdded, onSortByChange, osContext, rows, @@ -596,6 +598,7 @@ export function mapFrameToDataGrid({ filter, headerCellRefs, isCountRowsSet, + onCellFilterAdded, onSortByChange, osContext, rows, @@ -762,6 +765,7 @@ export function mapFrameToDataGrid({ cellInspect={cellInspect} getActions={getActions} rowBg={rowBg} + onCellFilterAdded={onCellFilterAdded} /> ); }, diff --git a/packages/grafana-ui/src/components/Table/TableNG/types.ts b/packages/grafana-ui/src/components/Table/TableNG/types.ts index 7bdc40fce38..2929ad220b9 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/types.ts +++ b/packages/grafana-ui/src/components/Table/TableNG/types.ts @@ -148,6 +148,7 @@ export interface TableCellNGProps { timeRange: TimeRange; value: TableCellValue; rowBg: Function | undefined; + onCellFilterAdded?: TableFilterActionCallback; } /* ------------------------- Specialized Cell Props ------------------------- */