infinispan · karesti · Oct 30, 2023 · Oct 30, 2023
diff --git a/src/app/Caches/Configuration/CacheConfiguration.tsx b/src/app/Caches/Configuration/CacheConfiguration.tsx
@@ -19,9 +19,11 @@ import { useTranslation } from 'react-i18next';
 import { useFetchConfigurationYAML, useFetchConfigurationXML } from '@app/services/configHook';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { ThemeContext } from '@app/providers/ThemeProvider';
+import { global_BackgroundColor_100 } from '@patternfly/react-tokens';
 
 const CacheConfiguration = (props: { cacheName: string; editable: boolean; config: string }) => {
   const { t } = useTranslation();
+  const {theme} = useContext(ThemeContext);
   const encodingDocs = t('brandname.encoding-docs-link');
   const {syntaxHighLighterTheme} = useContext(ThemeContext)
   const yamlConfig = useFetchConfigurationYAML(props.cacheName);
@@ -78,7 +80,7 @@ const CacheConfiguration = (props: { cacheName: string; editable: boolean; confi
 
   return (
     <React.Fragment>
-      <Tabs defaultActiveKey={0}>
+      <Tabs defaultActiveKey={0} style={theme === 'dark'? {} : { backgroundColor: global_BackgroundColor_100.value }}>
         <Tab eventKey={0} title={<TabTitleText>JSON</TabTitleText>} tabContentId="tab1" tabContentRef={contentRef1} />
         <Tab eventKey={1} title={<TabTitleText>XML</TabTitleText>} tabContentId="tab2" tabContentRef={contentRef2} />
         <Tab eventKey={2} title={<TabTitleText>YAML</TabTitleText>} tabContentId="tab3" tabContentRef={contentRef3} />

diff --git a/src/app/Caches/DetailCache.tsx b/src/app/Caches/DetailCache.tsx
@@ -7,20 +7,16 @@ import {
   Button,
   ButtonVariant,
   Card,
-  CardBody,
-  Chip,
-  ChipGroup,
-  Divider,
+  CardBody, Divider,
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
   EmptyStateFooter,
   EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateVariant,
-  Flex,
-  FlexItem,
   Label,
+  LabelGroup,
   PageSection,
   PageSectionVariants,
   Spinner,
@@ -43,7 +39,14 @@ import { CacheConfiguration } from '@app/Caches/Configuration/CacheConfiguration
 import { CacheTypeBadge } from '@app/Common/CacheTypeBadge';
 import { DataContainerBreadcrumb } from '@app/Common/DataContainerBreadcrumb';
 import { global_BackgroundColor_100, global_danger_color_200, global_info_color_200 } from '@patternfly/react-tokens';
-import { AngleDownIcon, AngleRightIcon, ExclamationCircleIcon, InfoIcon, RedoIcon } from '@patternfly/react-icons';
+import {
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InfoCircleIcon,
+  InfoIcon,
+  RedoIcon,
+  ArrowRightIcon
+} from '@patternfly/react-icons';
 import { QueryEntries } from '@app/Caches/Query/QueryEntries';
 import { Link } from 'react-router-dom';
 import { useCacheDetail } from '@app/services/cachesHook';
@@ -66,7 +69,6 @@ const DetailCache = (props: { cacheName: string }) => {
   const { loading, error, cache, loadCache } = useCacheDetail();
   const [activeTabKey1, setActiveTabKey1] = useState<number | string>('');
   const [activeTabKey2, setActiveTabKey2] = useState<number | string>(10);
-  const [displayShowMore, setDisplayShowMore] = useState<boolean>(true);
 
   useEffect(() => {
     loadCache(cacheName);
@@ -249,24 +251,20 @@ const DetailCache = (props: { cacheName: string }) => {
     if (!ConsoleServices.security().hasConsoleACL(ConsoleACL.ADMIN, connectedUser)) {
       return;
     }
-
     return (
-      <>
-        <ToolbarItem variant="separator" />
-        <ToolbarItem>
-          <Label>Backups</Label>
-        </ToolbarItem>
         <ToolbarItem>
+          <Divider orientation={{ default: 'vertical' }} inset={{ default: 'insetMd' }}/>
           <Link
             to={{
               pathname: encodeURIComponent(cacheName) + '/backups',
               search: location.search
             }}
           >
-            <Button variant={ButtonVariant.link}>Manage</Button>
+            <Button variant={ButtonVariant.link}>
+              {t('caches.actions.action-manage-backups')}
+            </Button>
           </Link>
         </ToolbarItem>
-      </>
     );
   };
 
@@ -277,27 +275,17 @@ const DetailCache = (props: { cacheName: string }) => {
 
     return (
       <ToolbarItem>
-        <TextContent>
-          <Text component={TextVariants.small}>
-            <Spinner size={'md'} isInline /> {`Rebuilding the index for ${cacheName}`}
-          </Text>
-        </TextContent>
+        <Spinner size={"md"} isInline />
+        <Alert variant="warning" isInline isPlain title={t('caches.rebuilding-index')}/>
       </ToolbarItem>
     );
   };
 
   const buildIndexManage = () => {
     if (!cache?.features.indexed) return;
     return (
-      <>
-        <Divider
-          orientation={{
-            default: 'vertical'
-          }}
-          inset={{ default: 'insetMd' }}
-        />
-        {buildDisplayReindexing()}
         <ToolbarItem>
+          <Divider orientation={{ default: 'vertical' }} inset={{ default: 'insetMd' }}/>
           <Link
             to={{
               pathname: encodeURIComponent(cacheName) + '/indexing',
@@ -309,7 +297,6 @@ const DetailCache = (props: { cacheName: string }) => {
             </Button>
           </Link>
         </ToolbarItem>
-      </>
     );
   };
 
@@ -335,48 +322,30 @@ const DetailCache = (props: { cacheName: string }) => {
   const buildFeaturesChip = () => {
     if (!cache?.features) return;
     return (
-      <>
-        <Divider orientation={{ default: 'vertical' }} inset={{ default: 'insetMd' }} />
         <ToolbarItem>
-          <ChipGroup categoryName="Features">
+          <LabelGroup categoryName={t('caches.info.features')} numLabels={8}>
             {displayUtils.createFeaturesChipGroup(cache.features).map((feature) => (
-              <Chip isReadOnly key={feature}>
+              <Label isCompact icon={<InfoCircleIcon />} key={feature}>
                 {feature}
-              </Chip>
+              </Label>
             ))}
-          </ChipGroup>
+          </LabelGroup>
         </ToolbarItem>
-      </>
-    );
-  };
-
-  const buildShowMoreHeader = () => {
-    if (!cache) {
-      return '';
-    }
-
-    const icon = displayShowMore ? <AngleDownIcon /> : <AngleRightIcon />;
-
-    return (
-      <ToolbarItem>
-        <Button size="sm" icon={icon} variant={ButtonVariant.link} onClick={() => setDisplayShowMore(!displayShowMore)}>
-          {displayShowMore ? t('caches.actions.action-see-less') : t('caches.actions.action-see-more')}
-        </Button>
-      </ToolbarItem>
     );
   };
 
   const buildShowMorePanel = () => {
-    if (!displayShowMore || !cache) {
-      return '';
-    }
-
     return (
       <Toolbar id="cache-header-actions">
         <ToolbarContent>
-          <ToolbarGroup variant={'button-group'}>
+          <ToolbarGroup>
             <RebalancingCache />
+            {buildDisplayReindexing()}
+          </ToolbarGroup>
+          <ToolbarGroup variant={'filter-group'}>
             {buildFeaturesChip()}
+          </ToolbarGroup>
+          <ToolbarGroup variant={'button-group'}>
             {buildBackupsManage()}
             {buildIndexManage()}
           </ToolbarGroup>
@@ -470,9 +439,8 @@ const DetailCache = (props: { cacheName: string }) => {
                 </TextContent>
               </ToolbarItem>
               <ToolbarItem>
-                <CacheTypeBadge cacheType={cache.type} small={false} cacheName={cache.name} />
+                <CacheTypeBadge cacheType={cache.type} small={true} cacheName={cache.name} />
               </ToolbarItem>
-              {buildShowMoreHeader()}
             </ToolbarGroup>
             <ToolbarGroup align={{ default: 'alignRight' }}>{buildRefreshButton()}</ToolbarGroup>
           </ToolbarContent>

diff --git a/src/app/Caches/Query/QueryEntries.tsx b/src/app/Caches/Query/QueryEntries.tsx
@@ -17,7 +17,7 @@ import {
   SearchInput,
   EmptyStateHeader
 } from '@patternfly/react-core';
-import { SearchIcon, ExclamationCircleIcon, HelpIcon } from '@patternfly/react-icons';
+import { SearchIcon, ExclamationCircleIcon, HelpIcon, ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 import displayUtils from '../../../services/displayUtils';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { useTranslation } from 'react-i18next';
@@ -171,6 +171,11 @@ const QueryEntries = (props: { cacheName: string; indexed: boolean; changeTab: (
           <Popover
             headerContent={t('caches.query.ickle-query')}
             bodyContent={t('caches.query.ickle-query-tooltip', { brandname: brandname })}
+            footerContent={<Button variant={'link'}
+                                   style={{paddingLeft: 0}}
+                                   iconPosition={'start'}
+                                   icon={<ExternalLinkSquareAltIcon/>}
+                                   onClick={() => window.open(t('brandname.ickle-query-docs-link'), '_blank')}>{t('caches.query.ickle-query-docs')}</Button>}
           >
             <Button
               variant="plain"

diff --git a/src/app/Rebalancing/RebalancingCache.tsx b/src/app/Rebalancing/RebalancingCache.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
-import { Label, Spinner, Switch, TextContent, ToolbarItem, Text } from '@patternfly/react-core';
+import { Alert, Label, Spinner, Switch, ToolbarItem } from '@patternfly/react-core';
 import { useCacheDetail } from '@app/services/cachesHook';
 import { useConnectedUser } from '@app/services/userManagementHook';
 import { ConsoleServices } from '@services/ConsoleServices';
 import { ConsoleACL } from '@services/securityService';
 import { useTranslation } from 'react-i18next';
 import { useApiAlert } from '@app/utils/useApiAlert';
 import { RebalancingConfirmationModal } from '@app/Rebalancing/RebalancingConfirmationModal';
+import { global_spacer_xs } from '@patternfly/react-tokens';
 
 const RebalancingCache = () => {
   const { addAlert } = useApiAlert();
@@ -34,11 +35,8 @@ const RebalancingCache = () => {
   if (cache?.rehash_in_progress) {
     return (
       <ToolbarItem>
-        <TextContent>
-          <Text>
-            <Spinner size={'md'} isInline /> {t('caches.rebalancing.rebalancing')}
-          </Text>
-        </TextContent>
+        <Spinner size={"md"} isInline />
+        <Alert variant="warning" isInline isPlain title={t('caches.rebalancing.rebalancing')}/>
       </ToolbarItem>
     );
   }
@@ -48,7 +46,7 @@ const RebalancingCache = () => {
    */
   if (ConsoleServices.security().hasConsoleACL(ConsoleACL.ADMIN, connectedUser)) {
     return (
-      <ToolbarItem>
+      <ToolbarItem style={{paddingTop: global_spacer_xs.value}}>
         <Switch
           id="rebalancing-switch"
           label={t('caches.rebalancing.enabled')}
@@ -75,17 +73,9 @@ const RebalancingCache = () => {
     );
   }
 
-  if (cache.rebalancing_enabled) {
-    return (
-      <ToolbarItem>
-        <Label>{t('caches.rebalancing.rebalanced')}</Label>
-      </ToolbarItem>
-    );
-  }
-
   return (
     <ToolbarItem>
-      <Label>{t('caches.rebalancing.disabled')}</Label>
+      <Label>{cache.rebalancing_enabled? t('caches.rebalancing.rebalanced') : t('caches.rebalancing.disabled')}</Label>
     </ToolbarItem>
   );
 };

diff --git a/src/app/XSite/XSiteCache.tsx b/src/app/XSite/XSiteCache.tsx
@@ -338,7 +338,7 @@ const XSiteCache = (props) => {
                     search: location.search
                   }}
                 >
-                  <Button variant={ButtonVariant.secondary} data-cy="backButton">
+                  <Button variant={ButtonVariant.link} data-cy="backButton">
                     {t('common.actions.back')}
                   </Button>
                 </Link>

diff --git a/src/app/assets/languages/en.json b/src/app/assets/languages/en.json
@@ -5,7 +5,8 @@
     "encoding-docs-link": "https://infinispan.org/docs/stable/titles/encoding/encoding.html",
     "persistence-docs-link": "https://infinispan.org/docs/stable/titles/configuring/configuring.html#persistence",
     "configuration-docs-link": "https://infinispan.org/docs/stable/titles/configuring/configuring.html",
-    "default-roles-docs-link": "https://infinispan.org/docs/stable/titles/server/server.html#default-user-roles_server-getting-started"
+    "default-roles-docs-link": "https://infinispan.org/docs/stable/titles/server/server.html#default-user-roles_server-getting-started",
+    "ickle-query-docs-link": "https://infinispan.org/docs/stable/titles/query/query.html#ickle-query-syntax_ickle-query-language"
   },
   "common": {
     "actions": {
@@ -537,12 +538,12 @@
     "info": {
       "breadcrumb": "Detail of cache {{cacheName}}",
       "loading": "Loading cache {{cacheName}} ...",
-      "error": "An error occurred while loading {{cacheName}}"
+      "error": "An error occurred while loading {{cacheName}}",
+      "features": "Features"
     },
     "actions": {
-      "action-see-less": "See fewer cache details",
-      "action-see-more": "See more cache details",
       "action-manage-indexes": "Manage indexes",
+      "action-manage-backups": "Manage backups",
       "back": "Back"
     },
     "entries": {
@@ -627,6 +628,7 @@
       "no-search-value": "Values not found.",
       "query-error": "Query error",
       "ickle-query": "Ickle query",
+      "ickle-query-docs": "Ickle query syntax",
       "ickle-query-tooltip": "{{brandname}} provides an Ickle query language that lets you create relational and full-text queries.",
       "view-all-query-stats": "View all query statistics",
       "query-metrics-title": "Query metrics",
@@ -665,6 +667,7 @@
       "column-transfer": "Transfer status / Result",
       "column-action": "Action"
     },
+    "rebuilding-index": "Rebuilding index",
     "rebalancing": {
       "rebalancing": "Rebalancing",
       "rebalanced": "Rebalanced",