UI

awx/ui/src/api/index.js

@@ -44,6 +44,7 @@ import WorkflowApprovalTemplates from './models/WorkflowApprovalTemplates';
 import WorkflowJobTemplateNodes from './models/WorkflowJobTemplateNodes';
 import WorkflowJobTemplates from './models/WorkflowJobTemplates';
 import WorkflowJobs from './models/WorkflowJobs';
+import HostMetrics from './models/HostMetrics';
 
 const ActivityStreamAPI = new ActivityStream();
 const AdHocCommandsAPI = new AdHocCommands();
@@ -91,6 +92,7 @@ const WorkflowApprovalTemplatesAPI = new WorkflowApprovalTemplates();
 const WorkflowJobTemplateNodesAPI = new WorkflowJobTemplateNodes();
 const WorkflowJobTemplatesAPI = new WorkflowJobTemplates();
 const WorkflowJobsAPI = new WorkflowJobs();
+const HostMetricsAPI = new HostMetrics();
 
 export {
   ActivityStreamAPI,
@@ -139,4 +141,5 @@ export {
   WorkflowJobTemplateNodesAPI,
   WorkflowJobTemplatesAPI,
   WorkflowJobsAPI,
+  HostMetricsAPI,
 };

awx/ui/src/api/models/HostMetrics.js

@@ -0,0 +1,10 @@
+import Base from '../Base';
+
+class HostMetrics extends Base {
+  constructor(http) {
+    super(http);
+    this.baseUrl = 'api/v2/host_metrics/';
+  }
+}
+
+export default HostMetrics;

awx/ui/src/routeConfig.js

@@ -23,6 +23,7 @@ import TopologyView from 'screens/TopologyView';
 import Users from 'screens/User';
 import WorkflowApprovals from 'screens/WorkflowApproval';
 import { Jobs } from 'screens/Job';
+import HostMetrics from 'screens/HostMetrics';
 
 function getRouteConfig(userProfile = {}) {
   let routeConfig = [
@@ -55,6 +56,11 @@ function getRouteConfig(userProfile = {}) {
           path: '/workflow_approvals',
           screen: WorkflowApprovals,
         },
+  {
+    title: <Trans>Host Metrics</Trans>,
+    path: '/host_metrics',
+        screen: HostMetrics,
+  },
       ],
     },
     {

awx/ui/src/screens/HostMetrics/HostMetrics.js

@@ -0,0 +1,86 @@
+import React, {useCallback, useEffect, useState} from 'react';
+import {t} from "@lingui/macro";
+import ScreenHeader from 'components/ScreenHeader/ScreenHeader';
+import { HostMetricsAPI } from 'api';
+import useRequest from 'hooks/useRequest';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell
+} from 'components/PaginatedTable';
+import DataListToolbar from 'components/DataListToolbar';
+import { getQSConfig, parseQueryString } from 'util/qs';
+import {Card, PageSection} from "@patternfly/react-core";
+import { useLocation } from 'react-router-dom';
+import HostMetricsListItem from "./HostMetricsListItem";
+
+function HostMetrics() {
+
+  const location = useLocation();
+
+  const [breadcrumbConfig] = useState({
+    '/host_metrics': t`Host Metrics`,
+  });
+  const QS_CONFIG = getQSConfig('host_metrics', {
+    page: 1,
+    page_size: 20,
+    order_by: 'hostname',
+  });
+  const {
+    result: { count, results },
+    isLoading,
+    error,
+    request: readHostMetrics,
+  } = useRequest(
+      useCallback(async () => {
+        const params = parseQueryString(QS_CONFIG, location.search);
+        const list = await HostMetricsAPI.read(params);
+        return {
+          count: list.data.count,
+          results: list.data.results
+        };
+      }, [location.search]),
+      { results: [], count: 0 }
+  );
+
+  useEffect(() => {
+    readHostMetrics();
+  }, [readHostMetrics]);
+
+  return(
+      <>
+      <ScreenHeader
+  streamType="none"
+  breadcrumbConfig={breadcrumbConfig}
+  />
+  <PageSection>
+  <Card>
+  <PaginatedTable
+  contentError={error}
+  hasContentLoading={isLoading}
+  items={results}
+  itemCount={count}
+  pluralizedItemName={t`Host Metrics`}
+  renderRow={(item)=> (<HostMetricsListItem item={item} />)}
+  qsConfig={QS_CONFIG}
+  toolbarSearchColumns={[{name: t`Hostname`, key: 'hostname', isDefault: true}]}
+  toolbarSearchableKeys={[]}
+  toolbarRelatedSearchableKeys={[]}
+  renderToolbar={(props) => <DataListToolbar {...props} fillWidth />}
+  headerRow={
+      <HeaderRow qsConfig={QS_CONFIG}>
+      <HeaderCell sortKey="hostname">{t`Hostname`}</HeaderCell>
+      <HeaderCell sortKey="first_automation" tooltip={t`When was the host first automated`}>{t`First automated`}</HeaderCell>
+      <HeaderCell sortKey="last_automation" tooltip={t`When was the host last automated`}>{t`Last automated`}</HeaderCell>
+      <HeaderCell sortKey="automated_counter" tooltip={t`How many times was the host automated`}>{t`Automation`}</HeaderCell>
+      <HeaderCell sortKey="used_in_inventories" tooltip={t`How many inventories is the host in, recomputed on a weekly schedule`}>{t`Inventories`}</HeaderCell>
+      <HeaderCell sortKey="deleted_counter" tooltip={t`How many times was the host deleted`}>{t`Deleted`}</HeaderCell>
+      </HeaderRow>
+}
+  />
+ </Card>
+ </PageSection>
+  </>
+  );
+}
+
+export default HostMetrics;

awx/ui/src/screens/HostMetrics/HostMetricsListItem.js

@@ -0,0 +1,27 @@
+import 'styled-components/macro';
+import React from 'react';
+import { Tr, Td } from '@patternfly/react-table';
+import { formatDateString } from 'util/dates';
+import { HostMetrics } from 'types';
+import {t} from "@lingui/macro";
+
+function HostMetricsListItem({ item }) {
+
+  return (
+      <Tr id={`host_metrics-row-${item.hostname}`} ouiaId={`host-metrics-row-${item.hostname}`}>
+      <Td />
+      <Td dataLabel={t`Hostname`}>{item.hostname}</Td>
+      <Td dataLabel={t`First automation`}>{formatDateString(item.first_automation)}</Td>
+      <Td dataLabel={t`Last automation`}>{formatDateString(item.last_automation)}</Td>
+      <Td dataLabel={t`Automation`}>{item.automated_counter}</Td>
+      <Td dataLabel={t`Inventories`}>{item.used_in_inventories || 0}</Td>
+      <Td dataLabel={t`Deleted`}>{item.deleted_counter}</Td><
+    /Tr>
+  );
+}
+
+HostMetricsListItem.propTypes = {
+    item: HostMetrics.isRequired,
+};
+
+export default HostMetricsListItem;

awx/ui/src/screens/HostMetrics/index.js

@@ -0,0 +1 @@
+export { default } from './HostMetrics';

awx/ui/src/types.js

@@ -439,3 +439,12 @@ export const Toast = shape({
   hasTimeout: bool,
   message: string,
 });
+
+export const HostMetrics = shape({
+  hostname: string.isRequired,
+  first_automation: string.isRequired,
+  last_automation: string.isRequired,
+  automated_counter: number.isRequired,
+  used_in_inventories: number,
+  deleted_counter: number,
+});