External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-13 20:37:39 -02:30
Code Issues Packages Projects Releases Wiki Activity

Replace Chip with Label component for IG labels.

Browse Source
This commit is contained in:
Kia Lam
2022-08-29 13:49:11 -07:00
committed by Jeff Bradberry
parent da945eed93
commit e2b9352dad
2 changed files with 45 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
View File

@@ -11,7 +11,7 @@ import {
CodeBlockCode, CodeBlockCode,
Tooltip, Tooltip,
Slider, Slider,
Chip, Label,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { DownloadIcon } from '@patternfly/react-icons'; import { DownloadIcon } from '@patternfly/react-icons';
import styled from 'styled-components'; import styled from 'styled-components';
@@ -29,7 +29,6 @@ import ContentLoading from 'components/ContentLoading';
import { Detail, DetailList } from 'components/DetailList'; import { Detail, DetailList } from 'components/DetailList';
import StatusLabel from 'components/StatusLabel'; import StatusLabel from 'components/StatusLabel';
import useRequest, { useDismissableError } from 'hooks/useRequest'; import useRequest, { useDismissableError } from 'hooks/useRequest';
import ChipGroup from 'components/ChipGroup';
const Unavailable = styled.span` const Unavailable = styled.span`
color: var(--pf-global--danger-color--200); color: var(--pf-global--danger-color--200);
@@ -186,28 +185,25 @@ function InstanceDetail({ setBreadcrumb }) {
fullWidth fullWidth
label={t`Instance Groups`} label={t`Instance Groups`}
helpText={t`The Instance Groups to which this instance belongs.`} helpText={t`The Instance Groups to which this instance belongs.`}
value={ value={instanceGroups.map((ig) => (
<ChipGroup <React.Fragment key={ig.id}>
numChips={5} <Label
totalChips={instanceGroups.length} color="blue"
ouiaId="instance-group-chips" isTruncated
> render={({ className, content, componentRef }) => (
{instanceGroups.map((ig) => ( <Link
<Link to={`${buildLinkURL(ig)}${ig.id}/details`}
to={`${buildLinkURL(ig)}${ig.id}/details`} className={className}
key={ig.id} innerRef={componentRef}
>
<Chip
key={ig.id}
isReadOnly
ouiaId={`instance-group-${ig.id}-chip`}
> >
{ig.name} {content}
</Chip> </Link>
</Link> )}
))} >
</ChipGroup> {ig.name}
} </Label>{' '}
</React.Fragment>
))}
isEmpty={instanceGroups.length === 0} isEmpty={instanceGroups.length === 0}
/> />
)} )}

27
awx/ui/src/screens/TopologyView/Tooltip.js
View File

@@ -1,4 +1,5 @@
import React, { useState, useCallback, useEffect } from 'react'; import React, { useState, useCallback, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { t, Plural } from '@lingui/macro'; import { t, Plural } from '@lingui/macro';
import styled from 'styled-components'; import styled from 'styled-components';
import { useConfig } from 'contexts/Config'; import { useConfig } from 'contexts/Config';
@@ -20,6 +21,7 @@ import {
TextContent, TextContent,
Text as PFText, Text as PFText,
TextVariants, TextVariants,
Label,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { DownloadIcon } from '@patternfly/react-icons'; import { DownloadIcon } from '@patternfly/react-icons';
import ContentLoading from 'components/ContentLoading'; import ContentLoading from 'components/ContentLoading';
@@ -77,8 +79,31 @@ const SliderForks = styled.div`
text-align: center; text-align: center;
`; `;
const buildLinkURL = (inst) =>
inst.is_container_group
? '/instance_groups/container_group/'
: '/instance_groups/';
function renderInstanceGroups(instanceGroups) { function renderInstanceGroups(instanceGroups) {
return instanceGroups.map((g) => <StatusLabel status={g.name} />); return instanceGroups.map((ig) => (
<React.Fragment key={ig.id}>
<Label
color="blue"
isTruncated
render={({ className, content, componentRef }) => (
<Link
to={`${buildLinkURL(ig)}${ig.id}/details`}
className={className}
innerRef={componentRef}
>
{content}
</Link>
)}
>
{ig.name}
</Label>{' '}
</React.Fragment>
));
} }
function usedCapacity(instance) { function usedCapacity(instance) {