Skip to content

Commit a2a3085

Browse files
kvinwangkvinwang
committed
vmm: Allow upgrading non-kms VMs
1 parent c7fa72d commit a2a3085

File tree

1 file changed

+81
-84
lines changed

1 file changed

+81
-84
lines changed

‎vmm/src/console.html‎

Lines changed: 81 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -686,8 +686,8 @@ <h2>Deploy a new instance</h2>
686686

687687
<div class="form-group" v-if="availableGpus.length > 0">
688688
<label for="gpuSelection">GPU</label>
689-
<gpu-config-editor :available-gpus="availableGpus" :allow-attach-all="allowAttachAllGpus" v-model:gpus="vmForm.selectedGpus"
690-
v-model:attach-all="vmForm.attachAllGpus">
689+
<gpu-config-editor :available-gpus="availableGpus" :allow-attach-all="allowAttachAllGpus"
690+
v-model:gpus="vmForm.selectedGpus" v-model:attach-all="vmForm.attachAllGpus">
691691
</gpu-config-editor>
692692
</div>
693693

@@ -867,11 +867,8 @@ <h2>VM List</h2>
867867
<button class="warning" @click="removeVm(vm)" title="Remove VM">
868868
<i class="fas fa-trash-alt"></i> Remove
869869
</button>
870-
<button v-if="kmsEnabled(vm)" @click="showUpgradeDialog(vm)"
871-
title="Upgrade VM" :disabled="loadingVMDetails">
870+
<button @click="showUpgradeDialog(vm)" title="Upgrade VM">
872871
<i class="fas fa-sync-alt"></i> Update
873-
<span v-if="loadingVMDetails && !vm.configuration"
874-
class="loading-spinner"></span>
875872
</button>
876873
</div>
877874
</div>
@@ -1048,19 +1045,21 @@ <h4 style="margin: 0 0 12px 0;">Pre-launch Script</h4>
10481045
<div class="dialog">
10491046
<h3>Update VM Config</h3>
10501047

1051-
<div class="form-group">
1052-
<label for="vcpu">Number of vCPUs</label>
1053-
<input id="vcpu" v-model.number="upgradeDialog.vcpu" type="number" placeholder="vCPUs" required>
1054-
</div>
1055-
<div class="form-group">
1056-
<label for="memory">Memory</label>
1057-
<div style="display: flex; align-items: center; gap: 8px;">
1058-
<input id="memory" v-model.number="upgradeDialog.memoryValue" type="number" placeholder="Memory"
1059-
style="flex: 1;" required>
1060-
<select v-model="upgradeDialog.memoryUnit" style="width: 80px;">
1061-
<option value="MB">MB</option>
1062-
<option value="GB">GB</option>
1063-
</select>
1048+
<div v-if="kmsEnabled(upgradeDialog.vm)">
1049+
<div class="form-group">
1050+
<label for="vcpu">Number of vCPUs</label>
1051+
<input id="vcpu" v-model.number="upgradeDialog.vcpu" type="number" placeholder="vCPUs" required>
1052+
</div>
1053+
<div class="form-group">
1054+
<label for="memory">Memory</label>
1055+
<div style="display: flex; align-items: center; gap: 8px;">
1056+
<input id="memory" v-model.number="upgradeDialog.memoryValue" type="number" placeholder="Memory"
1057+
style="flex: 1;" required>
1058+
<select v-model="upgradeDialog.memoryUnit" style="width: 80px;">
1059+
<option value="MB">MB</option>
1060+
<option value="GB">GB</option>
1061+
</select>
1062+
</div>
10641063
</div>
10651064
</div>
10661065

@@ -1070,83 +1069,84 @@ <h3>Update VM Config</h3>
10701069
placeholder="Disk size in GB" required>
10711070
</div>
10721071

1073-
<div class="form-group">
1074-
<label for="image">Image</label>
1075-
<select id="vmImage" v-model="upgradeDialog.image" required>
1076-
<option value="" disabled>Select an image</option>
1077-
<option v-for="image in availableImages" :key="image.name" :value="image.name">
1078-
{{ image.name }}
1079-
</option>
1080-
</select>
1081-
</div>
1072+
<div v-if="kmsEnabled(upgradeDialog.vm)">
1073+
<div class="form-group">
1074+
<label for="image">Image</label>
1075+
<select id="vmImage" v-model="upgradeDialog.image" required>
1076+
<option value="" disabled>Select an image</option>
1077+
<option v-for="image in availableImages" :key="image.name" :value="image.name">
1078+
{{ image.name }}
1079+
</option>
1080+
</select>
1081+
</div>
1082+
1083+
<!-- GPU Configuration -->
1084+
<div class="form-group" v-if="availableGpus.length > 0">
1085+
<div class="form-check">
1086+
<label class="checkbox-container">
1087+
<input type="checkbox" v-model="upgradeDialog.updateGpuConfig">
1088+
<span class="checkbox-label">Update GPU configuration</span>
1089+
</label>
1090+
</div>
10821091

1083-
<!-- GPU Configuration -->
1084-
<div class="form-group" v-if="availableGpus.length > 0">
1085-
<div class="form-check">
1092+
<div v-if="upgradeDialog.updateGpuConfig">
1093+
<gpu-config-editor :available-gpus="availableGpus" :allow-attach-all="allowAttachAllGpus"
1094+
v-model:gpus="upgradeDialog.selectedGpus" v-model:attach-all="upgradeDialog.attachAllGpus">
1095+
</gpu-config-editor>
1096+
</div>
1097+
</div>
1098+
<div class="form-check" style="margin-top: 16px;">
10861099
<label class="checkbox-container">
1087-
<input type="checkbox" v-model="upgradeDialog.updateGpuConfig">
1088-
<span class="checkbox-label">Update GPU configuration</span>
1100+
<input type="checkbox" v-model="upgradeDialog.updateCompose">
1101+
<span class="checkbox-label">Update App Compose</span>
10891102
</label>
10901103
</div>
1091-
1092-
<div v-if="upgradeDialog.updateGpuConfig">
1093-
<gpu-config-editor :available-gpus="availableGpus" :allow-attach-all="allowAttachAllGpus" v-model:gpus="upgradeDialog.selectedGpus"
1094-
v-model:attach-all="upgradeDialog.attachAllGpus">
1095-
</gpu-config-editor>
1096-
</div>
1097-
</div>
1098-
1099-
<div class="form-check" style="margin-top: 16px;">
1100-
<label class="checkbox-container">
1101-
<input type="checkbox" v-model="upgradeDialog.updateCompose">
1102-
<span class="checkbox-label">Update App Compose</span>
1103-
</label>
1104-
</div>
1105-
<div v-if="upgradeDialog.updateCompose">
1106-
<div class="form-group">
1107-
<label for="upgradeCompose">Docker Compose File</label>
1108-
<div style="display: flex; flex-direction: column; gap: 10px;">
1109-
<div style="display: flex; align-items: center; gap: 10px;">
1110-
<button type="button" class="action-btn"
1111-
style="padding: 6px 12px; background-color: #f0f0f0; color: #333; border: 1px solid #ddd;"
1112-
onclick="document.getElementById('upgradeFile').click()">Upload File</button>
1113-
<span style="color: #666; font-size: 0.9em;">or paste below</span>
1114-
<input id="upgradeFile" type="file" @change="loadUpgradeFile" accept=".yml,.yaml,.txt"
1115-
style="display: none;">
1104+
<div v-if="upgradeDialog.updateCompose">
1105+
<div class="form-group">
1106+
<label for="upgradeCompose">Docker Compose File</label>
1107+
<div style="display: flex; flex-direction: column; gap: 10px;">
1108+
<div style="display: flex; align-items: center; gap: 10px;">
1109+
<button type="button" class="action-btn"
1110+
style="padding: 6px 12px; background-color: #f0f0f0; color: #333; border: 1px solid #ddd;"
1111+
onclick="document.getElementById('upgradeFile').click()">Upload File</button>
1112+
<span style="color: #666; font-size: 0.9em;">or paste below</span>
1113+
<input id="upgradeFile" type="file" @change="loadUpgradeFile" accept=".yml,.yaml,.txt"
1114+
style="display: none;">
1115+
</div>
1116+
<textarea id="upgradeCompose" v-model="upgradeDialog.dockerComposeFile"
1117+
placeholder="Paste your new docker-compose.yml here" rows="8" required></textarea>
11161118
</div>
1117-
<textarea id="upgradeCompose" v-model="upgradeDialog.dockerComposeFile"
1118-
placeholder="Paste your new docker-compose.yml here" rows="8" required></textarea>
1119+
</div>
1120+
<div class="form-group">
1121+
<label for="upgradePrelauncher">Pre-launch Script</label>
1122+
<textarea id="upgradePrelauncher" v-model="upgradeDialog.preLaunchScript"
1123+
placeholder="Optional: Bash script to run before starting containers"></textarea>
1124+
</div>
1125+
<div class="app-id-preview">
1126+
Compose Hash: 0x{{ upgradeComposeHashPreview }}
11191127
</div>
11201128
</div>
1121-
<div class="form-group">
1122-
<label for="upgradePrelauncher">Pre-launch Script</label>
1123-
<textarea id="upgradePrelauncher" v-model="upgradeDialog.preLaunchScript"
1124-
placeholder="Optional: Bash script to run before starting containers"></textarea>
1125-
</div>
1126-
1127-
<div class="form-group">
1128-
<label for="userConfig">User Config</label>
1129-
<textarea id="userConfig" v-model="upgradeDialog.user_config"
1130-
placeholder="Optional: User config to be put at /dstack/.user-config in the CVM"></textarea>
1129+
<div class="form-check" style="margin-top: 16px;">
1130+
<label class="checkbox-container">
1131+
<input type="checkbox" v-model="upgradeDialog.resetSecrets">
1132+
<span class="checkbox-label">Reset secrets</span>
1133+
</label>
11311134
</div>
1132-
<div class="app-id-preview">
1133-
Compose Hash: 0x{{ upgradeComposeHashPreview }}
1135+
<div v-if="upgradeDialog.resetSecrets" style="margin-top: 16px;">
1136+
<encrypted-env-editor :env-vars="upgradeDialog.encryptedEnvs"></encrypted-env-editor>
11341137
</div>
11351138
</div>
1136-
<div class="form-check" style="margin-top: 16px;">
1137-
<label class="checkbox-container">
1138-
<input type="checkbox" v-model="upgradeDialog.resetSecrets">
1139-
<span class="checkbox-label">Reset secrets</span>
1140-
</label>
1141-
</div>
1142-
<div v-if="kmsEnabled(upgradeDialog.vm) && upgradeDialog.resetSecrets" style="margin-top: 16px;">
1143-
<encrypted-env-editor :env-vars="upgradeDialog.encryptedEnvs"></encrypted-env-editor>
1144-
</div>
11451139

11461140
<div class="form-group full-width" v-if="config.portMappingEnabled">
11471141
<port-mapping-editor :ports="upgradeDialog.ports"></port-mapping-editor>
11481142
</div>
11491143

1144+
<div class="form-group">
1145+
<label for="userConfig">User Config</label>
1146+
<textarea id="userConfig" v-model="upgradeDialog.user_config"
1147+
placeholder="Optional: User config to be put at /dstack/.user-config in the CVM"></textarea>
1148+
</div>
1149+
11501150
<div class="vm-actions">
11511151
<button class="action-btn upgrade" @click="upgradeVM">Upgrade</button>
11521152
<button class="action-btn remove" @click="upgradeDialog.show = false">Cancel</button>
@@ -2208,9 +2208,6 @@ <h3>Derive VM</h3>
22082208
};
22092209

22102210
const toggleDropdown = (event, vm) => {
2211-
if (!vm.configuration) {
2212-
loadVMDetails(vm.id);
2213-
}
22142211
// Close all other dropdowns first
22152212
document.querySelectorAll('.dropdown-content').forEach(dropdown => {
22162213
if (dropdown.id !== 'dropdown-' + vm.id) {

0 commit comments

Comments
 (0)