Skip to content

Commit

Permalink
ISPN-16412 Display cache config when not Healthy
Browse files Browse the repository at this point in the history
  • Loading branch information
@karesti
karesti committed Sep 12, 2024
1 parent e45e3f8 commit b1db388
Show file tree
Hide file tree
Showing 21 changed files with 554 additions and 290 deletions.
97 changes: 67 additions & 30 deletions src/app/Caches/CacheMetrics.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import {
Button,
ButtonVariant,
Card,
CardBody,
CardTitle,
EmptyState,
EmptyStateActions,
EmptyStateBody,
EmptyStateFooter,
EmptyStateHeader,
EmptyStateIcon,
EmptyStateVariant,
Expand All @@ -20,7 +24,7 @@ import {
TextVariants
} from '@patternfly/react-core';
import displayUtils from '@services/displayUtils';
import { CubesIcon } from '@patternfly/react-icons';
import { CubesIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
import { QueryMetrics } from '@app/Caches/Query/QueryMetrics';
import { DataDistributionChart } from './DataDistributionChart';
import { PopoverHelp } from '@app/Common/PopoverHelp';
Expand All @@ -32,32 +36,24 @@ import { ConsoleServices } from '@services/ConsoleServices';
import { useConnectedUser } from '@app/services/userManagementHook';
import { ConsoleACL } from '@services/securityService';
import { CacheLifecycle } from '@app/Caches/CacheLifecycle';
import { global_danger_color_200 } from '@patternfly/react-tokens';
import { Link } from 'react-router-dom';

const CacheMetrics = (props: { cacheName: string; display: boolean }) => {
const { t } = useTranslation();
const { connectedUser } = useConnectedUser();
const { cache, error, loading } = useCacheDetail();
const [stats, setStats] = useState<CacheStats | undefined>(cache.stats);
const [displayQueryStats, setDisplayQueryStats] = useState<boolean>(false);
const [displayDataDistribution, setDisplayDataDistribution] = useState<boolean>(false);
const [memory, setMemory] = useState<string | undefined>(undefined);
const { t } = useTranslation();
const brandname = t('brandname.brandname');

useEffect(() => {
if (ConsoleServices.security().hasConsoleACL(ConsoleACL.ADMIN, connectedUser)) {
// Data distribution is for admin only
setDisplayDataDistribution(true);
const loadMemory = cache.memory;
if (loadMemory) {
setMemory(loadMemory.storage_type == 'OFF_HEAP' ? StorageType.OFF_HEAP : StorageType.HEAP);
} else {
setMemory(StorageType.HEAP);
}
const [displayQueryStats, setDisplayQueryStats] = useState<boolean>(cache.queryable!);
const [displayDataDistribution, setDisplayDataDistribution] = useState<boolean>(
ConsoleServices.security().hasConsoleACL(ConsoleACL.ADMIN, connectedUser)
);
const memory = () => {
if (cache.memory) {
return cache.memory.storage_type == 'OFF_HEAP' ? StorageType.OFF_HEAP : StorageType.HEAP;
}

setStats(cache.stats);
setDisplayQueryStats(cache.queryable);
}, [cache, error]);
return StorageType.HEAP;
};

const buildOperationsPerformanceCard = () => {
if (!stats) {
Expand Down Expand Up @@ -180,7 +176,7 @@ const CacheMetrics = (props: { cacheName: string; display: boolean }) => {
return '';
}
let content;
if (memory === StorageType.OFF_HEAP) {
if (memory() === StorageType.OFF_HEAP) {
content = (
<React.Fragment>
<TextListItem aria-label="view-cache-metrics-off-heap" component={TextListItemVariants.dt}>
Expand Down Expand Up @@ -242,18 +238,59 @@ const CacheMetrics = (props: { cacheName: string; display: boolean }) => {
};

if (!props.display) {
return <span />;
return <></>;
}

if (loading && error.length == 0) {
return (
<Card>
<CardBody>
<EmptyState>
<EmptyStateHeader
titleText={t('common.loading')}
headingLevel="h4"
icon={<EmptyStateIcon icon={Spinner} />}
/>
</EmptyState>
</CardBody>
</Card>
);
}

if (!stats || loading) {
return <Spinner size={'xl'} />;
if (error.length > 0) {
return (
<Card>
<CardBody>
<EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateHeader
titleText={<>{`An error occurred while retrieving stats ${props.cacheName}`}</>}
icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={global_danger_color_200.value} />}
headingLevel="h2"
/>
<EmptyStateBody>{error}</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions>
<Link
to={{
pathname: '/',
search: location.search
}}
>
<Button variant={ButtonVariant.secondary}>{t('common.actions.back')}</Button>
</Link>
</EmptyStateActions>
</EmptyStateFooter>
</EmptyState>
</CardBody>
</Card>
);
}

if (!stats.enabled) {
if (stats && !stats.enabled) {
return (
<EmptyState variant={EmptyStateVariant.sm}>
<EmptyStateHeader
titleText={<>{t('caches.cache-metrics.metrics-title')}</>}
titleText={t('caches.cache-metrics.metrics-title')}
icon={<EmptyStateIcon icon={CubesIcon} />}
headingLevel="h5"
/>
Expand All @@ -273,8 +310,8 @@ const CacheMetrics = (props: { cacheName: string; display: boolean }) => {
<GridItem span={4}>{buildOperationsPerformanceCard()}</GridItem>
{displayDataDistribution && <GridItem span={8}> {buildDataDistribution()}</GridItem>}
<GridItem span={4}>
<CacheLifecycle stats={stats} />
<DataAccess cacheName={props.cacheName} stats={stats} />
<CacheLifecycle stats={stats!} />
<DataAccess cacheName={props.cacheName} stats={stats!} />
</GridItem>
<GridItem span={displayDataDistribution ? 12 : 8}>{buildQueryStats()}</GridItem>
</Grid>
Expand Down
122 changes: 62 additions & 60 deletions src/app/Caches/Create/AdvancedOptionsConfigurator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import {
Grid,
GridItem,
HelperText,
HelperTextItem, InputGroup, InputGroupItem,
HelperTextItem,
InputGroup,
InputGroupItem,
Switch,
TextInput
} from '@patternfly/react-core';
Expand Down Expand Up @@ -135,68 +137,68 @@ const AdvancedOptionsConfigurator = (props: { cacheManager: CacheManager }) => {
</HelperText>
<Grid hasGutter md={4}>
<GridItem span={4}>
<FormGroup
isInline
fieldId="field-concurrency-level"
label={t('caches.create.configurations.advanced-options.concurrency-level-title')}
labelIcon={
<PopoverHelp
name="concurrency-level"
label={t('caches.create.configurations.advanced-options.concurrency-level-title')}
content={t('caches.create.configurations.advanced-options.concurrency-level-tooltip')}
<FormGroup
isInline
fieldId="field-concurrency-level"
label={t('caches.create.configurations.advanced-options.concurrency-level-title')}
labelIcon={
<PopoverHelp
name="concurrency-level"
label={t('caches.create.configurations.advanced-options.concurrency-level-title')}
content={t('caches.create.configurations.advanced-options.concurrency-level-tooltip')}
/>
}
>
<TextInput
placeholder="32"
value={concurrencyLevel}
type="number"
onChange={(_event, value) => handleConcurrencyLevel(value)}
aria-label="concurrency-level-input"
data-cy="concurencyLevel"
/>
}
>
<TextInput
placeholder="32"
value={concurrencyLevel}
type="number"
onChange={(_event, value) => handleConcurrencyLevel(value)}
aria-label="concurrency-level-input"
data-cy="concurencyLevel"
/>
</FormGroup>
</FormGroup>
</GridItem>
<GridItem span={6}>
<FormGroup
isInline
fieldId="field-lock-acquisition-timeout"
label={t('caches.create.configurations.advanced-options.lock-acquisition-timeout-title')}
labelIcon={
<PopoverHelp
name="lock-acquisition-timeout"
label={t('caches.create.configurations.advanced-options.lock-acquisition-timeout-title')}
content={t('caches.create.configurations.advanced-options.lock-acquisition-timeout-tooltip')}
/>
}
>
<InputGroup>
<InputGroupItem>
<Grid>
<GridItem span={8}>
<TextInput
placeholder="10"
value={lockAcquisitionTimeout}
type="number"
onChange={(_event, value) => handleLockAcquisitionTimeout(value)}
aria-label="lock-acquisition-timeout-input"
data-cy="lockTimeout"
/>
</GridItem>
<GridItem span={4}>
<SelectSingle
id={'lockAcquisitionTimeoutUnitSelector'}
placeholder={''}
selected={lockAcquisitionTimeoutUnit || TimeUnits.milliseconds}
options={selectOptionProps(TimeUnits)}
style={{ width: '150px' }}
onSelect={(value) => setLockAcquisitionTimeoutUnit(value)}
/>
</GridItem>
</Grid>
</InputGroupItem>
</InputGroup>
</FormGroup>
<FormGroup
isInline
fieldId="field-lock-acquisition-timeout"
label={t('caches.create.configurations.advanced-options.lock-acquisition-timeout-title')}
labelIcon={
<PopoverHelp
name="lock-acquisition-timeout"
label={t('caches.create.configurations.advanced-options.lock-acquisition-timeout-title')}
content={t('caches.create.configurations.advanced-options.lock-acquisition-timeout-tooltip')}
/>
}
>
<InputGroup>
<InputGroupItem>
<Grid>
<GridItem span={8}>
<TextInput
placeholder="10"
value={lockAcquisitionTimeout}
type="number"
onChange={(_event, value) => handleLockAcquisitionTimeout(value)}
aria-label="lock-acquisition-timeout-input"
data-cy="lockTimeout"
/>
</GridItem>
<GridItem span={4}>
<SelectSingle
id={'lockAcquisitionTimeoutUnitSelector'}
placeholder={''}
selected={lockAcquisitionTimeoutUnit || TimeUnits.milliseconds}
options={selectOptionProps(TimeUnits)}
style={{ width: '150px' }}
onSelect={(value) => setLockAcquisitionTimeoutUnit(value)}
/>
</GridItem>
</Grid>
</InputGroupItem>
</InputGroup>
</FormGroup>
</GridItem>
<GridItem span={12}>
<FormGroup fieldId="field-striping">
Expand Down
24 changes: 13 additions & 11 deletions src/app/Caches/Create/AdvancedTuning/BackupsCofigurationTuning.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ const BackupsConfigurationTuning = () => {
);
const [mergePolicy, setMergePolicy] = useState(configuration.advanced.backupSetting?.mergePolicy);
const [maxCleanupDelay, setMaxCleanupDelay] = useState(configuration.advanced.backupSetting?.maxCleanupDelay);
const [maxCleanupDelayUnit, setMaxCleanupDelayUnit] = useState(configuration.advanced.backupSetting?.maxCleanupDelayUnit);
const [maxCleanupDelayUnit, setMaxCleanupDelayUnit] = useState(
configuration.advanced.backupSetting?.maxCleanupDelayUnit
);
const [tombstoneMapSize, setTombstoneMapSize] = useState(configuration.advanced.backupSetting?.tombstoneMapSize);

useEffect(() => {
Expand Down Expand Up @@ -69,9 +71,7 @@ const BackupsConfigurationTuning = () => {
<TextInput
placeholder="DEFAULT"
value={mergePolicy}
onChange={(_event, val) =>
setMergePolicy(val === ''? undefined! : val)
}
onChange={(_event, val) => setMergePolicy(val === '' ? undefined! : val)}
aria-label="merge-policy-input"
/>
</FormGroup>
Expand All @@ -87,12 +87,14 @@ const BackupsConfigurationTuning = () => {
/>
}
>
<TimeQuantityInputGroup name={'maxCleanupDelay'}
defaultValue={'30000'}
value={maxCleanupDelay}
valueModifier={setMaxCleanupDelay}
unit={maxCleanupDelayUnit}
unitModifier={setMaxCleanupDelayUnit}/>
<TimeQuantityInputGroup
name={'maxCleanupDelay'}
defaultValue={'30000'}
value={maxCleanupDelay}
valueModifier={setMaxCleanupDelay}
unit={maxCleanupDelayUnit}
unitModifier={setMaxCleanupDelayUnit}
/>
</FormGroup>

<FormGroup
Expand All @@ -112,7 +114,7 @@ const BackupsConfigurationTuning = () => {
value={tombstoneMapSize}
onChange={(_event, val) => {
const parsedVal = parseInt(val);
setTombstoneMapSize(isNaN(parsedVal) ? undefined! : parsedVal)
setTombstoneMapSize(isNaN(parsedVal) ? undefined! : parsedVal);
}}
aria-label="tombstone-map-size-input"
/>
Expand Down
Loading

0 comments on commit b1db388

Please sign in to comment.