IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactor to useTabQueryParam

Browse Source
This commit is contained in:
Tom Ratcliffe 2024-04-11 16:19:27 +01:00 committed by Tom Ratcliffe
parent d91e1a4e3a
commit ccaf850c09
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/features/alerting/unified/components/contact-points/ContactPoints.tsx
View File

@ -3,7 +3,7 @@ import uFuzzy from '@leeoniya/ufuzzy';
import { SerializedError } from '@reduxjs/toolkit';
import { groupBy, size, uniq, upperFirst } from 'lodash';
import pluralize from 'pluralize';
import React, { Fragment, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
import React, { Fragment, ReactNode, useCallback, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { useToggle } from 'react-use';
@ -70,8 +70,8 @@ export enum ActiveTab {
const DEFAULT_PAGE_SIZE = 10;
const useTabQueryParam = () => {
const [queryParams] = useURLSearchParams();
return useMemo(() => {
const [queryParams, setQueryParams] = useURLSearchParams();
const param = useMemo(() => {
const queryParam = queryParams.get('tab');
if (!queryParam || !Object.values(ActiveTab).map(String).includes(queryParam)) {
@ -80,14 +80,17 @@ const useTabQueryParam = () => {
return queryParam || ActiveTab.ContactPoints;
}, [queryParams]);
const setParam = (tab: string) => setQueryParams({ tab });
return [param, setParam] as const;
};
const ContactPoints = () => {
const { selectedAlertmanager } = useAlertmanager();
const [queryParams, setQueryParams] = useURLSearchParams();
const activeTabVal = useTabQueryParam();
const [queryParams] = useURLSearchParams();
const [activeTab, setActiveTab] = useTabQueryParam();
const [activeTab, setActiveTab] = useState(activeTabVal);
let { isLoading, error, contactPoints } = useContactPointsWithStatus();
const { deleteTrigger, updateAlertmanagerState } = useDeleteContactPoint(selectedAlertmanager!);
const [addContactPointSupported, addContactPointAllowed] = useAlertmanagerAbility(
@ -108,10 +111,6 @@ const ContactPoints = () => {
const showingContactPoints = activeTab === ActiveTab.ContactPoints;
const showNotificationTemplates = activeTab === ActiveTab.NotificationTemplates;
useEffect(() => {
setQueryParams({ tab: activeTab });
}, [activeTab, setQueryParams]);
if (error) {
// TODO fix this type casting, when error comes from "getContactPointsStatus" it probably won't be a SerializedError
return <Alert title="Failed to fetch contact points">{(error as SerializedError).message}</Alert>;