Update labels to display isolated and controller instance groups

Update labels to display isolated and controller instance groups. See: ansible#7467
nixocio · Sep 16, 2020 · ceabaf2 · ceabaf2
1 parent aceb822
commit ceabaf2
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 15 deletions.
diff --git 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}
-          <span css="margin-left: 12px">
+        <Split hasGutter>
+          <SplitItem>{item.name}</SplitItem>
+          <SplitItem>
             <Label aria-label={i18n._(t`isolated instance`)}>
               {i18n._(t`Isolated`)}
             </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}</>;
@@ -60,7 +72,7 @@ function InstanceGroupDetails({ instanceGroup, i18n }) {
       <DetailList>
         <Detail
           label={i18n._(t`Name`)}
-          value={verifyIsIsolated(instanceGroup)}
+          value={verifyInstanceGroup(instanceGroup)}
           dataCy="instance-group-detail-name"
         />
         <Detail

diff --git a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx
@@ -81,6 +81,28 @@ function InstanceGroupListItem({
     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 (
     <DataListItem
       key={instanceGroup.id}
@@ -106,13 +128,7 @@ function InstanceGroupListItem({
                   <b>{instanceGroup.name}</b>
                 </Link>
               </span>
-              {instanceGroup.is_isolated ? (
-                <span css="margin-left: 12px">
-                  <Label aria-label={i18n._(t`isolated instance`)}>
-                    {i18n._(t`Isolated`)}
-                  </Label>
-                </span>
-              ) : null}
+              {verifyInstanceGroup(instanceGroup)}
             </DataListCell>,
 
             <DataListCell