Update labels to display isolated and controller instance groups

Update labels to display isolated and controller instance groups.

See: https://github.com/ansible/awx/issues/8244
Also: https://github.com/ansible/awx/issues/7467
This commit is contained in:
nixocio
2020-09-14 13:41:57 -04:00
parent 677fb594e8
commit c8b9cbe0d5
2 changed files with 43 additions and 15 deletions

View File

@@ -3,7 +3,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Link, useHistory } from 'react-router-dom'; import { Link, useHistory } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { Button, Label } from '@patternfly/react-core'; import { Button, Label, Split, SplitItem } from '@patternfly/react-core';
import AlertModal from '../../../components/AlertModal'; import AlertModal from '../../../components/AlertModal';
import { CardBody, CardActionsRow } from '../../../components/Card'; import { CardBody, CardActionsRow } from '../../../components/Card';
@@ -39,17 +39,29 @@ function InstanceGroupDetails({ instanceGroup, i18n }) {
const { error, dismissError } = useDismissableError(deleteError); const { error, dismissError } = useDismissableError(deleteError);
const verifyIsIsolated = item => { const verifyInstanceGroup = item => {
if (item.is_isolated) { if (item.is_isolated) {
return ( return (
<> <Split hasGutter>
{item.name} <SplitItem>{item.name}</SplitItem>
<span css="margin-left: 12px"> <SplitItem>
<Label aria-label={i18n._(t`isolated instance`)}> <Label aria-label={i18n._(t`isolated instance`)}>
{i18n._(t`Isolated`)} {i18n._(t`Isolated`)}
</Label> </Label>
</span> </SplitItem>
</> </Split>
);
}
if (item.is_controller) {
return (
<Split hasGutter>
<SplitItem>{item.name}</SplitItem>
<SplitItem>
<Label aria-label={i18n._(t`controller instance`)}>
{i18n._(t`Controller`)}
</Label>
</SplitItem>
</Split>
); );
} }
return <>{item.name}</>; return <>{item.name}</>;
@@ -60,7 +72,7 @@ function InstanceGroupDetails({ instanceGroup, i18n }) {
<DetailList> <DetailList>
<Detail <Detail
label={i18n._(t`Name`)} label={i18n._(t`Name`)}
value={verifyIsIsolated(instanceGroup)} value={verifyInstanceGroup(instanceGroup)}
dataCy="instance-group-detail-name" dataCy="instance-group-detail-name"
/> />
<Detail <Detail

View File

@@ -81,6 +81,28 @@ function InstanceGroupListItem({
return null; return null;
} }
const verifyInstanceGroup = item => {
if (item.is_isolated) {
return (
<span css="margin-left: 12px">
<Label aria-label={i18n._(t`isolated instance`)}>
{i18n._(t`Isolated`)}
</Label>
</span>
);
}
if (item.is_controller) {
return (
<span css="margin-left: 12px">
<Label aria-label={i18n._(t`controller instance`)}>
{i18n._(t`Controller`)}
</Label>
</span>
);
}
return null;
};
return ( return (
<DataListItem <DataListItem
key={instanceGroup.id} key={instanceGroup.id}
@@ -106,13 +128,7 @@ function InstanceGroupListItem({
<b>{instanceGroup.name}</b> <b>{instanceGroup.name}</b>
</Link> </Link>
</span> </span>
{instanceGroup.is_isolated ? ( {verifyInstanceGroup(instanceGroup)}
<span css="margin-left: 12px">
<Label aria-label={i18n._(t`isolated instance`)}>
{i18n._(t`Isolated`)}
</Label>
</span>
) : null}
</DataListCell>, </DataListCell>,
<DataListCell <DataListCell