From 08b1e5837364cdd903d0b3a3259c7dbee37bfd86 Mon Sep 17 00:00:00 2001 From: Seth Foster Date: Thu, 1 Feb 2024 13:35:54 -0500 Subject: [PATCH] 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 --- awx/ui/src/screens/Instances/Instance.js | 13 +++-- .../Instances/InstanceEndPointList/index.js | 1 - .../InstanceListenerAddressList.js} | 51 ++++++++----------- .../InstanceListenerAddressListItem.js} | 30 ++++------- .../InstanceListenerAddressList/index.js | 1 + awx/ui/src/screens/Instances/Instances.js | 2 +- 6 files changed, 42 insertions(+), 56 deletions(-) delete mode 100644 awx/ui/src/screens/Instances/InstanceEndPointList/index.js rename awx/ui/src/screens/Instances/{InstanceEndPointList/InstanceEndPointList.js => InstanceListenerAddressList/InstanceListenerAddressList.js} (74%) rename awx/ui/src/screens/Instances/{InstanceEndPointList/InstanceEndPointListItem.js => InstanceListenerAddressList/InstanceListenerAddressListItem.js} (53%) create mode 100644 awx/ui/src/screens/Instances/InstanceListenerAddressList/index.js diff --git a/awx/ui/src/screens/Instances/Instance.js b/awx/ui/src/screens/Instances/Instance.js index 6de57292c110..59350d9c519e 100644 --- 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 }) { {isK8s && ( - - + + )} {isK8s && ( diff --git a/awx/ui/src/screens/Instances/InstanceEndPointList/index.js b/awx/ui/src/screens/Instances/InstanceEndPointList/index.js deleted file mode 100644 index 9e5f69dd34fc..000000000000 --- a/awx/ui/src/screens/Instances/InstanceEndPointList/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './InstanceEndPointList'; diff --git a/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointList.js b/awx/ui/src/screens/Instances/InstanceListenerAddressList/InstanceListenerAddressList.js similarity index 74% rename from awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointList.js rename to awx/ui/src/screens/Instances/InstanceListenerAddressList/InstanceListenerAddressList.js index ce086dbee483..5bd2d9611f09 100644 --- a/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointList.js +++ b/awx/ui/src/screens/Instances/InstanceListenerAddressList/InstanceListenerAddressList.js @@ -13,9 +13,8 @@ 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, @@ -23,16 +22,16 @@ const QS_CONFIG = getQSConfig('peer', { 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,7 +73,7 @@ function InstanceEndPointList({ setBreadcrumb }) { }, [id]), { instance: {}, - endpoints: [], + listenerAddresses: [], count: 0, relatedSearchableKeys: [], searchableKeys: [], @@ -82,8 +81,8 @@ function InstanceEndPointList({ setBreadcrumb }) { ); useEffect(() => { - fetchEndpoints(); - }, [fetchEndpoints]); + fetchListenerAddresses(); + }, [fetchListenerAddresses]); useEffect(() => { if (instance) { @@ -91,19 +90,17 @@ function InstanceEndPointList({ setBreadcrumb }) { } }, [instance, setBreadcrumb]); - const { expanded, isAllExpanded, handleExpand, expandAll } = - useExpanded(endpoints); const { selected, isAllSelected, handleSelect, clearSelected, selectAll } = - useSelected(endpoints); + useSelected(listenerAddresses); return ( + {t`Address`} {t`Port`} {t`Protocol`} @@ -135,20 +132,16 @@ function InstanceEndPointList({ setBreadcrumb }) { {...props} isAllSelected={isAllSelected} onSelectAll={selectAll} - isAllExpanded={isAllExpanded} - onExpandAll={expandAll} qsConfig={QS_CONFIG} additionalControls={[]} /> )} - renderRow={(endpoint, index) => ( - 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) => ( + 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/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointListItem.js b/awx/ui/src/screens/Instances/InstanceListenerAddressList/InstanceListenerAddressListItem.js similarity index 53% rename from awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointListItem.js rename to awx/ui/src/screens/Instances/InstanceListenerAddressList/InstanceListenerAddressListItem.js index 961e16843e43..3a8311593d28 100644 --- a/awx/ui/src/screens/Instances/InstanceEndPointList/InstanceEndPointListItem.js +++ b/awx/ui/src/screens/Instances/InstanceListenerAddressList/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 ( - - - {peerEndpoint.address} + {peerListenerAddress.address} - {peerEndpoint.port} + {peerListenerAddress.port} - {peerEndpoint.protocol} + {peerListenerAddress.protocol} - {peerEndpoint.canonical.toString()} + {peerListenerAddress.canonical.toString()} ); } -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 new file mode 100644 index 000000000000..8221b6cebb22 --- /dev/null +++ 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 index 9836ffa29028..94890aa3cc69 100644 --- 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`, }); }, []);