diff --git a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx
index b7c10da67d..748e92702d 100644
--- a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupDetails/InstanceGroupDetails.jsx
@@ -3,7 +3,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Link, useHistory } from 'react-router-dom';
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 { CardBody, CardActionsRow } from '../../../components/Card';
@@ -39,17 +39,29 @@ function InstanceGroupDetails({ instanceGroup, i18n }) {
const { error, dismissError } = useDismissableError(deleteError);
- const verifyIsIsolated = item => {
+ const verifyInstanceGroup = item => {
if (item.is_isolated) {
return (
- <>
- {item.name}
-
+
+ {item.name}
+
-
- >
+
+
+ );
+ }
+ if (item.is_controller) {
+ return (
+
+ {item.name}
+
+
+
+
);
}
return <>{item.name}>;
@@ -60,7 +72,7 @@ function InstanceGroupDetails({ instanceGroup, i18n }) {
{
+ if (item.is_isolated) {
+ return (
+
+
+
+ );
+ }
+ if (item.is_controller) {
+ return (
+
+
+
+ );
+ }
+ return null;
+ };
+
return (
{instanceGroup.name}
- {instanceGroup.is_isolated ? (
-
-
-
- ) : null}
+ {verifyInstanceGroup(instanceGroup)}
,