feat: add missing details for upgrades page (#550)

ui/apps/everest/src/hooks/api/db-engines/useDbEngines.ts

@@ -135,28 +135,33 @@ export type UseOperatorsUpgradePlanType = OperatorsUpgradePlan & {
   }>;
 };
 
+export const operatorUpgradePlanQueryFn = async (
+  namespace: string,
+  dbEngines: DbEngine[]
+) => {
+  const operatorUpgradePlan = await getOperatorsUpgradePlan(namespace);
+  const operatorsWithUpgrades = operatorUpgradePlan.upgrades.map(
+    (plan) => plan.name
+  );
+
+  return {
+    ...operatorUpgradePlan,
+    upToDate: dbEngines
+      .filter((engine) => !operatorsWithUpgrades.includes(engine.name))
+      .map((engine) => ({
+        name: engine.name,
+        currentVersion: engine.operatorVersion || '',
+      })),
+  };
+};
+
 export const useOperatorsUpgradePlan = (
   namespace: string,
   dbEngines: DbEngine[],
   options?: PerconaQueryOptions<UseOperatorsUpgradePlanType>
 ) =>
   useQuery<UseOperatorsUpgradePlanType>({
     queryKey: ['operatorUpgradePlan', namespace],
-    queryFn: async () => {
-      const operatorUpgradePlan = await getOperatorsUpgradePlan(namespace);
-      const operatorsWithUpgrades = operatorUpgradePlan.upgrades.map(
-        (plan) => plan.name
-      );
-
-      return {
-        ...operatorUpgradePlan,
-        upToDate: dbEngines
-          .filter((engine) => !operatorsWithUpgrades.includes(engine.name))
-          .map((engine) => ({
-            name: engine.name,
-            currentVersion: engine.operatorVersion || '',
-          })),
-      };
-    },
+    queryFn: () => operatorUpgradePlanQueryFn(namespace, dbEngines),
     ...options,
   });

ui/apps/everest/src/pages/settings/namespaces/namespace-details/cluster-status-table.tsx

@@ -2,20 +2,28 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { MRT_ColumnDef } from 'material-react-table';
 import { Button } from '@mui/material';
 import { Table } from '@percona/ui-lib';
+import { beautifyDbTypeName, dbEngineToDbType } from '@percona/utils';
 import semverCoerce from 'semver/functions/coerce';
 import {
   DbEngineToolStatus,
   OperatorUpgradePendingAction,
 } from 'shared-types/dbEngines.types';
-import { DbCluster } from 'shared-types/dbCluster.types';
+import { DbCluster, DbClusterStatus, Spec } from 'shared-types/dbCluster.types';
 import { ClusterStatusTableProps } from './types';
 import { useDbClusters } from 'hooks/api/db-clusters/useDbClusters';
+import { DB_CLUSTER_STATUS_TO_BASE_STATUS } from 'pages/databases/DbClusterView.constants';
+import { beautifyDbClusterStatus } from 'pages/databases/DbClusterView.utils';
 import {
   useUpdateDbClusterCrd,
   useUpdateDbClusterEngine,
 } from 'hooks/api/db-cluster/useUpdateDbCluster';
 import { ConfirmDialog } from 'components/confirm-dialog/confirm-dialog';
 import { Messages } from './messages';
+import StatusField from 'components/status-field';
+
+type EnhancedDbList = OperatorUpgradePendingAction & {
+  db?: DbCluster;
+};
 
 const ClusterStatusTable = ({
   namespace,
@@ -36,6 +44,20 @@ const ClusterStatusTable = ({
   const [openUpdateEngineDialog, setOpenUpdateEngineDialog] = useState(false);
   const selectedDbCluster = useRef<DbCluster>();
   const selectedDbEngineVersion = useRef<string>();
+  const enhancedDbList: EnhancedDbList[] = useMemo(
+    () =>
+      pendingActions.map((action) => {
+        const db = dbClusters.find(
+          (cluster) => cluster.metadata.name === action.name
+        );
+
+        return {
+          ...action,
+          db,
+        };
+      }),
+    [dbClusters, pendingActions]
+  );
 
   const onDbClick = useCallback(
     (db: OperatorUpgradePendingAction) => {
@@ -135,24 +157,45 @@ const ClusterStatusTable = ({
     setOpenUpdateEngineDialog(false);
   };
 
-  const columns = useMemo<MRT_ColumnDef<OperatorUpgradePendingAction>[]>(
+  const columns = useMemo<MRT_ColumnDef<EnhancedDbList>[]>(
     () => [
+      {
+        id: 'status',
+        header: 'Status',
+        accessorFn: (row) => row.db?.status?.status,
+        Cell: ({ cell }) => (
+          <StatusField
+            status={cell.getValue<DbClusterStatus>()}
+            statusMap={DB_CLUSTER_STATUS_TO_BASE_STATUS}
+          >
+            {beautifyDbClusterStatus(cell.getValue<DbClusterStatus>())}
+          </StatusField>
+        ),
+      },
       {
         accessorKey: 'name',
         header: 'Database name',
       },
       {
-        id: 'crd',
-        accessorFn: (row) => row.name,
-        header: 'CRD Version',
+        id: 'technology',
+        header: 'Technology',
+        accessorFn: (row) => row.db?.spec.engine,
         Cell: ({ cell }) => {
-          if (!dbClusters.length) {
-            return null;
+          const engine = cell.getValue<Spec['engine']>();
+
+          if (!engine) {
+            return 'N/A';
           }
 
-          const db = dbClusters.find(
-            (cluster) => cluster.metadata.name === cell.getValue()
-          );
+          return `${beautifyDbTypeName(dbEngineToDbType(engine.type))} ${engine.version}`;
+        },
+      },
+      {
+        id: 'crd',
+        accessorFn: (row) => row.db,
+        header: 'CRD Version',
+        Cell: ({ cell }) => {
+          const db = cell.getValue<DbCluster | undefined>();
 
           return db?.status?.crVersion || 'N/A';
         },
@@ -188,7 +231,7 @@ const ClusterStatusTable = ({
         tableName={`${namespace}-upgrade-pending-actions`}
         noDataMessage="No pending actions"
         columns={columns}
-        data={pendingActions}
+        data={enhancedDbList}
       />
       <ConfirmDialog
         isOpen={openUpdateCrDialog}

ui/apps/everest/src/pages/settings/namespaces/namespaces.tsx

@@ -1,16 +1,31 @@
+import { useMemo } from 'react';
 import { Table } from '@percona/ui-lib';
+import { Button, Stack, Typography } from '@mui/material';
 import { MRT_ColumnDef } from 'material-react-table';
-import { useMemo } from 'react';
+import { useQueries } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { NamespaceInstance } from 'shared-types/namespaces.types';
 import { useDBEnginesForNamespaces } from 'hooks/api/namespaces/useNamespaces';
+import { operatorUpgradePlanQueryFn } from 'hooks/api/db-engines';
 import { Messages } from './namespaces.messages';
 
 export const Namespaces = () => {
   const navigate = useNavigate();
   const dbEngines = useDBEnginesForNamespaces();
-  const namespacesData = dbEngines.map((item) => ({
+  const operatorsUpgradePlan = useQueries({
+    queries: dbEngines.map((item) => ({
+      queryKey: ['operatorUpgradePlan', item.namespace],
+      queryFn: () =>
+        operatorUpgradePlanQueryFn(item.namespace, item.data || []),
+      enabled: dbEngines.every((result) => result.isSuccess),
+    })),
+  });
+
+  const namespacesData: NamespaceInstance[] = dbEngines.map((item, idx) => ({
     name: item.namespace,
+    upgradeAvailable: operatorsUpgradePlan[idx].isSuccess
+      ? operatorsUpgradePlan[idx].data.upgrades.length > 0
+      : false,
     operator: item.isSuccess
       ? item.data?.reduce((prevVal, currVal, idx) => {
           if (idx === 0 || prevVal === '') {
@@ -26,20 +41,38 @@ export const Namespaces = () => {
       : '-',
   }));
 
-  const isFetching = dbEngines.some((result) => result.isLoading);
+  const isFetching =
+    dbEngines.some((result) => result.isLoading) ||
+    operatorsUpgradePlan.some((result) => result.isLoading);
 
   const columns = useMemo<MRT_ColumnDef<NamespaceInstance>[]>(
     () => [
       {
         accessorKey: 'name',
         header: 'Namespace',
+        Cell: ({ cell }) => <Typography>{cell.getValue<string>()}</Typography>,
       },
       {
         accessorKey: 'operator',
         header: 'Operator',
+        Cell: ({ cell, row }) => (
+          <Stack direction="row" alignItems="center" width="100%">
+            <Typography variant="body1">{cell.getValue<string>()}</Typography>
+            {row.original.upgradeAvailable && (
+              <Button
+                onClick={() =>
+                  navigate(`/settings/namespaces/${row.original.name}`)
+                }
+                sx={{ ml: 'auto' }}
+              >
+                Upgrade
+              </Button>
+            )}
+          </Stack>
+        ),
       },
     ],
-    []
+    [navigate]
   );
 
   return (
@@ -53,14 +86,6 @@ export const Namespaces = () => {
         }}
         columns={columns}
         data={namespacesData}
-        muiTableBodyRowProps={({ row }) => ({
-          onClick: () => {
-            navigate(`/settings/namespaces/${row.original.name}`);
-          },
-          sx: {
-            cursor: 'pointer',
-          },
-        })}
         // enableRowActions
         // renderRowActionMenuItems={({ row, closeMenu }) => [
         //     <MenuItem

ui/apps/everest/src/shared-types/namespaces.types.ts

@@ -16,6 +16,7 @@
 // TODO EVEREST-677
 export interface NamespaceInstance {
   name: string;
+  upgradeAvailable: boolean;
   operator: string;
 }