feat: added right panel graphs in overview page

frontend/src/AppRoutes/routes.ts

@@ -409,10 +409,10 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.MESSAGING_QUEUES_CELERY_OVERVIEW,
+		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
 		exact: true,
 		component: MessagingQueues,
-		key: 'MESSAGING_QUEUES_CELERY_OVERVIEW',
+		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.styles.scss

@@ -10,6 +10,9 @@
 
 		.config-select-option {
 			width: 100%;
+			min-width: 160px;
+			max-width: fit-content;
+
 			.ant-select-selector {
 				display: flex;
 				min-height: 32px;
@@ -23,6 +26,10 @@
 			}
 		}
 	}
+
+	.copy-url-btn {
+		flex-shrink: 0;
+	}
 }
 
 .lightMode {

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,7 +1,7 @@
 import './CeleryOverviewConfigOptions.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Button, Select, Spin, Tooltip } from 'antd';
+import { Button, Row, Select, Spin, Tooltip } from 'antd';
 import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
@@ -18,7 +18,7 @@ import { useCopyToClipboard } from 'react-use';
 interface SelectOptionConfig {
 	placeholder: string;
 	queryParam: QueryParams;
-	filterType: 'serviceName' | 'spanName' | 'msgSystem';
+	filterType: string | string[];
 }
 
 function FilterSelect({
@@ -29,13 +29,14 @@ function FilterSelect({
 	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
 		filterType,
 	);
+
 	const urlQuery = useUrlQuery();
 	const history = useHistory();
 	const location = useLocation();
 
 	return (
 		<Select
-			key={filterType}
+			key={filterType.toString()}
 			placeholder={placeholder}
 			showSearch
 			mode="multiple"
@@ -44,6 +45,7 @@ function FilterSelect({
 			className="config-select-option"
 			onSearch={handleSearch}
 			maxTagCount={4}
+			allowClear
 			maxTagPlaceholder={SelectMaxTagPlaceholder}
 			value={getValuesFromQueryParams(queryParam, urlQuery) || []}
 			notFoundContent={
@@ -74,16 +76,26 @@ function CeleryOverviewConfigOptions(): JSX.Element {
 			queryParam: QueryParams.service,
 			filterType: 'serviceName',
 		},
-		// {
-		// 	placeholder: 'Span Name',
-		// 	queryParam: QueryParams.spanName,
-		// 	filterType: 'spanName',
-		// },
-		// {
-		// 	placeholder: 'Msg System',
-		// 	queryParam: QueryParams.msgSystem,
-		// 	filterType: 'msgSystem',
-		// },
+		{
+			placeholder: 'Span Name',
+			queryParam: QueryParams.spanName,
+			filterType: 'name',
+		},
+		{
+			placeholder: 'Msg System',
+			queryParam: QueryParams.msgSystem,
+			filterType: 'messaging.system',
+		},
+		{
+			placeholder: 'Destination',
+			queryParam: QueryParams.destination,
+			filterType: ['messaging.destination.name', 'messaging.destination'],
+		},
+		{
+			placeholder: 'Kind',
+			queryParam: QueryParams.kindString,
+			filterType: 'kind_string',
+		},
 	];
 
 	const handleShareURL = (): void => {
@@ -96,16 +108,16 @@ function CeleryOverviewConfigOptions(): JSX.Element {
 
 	return (
 		<div className="celery-overview-filters">
-			<div className="celery-filters">
+			<Row className="celery-filters">
 				{selectConfigs.map((config) => (
 					<FilterSelect
-						key={config.filterType}
+						key={config.filterType.toString()}
 						placeholder={config.placeholder}
 						queryParam={config.queryParam}
 						filterType={config.filterType}
 					/>
 				))}
-			</div>
+			</Row>
 			<Tooltip title="Share this" arrow={false}>
 				<Button
 					className="periscope-btn copy-url-btn"

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -1,19 +1,33 @@
 import './CeleryOverviewTable.styles.scss';
 
-import { LoadingOutlined } from '@ant-design/icons';
+import { LoadingOutlined, SearchOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Spin, TableColumnsType, Tooltip, Typography } from 'antd';
+import {
+	Button,
+	Input,
+	InputRef,
+	Progress,
+	Space,
+	Spin,
+	TableColumnsType,
+	TableColumnType,
+	Tooltip,
+	Typography,
+} from 'antd';
+import { FilterDropdownProps } from 'antd/lib/table/interface';
 import {
 	getQueueOverview,
 	QueueOverviewResponse,
 } from 'api/messagingQueues/celery/getQueueOverview';
 import { isNumber } from 'chart.js/helpers';
 import { ResizeTable } from 'components/ResizeTable';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import useDragColumns from 'hooks/useDragColumns';
 import { getDraggedColumns } from 'hooks/useDragColumns/utils';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { isEmpty } from 'lodash-es';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -55,6 +69,74 @@ function ProgressRender(item: string | number): JSX.Element {
 	);
 }
 
+const getColumnSearchProps = (
+	searchInput: React.RefObject<InputRef>,
+	handleReset: (
+		clearFilters: () => void,
+		confirm: FilterDropdownProps['confirm'],
+	) => void,
+	handleSearch: (selectedKeys: string[], confirm: () => void) => void,
+	dataIndex?: string,
+): TableColumnType<RowData> => ({
+	filterDropdown: ({
+		setSelectedKeys,
+		selectedKeys,
+		confirm,
+		clearFilters,
+		close,
+	}): JSX.Element => (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div style={{ padding: 8 }} onKeyDown={(e): void => e.stopPropagation()}>
+			<Input
+				ref={searchInput}
+				placeholder={`Search ${dataIndex}`}
+				value={selectedKeys[0]}
+				onChange={(e): void =>
+					setSelectedKeys(e.target.value ? [e.target.value] : [])
+				}
+				onPressEnter={(): void => handleSearch(selectedKeys as string[], confirm)}
+				style={{ marginBottom: 8, display: 'block' }}
+			/>
+			<Space>
+				<Button
+					type="primary"
+					size="small"
+					onClick={(): void => handleSearch(selectedKeys as string[], confirm)}
+					icon={<SearchOutlined />}
+				>
+					Search
+				</Button>
+				<Button
+					onClick={(): void => clearFilters && handleReset(clearFilters, confirm)}
+					size="small"
+					style={{ width: 90 }}
+				>
+					Reset
+				</Button>
+				<Button
+					type="link"
+					size="small"
+					onClick={(): void => {
+						close();
+					}}
+				>
+					close
+				</Button>
+			</Space>
+		</div>
+	),
+	filterIcon: (filtered: boolean): JSX.Element => (
+		<SearchOutlined
+			style={{ color: filtered ? Color.BG_ROBIN_500 : undefined }}
+		/>
+	),
+	onFilter: (value, record): boolean =>
+		record[dataIndex || '']
+			.toString()
+			.toLowerCase()
+			.includes((value as string).toLowerCase()),
+});
+
 function getColumns(data: RowData[]): TableColumnsType<RowData> {
 	if (data?.length === 0) {
 		return [];
@@ -235,12 +317,11 @@ type FilterConfig = {
 
 function makeFilters(urlQuery: URLSearchParams): Filter[] {
 	const filterConfigs: FilterConfig[] = [
-		{ paramName: 'destination', key: 'destination', operator: 'in' },
-		{ paramName: 'queue', key: 'queue', operator: 'in' },
-		{ paramName: 'kind_string', key: 'kind_string', operator: 'in' },
-		{ paramName: 'service', key: 'service.name', operator: 'in' },
-		{ paramName: 'span_name', key: 'span_name', operator: 'in' },
-		{ paramName: 'messaging_system', key: 'messaging_system', operator: 'in' },
+		{ paramName: QueryParams.destination, key: 'destination', operator: 'in' },
+		{ paramName: QueryParams.msgSystem, key: 'queue', operator: 'in' },
+		{ paramName: QueryParams.kindString, key: 'kind_string', operator: 'in' },
+		{ paramName: QueryParams.service, key: 'service.name', operator: 'in' },
+		{ paramName: QueryParams.spanName, key: 'name', operator: 'in' },
 	];
 
 	return filterConfigs
@@ -260,7 +341,11 @@ function makeFilters(urlQuery: URLSearchParams): Filter[] {
 		.filter((filter): filter is Filter => filter !== null);
 }
 
-export default function CeleryOverviewTable(): JSX.Element {
+export default function CeleryOverviewTable({
+	onRowClick,
+}: {
+	onRowClick: (record: RowData) => void;
+}): JSX.Element {
 	const [tableData, setTableData] = useState<RowData[]>([]);
 
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
@@ -271,6 +356,8 @@ export default function CeleryOverviewTable(): JSX.Element {
 		onSuccess: (data) => {
 			if (data?.payload) {
 				setTableData(getTableData(data?.payload));
+			} else if (isEmpty(data?.payload)) {
+				setTableData([]);
 			}
 		},
 	});
@@ -293,11 +380,42 @@ export default function CeleryOverviewTable(): JSX.Element {
 		LOCALSTORAGE.CELERY_OVERVIEW_COLUMNS,
 	);
 
+	const [searchText, setSearchText] = useState('');
+	const searchInput = useRef<InputRef>(null);
+
+	const handleSearch = (
+		selectedKeys: string[],
+		confirm: FilterDropdownProps['confirm'],
+	): void => {
+		confirm();
+		setSearchText(selectedKeys[0]);
+	};
+
+	const handleReset = (
+		clearFilters: () => void,
+		confirm: FilterDropdownProps['confirm'],
+	): void => {
+		clearFilters();
+		setSearchText('');
+		confirm();
+	};
+
 	const columns = useMemo(
-		() => getDraggedColumns<RowData>(getColumns(tableData), draggedColumns),
+		() =>
+			getDraggedColumns<RowData>(
+				getColumns(tableData).map((item) => ({
+					...item,
+					...getColumnSearchProps(
+						searchInput,
+						handleReset,
+						handleSearch,
+						item.key?.toString(),
+					),
+				})),
+				draggedColumns,
+			),
 		[tableData, draggedColumns],
 	);
-
 	const handleDragColumn = useCallback(
 		(fromIndex: number, toIndex: number) =>
 			onDragColumns(columns, fromIndex, toIndex),
@@ -316,17 +434,44 @@ export default function CeleryOverviewTable(): JSX.Element {
 	);
 
 	const handleRowClick = (record: RowData): void => {
-		console.log(record);
+		onRowClick(record);
 	};
 
+	const getFilteredData = useCallback(
+		(data: RowData[]): RowData[] => {
+			if (!searchText) return data;
+
+			const searchLower = searchText.toLowerCase();
+			return data.filter((record) =>
+				Object.values(record).some(
+					(value) =>
+						value !== undefined &&
+						value.toString().toLowerCase().includes(searchLower),
+				),
+			);
+		},
+		[searchText],
+	);
+
+	const filteredData = useMemo(() => getFilteredData(tableData), [
+		getFilteredData,
+		tableData,
+	]);
+
 	return (
 		<div style={{ width: '100%' }}>
+			<Input.Search
+				placeholder="Search across all columns"
+				onChange={(e): void => setSearchText(e.target.value)}
+				value={searchText}
+				allowClear
+			/>
 			<ResizeTable
 				className="celery-overview-table"
 				pagination={paginationConfig}
 				size="middle"
 				columns={columns}
-				dataSource={tableData}
+				dataSource={filteredData}
 				bordered={false}
 				loading={{
 					spinning: isLoading,