diff --git a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
index 9d3ae47864..3dc8690a1d 100644
--- a/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
+++ b/awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js
@@ -11,7 +11,7 @@ import {
CodeBlockCode,
Tooltip,
Slider,
- Chip,
+ Label,
} from '@patternfly/react-core';
import { DownloadIcon } from '@patternfly/react-icons';
import styled from 'styled-components';
@@ -29,7 +29,6 @@ import ContentLoading from 'components/ContentLoading';
import { Detail, DetailList } from 'components/DetailList';
import StatusLabel from 'components/StatusLabel';
import useRequest, { useDismissableError } from 'hooks/useRequest';
-import ChipGroup from 'components/ChipGroup';
const Unavailable = styled.span`
color: var(--pf-global--danger-color--200);
@@ -186,28 +185,25 @@ function InstanceDetail({ setBreadcrumb }) {
fullWidth
label={t`Instance Groups`}
helpText={t`The Instance Groups to which this instance belongs.`}
- value={
-
- {instanceGroups.map((ig) => (
-
- (
+
+
-
- ))}
-
- }
+ {content}
+
+ )}
+ >
+ {ig.name}
+ {' '}
+
+ ))}
isEmpty={instanceGroups.length === 0}
/>
)}
diff --git a/awx/ui/src/screens/TopologyView/Tooltip.js b/awx/ui/src/screens/TopologyView/Tooltip.js
index 055691ba40..e2d8a792eb 100644
--- a/awx/ui/src/screens/TopologyView/Tooltip.js
+++ b/awx/ui/src/screens/TopologyView/Tooltip.js
@@ -1,4 +1,5 @@
import React, { useState, useCallback, useEffect } from 'react';
+import { Link } from 'react-router-dom';
import { t, Plural } from '@lingui/macro';
import styled from 'styled-components';
import { useConfig } from 'contexts/Config';
@@ -20,6 +21,7 @@ import {
TextContent,
Text as PFText,
TextVariants,
+ Label,
} from '@patternfly/react-core';
import { DownloadIcon } from '@patternfly/react-icons';
import ContentLoading from 'components/ContentLoading';
@@ -77,8 +79,31 @@ const SliderForks = styled.div`
text-align: center;
`;
+const buildLinkURL = (inst) =>
+ inst.is_container_group
+ ? '/instance_groups/container_group/'
+ : '/instance_groups/';
+
function renderInstanceGroups(instanceGroups) {
- return instanceGroups.map((g) => );
+ return instanceGroups.map((ig) => (
+
+ {' '}
+
+ ));
}
function usedCapacity(instance) {