diff --git a/awx/ui/src/components/StatusIcon/StatusIcon.js b/awx/ui/src/components/StatusIcon/StatusIcon.js
index 71149f8753..d63da75fd6 100644
--- a/awx/ui/src/components/StatusIcon/StatusIcon.js
+++ b/awx/ui/src/components/StatusIcon/StatusIcon.js
@@ -22,6 +22,13 @@ const colors = {
disabled: gray,
canceled: orange,
changed: orange,
+ /* Instance statuses */
+ ready: green,
+ installed: blue,
+ provisioning: gray,
+ deprovisioning: gray,
+ 'provision-fail': red,
+ 'deprovision-fail': red,
};
function StatusIcon({ status, ...props }) {
diff --git a/awx/ui/src/components/StatusIcon/icons.js b/awx/ui/src/components/StatusIcon/icons.js
index e91174661d..01eb1704ba 100644
--- a/awx/ui/src/components/StatusIcon/icons.js
+++ b/awx/ui/src/components/StatusIcon/icons.js
@@ -7,6 +7,7 @@ import {
ClockIcon,
MinusCircleIcon,
InfoCircleIcon,
+ PlusCircleIcon,
} from '@patternfly/react-icons';
const Spin = keyframes`
@@ -40,5 +41,12 @@ const icons = {
skipped: MinusCircleIcon,
canceled: ExclamationTriangleIcon,
changed: ExclamationTriangleIcon,
+ /* Instance statuses */
+ ready: CheckCircleIcon,
+ installed: ClockIcon,
+ provisioning: PlusCircleIcon,
+ deprovisioning: MinusCircleIcon,
+ 'provision-fail': ExclamationCircleIcon,
+ 'deprovision-fail': ExclamationCircleIcon,
};
export default icons;
diff --git a/awx/ui/src/components/StatusLabel/StatusLabel.js b/awx/ui/src/components/StatusLabel/StatusLabel.js
index f7a91c8af2..dc78fd69e6 100644
--- a/awx/ui/src/components/StatusLabel/StatusLabel.js
+++ b/awx/ui/src/components/StatusLabel/StatusLabel.js
@@ -24,6 +24,13 @@ const colors = {
disabled: 'grey',
canceled: 'orange',
changed: 'orange',
+ /* Instance statuses */
+ ready: 'green',
+ installed: 'blue',
+ provisioning: 'gray',
+ deprovisioning: 'gray',
+ 'provision-fail': 'red',
+ 'deprovision-fail': 'red',
};
export default function StatusLabel({ status, tooltipContent = '', children }) {
@@ -45,6 +52,13 @@ export default function StatusLabel({ status, tooltipContent = '', children }) {
disabled: t`Disabled`,
canceled: t`Canceled`,
changed: t`Changed`,
+ /* Instance statuses */
+ ready: t`Ready`,
+ installed: t`Installed`,
+ provisioning: t`Provisioning`,
+ deprovisioning: t`Deprovisioning`,
+ 'provision-fail': t`Provisioning fail`,
+ 'deprovision-fail': t`Deprovisioning fail`,
};
const label = upperCaseStatus[status] || status;
const color = colors[status] || 'grey';
@@ -88,5 +102,11 @@ StatusLabel.propTypes = {
'disabled',
'canceled',
'changed',
+ 'ready',
+ 'installed',
+ 'provisioning',
+ 'deprovisioning',
+ 'provision-fail',
+ 'deprovision-fail',
]).isRequired,
};
diff --git a/awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js b/awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js
index 5d3c2e25a8..60a1cc49a5 100644
--- a/awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js
+++ b/awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js
@@ -136,7 +136,7 @@ function InstanceListItem({
}
>
-