fix: fix host path device display

Signed-off-by: Mason Hu <[email protected]>

src/components/DeviceDetails.tsx

@@ -1,8 +1,9 @@
 import { FC } from "react";
-import { isRootDisk } from "util/instanceValidation";
+import { isHostPath, isRootDisk } from "util/instanceValidation";
 import { FormDevice } from "util/formDevices";
 import { LxdDeviceValue } from "types/device";
 import ResourceLink from "components/ResourceLink";
+import ResourceLabel from "./ResourceLabel";
 
 interface Props {
   device: LxdDeviceValue;
@@ -24,6 +25,15 @@ const DeviceDetails: FC<Props> = ({ device, project }) => {
       );
     }
 
+    if (isHostPath(device as FormDevice)) {
+      return (
+        <>
+          Host path{" "}
+          <ResourceLabel type={"volume"} value={device.source as string} />
+        </>
+      );
+    }
+
     return (
       <>
         Volume{" "}

src/components/ResourceLabel.tsx

@@ -12,7 +12,7 @@ const ResourceLabel: FC<Props> = ({ type, value, bold }) => {
   return (
     <span className="resource-label u-truncate">
       <ResourceIcon type={type} />
-      <ValueWrapper>{value}</ValueWrapper>
+      <ValueWrapper title={value}>{value}</ValueWrapper>
     </span>
   );
 };

src/util/instanceValidation.tsx

@@ -22,6 +22,10 @@ export const isRootDisk = (device: FormDevice): device is FormDiskDevice => {
   return device.type === "disk" && device.path === "/" && !device.source;
 };
 
+export const isHostPath = (device: FormDevice): boolean => {
+  return device.type === "disk" && !!device.source && device.pool === undefined;
+};
+
 const missingRoot = (devices: FormDevice[]): boolean => {
   return !devices.some(isRootDisk);
 };