From c26ef1bd5175c064c25c2671c44ae37a72999f28 Mon Sep 17 00:00:00 2001 From: Katia Aresti Date: Mon, 30 Oct 2023 12:06:01 +0000 Subject: [PATCH] ISPN-15276 simplify header --- .../Configuration/CacheConfiguration.tsx | 4 +- src/app/Caches/DetailCache.tsx | 88 ++++++------------- src/app/Caches/Query/QueryEntries.tsx | 7 +- src/app/Rebalancing/RebalancingCache.tsx | 22 ++--- src/app/XSite/XSiteCache.tsx | 2 +- src/app/assets/languages/en.json | 11 ++- 6 files changed, 51 insertions(+), 83 deletions(-) diff --git a/src/app/Caches/Configuration/CacheConfiguration.tsx b/src/app/Caches/Configuration/CacheConfiguration.tsx index 505f2caa..8494fca5 100644 --- 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 ( - + JSON} tabContentId="tab1" tabContentRef={contentRef1} /> XML} tabContentId="tab2" tabContentRef={contentRef2} /> YAML} tabContentId="tab3" tabContentRef={contentRef3} /> diff --git a/src/app/Caches/DetailCache.tsx b/src/app/Caches/DetailCache.tsx index fcabc683..6ba8cf31 100644 --- a/src/app/Caches/DetailCache.tsx +++ b/src/app/Caches/DetailCache.tsx @@ -7,10 +7,7 @@ import { Button, ButtonVariant, Card, - CardBody, - Chip, - ChipGroup, - Divider, + CardBody, Divider, EmptyState, EmptyStateActions, EmptyStateBody, @@ -18,9 +15,8 @@ import { 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(''); const [activeTabKey2, setActiveTabKey2] = useState(10); - const [displayShowMore, setDisplayShowMore] = useState(true); useEffect(() => { loadCache(cacheName); @@ -249,24 +251,20 @@ const DetailCache = (props: { cacheName: string }) => { if (!ConsoleServices.security().hasConsoleACL(ConsoleACL.ADMIN, connectedUser)) { return; } - return ( - <> - - - - + - + - ); }; @@ -277,11 +275,8 @@ const DetailCache = (props: { cacheName: string }) => { return ( - - - {`Rebuilding the index for ${cacheName}`} - - + + ); }; @@ -289,15 +284,8 @@ const DetailCache = (props: { cacheName: string }) => { const buildIndexManage = () => { if (!cache?.features.indexed) return; return ( - <> - - {buildDisplayReindexing()} + { - ); }; @@ -335,48 +322,30 @@ const DetailCache = (props: { cacheName: string }) => { const buildFeaturesChip = () => { if (!cache?.features) return; return ( - <> - - + {displayUtils.createFeaturesChipGroup(cache.features).map((feature) => ( - + + ))} - + - - ); - }; - - const buildShowMoreHeader = () => { - if (!cache) { - return ''; - } - - const icon = displayShowMore ? : ; - - return ( - - - ); }; const buildShowMorePanel = () => { - if (!displayShowMore || !cache) { - return ''; - } - return ( - + + {buildDisplayReindexing()} + + {buildFeaturesChip()} + + {buildBackupsManage()} {buildIndexManage()} @@ -470,9 +439,8 @@ const DetailCache = (props: { cacheName: string }) => { - + - {buildShowMoreHeader()} {buildRefreshButton()} diff --git a/src/app/Caches/Query/QueryEntries.tsx b/src/app/Caches/Query/QueryEntries.tsx index fdee5852..4609d55e 100644 --- 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: ( } + onClick={() => window.open(t('brandname.ickle-query-docs-link'), '_blank')}>{t('caches.query.ickle-query-docs')}} > diff --git a/src/app/assets/languages/en.json b/src/app/assets/languages/en.json index 1a75ec8a..fae4bf78 100644 --- 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",