Skip to content

Commit

Permalink
Fixes #36610 - AK Details: Add system purpose card
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeremylenz
Trevor Allison authored and jeremylenz committed Sep 25, 2023
1 parent 244a606 commit 2dc04d9
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 104 deletions.
36 changes: 29 additions & 7 deletions webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { translate as __ } from 'foremanReact/common/I18n';
import { API_OPERATIONS, put } from 'foremanReact/redux/API';
import api, { foremanApi } from '../../../../../services/api';
import HOST_DETAILS_KEY from '../../HostDetailsConstants';
import { ORGANIZATION, AVAILABLE_RELEASE_VERSIONS } from './SystemPurposeConstants';
import { ACTIVATION_KEY } from '../../../../../scenes/ActivationKeys/Details/ActivationKeyConstants';
import { ORGANIZATION, AVAILABLE_RELEASE_VERSIONS, RELEASES } from './SystemPurposeConstants';
import { errorToast } from '../../../../../scenes/Tasks/helpers';

export const getOrganization = ({ orgId }) => ({
Expand All @@ -13,20 +14,28 @@ export const getOrganization = ({ orgId }) => ({
},
});

export const getAvailableReleaseVersions = ({ hostId }) => ({
export const getHostAvailableReleaseVersions = ({ id }) => ({
type: 'API_GET',
payload: {
key: `${AVAILABLE_RELEASE_VERSIONS}_${hostId}`,
url: foremanApi.getApiUrl(`/hosts/${hostId}/subscriptions/available_release_versions`),
key: `${AVAILABLE_RELEASE_VERSIONS}_${id}`,
url: foremanApi.getApiUrl(`/hosts/${id}/subscriptions/available_release_versions`),
},
});

export const updateSystemPurposeAttributes = ({ hostId, attributes, refreshHostDetails }) => put({
export const getAKAvailableReleaseVersions = ({ id }) => ({
type: API_OPERATIONS.GET,
payload: {
key: `${RELEASES}_${id}`,
url: api.getApiUrl(`/activation_keys/${id}/releases`),
},
});

export const updateHostSysPurposeAttributes = ({ id, attributes, refreshHostDetails }) => put({
type: API_OPERATIONS.PUT,
key: HOST_DETAILS_KEY,
url: foremanApi.getApiUrl(`/hosts/${hostId}`),
url: foremanApi.getApiUrl(`/hosts/${id}`),
params: {
id: hostId,
id,
host: {
subscription_facet_attributes: attributes,
},
Expand All @@ -35,3 +44,16 @@ export const updateSystemPurposeAttributes = ({ hostId, attributes, refreshHostD
errorToast,
handleSuccess: refreshHostDetails,
});

export const updateAKSysPurposeAttributes = ({ id, attributes, refreshAKDetails }) => put({
type: API_OPERATIONS.PUT,
key: ACTIVATION_KEY,
url: api.getApiUrl(`/activation_keys/${id}`),
params: {
id,
activation_key: attributes,
},
successToast: () => __('System purpose attributes updated'),
errorToast,
handleSuccess: refreshAKDetails,
});
172 changes: 106 additions & 66 deletions webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { STATUS } from 'foremanReact/constants';
import { selectAPIStatus } from 'foremanReact/redux/API/APISelectors';
import {
Button,
Card,
Expand All @@ -10,8 +11,8 @@ import {
CardBody,
DescriptionList,
DescriptionListGroup,
DescriptionListDescription,
DescriptionListTerm,
DescriptionListDescription as Dd,
DescriptionListTerm as Dt,
Flex,
FlexItem,
GridItem,
Expand All @@ -20,6 +21,7 @@ import {
ListItem,
Tooltip,
Skeleton,
CardExpandableContent,
} from '@patternfly/react-core';
import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
import { translate as __ } from 'foremanReact/common/I18n';
Expand All @@ -29,25 +31,45 @@ import SystemPurposeEditModal from './SystemPurposeEditModal';
import { selectHostDetailsStatus } from '../../HostDetailsSelectors';
import { hasRequiredPermissions, hostIsNotRegistered } from '../../hostDetailsHelpers';

const SystemPurposeCard = ({ hostDetails }) => {
const showEditButton = hasRequiredPermissions(['edit_hosts'], hostDetails?.permissions);
const { organization_id: orgId, name: hostName } = hostDetails;
const subscriptionFacetAttributes = hostDetails?.subscription_facet_attributes;
const SystemPurposeCard = ({ hostDetails, akDetails }) => {
const sysPurposeCardType = hostDetails?.id ? 'host' : 'ak';
const isAKType = sysPurposeCardType === 'ak';
const isHostType = sysPurposeCardType === 'host';
const details = isHostType ? hostDetails : akDetails;
const requiredPermission = isHostType ? 'edit_hosts' : 'edit_activation_keys';
const showEditButton = hasRequiredPermissions([requiredPermission], details?.permissions);
const { organization_id: orgId, name: hostName } = details;
const subscriptionFacetAttributes = details?.subscription_facet_attributes;
const {
purposeRole, purposeUsage, purposeAddons, releaseVersion, serviceLevel,
} = propsToCamelCase(subscriptionFacetAttributes ?? {});
} = propsToCamelCase((subscriptionFacetAttributes || details) ?? {});
const sysPurposeProps = {
purposeRole,
purposeUsage,
purposeAddons,
releaseVersion,
serviceLevel,
};
const hostDetailsStatus = useSelector(selectHostDetailsStatus);
const dataIsLoading = hostDetailsStatus === STATUS.PENDING;
const selectAKDetailsStatus = state =>
selectAPIStatus(state, `ACTIVATION_KEY_${details.id}`) ?? STATUS.PENDING;

const statusSelector = isHostType ? selectHostDetailsStatus : selectAKDetailsStatus;
const detailsStatus = useSelector(statusSelector);
const dataIsLoading = detailsStatus === STATUS.PENDING;

const [editing, setEditing] = useState(false);
if (!hostDetails?.id) {

const [isExpanded, setIsExpanded] = React.useState(true);

const onExpand = () => {
setIsExpanded(!isExpanded);
};
const cardHeaderProps = {
toggleButtonProps: { id: 'sys-purpose-toggle', 'aria-label': 'sys-purpose-toggle' },
};
if (isAKType) cardHeaderProps.onExpand = onExpand;

if (!details?.id) {
return (
<GridItem rowSpan={1} md={6} lg={4} xl2={3}>
<Card ouiaId="system-purpose-card">
Expand All @@ -57,12 +79,11 @@ const SystemPurposeCard = ({ hostDetails }) => {
);
}

if (hostIsNotRegistered({ hostDetails })) return null;

if (isHostType && hostIsNotRegistered({ hostDetails: details })) return null;
return (
<GridItem rowSpan={1} md={6} lg={4} xl2={3}>
<Card ouiaId="system-purpose-card">
<CardHeader>
<Card ouiaId="system-purpose-card" id="system-purpose-card" isExpanded={isHostType ? true : isExpanded}>
<CardHeader {...cardHeaderProps}>
<Flex
alignItems={{ default: 'alignItemsCenter' }}
justifyContent={{ default: 'justifyContentSpaceBetween' }}
Expand Down Expand Up @@ -95,58 +116,63 @@ const SystemPurposeCard = ({ hostDetails }) => {
}
</Flex>
</CardHeader>
<CardBody className="system-purpose-card-body">
<DescriptionList isHorizontal>
<DescriptionListGroup>
<DescriptionListTerm>{__('Role')}</DescriptionListTerm>
<DescriptionListDescription>
{dataIsLoading ? <Skeleton /> : purposeRole}
</DescriptionListDescription>
<DescriptionListTerm>{__('SLA')}</DescriptionListTerm>
<DescriptionListDescription>
{serviceLevel && (dataIsLoading ? <Skeleton /> : (
<Label color="blue">{serviceLevel}</Label>
))}
</DescriptionListDescription>
<DescriptionListTerm>{__('Usage type')}</DescriptionListTerm>
<DescriptionListDescription>
{purposeUsage && (dataIsLoading ? <Skeleton /> : (
<Label color="blue">{purposeUsage}</Label>
))}
</DescriptionListDescription>
<DescriptionListTerm>{__('Release version')}</DescriptionListTerm>
<DescriptionListDescription>
{dataIsLoading ? <Skeleton /> : releaseVersion}
</DescriptionListDescription>
{!!purposeAddons?.length && (
<>
<DescriptionListTerm>{__('Add-ons')}</DescriptionListTerm>
{dataIsLoading ? <Skeleton /> : (
<DescriptionListDescription>
<List isPlain>
{purposeAddons.map(addon => (
<ListItem key={addon}>{addon}</ListItem>
))}
</List>
</DescriptionListDescription>
)}
</>
)
}
</DescriptionListGroup>
</DescriptionList>
{showEditButton && (
<SystemPurposeEditModal
key={hostName}
isOpen={editing}
orgId={orgId}
closeModal={() => setEditing(false)}
hostName={hostName}
hostId={hostDetails.id}
{...sysPurposeProps}
/>
)}
</CardBody>
<CardExpandableContent>
<CardBody className="system-purpose-card-body">
<DescriptionList isHorizontal columnModifier={isAKType ? { default: '2Col' } : undefined}>
<DescriptionListGroup>
<Dt>{__('Role')}</Dt>
<Dd>
{dataIsLoading ? <Skeleton /> : purposeRole}
</Dd>
<Dt>{__('SLA')}</Dt>
<Dd>
{serviceLevel && (dataIsLoading ? <Skeleton /> : (
<Label color="blue">{serviceLevel}</Label>
))}
</Dd>
</DescriptionListGroup>
<DescriptionListGroup>
<Dt>{__('Usage type')}</Dt>
<Dd>
{purposeUsage && (dataIsLoading ? <Skeleton /> : (
<Label color="blue">{purposeUsage}</Label>
))}
</Dd>
<Dt>{__('Release version')}</Dt>
<Dd>
{dataIsLoading ? <Skeleton /> : releaseVersion}
</Dd>
{!!purposeAddons?.length && (
<>
<Dt>{__('Add-ons')}</Dt>
{dataIsLoading ? <Skeleton /> : (
<Dd>
<List isPlain>
{purposeAddons.map(addon => (
<ListItem key={addon}>{addon}</ListItem>
))}
</List>
</Dd>
)}
</>
)
}
</DescriptionListGroup>
</DescriptionList>
{showEditButton && (
<SystemPurposeEditModal
key={hostName}
isOpen={editing}
orgId={orgId}
closeModal={() => setEditing(false)}
name={hostName}
id={details.id}
{...sysPurposeProps}
type={sysPurposeCardType}
/>
)}
</CardBody>
</CardExpandableContent>
</Card>
</GridItem>
);
Expand All @@ -167,10 +193,24 @@ SystemPurposeCard.propTypes = {
edit_hosts: PropTypes.bool,
}),
}),
akDetails: PropTypes.shape({
name: PropTypes.string,
organization_id: PropTypes.number,
id: PropTypes.number,
purpose_usage: PropTypes.string,
purpose_role: PropTypes.string,
release_version: PropTypes.string,
service_level: PropTypes.string,
purpose_addons: PropTypes.arrayOf(PropTypes.string),
permissions: PropTypes.shape({
edit_activation_keys: PropTypes.bool,
}),
}),
};

SystemPurposeCard.defaultProps = {
hostDetails: {},
akDetails: {},
};

export default SystemPurposeCard;
6 changes: 6 additions & 0 deletions webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,10 @@
.pf-c-label {
font-size: smaller;
}
}

#system-purpose-card {
.pf-c-card__header-toggle {
margin-top: -2px;
}
}
2 changes: 2 additions & 0 deletions webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeConstants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,5 @@ export const defaultServiceLevels = ['Self-Support', 'Standard', 'Premium'];

export const ORGANIZATION = 'ORGANIZATION';
export const AVAILABLE_RELEASE_VERSIONS = 'AVAILABLE_RELEASE_VERSIONS';

export const RELEASES = 'RELEASES';
Loading

0 comments on commit 2dc04d9

Please sign in to comment.