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`,
  });
  }, []);