Merge branch 'main' into ui-improvement

percona · May 25, 2024 · e14fdcb · e14fdcb
2 parents 6d2d0f8 + 9263e47
commit e14fdcb
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 50 deletions.
diff --git a/ui/apps/everest/src/hooks/api/backup-storages/useBackupStorages.ts b/ui/apps/everest/src/hooks/api/backup-storages/useBackupStorages.ts
@@ -28,6 +28,7 @@ import {
   BackupStorage,
   GetBackupStoragesPayload,
 } from 'shared-types/backupStorages.types';
+import { PerconaQueryOptions } from 'shared-types/query.types';
 
 export const BACKUP_STORAGES_QUERY_KEY = 'backupStorages';
 
@@ -37,12 +38,20 @@ export const useBackupStorages = () =>
     queryFn: getBackupStoragesFn,
   });
 
-export const useBackupStoragesByNamespace = (namespace: string) =>
+export const useBackupStoragesByNamespace = (
+  namespace: string,
+  options?: PerconaQueryOptions<
+    GetBackupStoragesPayload,
+    unknown,
+    BackupStorage[]
+  >
+) =>
   useQuery<GetBackupStoragesPayload, unknown, BackupStorage[]>({
     queryKey: [BACKUP_STORAGES_QUERY_KEY, namespace],
     queryFn: getBackupStoragesFn,
     select: (data) =>
       data.filter((item) => item.allowedNamespaces?.includes(namespace)),
+    ...options,
   });
 
 export const useCreateBackupStorage = (

diff --git a/ui/apps/everest/src/hooks/api/db-clusters/useDbClusters.ts b/ui/apps/everest/src/hooks/api/db-clusters/useDbClusters.ts
@@ -21,7 +21,7 @@ import {
 } from '@tanstack/react-query';
 import { getDbClustersFn } from 'api/dbClusterApi';
 import { DbCluster, GetDbClusterPayload } from 'shared-types/dbCluster.types';
-import { useNamespaces } from '../namespaces/useNamespaces';
+import { PerconaQueryOptions } from 'shared-types/query.types';
 
 export interface DbClusterForNamespaceResult {
   namespace: string;
@@ -37,17 +37,19 @@ export const dbClustersQuerySelect = ({
     ...props,
   }));
 
-export const useDbClusters = (namespace: string) =>
+export const useDbClusters = (
+  namespace: string,
+  options?: PerconaQueryOptions<GetDbClusterPayload, unknown, DbCluster[]>
+) =>
   useQuery({
     queryKey: [DB_CLUSTERS_QUERY_KEY],
     queryFn: () => getDbClustersFn(namespace),
     refetchInterval: 5 * 1000,
     select: dbClustersQuerySelect,
+    ...options,
   });
 
-export const useDBClustersForNamespaces = () => {
-  const { data: namespaces = [] } = useNamespaces();
-
+export const useDBClustersForNamespaces = (namespaces: string[]) => {
   const queries = namespaces.map<
     UseQueryOptions<GetDbClusterPayload, unknown, DbCluster[]>
   >((namespace) => ({

diff --git a/ui/apps/everest/src/pages/database-form/database-form-body/steps/backups/backups.tsx b/ui/apps/everest/src/pages/database-form/database-form-body/steps/backups/backups.tsx
@@ -13,7 +13,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Alert, Box } from '@mui/material';
+import { Alert, Box, Skeleton } from '@mui/material';
 import { useBackupStoragesByNamespace } from 'hooks/api/backup-storages/useBackupStorages';
 import { useFormContext } from 'react-hook-form';
 import { DbWizardFormFields } from '../../../database-form.types.ts';
@@ -29,7 +29,7 @@ export const Backups = () => {
     DbWizardFormFields.k8sNamespace,
     DbWizardFormFields.schedules,
   ]);
-  const { data: backupStorages = [] } =
+  const { data: backupStorages = [], isLoading } =
     useBackupStoragesByNamespace(selectedNamespace);
 
   return (
@@ -38,19 +38,29 @@ export const Backups = () => {
         pageTitle={Messages.backups}
         pageDescription={Messages.captionBackups}
       />
-      {backupStorages.length > 0 ? (
-        <Schedules />
+      {isLoading ? (
+        <>
+          <Skeleton height="200px" />
+          <Skeleton />
+          <Skeleton />
+        </>
       ) : (
-        <BackupsActionableAlert namespace={selectedNamespace} />
-      )}
-      {schedules?.length === 0 && (
-        <Alert
-          sx={{ mt: 1 }}
-          severity="info"
-          data-testid="pitr-no-backup-alert"
-        >
-          {Messages.pitrAlert}
-        </Alert>
+        <>
+          {backupStorages.length > 0 ? (
+            <Schedules />
+          ) : (
+            <BackupsActionableAlert namespace={selectedNamespace} />
+          )}
+          {schedules?.length === 0 && (
+            <Alert
+              sx={{ mt: 1 }}
+              severity="info"
+              data-testid="pitr-no-backup-alert"
+            >
+              {Messages.pitrAlert}
+            </Alert>
+          )}
+        </>
       )}
     </Box>
   );

diff --git a/ui/apps/everest/src/pages/databases/DbClusterView.tsx b/ui/apps/everest/src/pages/databases/DbClusterView.tsx
@@ -25,6 +25,7 @@ import { Box, Button, MenuItem, Stack } from '@mui/material';
 import { Table } from '@percona/ui-lib';
 import { StatusField } from 'components/status-field/status-field';
 import { useDbActions } from 'hooks/api/db-cluster/useDbActions';
+import { useNamespaces } from 'hooks/api/namespaces/useNamespaces';
 import { useDeleteDbCluster } from 'hooks/api/db-cluster/useDeleteDbCluster';
 import { type MRT_ColumnDef } from 'material-react-table';
 import { RestoreDbModal } from 'modals';
@@ -47,7 +48,9 @@ import { LastBackup } from './lastBackup/LastBackup';
 
 export const DbClusterView = () => {
   const [isNewClusterMode, setIsNewClusterMode] = useState(false);
-  const dbClustersResults = useDBClustersForNamespaces();
+  const { data: namespaces = [], isLoading: loadingNamespaces } =
+    useNamespaces();
+  const dbClustersResults = useDBClustersForNamespaces(namespaces);
   const dbClustersLoading = dbClustersResults.some(
     (result) => result.queryResult.isLoading
   );
@@ -161,7 +164,7 @@ export const DbClusterView = () => {
         <Table
           tableName="dbClusterView"
           noDataMessage={Messages.dbCluster.noData}
-          state={{ isLoading: dbClustersLoading }}
+          state={{ isLoading: dbClustersLoading || loadingNamespaces }}
           columns={columns}
           data={tableData}
           enableRowActions

diff --git a/ui/apps/everest/src/pages/db-cluster-details/backups/backups.tsx b/ui/apps/everest/src/pages/db-cluster-details/backups/backups.tsx
@@ -26,7 +26,7 @@ import { OnDemandBackupModal } from './on-demand-backup-modal/on-demand-backup-m
 export const Backups = () => {
   const { dbClusterName, namespace = '' } = useParams();
   const { data = [] } = useDbClusters(namespace);
-  const { data: backupStorages = [] } = useBackupStorages();
+  const { data: backupStorages = [], isFetching } = useBackupStorages();
   const dbCluster = data.find(
     (cluster) => cluster.metadata.name === dbClusterName
   );
@@ -36,7 +36,7 @@ export const Backups = () => {
   const [openOnDemandModal, setOpenOnDemandModal] = useState(false);
   const [selectedScheduleName, setSelectedScheduleName] = useState<string>('');
 
-  if (!dbCluster) {
+  if (!dbCluster || isFetching) {
     return null;
   }
 

diff --git a/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.tsx b/ui/apps/everest/src/pages/db-cluster-details/cluster-overview/cluster-overview.tsx
@@ -2,27 +2,22 @@ import { Stack } from '@mui/material';
 import { dbEngineToDbType } from '@percona/utils';
 import { useDbClusterCredentials } from 'hooks/api/db-cluster/useCreateDbCluster';
 import { useDbCluster } from 'hooks/api/db-cluster/useDbCluster';
-import { useDbClusters } from 'hooks/api/db-clusters/useDbClusters';
 import { useParams } from 'react-router-dom';
 import { ProxyExposeType } from 'shared-types/dbCluster.types';
 import { ConnectionDetails, DatabaseDetails } from './cards';
 
 export const ClusterOverview = () => {
   const { dbClusterName, namespace = '' } = useParams();
-  const { data = [], isLoading } = useDbClusters(namespace);
-  const dbNameExists = data.find(
-    (cluster) => cluster.metadata.name === dbClusterName
-  );
   const { data: dbCluster, isFetching: fetchingCluster } = useDbCluster(
     dbClusterName || '',
     namespace,
     {
-      enabled: !!dbClusterName && !!dbNameExists,
+      enabled: !!dbClusterName,
     }
   );
   const { data: dbClusterDetails, isFetching: fetchingClusterDetails } =
     useDbClusterCredentials(dbClusterName || '', namespace, {
-      enabled: !!dbClusterName && !!dbNameExists,
+      enabled: !!dbClusterName,
     });
 
   return (
@@ -39,7 +34,7 @@ export const ClusterOverview = () => {
     >
       {/* We force ! because while loading no info is shown */}
       <DatabaseDetails
-        loading={fetchingCluster || isLoading}
+        loading={fetchingCluster}
         type={dbEngineToDbType(dbCluster?.spec.engine.type!)}
         name={dbCluster?.metadata.name!}
         namespace={dbCluster?.metadata.namespace!}
@@ -56,7 +51,7 @@ export const ClusterOverview = () => {
       />
       <ConnectionDetails
         loading={fetchingCluster}
-        loadingClusterDetails={fetchingClusterDetails || isLoading}
+        loadingClusterDetails={fetchingClusterDetails}
         hostname={dbCluster?.status?.hostname!}
         port={dbCluster?.status?.port!}
         username={dbClusterDetails?.username!}

diff --git a/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx b/ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx
@@ -9,7 +9,6 @@ import {
   Typography,
 } from '@mui/material';
 import { useDbClusters } from 'hooks/api/db-clusters/useDbClusters';
-import { useEffect, useState } from 'react';
 import {
   Link,
   Outlet,
@@ -21,28 +20,21 @@ import { NoMatch } from '../404/NoMatch';
 import { DbActionButton } from './db-action-button';
 import { Messages } from './db-cluster-details.messages';
 import { DBClusterDetailsTabs } from './db-cluster-details.types';
-import { DbCluster, DbClusterStatus } from 'shared-types/dbCluster.types';
+import { DbClusterStatus } from 'shared-types/dbCluster.types';
 
 export const DbClusterDetails = () => {
   const { dbClusterName, namespace = '' } = useParams();
-  const [dbCluster, setDbCluster] = useState<DbCluster | null>();
-  const { data = [], isLoading } = useDbClusters(namespace);
+  const { data = [], isLoading } = useDbClusters(namespace, {
+    enabled: !!namespace,
+  });
   const routeMatch = useMatch('/databases/:namespace/:dbClusterName/:tabs');
   const navigate = useNavigate();
   const currentTab = routeMatch?.params?.tabs;
+  const dbCluster = data.find(
+    (cluster) => cluster.metadata.name === dbClusterName
+  );
 
-  useEffect(() => {
-    if (!isLoading) {
-      const cluster = data.find(
-        (cluster) => cluster.metadata.name === dbClusterName
-      );
-
-      setDbCluster(cluster ? cluster : null);
-    }
-  }, [isLoading, data, dbClusterName]);
-
-  // Either loading or we're still searching through the array
-  if (isLoading || dbCluster === undefined) {
+  if (isLoading) {
     return (
       <>
         <Skeleton variant="rectangular" />
@@ -56,7 +48,7 @@ export const DbClusterDetails = () => {
   }
 
   // We went through the array and know the cluster is not there. Safe to show 404
-  if (dbCluster === null) {
+  if (!dbCluster) {
     return <NoMatch />;
   }