- 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
This commit is contained in:
David O Neill
2024-01-10 13:06:16 +00:00
committed by Seth Foster
parent 6db66c5f81
commit d8b4a9825e
5 changed files with 59 additions and 93 deletions

View File

@@ -5,7 +5,7 @@ import PaginatedTable, {
getSearchableKeys, getSearchableKeys,
HeaderCell, HeaderCell,
HeaderRow, HeaderRow,
ToolbarAddButton, // ToolbarAddButton,
} from 'components/PaginatedTable'; } from 'components/PaginatedTable';
import AddEndpointModal from 'components/AddEndpointModal'; import AddEndpointModal from 'components/AddEndpointModal';
import useToast from 'hooks/useToast'; import useToast from 'hooks/useToast';
@@ -51,8 +51,11 @@ function InstanceEndPointList({ setBreadcrumb }) {
for(let q = 0; q < results.length; q++) { for(let q = 0; q < results.length; q++) {
const receptor = results[q]; const receptor = results[q];
if(receptor.managed === true) continue;
if(id.toString() === receptor.instance.toString()) { if(id.toString() === receptor.instance.toString()) {
receptor.name = detail.hostname;
endpoint_list.push(receptor); endpoint_list.push(receptor);
console.log(receptor)
} }
} }
@@ -90,13 +93,13 @@ function InstanceEndPointList({ setBreadcrumb }) {
const { selected, isAllSelected, handleSelect, clearSelected, selectAll } = const { selected, isAllSelected, handleSelect, clearSelected, selectAll } =
useSelected(endpoints); useSelected(endpoints);
const handleEndpointDelete = async () => { // const handleEndpointDelete = async () => {
// console.log(selected) // // console.log(selected)
// InstancesAPI.updateReceptorAddresses(instance.id, values); // // InstancesAPI.updateReceptorAddresses(instance.id, values);
} // }
const isHopNode = instance.node_type === 'hop'; // const isHopNode = instance.node_type === 'hop';
const isExecutionNode = instance.node_type === 'execution'; // const isExecutionNode = instance.node_type === 'execution';
return ( return (
<CardBody> <CardBody>
@@ -130,6 +133,7 @@ function InstanceEndPointList({ setBreadcrumb }) {
<HeaderRow qsConfig={QS_CONFIG} isExpandable> <HeaderRow qsConfig={QS_CONFIG} isExpandable>
<HeaderCell sortKey="address">{t`Address`}</HeaderCell> <HeaderCell sortKey="address">{t`Address`}</HeaderCell>
<HeaderCell sortKey="port">{t`Port`}</HeaderCell> <HeaderCell sortKey="port">{t`Port`}</HeaderCell>
<HeaderCell sortKey="canonical">{t`Canonical`}</HeaderCell>
</HeaderRow> </HeaderRow>
} }
renderToolbar={(props) => ( renderToolbar={(props) => (
@@ -141,22 +145,22 @@ function InstanceEndPointList({ setBreadcrumb }) {
onExpandAll={expandAll} onExpandAll={expandAll}
qsConfig={QS_CONFIG} qsConfig={QS_CONFIG}
additionalControls={[ additionalControls={[
(isExecutionNode || isHopNode) && ( // (isExecutionNode || isHopNode) && (
<ToolbarAddButton // <ToolbarAddButton
ouiaId="add-endpoint-button" // ouiaId="add-endpoint-button"
key="add-endpoint" // key="add-endpoint"
defaultLabel={t`Add`} // defaultLabel={t`Add`}
onClick={() => setisAddEndpointModalOpen(true)} // onClick={() => setisAddEndpointModalOpen(true)}
/> // />
), // ),
(isExecutionNode || isHopNode) && ( // (isExecutionNode || isHopNode) && (
<ToolbarAddButton // <ToolbarAddButton
ouiaId="delete-endpoint-button" // ouiaId="delete-endpoint-button"
key="delete-endpoint" // key="delete-endpoint"
defaultLabel={t`Delete`} // defaultLabel={t`Delete`}
onClick={() => handleEndpointDelete()} // onClick={() => handleEndpointDelete()}
/> // />
), // ),
]} ]}
/> />
)} )}
@@ -167,7 +171,7 @@ function InstanceEndPointList({ setBreadcrumb }) {
isExpanded={expanded.some((row) => row.id === endpoint.id)} isExpanded={expanded.some((row) => row.id === endpoint.id)}
onExpand={() => handleExpand(endpoint)} onExpand={() => handleExpand(endpoint)}
key={endpoint.id} key={endpoint.id}
peerInstance={endpoint} peerEndpoint={endpoint}
rowIndex={index} rowIndex={index}
/> />
)} )}

View File

@@ -5,18 +5,18 @@ import 'styled-components/macro';
import { Tr, Td } from '@patternfly/react-table'; import { Tr, Td } from '@patternfly/react-table';
function InstanceEndPointListItem({ function InstanceEndPointListItem({
peerInstance, peerEndpoint,
isSelected, isSelected,
onSelect, onSelect,
isExpanded, isExpanded,
onExpand, onExpand,
rowIndex, rowIndex,
}) { }) {
const labelId = `check-action-${peerInstance.id}`; const labelId = `check-action-${peerEndpoint.id}`;
return ( return (
<Tr <Tr
id={`peerInstance-row-${peerInstance.id}`} id={`peerEndpoint-row-${peerEndpoint.id}`}
ouiaId={`peerInstance-row-${peerInstance.id}`} ouiaId={`peerEndpoint-row-${peerEndpoint.id}`}
> >
<Td <Td
expand={{ expand={{
@@ -36,15 +36,15 @@ function InstanceEndPointListItem({
/> />
<Td id={labelId} dataLabel={t`Address`}> <Td id={labelId} dataLabel={t`Address`}>
<Link to={`/instances/${peerInstance.instance}/details`}> {peerEndpoint.address}
<b>{peerInstance.address}</b>
</Link>
</Td> </Td>
<Td id={labelId} dataLabel={t`Port`}> <Td id={labelId} dataLabel={t`Port`}>
<Link to={`/instances/${peerInstance.instance}/details`}> {peerEndpoint.port}
<b>{peerInstance.port}</b> </Td>
</Link>
<Td id={labelId} dataLabel={t`Canonical`}>
{peerEndpoint.canonical.toString()}
</Td> </Td>
</Tr> </Tr>

View File

@@ -62,6 +62,7 @@ function InstancePeerList({ setBreadcrumb }) {
for(let q = 0; q < results.length; q++) { for(let q = 0; q < results.length; q++) {
const receptor = results[q]; const receptor = results[q];
if(receptor.managed === true) continue;
const host = instances.data.results.filter((obj) => obj.id === receptor.instance)[0]; const host = instances.data.results.filter((obj) => obj.id === receptor.instance)[0];
const copy = receptor; const copy = receptor;
copy.hostname = host.hostname; copy.hostname = host.hostname;
@@ -150,6 +151,7 @@ function InstancePeerList({ setBreadcrumb }) {
const copy = receptor; const copy = receptor;
copy.hostname = host.hostname; copy.hostname = host.hostname;
copy.node_type = host.node_type; copy.node_type = host.node_type;
copy.canonical = copy.canonical.toString()
address_list.push(copy); address_list.push(copy);
} }
@@ -250,14 +252,14 @@ function InstancePeerList({ setBreadcrumb }) {
]} ]}
headerRow={ headerRow={
<HeaderRow qsConfig={QS_CONFIG} isExpandable> <HeaderRow qsConfig={QS_CONFIG} isExpandable>
<HeaderCell sortKey="address">{t`Address`}</HeaderCell>
<HeaderCell sortKey="port">{t`Port`}</HeaderCell>
<HeaderCell <HeaderCell
tooltip={t`Cannot run health check on hop nodes.`} tooltip={t`Cannot run health check on hop nodes.`}
sortKey="hostname" sortKey="hostname"
>{t`Name`}</HeaderCell> >{t`Instance Name`}</HeaderCell>
<HeaderCell sortKey="errors">{t`Status`}</HeaderCell> <HeaderCell sortKey="address">{t`Address`}</HeaderCell>
<HeaderCell sortKey="port">{t`Port`}</HeaderCell>
<HeaderCell sortKey="node_type">{t`Node Type`}</HeaderCell> <HeaderCell sortKey="node_type">{t`Node Type`}</HeaderCell>
<HeaderCell sortKey="canonical">{t`Canonical`}</HeaderCell>
</HeaderRow> </HeaderRow>
} }
renderToolbar={(props) => ( renderToolbar={(props) => (
@@ -312,10 +314,11 @@ function InstancePeerList({ setBreadcrumb }) {
optionsRequest={readInstancesOptions} optionsRequest={readInstancesOptions}
displayKey="hostname" displayKey="hostname"
columns={[ columns={[
{ key: 'hostname', name: t`Name` },
{ key: 'address', name: t`Address` }, { key: 'address', name: t`Address` },
{ key: 'port', name: t`Port` }, { key: 'port', name: t`Port` },
{ key: 'hostname', name: t`Name` },
{ key: 'node_type', name: t`Node Type` }, { key: 'node_type', name: t`Node Type` },
{ key: 'canonical', name: t`Canonical` },
]} ]}
/> />
)} )}

View File

@@ -2,10 +2,8 @@ import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import 'styled-components/macro'; import 'styled-components/macro';
import { Tooltip } from '@patternfly/react-core';
import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table'; import { Tr, Td, ExpandableRowContent } from '@patternfly/react-table';
import { formatDateString } from 'util/dates'; import { formatDateString } from 'util/dates';
import StatusLabel from 'components/StatusLabel';
import { Detail, DetailList } from 'components/DetailList'; import { Detail, DetailList } from 'components/DetailList';
function InstancePeerListItem({ function InstancePeerListItem({
@@ -43,17 +41,6 @@ function InstancePeerListItem({
}} }}
dataLabel={t`Selected`} 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`}> <Td id={labelId} dataLabel={t`Name`}>
<Link to={`/instances/${peerInstance.instance}/details`}> <Link to={`/instances/${peerInstance.instance}/details`}>
@@ -61,23 +48,20 @@ function InstancePeerListItem({
</Link> </Link>
</Td> </Td>
<Td dataLabel={t`Status`}> <Td id={labelId} dataLabel={t`Address`}>
<Tooltip {peerInstance.address}
content={ </Td>
<div>
{t`Last Health Check`} <Td id={labelId} dataLabel={t`Port`}>
&nbsp; {peerInstance.port}
{formatDateString(
peerInstance.last_health_check ?? peerInstance.last_seen
)}
</div>
}
>
<StatusLabel status={peerInstance.node_state} />
</Tooltip>
</Td> </Td>
<Td dataLabel={t`Node Type`}>{peerInstance.node_type}</Td> <Td dataLabel={t`Node Type`}>{peerInstance.node_type}</Td>
<Td id={labelId} dataLabel={t`Canonical`}>
{peerInstance.canonical.toString()}
</Td>
</Tr> </Tr>
{!isHopNode && ( {!isHopNode && (
<Tr <Tr

View File

@@ -1,6 +1,6 @@
import React, { useCallback } from 'react'; import React from 'react';
import { t } from '@lingui/macro'; 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 { Form, FormGroup, CardBody } from '@patternfly/react-core';
import { FormColumnLayout } from 'components/FormLayout'; import { FormColumnLayout } from 'components/FormLayout';
import FormField, { import FormField, {
@@ -9,7 +9,6 @@ import FormField, {
} from 'components/FormField'; } from 'components/FormField';
import FormActionGroup from 'components/FormActionGroup'; import FormActionGroup from 'components/FormActionGroup';
import AnsibleSelect from 'components/AnsibleSelect'; import AnsibleSelect from 'components/AnsibleSelect';
import { PeersLookup } from 'components/Lookup';
import { required } from 'util/validators'; import { required } from 'util/validators';
const INSTANCE_TYPES = [ const INSTANCE_TYPES = [
@@ -23,16 +22,6 @@ function InstanceFormFields({ isEdit }) {
validate: required(t`Set a value for this field`), 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 ( return (
<> <>
<FormField <FormField
@@ -91,20 +80,6 @@ function InstanceFormFields({ isEdit }) {
isDisabled={isEdit} isDisabled={isEdit}
/> />
</FormGroup> </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`}> <FormGroup fieldId="instance-option-checkboxes" label={t`Options`}>
<CheckboxField <CheckboxField
id="enabled" id="enabled"