UI rename Endpoints to Listener Addresses

Listener Addresses is a better name to emphasize these are routable addresses to reach a listener service on the node. Also removed expand toggle on the listener addresses list items, as the expanded mode had no additional information. Signed-off-by: Seth Foster <[email protected]>
ansible · Feb 2, 2024 · 6dcaa09 · 6dcaa09
1 parent 21fd6af
commit 6dcaa09
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 56 deletions.
diff --git a/awx/ui/src/screens/Instances/Instance.js b/awx/ui/src/screens/Instances/Instance.js
@@ -12,7 +12,7 @@ import { SettingsAPI } from 'api';
 import ContentLoading from 'components/ContentLoading';
 import InstanceDetail from './InstanceDetail';
 import InstancePeerList from './InstancePeers';
-import InstanceEndPointList from './InstanceEndPointList';
+import InstanceListenerAddressList from './InstanceListenerAddressList';
 
 function Instance({ setBreadcrumb }) {
   const { me } = useConfig();
@@ -56,8 +56,8 @@ function Instance({ setBreadcrumb }) {
 
   if (isK8s) {
     tabsArray.push({
-      name: t`Endpoints`,
-      link: `${match.url}/endpoints`,
+      name: t`Listener Addresses`,
+      link: `${match.url}/listener_addresses`,
       id: 1,
     });
     tabsArray.push({ name: t`Peers`, link: `${match.url}/peers`, id: 2 });
@@ -79,8 +79,11 @@ function Instance({ setBreadcrumb }) {
             <InstanceDetail isK8s={isK8s} setBreadcrumb={setBreadcrumb} />
           </Route>
           {isK8s && (
-            <Route path="/instances/:id/endpoints" key="endpoints">
-              <InstanceEndPointList setBreadcrumb={setBreadcrumb} />
+            <Route
+              path="/instances/:id/listener_addresses"
+              key="listener_addresses"
+            >
+              <InstanceListenerAddressList setBreadcrumb={setBreadcrumb} />
             </Route>
           )}
           {isK8s && (

diff --git a/awx/ui/src/screens/Instances/InstanceEndPointList/index.js b/awx/ui/src/screens/Instances/InstanceEndPointList/index.js
diff --git a/...tanceEndPointList/InstanceEndPointList.js → ...ddressList/InstanceListenerAddressList.js b/...tanceEndPointList/InstanceEndPointList.js → ...ddressList/InstanceListenerAddressList.js
@@ -13,26 +13,25 @@ import { useParams } from 'react-router-dom';
 import useRequest from 'hooks/useRequest';
 import DataListToolbar from 'components/DataListToolbar';
 import { InstancesAPI, ReceptorAPI } from 'api';
-import useExpanded from 'hooks/useExpanded';
 import useSelected from 'hooks/useSelected';
-import InstanceEndPointListItem from './InstanceEndPointListItem';
+import InstanceListenerAddressListItem from './InstanceListenerAddressListItem';
 
 const QS_CONFIG = getQSConfig('peer', {
   page: 1,
   page_size: 20,
   order_by: 'pk',
 });
 
-function InstanceEndPointList({ setBreadcrumb }) {
+function InstanceListenerAddressList({ setBreadcrumb }) {
   const { id } = useParams();
   const { Toast, toastProps } = useToast();
   const {
     isLoading,
     error: contentError,
-    request: fetchEndpoints,
+    request: fetchListenerAddresses,
     result: {
       instance,
-      endpoints,
+      listenerAddresses,
       count,
       relatedSearchableKeys,
       searchableKeys,
@@ -51,21 +50,21 @@ function InstanceEndPointList({ setBreadcrumb }) {
         InstancesAPI.readOptions(),
       ]);
 
-      const endpoint_list = [];
+      const listenerAddress_list = [];
 
       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);
+          listenerAddress_list.push(receptor);
         }
       }
 
       return {
         instance: detail,
-        endpoints: endpoint_list,
-        count: endpoint_list.length,
+        listenerAddresses: listenerAddress_list,
+        count: listenerAddress_list.length,
         relatedSearchableKeys: (actions?.data?.related_search_fields || []).map(
           (val) => val.slice(0, -8)
         ),
@@ -74,36 +73,34 @@ function InstanceEndPointList({ setBreadcrumb }) {
     }, [id]),
     {
       instance: {},
-      endpoints: [],
+      listenerAddresses: [],
       count: 0,
       relatedSearchableKeys: [],
       searchableKeys: [],
     }
   );
 
   useEffect(() => {
-    fetchEndpoints();
-  }, [fetchEndpoints]);
+    fetchListenerAddresses();
+  }, [fetchListenerAddresses]);
 
   useEffect(() => {
     if (instance) {
       setBreadcrumb(instance);
     }
   }, [instance, setBreadcrumb]);
 
-  const { expanded, isAllExpanded, handleExpand, expandAll } =
-    useExpanded(endpoints);
   const { selected, isAllSelected, handleSelect, clearSelected, selectAll } =
-    useSelected(endpoints);
+    useSelected(listenerAddresses);
 
   return (
     <CardBody>
       <PaginatedTable
         contentError={contentError}
         hasContentLoading={isLoading}
-        items={endpoints}
+        items={listenerAddresses}
         itemCount={count}
-        pluralizedItemName={t`Endpoints`}
+        pluralizedItemName={t`Listener Addresses`}
         qsConfig={QS_CONFIG}
         onRowClick={handleSelect}
         clearSelected={clearSelected}
@@ -123,7 +120,7 @@ function InstanceEndPointList({ setBreadcrumb }) {
           },
         ]}
         headerRow={
-          <HeaderRow qsConfig={QS_CONFIG} isExpandable>
+          <HeaderRow qsConfig={QS_CONFIG}>
             <HeaderCell sortKey="address">{t`Address`}</HeaderCell>
             <HeaderCell sortKey="port">{t`Port`}</HeaderCell>
             <HeaderCell sortKey="protocol">{t`Protocol`}</HeaderCell>
@@ -135,20 +132,16 @@ function InstanceEndPointList({ setBreadcrumb }) {
             {...props}
             isAllSelected={isAllSelected}
             onSelectAll={selectAll}
-            isAllExpanded={isAllExpanded}
-            onExpandAll={expandAll}
             qsConfig={QS_CONFIG}
             additionalControls={[]}
           />
         )}
-        renderRow={(endpoint, index) => (
-          <InstanceEndPointListItem
-            isSelected={selected.some((row) => row.id === endpoint.id)}
-            onSelect={() => handleSelect(endpoint)}
-            isExpanded={expanded.some((row) => row.id === endpoint.id)}
-            onExpand={() => handleExpand(endpoint)}
-            key={endpoint.id}
-            peerEndpoint={endpoint}
+        renderRow={(listenerAddress, index) => (
+          <InstanceListenerAddressListItem
+            isSelected={selected.some((row) => row.id === listenerAddress.id)}
+            onSelect={() => handleSelect(listenerAddress)}
+            key={listenerAddress.id}
+            peerListenerAddress={listenerAddress}
             rowIndex={index}
           />
         )}
@@ -158,4 +151,4 @@ function InstanceEndPointList({ setBreadcrumb }) {
   );
 }
 
-export default InstanceEndPointList;
+export default InstanceListenerAddressList;
diff --git a/...eEndPointList/InstanceEndPointListItem.js → ...ssList/InstanceListenerAddressListItem.js b/...eEndPointList/InstanceEndPointListItem.js → ...ssList/InstanceListenerAddressListItem.js
@@ -3,28 +3,18 @@ import { t } from '@lingui/macro';
 import 'styled-components/macro';
 import { Tr, Td } from '@patternfly/react-table';
 
-function InstanceEndPointListItem({
-  peerEndpoint,
+function InstanceListenerAddressListItem({
+  peerListenerAddress,
   isSelected,
   onSelect,
-  isExpanded,
-  onExpand,
   rowIndex,
 }) {
-  const labelId = `check-action-${peerEndpoint.id}`;
+  const labelId = `check-action-${peerListenerAddress.id}`;
   return (
     <Tr
-      id={`peerEndpoint-row-${peerEndpoint.id}`}
-      ouiaId={`peerEndpoint-row-${peerEndpoint.id}`}
+      id={`peerListenerAddress-row-${peerListenerAddress.id}`}
+      ouiaId={`peerListenerAddress-row-${peerListenerAddress.id}`}
     >
-      <Td
-        expand={{
-          rowIndex,
-          isExpanded,
-          onToggle: onExpand,
-        }}
-      />
-
       <Td
         select={{
           rowIndex,
@@ -35,22 +25,22 @@ function InstanceEndPointListItem({
       />
 
       <Td id={labelId} dataLabel={t`Address`}>
-        {peerEndpoint.address}
+        {peerListenerAddress.address}
       </Td>
 
       <Td id={labelId} dataLabel={t`Port`}>
-        {peerEndpoint.port}
+        {peerListenerAddress.port}
       </Td>
 
       <Td id={labelId} dataLabel={t`Protocol`}>
-        {peerEndpoint.protocol}
+        {peerListenerAddress.protocol}
       </Td>
 
       <Td id={labelId} dataLabel={t`Canonical`}>
-        {peerEndpoint.canonical.toString()}
+        {peerListenerAddress.canonical.toString()}
       </Td>
     </Tr>
   );
 }
 
-export default InstanceEndPointListItem;
+export default InstanceListenerAddressListItem;
diff --git a/awx/ui/src/screens/Instances/InstanceListenerAddressList/index.js b/awx/ui/src/screens/Instances/InstanceListenerAddressList/index.js
@@ -0,0 +1 @@
+export { default } from './InstanceListenerAddressList';
diff --git a/awx/ui/src/screens/Instances/Instances.js b/awx/ui/src/screens/Instances/Instances.js
@@ -25,7 +25,7 @@ function Instances() {
       [`/instances/${instance.id}`]: `${instance.hostname}`,
       [`/instances/${instance.id}/details`]: t`Details`,
       [`/instances/${instance.id}/peers`]: t`Peers`,
-      [`/instances/${instance.id}/endpoints`]: t`Endpoints`,
+      [`/instances/${instance.id}/listener_addresses`]: t`Listener Addresses`,
       [`/instances/${instance.id}/edit`]: t`Edit Instance`,
     });
   }, []);