Adjusted image path in the vm details

Author: msinhore

host-agent/debian/changelog

@@ -1,4 +1,4 @@
-firecracker-cloudstack-agent (0.3.0-0) unstable; urgency=medium
+firecracker-cloudstack-agent (0.3.0-1) unstable; urgency=medium
 
   * Added a Vue-based host dashboard served from the agent (/ui) with 
     basic-auth backed by the existing API.
@@ -13,7 +13,7 @@ firecracker-cloudstack-agent (0.3.0-0) unstable; urgency=medium
   * Extend the Debian packaging to build the UI bundle with npm and install the
     generated `dist/` assets alongside the agent.
 
- -- Marco Sinhoreli <msinhore@gmail.com>  Tue, 14 Oct 2025 23:58:00 +0000
+ -- Marco Sinhoreli <msinhore@gmail.com>  Tue, 15 Oct 2025 00:26:00 +0000
 
 firecracker-cloudstack-agent (0.2.0-1) unstable; urgency=medium
 

host-agent/ui/src/components/VmDetails.vue

@@ -98,7 +98,7 @@
       </section>
 
       <section>
-        <h3 class="section-title">Image & Payload</h3>
+        <h3 class="section-title">Template</h3>
         <table class="details-table">
           <tbody>
             <tr>
@@ -185,16 +185,33 @@ const storageSizeLabel = computed(() => {
 const networkInterfaces = computed(() => props.details?.network?.interfaces || []);
 const originImageLabel = computed(() => {
   const config = props.details?.firecracker_config;
-  if (config && typeof config.image_idr === "string" && config.image_idr.trim()) {
-    return config.image_idr;
+  const baseDir =
+    (config && typeof config.image_dir === "string" && config.image_dir.trim()) ||
+    props.details?.agent_defaults?.host?.image_dir;
+
+  const fromConfig = config && typeof config.image_idr === "string" && config.image_idr.trim();
+  const legacyConfig = config && typeof config.image_id === "string" && config.image_id.trim();
+  const payloadImage = props.details?.payload?.image;
+
+  const imageToken = fromConfig || legacyConfig || payloadImage;
+  if (!imageToken || typeof imageToken !== "string" || !imageToken.trim()) {
+    return "-";
   }
-  if (config && typeof config.image_id === "string" && config.image_id.trim()) {
-    return config.image_id;
+
+  if (
+    imageToken.startsWith("/") ||
+    imageToken.startsWith("./") ||
+    imageToken.startsWith("../") ||
+    imageToken.includes(":\\")
+  ) {
+    return imageToken;
   }
-  const payloadImage = props.details?.payload?.image;
-  if (typeof payloadImage === "string" && payloadImage.trim()) {
-    return payloadImage;
+
+  if (!baseDir) {
+    return imageToken;
   }
-  return "-";
+
+  const sanitizedBase = baseDir.endsWith("/") ? baseDir.slice(0, -1) : baseDir;
+  return `${sanitizedBase}/${imageToken}`;
 });
 </script>