Link out to docs; use some in place of forEach when looping through results.

awx/ui/src/screens/InstanceGroup/InstanceDetails/InstanceDetails.js

@@ -23,6 +23,7 @@ import ErrorDetail from 'components/ErrorDetail';
 import DisassociateButton from 'components/DisassociateButton';
 import InstanceToggle from 'components/InstanceToggle';
 import { CardBody, CardActionsRow } from 'components/Card';
+import getDocsBaseUrl from 'util/getDocsBaseUrl';
 import { formatDateString } from 'util/dates';
 import RoutedTabs from 'components/RoutedTabs';
 import ContentError from 'components/ContentError';
@@ -62,7 +63,7 @@ function computeForks(memCapacity, cpuCapacity, selectedCapacityAdjustment) {
 }
 
 function InstanceDetails({ setBreadcrumb, instanceGroup }) {
-  const { me = {} } = useConfig();
+  const config = useConfig();
   const { id, instanceId } = useParams();
   const history = useHistory();
 
@@ -226,7 +227,21 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
           <Detail label={t`Total Jobs`} value={instance.jobs_total} />
           <Detail
             label={t`Last Health Check`}
-            helpText={t`Health checks are asynchronous tasks. See the docs for more details.`}
+            helpText={
+              <>
+                {t`Health checks are asynchronous tasks. See the`}{' '}
+                <a
+                  href={`${getDocsBaseUrl(
+                    config
+                  )}/html/administration/instances.html#health-check`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t`documentation`}
+                </a>{' '}
+                {t`for more info.`}
+              </>
+            }
             value={formatHealthCheckTimeStamp(instance.last_health_check)}
           />
           <Detail label={t`Node Type`} value={instance.node_type} />
@@ -246,7 +261,7 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
                     step={0.1}
                     value={instance.capacity_adjustment}
                     onChange={handleChangeValue}
-                    isDisabled={!me?.is_superuser || !instance.enabled}
+                    isDisabled={!config?.me?.is_superuser || !instance.enabled}
                     data-cy="slider"
                   />
                 </SliderForks>
@@ -286,7 +301,9 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
           {isExecutionNode && (
             <Tooltip content={t`Run a health check on the instance`}>
               <Button
-                isDisabled={!me.is_superuser || instance.health_check_pending}
+                isDisabled={
+                  !config?.me?.is_superuser || instance.health_check_pending
+                }
                 variant="primary"
                 ouiaId="health-check-button"
                 onClick={fetchHealthCheck}
@@ -299,7 +316,7 @@ function InstanceDetails({ setBreadcrumb, instanceGroup }) {
               </Button>
             </Tooltip>
           )}
-          {me.is_superuser && instance.node_type !== 'control' && (
+          {config?.me?.is_superuser && instance.node_type !== 'control' && (
             <DisassociateButton
               verifyCannotDisassociate={instanceGroup.name === 'controlplane'}
               key="disassociate"

awx/ui/src/screens/InstanceGroup/Instances/InstanceList.js

@@ -58,11 +58,9 @@ function InstanceList({ instanceGroup }) {
         InstanceGroupsAPI.readInstances(instanceGroupId, params),
         InstanceGroupsAPI.readInstanceOptions(instanceGroupId),
       ]);
-      response.data.results.forEach((i) => {
+      setPendingHealthCheck(
-        if (i.health_check_pending === true) {
+        response?.data?.result?.some((i) => i.health_check_pending === true)
-          setPendingHealthCheck(true);
+      );
-        }
-      });
 
       return {
         instances: response.data.results,

awx/ui/src/screens/InstanceGroup/Instances/InstanceListItem.js

@@ -13,6 +13,7 @@ import {
 } from '@patternfly/react-core';
 import { OutlinedClockIcon } from '@patternfly/react-icons';
 import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
+import getDocsBaseUrl from 'util/getDocsBaseUrl';
 import { formatDateString } from 'util/dates';
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
 import InstanceToggle from 'components/InstanceToggle';
@@ -53,7 +54,7 @@ function InstanceListItem({
   fetchInstances,
   rowIndex,
 }) {
-  const { me = {} } = useConfig();
+  const config = useConfig();
   const { id } = useParams();
   const [forks, setForks] = useState(
     computeForks(
@@ -167,7 +168,7 @@ function InstanceListItem({
                 step={0.1}
                 value={instance.capacity_adjustment}
                 onChange={handleChangeValue}
-                isDisabled={!me?.is_superuser || !instance.enabled}
+                isDisabled={!config?.me?.is_superuser || !instance.enabled}
                 data-cy="slider"
               />
             </SliderForks>
@@ -219,7 +220,21 @@ function InstanceListItem({
               <Detail
                 data-cy="last-health-check"
                 label={t`Last Health Check`}
-                helpText={t`Health checks are asynchronous tasks. See the docs for more details.`}
+                helpText={
+                  <>
+                    {t`Health checks are asynchronous tasks. See the`}{' '}
+                    <a
+                      href={`${getDocsBaseUrl(
+                        config
+                      )}/html/administration/instances.html#health-check`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t`documentation`}
+                    </a>{' '}
+                    {t`for more info.`}
+                  </>
+                }
                 value={formatHealthCheckTimeStamp(instance.last_health_check)}
               />
             </DetailList>

awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js

@@ -23,6 +23,7 @@ import AlertModal from 'components/AlertModal';
 import ErrorDetail from 'components/ErrorDetail';
 import InstanceToggle from 'components/InstanceToggle';
 import { CardBody, CardActionsRow } from 'components/Card';
+import getDocsBaseUrl from 'util/getDocsBaseUrl';
 import { formatDateString } from 'util/dates';
 import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
@@ -62,7 +63,8 @@ function computeForks(memCapacity, cpuCapacity, selectedCapacityAdjustment) {
 }
 
 function InstanceDetail({ setBreadcrumb, isK8s }) {
-  const { me = {} } = useConfig();
+  const config = useConfig();
+
   const { id } = useParams();
   const [forks, setForks] = useState();
   const history = useHistory();
@@ -85,7 +87,6 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
         InstancesAPI.readDetail(id),
         InstancesAPI.readInstanceGroup(id),
       ]);
-      // we probably don't need this extra call
       if (details.node_type === 'execution') {
         const { data: healthCheckData } =
           await InstancesAPI.readHealthCheckDetail(id);
@@ -249,7 +250,21 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
               <Detail
                 label={t`Last Health Check`}
                 dataCy="last-health-check"
-                helpText={t`Health checks are asynchronous tasks. See the docs for more details.`}
+                helpText={
+                  <>
+                    {t`Health checks are asynchronous tasks. See the`}{' '}
+                    <a
+                      href={`${getDocsBaseUrl(
+                        config
+                      )}/html/administration/instances.html#health-check`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t`documentation`}
+                    </a>{' '}
+                    {t`for more info.`}
+                  </>
+                }
                 value={formatHealthCheckTimeStamp(instance.last_health_check)}
               />
               {instance.related?.install_bundle && (
@@ -288,7 +303,9 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
                         step={0.1}
                         value={instance.capacity_adjustment}
                         onChange={handleChangeValue}
-                        isDisabled={!me?.is_superuser || !instance.enabled}
+                        isDisabled={
+                          !config?.me?.is_superuser || !instance.enabled
+                        }
                         data-cy="slider"
                       />
                     </SliderForks>
@@ -332,7 +349,7 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
         </DetailList>
         {!isHopNode && (
           <CardActionsRow>
-            {me.is_superuser && isK8s && instance.node_type === 'execution' && (
+            {config?.me?.is_superuser && isK8s && isExecutionNode && (
               <RemoveInstanceButton
                 dataCy="remove-instance-button"
                 itemsToRemove={[instance]}
@@ -343,7 +360,9 @@ function InstanceDetail({ setBreadcrumb, isK8s }) {
             {isExecutionNode && (
               <Tooltip content={t`Run a health check on the instance`}>
                 <Button
-                  isDisabled={!me.is_superuser || instance.health_check_pending}
+                  isDisabled={
+                    !config?.me?.is_superuser || instance.health_check_pending
+                  }
                   variant="primary"
                   ouiaId="health-check-button"
                   onClick={fetchHealthCheck}

awx/ui/src/screens/Instances/InstanceList/InstanceList.js

@@ -53,11 +53,9 @@ function InstanceList() {
         InstancesAPI.readOptions(),
         SettingsAPI.readCategory('system'),
       ]);
-      response.data.results.forEach((i) => {
+      setPendingHealthCheck(
-        if (i.health_check_pending === true) {
+        response?.data?.result?.some((i) => i.health_check_pending === true)
-          setPendingHealthCheck(true);
+      );
-        }
-      });
       return {
         instances: response.data.results,
         isK8s: sysSettings.data.IS_K8S,

awx/ui/src/screens/Instances/InstanceList/InstanceListItem.js

@@ -13,6 +13,7 @@ import {
 } from '@patternfly/react-core';
 import { OutlinedClockIcon } from '@patternfly/react-icons';
 import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
+import getDocsBaseUrl from 'util/getDocsBaseUrl';
 import { formatDateString } from 'util/dates';
 import computeForks from 'util/computeForks';
 import { ActionsTd, ActionItem } from 'components/PaginatedTable';
@@ -53,7 +54,7 @@ function InstanceListItem({
   fetchInstances,
   rowIndex,
 }) {
-  const { me = {} } = useConfig();
+  const config = useConfig();
   const [forks, setForks] = useState(
     computeForks(
       instance.mem_capacity,
@@ -179,7 +180,7 @@ function InstanceListItem({
                     step={0.1}
                     value={instance.capacity_adjustment}
                     onChange={handleChangeValue}
-                    isDisabled={!me?.is_superuser || !instance.enabled}
+                    isDisabled={!config?.me?.is_superuser || !instance.enabled}
                     data-cy="slider"
                   />
                 </SliderForks>
@@ -236,7 +237,21 @@ function InstanceListItem({
                 <Detail
                   data-cy="last-health-check"
                   label={t`Last Health Check`}
-                  helpText={t`Health checks are asynchronous tasks. See the docs for more details.`}
+                  helpText={
+                    <>
+                      {t`Health checks are asynchronous tasks. See the`}{' '}
+                      <a
+                        href={`${getDocsBaseUrl(
+                          config
+                        )}/html/administration/instances.html#health-check`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {t`documentation`}
+                      </a>{' '}
+                      {t`for more info.`}
+                    </>
+                  }
                   value={formatHealthCheckTimeStamp(instance.last_health_check)}
                 />
               </DetailList>