GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 17:29:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yunus M 2024-10-15 19:16:43 +05:30 committed by GitHub
parent d0965a24c5
commit 18e240e3d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 74 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.styles.scss
View File

@ -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;
}
}
}
}

75
frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx
View File

@ -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>
<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>
<Search
className="anomaly-alert-evaluation-view-series-list-search"
placeholder="Search a series"
allowClear
onChange={handleSearchValueChange}
/>
{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>
)}