From 5c45f0b48bd6a6bdaf57d729460e77c922ba4891 Mon Sep 17 00:00:00 2001
From: kei5uke <keisuke.konno@ntnu.no>
Date: Fri, 22 May 2026 11:38:29 +0200
Subject: [PATCH 1/5] feat: default machine, storage names, sizes, limit on
 options

---
 .../components/price-estimator/LabCard.vue    |  2 +-
 .../components/price-estimator/LabModal.vue   |  1 +
 .../price-estimator/MachineModal.vue          | 19 +++++++---
 .../price-estimator/StorageModal.vue          | 35 ++++++++++---------
 .../stores/priceEstimatorStore.ts             | 21 ++++++++---
 .../components/price-estimator/types/index.ts |  2 ++
 6 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index 3e855850e3..ffa098cb86 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -195,7 +195,7 @@ const removeStorageById = (storageId: number) => {
             <template v-slot:item.actions="{ item }">
               <div class="d-flex ga-2 justify-end">
                 <v-icon color="medium-emphasis" icon="mdi-pencil" size="small" @click="editCompute(selectedCompute.find((c) => c.id === item.id)!)"></v-icon>
-                <v-icon color="medium-emphasis" icon="mdi-delete" size="small" @click="removeComputeById(item.id)"></v-icon>
+                <v-icon v-show="!item.isDefault" color="medium-emphasis" icon="mdi-delete" size="small" @click="removeComputeById(item.id)"></v-icon>
               </div>
             </template>
 
diff --git a/docs/.vitepress/theme/components/price-estimator/LabModal.vue b/docs/.vitepress/theme/components/price-estimator/LabModal.vue
index 6b4271069c..50419daab8 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabModal.vue
@@ -44,6 +44,7 @@ const save = () => {
     machineSubscription: formData.value.machineSubscription,
     hddSize: Number(formData.value.hddSize),
     nvmeSize: Number(formData.value.nvmeSize),
+    isDefault: true,
   })
   emit("close")
 }
diff --git a/docs/.vitepress/theme/components/price-estimator/MachineModal.vue b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
index 7539fb2a4c..8107021526 100644
--- a/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
@@ -22,14 +22,15 @@ const formData = ref<MachineFormData>({
   gpu: undefined,
   gpu_count: 1,
   subscription: undefined,
+  isDefault: false,
 })
 
-const subscriptions = [
+let subscriptions = ref([
   { text: "Commitment - 1 Year", value: "COMMITMENT_1Y" },
   { text: "Commitment - 3 Years", value: "COMMITMENT_3Y" },
   { text: "On demand", value: "ONDEMAND" },
   { text: "Spot", value: "SPOT" },
-]
+])
 
 const getComputePriceYear = computed((): string | number => {
   if (!formData.value.machine_type || !formData.value.subscription) {
@@ -144,6 +145,7 @@ const save = () => {
       subscription: subscription!,
       gpu: gpu,
       gpuCount: gpuCount,
+      isDefault: formData.value.isDefault!,
     })
   } else {
     // Add new compute
@@ -155,6 +157,7 @@ const save = () => {
       subscription: subscription!,
       gpu: gpu,
       gpu_count: gpuCount,
+      isDefault: formData.value.isDefault!,
     })
   }
 
@@ -166,6 +169,11 @@ onMounted(() => {
     formData.value.id = props.editData.id
     formData.value.name = props.editData.name
     formData.value.subscription = props.editData.subscription
+    formData.value.isDefault = props.editData.isDefault
+
+    if (formData.value.isDefault) {
+      subscriptions.value = subscriptions.value.slice(0, 2)
+    }
 
     if (props.editData.machine_type.includes(" + ")) {
       const parts = props.editData.machine_type.split(" + ")
@@ -178,7 +186,8 @@ onMounted(() => {
     }
   } else {
     formData.value.id = props.computeId
-    formData.value.name = `machine-${props.computeId + 1}`
+    const labName = priceEstimatorStore.labs[props.labId].title
+    formData.value.name = `${labName}-iasss-${props.computeId + 1}`
   }
 })
 </script>
@@ -221,10 +230,10 @@ onMounted(() => {
           <v-col v-show="formData.machine_type" cols="12" sm="6">
             <v-text-field v-model="getComputePriceYear" label="Compute Price / Year" suffix="NOK ex. VAT / Year" readonly variant="outlined"></v-text-field>
           </v-col>
-          <v-col cols="12">
+          <v-col cols="12" v-show="!formData.isDefault">
             <v-select v-model="formData.gpu" :items="getGpus" label="GPU type (optional)" variant="outlined" clearable :disabled="!formData.subscription"></v-select>
           </v-col>
-          <v-col cols="12">
+          <v-col cols="12" v-show="!formData.isDefault">
             <v-number-input v-model="gpuCount" variant="outlined" label="GPU count" :min="1" :max="getMaxGpuCount" :disabled="!formData.gpu"></v-number-input>
           </v-col>
           <v-col v-show="formData.gpu" cols="12" sm="6">
diff --git a/docs/.vitepress/theme/components/price-estimator/StorageModal.vue b/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
index d495305186..6d069fadda 100644
--- a/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted } from "vue"
+import { reactive, onMounted, watch } from "vue"
 import type { StorageFormData, StorageUnit } from "./types"
 import { priceEstimatorStore } from "./stores/priceEstimatorStore"
 
@@ -18,9 +18,24 @@ const formData = reactive<StorageFormData>({
   name: undefined,
   usage: "Archive",
   type: "HDD",
-  size: 1,
+  size: 0.4,
 })
 
+const defaultSizeByUsage: Record<string, number> = {
+  Archive: 0.4,
+  Work: 0.3,
+  Scratch: 0.3,
+}
+
+watch(
+  () => formData.usage,
+  (newUsage) => {
+    if (!props.editData && newUsage && newUsage in defaultSizeByUsage) {
+      formData.size = defaultSizeByUsage[newUsage]
+    }
+  },
+)
+
 const close = () => {
   emit("close")
 }
@@ -74,22 +89,10 @@ onMounted(() => {
               <v-text-field v-model="formData.name" label="Name" required variant="outlined"></v-text-field>
             </v-col>
             <v-col cols="12">
-              <v-select
-                :items="['Archive', 'Work', 'Scratch', 'Home']"
-                v-model="formData.usage"
-                label="Usage"
-                required
-                variant="outlined"
-              ></v-select>
+              <v-select :items="['Archive', 'Work', 'Scratch', 'Home']" v-model="formData.usage" label="Usage" required variant="outlined"></v-select>
             </v-col>
             <v-col cols="12">
-              <v-select
-                :items="['HDD', 'NVME']"
-                v-model="formData.type"
-                label="Type"
-                required
-                variant="outlined"
-              ></v-select>
+              <v-select :items="['HDD', 'NVME']" v-model="formData.type" label="Type" required variant="outlined"></v-select>
             </v-col>
             <v-col cols="12">
               <v-text-field
diff --git a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
index bd4a42ce96..e3c5a2b687 100644
--- a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
+++ b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
@@ -74,6 +74,7 @@ export const priceEstimatorStore = reactive({
                     subscription: comp.subscription,
                     gpu: comp.gpu,
                     gpu_count: comp.gpu_count,
+                    isDefault: comp.isDefault,
                   })
                 }
               }
@@ -156,7 +157,7 @@ export const priceEstimatorStore = reactive({
   },
 
   /* Lab helpers */
-  addLab(payload: { name: string; subscription: string; machineType: string; machineSubscription: string; hddSize: number; nvmeSize: number }) {
+  addLab(payload: { name: string; subscription: string; machineType: string; machineSubscription: string; hddSize: number; nvmeSize: number; isDefault: boolean }) {
     const newLab: LabCard = {
       id: this.labs.length,
       title: payload.name,
@@ -176,13 +177,14 @@ export const priceEstimatorStore = reactive({
       const ram = parseInt(machineTitle[1].split(" ")[0])
       const unit: ComputeUnit = {
         id: 0,
-        name: "machine-1",
+        name: `${payload.name}-home`,
         machine_type: payload.machineType,
         core_count: coreCount,
         ram,
         subscription: payload.machineSubscription as SubscriptionType,
         monthlyPrice: prices.monthlyPrice,
         yearlyPrice: prices.yearlyPrice,
+        isDefault: payload.isDefault,
       }
       newLab.selectedCompute.push(unit)
     }
@@ -482,7 +484,10 @@ export const priceEstimatorStore = reactive({
     }
   },
 
-  addComputeToLab(labId: number, payload: { name: string; machine_type: string; core_count: number; ram: number; subscription: string; gpu?: string; gpu_count?: number }) {
+  addComputeToLab(
+    labId: number,
+    payload: { name: string; machine_type: string; core_count: number; ram: number; subscription: string; gpu?: string; gpu_count?: number; isDefault: boolean },
+  ) {
     const lab = this.labs.find((l) => l.id === labId)
     if (!lab) return
 
@@ -499,6 +504,7 @@ export const priceEstimatorStore = reactive({
       subscription: payload.subscription as SubscriptionType,
       monthlyPrice: prices.monthlyPrice,
       yearlyPrice: prices.yearlyPrice,
+      isDefault: payload.isDefault,
     }
     lab.selectedCompute = lab.selectedCompute || []
     lab.selectedCompute.push(newCompute)
@@ -509,7 +515,7 @@ export const priceEstimatorStore = reactive({
   editComputeInLab(
     labId: number,
     computeId: number,
-    payload: { name: string; machine_type: string; core_count: number; ram: number; subscription: string; gpu?: string; gpuCount?: number },
+    payload: { name: string; machine_type: string; core_count: number; ram: number; subscription: string; gpu?: string; gpuCount?: number; isDefault: boolean },
   ) {
     const lab = this.labs.find((l) => l.id === labId)
     if (!lab || !lab.selectedCompute) return
@@ -529,6 +535,7 @@ export const priceEstimatorStore = reactive({
       subscription: payload.subscription as SubscriptionType,
       monthlyPrice: prices.monthlyPrice,
       yearlyPrice: prices.yearlyPrice,
+      isDefault: payload.isDefault,
     }
 
     this.saveStateToLocal()
@@ -679,6 +686,11 @@ export const priceEstimatorStore = reactive({
 
             if (labData.compute) {
               for (const comp of labData.compute) {
+                let isDefault = false
+                if (comp.name.endsWith("-home")) {
+                  isDefault = true
+                }
+
                 this.addComputeToLab(newLabId, {
                   name: comp.name,
                   machine_type: comp.machine_type,
@@ -687,6 +699,7 @@ export const priceEstimatorStore = reactive({
                   subscription: comp.subscription,
                   gpu: comp.gpu,
                   gpu_count: comp.gpu_count,
+                  isDefault: isDefault,
                 })
               }
             }
diff --git a/docs/.vitepress/theme/components/price-estimator/types/index.ts b/docs/.vitepress/theme/components/price-estimator/types/index.ts
index d9c6c1554d..72d93ae281 100644
--- a/docs/.vitepress/theme/components/price-estimator/types/index.ts
+++ b/docs/.vitepress/theme/components/price-estimator/types/index.ts
@@ -33,6 +33,7 @@ export interface ComputeUnit {
   subscription: SubscriptionType
   monthlyPrice: number
   yearlyPrice: number
+  isDefault: boolean
 }
 
 export interface StorageUnit {
@@ -92,6 +93,7 @@ export interface MachineFormData {
   gpu?: string
   gpu_count?: number
   subscription?: SubscriptionType
+  isDefault?: boolean
 }
 
 export interface StorageFormData {

From 3482c957dd304c44fbb1a029c995aedca4737068 Mon Sep 17 00:00:00 2001
From: Matus Kosut <matus.kosut@ntnu.no>
Date: Fri, 22 May 2026 16:53:30 +0200
Subject: [PATCH 2/5] fix: machine naming

---
 .../theme/components/price-estimator/MachineModal.vue         | 4 ++--
 .../components/price-estimator/stores/priceEstimatorStore.ts  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/MachineModal.vue b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
index 8107021526..c3690f3714 100644
--- a/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
@@ -186,8 +186,8 @@ onMounted(() => {
     }
   } else {
     formData.value.id = props.computeId
-    const labName = priceEstimatorStore.labs[props.labId].title
-    formData.value.name = `${labName}-iasss-${props.computeId + 1}`
+    const labName = priceEstimatorStore.labs[props.labId].title.toLowerCase().replace(" ", "-")
+    formData.value.name = `${labName}-iaas-${props.computeId}`
   }
 })
 </script>
diff --git a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
index e3c5a2b687..474e8c7a16 100644
--- a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
+++ b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
@@ -177,7 +177,7 @@ export const priceEstimatorStore = reactive({
       const ram = parseInt(machineTitle[1].split(" ")[0])
       const unit: ComputeUnit = {
         id: 0,
-        name: `${payload.name}-home`,
+        name: `${payload.name.toLowerCase().replace(" ", "-")}-home`,
         machine_type: payload.machineType,
         core_count: coreCount,
         ram,

From 1c2301cac235b24c696bd1ab67e75030dced2bf1 Mon Sep 17 00:00:00 2001
From: kei5uke <keisuke.konno@ntnu.no>
Date: Fri, 22 May 2026 16:53:31 +0200
Subject: [PATCH 3/5] fix: typo

---
 .../theme/components/price-estimator/MachineModal.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/MachineModal.vue b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
index 8107021526..935aed073c 100644
--- a/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/MachineModal.vue
@@ -187,7 +187,7 @@ onMounted(() => {
   } else {
     formData.value.id = props.computeId
     const labName = priceEstimatorStore.labs[props.labId].title
-    formData.value.name = `${labName}-iasss-${props.computeId + 1}`
+    formData.value.name = `${labName}-iaas-${props.computeId + 1}`
   }
 })
 </script>

From be11b5f3ee21fdf2c141e62a3e513d2674d0d7f9 Mon Sep 17 00:00:00 2001
From: Matus Kosut <matus.kosut@ntnu.no>
Date: Fri, 22 May 2026 17:07:37 +0200
Subject: [PATCH 4/5] feat: keep delete on home machine as readonly with
 warning

---
 .../components/price-estimator/LabCard.vue    |  6 +++---
 .../price-estimator/StorageModal.vue          | 19 ++-----------------
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index 26f585805c..9387f0065a 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -140,7 +140,7 @@ const openSnackbar = (message: string) => {
 
 const removeComputeById = (computeId: number) => {
   if (computeId === selectedCompute.value[0]?.id) {
-    openSnackbar("Cannot remove the default machine")
+    openSnackbar("Cannot remove the home machine. Home machine is an essential component of your lab.")
     return
   }
   priceEstimatorStore.removeComputeFromLab(props.lab.id, computeId)
@@ -192,7 +192,7 @@ const removeStorageById = (storageId: number) => {
             <template v-slot:item.actions="{ item }">
               <div class="d-flex ga-2 justify-end">
                 <v-icon color="medium-emphasis" icon="mdi-pencil" size="small" @click="editCompute(selectedCompute.find((c) => c.id === item.id)!)"></v-icon>
-                <v-icon v-show="!item.isDefault" color="medium-emphasis" icon="mdi-delete" size="small" @click="removeComputeById(item.id)"></v-icon>
+                <v-icon :readonly="!item.isDefault" color="medium-emphasis" icon="mdi-delete" size="small" @click="removeComputeById(item.id)"></v-icon>
               </div>
             </template>
 
@@ -350,7 +350,7 @@ const removeStorageById = (storageId: number) => {
       <StorageModal :lab-id="lab.id" :storage-id="lab.selectedStorage.length" :edit-data="editingStorageItem" @close="closeStorageModal" />
     </v-dialog>
 
-    <v-snackbar v-model="snackbar.show">{{ snackbar.message }}</v-snackbar>
+    <v-snackbar color="orange-darken-4" v-model="snackbar.show">{{ snackbar.message }}</v-snackbar>
   </v-container>
 </template>
 
diff --git a/docs/.vitepress/theme/components/price-estimator/StorageModal.vue b/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
index 6d069fadda..9cc896a030 100644
--- a/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
+++ b/docs/.vitepress/theme/components/price-estimator/StorageModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, watch } from "vue"
+import { reactive, onMounted } from "vue"
 import type { StorageFormData, StorageUnit } from "./types"
 import { priceEstimatorStore } from "./stores/priceEstimatorStore"
 
@@ -18,24 +18,9 @@ const formData = reactive<StorageFormData>({
   name: undefined,
   usage: "Archive",
   type: "HDD",
-  size: 0.4,
+  size: 1,
 })
 
-const defaultSizeByUsage: Record<string, number> = {
-  Archive: 0.4,
-  Work: 0.3,
-  Scratch: 0.3,
-}
-
-watch(
-  () => formData.usage,
-  (newUsage) => {
-    if (!props.editData && newUsage && newUsage in defaultSizeByUsage) {
-      formData.size = defaultSizeByUsage[newUsage]
-    }
-  },
-)
-
 const close = () => {
   emit("close")
 }

From 36e752682ec09121d2862bc353f7e2ae562a798b Mon Sep 17 00:00:00 2001
From: Matus Kosut <matus.kosut@ntnu.no>
Date: Fri, 22 May 2026 17:24:47 +0200
Subject: [PATCH 5/5] feat: color for disabled btn and home machine matching

---
 .../theme/components/price-estimator/LabCard.vue      | 11 ++++++-----
 .../price-estimator/stores/priceEstimatorStore.ts     |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/.vitepress/theme/components/price-estimator/LabCard.vue b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
index 9387f0065a..7bdfebc66e 100644
--- a/docs/.vitepress/theme/components/price-estimator/LabCard.vue
+++ b/docs/.vitepress/theme/components/price-estimator/LabCard.vue
@@ -138,12 +138,13 @@ const openSnackbar = (message: string) => {
   snackbar.value.show = true
 }
 
-const removeComputeById = (computeId: number) => {
-  if (computeId === selectedCompute.value[0]?.id) {
+const removeMachine = (machine: ComputeUnit) => {
+  // if (machine.id === selectedCompute.value[0]?.id) {
+  if (machine.isDefault) {
     openSnackbar("Cannot remove the home machine. Home machine is an essential component of your lab.")
     return
   }
-  priceEstimatorStore.removeComputeFromLab(props.lab.id, computeId)
+  priceEstimatorStore.removeComputeFromLab(props.lab.id, machine.id)
 }
 
 const removeStorageById = (storageId: number) => {
@@ -191,8 +192,8 @@ const removeStorageById = (storageId: number) => {
             </template>
             <template v-slot:item.actions="{ item }">
               <div class="d-flex ga-2 justify-end">
-                <v-icon color="medium-emphasis" icon="mdi-pencil" size="small" @click="editCompute(selectedCompute.find((c) => c.id === item.id)!)"></v-icon>
-                <v-icon :readonly="!item.isDefault" color="medium-emphasis" icon="mdi-delete" size="small" @click="removeComputeById(item.id)"></v-icon>
+                <v-icon icon="mdi-pencil" size="small" @click="editCompute(selectedCompute.find((c) => c.id === item.id)!)"></v-icon>
+                <v-icon :color="item.isDefault ? 'rgba(0, 0, 0, 0.3)' : ''" icon="mdi-delete" size="small" @click="removeMachine(item)"></v-icon>
               </div>
             </template>
 
diff --git a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
index 474e8c7a16..8efefcd1c5 100644
--- a/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
+++ b/docs/.vitepress/theme/components/price-estimator/stores/priceEstimatorStore.ts
@@ -687,7 +687,7 @@ export const priceEstimatorStore = reactive({
             if (labData.compute) {
               for (const comp of labData.compute) {
                 let isDefault = false
-                if (comp.name.endsWith("-home")) {
+                if (comp.name === `${labData.name.toLowerCase().replace(" ", "-")}-home`) {
                   isDefault = true
                 }