Skip to content

feat(vmm-ui): Add init_script support and improve encrypted env visibility #473

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
Jan 27, 2026
+136 −82
Merged

feat(vmm-ui): Add init_script support and improve encrypted env visibility #473

Show file tree
Hide file tree
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
121 changes: 73 additions & 48 deletions vmm/src/console_v1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2056,8 +2056,17 @@ <h2>Deploy a new instance</h2>
</div>

<div class="form-group full-width">
<label for="preLaunchScript">Pre-launch Script</label>
<textarea id="preLaunchScript" v-model="form.preLaunchScript" placeholder="Optional script executed before launch" rows="6"></textarea>
<label for="initScript">Init Script
<span class="help-icon" title="Executed before dockerd starts. Use for early system setup.">?</span>
</label>
<textarea id="initScript" v-model="form.initScript" placeholder="Optional script executed before dockerd startup" rows="4"></textarea>
</div>

<div class="form-group full-width">
<label for="preLaunchScript">Pre-launch Script
<span class="help-icon" title="Executed after dockerd starts, before containers launch.">?</span>
</label>
<textarea id="preLaunchScript" v-model="form.preLaunchScript" placeholder="Optional script executed before container launch" rows="4"></textarea>
</div>

<div class="form-group full-width">
Expand Down Expand Up @@ -2101,7 +2110,7 @@ <h2>Deploy a new instance</h2>
</div>
</div>

<div class="form-group full-width" v-if="kmsAvailable">
<div class="form-group full-width" v-if="form.key_provider === 'kms'">
<encrypted-env-editor :env-vars="form.encryptedEnvs" />
</div>

Expand Down Expand Up @@ -2186,42 +2195,50 @@ <h3>Update VM Config</h3>
<input id="upgradeDiskSize" v-model.number="dialog.disk_size" type="number" placeholder="Disk size in GB" required>
</div>

<div v-if="kmsEnabled">
<div class="form-group">
<label for="upgradeImage">Image</label>
<select id="upgradeImage" v-model="dialog.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" class="form-group">
<label for="upgradeImage">Image</label>
<select id="upgradeImage" v-model="dialog.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 class="checkbox-grid">
<label><input type="checkbox" v-model="dialog.updateCompose"> Update App Compose</label>
</div>
<div class="checkbox-grid">
<label><input type="checkbox" v-model="dialog.updateCompose"> Update App Compose</label>
</div>

<div v-if="dialog.updateCompose" class="compose-update">
<div class="form-group">
<label for="upgradeCompose">Docker Compose File</label>
<div class="file-input-row">
<div class="file-input-actions">
<button type="button" class="action-btn" @click="$refs.composeFile.click()">Upload File</button>
<span class="help-text">or paste below</span>
<input ref="composeFile" type="file" accept=".yml,.yaml,.txt" @change="$emit('load-compose', $event)">
</div>
<textarea id="upgradeCompose" v-model="dialog.dockerComposeFile" placeholder="Paste your new docker-compose.yml here" rows="8" required></textarea>
<div v-if="dialog.updateCompose" class="compose-update">
<div class="form-group">
<label for="upgradeCompose">Docker Compose File</label>
<div class="file-input-row">
<div class="file-input-actions">
<button type="button" class="action-btn" @click="$refs.composeFile.click()">Upload File</button>
<span class="help-text">or paste below</span>
<input ref="composeFile" type="file" accept=".yml,.yaml,.txt" @change="$emit('load-compose', $event)">
</div>
</div>
<div class="form-group">
<label for="upgradePrelauncher">Pre-launch Script</label>
<textarea id="upgradePrelauncher" v-model="dialog.preLaunchScript" placeholder="Optional: Bash script to run before starting containers"></textarea>
</div>
<div class="app-id-preview">
Compose Hash: 0x{{ composeHashPreview }}
<textarea id="upgradeCompose" v-model="dialog.dockerComposeFile" placeholder="Paste your new docker-compose.yml here" rows="8" required></textarea>
</div>
</div>
<div class="form-group">
<label for="upgradeInitScript">Init Script
<span class="help-icon" title="Executed before dockerd starts. Use for early system setup.">?</span>
</label>
<textarea id="upgradeInitScript" v-model="dialog.initScript" placeholder="Optional: Bash script executed before dockerd startup" rows="3"></textarea>
</div>
<div class="form-group">
<label for="upgradePrelauncher">Pre-launch Script
<span class="help-icon" title="Executed after dockerd starts, before containers launch.">?</span>
</label>
<textarea id="upgradePrelauncher" v-model="dialog.preLaunchScript" placeholder="Optional: Bash script to run before starting containers" rows="3"></textarea>
</div>
<div class="app-id-preview">
Compose Hash: 0x{{ composeHashPreview }}
</div>
</div>

<div v-if="kmsEnabled">
<div class="checkbox-grid">
<label><input type="checkbox" v-model="dialog.resetSecrets"> Reset secrets</label>
</div>
Expand Down Expand Up @@ -2342,6 +2359,7 @@ <h3>Derive VM</h3>
name: '',
image: '',
dockerComposeFile: '',
initScript: '',
preLaunchScript,
vcpu: 1,
memory: 2048,
Expand Down Expand Up @@ -2378,6 +2396,7 @@ <h3>Derive VM</h3>
vm: null,
updateCompose: false,
dockerComposeFile: '',
initScript: '',
preLaunchScript: '',
encryptedEnvs: [],
resetSecrets: false,
Expand Down Expand Up @@ -2816,7 +2835,7 @@ <h3>Derive VM</h3>
.join('');
}
async function makeAppComposeFile() {
var _a;
var _a, _b;
const appCompose = {
manifest_version: 2,
name: vmForm.value.name,
Expand Down Expand Up @@ -2844,7 +2863,10 @@ <h3>Derive VM</h3>
if (vmForm.value.storage_fs) {
appCompose.storage_fs = vmForm.value.storage_fs;
}
if ((_a = vmForm.value.preLaunchScript) === null || _a === void 0 ? void 0 : _a.trim()) {
if ((_a = vmForm.value.initScript) === null || _a === void 0 ? void 0 : _a.trim()) {
appCompose.init_script = vmForm.value.initScript;
}
if ((_b = vmForm.value.preLaunchScript) === null || _b === void 0 ? void 0 : _b.trim()) {
appCompose.pre_launch_script = vmForm.value.preLaunchScript;
}
const swapBytes = Math.max(0, Math.round(vmForm.value.swap_size || 0));
Expand All @@ -2863,7 +2885,7 @@ <h3>Derive VM</h3>
return JSON.stringify(appCompose);
}
async function makeUpdateComposeFile() {
var _a;
var _a, _b;
const currentAppCompose = updateDialog.value.vm.appCompose;
const appCompose = {
...currentAppCompose,
Expand All @@ -2877,7 +2899,8 @@ <h3>Derive VM</h3>
appCompose.launch_token_hash = await calcComposeHash(launchToken.value);
}
}
appCompose.pre_launch_script = (_a = updateDialog.value.preLaunchScript) === null || _a === void 0 ? void 0 : _a.trim();
appCompose.init_script = ((_a = updateDialog.value.initScript) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
appCompose.pre_launch_script = ((_b = updateDialog.value.preLaunchScript) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
const swapBytes = Math.max(0, Math.round(updateDialog.value.swap_size || 0));
if (swapBytes > 0) {
appCompose.swap_size = swapBytes;
Expand Down Expand Up @@ -2955,6 +2978,7 @@ <h3>Derive VM</h3>
vm: detailedVm,
updateCompose: false,
dockerComposeFile: detailedVm.appCompose.docker_compose_file || '',
initScript: detailedVm.appCompose.init_script || '',
preLaunchScript: detailedVm.appCompose.pre_launch_script || '',
encryptedEnvs: [],
resetSecrets: false,
Expand Down Expand Up @@ -3145,7 +3169,7 @@ <h3>Derive VM</h3>
return 'none';
}
async function showCloneConfig(vm) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
const theVm = await ensureVmDetails(vm);
if (!((_a = theVm === null || theVm === void 0 ? void 0 : theVm.configuration) === null || _a === void 0 ? void 0 : _a.compose_file)) {
alert('Compose file not available for this VM. Please open its details first.');
Expand All @@ -3157,29 +3181,30 @@ <h3>Derive VM</h3>
name: `${config.name || vm.name}`,
image: config.image || '',
dockerComposeFile: ((_b = theVm.appCompose) === null || _b === void 0 ? void 0 : _b.docker_compose_file) || '',
preLaunchScript: ((_c = theVm.appCompose) === null || _c === void 0 ? void 0 : _c.pre_launch_script) || '',
initScript: ((_c = theVm.appCompose) === null || _c === void 0 ? void 0 : _c.init_script) || '',
preLaunchScript: ((_d = theVm.appCompose) === null || _d === void 0 ? void 0 : _d.pre_launch_script) || '',
vcpu: config.vcpu || 1,
memory: config.memory || 0,
memoryValue: autoMemoryDisplay(config.memory || 0).memoryValue,
memoryUnit: autoMemoryDisplay(config.memory || 0).memoryUnit,
swap_size: ((_d = theVm.appCompose) === null || _d === void 0 ? void 0 : _d.swap_size) || 0,
swapValue: autoMemoryDisplay(bytesToMB(((_e = theVm.appCompose) === null || _e === void 0 ? void 0 : _e.swap_size) || 0)).memoryValue,
swapUnit: autoMemoryDisplay(bytesToMB(((_f = theVm.appCompose) === null || _f === void 0 ? void 0 : _f.swap_size) || 0)).memoryUnit,
swap_size: ((_e = theVm.appCompose) === null || _e === void 0 ? void 0 : _e.swap_size) || 0,
swapValue: autoMemoryDisplay(bytesToMB(((_f = theVm.appCompose) === null || _f === void 0 ? void 0 : _f.swap_size) || 0)).memoryValue,
swapUnit: autoMemoryDisplay(bytesToMB(((_g = theVm.appCompose) === null || _g === void 0 ? void 0 : _g.swap_size) || 0)).memoryUnit,
disk_size: config.disk_size || 0,
selectedGpus: [],
attachAllGpus: false,
encryptedEnvs: [], // Clear environment variables
ports: [], // Clear port mappings
storage_fs: ((_g = theVm.appCompose) === null || _g === void 0 ? void 0 : _g.storage_fs) || 'zfs',
storage_fs: ((_h = theVm.appCompose) === null || _h === void 0 ? void 0 : _h.storage_fs) || 'zfs',
app_id: config.app_id || '',
kms_urls: config.kms_urls || [],
key_provider: getKeyProvider(theVm),
key_provider_id: ((_h = theVm.appCompose) === null || _h === void 0 ? void 0 : _h.key_provider_id) || '',
gateway_enabled: !!((_j = theVm.appCompose) === null || _j === void 0 ? void 0 : _j.gateway_enabled),
key_provider_id: ((_j = theVm.appCompose) === null || _j === void 0 ? void 0 : _j.key_provider_id) || '',
gateway_enabled: !!((_k = theVm.appCompose) === null || _k === void 0 ? void 0 : _k.gateway_enabled),
gateway_urls: config.gateway_urls || [],
public_logs: !!((_k = theVm.appCompose) === null || _k === void 0 ? void 0 : _k.public_logs),
public_sysinfo: !!((_l = theVm.appCompose) === null || _l === void 0 ? void 0 : _l.public_sysinfo),
public_tcbinfo: !!((_m = theVm.appCompose) === null || _m === void 0 ? void 0 : _m.public_tcbinfo),
public_logs: !!((_l = theVm.appCompose) === null || _l === void 0 ? void 0 : _l.public_logs),
public_sysinfo: !!((_m = theVm.appCompose) === null || _m === void 0 ? void 0 : _m.public_sysinfo),
public_tcbinfo: !!((_o = theVm.appCompose) === null || _o === void 0 ? void 0 : _o.public_tcbinfo),
pin_numa: !!config.pin_numa,
hugepages: !!config.hugepages,
no_tee: !!config.no_tee,
Expand Down
15 changes: 12 additions & 3 deletions vmm/ui/src/components/CreateVmDialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,17 @@ const CreateVmDialogComponent = {
</div>

<div class="form-group full-width">
<label for="preLaunchScript">Pre-launch Script</label>
<textarea id="preLaunchScript" v-model="form.preLaunchScript" placeholder="Optional script executed before launch" rows="6"></textarea>
<label for="initScript">Init Script
<span class="help-icon" title="Executed before dockerd starts. Use for early system setup.">?</span>
</label>
<textarea id="initScript" v-model="form.initScript" placeholder="Optional script executed before dockerd startup" rows="4"></textarea>
</div>

<div class="form-group full-width">
<label for="preLaunchScript">Pre-launch Script
<span class="help-icon" title="Executed after dockerd starts, before containers launch.">?</span>
</label>
<textarea id="preLaunchScript" v-model="form.preLaunchScript" placeholder="Optional script executed before container launch" rows="4"></textarea>
</div>

<div class="form-group full-width">
Expand Down Expand Up @@ -150,7 +159,7 @@ const CreateVmDialogComponent = {
</div>
</div>

<div class="form-group full-width" v-if="kmsAvailable">
<div class="form-group full-width" v-if="form.key_provider === 'kms'">
<encrypted-env-editor :env-vars="form.encryptedEnvs" />
</div>

Expand Down
68 changes: 38 additions & 30 deletions vmm/ui/src/components/UpdateVmDialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,42 +62,50 @@ const UpdateVmDialogComponent = {
<input id="upgradeDiskSize" v-model.number="dialog.disk_size" type="number" placeholder="Disk size in GB" required>
</div>

<div v-if="kmsEnabled">
<div class="form-group">
<label for="upgradeImage">Image</label>
<select id="upgradeImage" v-model="dialog.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" class="form-group">
<label for="upgradeImage">Image</label>
<select id="upgradeImage" v-model="dialog.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 class="checkbox-grid">
<label><input type="checkbox" v-model="dialog.updateCompose"> Update App Compose</label>
</div>
<div class="checkbox-grid">
<label><input type="checkbox" v-model="dialog.updateCompose"> Update App Compose</label>
</div>

<div v-if="dialog.updateCompose" class="compose-update">
<div class="form-group">
<label for="upgradeCompose">Docker Compose File</label>
<div class="file-input-row">
<div class="file-input-actions">
<button type="button" class="action-btn" @click="$refs.composeFile.click()">Upload File</button>
<span class="help-text">or paste below</span>
<input ref="composeFile" type="file" accept=".yml,.yaml,.txt" @change="$emit('load-compose', $event)">
</div>
<textarea id="upgradeCompose" v-model="dialog.dockerComposeFile" placeholder="Paste your new docker-compose.yml here" rows="8" required></textarea>
<div v-if="dialog.updateCompose" class="compose-update">
<div class="form-group">
<label for="upgradeCompose">Docker Compose File</label>
<div class="file-input-row">
<div class="file-input-actions">
<button type="button" class="action-btn" @click="$refs.composeFile.click()">Upload File</button>
<span class="help-text">or paste below</span>
<input ref="composeFile" type="file" accept=".yml,.yaml,.txt" @change="$emit('load-compose', $event)">
</div>
</div>
<div class="form-group">
<label for="upgradePrelauncher">Pre-launch Script</label>
<textarea id="upgradePrelauncher" v-model="dialog.preLaunchScript" placeholder="Optional: Bash script to run before starting containers"></textarea>
</div>
<div class="app-id-preview">
Compose Hash: 0x{{ composeHashPreview }}
<textarea id="upgradeCompose" v-model="dialog.dockerComposeFile" placeholder="Paste your new docker-compose.yml here" rows="8" required></textarea>
</div>
</div>
<div class="form-group">
<label for="upgradeInitScript">Init Script
<span class="help-icon" title="Executed before dockerd starts. Use for early system setup.">?</span>
</label>
<textarea id="upgradeInitScript" v-model="dialog.initScript" placeholder="Optional: Bash script executed before dockerd startup" rows="3"></textarea>
</div>
<div class="form-group">
<label for="upgradePrelauncher">Pre-launch Script
<span class="help-icon" title="Executed after dockerd starts, before containers launch.">?</span>
</label>
<textarea id="upgradePrelauncher" v-model="dialog.preLaunchScript" placeholder="Optional: Bash script to run before starting containers" rows="3"></textarea>
</div>
<div class="app-id-preview">
Compose Hash: 0x{{ composeHashPreview }}
</div>
</div>

<div v-if="kmsEnabled">
<div class="checkbox-grid">
<label><input type="checkbox" v-model="dialog.resetSecrets"> Reset secrets</label>
</div>
Expand Down
Loading