147 lines
5.2 KiB
TypeScript
147 lines
5.2 KiB
TypeScript
import React from 'react';
|
|
|
|
import {
|
|
Alert,
|
|
Spinner,
|
|
Content,
|
|
ContentVariants,
|
|
} from '@patternfly/react-core';
|
|
import { Button, Popover } from '@patternfly/react-core';
|
|
import { HelpIcon } from '@patternfly/react-icons';
|
|
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
|
|
|
|
import { useAppSelector } from '../../../../store/hooks';
|
|
import { useShowActivationKeyQuery } from '../../../../store/rhsmApi';
|
|
import { selectActivationKey } from '../../../../store/wizardSlice';
|
|
|
|
const ActivationKeyInformation = (): JSX.Element => {
|
|
const activationKey = useAppSelector(selectActivationKey);
|
|
|
|
const {
|
|
data: activationKeyInfo,
|
|
isFetching: isFetchingActivationKeyInfo,
|
|
isSuccess: isSuccessActivationKeyInfo,
|
|
isError: isErrorActivationKeyInfo,
|
|
} = useShowActivationKeyQuery(
|
|
{ name: activationKey! },
|
|
{
|
|
skip: !activationKey,
|
|
}
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{isFetchingActivationKeyInfo && <Spinner size="lg" />}
|
|
{isSuccessActivationKeyInfo && (
|
|
<Content>
|
|
<Content component={ContentVariants.dl}>
|
|
<Content component={ContentVariants.dt}>Name:</Content>
|
|
<Content component={ContentVariants.dd}>{activationKey}</Content>
|
|
<Content component={ContentVariants.dt}>Role:</Content>
|
|
<Content component={ContentVariants.dd}>
|
|
{activationKeyInfo?.body?.role || 'Not defined'}
|
|
</Content>
|
|
<Content component={ContentVariants.dt}>SLA:</Content>
|
|
<Content component={ContentVariants.dd}>
|
|
{activationKeyInfo?.body?.serviceLevel || 'Not defined'}
|
|
</Content>
|
|
<Content component={ContentVariants.dt}>Usage:</Content>
|
|
<Content component={ContentVariants.dd}>
|
|
{activationKeyInfo?.body?.usage || 'Not defined'}
|
|
</Content>
|
|
<Content component={ContentVariants.dt}>
|
|
Additional repositories:
|
|
<Popover
|
|
bodyContent={
|
|
<Content>
|
|
<Content>
|
|
The core repositories for your operating system version
|
|
are always enabled and do not need to be explicitly added
|
|
to the activation key.
|
|
</Content>
|
|
</Content>
|
|
}
|
|
>
|
|
<Button
|
|
icon={<HelpIcon />}
|
|
variant="plain"
|
|
aria-label="About additional repositories"
|
|
className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
|
|
/>
|
|
</Popover>
|
|
</Content>
|
|
<Content
|
|
component={ContentVariants.dd}
|
|
className="pf-v6-u-display-flex pf-v6-u-align-items-flex-end"
|
|
>
|
|
{activationKeyInfo?.body?.additionalRepositories &&
|
|
activationKeyInfo?.body?.additionalRepositories?.length > 0 ? (
|
|
<Popover
|
|
position="right"
|
|
minWidth="30rem"
|
|
bodyContent={
|
|
<Content>
|
|
<Content component={ContentVariants.h3}>
|
|
Additional repositories
|
|
</Content>
|
|
<Table
|
|
aria-label="Additional repositories table"
|
|
variant="compact"
|
|
>
|
|
<Thead>
|
|
<Tr>
|
|
<Th>Name</Th>
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{activationKeyInfo.body?.additionalRepositories?.map(
|
|
(repo, index) => (
|
|
<Tr key={index}>
|
|
<Td>{repo.repositoryLabel}</Td>
|
|
</Tr>
|
|
)
|
|
)}
|
|
</Tbody>
|
|
</Table>
|
|
</Content>
|
|
}
|
|
>
|
|
<Button
|
|
variant="link"
|
|
aria-label="Show additional repositories"
|
|
className="pf-v6-u-pl-0 pf-v6-u-pt-0 pf-v6-u-pb-0"
|
|
>
|
|
{activationKeyInfo.body?.additionalRepositories?.length}{' '}
|
|
repositories
|
|
</Button>
|
|
</Popover>
|
|
) : (
|
|
'None'
|
|
)}
|
|
</Content>
|
|
</Content>
|
|
</Content>
|
|
)}
|
|
{isErrorActivationKeyInfo && (
|
|
<Content>
|
|
<Content component={ContentVariants.dl}>
|
|
<Content component={ContentVariants.dt}>Name:</Content>
|
|
<Content component={ContentVariants.dd}>{activationKey}</Content>
|
|
</Content>
|
|
<br />
|
|
<Alert
|
|
title="Information about the activation key unavailable"
|
|
variant="danger"
|
|
isPlain
|
|
isInline
|
|
>
|
|
Information about the activation key cannot be loaded. Please check
|
|
the key was not removed and try again later.
|
|
</Alert>
|
|
</Content>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ActivationKeyInformation;
|