Adjust subscription calculation & warning behavior

- Add a field for hosts automated across

  This is populated by the new table we've added.
- Update the subs check to check against this, not imported hosts.
- Reword messages on inventory import

awx/ui_next/src/components/DetailList/NumberSinceDetail.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { node, string } from 'prop-types';
+import { t } from '@lingui/macro';
+import styled from 'styled-components';
+import { formatDateString } from '../../util/dates';
+import _Detail from './Detail';
+
+const Detail = styled(_Detail)`
+  word-break: break-word;
+`;
+
+function NumberSinceDetail({ label, number, date, dataCy = null }) {
+  const dateStr = formatDateString(date);
+
+  return (
+    <Detail
+      label={label}
+      dataCy={dataCy}
+      value={t`${number} since ${dateStr}`}
+    />
+  );
+}
+NumberSinceDetail.propTypes = {
+  label: node.isRequired,
+  number: string.isRequired,
+  date: string.isRequired,
+};
+
+export default NumberSinceDetail;

awx/ui_next/src/components/DetailList/index.js

@@ -5,6 +5,7 @@ export { default as UserDateDetail } from './UserDateDetail';
 export { default as DetailBadge } from './DetailBadge';
 export { default as ArrayDetail } from './ArrayDetail';
 export { default as LaunchedByDetail } from './LaunchedByDetail';
+export { default as NumberSinceDetail } from './NumberSinceDetail';
 /*
   NOTE: CodeDetail cannot be imported here, as it causes circular
   dependencies in testing environment. Import it directly from

awx/ui_next/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.jsx

@@ -10,7 +10,11 @@ import {
 } from '@patternfly/react-icons';
 import RoutedTabs from '../../../../components/RoutedTabs';
 import { CardBody, CardActionsRow } from '../../../../components/Card';
-import { DetailList, Detail } from '../../../../components/DetailList';
+import {
+  DetailList,
+  Detail,
+  NumberSinceDetail,
+} from '../../../../components/DetailList';
 import { useConfig } from '../../../../contexts/Config';
 import {
   formatDateString,
@@ -126,10 +130,21 @@ function SubscriptionDetail() {
             />
           )}
           <Detail
-            dataCy="subscription-hosts-used"
-            label={t`Hosts used`}
+            dataCy="subscription-hosts-imported"
+            label={t`Hosts imported`}
             value={license_info.current_instances}
           />
+          <NumberSinceDetail
+            dataCy="subscription-hosts-automated"
+            label={t`Hosts automated`}
+            number={license_info.automated_instances}
+            date={
+              license_info.automated_since &&
+              formatDateString(
+                new Date(license_info.automated_since * 1000).toISOString()
+              )
+            }
+          />
           <Detail
             dataCy="subscription-hosts-remaining"
             label={t`Hosts remaining`}

awx/ui_next/src/screens/Setting/Subscription/SubscriptionDetail/SubscriptionDetail.test.jsx

@@ -14,6 +14,8 @@ const config = {
     date_expired: false,
     date_warning: true,
     free_instances: 1000,
+    automated_instances: '12',
+    automated_since: '1614714228',
     grace_period_remaining: 2904229,
     instance_count: 1001,
     license_date: '1614401999',
@@ -65,8 +67,9 @@ describe('<SubscriptionDetail />', () => {
     assertDetail('Trial', 'False');
     assertDetail('Expires on', '2/27/2021, 4:59:59 AM');
     assertDetail('Days remaining', '3');
-    assertDetail('Hosts used', '1');
+    assertDetail('Hosts imported', '1');
     assertDetail('Hosts remaining', '1000');
+    assertDetail('Hosts automated', '12 since 3/2/2021, 7:43:48 PM');
 
     expect(wrapper.find('Button[aria-label="edit"]').length).toBe(1);
   });