Skip to content

Commit

Permalink
ISPN-14913 add loading and single call
Browse files Browse the repository at this point in the history
  • Loading branch information
@karesti
karesti committed Jul 12, 2023
1 parent 4d6da9b commit 6ec4876
Show file tree
Hide file tree
Showing 11 changed files with 253 additions and 159 deletions.
2 changes: 1 addition & 1 deletion run-server-for-e2e.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ EXISTING_SERVER_PATH="${EXISTING_SERVER_PATH}"
#Base directory where the server should be downloaded
BASE_DIR="server"
#The version of the server is either set as an environment variable or is the latest dev version
SERVER_VERSION="${SERVER_VERSION:-"15.0.0.Dev01"}"
SERVER_VERSION="${SERVER_VERSION:-"15.0.0.Dev02"}"
#Root path from there the infinispan server should be downloaded
ZIP_ROOT="http://downloads.jboss.org/infinispan"
#If this environment variable is provided then it is used for downloading the server;
Expand Down
16 changes: 9 additions & 7 deletions src/app/AppLayout/AppLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,11 +75,9 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
const Logo = (
<Flex alignItems={{ default: 'alignItemsCenter' }}>
<FlexItem style={{ marginTop: global_spacer_sm.value }}>
<Link to={{ pathname: '/', search: location.search }}>
<Brand src={icon} alt={t('layout.console-name')} widths={{ default: '150px' }}>
<source srcSet={icon} />
</Brand>
</Link>
<Brand src={icon} alt={t('layout.console-name')} widths={{ default: '150px' }}>
<source srcSet={icon} />
</Brand>
</FlexItem>
<FlexItem>
<TextContent>
Expand Down Expand Up @@ -159,7 +157,9 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
spacer={{ default: 'spacerNone', md: 'spacerMd' }}
>
<ToolbarItem>
<Dropdown data-cy="aboutInfoQuestionMark" id="aboutInfoQuestionMark"
<Dropdown
data-cy="aboutInfoQuestionMark"
id="aboutInfoQuestionMark"
position={DropdownPosition.right}
isPlain
onSelect={() => setIsHelpOpen(!isHelpOpen)}
Expand All @@ -186,7 +186,9 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
</PageToggleButton>
</MastheadToggle>
<MastheadMain>
<MastheadBrand>{Logo}</MastheadBrand>
<MastheadBrand component={(props) => <Link {...props} to={{ pathname: '/', search: location.search }} />}>
{Logo}
</MastheadBrand>
</MastheadMain>
<MastheadContent>{headerToolbar}</MastheadContent>
</Masthead>
Expand Down
79 changes: 65 additions & 14 deletions src/app/CacheManagers/CacheTableDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,11 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb

const displayCacheType = (cacheType) => {
const labelColor = displayUtils.cacheTypeColor(cacheType);
return <Label color={labelColor} data-cy={'type-' + cacheType}>{cacheType}</Label>;
return (
<Label color={labelColor} data-cy={'type-' + cacheType}>
{cacheType}
</Label>
);
};

const displayCacheStatus = (cacheInfo: CacheInfo) => {
Expand Down Expand Up @@ -432,10 +436,10 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb
<Button
variant={ButtonVariant.primary}
aria-label="create-cache-button-helper"
data-cy={canCreateCache ? "createCacheButton" : "createCacheConfigButton"}
data-cy={canCreateCache ? 'createCacheButton' : 'createCacheConfigButton'}
{...(isEmptyPage ? emptyPageButtonProp : normalPageButtonProps)}
>
{canCreateCache ? t('cache-managers.create-cache-button') : 'Create cache configuration'}
{canCreateCache ? t('cache-managers.create-cache-button') : 'Create cache configuration'}
</Button>
</Link>
);
Expand Down Expand Up @@ -505,49 +509,96 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb
<MenuContent>
<MenuList>
<MenuGroup label={t('cache-managers.cache-filter-type-label')}>
<MenuItem hasCheck isSelected={selectedCacheType.includes(CacheType.Local)} itemId="Local" data-cy="localType">
<MenuItem
hasCheck
isSelected={selectedCacheType.includes(CacheType.Local)}
itemId="Local"
data-cy="localType"
>
{t('cache-managers.mode-local')}
</MenuItem>
<MenuItem hasCheck isSelected={selectedCacheType.includes(CacheType.Replicated)} itemId="Replicated" data-cy="replicatedType">
<MenuItem
hasCheck
isSelected={selectedCacheType.includes(CacheType.Replicated)}
itemId="Replicated"
data-cy="replicatedType"
>
{t('cache-managers.mode-repl')}
</MenuItem>
<MenuItem hasCheck isSelected={selectedCacheType.includes(CacheType.Distributed)} itemId="Distributed" data-cy="distributedType">
<MenuItem
hasCheck
isSelected={selectedCacheType.includes(CacheType.Distributed)}
itemId="Distributed"
data-cy="distributedType"
>
{t('cache-managers.mode-dist')}
</MenuItem>
<MenuItem hasCheck isSelected={selectedCacheType.includes(CacheType.Invalidated)} itemId="Invalidated" data-cy="invalidatedType">
<MenuItem
hasCheck
isSelected={selectedCacheType.includes(CacheType.Invalidated)}
itemId="Invalidated"
data-cy="invalidatedType"
>
{t('cache-managers.mode-invalid')}
</MenuItem>
</MenuGroup>
<MenuGroup label={t('cache-managers.cache-filter-feature-label')}>
<MenuItem hasCheck isSelected={selectedCacheFeature.includes(CacheFeature.BOUNDED)} itemId="Bounded" data-cy="boundedFeature">
<MenuItem
hasCheck
isSelected={selectedCacheFeature.includes(CacheFeature.BOUNDED)}
itemId="Bounded"
data-cy="boundedFeature"
>
{t('cache-managers.cache-filter-feature-bounded')}
</MenuItem>
<MenuItem hasCheck isSelected={selectedCacheFeature.includes(CacheFeature.INDEXED)} itemId="Indexed" data-cy="indexedFeature">
<MenuItem
hasCheck
isSelected={selectedCacheFeature.includes(CacheFeature.INDEXED)}
itemId="Indexed"
data-cy="indexedFeature"
>
{t('cache-managers.cache-filter-feature-indexed')}
</MenuItem>
<MenuItem
hasCheck
isSelected={selectedCacheFeature.includes(CacheFeature.PERSISTENCE)}
itemId="Persistence" data-cy="persistenceFeature"
itemId="Persistence"
data-cy="persistenceFeature"
>
{t('cache-managers.cache-filter-feature-persistent')}
</MenuItem>
<MenuItem
hasCheck
isSelected={selectedCacheFeature.includes(CacheFeature.TRANSACTIONAL)}
itemId="Transactional" data-cy="transactionalFeature"
itemId="Transactional"
data-cy="transactionalFeature"
>
{t('cache-managers.cache-filter-feature-trans')}
</MenuItem>
<MenuItem hasCheck isSelected={selectedCacheFeature.includes(CacheFeature.SECURED)} itemId="Authorization" data-cy="authorizationFeature">
<MenuItem
hasCheck
isSelected={selectedCacheFeature.includes(CacheFeature.SECURED)}
itemId="Authorization"
data-cy="authorizationFeature"
>
{t('cache-managers.cache-filter-feature-secure')}
</MenuItem>
<MenuItem hasCheck isSelected={selectedCacheFeature.includes(CacheFeature.BACKUPS)} itemId="Backups" data-cy="backupsFeature">
<MenuItem
hasCheck
isSelected={selectedCacheFeature.includes(CacheFeature.BACKUPS)}
itemId="Backups"
data-cy="backupsFeature"
>
{t('cache-managers.cache-filter-feature-xsite')}
</MenuItem>
</MenuGroup>
<MenuGroup label={t('cache-managers.cache-filter-status-label')}>
<MenuItem hasCheck isSelected={selectedCacheStatus.includes(CacheStatus.IGNORED)} itemId="Hidden" data-cy="hiddenStatus">
<MenuItem
hasCheck
isSelected={selectedCacheStatus.includes(CacheStatus.IGNORED)}
itemId="Hidden"
data-cy="hiddenStatus"
>
{t('cache-managers.cache-filter-status-ignored')}
</MenuItem>
</MenuGroup>
Expand Down
124 changes: 57 additions & 67 deletions src/app/Caches/Create/DownloadCacheModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
import React from 'react';
import { useState, useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import {
Alert,
AlertVariant,
Button,
ButtonVariant,
ClipboardCopyButton,
CodeBlock,
CodeBlockAction,
CodeBlockCode,
ClipboardCopyButton,
Radio,
Form,
FormGroup,
Modal,
ModalVariant,
Button,
Form,
FormGroup
Radio,
Spinner,
TextContent,
Text
} from '@patternfly/react-core';
import { ConfigDownloadType } from '@services/infinispanRefData';
import { useTranslation } from 'react-i18next';
import { DownloadIcon } from '@patternfly/react-icons';
import { ConsoleServices } from '@services/ConsoleServices';
import { formatXml } from '@app/utils/dataSerializerUtils';

const DownloadCacheModal = (props: {
cacheName: string;
Expand All @@ -36,6 +37,7 @@ const DownloadCacheModal = (props: {
const [yamlConfig, setYamlConfig] = useState('');
const [xmlConfig, setXmlConfig] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(true);
const [downloadURL, setDownloadURL] = useState(
'data:text/json;charset=utf-8,' + encodeURIComponent(props.configuration)
);
Expand All @@ -53,38 +55,17 @@ const DownloadCacheModal = (props: {
// Convert the config to all formats
// Also to check if the config is valid
ConsoleServices.caches()
.convertConfigFormat(props.cacheName, props.configuration, 'json')
.convertToAllFormat(props.cacheName, props.configuration)
.then((r) => {
if (r.success) {
setJsonConfig(JSON.stringify(JSON.parse(r.data), null, 2));
setError('');
if (r.isRight()) {
setYamlConfig(r.value.yaml);
setJsonConfig(r.value.json);
setXmlConfig(r.value.xml);
} else {
setError(r.message);
setError(r.value.message);
}
});

ConsoleServices.caches()
.convertConfigFormat(props.cacheName, props.configuration, 'yaml')
.then((r) => {
if (r.success) {
setYamlConfig(r.data);
setError('');
} else {
setError(r.message);
}
});

ConsoleServices.caches()
.convertConfigFormat(props.cacheName, props.configuration, 'xml')
.then((r) => {
if (r.success) {
setXmlConfig(formatXml(r.data));
setError('');
} else {
setError(r.message);
}
});

})
.finally(() => setLoading(true));
setDownloadURL('data:text/json;charset=utf-8,' + encodeURIComponent(props.configuration));
}
}, [props.configuration, props.isModalOpen]);
Expand Down Expand Up @@ -120,7 +101,7 @@ const DownloadCacheModal = (props: {
variant="plain"
onTooltipHidden={() => setCopied(false)}
>
{copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
{copied ? t('caches.create.review.copied-tooltip') : t('caches.create.review.copy-tooltip')}
</ClipboardCopyButton>
</CodeBlockAction>
);
Expand Down Expand Up @@ -154,7 +135,7 @@ const DownloadCacheModal = (props: {
variant={ButtonVariant.tertiary}
icon={<DownloadIcon />}
onClick={props.closeModal}
isDisabled={error !== ''}
isDisabled={error !== '' || loading}
href={downloadURL}
download={props.cacheName + `.` + downloadLanguage.toLocaleLowerCase()}
>
Expand All @@ -165,34 +146,43 @@ const DownloadCacheModal = (props: {
</Button>
]}
>
<Form isHorizontal id="download-modal-form">
<FormGroup hasNoPaddingTop isInline label="Code language" fieldId="code-language-radio-field">
<Radio
name="language-radio"
id="JSON"
onChange={() => {
setDownloadLanguage(ConfigDownloadType.JSON);
}}
isChecked={(downloadLanguage as ConfigDownloadType) == ConfigDownloadType.JSON}
label={t('caches.create.review.json')}
/>
<Radio
name="language-radio"
id="XML"
onChange={() => setDownloadLanguage(ConfigDownloadType.XML)}
isChecked={(downloadLanguage as ConfigDownloadType) == ConfigDownloadType.XML}
label={t('caches.create.review.xml')}
/>
<Radio
name="language-radio"
id="YAML"
onChange={() => setDownloadLanguage(ConfigDownloadType.YAML)}
isChecked={(downloadLanguage as ConfigDownloadType) == ConfigDownloadType.YAML}
label={t('caches.create.review.yaml')}
/>
</FormGroup>
{codeBlock}
</Form>
{loading && (
<TextContent>
<Text>
{t('caches.create.review.formatting-loading')} <Spinner isInline isSVG aria-label="formattting..." />
</Text>
</TextContent>
)}
{!loading && (
<Form isHorizontal id="download-modal-form">
<FormGroup hasNoPaddingTop isInline label="Code language" fieldId="code-language-radio-field">
<Radio
name="language-radio"
id="JSON"
onChange={() => {
setDownloadLanguage(ConfigDownloadType.JSON);
}}
isChecked={(downloadLanguage as ConfigDownloadType) == ConfigDownloadType.JSON}
label={t('caches.create.review.json')}
/>
<Radio
name="language-radio"
id="XML"
onChange={() => setDownloadLanguage(ConfigDownloadType.XML)}
isChecked={(downloadLanguage as ConfigDownloadType) == ConfigDownloadType.XML}
label={t('caches.create.review.xml')}
/>
<Radio
name="language-radio"
id="YAML"
onChange={() => setDownloadLanguage(ConfigDownloadType.YAML)}
isChecked={(downloadLanguage as ConfigDownloadType) == ConfigDownloadType.YAML}
label={t('caches.create.review.yaml')}
/>
</FormGroup>
{codeBlock}
</Form>
)}
</Modal>
);
};
Expand Down
3 changes: 2 additions & 1 deletion src/app/Caches/Create/Features/IndexedCacheConfigurator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,8 @@ const IndexedCacheConfigurator = (props: { isEnabled: boolean }) => {
isInline
>
<TextInput
value={indexedSharding} data-cy="indexSharding"
value={indexedSharding}
data-cy="indexSharding"
type="number"
onChange={(value) => setIndexedSharding(parseInt(value))}
aria-label="indexed-sharding-input"
Expand Down
2 changes: 2 additions & 0 deletions src/app/Caches/CreateCache.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,8 @@ const CreateCache = () => {
<Alert
title={t('caches.setup.page-title-description', { brandname: brandname })}
variant={AlertVariant.info}
isPlain
isInline
/>
)}
</ToolbarContent>
Expand Down
Loading

0 comments on commit 6ec4876

Please sign in to comment.