ISPN-15285 clean deprecated table

infinispan · Oct 31, 2023 · 2b9ddf9 · 2b9ddf9
1 parent d69dd1b
commit 2b9ddf9
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 109 deletions.
diff --git a/src/app/Caches/Configuration/DetailConfigurations.tsx b/src/app/Caches/Configuration/DetailConfigurations.tsx
@@ -24,8 +24,7 @@ import {
   EmptyStateHeader,
   EmptyStateFooter
 } from '@patternfly/react-core';
-import { Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
-import { Table } from '@patternfly/react-table/deprecated';
+import { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { DataContainerBreadcrumb } from '@app/Common/DataContainerBreadcrumb';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { useTranslation } from 'react-i18next';
@@ -36,12 +35,12 @@ import { onSearch } from '@app/utils/searchFilter';
 import { global_spacer_sm, global_spacer_md } from '@patternfly/react-tokens';
 import { ThemeContext } from '@app/providers/ThemeProvider';
 
-const DetailConfigurations: React.FunctionComponent<any> = (props) => {
+const DetailConfigurations = (props) => {
   const { t } = useTranslation();
   const cmName = props.computedMatch.params.cmName;
   const { cacheTemplates, loading, error } = useFetchCacheTemplates(cmName);
   const [filteredTemplates, setFilteredTemplates] = useState<CacheConfig[]>([]);
-  const [rows, setRows] = useState<(string | any)[]>([]);
+  const [rows, setRows] = useState<CacheConfig[]>([]);
   const [expandedTemplateNames, setExpandedRepoNames] = useState<string[]>([]);
   const [searchValue, setSearchValue] = useState('');
   const [pageConfigsPagination, setCacheConfigsPagination] = useState({

diff --git a/src/app/Caches/DataDistributionChart.tsx b/src/app/Caches/DataDistributionChart.tsx
@@ -20,8 +20,7 @@ import {
   ToolbarItemVariant
 } from '@patternfly/react-core';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
-import { TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
-import { Table } from '@patternfly/react-table/deprecated';
+import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { Chart, ChartBar, ChartGroup, ChartVoronoiContainer, ChartThemeColor } from '@patternfly/react-charts';
 import { SearchIcon } from '@patternfly/react-icons';
 import { TableErrorState } from '@app/Common/TableErrorState';

diff --git a/src/app/Caches/Entries/CacheEntries.tsx b/src/app/Caches/Entries/CacheEntries.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   Bullseye,
   Button,

diff --git a/src/app/Caches/Query/QueryEntries.tsx b/src/app/Caches/Query/QueryEntries.tsx
@@ -22,8 +22,7 @@ import displayUtils from '../../../services/displayUtils';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { useTranslation } from 'react-i18next';
 import { ConsoleServices } from '@services/ConsoleServices';
-import { Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { Table } from '@patternfly/react-table/deprecated';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { global_danger_color_200, global_spacer_md, global_spacer_sm } from '@patternfly/react-tokens';
 import { ThemeContext } from '@app/providers/ThemeProvider';
 

diff --git a/src/app/ClusterStatus/ClusterStatus.tsx b/src/app/ClusterStatus/ClusterStatus.tsx
@@ -28,8 +28,7 @@ import {
   Title
 } from '@patternfly/react-core';
 import { CubesIcon, SearchIcon, DownloadIcon } from '@patternfly/react-icons';
-import { Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { Table } from '@patternfly/react-table/deprecated';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { Health } from '@app/Common/Health';
 import { TableErrorState } from '@app/Common/TableErrorState';
 import { useTranslation } from 'react-i18next';

diff --git a/src/app/ConnectedClients/ConnectedClients.tsx b/src/app/ConnectedClients/ConnectedClients.tsx
@@ -33,8 +33,7 @@ import {
   Title
 } from '@patternfly/react-core';
 import { CubesIcon, SearchIcon, InfoCircleIcon } from '@patternfly/react-icons';
-import { Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { Table } from '@patternfly/react-table/deprecated';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { TableErrorState } from '@app/Common/TableErrorState';
 import { useTranslation } from 'react-i18next';
 import { useFetchConnectedClients } from '@app/services/serverHook';

diff --git a/src/app/XSite/XSiteCache.tsx b/src/app/XSite/XSiteCache.tsx
@@ -7,8 +7,15 @@ import {
   ButtonVariant,
   Card,
   CardBody,
+  CardFooter,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  EmptyStateVariant,
   PageSection,
   PageSectionVariants,
+  Spinner,
   Switch,
   Text,
   TextContent,
@@ -22,17 +29,15 @@ import { Link } from 'react-router-dom';
 import { global_spacer_xs } from '@patternfly/react-tokens';
 import { useApiAlert } from '@app/utils/useApiAlert';
 import { DataContainerBreadcrumb } from '@app/Common/DataContainerBreadcrumb';
-import { cellWidth, IRow, TableVariant, textCenter } from '@patternfly/react-table';
-import { Table, TableBody, TableHeader } from '@patternfly/react-table/deprecated';
-import { TableEmptyState } from '@app/Common/TableEmptyState';
+import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { StateTransfer } from '@app/XSite/StateTransfer';
 import { Status } from '@app/Common/Status';
-import { InfoCircleIcon } from '@patternfly/react-icons';
+import { DatabaseIcon, InfoCircleIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
 import { ConsoleServices } from '@services/ConsoleServices';
-import { ConsoleACL } from '@services/securityService';
 import { useConnectedUser } from '@app/services/userManagementHook';
 import { ST_IDLE, ST_SEND_CANCELED, ST_SEND_FAILED, ST_SEND_OK, ST_SENDING } from '@services/displayUtils';
+import { TableErrorState } from '@app/Common/TableErrorState';
 
 interface StateTransferModalState {
   site: string;
@@ -48,7 +53,6 @@ const XSiteCache = (props) => {
   const cacheName = decodeURIComponent(props.computedMatch.params.cacheName);
   const { connectedUser } = useConnectedUser();
   const [backups, setBackups] = useState<XSite[]>([]);
-  const [rows, setRows] = useState<IRow[]>([]);
   const [stateTransferStatus, setStateTransferStatus] = useState(new Map<string, Status>());
   const [backupsStatus, setBackupsStatus] = useState(new Map());
   const [loading, setLoading] = useState<boolean>(true);
@@ -61,14 +65,6 @@ const XSiteCache = (props) => {
 
   useEffect(() => {
     if (loading) {
-      // Load Sites
-      // First check ADMIN
-      if (!ConsoleServices.security().hasConsoleACL(ConsoleACL.ADMIN, connectedUser)) {
-        setLoading(false);
-        setError('Connected user lacks ADMIN permission.');
-        return;
-      }
-      // Second get backups
       crossSiteReplicationService
         .backupsForCache(cacheName)
         .then((eitherResponse) => {
@@ -103,31 +99,24 @@ const XSiteCache = (props) => {
                 addAlert(eitherResponse.value);
               }
             })
-            .then(() => setLoading(false));
+            .finally(() => setLoading(false));
         });
     }
   }, [loading]);
 
-  useEffect(() => {
-    buildRows();
-  }, [backups, backupsStatus, stateTransferStatus, loading, error]);
-
   const columns = [
-    { title: t('caches.backups.column-site'), transforms: [cellWidth(30)] },
+    { key: 'site', title: t('caches.backups.column-site') },
     {
-      title: t('caches.backups.column-status'),
-      transforms: [cellWidth(30), textCenter],
-      cellTransforms: [textCenter]
+      key: 'status',
+      title: t('caches.backups.column-status')
     },
     {
-      title: t('caches.backups.column-transfer'),
-      transforms: [cellWidth(40), textCenter],
-      cellTransforms: [textCenter]
+      key: 'transfer',
+      title: t('caches.backups.column-transfer')
     },
     {
-      title: t('caches.backups.column-action'),
-      transforms: [cellWidth(20), textCenter],
-      cellTransforms: [textCenter]
+      key: 'action',
+      title: t('caches.backups.column-action')
     }
   ];
 
@@ -160,7 +149,7 @@ const XSiteCache = (props) => {
   };
 
   const buildStatus = (site: string, status: string) => {
-    if (site == 'mixed') {
+    if (status == 'mixed') {
       return (
         <Toolbar key={'mixed-toolbar-' + site}>
           <ToolbarContent>
@@ -207,11 +196,7 @@ const XSiteCache = (props) => {
     if (!stStatus || stStatus == ST_IDLE) {
       return '';
     }
-    return (
-      <Bullseye>
-        <Status status={stateTransferStatus.get(site)} />
-      </Bullseye>
-    );
+    return <Status status={stateTransferStatus.get(site)} />;
   };
 
   const buildStateTransferButton = (backup: XSite) => {
@@ -254,7 +239,7 @@ const XSiteCache = (props) => {
           })
         }
       >
-        Start transfer
+        {t('caches.backups.start-transfer-action')}
       </Button>
     );
   };
@@ -282,41 +267,68 @@ const XSiteCache = (props) => {
     setStateTransferModal({ site: '', open: false, action: '' });
   };
 
-  const onCollapse = (event, rowKey, isOpen) => {
-    rows[rowKey].isOpen = isOpen;
+  const buildRows = () => {
+    if (backups.length == 0) {
+      return (
+        <Tbody>
+          <Tr>
+            <Td colSpan={4}>
+              <Bullseye>
+                <EmptyState variant={EmptyStateVariant.sm}>
+                  <EmptyStateHeader
+                    titleText={<>{t('caches.backups.no-backups')}</>}
+                    icon={<EmptyStateIcon icon={DatabaseIcon} />}
+                    headingLevel="h2"
+                  />
+                  <EmptyStateBody>{t('caches.backups.no-backups-body')}</EmptyStateBody>
+                </EmptyState>
+              </Bullseye>
+            </Td>
+          </Tr>
+        </Tbody>
+      );
+    }
+
+    return (
+      <Tbody>
+        {backups.map((backup) => {
+          return (
+            <Tr key={backup.name}>
+              <Td dataLabel={columns[0].title}>{backup.name}</Td>
+              <Td dataLabel={columns[1].title}>{buildStatus(backup.name, backup.status)}</Td>
+              <Td dataLabel={columns[2].title}>{buildStateTransferStatus(backup.name)}</Td>
+              <Td dataLabel={columns[3].title}>{buildStateTransferButton(backup)}</Td>
+            </Tr>
+          );
+        })}
+      </Tbody>
+    );
   };
 
-  const buildRows = () => {
-    let currentRows;
+  const buildBody = () => {
+    if (loading) {
+      return <Spinner size="lg" />;
+    }
 
-    if (loading || error) {
-      currentRows = [
-        {
-          heightAuto: true,
-          cells: [
-            {
-              props: { colSpan: 4 },
-              title: <TableEmptyState loading={loading} error={error} empty={'Sites not found'} />
-            }
-          ]
-        }
-      ];
-    } else {
-      currentRows = backups.map((backup) => {
-        return {
-          heightAuto: true,
-          cells: [
-            { title: backup.name },
-            { title: buildStatus(backup.name, backup.status) },
-            { title: buildStateTransferStatus(backup.name) },
-            { title: buildStateTransferButton(backup) }
-          ]
-        };
-      });
+    if (error) {
+      return <TableErrorState error={error} />;
     }
-    setRows(currentRows);
-  };
 
+    return (
+      <Table aria-label="XSite Table" variant={TableVariant.compact}>
+        <Thead>
+          <Tr>
+            {columns.map((column) => (
+              <Th key={column.key} style={{ width: '15%' }}>
+                {column.title}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        {buildRows()}
+      </Table>
+    );
+  };
   return (
     <React.Fragment>
       <PageSection variant={PageSectionVariants.light}>
@@ -330,37 +342,26 @@ const XSiteCache = (props) => {
                 </Text>
               </TextContent>
             </ToolbarItem>
-            <ToolbarItem>
-              <Text key={'button-back'}>
-                <Link
-                  to={{
-                    pathname: '/cache/' + encodeURIComponent(cacheName),
-                    search: location.search
-                  }}
-                >
-                  <Button variant={ButtonVariant.link} data-cy="backButton">
-                    {t('common.actions.back')}
-                  </Button>
-                </Link>
-              </Text>
-            </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
       </PageSection>
       <PageSection>
         <Card>
-          <CardBody>
-            <Table
-              aria-label="XSite Table"
-              cells={columns}
-              rows={rows}
-              variant={TableVariant.compact}
-              onCollapse={onCollapse}
-            >
-              <TableHeader />
-              <TableBody />
-            </Table>
-          </CardBody>
+          <CardBody>{buildBody()}</CardBody>
+          <CardFooter>
+            <Text key={'button-back'}>
+              <Link
+                to={{
+                  pathname: '/cache/' + encodeURIComponent(cacheName),
+                  search: location.search
+                }}
+              >
+                <Button variant={ButtonVariant.secondary} data-cy="backButton">
+                  {t('common.actions.back')}
+                </Button>
+              </Link>
+            </Text>
+          </CardFooter>
         </Card>
       </PageSection>
       <StateTransfer

diff --git a/src/app/assets/languages/en.json b/src/app/assets/languages/en.json
@@ -660,13 +660,16 @@
       "clear-state-action": "Clear state",
       "take-offline-action": "Take offline",
       "bring-online-action": "Bring online",
+      "start-transfer-action": "Start transfer",
       "take-all-offline": "Take all offline",
       "bring-all-online": "Bring all online",
       "mixed": "Mixed",
       "column-site": "Site",
       "column-status": "Status",
       "column-transfer": "Transfer status / Result",
-      "column-action": "Action"
+      "column-action": "Action",
+      "no-backups": "No backups",
+      "no-backups-body": "No backups found for this cluster"
     },
     "rebuilding-index": "Rebuilding index",
     "rebalancing": {
@@ -846,7 +849,7 @@
     "no-connections": "No connected clients",
     "no-connections-body": "No connected clients body",
     "no-filtered-connections": "No filtered connected clients",
-    "no-filtered-connections-body": "No filtered connected clients body",
+    "no-filtered-connections-body": "No connected clients match your filter criteria.",
     "node-name": "Server node",
     "principal": "Principal",
     "client-library": "Client library",

diff --git a/src/app/routes.tsx b/src/app/routes.tsx
@@ -158,7 +158,7 @@ const routes: IAppRoute[] = [
     path: '/cache/:cacheName/backups',
     title: 'XSite management caches',
     menu: false,
-    admin: false
+    admin: true
   },
   {
     component: DetailCachePage,