From 0b4d11b5cf8b3b1cf75ecaa8997faa9033f5f57c Mon Sep 17 00:00:00 2001 From: David Edler Date: Fri, 22 Nov 2024 23:49:18 +0100 Subject: [PATCH 1/2] fix(devices) cleanup code in proxyDevices.tsx Signed-off-by: David Edler --- src/util/proxyDevices.tsx | 62 +++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/src/util/proxyDevices.tsx b/src/util/proxyDevices.tsx index d9a0f4dfe5..a13c0f599b 100644 --- a/src/util/proxyDevices.tsx +++ b/src/util/proxyDevices.tsx @@ -1,10 +1,10 @@ import { Input, Label, Select } from "@canonical/react-components"; -import { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable"; import { getConfigurationRowBase } from "components/ConfigurationRow"; import { LxdProxyDevice } from "types/device"; import { ensureEditMode } from "./instanceEdit"; import { proxyAddressTypeOptions } from "./instanceOptions"; import { InstanceAndProfileFormikProps } from "components/forms/instanceAndProfileFormValues"; +import { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable"; type ConnectionType = "listen" | "connect"; @@ -129,35 +129,35 @@ export const getProxyAddress = ( }), ); - deviceType === "unix" - ? null - : customRows.push( - getConfigurationRowBase({ - className: "no-border-top inherited-with-form", - configuration: ( - - ), + if (deviceType !== "unix") { + customRows.push( + getConfigurationRowBase({ + className: "no-border-top inherited-with-form", + configuration: ( + + ), - inherited: ( - { - ensureEditMode(formik); - const newPort = e.target.value; - void formik.setFieldValue( - `devices.${index}.${connectionType}`, - `${deviceType}:${deviceAddress}:${newPort}`, - ); - }} - value={devicePort} - placeholder="00[-00]" - type="text" - className="u-no-margin--bottom" - /> - ), - override: "", - }), - ); + inherited: ( + { + ensureEditMode(formik); + const newPort = e.target.value; + void formik.setFieldValue( + `devices.${index}.${connectionType}`, + `${deviceType}:${deviceAddress}:${newPort}`, + ); + }} + value={devicePort} + placeholder="00[-00]" + type="text" + className="u-no-margin--bottom" + /> + ), + override: "", + }), + ); + } }; From af6fd99ed53aac23e37ccfa73f4d15afe7b61c78 Mon Sep 17 00:00:00 2001 From: David Edler Date: Fri, 22 Nov 2024 23:50:45 +0100 Subject: [PATCH 2/2] remove unused component and functions Signed-off-by: David Edler --- .../instances/InstanceOverviewDevices.tsx | 90 ------------------- src/util/helpers.tsx | 13 --- 2 files changed, 103 deletions(-) delete mode 100644 src/pages/instances/InstanceOverviewDevices.tsx diff --git a/src/pages/instances/InstanceOverviewDevices.tsx b/src/pages/instances/InstanceOverviewDevices.tsx deleted file mode 100644 index 1ebda93780..0000000000 --- a/src/pages/instances/InstanceOverviewDevices.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { FC } from "react"; -import { MainTable } from "@canonical/react-components"; -import { LxdInstance } from "types/instance"; -import { getInstanceDevices } from "util/helpers"; -import { isRootDisk } from "util/instanceValidation"; -import { FormDevice } from "util/formDevices"; -import ResourceLink from "components/ResourceLink"; -import { isOtherDevice } from "util/devices"; -import InstanceOverviewDeviceDetail from "components/DeviceDetails"; - -interface Props { - instance: LxdInstance; -} - -const InstanceOverviewDevices: FC = ({ instance }) => { - const instanceDevices = getInstanceDevices(instance) - .filter(([, device]) => { - return device.type !== "nic" && device.type !== "none"; - }) - // Sort devices by type and name - .sort((a, b) => { - const nameA = a[0].toLowerCase(); - const nameB = b[0].toLowerCase(); - const typeA = a[1].type; - const typeB = b[1].type; - if (typeA === typeB) { - return nameA.localeCompare(nameB); - } - - return typeA.localeCompare(typeB); - }); - - const hasDevices = instanceDevices.length > 0; - - const deviceHeaders = [ - { content: "Name", sortKey: "name", className: "u-text--muted" }, - { content: "Type", sortKey: "type", className: "u-text--muted" }, - { content: "Details", className: "u-text--muted" }, - ]; - - const deviceRows = instanceDevices.map(([devicename, device]) => { - const configUrl = `/ui/project/${instance.project}/instance/${instance.name}/configuration/${isOtherDevice(device) ? "other" : device.type}`; - return { - columns: [ - { - content: ( - - ), - role: "cell", - "aria-label": "Name", - }, - { - content: `${device.type}${isRootDisk(device as FormDevice) ? " (root)" : ""}`, - role: "cell", - "aria-label": "Type", - }, - { - content: ( - - ), - role: "cell", - "aria-label": "Details", - }, - ], - sortData: { - name: devicename.toLowerCase(), - type: device.type, - }, - }; - }); - - return ( - <> - {hasDevices && ( - - )} - {!hasDevices && <>-} - - ); -}; - -export default InstanceOverviewDevices; diff --git a/src/util/helpers.tsx b/src/util/helpers.tsx index 1b529df8e6..4bd0a5316c 100644 --- a/src/util/helpers.tsx +++ b/src/util/helpers.tsx @@ -6,7 +6,6 @@ import { LxdNetwork } from "types/network"; import { LxdStorageVolume } from "types/storage"; import { Dispatch, SetStateAction } from "react"; import crypto from "crypto"; -import { LxdDeviceValue } from "types/device"; import { isDiskDevice } from "./devices"; import { isRootDisk } from "./instanceValidation"; import { FormDevice } from "./formDevices"; @@ -322,18 +321,6 @@ export const getUniqueResourceName = ( return name; }; -export const getInstanceDevices = ( - instance: LxdInstance, -): [string, LxdDeviceValue][] => { - return Object.entries(instance.expanded_devices ?? {}); -}; - -export const getProfileDevices = ( - profile: LxdProfile, -): [string, LxdDeviceValue][] => { - return Object.entries(profile.devices ?? {}); -}; - export const getRootPool = (instance: LxdInstance): string => { const rootStorage = Object.values(instance.expanded_devices ?? {}) .filter(isDiskDevice)