ISPN-16580 Display aliases in caches

* Includes IT test
infinispan · Sep 18, 2024 · c896149 · c896149
1 parent 39ff47d
commit c896149
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 14 deletions.
diff --git a/cypress/e2e/3_cache-aliases.cy.js b/cypress/e2e/3_cache-aliases.cy.js
@@ -0,0 +1,51 @@
+describe('Data Container Caches', () => {
+  beforeEach(() => {
+    cy.login(Cypress.env('username'), Cypress.env('password'));
+  });
+
+  it('successfully add / update / remove an alias', () => {
+    cy.get('[data-cy=actions-default]').click();
+    cy.get('[aria-label=updateAliasesCacheAction]').click();
+    cy.get('[data-cy=updateAliasesCacheModal]').should('exist');
+    cy.get('#updateAliasesCacheModal [aria-label=Close]').click(); //Closing modal with close button
+    cy.get('[data-cy=updateAliasesCacheModal]').should('not.exist');
+
+    cy.get('[data-cy=actions-default]').click();
+    cy.get('[aria-label=updateAliasesCacheAction]').click();
+    cy.get('[data-cy=updateAliasesCacheModal]').should('exist');
+    cy.get('[data-cy=closeAction]').click(); //Closing modal with Close button
+    cy.get('[data-cy=updateAliasesCacheModal]').should('not.exist');
+    cy.get('[data-cy=actions-default]').click();
+    cy.get('[aria-label=updateAliasesCacheAction]').click();
+    // add aliases
+    cy.get('[data-cy=menu-toogle-aliasesSelector]')
+      .click().type('alias1')
+      .type('{enter}');
+    cy.get('[data-cy=updateAliasesButton]').click(); //Update aliases
+    cy.get('[data-cy=closeAction]').click(); //Closing modal with Close button
+    cy.contains('alias1');
+
+    // Check detail has aliases
+    cy.login(Cypress.env('username'), Cypress.env('password'), '/cache/default');
+    cy.contains('Aliases');
+    cy.contains('alias1');
+    cy.login(Cypress.env('username'), Cypress.env('password'));
+
+    cy.get('[data-cy=actions-default]').click();
+    cy.get('[aria-label=updateAliasesCacheAction]').click();
+    // add aliases
+    cy.get('[data-cy=menu-toogle-aliasesSelector]')
+      .click().type('alias1')
+      .type('{enter}');
+    cy.get('[data-cy=updateAliasesButton]').click(); //Update aliases
+    cy.get('[data-cy=closeAction]').click(); //Closing modal with Close button
+    cy.contains('alias1').should('not.exist');
+    cy.contains('Success alert:Cache default successfully updated.');
+
+    // Check detail has aliases
+    cy.login(Cypress.env('username'), Cypress.env('password'), '/cache/default');
+    cy.contains('Aliases').should('not.exist');
+    cy.contains('alias1').should('not.exist');
+    cy.login(Cypress.env('username'), Cypress.env('password'));
+  });
+});
diff --git a/cypress/e2e/3_cache-ignore.cy.js b/cypress/e2e/3_cache-ignore.cy.js
@@ -1,4 +1,4 @@
-describe('Data Container Caches list', () => {
+describe('Data Container Caches', () => {
   beforeEach(() => {
     cy.login(Cypress.env('username'), Cypress.env('password'));
   });

diff --git a/src/app/CacheManagers/CacheTableDisplay.tsx b/src/app/CacheManagers/CacheTableDisplay.tsx
@@ -72,7 +72,7 @@ const CacheTableDisplay = (props: { setCachesCount: (count: number) => void; isV
   const { t } = useTranslation();
   const { connectedUser } = useConnectedUser();
   const { setBanner } = useBanner();
-  const { caches, errorCaches, loadingCaches } = useCaches();
+  const { caches, errorCaches, loadingCaches, reloadCaches } = useCaches();
   const { cm } = useDataContainer();
 
   const [filteredCaches, setFilteredCaches] = useState<CacheInfo[]>([]);
@@ -160,11 +160,22 @@ const CacheTableDisplay = (props: { setCachesCount: (count: number) => void; isV
   }, [rows]);
 
   useEffect(() => {
-    setFilteredCaches(caches.filter((cache) => onSearch(searchValue, cache.name)).filter(onFilter));
+    setFilteredCaches(
+      caches
+        .filter(
+          (cache) =>
+            // on cache name
+            onSearch(searchValue, cache.name) ||
+            // on aliases
+            cache.aliases.map((alias) => onSearch(searchValue, alias)).filter((r) => r).length > 0
+        )
+        .filter(onFilter)
+    );
   }, [searchValue, selectedCacheFeature, selectedCacheType, selectedCacheStatus]);
 
   const columnNames = {
     name: t('cache-managers.cache-name'),
+    aliases: t('cache-managers.cache-aliases'),
     mode: t('cache-managers.cache-mode'),
     health: t('cache-managers.cache-health'),
     features: t('cache-managers.cache-features'),
@@ -332,6 +343,27 @@ const CacheTableDisplay = (props: { setCachesCount: (count: number) => void; isV
     );
   };
 
+  const displayCacheAliases = (cacheInfo: CacheInfo) => {
+    if (cacheInfo.aliases.length == 0) {
+      return (
+        <TextContent>
+          <Text component={TextVariants.small} data-cy={`alias-none`}>
+            {t('cache-managers.aliases-none')}
+          </Text>
+        </TextContent>
+      );
+    }
+    return (
+      <LabelGroup>
+        {cacheInfo.aliases.map((alias) => (
+          <Label data-cy={`alias-${alias}`} isCompact>
+            {alias}
+          </Label>
+        ))}
+      </LabelGroup>
+    );
+  };
+
   const displayCacheFeatures = (cacheInfo: CacheInfo) => {
     return (
       <TextContent>
@@ -798,6 +830,7 @@ const CacheTableDisplay = (props: { setCachesCount: (count: number) => void; isV
               <Thead>
                 <Tr>
                   <Th colSpan={1}>{columnNames.name}</Th>
+                  <Th colSpan={1}>{columnNames.aliases}</Th>
                   <Th colSpan={1}>{columnNames.mode}</Th>
                   <Th colSpan={1}>{columnNames.health}</Th>
                   <Th colSpan={1}>{columnNames.features}</Th>
@@ -814,6 +847,7 @@ const CacheTableDisplay = (props: { setCachesCount: (count: number) => void; isV
                     return (
                       <Tr key={row.name}>
                         <Td dataLabel={columnNames.name}>{displayCacheName(row)}</Td>
+                        <Td dataLabel={columnNames.aliases}>{displayCacheAliases(row)}</Td>
                         <Td dataLabel={columnNames.mode}>{displayCacheType(row.type)}</Td>
                         <Td dataLabel={columnNames.health}>{displayCacheHealth(row.health)}</Td>
                         <Td dataLabel={columnNames.features}>{displayCacheFeatures(row)}</Td>
@@ -851,7 +885,10 @@ const CacheTableDisplay = (props: { setCachesCount: (count: number) => void; isV
             <UpdateAliasCache
               cacheName={cacheAction.cacheName}
               isModalOpen={cacheAction.action == 'aliases'}
-              closeModal={() => setCacheAction({ cacheName: '', action: '' })}
+              closeModal={() => {
+                setCacheAction({ cacheName: '', action: '' });
+                reloadCaches();
+              }}
             />
           </CardBody>
         </Card>

diff --git a/src/app/Caches/DetailCache.tsx b/src/app/Caches/DetailCache.tsx
@@ -48,6 +48,7 @@ import {
   global_BackgroundColor_100,
   global_danger_color_200,
   global_info_color_200,
+  global_spacer_xs,
   global_warning_color_100
 } from '@patternfly/react-tokens';
 import { ExclamationCircleIcon, InfoCircleIcon, InfoIcon, RedoIcon } from '@patternfly/react-icons';
@@ -349,11 +350,30 @@ const DetailCache = (props: { cacheName: string }) => {
     );
   };
 
+  const buildAliasesChips = () => {
+    if (!cache?.aliases || cache?.aliases?.length == 0) return;
+
+    return (
+      <React.Fragment>
+        <ToolbarItem>
+          <LabelGroup categoryName={t('caches.info.aliases')} numLabels={8}>
+            {cache.aliases.map((feature) => (
+              <Label isCompact key={feature}>
+                {feature}
+              </Label>
+            ))}
+          </LabelGroup>
+        </ToolbarItem>
+      </React.Fragment>
+    );
+  };
+
   const buildShowMorePanel = () => {
     return (
       <Toolbar id="cache-header-actions">
         <ToolbarContent>
           <ToolbarGroup>
+            {buildAliasesChips()}
             {cacheManager.tracing_enabled && (
               <React.Fragment>
                 <ToolbarItem>

diff --git a/src/app/Caches/SetAvailableCache.tsx b/src/app/Caches/SetAvailableCache.tsx
@@ -13,7 +13,6 @@ const SetAvailableCache = (props: { cacheName: string; isModalOpen: boolean; clo
   const { onSetAvailable } = useSetAvailableCache(props.cacheName);
 
   const { t } = useTranslation();
-  const brandname = t('brandname.brandname');
 
   const clearSetAvailableCacheModal = (setAvailableDone: boolean) => {
     props.closeModal(setAvailableDone);

diff --git a/src/app/Caches/UpdateAliasCache.tsx b/src/app/Caches/UpdateAliasCache.tsx
@@ -9,7 +9,6 @@ import { SelectMultiWithChips } from '@app/Common/SelectMultiWithChips';
  */
 const UpdateAliasCache = (props: { cacheName: string; isModalOpen: boolean; closeModal: (boolean) => void }) => {
   const { loading, setLoading, error, aliases, setAliases, update } = useCacheAliases(props.cacheName);
-
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -69,8 +68,8 @@ const UpdateAliasCache = (props: { cacheName: string; isModalOpen: boolean; clos
 
   return (
     <Modal
-      data-cy={`updateAliasCacheModal`}
-      id="updateAliasCacheModal"
+      data-cy={`updateAliasesCacheModal`}
+      id="updateAliasesCacheModal"
       titleIconVariant={'warning'}
       width={'70%'}
       isOpen={props.isModalOpen}
@@ -88,7 +87,7 @@ const UpdateAliasCache = (props: { cacheName: string; isModalOpen: boolean; clos
           {t('common.actions.update')}
         </Button>,
         <Button
-          aria-label="Close"
+          aria-label="CloseAction"
           key="close"
           variant="link"
           onClick={() => clearUpdateAliasesModal(false)}

diff --git a/src/app/ClusterStatus/ClusterStatus.tsx b/src/app/ClusterStatus/ClusterStatus.tsx
@@ -128,7 +128,7 @@ const ClusterStatus = () => {
 
   const searchInput = (
     <SearchInput
-      placeholder={t('cache-managers.cache-search')}
+      placeholder={t('cluster-membership.node-search')}
       value={searchValue}
       onChange={(_event, val) => setSearchValue(val)}
       onClear={() => setSearchValue('')}

diff --git a/src/app/assets/languages/en.json b/src/app/assets/languages/en.json
@@ -96,6 +96,7 @@
     "schemas-tab": "Schemas",
     "cache-table-label": "Caches",
     "cache-name": "Name",
+    "cache-aliases": "Aliases",
     "cache-mode": "Type",
     "cache-health": "Health",
     "cache-features": "Features",
@@ -106,8 +107,9 @@
     "ignored-status": "Hidden",
     "delete": "Delete",
     "available": "Make available",
+    "aliases-none": "None",
     "clear-all-button": "Clear all",
-    "cache-search": "Search by cache name",
+    "cache-search": "Search by cache name or cache alias",
     "loading-caches": "Loading caches",
     "no-caches-status": "No caches",
     "no-caches-body": "Click \"Create a cache\" and provide configuration in XML, JSON, or YAML format or use a custom template. You can also create caches from the CLI and remote clients.",
@@ -574,7 +576,8 @@
       "breadcrumb": "Detail of cache {{cacheName}}",
       "loading": "Loading cache {{cacheName}} ...",
       "error": "An error occurred while loading {{cacheName}}",
-      "features": "Features"
+      "features": "Features",
+      "aliases": "Aliases"
     },
     "actions": {
       "action-manage-indexes": "Manage indexes",
@@ -936,7 +939,8 @@
     "downloading": "Downloading",
     "empty-cluster": "This cluster is empty",
     "no-cluster-title": "No cluster members",
-    "no-cluster-body": "Add nodes to create a cluster."
+    "no-cluster-body": "Add nodes to create a cluster.",
+    "node-search": "Search by node name"
   },
   "connected-clients": {
     "title": "Connected clients",

diff --git a/src/app/services/configHook.ts b/src/app/services/configHook.ts
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { ConsoleServices } from '@services/ConsoleServices';
 import { formatXml } from '@app/utils/dataSerializerUtils';
 import { useApiAlert } from '@utils/useApiAlert';
+import { useCaches } from '@app/services/dataContainerHooks';
 
 export function useFetchTracingConfig(cacheName: string) {
   const { addAlert } = useApiAlert();
@@ -86,6 +87,7 @@ export function useFetchTracingConfig(cacheName: string) {
 
 export function useCacheAliases(cacheName: string) {
   const { addAlert } = useApiAlert();
+  const { reloadCaches } = useCaches();
   const [aliases, setAliases] = useState<string[]>([]);
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);

diff --git a/src/app/utils/searchFilter.ts b/src/app/utils/searchFilter.ts
@@ -5,7 +5,7 @@ import { RoleFilterOption } from '@services/infinispanRefData';
  * @param value - value to search
  * @param listItem - item to search from
  */
-export const onSearch = (value: string, listItem: string) => {
+export const onSearch = (value: string, listItem: string): boolean => {
   let searchValueInput: RegExp;
   try {
     searchValueInput = new RegExp(value, 'i');

diff --git a/src/services/cacheService.ts b/src/services/cacheService.ts
@@ -93,6 +93,7 @@ export class CacheService {
         rehash_in_progress: data['rehash_in_progress'],
         indexing_in_progress: data['indexing_in_progress'],
         rebalancing_enabled: data['rebalancing_enabled'],
+        aliases: data.aliases,
         editable:
           data.indexed ||
           (CacheConfigUtils.isEditable(keyValueEncoding.key as EncodingType) &&

diff --git a/src/services/dataContainerService.ts b/src/services/dataContainerService.ts
@@ -122,6 +122,7 @@ export class ContainerService {
               status: cacheInfo.status,
               type: CacheConfigUtils.mapCacheType(cacheInfo.type),
               simpleCache: cacheInfo.simpleCache,
+              aliases: cacheInfo.aliases,
               features: <Features>{
                 transactional: cacheInfo.transactional,
                 persistent: cacheInfo.persistent,

diff --git a/src/types/InfinispanTypes.ts b/src/types/InfinispanTypes.ts
@@ -90,6 +90,7 @@ interface CacheInfo {
   features: Features;
   rebalancing_enabled?: boolean;
   tracing: boolean;
+  aliases: string[];
 }
 
 interface CacheEntry {
@@ -140,6 +141,7 @@ interface DetailedInfinispanCache {
   memory?: CacheMemory;
   async?: boolean;
   tracing?: boolean;
+  aliases?: string[];
 }
 
 interface CacheMemory {