PMM-12378 Expand cluster if filtered & reset on close

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>
   );

public/app/percona/inventory/Tabs/Services/Clusters.utils.ts

@@ -1,15 +1,14 @@
+import { locationService } from '@grafana/runtime';
 import { Databases } from 'app/percona/shared/core';
 
 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 });
+};

public/app/percona/inventory/Tabs/Services/ServicesTable.tsx

@@ -25,23 +25,21 @@ 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> = ({
   isLoading,
   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}
     />
   );
 };

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[];