From d8b4a9825edea6b851cb5148524302b1247020dd Mon Sep 17 00:00:00 2001
From: David O Neill <dmz.oneill@gmail.com>
Date: Wed, 10 Jan 2024 13:06:16 +0000
Subject: [PATCH] Cleanup

- Remove peer selection on add and edit instance
- Added conconcial name and order comlums names same on endpoints and
  peers
- Other cleanup items
- rename name to instance name
---
 .../InstanceEndPointList.js                   | 52 ++++++++++---------
 .../InstanceEndPointListItem.js               | 20 +++----
 .../InstancePeers/InstancePeerList.js         | 13 +++--
 .../InstancePeers/InstancePeerListItem.js     | 38 ++++----------
 .../screens/Instances/Shared/InstanceForm.js  | 29 +----------
 5 files changed, 59 insertions(+), 93 deletions(-)

diff --git a/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointList.js b/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointList.js
index e3d1131941..c90fa1a737 100644
--- a/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointList.js
+++ b/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointList.js
@@ -5,7 +5,7 @@ import PaginatedTable, {
   getSearchableKeys,
   HeaderCell,
   HeaderRow,
-  ToolbarAddButton,
+  // ToolbarAddButton,
 } from 'components/PaginatedTable';
 import AddEndpointModal from 'components/AddEndpointModal';
 import useToast from 'hooks/useToast';
@@ -51,8 +51,11 @@ function InstanceEndPointList({ setBreadcrumb }) {
 
       for(let q = 0; q < results.length; q++) {
         const receptor = results[q];
+        if(receptor.managed === true) continue;
         if(id.toString() === receptor.instance.toString()) {
+          receptor.name = detail.hostname;
           endpoint_list.push(receptor);
+          console.log(receptor)
         }
       }
 
@@ -90,13 +93,13 @@ function InstanceEndPointList({ setBreadcrumb }) {
   const { selected, isAllSelected, handleSelect, clearSelected, selectAll } =
     useSelected(endpoints);
 
-  const handleEndpointDelete = async () => {
-    // console.log(selected)
-    // InstancesAPI.updateReceptorAddresses(instance.id, values);
-  }
+  // const handleEndpointDelete = async () => {
+  //   // console.log(selected)
+  //   // InstancesAPI.updateReceptorAddresses(instance.id, values);
+  // }
 
-  const isHopNode = instance.node_type === 'hop';
-  const isExecutionNode = instance.node_type === 'execution';
+  // const isHopNode = instance.node_type === 'hop';
+  // const isExecutionNode = instance.node_type === 'execution';
 
   return (
     <CardBody>
@@ -130,6 +133,7 @@ function InstanceEndPointList({ setBreadcrumb }) {
           <HeaderRow qsConfig={QS_CONFIG} isExpandable>
             <HeaderCell sortKey="address">{t`Address`}</HeaderCell>
             <HeaderCell sortKey="port">{t`Port`}</HeaderCell>
+            <HeaderCell sortKey="canonical">{t`Canonical`}</HeaderCell>
           </HeaderRow>
         }
         renderToolbar={(props) => (
@@ -141,22 +145,22 @@ function InstanceEndPointList({ setBreadcrumb }) {
             onExpandAll={expandAll}
             qsConfig={QS_CONFIG}
             additionalControls={[
-              (isExecutionNode || isHopNode) && (
-                <ToolbarAddButton
-                  ouiaId="add-endpoint-button"
-                  key="add-endpoint"
-                  defaultLabel={t`Add`}
-                  onClick={() => setisAddEndpointModalOpen(true)}
-                />
-              ),
-              (isExecutionNode || isHopNode) && (
-                <ToolbarAddButton
-                  ouiaId="delete-endpoint-button"
-                  key="delete-endpoint"
-                  defaultLabel={t`Delete`}
-                  onClick={() => handleEndpointDelete()}
-                />
-              ),
+              // (isExecutionNode || isHopNode) && (
+              //   <ToolbarAddButton
+              //     ouiaId="add-endpoint-button"
+              //     key="add-endpoint"
+              //     defaultLabel={t`Add`}
+              //     onClick={() => setisAddEndpointModalOpen(true)}
+              //   />
+              // ),
+              // (isExecutionNode || isHopNode) && (
+              //   <ToolbarAddButton
+              //     ouiaId="delete-endpoint-button"
+              //     key="delete-endpoint"
+              //     defaultLabel={t`Delete`}
+              //     onClick={() => handleEndpointDelete()}
+              //   />
+              // ),
             ]}
           />
         )}
@@ -167,7 +171,7 @@ function InstanceEndPointList({ setBreadcrumb }) {
             isExpanded={expanded.some((row) => row.id === endpoint.id)}
             onExpand={() => handleExpand(endpoint)}
             key={endpoint.id}
-            peerInstance={endpoint}
+            peerEndpoint={endpoint}
             rowIndex={index}
           />
         )}
diff --git a/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointListItem.js b/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointListItem.js
index 2a1fd5dddb..cdb0efa5db 100644
--- a/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointListItem.js
+++ b/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointListItem.js
@@ -5,18 +5,18 @@ import 'styled-components/macro';
 import { Tr, Td } from '@patternfly/react-table';
 
 function InstanceEndPointListItem({
-  peerInstance,
+  peerEndpoint,
   isSelected,
   onSelect,
   isExpanded,
   onExpand,
   rowIndex,
 }) {
-  const labelId = `check-action-${peerInstance.id}`;
+  const labelId = `check-action-${peerEndpoint.id}`;
   return (
     <Tr
-      id={`peerInstance-row-${peerInstance.id}`}
-      ouiaId={`peerInstance-row-${peerInstance.id}`}
+      id={`peerEndpoint-row-${peerEndpoint.id}`}
+      ouiaId={`peerEndpoint-row-${peerEndpoint.id}`}
     >
       <Td
         expand={{
@@ -36,15 +36,15 @@ function InstanceEndPointListItem({
       />
 
       <Td id={labelId} dataLabel={t`Address`}>
-        <Link to={`/instances/${peerInstance.instance}/details`}>
-          <b>{peerInstance.address}</b>
-        </Link>
+          {peerEndpoint.address}
       </Td>
 
       <Td id={labelId} dataLabel={t`Port`}>
-        <Link to={`/instances/${peerInstance.instance}/details`}>
-          <b>{peerInstance.port}</b>
-        </Link>
+          {peerEndpoint.port}
+      </Td>
+
+      <Td id={labelId} dataLabel={t`Canonical`}>
+          {peerEndpoint.canonical.toString()}
       </Td>
 
     </Tr>
diff --git a/awx/ui/src/screens/Instances/InstancePeers/InstancePeerList.js b/awx/ui/src/screens/Instances/InstancePeers/InstancePeerList.js
index b56be6ba0d..0a7acad878 100644
--- a/awx/ui/src/screens/Instances/InstancePeers/InstancePeerList.js
+++ b/awx/ui/src/screens/Instances/InstancePeers/InstancePeerList.js
@@ -62,6 +62,7 @@ function InstancePeerList({ setBreadcrumb }) {
 
       for(let q = 0; q < results.length; q++) {
         const receptor = results[q];
+        if(receptor.managed === true) continue;
         const host = instances.data.results.filter((obj) => obj.id === receptor.instance)[0];
         const copy = receptor;
         copy.hostname = host.hostname;
@@ -150,6 +151,7 @@ function InstancePeerList({ setBreadcrumb }) {
         const copy = receptor;
         copy.hostname = host.hostname;
         copy.node_type = host.node_type;
+        copy.canonical = copy.canonical.toString()
         address_list.push(copy);
       }
 
@@ -250,14 +252,14 @@ function InstancePeerList({ setBreadcrumb }) {
         ]}
         headerRow={
           <HeaderRow qsConfig={QS_CONFIG} isExpandable>
-            <HeaderCell sortKey="address">{t`Address`}</HeaderCell>
-            <HeaderCell sortKey="port">{t`Port`}</HeaderCell>
             <HeaderCell
               tooltip={t`Cannot run health check on hop nodes.`}
               sortKey="hostname"
-            >{t`Name`}</HeaderCell>
-            <HeaderCell sortKey="errors">{t`Status`}</HeaderCell>
+            >{t`Instance Name`}</HeaderCell>
+            <HeaderCell sortKey="address">{t`Address`}</HeaderCell>
+            <HeaderCell sortKey="port">{t`Port`}</HeaderCell>
             <HeaderCell sortKey="node_type">{t`Node Type`}</HeaderCell>
+            <HeaderCell sortKey="canonical">{t`Canonical`}</HeaderCell>
           </HeaderRow>
         }
         renderToolbar={(props) => (
@@ -312,10 +314,11 @@ function InstancePeerList({ setBreadcrumb }) {
           optionsRequest={readInstancesOptions}
           displayKey="hostname"
           columns={[
+            { key: 'hostname', name: t`Name` },
             { key: 'address', name: t`Address` },
             { key: 'port', name: t`Port` },
-            { key: 'hostname', name: t`Name` },
             { key: 'node_type', name: t`Node Type` },
+            { key: 'canonical', name: t`Canonical` },
           ]}
         />
       )}
diff --git a/awx/ui/src/screens/Instances/InstancePeers/InstancePeerListItem.js b/awx/ui/src/screens/Instances/InstancePeers/InstancePeerListItem.js
index 796f20572a..a40109aa6b 100644
--- a/awx/ui/src/screens/Instances/InstancePeers/InstancePeerListItem.js
+++ b/awx/ui/src/screens/Instances/InstancePeers/InstancePeerListItem.js
@@ -2,10 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { t } from '@lingui/macro';
 import 'styled-components/macro';
-import { Tooltip } from '@patternfly/react-core';
 import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { formatDateString } from 'util/dates';
-import StatusLabel from 'components/StatusLabel';
 import { Detail, DetailList } from 'components/DetailList';
 
 function InstancePeerListItem({
@@ -43,17 +41,6 @@ function InstancePeerListItem({
           }}
           dataLabel={t`Selected`}
         />
-        <Td id={labelId} dataLabel={t`Address`}>
-          <Link to={`/instances/${peerInstance.instance}/details`}>
-            <b>{peerInstance.address}</b>
-          </Link>
-        </Td>
-
-        <Td id={labelId} dataLabel={t`Port`}>
-          <Link to={`/instances/${peerInstance.instance}/details`}>
-            <b>{peerInstance.port}</b>
-          </Link>
-        </Td>
 
         <Td id={labelId} dataLabel={t`Name`}>
           <Link to={`/instances/${peerInstance.instance}/details`}>
@@ -61,23 +48,20 @@ function InstancePeerListItem({
           </Link>
         </Td>
 
-        <Td dataLabel={t`Status`}>
-          <Tooltip
-            content={
-              <div>
-                {t`Last Health Check`}
-                &nbsp;
-                {formatDateString(
-                  peerInstance.last_health_check ?? peerInstance.last_seen
-                )}
-              </div>
-            }
-          >
-            <StatusLabel status={peerInstance.node_state} />
-          </Tooltip>
+        <Td id={labelId} dataLabel={t`Address`}>
+          {peerInstance.address}
+        </Td>
+
+        <Td id={labelId} dataLabel={t`Port`}>
+          {peerInstance.port}
         </Td>
 
         <Td dataLabel={t`Node Type`}>{peerInstance.node_type}</Td>
+
+        <Td id={labelId} dataLabel={t`Canonical`}>
+          {peerInstance.canonical.toString()}
+        </Td>
+
       </Tr>
       {!isHopNode && (
         <Tr
diff --git a/awx/ui/src/screens/Instances/Shared/InstanceForm.js b/awx/ui/src/screens/Instances/Shared/InstanceForm.js
index 5e1d988806..6634295302 100644
--- a/awx/ui/src/screens/Instances/Shared/InstanceForm.js
+++ b/awx/ui/src/screens/Instances/Shared/InstanceForm.js
@@ -1,6 +1,6 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { t } from '@lingui/macro';
-import { Formik, useField, useFormikContext } from 'formik';
+import { Formik, useField } from 'formik';
 import { Form, FormGroup, CardBody } from '@patternfly/react-core';
 import { FormColumnLayout } from 'components/FormLayout';
 import FormField, {
@@ -9,7 +9,6 @@ import FormField, {
 } from 'components/FormField';
 import FormActionGroup from 'components/FormActionGroup';
 import AnsibleSelect from 'components/AnsibleSelect';
-import { PeersLookup } from 'components/Lookup';
 import { required } from 'util/validators';
 
 const INSTANCE_TYPES = [
@@ -23,16 +22,6 @@ function InstanceFormFields({ isEdit }) {
     validate: required(t`Set a value for this field`),
   });
 
-  const { setFieldValue } = useFormikContext();
-
-  const [peersField, peersMeta, peersHelpers] = useField('peers');
-
-  const handlePeersUpdate = useCallback(
-    (value) => {
-      setFieldValue('peers', value);
-    },
-    [setFieldValue]
-  );
   return (
     <>
       <FormField
@@ -91,20 +80,6 @@ function InstanceFormFields({ isEdit }) {
           isDisabled={isEdit}
         />
       </FormGroup>
-      <PeersLookup
-        helperTextInvalid={peersMeta.error}
-        isValid={!peersMeta.touched || !peersMeta.error}
-        onBlur={() => peersHelpers.setTouched()}
-        onChange={handlePeersUpdate}
-        value={peersField.value}
-        tooltip={t`Select the Peers Instances.`}
-        fieldName="peers"
-        formLabel={t`Peers`}
-        multiple
-        typePeers
-        id="peers"
-        isRequired
-      />
       <FormGroup fieldId="instance-option-checkboxes" label={t`Options`}>
         <CheckboxField
           id="enabled"