diff --git a/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.js b/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.js
index 894459180a78..a9349e3345d9 100644
--- a/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.js
+++ b/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.js
@@ -1,8 +1,13 @@
import React from 'react';
import { Link } from 'react-router-dom';
-
import { t, Trans } from '@lingui/macro';
-import { Button, Label } from '@patternfly/react-core';
+import styled from 'styled-components';
+import {
+ Button,
+ HelperText as PFHelperText,
+ HelperTextItem,
+ Label,
+} from '@patternfly/react-core';
import {
CaretLeftIcon,
CheckIcon,
@@ -14,6 +19,10 @@ import { DetailList, Detail } from 'components/DetailList';
import { useConfig } from 'contexts/Config';
import { formatDateString, secondsToDays } from 'util/dates';
+const HelperText = styled(PFHelperText)`
+ margin-top: 10px;
+`;
+
function SubscriptionDetail() {
const { me = {}, license_info, version } = useConfig();
const baseURL = '/settings/subscription';
@@ -52,25 +61,71 @@ function SubscriptionDetail() {
label={t`Status`}
value={
license_info.compliant ? (
- }>
- {t`Compliant`}
-
+ <>
+ }>
+ {t`Compliant`}
+
+
+ {t`The number of hosts you have automated against is below your subscription count.`}
+
+ >
) : (
- }
- >
- {t`Out of compliance`}
-
+ <>
+ }
+ >
+ {t`Out of compliance`}
+
+
+ {t`You have automated against more hosts than your subscription allows.`}
+
+ >
)
}
/>
+ {typeof automatedInstancesCount !== 'undefined' &&
+ automatedInstancesCount !== null && (
+
+ {automatedInstancesCount} since{' '}
+ {automatedInstancesSinceDateTime}
+
+ ) : (
+ automatedInstancesCount
+ )
+ }
+ />
+ )}
+
+ {license_info.instance_count < 9999999 && (
+
+ )}
+ {license_info.instance_count >= 9999999 && (
+
+ )}
- {license_info.instance_count < 9999999 && (
-
- )}
- {license_info.instance_count >= 9999999 && (
-
- )}
-
- {typeof automatedInstancesCount !== 'undefined' &&
- automatedInstancesCount !== null && (
-
- {automatedInstancesCount} since{' '}
- {automatedInstancesSinceDateTime}
-
- ) : (
- automatedInstancesCount
- )
- }
- />
- )}
diff --git a/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.test.js b/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.test.js
index 63ba2378b738..d7fbeb6e08bb 100644
--- a/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.test.js
+++ b/awx/ui/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.test.js
@@ -53,8 +53,14 @@ describe('', () => {
expect(wrapper.find(`Detail[label="${label}"] dt`).text()).toBe(label);
expect(wrapper.find(`Detail[label="${label}"] dd`).text()).toBe(value);
}
- assertDetail('Status', 'Compliant');
- assertDetail('Version', '1.2.3');
+ expect(wrapper.find(`Detail[label="Status"] dt`).text()).toBe('Status');
+ expect(wrapper.find(`Detail[label="Status"] dd`).text()).toContain(
+ 'Compliant'
+ );
+ expect(wrapper.find(`Detail[label="Status"] dd`).text()).toContain(
+ 'The number of hosts you have automated against is below your subscription count.'
+ );
+ assertDetail('Automation controller version', '1.2.3');
assertDetail('Subscription type', 'enterprise');
assertDetail(
'Subscription',