From 7901c69c7ca8f0f28b8a74e78010b12cab695535 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 28 Aug 2023 13:38:47 +0200
Subject: [PATCH 01/10] PMM-12378 Extract services table

---
 .../app/percona/inventory/Tabs/Services.tsx   | 206 ++---------------
 .../inventory/Tabs/Services/ServicesTable.tsx | 216 ++++++++++++++++++
 2 files changed, 229 insertions(+), 193 deletions(-)
 create mode 100644 public/app/percona/inventory/Tabs/Services/ServicesTable.tsx

diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 5cb66638236a3..22355be5e709e 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -5,15 +5,10 @@ import { Row } from 'react-table';
 
 import { AppEvents } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Badge, Button, HorizontalGroup, Icon, Link, Modal, TagList, useStyles2 } from '@grafana/ui';
+import { Button, HorizontalGroup, Modal, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
-import { stripServiceId } from 'app/percona/check/components/FailedChecksTab/FailedChecksTab.utils';
-import { Action } from 'app/percona/dbaas/components/MultipleActions';
 import { CheckboxField } from 'app/percona/shared/components/Elements/Checkbox';
-import { DetailsRow } from 'app/percona/shared/components/Elements/DetailsRow/DetailsRow';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
-import { ServiceIconWithText } from 'app/percona/shared/components/Elements/ServiceIconWithText/ServiceIconWithText';
-import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/components/Elements/Table';
 import { FormElement } from 'app/percona/shared/components/Form';
 import { useCancelToken } from 'app/percona/shared/components/hooks/cancelToken.hook';
 import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
@@ -24,28 +19,17 @@ import {
 } from 'app/percona/shared/core/reducers/services';
 import { getServices } from 'app/percona/shared/core/selectors';
 import { isApiCancelError } from 'app/percona/shared/helpers/api';
-import { getDashboardLinkForService } from 'app/percona/shared/helpers/getDashboardLinkForService';
-import { getExpandAndActionsCol } from 'app/percona/shared/helpers/getExpandAndActionsCol';
 import { logger } from 'app/percona/shared/helpers/logger';
-import { ServiceStatus } from 'app/percona/shared/services/services/Services.types';
 import { useAppDispatch } from 'app/store/store';
 import { useSelector } from 'app/types';
 
 import { appEvents } from '../../../core/app_events';
 import { GET_SERVICES_CANCEL_TOKEN } from '../Inventory.constants';
 import { Messages } from '../Inventory.messages';
-import { FlattenService, MonitoringStatus } from '../Inventory.types';
-import { StatusBadge } from '../components/StatusBadge/StatusBadge';
-import { StatusInfo } from '../components/StatusInfo/StatusInfo';
-import { StatusLink } from '../components/StatusLink/StatusLink';
+import { FlattenService } from '../Inventory.types';
 
-import {
-  getBadgeColorForServiceStatus,
-  getBadgeIconForServiceStatus,
-  getBadgeTextForServiceStatus,
-  getAgentsMonitoringStatus,
-  getNodeLink,
-} from './Services.utils';
+import { getAgentsMonitoringStatus } from './Services.utils';
+import ServicesTable from './Services/ServicesTable';
 import { getStyles } from './Tabs.styles';
 
 export const Services = () => {
@@ -69,129 +53,6 @@ export const Services = () => {
     [fetchedServices]
   );
 
-  const getActions = useCallback(
-    (row: Row<FlattenService>): Action[] => [
-      {
-        content: (
-          <HorizontalGroup spacing="sm">
-            <Icon name="trash-alt" />
-            <span className={styles.deleteItemTxtSpan}>{Messages.delete}</span>
-          </HorizontalGroup>
-        ),
-        action: () => {
-          setActionItem(row.original);
-          setModalVisible(true);
-        },
-      },
-      {
-        content: Messages.services.actions.dashboard,
-        action: () => {
-          locationService.push(getDashboardLinkForService(row.original.type, row.original.serviceName));
-        },
-      },
-      {
-        content: Messages.services.actions.qan,
-        action: () => {
-          locationService.push(`/d/pmm-qan/pmm-query-analytics?var-service_name=${row.original.serviceName}`);
-        },
-      },
-    ],
-    [styles.deleteItemTxtSpan]
-  );
-
-  const columns = useMemo(
-    (): Array<ExtendedColumn<FlattenService>> => [
-      {
-        Header: Messages.services.columns.serviceId,
-        id: 'serviceId',
-        accessor: 'serviceId',
-        hidden: true,
-        type: FilterFieldTypes.TEXT,
-      },
-      {
-        Header: Messages.services.columns.status,
-        accessor: 'status',
-        Cell: ({ value }: { value: ServiceStatus }) => (
-          <Badge
-            text={getBadgeTextForServiceStatus(value)}
-            color={getBadgeColorForServiceStatus(value)}
-            icon={getBadgeIconForServiceStatus(value)}
-          />
-        ),
-        tooltipInfo: <StatusInfo />,
-        type: FilterFieldTypes.DROPDOWN,
-        options: [
-          {
-            label: 'Up',
-            value: ServiceStatus.UP,
-          },
-          {
-            label: 'Down',
-            value: ServiceStatus.DOWN,
-          },
-          {
-            label: 'Unknown',
-            value: ServiceStatus.UNKNOWN,
-          },
-          {
-            label: 'N/A',
-            value: ServiceStatus.NA,
-          },
-        ],
-      },
-      {
-        Header: Messages.services.columns.serviceName,
-        accessor: 'serviceName',
-        Cell: ({ value, row }: { row: Row<FlattenService>; value: string }) => (
-          <ServiceIconWithText text={value} dbType={row.original.type} />
-        ),
-        type: FilterFieldTypes.TEXT,
-      },
-      {
-        Header: Messages.services.columns.nodeName,
-        accessor: 'nodeName',
-        Cell: ({ value, row }: { row: Row<FlattenService>; value: string }) => (
-          <Link className={styles.link} href={getNodeLink(row.original)}>
-            {value}
-          </Link>
-        ),
-        type: FilterFieldTypes.TEXT,
-      },
-      {
-        Header: Messages.services.columns.monitoring,
-        accessor: 'agentsStatus',
-        width: '70px',
-        Cell: ({ value, row }) => (
-          <StatusLink type="services" strippedId={stripServiceId(row.original.serviceId)} agentsStatus={value} />
-        ),
-        type: FilterFieldTypes.RADIO_BUTTON,
-        options: [
-          {
-            label: MonitoringStatus.OK,
-            value: MonitoringStatus.OK,
-          },
-          {
-            label: MonitoringStatus.FAILED,
-            value: MonitoringStatus.FAILED,
-          },
-        ],
-      },
-      {
-        Header: Messages.services.columns.address,
-        accessor: 'address',
-        type: FilterFieldTypes.TEXT,
-      },
-      {
-        Header: Messages.services.columns.port,
-        accessor: 'port',
-        width: '100px',
-        type: FilterFieldTypes.TEXT,
-      },
-      getExpandAndActionsCol(getActions),
-    ],
-    [styles, getActions]
-  );
-
   const deletionMsg = useMemo(() => {
     const servicesToDelete = actionItem ? [actionItem] : selected;
 
@@ -257,40 +118,10 @@ export const Services = () => {
     setSelectedRows(rows);
   }, []);
 
-  const renderSelectedSubRow = React.useCallback(
-    (row: Row<FlattenService>) => {
-      const labels = row.original.customLabels || {};
-      const labelKeys = Object.keys(labels);
-      const agents = row.original.agents || [];
-
-      return (
-        <DetailsRow>
-          {!!agents.length && (
-            <DetailsRow.Contents title={Messages.services.details.agents}>
-              <StatusBadge
-                strippedId={stripServiceId(row.original.serviceId)}
-                type={'services'}
-                agents={row.original.agents || []}
-              />
-            </DetailsRow.Contents>
-          )}
-          <DetailsRow.Contents title={Messages.services.details.serviceId}>
-            <span>{row.original.serviceId}</span>
-          </DetailsRow.Contents>
-          {!!labelKeys.length && (
-            <DetailsRow.Contents title={Messages.services.details.labels} fullRow>
-              <TagList
-                colorIndex={9}
-                className={styles.tagList}
-                tags={labelKeys.map((label) => `${label}=${labels![label]}`)}
-              />
-            </DetailsRow.Contents>
-          )}
-        </DetailsRow>
-      );
-    },
-    [styles.tagList]
-  );
+  const handleDelete = useCallback((service: FlattenService) => {
+    setActionItem(service);
+    setModalVisible(true);
+  }, []);
 
   const onModalClose = useCallback(() => {
     setModalVisible(false);
@@ -357,22 +188,11 @@ export const Services = () => {
               )}
             />
           </Modal>
-          <Table
-            columns={columns}
-            data={flattenServices}
-            totalItems={flattenServices.length}
-            rowSelection
-            onRowSelection={handleSelectionChange}
-            showPagination
-            pageSize={25}
-            allRowsSelectionMode="page"
-            emptyMessage={Messages.services.emptyTable}
-            pendingRequest={isLoading}
-            overlayClassName={styles.overlay}
-            renderExpandedRow={renderSelectedSubRow}
-            autoResetSelectedRows={false}
-            getRowId={useCallback((row: FlattenService) => row.serviceId, [])}
-            showFilter
+          <ServicesTable
+            flattenServices={flattenServices}
+            onSelectionChange={handleSelectionChange}
+            onDelete={handleDelete}
+            isLoading={isLoading}
           />
         </FeatureLoader>
       </OldPage.Contents>
diff --git a/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
new file mode 100644
index 0000000000000..15fff9aeb8817
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
@@ -0,0 +1,216 @@
+import React, { FC, useCallback, useMemo } from 'react';
+import { Row } from 'react-table';
+
+import { locationService } from '@grafana/runtime';
+import { Badge, HorizontalGroup, Icon, Link, TagList, useStyles2 } from '@grafana/ui';
+import { Action } from 'app/percona/dbaas/components/MultipleActions';
+import { DetailsRow } from 'app/percona/shared/components/Elements/DetailsRow/DetailsRow';
+import { ServiceIconWithText } from 'app/percona/shared/components/Elements/ServiceIconWithText/ServiceIconWithText';
+import { ExtendedColumn, FilterFieldTypes, Table } from 'app/percona/shared/components/Elements/Table';
+import { getDashboardLinkForService } from 'app/percona/shared/helpers/getDashboardLinkForService';
+import { getExpandAndActionsCol } from 'app/percona/shared/helpers/getExpandAndActionsCol';
+import { ServiceStatus } from 'app/percona/shared/services/services/Services.types';
+
+import { Messages } from '../../Inventory.messages';
+import { FlattenService, MonitoringStatus } from '../../Inventory.types';
+import { StatusBadge } from '../../components/StatusBadge/StatusBadge';
+import { StatusInfo } from '../../components/StatusInfo/StatusInfo';
+import { StatusLink } from '../../components/StatusLink/StatusLink';
+import {
+  getBadgeColorForServiceStatus,
+  getBadgeTextForServiceStatus,
+  getBadgeIconForServiceStatus,
+  getNodeLink,
+  stripServiceId,
+} from '../Services.utils';
+import { getStyles } from '../Tabs.styles';
+
+interface ServicesTableProps {
+  isLoading: boolean;
+  flattenServices: FlattenService[];
+  onSelectionChange: (rows: Array<Row<FlattenService>>) => void;
+  onDelete: (service: FlattenService) => void;
+}
+
+const ServicesTable: FC<ServicesTableProps> = ({ isLoading, flattenServices, onSelectionChange, onDelete }) => {
+  const styles = useStyles2(getStyles);
+
+  const getActions = useCallback(
+    (row: Row<FlattenService>): Action[] => [
+      {
+        content: (
+          <HorizontalGroup spacing="sm">
+            <Icon name="trash-alt" />
+            <span className={styles.deleteItemTxtSpan}>{Messages.delete}</span>
+          </HorizontalGroup>
+        ),
+        action: () => {
+          onDelete(row.original);
+        },
+      },
+      {
+        content: Messages.services.actions.dashboard,
+        action: () => {
+          locationService.push(getDashboardLinkForService(row.original.type, row.original.serviceName));
+        },
+      },
+      {
+        content: Messages.services.actions.qan,
+        action: () => {
+          locationService.push(`/d/pmm-qan/pmm-query-analytics?var-service_name=${row.original.serviceName}`);
+        },
+      },
+    ],
+    [styles.deleteItemTxtSpan, onDelete]
+  );
+
+  const columns = useMemo(
+    (): Array<ExtendedColumn<FlattenService>> => [
+      {
+        Header: Messages.services.columns.serviceId,
+        id: 'serviceId',
+        accessor: 'serviceId',
+        hidden: true,
+        type: FilterFieldTypes.TEXT,
+      },
+      {
+        Header: Messages.services.columns.status,
+        accessor: 'status',
+        Cell: ({ value }: { value: ServiceStatus }) => (
+          <Badge
+            text={getBadgeTextForServiceStatus(value)}
+            color={getBadgeColorForServiceStatus(value)}
+            icon={getBadgeIconForServiceStatus(value)}
+          />
+        ),
+        tooltipInfo: <StatusInfo />,
+        type: FilterFieldTypes.DROPDOWN,
+        options: [
+          {
+            label: 'Up',
+            value: ServiceStatus.UP,
+          },
+          {
+            label: 'Down',
+            value: ServiceStatus.DOWN,
+          },
+          {
+            label: 'Unknown',
+            value: ServiceStatus.UNKNOWN,
+          },
+          {
+            label: 'N/A',
+            value: ServiceStatus.NA,
+          },
+        ],
+      },
+      {
+        Header: Messages.services.columns.serviceName,
+        accessor: 'serviceName',
+        Cell: ({ value, row }: { row: Row<FlattenService>; value: string }) => (
+          <ServiceIconWithText text={value} dbType={row.original.type} />
+        ),
+        type: FilterFieldTypes.TEXT,
+      },
+      {
+        Header: Messages.services.columns.nodeName,
+        accessor: 'nodeName',
+        Cell: ({ value, row }: { row: Row<FlattenService>; value: string }) => (
+          <Link className={styles.link} href={getNodeLink(row.original)}>
+            {value}
+          </Link>
+        ),
+        type: FilterFieldTypes.TEXT,
+      },
+      {
+        Header: Messages.services.columns.monitoring,
+        accessor: 'agentsStatus',
+        width: '70px',
+        Cell: ({ value, row }) => (
+          <StatusLink type="services" strippedId={stripServiceId(row.original.serviceId)} agentsStatus={value} />
+        ),
+        type: FilterFieldTypes.RADIO_BUTTON,
+        options: [
+          {
+            label: MonitoringStatus.OK,
+            value: MonitoringStatus.OK,
+          },
+          {
+            label: MonitoringStatus.FAILED,
+            value: MonitoringStatus.FAILED,
+          },
+        ],
+      },
+      {
+        Header: Messages.services.columns.address,
+        accessor: 'address',
+        type: FilterFieldTypes.TEXT,
+      },
+      {
+        Header: Messages.services.columns.port,
+        accessor: 'port',
+        width: '100px',
+        type: FilterFieldTypes.TEXT,
+      },
+      getExpandAndActionsCol(getActions),
+    ],
+    [styles, getActions]
+  );
+
+  const renderSelectedSubRow = React.useCallback(
+    (row: Row<FlattenService>) => {
+      const labels = row.original.customLabels || {};
+      const labelKeys = Object.keys(labels);
+      const agents = row.original.agents || [];
+
+      return (
+        <DetailsRow>
+          {!!agents.length && (
+            <DetailsRow.Contents title={Messages.services.details.agents}>
+              <StatusBadge
+                strippedId={stripServiceId(row.original.serviceId)}
+                type={'services'}
+                agents={row.original.agents || []}
+              />
+            </DetailsRow.Contents>
+          )}
+          <DetailsRow.Contents title={Messages.services.details.serviceId}>
+            <span>{row.original.serviceId}</span>
+          </DetailsRow.Contents>
+          {!!labelKeys.length && (
+            <DetailsRow.Contents title={Messages.services.details.labels} fullRow>
+              <TagList
+                colorIndex={9}
+                className={styles.tagList}
+                tags={labelKeys.map((label) => `${label}=${labels![label]}`)}
+              />
+            </DetailsRow.Contents>
+          )}
+        </DetailsRow>
+      );
+    },
+    [styles.tagList]
+  );
+
+  return (
+    <Table
+      columns={columns}
+      data={flattenServices}
+      totalItems={flattenServices.length}
+      rowSelection
+      onRowSelection={onSelectionChange}
+      showPagination
+      pageSize={25}
+      allRowsSelectionMode="page"
+      emptyMessage={Messages.services.emptyTable}
+      pendingRequest={isLoading}
+      overlayClassName={styles.overlay}
+      renderExpandedRow={renderSelectedSubRow}
+      autoResetSelectedRows={false}
+      getRowId={useCallback((row: FlattenService) => row.serviceId, [])}
+      showFilter
+    />
+  );
+};
+
+export default ServicesTable;

From 26044377b74e2c6c747d98648e1d24cbecc1f741 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 28 Aug 2023 16:06:28 +0200
Subject: [PATCH 02/10] PMM-12378 Add basic cluster view

---
 .../percona/inventory/Inventory.messages.ts   |  1 +
 .../app/percona/inventory/Tabs/Services.tsx   | 33 ++++++++++++-----
 .../inventory/Tabs/Services/ClusterItem.tsx   | 35 +++++++++++++++++++
 .../inventory/Tabs/Services/Clusters.tsx      | 19 ++++++++++
 .../inventory/Tabs/Services/Clusters.type.tsx | 19 ++++++++++
 .../inventory/Tabs/Services/Clusters.utils.ts | 20 +++++++++++
 .../app/percona/inventory/Tabs/Tabs.styles.ts |  9 +++++
 7 files changed, 128 insertions(+), 8 deletions(-)
 create mode 100644 public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
 create mode 100644 public/app/percona/inventory/Tabs/Services/Clusters.tsx
 create mode 100644 public/app/percona/inventory/Tabs/Services/Clusters.type.tsx
 create mode 100644 public/app/percona/inventory/Tabs/Services/Clusters.utils.ts

diff --git a/public/app/percona/inventory/Inventory.messages.ts b/public/app/percona/inventory/Inventory.messages.ts
index db383537f97f6..8a01749ceed5b 100644
--- a/public/app/percona/inventory/Inventory.messages.ts
+++ b/public/app/percona/inventory/Inventory.messages.ts
@@ -27,6 +27,7 @@ export const Messages = {
       `Are you sure that you want to permanently delete ${nrItems} service${nrItems ? 's' : ''}`,
     servicesDeleted: (deletedItems: number, totalItems: number) =>
       `${deletedItems} of ${totalItems} services successfully deleted`,
+    organizeByClusters: 'Organize by clusters',
   },
   agents: {
     goBackToServices: 'Go back to services',
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 22355be5e709e..27acad3337d74 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -2,10 +2,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Form } from 'react-final-form';
 import { Row } from 'react-table';
+import { useLocalStorage } from 'react-use';
 
 import { AppEvents } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Button, HorizontalGroup, Modal, useStyles2 } from '@grafana/ui';
+import { Button, HorizontalGroup, InlineSwitch, Modal, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
 import { CheckboxField } from 'app/percona/shared/components/Elements/Checkbox';
 import { FeatureLoader } from 'app/percona/shared/components/Elements/FeatureLoader';
@@ -29,6 +30,7 @@ import { Messages } from '../Inventory.messages';
 import { FlattenService } from '../Inventory.types';
 
 import { getAgentsMonitoringStatus } from './Services.utils';
+import Clusters from './Services/Clusters';
 import ServicesTable from './Services/ServicesTable';
 import { getStyles } from './Tabs.styles';
 
@@ -46,12 +48,14 @@ export const Services = () => {
       fetchedServices.map((value) => {
         return {
           type: value.type,
+          cluster: value.params.cluster || value.params.customLabels?.cluster,
           ...value.params,
           agentsStatus: getAgentsMonitoringStatus(value.params.agents ?? []),
         };
       }),
     [fetchedServices]
   );
+  const [showClusters, setShowClusters] = useLocalStorage('pmm-organize-by-clusters', false);
 
   const deletionMsg = useMemo(() => {
     const servicesToDelete = actionItem ? [actionItem] : selected;
@@ -130,9 +134,18 @@ export const Services = () => {
 
   return (
     <OldPage navModel={navModel}>
-      <OldPage.Contents>
+      <OldPage.Contents isLoading={isLoading}>
         <FeatureLoader>
           <HorizontalGroup height={40} justify="flex-end" align="flex-start">
+            <InlineSwitch
+              id="organize-by-clusters"
+              label={Messages.services.organizeByClusters}
+              className={styles.clustersSwitch}
+              value={showClusters}
+              onClick={() => setShowClusters(!showClusters)}
+              showLabel
+              transparent
+            />
             <Button
               size="md"
               disabled={selected.length === 0}
@@ -188,12 +201,16 @@ export const Services = () => {
               )}
             />
           </Modal>
-          <ServicesTable
-            flattenServices={flattenServices}
-            onSelectionChange={handleSelectionChange}
-            onDelete={handleDelete}
-            isLoading={isLoading}
-          />
+          {showClusters ? (
+            <Clusters services={flattenServices} onDelete={handleDelete} />
+          ) : (
+            <ServicesTable
+              flattenServices={flattenServices}
+              onSelectionChange={handleSelectionChange}
+              onDelete={handleDelete}
+              isLoading={isLoading}
+            />
+          )}
         </FeatureLoader>
       </OldPage.Contents>
     </OldPage>
diff --git a/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx b/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
new file mode 100644
index 0000000000000..de9d31533c119
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
@@ -0,0 +1,35 @@
+import React, { FC, useState } from 'react';
+
+import { Collapse, HorizontalGroup, Icon, IconName } from '@grafana/ui';
+import { DATABASE_ICONS } from 'app/percona/shared/core';
+
+import { ClusterItemProps } from './Clusters.type';
+import ServicesTable from './ServicesTable';
+
+const ClusterItem: FC<ClusterItemProps> = ({ cluster, onDelete }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const icon: IconName = cluster.type ? (DATABASE_ICONS[cluster.type] as IconName) : 'database';
+
+  return (
+    <Collapse
+      collapsible
+      label={
+        <HorizontalGroup>
+          {!!icon && <Icon name={icon} data-testid="service-icon" />}
+          <span>{cluster.name}</span>
+        </HorizontalGroup>
+      }
+      isOpen={isOpen}
+      onToggle={() => setIsOpen(!isOpen)}
+    >
+      <ServicesTable
+        flattenServices={cluster.services}
+        isLoading={false}
+        onDelete={onDelete}
+        onSelectionChange={console.log}
+      />
+    </Collapse>
+  );
+};
+
+export default ClusterItem;
diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.tsx b/public/app/percona/inventory/Tabs/Services/Clusters.tsx
new file mode 100644
index 0000000000000..84e8114096742
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.tsx
@@ -0,0 +1,19 @@
+import React, { FC, useMemo } from 'react';
+
+import ClusterItem from './ClusterItem';
+import { ClustersProps } from './Clusters.type';
+import { getClustersFromServices } from './Clusters.utils';
+
+const Clusters: FC<ClustersProps> = ({ services, onDelete }) => {
+  const clusters = useMemo(() => getClustersFromServices(services), [services]);
+
+  return (
+    <div>
+      {clusters.map((cluster) => (
+        <ClusterItem key={cluster.name} cluster={cluster} onDelete={onDelete} />
+      ))}
+    </div>
+  );
+};
+
+export default Clusters;
diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx b/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx
new file mode 100644
index 0000000000000..60b4dc75efcb2
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx
@@ -0,0 +1,19 @@
+import { Databases } from 'app/percona/shared/core';
+
+import { FlattenService } from '../../Inventory.types';
+
+export interface ClustersProps {
+  services: FlattenService[];
+  onDelete: (service: FlattenService) => void;
+}
+
+export interface ClusterItemProps {
+  cluster: ServicesCluster;
+  onDelete: (service: FlattenService) => void;
+}
+
+export interface ServicesCluster {
+  name: string;
+  type?: Databases;
+  services: FlattenService[];
+}
diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts b/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
new file mode 100644
index 0000000000000..19e1b8e4b718b
--- /dev/null
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
@@ -0,0 +1,20 @@
+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))];
+  return clusterNames.map<ServicesCluster>((clusterName) => {
+    const clusterServices = services.filter((s) =>
+      s.cluster ? s.cluster === clusterName : s.serviceName === clusterName
+    );
+
+    return {
+      name: clusterName,
+      type: clusterServices[0]?.type as Databases,
+      services: clusterServices,
+    };
+  });
+};
diff --git a/public/app/percona/inventory/Tabs/Tabs.styles.ts b/public/app/percona/inventory/Tabs/Tabs.styles.ts
index 361c6757ebcb1..22f9218a736ea 100644
--- a/public/app/percona/inventory/Tabs/Tabs.styles.ts
+++ b/public/app/percona/inventory/Tabs/Tabs.styles.ts
@@ -56,4 +56,13 @@ export const getStyles = ({ colors, spacing }: GrafanaTheme2) => ({
   link: css`
     color: ${colors.text.link};
   `,
+  clustersSwitch: css`
+    display: flex;
+    flex-direction: row-reverse;
+
+    & > label {
+      padding: 0;
+      padding-left: ${spacing(1)};
+    }
+  `,
 });

From 3e3e3e5af184b404fe948d816def4ac9869e74a1 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Mon, 28 Aug 2023 16:16:47 +0200
Subject: [PATCH 03/10]  PMM-12378 Add edit option back in

---
 .../inventory/Tabs/Services/ServicesTable.tsx    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
index 15fff9aeb8817..9e4a3da134bd1 100644
--- a/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
+++ b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
@@ -41,13 +41,25 @@ const ServicesTable: FC<ServicesTableProps> = ({ isLoading, flattenServices, onS
         content: (
           <HorizontalGroup spacing="sm">
             <Icon name="trash-alt" />
-            <span className={styles.deleteItemTxtSpan}>{Messages.delete}</span>
+            <span className={styles.actionItemTxtSpan}>{Messages.delete}</span>
           </HorizontalGroup>
         ),
         action: () => {
           onDelete(row.original);
         },
       },
+      {
+        content: (
+          <HorizontalGroup spacing="sm">
+            <Icon name="pen" />
+            <span className={styles.actionItemTxtSpan}>{Messages.edit}</span>
+          </HorizontalGroup>
+        ),
+        action: () => {
+          const serviceId = row.original.serviceId.split('/').pop();
+          locationService.push(`/edit-instance/${serviceId}`);
+        },
+      },
       {
         content: Messages.services.actions.dashboard,
         action: () => {
@@ -61,7 +73,7 @@ const ServicesTable: FC<ServicesTableProps> = ({ isLoading, flattenServices, onS
         },
       },
     ],
-    [styles.deleteItemTxtSpan, onDelete]
+    [styles.actionItemTxtSpan, onDelete]
   );
 
   const columns = useMemo(

From a653864ef6bbf554f248fb94c0666efc5f162df4 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 29 Aug 2023 11:15:18 +0200
Subject: [PATCH 04/10] PMM-12310 Handle service selection correctly

---
 .../app/percona/inventory/Tabs/Services.tsx   |  2 +-
 .../inventory/Tabs/Services/ClusterItem.tsx   | 16 ++++++++--
 .../inventory/Tabs/Services/Clusters.tsx      | 31 ++++++++++++++++---
 .../inventory/Tabs/Services/Clusters.type.tsx |  4 +++
 4 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index e3f06a32b38c7..e125ec2d0d767 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -138,7 +138,7 @@ export const Services = () => {
             />
           )}
           {showClusters ? (
-            <Clusters services={flattenServices} onDelete={handleDelete} />
+            <Clusters services={flattenServices} onDelete={handleDelete} onSelectionChange={handleSelectionChange} />
           ) : (
             <ServicesTable
               flattenServices={flattenServices}
diff --git a/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx b/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
index de9d31533c119..fa1619e1aee7d 100644
--- a/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
+++ b/public/app/percona/inventory/Tabs/Services/ClusterItem.tsx
@@ -1,15 +1,25 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
+import { Row } from 'react-table';
 
 import { Collapse, HorizontalGroup, Icon, IconName } from '@grafana/ui';
 import { DATABASE_ICONS } from 'app/percona/shared/core';
 
+import { FlattenService } from '../../Inventory.types';
+
 import { ClusterItemProps } from './Clusters.type';
 import ServicesTable from './ServicesTable';
 
-const ClusterItem: FC<ClusterItemProps> = ({ cluster, onDelete }) => {
+const ClusterItem: FC<ClusterItemProps> = ({ cluster, onDelete, onSelectionChange }) => {
   const [isOpen, setIsOpen] = useState(false);
   const icon: IconName = cluster.type ? (DATABASE_ICONS[cluster.type] as IconName) : 'database';
 
+  const handleSelectionChange = useCallback(
+    (services: Array<Row<FlattenService>>) => {
+      onSelectionChange(cluster, services);
+    },
+    [cluster, onSelectionChange]
+  );
+
   return (
     <Collapse
       collapsible
@@ -26,7 +36,7 @@ const ClusterItem: FC<ClusterItemProps> = ({ cluster, onDelete }) => {
         flattenServices={cluster.services}
         isLoading={false}
         onDelete={onDelete}
-        onSelectionChange={console.log}
+        onSelectionChange={handleSelectionChange}
       />
     </Collapse>
   );
diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.tsx b/public/app/percona/inventory/Tabs/Services/Clusters.tsx
index 84e8114096742..0b89950a06ff3 100644
--- a/public/app/percona/inventory/Tabs/Services/Clusters.tsx
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.tsx
@@ -1,16 +1,39 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
+import { Row } from 'react-table';
+
+import { FlattenService } from '../../Inventory.types';
 
 import ClusterItem from './ClusterItem';
-import { ClustersProps } from './Clusters.type';
+import { ClustersProps, ServicesCluster } from './Clusters.type';
 import { getClustersFromServices } from './Clusters.utils';
 
-const Clusters: FC<ClustersProps> = ({ services, onDelete }) => {
+const Clusters: FC<ClustersProps> = ({ services, onDelete, onSelectionChange }) => {
   const clusters = useMemo(() => getClustersFromServices(services), [services]);
+  const [selection, setSelection] = useState({});
+
+  const handleSelectionChange = useCallback(
+    (cluster: ServicesCluster, selectedServices: Array<Row<FlattenService>>) => {
+      const selectionByClusters = {
+        ...selection,
+        [cluster.name]: selectedServices,
+      };
+      const selected = Object.values(selectionByClusters).flat() as Array<Row<FlattenService>>;
+      setSelection(selectionByClusters);
+      onSelectionChange(selected);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onSelectionChange]
+  );
 
   return (
     <div>
       {clusters.map((cluster) => (
-        <ClusterItem key={cluster.name} cluster={cluster} onDelete={onDelete} />
+        <ClusterItem
+          key={cluster.name}
+          cluster={cluster}
+          onDelete={onDelete}
+          onSelectionChange={handleSelectionChange}
+        />
       ))}
     </div>
   );
diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx b/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx
index 60b4dc75efcb2..45ea9c3e68d24 100644
--- a/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.type.tsx
@@ -1,3 +1,5 @@
+import { Row } from 'react-table';
+
 import { Databases } from 'app/percona/shared/core';
 
 import { FlattenService } from '../../Inventory.types';
@@ -5,11 +7,13 @@ import { FlattenService } from '../../Inventory.types';
 export interface ClustersProps {
   services: FlattenService[];
   onDelete: (service: FlattenService) => void;
+  onSelectionChange: (services: Array<Row<FlattenService>>) => void;
 }
 
 export interface ClusterItemProps {
   cluster: ServicesCluster;
   onDelete: (service: FlattenService) => void;
+  onSelectionChange: (cluster: ServicesCluster, services: Array<Row<FlattenService>>) => void;
 }
 
 export interface ServicesCluster {

From b9aa96d73fd002a5775778cc7c28d5c1296ea0b9 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Tue, 5 Sep 2023 16:41:35 +0200
Subject: [PATCH 05/10] PMM-12378 Extend services table options

---
 .../inventory/Tabs/Services/ServicesTable.tsx    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
index 9e4a3da134bd1..690580d7b0ebe 100644
--- a/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
+++ b/public/app/percona/inventory/Tabs/Services/ServicesTable.tsx
@@ -25,14 +25,25 @@ 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;
 }
 
-const ServicesTable: FC<ServicesTableProps> = ({ isLoading, flattenServices, onSelectionChange, onDelete }) => {
+const ServicesTable: FC<ServicesTableProps> = ({
+  isLoading,
+  flattenServices,
+  onSelectionChange,
+  onDelete,
+  cluster,
+  showPagination = true,
+}) => {
   const styles = useStyles2(getStyles);
 
   const getActions = useCallback(
@@ -211,7 +222,7 @@ const ServicesTable: FC<ServicesTableProps> = ({ isLoading, flattenServices, onS
       totalItems={flattenServices.length}
       rowSelection
       onRowSelection={onSelectionChange}
-      showPagination
+      showPagination={showPagination}
       pageSize={25}
       allRowsSelectionMode="page"
       emptyMessage={Messages.services.emptyTable}
@@ -221,6 +232,7 @@ const ServicesTable: FC<ServicesTableProps> = ({ isLoading, flattenServices, onS
       autoResetSelectedRows={false}
       getRowId={useCallback((row: FlattenService) => row.serviceId, [])}
       showFilter
+      tableKey={cluster?.name}
     />
   );
 };

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 06/10] 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[];

From 4c9c01fcd4748ea62bf2269afcb16bf1b624a079 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Thu, 7 Sep 2023 10:01:05 +0200
Subject: [PATCH 07/10] PMM-12378 Add tech preview text

---
 .../percona/inventory/Inventory.messages.ts   |  3 +-
 .../app/percona/inventory/Tabs/Services.tsx   | 33 ++++++++++++-------
 .../app/percona/inventory/Tabs/Tabs.styles.ts |  4 +++
 .../TechnicalPreview/TechnicalPreview.tsx     |  4 +--
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/public/app/percona/inventory/Inventory.messages.ts b/public/app/percona/inventory/Inventory.messages.ts
index f397539974b40..44f590eabd96f 100644
--- a/public/app/percona/inventory/Inventory.messages.ts
+++ b/public/app/percona/inventory/Inventory.messages.ts
@@ -27,7 +27,8 @@ export const Messages = {
       `Are you sure that you want to permanently delete ${nrItems} service${nrItems ? 's' : ''}`,
     servicesDeleted: (deletedItems: number, totalItems: number) =>
       `${deletedItems} of ${totalItems} services successfully deleted`,
-    organizeByClusters: 'Organize by clusters',
+    organizeByClusters: 'Organize by Clusters',
+    technicalPreview: '(Technical Preview) ',
   },
   agents: {
     goBackToServices: 'Go back to services',
diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index e125ec2d0d767..78de2d6c881c6 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -4,9 +4,10 @@ import { Row } from 'react-table';
 import { useLocalStorage } from 'react-use';
 
 import { locationService } from '@grafana/runtime';
-import { Button, HorizontalGroup, InlineSwitch, useStyles2 } from '@grafana/ui';
+import { Button, HorizontalGroup, Icon, InlineSwitch, Tooltip, useStyles2 } from '@grafana/ui';
 import { OldPage } from 'app/core/components/Page/Page';
 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';
 import { usePerconaNavModel } from 'app/percona/shared/components/hooks/perconaNavModel';
 import { fetchActiveServiceTypesAction, fetchServicesAction } from 'app/percona/shared/core/reducers/services';
@@ -41,8 +42,8 @@ export const Services = () => {
       fetchedServices.map((value) => {
         return {
           type: value.type,
-          cluster: value.params.cluster || value.params.customLabels?.cluster,
           ...value.params,
+          cluster: value.params.cluster || value.params.customLabels?.cluster || '',
           agentsStatus: getAgentsMonitoringStatus(value.params.agents ?? []),
         };
       }),
@@ -97,15 +98,25 @@ export const Services = () => {
       <OldPage.Contents isLoading={isLoading}>
         <FeatureLoader>
           <HorizontalGroup height={40} justify="flex-end" align="flex-start">
-            <InlineSwitch
-              id="organize-by-clusters"
-              label={Messages.services.organizeByClusters}
-              className={styles.clustersSwitch}
-              value={showClusters}
-              onClick={() => setShowClusters(!showClusters)}
-              showLabel
-              transparent
-            />
+            <HorizontalGroup align="center">
+              <InlineSwitch
+                id="organize-by-clusters"
+                label={Messages.services.organizeByClusters}
+                className={styles.clustersSwitch}
+                value={showClusters}
+                onClick={() => setShowClusters(!showClusters)}
+                showLabel
+                transparent
+              />
+              <Tooltip interactive placement="top" theme="info" content={<ReadMoreLink />}>
+                <div className={styles.technicalPreview}>
+                  <HorizontalGroup align="center" spacing="xs">
+                    <span>{Messages.services.technicalPreview}</span>
+                    <Icon name="info-circle" />
+                  </HorizontalGroup>
+                </div>
+              </Tooltip>
+            </HorizontalGroup>
             <Button
               size="md"
               disabled={selected.length === 0}
diff --git a/public/app/percona/inventory/Tabs/Tabs.styles.ts b/public/app/percona/inventory/Tabs/Tabs.styles.ts
index 75c46d4cc89cd..d92e2a61c19da 100644
--- a/public/app/percona/inventory/Tabs/Tabs.styles.ts
+++ b/public/app/percona/inventory/Tabs/Tabs.styles.ts
@@ -69,4 +69,8 @@ export const getStyles = ({ colors, spacing }: GrafanaTheme2) => ({
       padding-left: ${spacing(1)};
     }
   `,
+  technicalPreview: css`
+    margin-left: -${spacing(1.5)};
+    color: ${colors.text.secondary};
+  `,
 });
diff --git a/public/app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview.tsx b/public/app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview.tsx
index e213691f9f1ce..aad3a50dc9426 100644
--- a/public/app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview.tsx
+++ b/public/app/percona/shared/components/Elements/TechnicalPreview/TechnicalPreview.tsx
@@ -5,7 +5,7 @@ import { Icon, Tooltip, useTheme } from '@grafana/ui';
 import { Messages } from './TechnicalPreview.messages';
 import { getStyles } from './TechnicalPreview.styles';
 
-const ReadMoreLink = () => {
+export const ReadMoreLink = () => {
   const theme = useTheme();
   const styles = getStyles(theme);
 
@@ -25,7 +25,7 @@ export const TechnicalPreview = () => {
 
   return (
     <div className={styles.labelWrapper}>
-      <Tooltip placement="top" theme="info" content={<ReadMoreLink />}>
+      <Tooltip interactive placement="top" theme="info" content={<ReadMoreLink />}>
         <h1>
           <Icon name={'info-circle'} /> {Messages.labelText}
         </h1>

From 92557e5ab6bc6f335dd5652bf1a9826f9ef982bd Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Thu, 7 Sep 2023 11:03:54 +0200
Subject: [PATCH 08/10] PMM-12378 Revert typings change

---
 public/app/percona/inventory/Tabs/Services/Clusters.utils.ts  | 2 +-
 public/app/percona/shared/services/services/Services.types.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts b/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
index 990e2e6727992..f14e63e93e839 100644
--- a/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
+++ b/public/app/percona/inventory/Tabs/Services/Clusters.utils.ts
@@ -6,7 +6,7 @@ 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))];
+  const clusterNames = [...new Set(services.map((s) => s.cluster || s.serviceName))];
   return clusterNames.map<ServicesCluster>((clusterName) => {
     const clusterServices = services.filter((s) => s.cluster === clusterName);
 
diff --git a/public/app/percona/shared/services/services/Services.types.ts b/public/app/percona/shared/services/services/Services.types.ts
index 7576d53d98b92..a62fbc76ce72f 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[];

From 2a91570cc165586c0af2177342b00ade7997648e Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 8 Sep 2023 09:01:57 +0200
Subject: [PATCH 09/10] PMM-12378 Fix link from nodes

---
 public/app/percona/inventory/Tabs/Services.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/app/percona/inventory/Tabs/Services.tsx b/public/app/percona/inventory/Tabs/Services.tsx
index 78de2d6c881c6..f68e7e9f696aa 100644
--- a/public/app/percona/inventory/Tabs/Services.tsx
+++ b/public/app/percona/inventory/Tabs/Services.tsx
@@ -6,6 +6,7 @@ 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';
@@ -50,6 +51,7 @@ export const Services = () => {
     [fetchedServices]
   );
   const [showClusters, setShowClusters] = useLocalStorage('pmm-organize-by-clusters', false);
+  const [params] = useQueryParams();
 
   const loadData = useCallback(async () => {
     try {
@@ -70,6 +72,10 @@ export const Services = () => {
 
   useEffect(() => {
     loadData();
+
+    // Reset when linking from nodes
+    setShowClusters(params['search-select'] !== 'serviceId');
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

From 1da1ccdb21779e49b154ca14d598dad950cece04 Mon Sep 17 00:00:00 2001
From: Matej Kubinec <matej.kubinec@3pillarglobal.com>
Date: Fri, 15 Sep 2023 16:33:13 +0200
Subject: [PATCH 10/10] PMM-12378 Clear toggle when clicking on services link

---
 .../app/percona/inventory/Inventory.constants.ts  |  1 +
 public/app/percona/inventory/Tabs/Nodes.tsx       | 15 ++++++++++-----
 public/app/percona/inventory/Tabs/Services.tsx    |  9 ++-------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/public/app/percona/inventory/Inventory.constants.ts b/public/app/percona/inventory/Inventory.constants.ts
index a357f6c9ad833..f17755c294f47 100644
--- 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
index 5019cb6240751..7d738f55d8cc1 100644
--- 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
index f68e7e9f696aa..6e900b62d5b85 100644
--- 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
   }, []);