add support for dedicated IP

Author: barakeinav1

vmm/ui/src/components/PortMappingEditor.ts

@@ -10,37 +10,49 @@ type PortEntry = {
   custom_ip?: string;            // User-entered IP for custom mode
 };
 
+// ... keep your types as-is ...
+
 type ComponentInstance = {
   ports: PortEntry[];
+  normalizePort: (p: PortEntry) => void;
 };
 
 const PortMappingEditorComponent = {
   name: 'PortMappingEditor',
   props: {
+    ports: { type: Array, required: true },
+  },
+
+  // ✅ NEW: normalize on initial load
+  created(this: ComponentInstance) {
+    this.ports.forEach((p) => this.normalizePort(p));
+  },
+
+  // ✅ NEW: normalize again if parent replaces ports array (e.g. after refresh)
+  watch: {
     ports: {
-      type: Array,
-      required: true,
+      deep: true,
+      handler(this: ComponentInstance, newPorts: PortEntry[]) {
+        newPorts.forEach((p) => this.normalizePort(p));
+      },
     },
   },
+
   template: /* html */ `
     <div class="port-mapping-editor">
       <label>Port Mappings</label>
       <div v-for="(port, index) in ports" :key="index" class="port-row">
-        
-        <!-- protocol -->
         <select v-model="port.protocol">
           <option value="tcp">TCP</option>
           <option value="udp">UDP</option>
         </select>
 
-        <!-- address mode selector -->
         <select v-model="port.host_address_mode" @change="onModeChange(port)">
           <option value="local">Local</option>
           <option value="public">Public</option>
           <option value="custom">Custom</option>
         </select>
 
-        <!-- custom IP input -->
         <input 
           v-if="port.host_address_mode === 'custom'"
           type="text"
@@ -49,24 +61,32 @@ const PortMappingEditorComponent = {
           @input="onCustomIPChange(port)"
         />
 
-        <!-- ports -->
         <input type="number" v-model.number="port.host_port" placeholder="Host Port" required>
         <input type="number" v-model.number="port.vm_port" placeholder="VM Port" required>
-
-        <!-- remove -->
-        <button type="button" class="action-btn danger" @click="removePort(index)">
-          Remove
-        </button>
+        <button type="button" class="action-btn danger" @click="removePort(index)">Remove</button>
       </div>
-
-      <!-- add -->
-      <button type="button" class="action-btn" @click="addPort">
-        Add Port
-      </button>
+      <button type="button" class="action-btn" @click="addPort">Add Port</button>
     </div>
   `,
 
   methods: {
+    // ✅ NEW: derives mode + custom_ip from host_address when editing existing VMs
+    normalizePort(this: ComponentInstance, port: PortEntry) {
+      // If mode already set, keep it (don’t fight the user while editing)
+      if (port.host_address_mode) return;
+
+      if (port.host_address === '127.0.0.1') {
+        port.host_address_mode = 'local';
+        port.custom_ip = '';
+      } else if (port.host_address === '0.0.0.0') {
+        port.host_address_mode = 'public';
+        port.custom_ip = '';
+      } else {
+        port.host_address_mode = 'custom';
+        port.custom_ip = port.host_address; // show dedicated IP in input
+      }
+    },
+
     addPort(this: ComponentInstance) {
       this.ports.push({
         protocol: 'tcp',
@@ -82,20 +102,25 @@ const PortMappingEditorComponent = {
       this.ports.splice(index, 1);
     },
 
-    // Called when switching between Local / Public / Custom
     onModeChange(port: PortEntry) {
       if (port.host_address_mode === 'local') {
         port.host_address = '127.0.0.1';
-      } 
-      else if (port.host_address_mode === 'public') {
+        port.custom_ip = '';
+      } else if (port.host_address_mode === 'public') {
         port.host_address = '0.0.0.0';
-      } 
-      else if (port.host_address_mode === 'custom') {
+        port.custom_ip = '';
+      } else if (port.host_address_mode === 'custom') {
+        // if coming from existing custom, keep it; otherwise start empty
+        if (!port.custom_ip || port.custom_ip === '') {
+          // if host_address already contains a non-standard IP, reuse it
+          if (port.host_address !== '127.0.0.1' && port.host_address !== '0.0.0.0') {
+            port.custom_ip = port.host_address;
+          }
+        }
         port.host_address = port.custom_ip || '';
       }
     },
 
-    // Called when user types a custom IP
     onCustomIPChange(port: PortEntry) {
       if (port.host_address_mode === 'custom') {
         port.host_address = port.custom_ip || '';

vmm/ui/src/styles/main.css

@@ -1522,7 +1522,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .port-row {
-  grid-template-columns: 90px 100px 120px 120px 100px;
+  grid-template-columns: 90px 100px 120px 120px 160px 100px;
 }
 
 .gpu-config-items {