Revision 71ce89cb
Added by Amir Fefer over 2 years ago
| webpack/assets/javascripts/react_app/components/HostDetails/DetailsCard/index.js | ||
|---|---|---|
|
CardBody,
|
||
|
ClipboardCopy,
|
||
|
Divider,
|
||
|
GridItem,
|
||
|
} from '@patternfly/react-core';
|
||
|
import { UserIcon } from '@patternfly/react-icons';
|
||
|
import { translate as __ } from '../../../common/I18n';
|
||
| ... | ... | |
|
import './styles.scss';
|
||
|
|
||
|
const DetailsCard = ({
|
||
|
hostName,
|
||
|
ip,
|
||
|
ip6,
|
||
|
mac,
|
||
|
comment,
|
||
|
owner_id: ownerID,
|
||
|
owner_name: ownerName,
|
||
|
hostgroup_name: hostgroupName,
|
||
|
status,
|
||
|
permissions: { power_hosts: hasPowerPermission },
|
||
|
hostName,
|
||
|
hostDetails: {
|
||
|
ip,
|
||
|
ip6,
|
||
|
mac,
|
||
|
comment,
|
||
|
owner_id: ownerID,
|
||
|
owner_name: ownerName,
|
||
|
hostgroup_name: hostgroupName,
|
||
|
permissions: { power_hosts: hasPowerPermission } = {},
|
||
|
},
|
||
|
}) => (
|
||
|
<Card isHoverable>
|
||
|
<CardHeader>
|
||
|
<CardTitle>{__('Details')}</CardTitle>
|
||
|
<CardActions>
|
||
|
<PowerStatusDropDown
|
||
|
hostID={hostName}
|
||
|
hasPowerPermission={hasPowerPermission}
|
||
|
/>
|
||
|
</CardActions>
|
||
|
</CardHeader>
|
||
|
<CardBody>
|
||
|
<DescriptionList
|
||
|
isAutoColumnWidths
|
||
|
columnModifier={{
|
||
|
default: '2Col',
|
||
|
}}
|
||
|
>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('IPv6 address')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{ip6 && (
|
||
|
<ClipboardCopy isBlock variant="inline-compact">
|
||
|
{ip6}
|
||
|
</ClipboardCopy>
|
||
|
)}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('IPv4 address')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{ip && (
|
||
|
<ClipboardCopy isBlock variant="inline-compact">
|
||
|
{ip}
|
||
|
</ClipboardCopy>
|
||
|
)}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('MAC address')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{mac && (
|
||
|
<ClipboardCopy isBlock variant="inline-compact">
|
||
|
{mac}
|
||
|
</ClipboardCopy>
|
||
|
)}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
</DescriptionList>
|
||
|
<GridItem xl2={3} xl={4} md={6} lg={4} rowSpan={2}>
|
||
|
<Card isHoverable>
|
||
|
<CardHeader>
|
||
|
<CardTitle>{__('Details')}</CardTitle>
|
||
|
<CardActions>
|
||
|
<PowerStatusDropDown
|
||
|
hostID={hostName}
|
||
|
hasPowerPermission={hasPowerPermission}
|
||
|
/>
|
||
|
</CardActions>
|
||
|
</CardHeader>
|
||
|
<CardBody>
|
||
|
<DescriptionList
|
||
|
isAutoColumnWidths
|
||
|
columnModifier={{
|
||
|
default: '2Col',
|
||
|
}}
|
||
|
>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('IPv6 address')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{ip6 && (
|
||
|
<ClipboardCopy isBlock variant="inline-compact">
|
||
|
{ip6}
|
||
|
</ClipboardCopy>
|
||
|
)}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('IPv4 address')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{ip && (
|
||
|
<ClipboardCopy isBlock variant="inline-compact">
|
||
|
{ip}
|
||
|
</ClipboardCopy>
|
||
|
)}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('MAC address')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{mac && (
|
||
|
<ClipboardCopy isBlock variant="inline-compact">
|
||
|
{mac}
|
||
|
</ClipboardCopy>
|
||
|
)}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
</DescriptionList>
|
||
|
|
||
|
<Divider className="padded-divider" />
|
||
|
<DescriptionList>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('Host group')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{hostgroupName}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('Host owner')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{ownerID && (
|
||
|
<span>
|
||
|
<UserIcon /> {ownerName}
|
||
|
</span>
|
||
|
)}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('Comment')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{comment}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
</DescriptionList>
|
||
|
</CardBody>
|
||
|
</Card>
|
||
|
<Divider className="padded-divider" />
|
||
|
<DescriptionList>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('Host group')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{hostgroupName}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('Host owner')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{ownerID && (
|
||
|
<span>
|
||
|
<UserIcon /> {ownerName}
|
||
|
</span>
|
||
|
)}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('Comment')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<SkeletonLoader
|
||
|
emptyState={<DefaultLoaderEmptyState />}
|
||
|
status={status}
|
||
|
>
|
||
|
{comment}
|
||
|
</SkeletonLoader>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
</DescriptionList>
|
||
|
</CardBody>
|
||
|
</Card>
|
||
|
</GridItem>
|
||
|
);
|
||
|
|
||
|
DetailsCard.propTypes = {
|
||
|
hostName: PropTypes.string.isRequired,
|
||
|
comment: PropTypes.string,
|
||
|
hostgroup_name: PropTypes.string,
|
||
|
ip: PropTypes.string,
|
||
|
ip6: PropTypes.string,
|
||
|
mac: PropTypes.string,
|
||
|
owner_id: PropTypes.number,
|
||
|
owner_name: PropTypes.string,
|
||
|
hostName: PropTypes.string,
|
||
|
status: PropTypes.string,
|
||
|
permissions: PropTypes.object,
|
||
|
hostDetails: PropTypes.shape({
|
||
|
comment: PropTypes.string,
|
||
|
hostgroup_name: PropTypes.string,
|
||
|
ip: PropTypes.string,
|
||
|
ip6: PropTypes.string,
|
||
|
mac: PropTypes.string,
|
||
|
owner_id: PropTypes.number,
|
||
|
owner_name: PropTypes.string,
|
||
|
permissions: PropTypes.object,
|
||
|
}),
|
||
|
};
|
||
|
|
||
|
DetailsCard.defaultProps = {
|
||
|
hostName: undefined,
|
||
|
status: STATUS.PENDING,
|
||
|
comment: undefined,
|
||
|
hostgroup_name: undefined,
|
||
|
ip: undefined,
|
||
|
ip6: undefined,
|
||
|
mac: undefined,
|
||
|
owner_id: undefined,
|
||
|
owner_name: undefined,
|
||
|
permissions: { power_hosts: false },
|
||
|
hostDetails: {
|
||
|
comment: undefined,
|
||
|
hostgroup_name: undefined,
|
||
|
ip: undefined,
|
||
|
ip6: undefined,
|
||
|
mac: undefined,
|
||
|
owner_id: undefined,
|
||
|
owner_name: undefined,
|
||
|
permissions: { power_hosts: false },
|
||
|
},
|
||
|
};
|
||
|
|
||
|
export default DetailsCard;
|
||
Also available in: Unified diff
Fixes #34142 - make the core cards arrangeable in new host page (#8995)