feat: added global search on table panel

SigNoz · Sep 8, 2024 · 62a2b3f · 62a2b3f
1 parent 12f2f80
commit 62a2b3f
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 4 deletions.
diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -234,6 +234,8 @@ function WidgetGraphComponent({
 		});
 	};
 
+	const [searchTerm, setSearchTerm] = useState<string>('');
+
 	const loadingState =
 		(queryResponse.isLoading || queryResponse.status === 'idle') &&
 		widget.panelTypes !== PANEL_TYPES.LIST;
@@ -317,6 +319,7 @@ function WidgetGraphComponent({
 					isWarning={isWarning}
 					isFetchingResponse={isFetchingResponse}
 					tableProcessedDataRef={tableProcessedDataRef}
+					setSearchTerm={setSearchTerm}
 				/>
 			</div>
 			{queryResponse.isLoading && widget.panelTypes !== PANEL_TYPES.LIST && (
@@ -337,6 +340,7 @@ function WidgetGraphComponent({
 						onDragSelect={onDragSelect}
 						tableProcessedDataRef={tableProcessedDataRef}
 						customTooltipElement={customTooltipElement}
+						searchTerm={searchTerm}
 					/>
 				</div>
 			)}

diff --git a/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx b/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
@@ -11,7 +11,7 @@ import {
 	MoreOutlined,
 	WarningOutlined,
 } from '@ant-design/icons';
-import { Dropdown, MenuProps, Tooltip, Typography } from 'antd';
+import { Dropdown, Input, MenuProps, Tooltip, Typography } from 'antd';
 import Spinner from 'components/Spinner';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -51,6 +51,7 @@ interface IWidgetHeaderProps {
 	isWarning: boolean;
 	isFetchingResponse: boolean;
 	tableProcessedDataRef: React.MutableRefObject<RowData[]>;
+	setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
 }
 
 function WidgetHeader({
@@ -67,6 +68,7 @@ function WidgetHeader({
 	isWarning,
 	isFetchingResponse,
 	tableProcessedDataRef,
+	setSearchTerm,
 }: IWidgetHeaderProps): JSX.Element | null {
 	const onEditHandler = useCallback((): void => {
 		const widgetId = widget.id;
@@ -208,6 +210,19 @@ function WidgetHeader({
 			>
 				{title}
 			</Typography.Text>
+			{widget.panelTypes === PANEL_TYPES.TABLE && (
+				<Input.Search
+					placeholder="Search over all the cloumns..."
+					key={widget.id}
+					onSearch={(value): void => setSearchTerm(value)}
+					onChange={(e): void => {
+						console.log(e.target.value);
+						setSearchTerm(e.target.value || '');
+					}}
+					allowClear
+					style={{ width: '40%' }}
+				/>
+			)}
 			<div className="widget-header-actions">
 				<div className="widget-api-actions">{threshold}</div>
 				{isFetchingResponse && !queryResponse.isError && (

diff --git a/frontend/src/container/GridTableComponent/types.ts b/frontend/src/container/GridTableComponent/types.ts
@@ -13,6 +13,7 @@ export type GridTableComponentProps = {
 	thresholds?: ThresholdProps[];
 	columnUnits?: ColumnUnit;
 	tableProcessedDataRef?: React.MutableRefObject<RowData[]>;
+	searchTerm?: string;
 } & Pick<LogsExplorerTableProps, 'data'> &
 	Omit<TableProps<RowData>, 'columns' | 'dataSource'>;
 

diff --git a/frontend/src/container/PanelWrapper/PanelWrapper.tsx b/frontend/src/container/PanelWrapper/PanelWrapper.tsx
@@ -16,6 +16,7 @@ function PanelWrapper({
 	selectedGraph,
 	tableProcessedDataRef,
 	customTooltipElement,
+	searchTerm,
 }: PanelWrapperProps): JSX.Element {
 	const Component = PanelTypeVsPanelWrapper[
 		selectedGraph || widget.panelTypes
@@ -39,6 +40,7 @@ function PanelWrapper({
 			selectedGraph={selectedGraph}
 			tableProcessedDataRef={tableProcessedDataRef}
 			customTooltipElement={customTooltipElement}
+			searchTerm={searchTerm}
 		/>
 	);
 }

diff --git a/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx b/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx
@@ -7,6 +7,7 @@ function TablePanelWrapper({
 	widget,
 	queryResponse,
 	tableProcessedDataRef,
+	searchTerm,
 }: PanelWrapperProps): JSX.Element {
 	const panelData =
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
@@ -18,6 +19,7 @@ function TablePanelWrapper({
 			thresholds={thresholds}
 			columnUnits={widget.columnUnits}
 			tableProcessedDataRef={tableProcessedDataRef}
+			searchTerm={searchTerm}
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...GRID_TABLE_CONFIG}
 		/>

diff --git a/frontend/src/container/PanelWrapper/panelWrapper.types.ts b/frontend/src/container/PanelWrapper/panelWrapper.types.ts
@@ -23,6 +23,7 @@ export type PanelWrapperProps = {
 	onDragSelect: (start: number, end: number) => void;
 	selectedGraph?: PANEL_TYPES;
 	tableProcessedDataRef?: React.MutableRefObject<RowData[]>;
+	searchTerm?: string;
 	customTooltipElement?: HTMLDivElement;
 };
 

diff --git a/frontend/src/container/QueryTable/QueryTable.intefaces.ts b/frontend/src/container/QueryTable/QueryTable.intefaces.ts
@@ -18,4 +18,5 @@ export type QueryTableProps = Omit<
 	downloadOption?: DownloadOptions;
 	columns?: ColumnsType<RowData>;
 	dataSource?: RowData[];
+	searchTerm?: string;
 };
diff --git a/frontend/src/container/QueryTable/QueryTable.tsx b/frontend/src/container/QueryTable/QueryTable.tsx
@@ -3,8 +3,11 @@ import './QueryTable.styles.scss';
 import { ResizeTable } from 'components/ResizeTable';
 import Download from 'container/Download/Download';
 import { IServiceName } from 'container/MetricsApplication/Tabs/types';
-import { createTableColumnsFromQuery } from 'lib/query/createTableColumnsFromQuery';
-import { useMemo } from 'react';
+import {
+	createTableColumnsFromQuery,
+	RowData,
+} from 'lib/query/createTableColumnsFromQuery';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { QueryTableProps } from './QueryTable.intefaces';
@@ -19,6 +22,7 @@ export function QueryTable({
 	downloadOption,
 	columns,
 	dataSource,
+	searchTerm,
 	...props
 }: QueryTableProps): JSX.Element {
 	const { isDownloadEnabled = false, fileName = '' } = downloadOption || {};
@@ -54,6 +58,29 @@ export function QueryTable({
 		hideOnSinglePage: true,
 	};
 
+	const [filterTable, setFilterTable] = useState<RowData[] | null>(null);
+	const [baseData] = useState(newDataSource);
+
+	const onTableSearch = useCallback(
+		(value?: string): void => {
+			console.log('searchValue', value);
+			const filterTable = baseData.filter((o) =>
+				Object.keys(o).some((k) =>
+					String(o[k])
+						.toLowerCase()
+						.includes(value?.toLowerCase() || ''),
+				),
+			);
+
+			setFilterTable(filterTable);
+		},
+		[baseData],
+	);
+
+	useEffect(() => {
+		onTableSearch(searchTerm);
+	}, [baseData, onTableSearch, searchTerm]);
+
 	return (
 		<div className="query-table">
 			{isDownloadEnabled && (
@@ -68,9 +95,11 @@ export function QueryTable({
 			<ResizeTable
 				columns={tableColumns}
 				tableLayout="fixed"
-				dataSource={newDataSource}
+				// dataSource={newDataSource}
+				dataSource={filterTable === null ? baseData : filterTable}
 				scroll={{ x: true }}
 				pagination={paginationConfig}
+				sticky
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...props}
 			/>