feat: default machine, storage names, sizes, limit on options

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) {
-    openSnackbar("Cannot remove the default machine")
+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 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>
 
@@ -350,7 +351,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>
 

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")
 }

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.toLowerCase().replace(" ", "-")
+    formData.value.name = `${labName}-iaas-${props.computeId}`
   }
 })
 </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">

docs/.vitepress/theme/components/price-estimator/StorageModal.vue

@@ -74,22 +74,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

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.toLowerCase().replace(" ", "-")}-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 === `${labData.name.toLowerCase().replace(" ", "-")}-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,
                 })
               }
             }

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 {