PMM-12378 Clear toggle when clicking on services link

percona · Sep 15, 2023 · 1da1ccd · 1da1ccd
1 parent 2a91570
commit 1da1ccd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/public/app/percona/inventory/Inventory.constants.ts b/public/app/percona/inventory/Inventory.constants.ts
@@ -29,3 +29,4 @@ export const inventoryTypes = {
 export const GET_SERVICES_CANCEL_TOKEN = 'getServices';
 export const GET_NODES_CANCEL_TOKEN = 'getNodes';
 export const GET_AGENTS_CANCEL_TOKEN = 'getAgents';
+export const CLUSTERS_SWITCH_KEY = 'pmm-organize-by-clusters';
diff --git a/public/app/percona/inventory/Tabs/Nodes.tsx b/public/app/percona/inventory/Tabs/Nodes.tsx
@@ -27,7 +27,7 @@ import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
 import { appEvents } from '../../../core/app_events';
-import { GET_NODES_CANCEL_TOKEN } from '../Inventory.constants';
+import { CLUSTERS_SWITCH_KEY, GET_NODES_CANCEL_TOKEN } from '../Inventory.constants';
 import { Messages } from '../Inventory.messages';
 import { FlattenNode, MonitoringStatus, Node } from '../Inventory.types';
 import { StatusBadge } from '../components/StatusBadge/StatusBadge';
@@ -65,6 +65,11 @@ export const NodesTab = () => {
     [styles.actionItemTxtSpan]
   );
 
+  const clearClusterToggle = useCallback(() => {
+    // Reset toggle to false when linking from nodes
+    localStorage.removeItem(CLUSTERS_SWITCH_KEY);
+  }, []);
+
   const columns = useMemo(
     (): Array<ExtendedColumn<Node>> => [
       {
@@ -155,7 +160,7 @@ export const NodesTab = () => {
 
           if (value.length === 1) {
             return (
-              <Link className={styles.link} href={getServiceLink(value[0].serviceId)}>
+              <Link className={styles.link} href={getServiceLink(value[0].serviceId)} onClick={clearClusterToggle}>
                 {value[0].serviceName}
               </Link>
             );
@@ -166,7 +171,7 @@ export const NodesTab = () => {
       },
       getExpandAndActionsCol(getActions),
     ],
-    [styles, getActions]
+    [styles, getActions, clearClusterToggle]
   );
 
   const loadData = useCallback(async () => {
@@ -206,7 +211,7 @@ export const NodesTab = () => {
             <DetailsRow.Contents title={Messages.nodes.details.serviceNames}>
               {row.original.services.map((service) => (
                 <div key={service.serviceId}>
-                  <Link className={styles.link} href={getServiceLink(service.serviceId)}>
+                  <Link className={styles.link} href={getServiceLink(service.serviceId)} onClick={clearClusterToggle}>
                     {service.serviceName}
                   </Link>
                 </div>
@@ -234,7 +239,7 @@ export const NodesTab = () => {
         </DetailsRow>
       );
     },
-    [styles.tagList, styles.link]
+    [styles.tagList, styles.link, clearClusterToggle]
   );
 
   const deletionMsg = useMemo(() => {

diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
@@ -6,7 +6,6 @@ import { useLocalStorage } from 'react-use';
 import { locationService } from '@grafana/runtime';
 import { Button, HorizontalGroup, Icon, InlineSwitch, Tooltip, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
-import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
 import { ReadMoreLink } from 'app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
@@ -18,7 +17,7 @@ import { logger } from 'app/percona/shared/helpers/logger';
 import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
-import { GET_SERVICES_CANCEL_TOKEN } from '../Inventory.constants';
+import { CLUSTERS_SWITCH_KEY, GET_SERVICES_CANCEL_TOKEN } from '../Inventory.constants';
 import { Messages } from '../Inventory.messages';
 import { FlattenService } from '../Inventory.types';
 import DeleteServiceModal from '../components/DeleteServiceModal';
@@ -50,8 +49,7 @@ export const Services = () => {
       }),
     [fetchedServices]
   );
-  const [showClusters, setShowClusters] = useLocalStorage('pmm-organize-by-clusters', false);
-  const [params] = useQueryParams();
+  const [showClusters, setShowClusters] = useLocalStorage(CLUSTERS_SWITCH_KEY, false);
 
   const loadData = useCallback(async () => {
     try {
@@ -73,9 +71,6 @@ export const Services = () => {
   useEffect(() => {
     loadData();
 
-    // Reset when linking from nodes
-    setShowClusters(params['search-select'] !== 'serviceId');
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);