Skip to content

Commit

Permalink
feat: [WD-14882] Adjust Listen and Connect Inputs
Browse files Browse the repository at this point in the history 
Signed-off-by: Nkeiruka <[email protected]>
  • Loading branch information
@Kxiru
Kxiru committed Sep 16, 2024
1 parent 4f0fd4d commit 399e45d
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 32 deletions.
8 changes: 4 additions & 4 deletions src/components/ConfigurationRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,8 +224,8 @@ export const getConfigurationRow = ({

interface BaseProps {
configuration: ReactNode;
inherited: ReactNode;
override: ReactNode;
inherited?: ReactNode;
override?: ReactNode;
className?: string;
}

Expand All @@ -243,11 +243,11 @@ export const getConfigurationRowBase = ({
className: "configuration",
},
{
content: inherited,
content: inherited ? inherited : null,
className: "inherited",
},
{
content: override,
content: override ? override : null,
className: "override",
},
],
Expand Down
190 changes: 162 additions & 28 deletions src/components/forms/ProxyDeviceForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,11 @@ import { deviceKeyToLabel } from "util/devices";
import { ensureEditMode } from "util/instanceEdit";
import NewProxyBtn from "components/forms/NewProxyBtn";
import ConfigFieldDescription from "pages/settings/ConfigFieldDescription";
import { optionEnabledDisabled, optionYesNo } from "util/instanceOptions";
import {
optionEnabledDisabled,
optionYesNo,
proxyAddressTypeOptions,
} from "util/instanceOptions";

interface Props {
formik: InstanceAndProfileFormikProps;
Expand Down Expand Up @@ -84,6 +88,7 @@ const ProxyDeviceForm: FC<Props> = ({ formik, project }) => {
}[],
value?: string,
help?: string,
helperFunction?: () => void,
) => {
const key = `devices.${index}.${fieldName}`;

Expand All @@ -99,6 +104,10 @@ const ProxyDeviceForm: FC<Props> = ({ formik, project }) => {
onChange={(e) => {
ensureEditMode(formik);
void formik.setFieldValue(key, e.target.value);

if (e.target.value === "true") {
helperFunction?.();
}
}}
value={value ?? ""}
options={options}
Expand Down Expand Up @@ -187,6 +196,21 @@ const ProxyDeviceForm: FC<Props> = ({ formik, project }) => {
}
const device = formik.values.devices[index] as LxdProxyDevice;

const deviceListenParts = device.listen?.split(":") || [];
const listenType =
deviceListenParts.length > 0 ? deviceListenParts[0] : "tcp";
const listenAddress =
deviceListenParts.length > 1 ? deviceListenParts[1] : "";
const listenPort = deviceListenParts.length > 2 ? deviceListenParts[2] : "";

const deviceConnectParts = device.connect?.split(":") || [];
const connectType =
deviceConnectParts.length > 0 ? deviceConnectParts[0] : "tcp";
const connectAddress =
deviceConnectParts.length > 1 ? deviceConnectParts[1] : "";
const connectPort =
deviceConnectParts.length > 2 ? deviceConnectParts[2] : "";

customRows.push(
getConfigurationRowBase({
className: "no-border-top custom-device-name",
Expand Down Expand Up @@ -243,6 +267,13 @@ const ProxyDeviceForm: FC<Props> = ({ formik, project }) => {
index,
optionEnabledDisabled,
device.nat,
undefined,
() => {
void formik.setFieldValue(
`devices.${index}.connect`,
`${listenType}:${connectAddress}:${connectPort}`,
);
},
),
);

Expand All @@ -258,30 +289,58 @@ const ProxyDeviceForm: FC<Props> = ({ formik, project }) => {

customRows.push(
getConfigurationRowBase({
className: "no-border-top inherited-with-form",
className: "no-border-top inherited-with-form p-heading--6",
configuration: <Label>Listen</Label>,
}),
);

customRows.push(
getConfigurationRowBase({
className: "no-border-top inherited-with-form",
configuration: <Label>Type</Label>,
inherited: (
<Select
onChange={(e) => {
ensureEditMode(formik);
const newType = e.target.value;
void formik.setFieldValue(
`devices.${index}.listen`,
`${newType}:${listenAddress}:${listenPort}`,
);

if (device.nat === "true") {
void formik.setFieldValue(
`devices.${index}.connect`,
`${newType}:${connectAddress}:${connectPort}`,
);
}
}}
value={listenType}
options={proxyAddressTypeOptions}
className="u-no-margin--bottom"
/>
),
override: "",
}),
);

customRows.push(
getConfigurationRowBase({
className: "no-border-top inherited-with-form",
configuration: <Label>*Address</Label>,
inherited: (
<Input
name={`devices.${index}.listen`}
id={`devices.${index}.listen`}
key={`devices.${index}.listen`}
onBlur={formik.handleBlur}
onChange={(e) => {
ensureEditMode(formik);
const newAddress = e.target.value;
void formik.setFieldValue(
`devices.${index}.listen`,
e.target.value,
`${listenType}:${newAddress}:${listenPort}`,
);
}}
value={device.listen}
value={listenAddress}
placeholder="000.000.000.000"
type="text"
help={
<ConfigFieldDescription
description={
"Use the following format to specify the address and port: <type>:<addr>:<port>[-<port>][,<port>]"
}
/>
}
className="u-no-margin--bottom"
/>
),
Expand All @@ -292,29 +351,104 @@ const ProxyDeviceForm: FC<Props> = ({ formik, project }) => {
customRows.push(
getConfigurationRowBase({
className: "no-border-top inherited-with-form",
configuration: <Label>*Port</Label>,
inherited: (
<Input
onChange={(e) => {
ensureEditMode(formik);
const newPort = e.target.value;
void formik.setFieldValue(
`devices.${index}.listen`,
`${listenType}:${listenAddress}:${newPort}`,
);
}}
value={listenPort}
placeholder="00[-00]"
type="text"
className="u-no-margin--bottom"
/>
),
override: "",
}),
);

customRows.push(
getConfigurationRowBase({
className: "no-border-top inherited-with-form p-heading--6",
configuration: <Label>Connect</Label>,
}),
);

customRows.push(
getConfigurationRowBase({
className: "no-border-top inherited-with-form",
configuration: <Label>Type</Label>,
inherited: (
<Select
onChange={(e) => {
ensureEditMode(formik);
const newType = e.target.value;
void formik.setFieldValue(
`devices.${index}.connect`,
`${newType}:${connectAddress}:${connectPort}`,
);
}}
value={connectType}
options={proxyAddressTypeOptions}
className="u-no-margin--bottom"
disabled={device.nat === "true"}
title={
device.nat
? "This is determined by the listen type when nat mode is enabled"
: undefined
}
/>
),
override: "",
}),
);

customRows.push(
getConfigurationRowBase({
className: "no-border-top inherited-with-form",
configuration: <Label>*Address</Label>,
inherited: (
<Input
name={`devices.${index}.connect`}
id={`devices.${index}.connect`}
key={`devices.${index}.connect`}
onBlur={formik.handleBlur}
onChange={(e) => {
ensureEditMode(formik);
const newAddress = e.target.value;
void formik.setFieldValue(
`devices.${index}.connect`,
e.target.value,
`${connectType}:${newAddress}:${connectPort}`,
);
}}
value={device.connect}
value={connectAddress}
placeholder="000.000.000.000"
type="text"
className="u-no-margin--bottom"
/>
),
override: "",
}),
);

customRows.push(
getConfigurationRowBase({
className: "no-border-top inherited-with-form",
configuration: <Label>*Port</Label>,
inherited: (
<Input
onChange={(e) => {
ensureEditMode(formik);
const newPort = e.target.value;
void formik.setFieldValue(
`devices.${index}.connect`,
`${connectType}:${connectAddress}:${newPort}`,
);
}}
value={connectPort}
placeholder="00[-00]"
type="text"
help={
<ConfigFieldDescription
description={
"Use the following format to specify the address and port: <type>:<addr>:<port>[-<port>][,<port>]"
}
/>
}
className="u-no-margin--bottom"
/>
),
Expand Down
21 changes: 21 additions & 0 deletions src/util/instanceOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export const optionYesNo = [
value: "false",
},
];

export const optionEnabledDisabled = [
{
label: "Select option",
Expand All @@ -75,3 +76,23 @@ export const optionEnabledDisabled = [
export const diskPriorities = [...Array(11).keys()].map((i) => {
return { label: i.toString(), value: i };
});

export const proxyAddressTypeOptions = [
{
label: "Select option",
value: "",
disabled: true,
},
{
label: "TCP",
value: "tcp",
},
{
label: "UDP",
value: "udp",
},
{
label: "UNIX",
value: "unix",
},
];

0 comments on commit 399e45d

Please sign in to comment.