feat(docker-watcher): phase 13 - volumes & environment
Per-stage env var overrides with encryption for secrets.
Volume mounts with shared/isolated modes (isolated appends
/{stage}-{tag}/ to source path). Store CRUD, API endpoints,
and frontend editors for both. Env merge during deploy.
This commit is contained in:
+62
-1
@@ -7,7 +7,9 @@ import type {
|
||||
Project,
|
||||
ProjectDetail,
|
||||
Registry,
|
||||
Settings
|
||||
Settings,
|
||||
StageEnv,
|
||||
Volume
|
||||
} from './types';
|
||||
|
||||
// ── Helpers ─────────────────────────────────────────────────────────
|
||||
@@ -237,4 +239,63 @@ export function exportConfigUrl(): string {
|
||||
return '/api/config/export';
|
||||
}
|
||||
|
||||
// ── Stage Env Overrides ──────────────────────────────────────────────
|
||||
|
||||
export function listStageEnv(projectId: string, stageId: string): Promise<StageEnv[]> {
|
||||
return get<StageEnv[]>(`/api/projects/${projectId}/stages/${stageId}/env`);
|
||||
}
|
||||
|
||||
export function createStageEnv(
|
||||
projectId: string,
|
||||
stageId: string,
|
||||
data: { key: string; value: string; encrypted?: boolean }
|
||||
): Promise<StageEnv> {
|
||||
return post<StageEnv>(`/api/projects/${projectId}/stages/${stageId}/env`, data);
|
||||
}
|
||||
|
||||
export function updateStageEnv(
|
||||
projectId: string,
|
||||
stageId: string,
|
||||
envId: string,
|
||||
data: { key?: string; value?: string; encrypted?: boolean }
|
||||
): Promise<StageEnv> {
|
||||
return put<StageEnv>(`/api/projects/${projectId}/stages/${stageId}/env/${envId}`, data);
|
||||
}
|
||||
|
||||
export function deleteStageEnv(
|
||||
projectId: string,
|
||||
stageId: string,
|
||||
envId: string
|
||||
): Promise<{ deleted: string }> {
|
||||
return del<{ deleted: string }>(`/api/projects/${projectId}/stages/${stageId}/env/${envId}`);
|
||||
}
|
||||
|
||||
// ── Volumes ──────────────────────────────────────────────────────────
|
||||
|
||||
export function listVolumes(projectId: string): Promise<Volume[]> {
|
||||
return get<Volume[]>(`/api/projects/${projectId}/volumes`);
|
||||
}
|
||||
|
||||
export function createVolume(
|
||||
projectId: string,
|
||||
data: { source: string; target: string; mode?: string }
|
||||
): Promise<Volume> {
|
||||
return post<Volume>(`/api/projects/${projectId}/volumes`, data);
|
||||
}
|
||||
|
||||
export function updateVolume(
|
||||
projectId: string,
|
||||
volId: string,
|
||||
data: { source?: string; target?: string; mode?: string }
|
||||
): Promise<Volume> {
|
||||
return put<Volume>(`/api/projects/${projectId}/volumes/${volId}`, data);
|
||||
}
|
||||
|
||||
export function deleteVolume(
|
||||
projectId: string,
|
||||
volId: string
|
||||
): Promise<{ deleted: string }> {
|
||||
return del<{ deleted: string }>(`/api/projects/${projectId}/volumes/${volId}`);
|
||||
}
|
||||
|
||||
export { ApiError };
|
||||
|
||||
@@ -116,3 +116,25 @@ export interface InspectResult {
|
||||
port: number;
|
||||
healthcheck: string;
|
||||
}
|
||||
|
||||
/** Stage environment variable override. */
|
||||
export interface StageEnv {
|
||||
id: string;
|
||||
stage_id: string;
|
||||
key: string;
|
||||
value: string;
|
||||
encrypted: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
/** Volume mount configuration for a project. */
|
||||
export interface Volume {
|
||||
id: string;
|
||||
project_id: string;
|
||||
source: string;
|
||||
target: string;
|
||||
mode: 'shared' | 'isolated';
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
@@ -155,6 +155,22 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Project settings links -->
|
||||
<div class="mt-4 flex gap-3">
|
||||
<a
|
||||
href="/projects/{projectId}/env"
|
||||
class="rounded-md border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Environment Variables
|
||||
</a>
|
||||
<a
|
||||
href="/projects/{projectId}/volumes"
|
||||
class="rounded-md border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Volume Mounts
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Project info -->
|
||||
<div class="mt-6 grid grid-cols-2 gap-4 rounded-lg border border-gray-200 bg-white p-5 sm:grid-cols-4">
|
||||
<div>
|
||||
|
||||
+380
@@ -0,0 +1,380 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import type { Stage, StageEnv } from '$lib/types';
|
||||
import * as api from '$lib/api';
|
||||
import { toasts } from '$lib/stores/toast';
|
||||
|
||||
let stages = $state<Stage[]>([]);
|
||||
let selectedStageId = $state('');
|
||||
let envVars = $state<StageEnv[]>([]);
|
||||
let projectEnv = $state<Record<string, string>>({});
|
||||
let loading = $state(true);
|
||||
let envLoading = $state(false);
|
||||
let error = $state('');
|
||||
|
||||
// New env var form.
|
||||
let newKey = $state('');
|
||||
let newValue = $state('');
|
||||
let newEncrypted = $state(false);
|
||||
let saving = $state(false);
|
||||
|
||||
// Edit state.
|
||||
let editingId = $state('');
|
||||
let editKey = $state('');
|
||||
let editValue = $state('');
|
||||
let editEncrypted = $state(false);
|
||||
|
||||
const projectId = $derived($page.params.id);
|
||||
|
||||
async function loadProject() {
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
const detail = await api.getProject(projectId);
|
||||
stages = detail.stages;
|
||||
|
||||
// Parse project-level env.
|
||||
try {
|
||||
projectEnv = JSON.parse(detail.project.env || '{}');
|
||||
} catch {
|
||||
projectEnv = {};
|
||||
}
|
||||
|
||||
if (stages.length > 0 && !selectedStageId) {
|
||||
selectedStageId = stages[0].id;
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to load project';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStageEnv(stageId: string) {
|
||||
if (!stageId) return;
|
||||
envLoading = true;
|
||||
try {
|
||||
envVars = await api.listStageEnv(projectId, stageId);
|
||||
} catch (e) {
|
||||
toasts.error(e instanceof Error ? e.message : 'Failed to load env vars');
|
||||
envVars = [];
|
||||
} finally {
|
||||
envLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAdd() {
|
||||
if (!newKey.trim() || !selectedStageId) return;
|
||||
saving = true;
|
||||
try {
|
||||
await api.createStageEnv(projectId, selectedStageId, {
|
||||
key: newKey.trim(),
|
||||
value: newValue,
|
||||
encrypted: newEncrypted
|
||||
});
|
||||
newKey = '';
|
||||
newValue = '';
|
||||
newEncrypted = false;
|
||||
toasts.success('Environment variable added');
|
||||
await loadStageEnv(selectedStageId);
|
||||
} catch (e) {
|
||||
toasts.error(e instanceof Error ? e.message : 'Failed to add env var');
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit(env: StageEnv) {
|
||||
editingId = env.id;
|
||||
editKey = env.key;
|
||||
editValue = env.encrypted ? '' : env.value;
|
||||
editEncrypted = env.encrypted;
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editingId = '';
|
||||
}
|
||||
|
||||
async function handleUpdate() {
|
||||
if (!editKey.trim()) return;
|
||||
saving = true;
|
||||
try {
|
||||
const data: { key?: string; value?: string; encrypted?: boolean } = {
|
||||
key: editKey.trim(),
|
||||
encrypted: editEncrypted
|
||||
};
|
||||
if (editValue) {
|
||||
data.value = editValue;
|
||||
}
|
||||
await api.updateStageEnv(projectId, selectedStageId, editingId, data);
|
||||
editingId = '';
|
||||
toasts.success('Environment variable updated');
|
||||
await loadStageEnv(selectedStageId);
|
||||
} catch (e) {
|
||||
toasts.error(e instanceof Error ? e.message : 'Failed to update env var');
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(envId: string) {
|
||||
try {
|
||||
await api.deleteStageEnv(projectId, selectedStageId, envId);
|
||||
toasts.success('Environment variable deleted');
|
||||
await loadStageEnv(selectedStageId);
|
||||
} catch (e) {
|
||||
toasts.error(e instanceof Error ? e.message : 'Failed to delete env var');
|
||||
}
|
||||
}
|
||||
|
||||
// Determine if a key is inherited from project level.
|
||||
function isInherited(key: string): boolean {
|
||||
return key in projectEnv;
|
||||
}
|
||||
|
||||
// Determine if a key is overridden at stage level.
|
||||
function isOverridden(key: string): boolean {
|
||||
return envVars.some((e) => e.key === key);
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
void projectId;
|
||||
loadProject();
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (selectedStageId) {
|
||||
loadStageEnv(selectedStageId);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Environment Variables - Docker Watcher</title>
|
||||
</svelte:head>
|
||||
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="/projects/{projectId}" class="text-sm text-gray-500 hover:text-gray-700">Project</a>
|
||||
<span class="text-sm text-gray-400">/</span>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Environment Variables</h1>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Manage per-stage environment variable overrides. Stage-level values override project-level defaults.
|
||||
</p>
|
||||
|
||||
{#if loading}
|
||||
<div class="mt-8 flex items-center justify-center py-12">
|
||||
<div class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-indigo-600"></div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="mt-4 rounded-md bg-red-50 p-4">
|
||||
<p class="text-sm text-red-700">{error}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Stage selector -->
|
||||
<div class="mt-6">
|
||||
<label for="stage-select" class="block text-sm font-medium text-gray-700">Stage</label>
|
||||
<select
|
||||
id="stage-select"
|
||||
bind:value={selectedStageId}
|
||||
class="mt-1 block w-64 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
>
|
||||
{#each stages as stage (stage.id)}
|
||||
<option value={stage.id}>{stage.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{#if stages.length === 0}
|
||||
<div class="mt-6 rounded-lg border-2 border-dashed border-gray-300 p-8 text-center">
|
||||
<p class="text-sm text-gray-500">No stages configured. Add stages to the project first.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Project-level env (read-only reference) -->
|
||||
{#if Object.keys(projectEnv).length > 0}
|
||||
<div class="mt-6">
|
||||
<h2 class="text-sm font-semibold text-gray-700">Project-Level Defaults</h2>
|
||||
<div class="mt-2 rounded-lg border border-gray-200 bg-gray-50">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Key</th>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each Object.entries(projectEnv) as [key, value] (key)}
|
||||
<tr class={isOverridden(key) ? 'opacity-50' : ''}>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-mono text-sm text-gray-900">{key}</td>
|
||||
<td class="px-4 py-2 font-mono text-sm text-gray-600">{value}</td>
|
||||
<td class="px-4 py-2 text-sm">
|
||||
{#if isOverridden(key)}
|
||||
<span class="rounded bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-700">
|
||||
overridden
|
||||
</span>
|
||||
{:else}
|
||||
<span class="rounded bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">
|
||||
inherited
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Stage-level overrides -->
|
||||
<div class="mt-6">
|
||||
<h2 class="text-sm font-semibold text-gray-700">Stage Overrides</h2>
|
||||
|
||||
{#if envLoading}
|
||||
<div class="mt-4 flex items-center justify-center py-8">
|
||||
<div class="h-6 w-6 animate-spin rounded-full border-4 border-gray-200 border-t-indigo-600"></div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-2 rounded-lg border border-gray-200 bg-white shadow-sm">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Key</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Value</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Secret</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Source</th>
|
||||
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each envVars as env (env.id)}
|
||||
{#if editingId === env.id}
|
||||
<tr class="bg-indigo-50">
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={editKey}
|
||||
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
type={editEncrypted ? 'password' : 'text'}
|
||||
bind:value={editValue}
|
||||
placeholder={env.encrypted ? 'Leave empty to keep current' : ''}
|
||||
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input type="checkbox" bind:checked={editEncrypted} class="rounded" />
|
||||
</td>
|
||||
<td class="px-4 py-2"></td>
|
||||
<td class="px-4 py-2 text-right">
|
||||
<button
|
||||
type="button"
|
||||
class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
|
||||
disabled={saving}
|
||||
onclick={handleUpdate}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm text-gray-500 hover:text-gray-700"
|
||||
onclick={cancelEdit}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-mono text-sm text-gray-900">{env.key}</td>
|
||||
<td class="px-4 py-2 font-mono text-sm text-gray-600">
|
||||
{env.encrypted ? '••••••••' : env.value}
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
{#if env.encrypted}
|
||||
<span class="rounded bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-700">
|
||||
secret
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-4 py-2 text-sm">
|
||||
{#if isInherited(env.key)}
|
||||
<span class="rounded bg-yellow-50 px-2 py-0.5 text-xs font-medium text-yellow-700">
|
||||
overrides project
|
||||
</span>
|
||||
{:else}
|
||||
<span class="rounded bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">
|
||||
stage only
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-right">
|
||||
<button
|
||||
type="button"
|
||||
class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
|
||||
onclick={() => startEdit(env)}
|
||||
>
|
||||
{env.encrypted ? 'Change' : 'Edit'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm font-medium text-red-600 hover:text-red-800"
|
||||
onclick={() => handleDelete(env.id)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<!-- Add new row -->
|
||||
<tr class="bg-gray-50">
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newKey}
|
||||
placeholder="KEY_NAME"
|
||||
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
type={newEncrypted ? 'password' : 'text'}
|
||||
bind:value={newValue}
|
||||
placeholder="value"
|
||||
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<label class="flex items-center gap-1 text-xs text-gray-600">
|
||||
<input type="checkbox" bind:checked={newEncrypted} class="rounded" />
|
||||
Secret
|
||||
</label>
|
||||
</td>
|
||||
<td class="px-4 py-2"></td>
|
||||
<td class="px-4 py-2 text-right">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
|
||||
disabled={!newKey.trim() || saving}
|
||||
onclick={handleAdd}
|
||||
>
|
||||
{saving ? 'Adding...' : 'Add'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,269 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import type { Volume } from '$lib/types';
|
||||
import * as api from '$lib/api';
|
||||
import { toasts } from '$lib/stores/toast';
|
||||
|
||||
let volumes = $state<Volume[]>([]);
|
||||
let loading = $state(true);
|
||||
let error = $state('');
|
||||
|
||||
// New volume form.
|
||||
let newSource = $state('');
|
||||
let newTarget = $state('');
|
||||
let newMode = $state<'shared' | 'isolated'>('shared');
|
||||
let saving = $state(false);
|
||||
|
||||
// Edit state.
|
||||
let editingId = $state('');
|
||||
let editSource = $state('');
|
||||
let editTarget = $state('');
|
||||
let editMode = $state<'shared' | 'isolated'>('shared');
|
||||
|
||||
const projectId = $derived($page.params.id);
|
||||
|
||||
async function loadVolumes() {
|
||||
loading = true;
|
||||
error = '';
|
||||
try {
|
||||
volumes = await api.listVolumes(projectId);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to load volumes';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAdd() {
|
||||
if (!newSource.trim() || !newTarget.trim()) return;
|
||||
saving = true;
|
||||
try {
|
||||
await api.createVolume(projectId, {
|
||||
source: newSource.trim(),
|
||||
target: newTarget.trim(),
|
||||
mode: newMode
|
||||
});
|
||||
newSource = '';
|
||||
newTarget = '';
|
||||
newMode = 'shared';
|
||||
toasts.success('Volume added');
|
||||
await loadVolumes();
|
||||
} catch (e) {
|
||||
toasts.error(e instanceof Error ? e.message : 'Failed to add volume');
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit(vol: Volume) {
|
||||
editingId = vol.id;
|
||||
editSource = vol.source;
|
||||
editTarget = vol.target;
|
||||
editMode = vol.mode;
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editingId = '';
|
||||
}
|
||||
|
||||
async function handleUpdate() {
|
||||
if (!editSource.trim() || !editTarget.trim()) return;
|
||||
saving = true;
|
||||
try {
|
||||
await api.updateVolume(projectId, editingId, {
|
||||
source: editSource.trim(),
|
||||
target: editTarget.trim(),
|
||||
mode: editMode
|
||||
});
|
||||
editingId = '';
|
||||
toasts.success('Volume updated');
|
||||
await loadVolumes();
|
||||
} catch (e) {
|
||||
toasts.error(e instanceof Error ? e.message : 'Failed to update volume');
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(volId: string) {
|
||||
try {
|
||||
await api.deleteVolume(projectId, volId);
|
||||
toasts.success('Volume deleted');
|
||||
await loadVolumes();
|
||||
} catch (e) {
|
||||
toasts.error(e instanceof Error ? e.message : 'Failed to delete volume');
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
void projectId;
|
||||
loadVolumes();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Volumes - Docker Watcher</title>
|
||||
</svelte:head>
|
||||
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="/projects/{projectId}" class="text-sm text-gray-500 hover:text-gray-700">Project</a>
|
||||
<span class="text-sm text-gray-400">/</span>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Volume Mounts</h1>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Configure volume mounts for containers.
|
||||
<strong>Shared</strong> mode uses the source path as-is for all instances.
|
||||
<strong>Isolated</strong> mode appends /{'{'}stage{'}'}-{'{'}tag{'}'}/ to the source, giving each instance its own directory.
|
||||
</p>
|
||||
|
||||
{#if loading}
|
||||
<div class="mt-8 flex items-center justify-center py-12">
|
||||
<div class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-indigo-600"></div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="mt-4 rounded-md bg-red-50 p-4">
|
||||
<p class="text-sm text-red-700">{error}</p>
|
||||
<button type="button" class="mt-2 text-sm font-medium text-red-700 underline" onclick={loadVolumes}>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-6 rounded-lg border border-gray-200 bg-white shadow-sm">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Source (Host)</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Target (Container)</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Mode</th>
|
||||
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each volumes as vol (vol.id)}
|
||||
{#if editingId === vol.id}
|
||||
<tr class="bg-indigo-50">
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={editSource}
|
||||
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={editTarget}
|
||||
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<select
|
||||
bind:value={editMode}
|
||||
class="rounded-md border border-gray-300 bg-white px-2 py-1 text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
>
|
||||
<option value="shared">Shared</option>
|
||||
<option value="isolated">Isolated</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-right">
|
||||
<button
|
||||
type="button"
|
||||
class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
|
||||
disabled={saving}
|
||||
onclick={handleUpdate}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm text-gray-500 hover:text-gray-700"
|
||||
onclick={cancelEdit}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td class="px-4 py-2 font-mono text-sm text-gray-900">{vol.source}</td>
|
||||
<td class="px-4 py-2 font-mono text-sm text-gray-600">{vol.target}</td>
|
||||
<td class="px-4 py-2">
|
||||
{#if vol.mode === 'shared'}
|
||||
<span class="rounded bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">
|
||||
shared
|
||||
</span>
|
||||
{:else}
|
||||
<span class="rounded bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">
|
||||
isolated
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-right">
|
||||
<button
|
||||
type="button"
|
||||
class="mr-2 text-sm font-medium text-indigo-600 hover:text-indigo-800"
|
||||
onclick={() => startEdit(vol)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-sm font-medium text-red-600 hover:text-red-800"
|
||||
onclick={() => handleDelete(vol.id)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<!-- Add new row -->
|
||||
<tr class="bg-gray-50">
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newSource}
|
||||
placeholder="/data/my-app/uploads"
|
||||
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newTarget}
|
||||
placeholder="/app/uploads"
|
||||
class="block w-full rounded-md border border-gray-300 px-2 py-1 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<select
|
||||
bind:value={newMode}
|
||||
class="rounded-md border border-gray-300 bg-white px-2 py-1 text-sm focus:border-indigo-500 focus:ring-indigo-500 focus:outline-none"
|
||||
>
|
||||
<option value="shared">Shared</option>
|
||||
<option value="isolated">Isolated</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-right">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700 disabled:opacity-50"
|
||||
disabled={!newSource.trim() || !newTarget.trim() || saving}
|
||||
onclick={handleAdd}
|
||||
>
|
||||
{saving ? 'Adding...' : 'Add'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{#if volumes.length === 0}
|
||||
<p class="mt-4 text-center text-sm text-gray-500">No volumes configured yet. Add one above.</p>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user