PMM-12378 Cluster view

public/app/percona/inventory/Inventory.messages.ts

@@ -27,6 +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',
+    technicalPreview: '(Technical Preview) ',
   },
   agents: {
     goBackToServices: 'Go back to services',

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

@@ -1,44 +1,31 @@
 /* eslint-disable @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Row } from 'react-table';
+import { useLocalStorage } from 'react-use';
 
 import { locationService } from '@grafana/runtime';
-import { Badge, Button, HorizontalGroup, Icon, Link, TagList, useStyles2 } from '@grafana/ui';
+import { Button, HorizontalGroup, Icon, InlineSwitch, Tooltip, 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 { 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 { 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';
 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 { GET_SERVICES_CANCEL_TOKEN } from '../Inventory.constants';
 import { Messages } from '../Inventory.messages';
-import { FlattenService, MonitoringStatus } from '../Inventory.types';
+import { FlattenService } from '../Inventory.types';
 import DeleteServiceModal from '../components/DeleteServiceModal';
 import DeleteServicesModal from '../components/DeleteServicesModal';
-import { StatusBadge } from '../components/StatusBadge/StatusBadge';
-import { StatusInfo } from '../components/StatusInfo/StatusInfo';
-import { StatusLink } from '../components/StatusLink/StatusLink';
 
-import {
-  getBadgeColorForServiceStatus,
-  getBadgeIconForServiceStatus,
-  getBadgeTextForServiceStatus,
-  getAgentsMonitoringStatus,
-  getNodeLink,
-} from './Services.utils';
+import { getAgentsMonitoringStatus } from './Services.utils';
+import Clusters from './Services/Clusters';
+import ServicesTable from './Services/ServicesTable';
 import { getStyles } from './Tabs.styles';
 
 export const Services = () => {
@@ -56,146 +43,13 @@ export const Services = () => {
         return {
           type: value.type,
           ...value.params,
+          cluster: value.params.cluster || value.params.customLabels?.cluster || '',
           agentsStatus: getAgentsMonitoringStatus(value.params.agents ?? []),
         };
       }),
     [fetchedServices]
   );
-
-  const getActions = useCallback(
-    (row: Row<FlattenService>): Action[] => [
-      {
-        content: (
-          <HorizontalGroup spacing="sm">
-            <Icon name="trash-alt" />
-            <span className={styles.actionItemTxtSpan}>{Messages.delete}</span>
-          </HorizontalGroup>
-        ),
-        action: () => {
-          setActionItem(row.original);
-          setModalVisible(true);
-        },
-      },
-      {
-        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: () => {
-          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.actionItemTxtSpan]
-  );
-
-  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 [showClusters, setShowClusters] = useLocalStorage('pmm-organize-by-clusters', false);
 
   const loadData = useCallback(async () => {
     try {
@@ -223,40 +77,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);
@@ -271,9 +95,28 @@ export const Services = () => {
 
   return (
     <OldPage navModel={navModel}>
-      <OldPage.Contents>
+      <OldPage.Contents isLoading={isLoading}>
         <FeatureLoader>
           <HorizontalGroup height={40} justify="flex-end" align="flex-start">
+            <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}
@@ -305,23 +148,16 @@ export const Services = () => {
               onDismiss={onModalClose}
             />
           )}
-          <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
-          />
+          {showClusters ? (
+            <Clusters services={flattenServices} onDelete={handleDelete} onSelectionChange={handleSelectionChange} />
+          ) : (
+            <ServicesTable
+              flattenServices={flattenServices}
+              onSelectionChange={handleSelectionChange}
+              onDelete={handleDelete}
+              isLoading={isLoading}
+            />
+          )}
         </FeatureLoader>
       </OldPage.Contents>
     </OldPage>

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

@@ -0,0 +1,54 @@
+import React, { FC, useCallback, useEffect, 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 { removeClusterFilters, shouldClusterBeExpanded } from './Clusters.utils';
+import ServicesTable from './ServicesTable';
+
+const ClusterItem: FC<ClusterItemProps> = ({ cluster, onDelete, onSelectionChange }) => {
+  const [isOpen, setIsOpen] = useState(shouldClusterBeExpanded(cluster.name));
+  const icon: IconName = cluster.type ? (DATABASE_ICONS[cluster.type] as IconName) : 'database';
+
+  const handleSelectionChange = useCallback(
+    (services: Array<Row<FlattenService>>) => {
+      onSelectionChange(cluster, services);
+    },
+    [cluster, onSelectionChange]
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      removeClusterFilters(cluster.name);
+    }
+  }, [isOpen, cluster.name]);
+
+  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={handleSelectionChange}
+        tableKey={cluster.name}
+        showPagination={false}
+      />
+    </Collapse>
+  );
+};
+
+export default ClusterItem;