Prettier

awx/ui/src/components/DataListToolbar/DataListToolbar.js

@@ -88,8 +88,8 @@ function DataListToolbar({
     [setIsKebabModalOpen]
   );
   const columns = [...searchColumns];
-  if ( !advancedSearchDisabled ) {
+  if (!advancedSearchDisabled) {
-      columns.push({ name: t`Advanced`, key: 'advanced' });
+    columns.push({ name: t`Advanced`, key: 'advanced' });
   }
   return (
     <Toolbar
@@ -226,7 +226,7 @@ DataListToolbar.propTypes = {
   additionalControls: PropTypes.arrayOf(PropTypes.node),
   enableNegativeFiltering: PropTypes.bool,
   enableRelatedFuzzyFiltering: PropTypes.bool,
-  advancedSearchDisabled : PropTypes.bool,
+  advancedSearchDisabled: PropTypes.bool,
 };
 
 DataListToolbar.defaultProps = {

awx/ui/src/routeConfig.js

@@ -56,11 +56,11 @@ function getRouteConfig(userProfile = {}) {
           path: '/workflow_approvals',
           screen: WorkflowApprovals,
         },
-  {
+        {
-    title: <Trans>Host Metrics</Trans>,
+          title: <Trans>Host Metrics</Trans>,
-    path: '/host_metrics',
+          path: '/host_metrics',
-        screen: HostMetrics,
+          screen: HostMetrics,
-  },
+        },
       ],
     },
     {

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

@@ -1,5 +1,5 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
-import {t} from "@lingui/macro";
+import { t } from '@lingui/macro';
 import ScreenHeader from 'components/ScreenHeader/ScreenHeader';
 import { HostMetricsAPI } from 'api';
 import useRequest from 'hooks/useRequest';
@@ -9,17 +9,17 @@ import PaginatedTable, {
 } from 'components/PaginatedTable';
 import DataListToolbar from 'components/DataListToolbar';
 import { getQSConfig, parseQueryString } from 'util/qs';
-import {Card, PageSection} from "@patternfly/react-core";
+import { Card, PageSection } from '@patternfly/react-core';
 import { useLocation } from 'react-router-dom';
 import useSelected from 'hooks/useSelected';
-import HostMetricsListItem from "./HostMetricsListItem";
+import HostMetricsListItem from './HostMetricsListItem';
-import HostMetricsDeleteButton from "./HostMetricsDeleteButton";
+import HostMetricsDeleteButton from './HostMetricsDeleteButton';
 
 const QS_CONFIG = getQSConfig('host_metrics', {
-    page: 1,
+  page: 1,
-    page_size: 20,
+  page_size: 20,
-    order_by: 'hostname',
+  order_by: 'hostname',
-    deleted: false,
+  deleted: false,
 });
 
 function HostMetrics() {
@@ -34,15 +34,15 @@ function HostMetrics() {
     error,
     request: readHostMetrics,
   } = useRequest(
-      useCallback(async () => {
+    useCallback(async () => {
-        const params = parseQueryString(QS_CONFIG, location.search);
+      const params = parseQueryString(QS_CONFIG, location.search);
-        const list = await HostMetricsAPI.read(params);
+      const list = await HostMetricsAPI.read(params);
-        return {
+      return {
-          count: list.data.count,
+        count: list.data.count,
-          results: list.data.results
+        results: list.data.results,
-        };
+      };
-      }, [location]),
+    }, [location]),
-      { results: [], count: 0 }
+    { results: [], count: 0 }
   );
 
   useEffect(() => {
@@ -50,14 +50,11 @@ function HostMetrics() {
   }, [readHostMetrics]);
 
   const { selected, isAllSelected, handleSelect, selectAll, clearSelected } =
-      useSelected(results);
+    useSelected(results);
 
-  return(
+  return (
     <>
-      <ScreenHeader
+      <ScreenHeader streamType="none" breadcrumbConfig={breadcrumbConfig} />
-        streamType="none"
-        breadcrumbConfig={breadcrumbConfig}
-      />
       <PageSection>
         <Card>
           <PaginatedTable
@@ -66,19 +63,27 @@ function HostMetrics() {
             items={results}
             itemCount={count}
             pluralizedItemName={t`Host Metrics`}
-            renderRow={(item, index)=> (
+            renderRow={(item, index) => (
               <HostMetricsListItem
                 item={item}
-                isSelected={selected.some((row) => row.hostname === item.hostname)}
+                isSelected={selected.some(
+                  (row) => row.hostname === item.hostname
+                )}
                 onSelect={() => handleSelect(item)}
                 rowIndex={index}
               />
             )}
             qsConfig={QS_CONFIG}
-            toolbarSearchColumns={[{name: t`Hostname`, key: 'hostname__icontains', isDefault: true}]}
+            toolbarSearchColumns={[
+              {
+                name: t`Hostname`,
+                key: 'hostname__icontains',
+                isDefault: true,
+              },
+            ]}
             toolbarSearchableKeys={[]}
             toolbarRelatedSearchableKeys={[]}
-            renderToolbar={(props) =>
+            renderToolbar={(props) => (
               <DataListToolbar
                 {...props}
                 advancedSearchDisabled
@@ -89,46 +94,55 @@ function HostMetrics() {
                   <HostMetricsDeleteButton
                     key="delete"
                     onDelete={() =>
-                      Promise.all(selected.map((hostMetric) =>
+                      Promise.all(
-                        HostMetricsAPI.destroy(hostMetric.id)))
+                        selected.map((hostMetric) =>
-                          .then(() => { readHostMetrics(); clearSelected(); })
+                          HostMetricsAPI.destroy(hostMetric.id)
+                        )
+                      ).then(() => {
+                        readHostMetrics();
+                        clearSelected();
+                      })
                     }
-                itemsToDelete={selected}
+                    itemsToDelete={selected}
-                pluralizedItemName={t`Host Metrics`}
+                    pluralizedItemName={t`Host Metrics`}
-                />]}
+                  />,
-              />}
+                ]}
-              headerRow={
+              />
-                <HeaderRow qsConfig={QS_CONFIG}>
+            )}
-                  <HeaderCell
+            headerRow={
-                    sortKey="hostname">
+              <HeaderRow qsConfig={QS_CONFIG}>
-                      {t`Hostname`}
+                <HeaderCell sortKey="hostname">{t`Hostname`}</HeaderCell>
-                  </HeaderCell>
+                <HeaderCell
-                  <HeaderCell
+                  sortKey="first_automation"
-                    sortKey="first_automation"
+                  tooltip={t`When was the host first automated`}
-                    tooltip={t`When was the host first automated`}>
+                >
-                      {t`First automated`}
+                  {t`First automated`}
-                   </HeaderCell>
+                </HeaderCell>
-                  <HeaderCell
+                <HeaderCell
-                    sortKey="last_automation"
+                  sortKey="last_automation"
-                    tooltip={t`When was the host last automated`}>
+                  tooltip={t`When was the host last automated`}
-                      {t`Last automated`}
+                >
-                  </HeaderCell>
+                  {t`Last automated`}
-                  <HeaderCell
+                </HeaderCell>
-                    sortKey="automated_counter"
+                <HeaderCell
-                    tooltip={t`How many times was the host automated`}>
+                  sortKey="automated_counter"
-                      {t`Automation`}
+                  tooltip={t`How many times was the host automated`}
-                  </HeaderCell>
+                >
-                  <HeaderCell
+                  {t`Automation`}
-                    sortKey="used_in_inventories"
+                </HeaderCell>
-                    tooltip={t`How many inventories is the host in, recomputed on a weekly schedule`}>
+                <HeaderCell
-                      {t`Inventories`}
+                  sortKey="used_in_inventories"
-                  </HeaderCell>
+                  tooltip={t`How many inventories is the host in, recomputed on a weekly schedule`}
-                  <HeaderCell
+                >
-                    sortKey="deleted_counter"
+                  {t`Inventories`}
-                    tooltip={t`How many times was the host deleted`}>
+                </HeaderCell>
-                      {t`Deleted`}
+                <HeaderCell
-                  </HeaderCell>
+                  sortKey="deleted_counter"
-                </HeaderRow>
+                  tooltip={t`How many times was the host deleted`}
+                >
+                  {t`Deleted`}
+                </HeaderCell>
+              </HeaderRow>
             }
           />
         </Card>

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

@@ -19,7 +19,7 @@ const mockHostMetrics = [
     used_in_inventories: 1,
     deleted_counter: 1,
     id: 1,
-  }
+  },
 ];
 
 function waitForLoaded(wrapper) {

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

@@ -1,18 +1,7 @@
 import React, { useState } from 'react';
-import {
+import { func, node, string, arrayOf, shape } from 'prop-types';
-  func,
-  node,
-  string,
-  arrayOf,
-  shape,
-} from 'prop-types';
 import styled from 'styled-components';
-import {
+import { Alert, Badge, Button, Tooltip } from '@patternfly/react-core';
-  Alert,
-  Badge,
-  Button,
-  Tooltip,
-} from '@patternfly/react-core';
 import { t } from '@lingui/macro';
 import { getRelatedResourceDeleteCounts } from 'util/getRelatedResourceDeleteDetails';
 import AlertModal from '../../components/AlertModal';
@@ -82,8 +71,7 @@ function HostMetricsDeleteButton({
 
   const modalTitle = t`Soft delete ${pluralizedItemName}?`;
 
-  const isDisabled =
+  const isDisabled = itemsToDelete.length === 0;
-    itemsToDelete.length === 0;
 
   const buildDeleteWarning = () => {
     const deleteMessages = [];
@@ -92,7 +80,7 @@ function HostMetricsDeleteButton({
     }
     if (deleteMessage) {
       if (itemsToDelete.length > 1 || deleteDetails) {
-          deleteMessages.push(deleteMessage);
+        deleteMessages.push(deleteMessage);
       }
     }
     return (
@@ -134,21 +122,21 @@ function HostMetricsDeleteButton({
 
   return (
     <>
-        <Tooltip content={renderTooltip()} position="top">
+      <Tooltip content={renderTooltip()} position="top">
-          <div>
+        <div>
-            <Button
+          <Button
-              variant="secondary"
+            variant="secondary"
-              isLoading={isLoading}
+            isLoading={isLoading}
-              ouiaId="delete-button"
+            ouiaId="delete-button"
-              spinnerAriaValueText={isLoading ? 'Loading' : undefined}
+            spinnerAriaValueText={isLoading ? 'Loading' : undefined}
-              aria-label={t`Delete`}
+            aria-label={t`Delete`}
-              onClick={() => toggleModal(true)}
+            onClick={() => toggleModal(true)}
-              isDisabled={isDisabled}
+            isDisabled={isDisabled}
-            >
+          >
-              {t`Delete`}
+            {t`Delete`}
-            </Button>
+          </Button>
-          </div>
+        </div>
-        </Tooltip>
+      </Tooltip>
       {isModalOpen && (
         <AlertModal
           variant="danger"
@@ -181,7 +169,10 @@ function HostMetricsDeleteButton({
         >
           <div>{t`This action will soft delete the following:`}</div>
           {itemsToDelete.map((item) => (
-            <span key={item.hostname} id={`item-to-be-deleted-${item.hostname}`}>
+            <span
+              key={item.hostname}
+              id={`item-to-be-deleted-${item.hostname}`}
+            >
               <strong>{item.hostname}</strong>
               <br />
             </span>

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

@@ -3,28 +3,34 @@ 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";
+import { t } from '@lingui/macro';
-import {bool, func} from "prop-types";
+import { bool, func } from 'prop-types';
 
 function HostMetricsListItem({ item, isSelected, onSelect, rowIndex }) {
-
   return (
-      <Tr id={`host_metrics-row-${item.hostname}`} ouiaId={`host-metrics-row-${item.hostname}`}>
+    <Tr
-      <Td select={{ rowIndex, isSelected, onSelect}} dataLabel={t`Selected`} />
+      id={`host_metrics-row-${item.hostname}`}
+      ouiaId={`host-metrics-row-${item.hostname}`}
+    >
+      <Td select={{ rowIndex, isSelected, onSelect }} dataLabel={t`Selected`} />
       <Td dataLabel={t`Hostname`}>{item.hostname}</Td>
-      <Td dataLabel={t`First automation`}>{formatDateString(item.first_automation)}</Td>
+      <Td dataLabel={t`First automation`}>
-      <Td dataLabel={t`Last automation`}>{formatDateString(item.last_automation)}</Td>
+        {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><
+      <Td dataLabel={t`Deleted`}>{item.deleted_counter}</Td>
-    /Tr>
+    </Tr>
   );
 }
 
 HostMetricsListItem.propTypes = {
-    item: HostMetrics.isRequired,
+  item: HostMetrics.isRequired,
-    isSelected: bool.isRequired,
+  isSelected: bool.isRequired,
-    onSelect: func.isRequired,
+  onSelect: func.isRequired,
 };
 
 export default HostMetricsListItem;