feat: search series in anomaly response data (#6185)

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.styles.scss

@@ -32,7 +32,7 @@
 		flex-direction: column;
 		gap: 8px;
 		width: 240px;
-		padding: 8px;
+		padding: 0px 8px;
 		height: 100%;
 
 		.anomaly-alert-evaluation-view-series-list {
@@ -41,6 +41,10 @@
 			gap: 8px;
 			height: 100%;
 
+			.anomaly-alert-evaluation-view-series-list-search {
+				margin-bottom: 16px;
+			}
+
 			.anomaly-alert-evaluation-view-series-list-title {
 				margin-top: 12px;
 				font-size: 13px !important;
@@ -61,6 +65,20 @@
 
 					cursor: pointer;
 				}
+
+				&::-webkit-scrollbar {
+					width: 0.1rem;
+				}
+				&::-webkit-scrollbar-corner {
+					background: transparent;
+				}
+				&::-webkit-scrollbar-thumb {
+					background: rgb(136, 136, 136);
+					border-radius: 0.625rem;
+				}
+				&::-webkit-scrollbar-track {
+					background: transparent;
+				}
 			}
 		}
 	}

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -2,7 +2,9 @@ import 'uplot/dist/uPlot.min.css';
 import './AnomalyAlertEvaluationView.styles.scss';
 
 import { Checkbox, Typography } from 'antd';
+import Search from 'antd/es/input/Search';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useResizeObserver } from 'hooks/useDimensions';
 import getAxes from 'lib/uPlotLib/utils/getAxes';
 import { getUplotChartDataForAnomalyDetection } from 'lib/uPlotLib/utils/getUplotChartData';
@@ -63,12 +65,19 @@ function AnomalyAlertEvaluationView({
 	const [seriesData, setSeriesData] = useState<any>({});
 	const [selectedSeries, setSelectedSeries] = useState<string | null>(null);
 
+	const [filteredSeriesKeys, setFilteredSeriesKeys] = useState<string[]>([]);
+	const [allSeries, setAllSeries] = useState<string[]>([]);
+
 	const graphRef = useRef<HTMLDivElement>(null);
 	const dimensions = useResizeObserver(graphRef);
 
 	useEffect(() => {
 		const chartData = getUplotChartDataForAnomalyDetection(data);
 		setSeriesData(chartData);
+
+		setAllSeries(Object.keys(chartData));
+
+		setFilteredSeriesKeys(Object.keys(chartData));
 	}, [data]);
 
 	useEffect(() => {
@@ -130,8 +139,6 @@ function AnomalyAlertEvaluationView({
 		},
 	};
 
-	const allSeries = Object.keys(seriesData);
-
 	const initialData = allSeries.length
 		? [
 				seriesData[allSeries[0]].data[0], // Shared X-axis
@@ -210,6 +217,27 @@ function AnomalyAlertEvaluationView({
 		axes: getAxes(isDarkMode, yAxisUnit),
 	};
 
+	const handleSearch = (searchText: string): void => {
+		if (!searchText || searchText.length === 0) {
+			setFilteredSeriesKeys(allSeries);
+			return;
+		}
+
+		const filteredSeries = allSeries.filter((series) =>
+			series.toLowerCase().includes(searchText.toLowerCase()),
+		);
+
+		setFilteredSeriesKeys(filteredSeries);
+	};
+
+	const handleSearchValueChange = useDebouncedFn((event): void => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		const value = event?.target?.value || '';
+
+		handleSearch(value);
+	}, 300);
+
 	return (
 		<div className="anomaly-alert-evaluation-view">
 			<div
@@ -237,25 +265,28 @@ function AnomalyAlertEvaluationView({
 				<div className="anomaly-alert-evaluation-view-series-selection">
 					{allSeries.length > 1 && (
 						<div className="anomaly-alert-evaluation-view-series-list">
-							<Typography.Title
+							<Search
-								level={5}
+								className="anomaly-alert-evaluation-view-series-list-search"
-								className="anomaly-alert-evaluation-view-series-list-title"
+								placeholder="Search a series"
-							>
+								allowClear
-								Select a series
+								onChange={handleSearchValueChange}
-							</Typography.Title>
+							/>
-							<div className="anomaly-alert-evaluation-view-series-list-items">
-								<Checkbox
-									className="anomaly-alert-evaluation-view-series-list-item"
-									type="checkbox"
-									name="series"
-									value="all"
-									checked={selectedSeries === null}
-									onChange={(): void => handleSeriesChange(null)}
-								>
-									Show All
-								</Checkbox>
 
-								{allSeries.map((seriesKey) => (
+							<div className="anomaly-alert-evaluation-view-series-list-items">
+								{filteredSeriesKeys.length > 0 && (
+									<Checkbox
+										className="anomaly-alert-evaluation-view-series-list-item"
+										type="checkbox"
+										name="series"
+										value="all"
+										checked={selectedSeries === null}
+										onChange={(): void => handleSeriesChange(null)}
+									>
+										Show All
+									</Checkbox>
+								)}
+
+								{filteredSeriesKeys.map((seriesKey) => (
 									<Checkbox
 										className="anomaly-alert-evaluation-view-series-list-item"
 										key={seriesKey}
@@ -268,6 +299,10 @@ function AnomalyAlertEvaluationView({
 										{seriesKey}
 									</Checkbox>
 								))}
+
+								{filteredSeriesKeys.length === 0 && (
+									<Typography>No series found</Typography>
+								)}
 							</div>
 						</div>
 					)}