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

fix: updated the triggered alert list code (#6127)

Browse Source
This commit is contained in:
rahulkeswani101 2024-10-07 12:14:09 +05:30 committed by GitHub
parent 5ef05891ce
commit ae5e63cc64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 52 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/container/TriggeredAlerts/Filter.tsx
View File

@ -2,7 +2,7 @@
import type { SelectProps } from 'antd';
import { Tag, Tooltip } from 'antd';
import { BaseOptionType } from 'antd/es/select';
import { Dispatch, SetStateAction, useCallback, useMemo, useRef } from 'react';
import { useCallback, useMemo, useRef } from 'react';
import { Alerts } from 'types/api/alerts/getTriggered';
import { Container, Select } from './styles';
@ -31,8 +31,8 @@ function TextOverflowTooltip({
}
function Filter({
setSelectedFilter,
setSelectedGroup,
onSelectedFilterChange,
onSelectedGroupChange,
allAlerts,
selectedGroup,
selectedFilter,
@ -40,27 +40,27 @@ function Filter({
const onChangeSelectGroupHandler = useCallback(
(value: unknown) => {
if (typeof value === 'object' && Array.isArray(value)) {
setSelectedGroup(
onSelectedGroupChange(
value.map((e) => ({
value: e,
})),
);
}
},
[setSelectedGroup],
[onSelectedGroupChange],
);
const onChangeSelectedFilterHandler = useCallback(
(value: unknown) => {
if (typeof value === 'object' && Array.isArray(value)) {
setSelectedFilter(
onSelectedFilterChange(
value.map((e) => ({
value: e,
})),
);
}
},
[setSelectedFilter],
[onSelectedFilterChange],
);
const uniqueLabels: Array<string> = useMemo(() => {
@ -122,8 +122,8 @@ function Filter({
}
interface FilterProps {
setSelectedFilter: Dispatch<SetStateAction<Array<Value>>>;
setSelectedGroup: Dispatch<SetStateAction<Array<Value>>>;
onSelectedFilterChange: (value: Array<Value>) => void;
onSelectedGroupChange: (value: Array<Value>) => void;
allAlerts: Alerts[];
selectedGroup: Array<Value>;
selectedFilter: Array<Value>;

20
frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx
View File

@ -1,4 +1,3 @@
import { useState } from 'react';
import { Alerts } from 'types/api/alerts/getTriggered';
import Filter, { Value } from './Filter';
@ -6,18 +5,21 @@ import FilteredTable from './FilteredTable';
import NoFilterTable from './NoFilterTable';
import { NoTableContainer } from './styles';
function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
function TriggeredAlerts({
allAlerts,
selectedFilter,
selectedGroup,
onSelectedFilterChange,
onSelectedGroupChange,
}: TriggeredAlertsProps): JSX.Element {
return (
<div>
<Filter
allAlerts={allAlerts}
selectedFilter={selectedFilter}
selectedGroup={selectedGroup}
setSelectedFilter={setSelectedFilter}
setSelectedGroup={setSelectedGroup}
onSelectedFilterChange={onSelectedFilterChange}
onSelectedGroupChange={onSelectedGroupChange}
/>
{selectedFilter.length === 0 && selectedGroup.length === 0 ? (
@ -45,6 +47,10 @@ function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
interface TriggeredAlertsProps {
allAlerts: Alerts[];
selectedFilter: Array<Value>;
selectedGroup: Array<Value>;
onSelectedFilterChange: (value: Array<Value>) => void;
onSelectedGroupChange: (value: Array<Value>) => void;
}
export default TriggeredAlerts;

33
frontend/src/container/TriggeredAlerts/index.tsx
View File

@ -4,14 +4,17 @@ import Spinner from 'components/Spinner';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import useAxiosError from 'hooks/useAxiosError';
import { isUndefined } from 'lodash-es';
import { useEffect, useRef } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useQuery } from 'react-query';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { Value } from './Filter';
import TriggerComponent from './TriggeredAlert';
function TriggeredAlerts(): JSX.Element {
const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
const userId = useSelector<AppState, string | undefined>(
(state) => state.app.user?.userId,
);
@ -34,6 +37,14 @@ function TriggeredAlerts(): JSX.Element {
},
);
const handleSelectedFilterChange = useCallback((newFilter: Value[]) => {
setSelectedFilter(newFilter);
}, []);
const handleSelectedGroupChange = useCallback((newGroup: Value[]) => {
setSelectedGroup(newGroup);
}, []);
useEffect(() => {
if (!hasLoggedEvent.current && !isUndefined(alertsResponse.data?.payload)) {
logEvent('Alert: Triggered alert list page visited', {
@ -44,14 +55,30 @@ function TriggeredAlerts(): JSX.Element {
}, [alertsResponse.data?.payload]);
if (alertsResponse.error) {
return <TriggerComponent allAlerts={[]} />;
return (
<TriggerComponent
allAlerts={[]}
selectedFilter={selectedFilter}
selectedGroup={selectedGroup}
onSelectedFilterChange={handleSelectedFilterChange}
onSelectedGroupChange={handleSelectedGroupChange}
/>
);
}
if (alertsResponse.isFetching || alertsResponse?.data?.payload === undefined) {
return <Spinner height="75vh" tip="Loading Alerts..." />;
}
return <TriggerComponent allAlerts={alertsResponse?.data?.payload || []} />;
return (
<TriggerComponent
allAlerts={alertsResponse?.data?.payload || []}
selectedFilter={selectedFilter}
selectedGroup={selectedGroup}
onSelectedFilterChange={handleSelectedFilterChange}
onSelectedGroupChange={handleSelectedGroupChange}
/>
);
}
export default TriggeredAlerts;