GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-25 08:54:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: triggered alerts is migrated to useQuery (#2814)

Browse Source 
* feat: alerts is migrated to useQuery

* chore: review comments is updated

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
Co-authored-by: Rajat Dabade <rajat@signoz.io>
This commit is contained in:
Palash Gupta 2023-09-07 18:18:26 +05:30 committed by GitHub
parent f450d71a25
commit 14bbc609d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/constants/reactQueryKeys.ts
View File

@ -2,4 +2,5 @@ export const REACT_QUERY_KEY = {
GET_ALL_LICENCES: 'GET_ALL_LICENCES',
GET_QUERY_RANGE: 'GET_QUERY_RANGE',
GET_ALL_DASHBOARDS: 'GET_ALL_DASHBOARDS',
GET_TRIGGERED_ALERTS: 'GET_TRIGGERED_ALERTS',
};

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

@ -1,5 +1,3 @@
import getTriggeredApi from 'api/alerts/getTriggered';
import useInterval from 'hooks/useInterval';
import { useState } from 'react';
import { Alerts } from 'types/api/alerts/getTriggered';
@ -9,68 +7,34 @@ import NoFilterTable from './NoFilterTable';
import { NoTableContainer } from './styles';
function TriggeredAlerts({ allAlerts }: TriggeredAlertsProps): JSX.Element {
const [allInitialAlerts, setInitialAlerts] = useState(allAlerts || []);
useInterval(() => {
(async (): Promise<void> => {
const response = await getTriggeredApi({
active: true,
inhibited: true,
silenced: false,
});
if (response.statusCode === 200 && response.payload !== null) {
// commented reduce() call as we no longer use /alerts/groups
// from alertmanager which needed re-grouping on client side
// const initialAlerts: Alerts[] = [];
// const allAlerts: Alerts[] = response.payload.reduce((acc, cur) => {
// return [...acc, ...cur.alerts];
// }, initialAlerts);
setInitialAlerts(response.payload);
}
})();
}, 30000);
const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
return (
<div>
<Filter
{...{
allAlerts: allInitialAlerts,
selectedFilter,
selectedGroup,
setSelectedFilter,
setSelectedGroup,
}}
allAlerts={allAlerts}
selectedFilter={selectedFilter}
selectedGroup={selectedGroup}
setSelectedFilter={setSelectedFilter}
setSelectedGroup={setSelectedGroup}
/>
{selectedFilter.length === 0 && selectedGroup.length === 0 ? (
<NoTableContainer>
<NoFilterTable
selectedFilter={selectedFilter}
allAlerts={allInitialAlerts}
/>
<NoFilterTable selectedFilter={selectedFilter} allAlerts={allAlerts} />
</NoTableContainer>
) : (
<div>
{selectedFilter.length !== 0 && selectedGroup.length === 0 ? (
<NoTableContainer>
<NoFilterTable
selectedFilter={selectedFilter}
allAlerts={allInitialAlerts}
/>
<NoFilterTable selectedFilter={selectedFilter} allAlerts={allAlerts} />
</NoTableContainer>
) : (
<FilteredTable
{...{
allAlerts: allInitialAlerts,
selectedFilter,
selectedGroup,
}}
allAlerts={allAlerts}
selectedFilter={selectedFilter}
selectedGroup={selectedGroup}
/>
)}
</div>

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

@ -1,91 +1,43 @@
import getTriggeredApi from 'api/alerts/getTriggered';
import Spinner from 'components/Spinner';
import { State } from 'hooks/useFetch';
import { useNotifications } from 'hooks/useNotifications';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PayloadProps } from 'types/api/alerts/getTriggered';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import useAxiosError from 'hooks/useAxiosError';
import { useQuery } from 'react-query';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import TriggerComponent from './TriggeredAlert';
function TriggeredAlerts(): JSX.Element {
const [groupState, setGroupState] = useState<State<PayloadProps>>({
error: false,
errorMessage: '',
loading: true,
success: false,
payload: [],
});
const { t } = useTranslation(['common']);
const { notifications } = useNotifications();
const userId = useSelector<AppState, string | undefined>(
(state) => state.app.user?.userId,
);
const fetchData = useCallback(async () => {
try {
setGroupState((state) => ({
...state,
loading: true,
}));
const handleError = useAxiosError();
const response = await getTriggeredApi({
active: true,
inhibited: true,
silenced: false,
});
const alertsResponse = useQuery(
[REACT_QUERY_KEY.GET_TRIGGERED_ALERTS, userId],
{
queryFn: () =>
getTriggeredApi({
active: true,
inhibited: true,
silenced: false,
}),
refetchInterval: 30000,
onError: handleError,
},
);
if (response.statusCode === 200) {
setGroupState((state) => ({
...state,
loading: false,
payload: response.payload || [],
}));
} else {
setGroupState((state) => ({
...state,
loading: false,
error: true,
errorMessage: response.error || 'Something went wrong',
}));
}
} catch (error) {
setGroupState((state) => ({
...state,
error: true,
loading: false,
errorMessage: 'Something went wrong',
}));
}
}, []);
useEffect(() => {
fetchData();
}, [fetchData]);
useEffect(() => {
if (groupState.error) {
notifications.error({
message: groupState.errorMessage || t('something_went_wrong'),
});
}
}, [groupState.error, groupState.errorMessage, t, notifications]);
if (groupState.error) {
if (alertsResponse.error) {
return <TriggerComponent allAlerts={[]} />;
}
if (groupState.loading || groupState.payload === undefined) {
if (alertsResponse.isFetching || alertsResponse?.data?.payload === undefined) {
return <Spinner height="75vh" tip="Loading Alerts..." />;
}
// commented the reduce() call as we no longer use /alerts/groups
// API from alert manager, which returns a group for each receiver
// const initialAlerts: Alerts[] = [];
// const allAlerts: Alerts[] = groupState.payload.reduce((acc, curr) => {
// return [...acc, ...curr.alerts];
// }, initialAlerts);
return <TriggerComponent allAlerts={groupState.payload} />;
return <TriggerComponent allAlerts={alertsResponse?.data?.payload || []} />;
}
export default TriggeredAlerts;