From 6c029e7bfceebc80118c652c779f48f6f4b40986 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Wed, 6 Sep 2023 15:16:23 +0200
Subject: [PATCH] PMM-12378 Expand cluster if filtered & reset on close

---
 .../inventory/Tabs/Services/ClusterItem.tsx     | 13 +++++++++++--
 .../inventory/Tabs/Services/Clusters.utils.ts   | 17 +++++++++++++----
 .../inventory/Tabs/Services/ServicesTable.tsx   |  8 +++-----
 .../shared/services/services/Services.types.ts  |  2 +-
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx b/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
index fa1619e1aee7d..4553762971802 100644
--- a/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
+++ b/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { Row } from 'react-table';
 
 import { Collapse, HorizontalGroup, Icon, IconName } from '@grafana/ui';
@@ -7,10 +7,11 @@ import { DATABASE_ICONS } from 'app/percona/shared/core';
 import { FlattenService } from '../../Inventory.types';
 
 import { ClusterItemProps } from './Clusters.type';
+import { removeClusterFilters, shouldClusterBeExpanded } from './Clusters.utils';
 import ServicesTable from './ServicesTable';
 
 const ClusterItem: FC<ClusterItemProps> = ({ cluster, onDelete, onSelectionChange }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(shouldClusterBeExpanded(cluster.name));
   const icon: IconName = cluster.type ? (DATABASE_ICONS[cluster.type] as IconName) : 'database';
 
   const handleSelectionChange = useCallback(
@@ -20,6 +21,12 @@ const ClusterItem: FC<ClusterItemProps> = ({ cluster, onDelete, onSelectionChang
     [cluster, onSelectionChange]
   );
 
+  useEffect(() => {
+    if (!isOpen) {
+      removeClusterFilters(cluster.name);
+    }
+  }, [isOpen, cluster.name]);
+
   return (
     <Collapse
       collapsible
@@ -37,6 +44,8 @@ const ClusterItem: FC<ClusterItemProps> = ({ cluster, onDelete, onSelectionChang
         isLoading={false}
         onDelete={onDelete}
         onSelectionChange={handleSelectionChange}
+        tableKey={cluster.name}
+        showPagination={false}
       />
     </Collapse>
   );
diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts b/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
index 19e1b8e4b718b..990e2e6727992 100644
--- a/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
@@ -1,3 +1,4 @@
+import { locationService } from '@grafana/runtime';
 import { Databases } from 'app/percona/shared/core';
 
 import { FlattenService } from '../../Inventory.types';
@@ -5,11 +6,9 @@ import { FlattenService } from '../../Inventory.types';
 import { ServicesCluster } from './Clusters.type';
 
 export const getClustersFromServices = (services: FlattenService[]): ServicesCluster[] => {
-  const clusterNames = [...new Set(services.map((s) => s.cluster || s.serviceName))];
+  const clusterNames = [...new Set(services.map((s) => s.cluster))];
   return clusterNames.map<ServicesCluster>((clusterName) => {
-    const clusterServices = services.filter((s) =>
-      s.cluster ? s.cluster === clusterName : s.serviceName === clusterName
-    );
+    const clusterServices = services.filter((s) => s.cluster === clusterName);
 
     return {
       name: clusterName,
@@ -18,3 +17,13 @@ export const getClustersFromServices = (services: FlattenService[]): ServicesClu
     };
   });
 };
+
+export const shouldClusterBeExpanded = (clusterName: string): boolean => {
+  const search = locationService.getSearchObject();
+  return !!search[clusterName];
+};
+
+export const removeClusterFilters = (clusterName: string) => {
+  const search = locationService.getSearchObject();
+  locationService.partial({ ...search, [clusterName]: undefined });
+};
diff --git a/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
index 690580d7b0ebe..55d14ab928267 100644
--- a/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
+++ b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
@@ -25,15 +25,13 @@ import {
 } from '../Services.utils';
 import { getStyles } from '../Tabs.styles';
 
-import { ServicesCluster } from './Clusters.type';
-
 interface ServicesTableProps {
   isLoading: boolean;
   flattenServices: FlattenService[];
   onSelectionChange: (rows: Array<Row<FlattenService>>) => void;
   onDelete: (service: FlattenService) => void;
   showPagination?: boolean;
-  cluster?: ServicesCluster;
+  tableKey?: string;
 }
 
 const ServicesTable: FC<ServicesTableProps> = ({
@@ -41,7 +39,7 @@ const ServicesTable: FC<ServicesTableProps> = ({
   flattenServices,
   onSelectionChange,
   onDelete,
-  cluster,
+  tableKey,
   showPagination = true,
 }) => {
   const styles = useStyles2(getStyles);
@@ -232,7 +230,7 @@ const ServicesTable: FC<ServicesTableProps> = ({
       autoResetSelectedRows={false}
       getRowId={useCallback((row: FlattenService) => row.serviceId, [])}
       showFilter
-      tableKey={cluster?.name}
+      tableKey={tableKey}
     />
   );
 };
diff --git a/public/app/percona/shared/services/services/Services.types.ts b/public/app/percona/shared/services/services/Services.types.ts
index a62fbc76ce72f..7576d53d98b92 100644
--- a/public/app/percona/shared/services/services/Services.types.ts
+++ b/public/app/percona/shared/services/services/Services.types.ts
@@ -82,7 +82,7 @@ export interface DbService {
   nodeName: string;
   environment?: string;
   status: ServiceStatus;
-  cluster?: string;
+  cluster: string;
   replicationSet?: string;
   customLabels?: Record<string, string>;
   agents?: DbAgent[];