Everest-1862 | topology diagram view

ui/apps/everest/.e2e/pr/db-cluster-details/components.e2e.ts

@@ -0,0 +1,135 @@
+import { createDbClusterFn, deleteDbClusterFn } from '@e2e/utils/db-cluster';
+import { findDbAndClickRow } from '@e2e/utils/db-clusters-list';
+import { expect, test } from '@playwright/test';
+import { DBClusterDetailsTabs } from '../../../src/pages/db-cluster-details/db-cluster-details.types';
+import { waitForInitializingState } from '@e2e/utils/table';
+
+const CLUSTER_NAME = 'components-mysql';
+
+test.describe('Cluster components', async () => {
+  test.beforeAll(async ({ request }) => {
+    await createDbClusterFn(request, {
+      dbName: CLUSTER_NAME,
+      dbType: 'mysql',
+      numberOfNodes: '3',
+      numberOfProxies: '2',
+    });
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/databases');
+    await waitForInitializingState(page, CLUSTER_NAME);
+  });
+
+  test.afterAll(async ({ request }) => {
+    await deleteDbClusterFn(request, CLUSTER_NAME);
+  });
+
+  test('Same components on table and diagram', async ({ page }) => {
+    const componentsList: Array<{
+      name: string;
+      type: string;
+      containers: Array<{
+        name: string;
+      }>;
+    }> = [];
+
+    await findDbAndClickRow(page, CLUSTER_NAME);
+    await page.getByTestId(DBClusterDetailsTabs.components).click();
+
+    const switchInput = page
+      .getByTestId('switch-input-table-view')
+      .getByRole('checkbox');
+    await switchInput.check();
+    await expect(page.getByRole('table')).toBeVisible();
+    expect(
+      await page
+        .locator(
+          '.MuiTableRow-root:not(.MuiTableRow-head):not(.Mui-TableBodyCell-DetailPanel)'
+        )
+        .count()
+    ).not.toBe(0);
+    // Waiting for some containers to be available
+    await page.waitForTimeout(5000);
+    await page.getByLabel('Expand all').getByRole('button').click();
+    await expect(page.getByLabel('Collapse all')).toBeVisible();
+    const allComponents = await page
+      .locator(
+        `table[data-testid="${CLUSTER_NAME}-components"] > tbody > tr.MuiTableRow-root:not(.MuiTableRow-head):not(.Mui-TableBodyCell-DetailPanel)`
+      )
+      .all();
+    const allContainers = await page
+      .locator('tr.Mui-TableBodyCell-DetailPanel')
+      .all();
+
+    for (const component of allComponents) {
+      // We just read static data, as the other data might change while we check things around
+      const name = await component.locator('td').nth(2).innerText();
+      const type = await component.locator('td').nth(3).innerText();
+      componentsList.push({ name, type, containers: [] });
+    }
+
+    for (const [index, container] of allContainers.entries()) {
+      const innerText = await container.innerText();
+
+      if (innerText !== 'No containers') {
+        const innerTable = container.locator('table');
+        const innerTableRows = await innerTable.locator('tr').all();
+
+        for (const innerTableRow of innerTableRows) {
+          const name = await innerTableRow.locator('td').nth(2).innerText();
+          componentsList[index].containers.push({ name });
+        }
+      }
+    }
+
+    await switchInput.uncheck();
+    await expect(page.getByTitle('zoom in')).toBeVisible();
+
+    for (const component of componentsList) {
+      const { name, type, containers } = component;
+      const correspondingNode = page.getByTestId(
+        new RegExp(`component-node-${name}(-selected)?`)
+      );
+      const correspondingNodeSelected = page.getByTestId(
+        `component-node-${name}-selected`
+      );
+      const isSelected = await correspondingNodeSelected.isVisible();
+
+      await expect(correspondingNode).toBeVisible();
+      expect(
+        await correspondingNode.getByTestId('component-name').innerText()
+      ).toBe(name);
+      expect(
+        await correspondingNode.getByTestId('component-type').innerText()
+      ).toBe(type);
+
+      if (!isSelected) {
+        await correspondingNode.click();
+      }
+      // Wait for the diagram to be updated
+      await page.waitForTimeout(300);
+
+      if (containers.length) {
+        const correspondingContainers = await page
+          .getByTestId(/container-node-.+/)
+          .all();
+        expect(correspondingContainers.length).toBe(containers.length);
+
+        for (const container of containers) {
+          const { name } = container;
+          const correspondingContainer = page.getByTestId(
+            `container-node-${name}`
+          );
+
+          await expect(correspondingContainer).toBeVisible();
+          expect(
+            await correspondingContainer
+              .getByTestId('container-name')
+              .innerText()
+          ).toBe(name);
+        }
+      }
+    }
+  });
+});

ui/apps/everest/package.json

@@ -34,11 +34,13 @@
     "@percona/utils": "workspace:^",
     "@tanstack/react-query": "^5.22.2",
     "@tanstack/react-query-devtools": "^5.24.0",
+    "@xyflow/react": "^12.3.6",
     "axios": "^1.8.2",
     "casbin.js": "^0.5.1",
     "cron-parser": "^4.9.0",
     "cron-time-generator": "^2.0.1",
     "css-mediaquery": "^0.1.2",
+    "dagre": "^0.8.5",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
     "dotenv": "^16.3.1",
@@ -60,6 +62,7 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/css-mediaquery": "^0.1.3",
+    "@types/dagre": "^0.7.52",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/semver": "^7.5.8",

ui/apps/everest/src/pages/db-cluster-details/components/component-age/component-age.tsx

@@ -0,0 +1,31 @@
+import { Tooltip, Typography, TypographyProps } from '@mui/material';
+import { format, formatDistanceToNowStrict, isValid } from 'date-fns';
+import { DATE_FORMAT } from 'consts';
+
+export type ComponentAgeProps = {
+  date: string;
+  render?: (date?: string) => React.ReactNode;
+  typographyProps?: TypographyProps;
+};
+
+const ComponentAge = ({ date, render, typographyProps }: ComponentAgeProps) => {
+  const dateObj = new Date(date);
+
+  const formattedDate = isValid(dateObj)
+    ? formatDistanceToNowStrict(dateObj)
+    : '';
+
+  return (
+    <Tooltip
+      title={isValid(dateObj) ? `Started at ${format(date, DATE_FORMAT)}` : ''}
+      placement="right"
+      arrow
+    >
+      <Typography variant="caption" color="text.secondary" {...typographyProps}>
+        {render ? render(formattedDate) : formattedDate}
+      </Typography>
+    </Tooltip>
+  );
+};
+
+export default ComponentAge;

ui/apps/everest/src/pages/db-cluster-details/components/component-age/index.ts

@@ -0,0 +1 @@
+export { default } from './component-age';

ui/apps/everest/src/pages/db-cluster-details/components/component-status/component-status.tsx

@@ -0,0 +1,25 @@
+import { capitalize, Typography, TypographyProps } from '@mui/material';
+import StatusField from 'components/status-field';
+import { COMPONENT_STATUS, CONTAINER_STATUS } from '../components.constants';
+import {
+  BaseStatus,
+  StatusFieldProps,
+} from 'components/status-field/status-field.types';
+
+const ComponentStatus = <T extends COMPONENT_STATUS | CONTAINER_STATUS>({
+  status,
+  statusMap,
+  typographyProps,
+}: {
+  status: T;
+  statusMap: Record<T, BaseStatus>;
+  typographyProps?: TypographyProps;
+} & StatusFieldProps<T>) => (
+  <StatusField status={status} statusMap={statusMap}>
+    <Typography variant="body2" fontWeight="bold" {...typographyProps}>
+      {capitalize(status)}
+    </Typography>
+  </StatusField>
+);
+
+export default ComponentStatus;

ui/apps/everest/src/pages/db-cluster-details/components/component-status/index.ts

@@ -0,0 +1 @@
+export { default } from './component-status';

ui/apps/everest/src/pages/db-cluster-details/components/components.tsx

@@ -13,116 +13,52 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { useState } from 'react';
+import { Box, FormControlLabel, Stack, Switch } from '@mui/material';
+import ComponentsDiagramView from './diagram-view/components-diagram-view';
+import { ReactFlowProvider } from '@xyflow/react';
 import { useParams } from 'react-router-dom';
-import { useDbClusterComponents } from 'hooks/api/db-cluster/useDbClusterComponents';
-import { useMemo } from 'react';
-import { capitalize, Tooltip } from '@mui/material';
-import { Table } from '@percona/ui-lib';
-import { MRT_ColumnDef } from 'material-react-table';
-import { DBClusterComponent } from 'shared-types/components.types';
-import StatusField from 'components/status-field';
-import { format, formatDistanceToNowStrict, isValid } from 'date-fns';
-import {
-  COMPONENT_STATUS,
-  COMPONENT_STATUS_WEIGHT,
-  componentStatusToBaseStatus,
-} from './components.constants';
-import ExpandedRow from './expanded-row';
-import { DATE_FORMAT } from 'consts';
+import { useDbClusterComponents } from 'hooks';
+import ComponentsTableView from './table-view';
 
 const Components = () => {
-  const { dbClusterName, namespace = '' } = useParams();
-
+  const [tableView, setTableView] = useState(false);
+  const { dbClusterName = '', namespace = '' } = useParams();
   const { data: components = [], isLoading } = useDbClusterComponents(
     namespace,
     dbClusterName!
   );
 
-  const columns = useMemo<MRT_ColumnDef<DBClusterComponent>[]>(() => {
-    return [
-      {
-        header: 'Status',
-        accessorKey: 'status',
-        Cell: ({ cell, row }) => (
-          <StatusField
-            status={cell.getValue<COMPONENT_STATUS>()}
-            statusMap={componentStatusToBaseStatus(row?.original?.ready)}
-          >
-            {capitalize(cell?.row?.original?.status)}
-          </StatusField>
-        ),
-        sortingFn: (rowA, rowB) => {
-          return (
-            COMPONENT_STATUS_WEIGHT[rowA?.original?.status] -
-            COMPONENT_STATUS_WEIGHT[rowB?.original?.status]
-          );
-        },
-      },
-      {
-        header: 'Ready',
-        accessorKey: 'ready',
-      },
-      {
-        header: 'Name',
-        accessorKey: 'name',
-      },
-      {
-        header: 'Type',
-        accessorKey: 'type',
-      },
-      {
-        header: 'Age',
-        accessorKey: 'started',
-        Cell: ({ cell }) => {
-          const date = new Date(cell.getValue<string>());
-
-          return isValid(date) ? (
-            <Tooltip
-              title={`Started at ${format(date, DATE_FORMAT)}`}
-              placement="right"
-              arrow
-            >
-              <div>{formatDistanceToNowStrict(date)}</div>
-            </Tooltip>
-          ) : (
-            ''
-          );
-        },
-      },
-      {
-        header: 'Restarts',
-        accessorKey: 'restarts',
-      },
-    ];
-  }, []);
-
   return (
-    <Table
-      getRowId={(row) => row.name}
-      initialState={{
-        sorting: [
-          {
-            id: 'status',
-            desc: true,
-          },
-        ],
-      }}
-      state={{ isLoading }}
-      tableName={`${dbClusterName}-components`}
-      columns={columns}
-      data={components}
-      noDataMessage={'No components'}
-      renderDetailPanel={({ row }) => <ExpandedRow row={row} />}
-      muiTableDetailPanelProps={{
-        sx: {
-          padding: 0,
-          width: '100%',
-          '.MuiCollapse-root': {
-            width: '100%',
-          },
-        },
-      }}
-    />
+    <Stack>
+      <FormControlLabel
+        sx={{ ml: 'auto' }}
+        control={
+          <Switch
+            data-testid="switch-input-table-view"
+            value={tableView}
+            onChange={(_, checked) => setTableView(checked)}
+          />
+        }
+        label="Table view"
+      />
+      {tableView ? (
+        <ComponentsTableView
+          components={components}
+          isLoading={isLoading}
+          dbClusterName={dbClusterName}
+        />
+      ) : (
+        <Box
+          height="500px"
+          sx={{ backgroundColor: 'surfaces.elevation0', borderRadius: 2 }}
+        >
+          <ReactFlowProvider>
+            <ComponentsDiagramView components={components} />
+          </ReactFlowProvider>
+        </Box>
+      )}
+    </Stack>
   );
 };