Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #36610 - Add system purpose card to new Activation Key details page #10663

Closed
wants to merge 6 commits into from
Closed

Fixes #36610 - Add system purpose card to new Activation Key details page #10663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2f723ae
Fixes #36576 - Add Activation Key details top bar
Jun 29, 2023
a34175d
Refs #36576 - Fix test
Jul 7, 2023
da24d9d
Refs #36576 - Remove unecessary react fragments, translate necessary …
Jul 7, 2023
9c33b9a
Refs #36576 - Fix errors and bugs in edit modal, add tests
Jul 14, 2023
e6628a0
Fixes #36610 - Add system purpose card to new Activation Key details …
Jul 14, 2023
273281c
Refs #36610 - Fix linting errors, remove unecessary file
Aug 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 27 additions & 5 deletions webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeActions.js
View file
Open in desktop
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 = ({ hostId }) => ({
type: 'API_GET',
payload: {
key: `${AVAILABLE_RELEASE_VERSIONS}_${hostId}`,
url: foremanApi.getApiUrl(`/hosts/${hostId}/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,
});
167 changes: 104 additions & 63 deletions webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeCard.js
View file
Open in desktop
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 @@ -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,47 @@ 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 details = hostDetails?.id ? hostDetails : akDetails;
const sysPurposeCardType = details?.subscription_facet_attributes ? 'host' : 'ak';
const requiredPermission = sysPurposeCardType === 'host' ? '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 = sysPurposeCardType === 'host' ? selectHostDetailsStatus : selectAKDetailsStatus;
const detailsStatus = useSelector(statusSelector);
const dataIsLoading = detailsStatus === STATUS.PENDING;

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

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

const onExpand = () => {
setIsExpanded(!isExpanded);
};

const cardHeaderProps = {
toggleButtonProps: { id: 'sys-purpose-toggle', 'aria-label': 'sys-purpose-toggle' },
};
if (sysPurposeCardType === 'ak') {
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 +81,12 @@ const SystemPurposeCard = ({ hostDetails }) => {
);
}

if (hostIsNotRegistered({ hostDetails })) return null;
if (sysPurposeCardType === 'host' && 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" isExpanded={sysPurposeCardType === 'host' ? true : isExpanded}>
<CardHeader {...cardHeaderProps}>
<Flex
alignItems={{ default: 'alignItemsCenter' }}
justifyContent={{ default: 'justifyContentSpaceBetween' }}
Expand Down Expand Up @@ -95,58 +119,61 @@ 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>
<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)}
name={hostName}
id={details.id}
{...sysPurposeProps}
type={sysPurposeCardType}
/>
)}
</CardBody>
</CardExpandableContent>
</Card>
</GridItem>
);
Expand All @@ -167,10 +194,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;
2 changes: 2 additions & 0 deletions webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeConstants.js
View file
Open in desktop
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