Skip to content

vmm: Allow updating non-kms VMs #305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kvinwang merged 1 commit into from
Aug 25, 2025
Merged

vmm: Allow updating non-kms VMs #305

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 81 additions & 84 deletions vmm/src/console.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -686,8 +686,8 @@ <h2>Deploy a new instance</h2>

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

Expand Down Expand Up @@ -867,11 +867,8 @@ <h2>VM List</h2>
<button class="warning" @click="removeVm(vm)" title="Remove VM">
<i class="fas fa-trash-alt"></i> Remove
</button>
<button v-if="kmsEnabled(vm)" @click="showUpgradeDialog(vm)"
title="Upgrade VM" :disabled="loadingVMDetails">
<button @click="showUpgradeDialog(vm)" title="Upgrade VM">
<i class="fas fa-sync-alt"></i> Update
<span v-if="loadingVMDetails && !vm.configuration"
class="loading-spinner"></span>
</button>
</div>
</div>
Expand Down Expand Up @@ -1048,19 +1045,21 @@ <h4 style="margin: 0 0 12px 0;">Pre-launch Script</h4>
<div class="dialog">
<h3>Update VM Config</h3>

<div class="form-group">
<label for="vcpu">Number of vCPUs</label>
<input id="vcpu" v-model.number="upgradeDialog.vcpu" type="number" placeholder="vCPUs" required>
</div>
<div class="form-group">
<label for="memory">Memory</label>
<div style="display: flex; align-items: center; gap: 8px;">
<input id="memory" v-model.number="upgradeDialog.memoryValue" type="number" placeholder="Memory"
style="flex: 1;" required>
<select v-model="upgradeDialog.memoryUnit" style="width: 80px;">
<option value="MB">MB</option>
<option value="GB">GB</option>
</select>
<div v-if="kmsEnabled(upgradeDialog.vm)">
<div class="form-group">
<label for="vcpu">Number of vCPUs</label>
<input id="vcpu" v-model.number="upgradeDialog.vcpu" type="number" placeholder="vCPUs" required>
</div>
<div class="form-group">
<label for="memory">Memory</label>
<div style="display: flex; align-items: center; gap: 8px;">
<input id="memory" v-model.number="upgradeDialog.memoryValue" type="number" placeholder="Memory"
style="flex: 1;" required>
<select v-model="upgradeDialog.memoryUnit" style="width: 80px;">
<option value="MB">MB</option>
<option value="GB">GB</option>
</select>
</div>
</div>
</div>

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

<div class="form-group">
<label for="image">Image</label>
<select id="vmImage" v-model="upgradeDialog.image" required>
<option value="" disabled>Select an image</option>
<option v-for="image in availableImages" :key="image.name" :value="image.name">
{{ image.name }}
</option>
</select>
</div>
<div v-if="kmsEnabled(upgradeDialog.vm)">
<div class="form-group">
<label for="image">Image</label>
<select id="vmImage" v-model="upgradeDialog.image" required>
<option value="" disabled>Select an image</option>
<option v-for="image in availableImages" :key="image.name" :value="image.name">
{{ image.name }}
</option>
</select>
</div>

<!-- GPU Configuration -->
<div class="form-group" v-if="availableGpus.length > 0">
<div class="form-check">
<label class="checkbox-container">
<input type="checkbox" v-model="upgradeDialog.updateGpuConfig">
<span class="checkbox-label">Update GPU configuration</span>
</label>
</div>

<!-- GPU Configuration -->
<div class="form-group" v-if="availableGpus.length > 0">
<div class="form-check">
<div v-if="upgradeDialog.updateGpuConfig">
<gpu-config-editor :available-gpus="availableGpus" :allow-attach-all="allowAttachAllGpus"
v-model:gpus="upgradeDialog.selectedGpus" v-model:attach-all="upgradeDialog.attachAllGpus">
</gpu-config-editor>
</div>
</div>
<div class="form-check" style="margin-top: 16px;">
<label class="checkbox-container">
<input type="checkbox" v-model="upgradeDialog.updateGpuConfig">
<span class="checkbox-label">Update GPU configuration</span>
<input type="checkbox" v-model="upgradeDialog.updateCompose">
<span class="checkbox-label">Update App Compose</span>
</label>
</div>

<div v-if="upgradeDialog.updateGpuConfig">
<gpu-config-editor :available-gpus="availableGpus" :allow-attach-all="allowAttachAllGpus" v-model:gpus="upgradeDialog.selectedGpus"
v-model:attach-all="upgradeDialog.attachAllGpus">
</gpu-config-editor>
</div>
</div>

<div class="form-check" style="margin-top: 16px;">
<label class="checkbox-container">
<input type="checkbox" v-model="upgradeDialog.updateCompose">
<span class="checkbox-label">Update App Compose</span>
</label>
</div>
<div v-if="upgradeDialog.updateCompose">
<div class="form-group">
<label for="upgradeCompose">Docker Compose File</label>
<div style="display: flex; flex-direction: column; gap: 10px;">
<div style="display: flex; align-items: center; gap: 10px;">
<button type="button" class="action-btn"
style="padding: 6px 12px; background-color: #f0f0f0; color: #333; border: 1px solid #ddd;"
onclick="document.getElementById('upgradeFile').click()">Upload File</button>
<span style="color: #666; font-size: 0.9em;">or paste below</span>
<input id="upgradeFile" type="file" @change="loadUpgradeFile" accept=".yml,.yaml,.txt"
style="display: none;">
<div v-if="upgradeDialog.updateCompose">
<div class="form-group">
<label for="upgradeCompose">Docker Compose File</label>
<div style="display: flex; flex-direction: column; gap: 10px;">
<div style="display: flex; align-items: center; gap: 10px;">
<button type="button" class="action-btn"
style="padding: 6px 12px; background-color: #f0f0f0; color: #333; border: 1px solid #ddd;"
onclick="document.getElementById('upgradeFile').click()">Upload File</button>
<span style="color: #666; font-size: 0.9em;">or paste below</span>
<input id="upgradeFile" type="file" @change="loadUpgradeFile" accept=".yml,.yaml,.txt"
style="display: none;">
</div>
<textarea id="upgradeCompose" v-model="upgradeDialog.dockerComposeFile"
placeholder="Paste your new docker-compose.yml here" rows="8" required></textarea>
</div>
<textarea id="upgradeCompose" v-model="upgradeDialog.dockerComposeFile"
placeholder="Paste your new docker-compose.yml here" rows="8" required></textarea>
</div>
<div class="form-group">
<label for="upgradePrelauncher">Pre-launch Script</label>
<textarea id="upgradePrelauncher" v-model="upgradeDialog.preLaunchScript"
placeholder="Optional: Bash script to run before starting containers"></textarea>
</div>
<div class="app-id-preview">
Compose Hash: 0x{{ upgradeComposeHashPreview }}
</div>
</div>
<div class="form-group">
<label for="upgradePrelauncher">Pre-launch Script</label>
<textarea id="upgradePrelauncher" v-model="upgradeDialog.preLaunchScript"
placeholder="Optional: Bash script to run before starting containers"></textarea>
</div>

<div class="form-group">
<label for="userConfig">User Config</label>
<textarea id="userConfig" v-model="upgradeDialog.user_config"
placeholder="Optional: User config to be put at /dstack/.user-config in the CVM"></textarea>
<div class="form-check" style="margin-top: 16px;">
<label class="checkbox-container">
<input type="checkbox" v-model="upgradeDialog.resetSecrets">
<span class="checkbox-label">Reset secrets</span>
</label>
</div>
<div class="app-id-preview">
Compose Hash: 0x{{ upgradeComposeHashPreview }}
<div v-if="upgradeDialog.resetSecrets" style="margin-top: 16px;">
<encrypted-env-editor :env-vars="upgradeDialog.encryptedEnvs"></encrypted-env-editor>
</div>
</div>
<div class="form-check" style="margin-top: 16px;">
<label class="checkbox-container">
<input type="checkbox" v-model="upgradeDialog.resetSecrets">
<span class="checkbox-label">Reset secrets</span>
</label>
</div>
<div v-if="kmsEnabled(upgradeDialog.vm) && upgradeDialog.resetSecrets" style="margin-top: 16px;">
<encrypted-env-editor :env-vars="upgradeDialog.encryptedEnvs"></encrypted-env-editor>
</div>

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

<div class="form-group">
<label for="userConfig">User Config</label>
<textarea id="userConfig" v-model="upgradeDialog.user_config"
placeholder="Optional: User config to be put at /dstack/.user-config in the CVM"></textarea>
</div>

<div class="vm-actions">
<button class="action-btn upgrade" @click="upgradeVM">Upgrade</button>
<button class="action-btn remove" @click="upgradeDialog.show = false">Cancel</button>
Expand Down Expand Up @@ -2208,9 +2208,6 @@ <h3>Derive VM</h3>
};

const toggleDropdown = (event, vm) => {
if (!vm.configuration) {
loadVMDetails(vm.id);
}
// Close all other dropdowns first
document.querySelectorAll('.dropdown-content').forEach(dropdown => {
if (dropdown.id !== 'dropdown-' + vm.id) {
Expand Down