feat: search series in anomaly response data

SigNoz · Oct 14, 2024 · 150f243 · 150f243
1 parent 90ae552
commit 150f243
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 21 deletions.
diff --git a/frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.styles.scss b/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;
+ }
  }
  }
  }

diff --git a/frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx b/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
- level={5}
- className="anomaly-alert-evaluation-view-series-list-title"
- >
- Select a series
- </Typography.Title>
+ <Search
+ className="anomaly-alert-evaluation-view-series-list-search"
+ placeholder="Search a series"
+ allowClear
+ onChange={handleSearchValueChange}
+ />
+
  <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) => (
+ {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>
  )}