From 97908e2ae6a08d8d56af87451b7df0e8d9bf1914 Mon Sep 17 00:00:00 2001 From: nfebe Date: Sun, 24 May 2026 19:12:38 +0100 Subject: [PATCH] feat(deployments): Add bind-mount creation from the file browser Browsing a deployment's files now offers a one-click way to mount any file or directory into a compose service. The dialog reuses the deployment's service list, defaults the container path to the host path, and surfaces the updated compose tab after the change so the result is visible in context. A file or directory already wired into a compose service shows a distinct indicator on its mount button, with a tooltip naming the services that already consume it. The mount targets are detected by parsing the deployment's compose for short-syntax bind entries. The file browser action row was getting visually heavy as features landed; row buttons are slightly tighter and the actions column reserves less horizontal space so the surrounding layout breathes. --- src/components/FileBrowser.vue | 184 ++++++++++++++++++++++++++++- src/services/api.ts | 19 +++ src/utils/compose.test.ts | 94 +++++++++++++++ src/utils/compose.ts | 108 +++++++++++++++++ src/views/DeploymentDetailView.vue | 62 ++++++++-- 5 files changed, 455 insertions(+), 12 deletions(-) create mode 100644 src/utils/compose.test.ts diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue index ea8c873..e449da1 100644 --- a/src/components/FileBrowser.vue +++ b/src/components/FileBrowser.vue @@ -126,6 +126,14 @@ + @@ -170,6 +178,14 @@ + @@ -240,6 +256,52 @@ +
+
+
+

+ + Add Compose Mount +

+
+
+
+ Host path + {{ mountSourcePath }} +
+
+ + +
+
+ + +
+ +
+
+ + +
+
+
+
@@ -298,9 +360,25 @@ import { yaml } from "@codemirror/lang-yaml"; import { oneDark } from "@codemirror/theme-one-dark"; import { filesApi, type FileInfo } from "@/services/api"; import { useNotificationsStore } from "@/stores/notifications"; +import { toComposeRelativePath, type ComposeMount } from "@/utils/compose"; const props = defineProps<{ deploymentName: string; + serviceNames?: string[]; + mounts?: ComposeMount[]; +}>(); + +const emit = defineEmits<{ + mountCompose: [ + mount: { + sourcePath: string; + targetPath: string; + serviceName: string; + readOnly: boolean; + isDirectory: boolean; + name: string; + }, + ]; }>(); const notifications = useNotificationsStore(); @@ -324,6 +402,12 @@ const showDeleteModal = ref(false); const fileToDelete = ref(null); const deleting = ref(false); +const showMountModal = ref(false); +const fileToMount = ref(null); +const mountServiceName = ref(""); +const mountTargetPath = ref(""); +const mountReadOnly = ref(false); + const showHiddenFiles = ref(true); const viewMode = ref<"list" | "grid">("list"); @@ -339,6 +423,37 @@ const editorExtensions = [yaml(), oneDark]; const fileModified = computed(() => fileContent.value !== originalContent.value); +const mountServiceOptions = computed(() => { + const names = props.serviceNames?.filter(Boolean) || []; + return names.length > 0 ? names : [props.deploymentName]; +}); + +const mountSourcePath = computed(() => { + if (!fileToMount.value) return ""; + return toComposeRelativePath(fileToMount.value.path); +}); + +const mountsBySource = computed(() => { + const grouped = new Map(); + for (const mount of props.mounts || []) { + const list = grouped.get(mount.source); + if (list) list.push(mount); + else grouped.set(mount.source, [mount]); + } + return grouped; +}); + +const fileMounts = (file: FileInfo): ComposeMount[] => { + return mountsBySource.value.get(toComposeRelativePath(file.path)) || []; +}; + +const mountTooltip = (file: FileInfo): string => { + const matches = fileMounts(file); + if (matches.length === 0) return "Add compose mount"; + const services = Array.from(new Set(matches.map((m) => m.service))).join(", "); + return `Mounted in ${services}`; +}; + const pathParts = computed(() => { return currentPath.value.split("/").filter((p) => p.length > 0); }); @@ -475,6 +590,29 @@ const confirmDelete = (file: FileInfo) => { showDeleteModal.value = true; }; +const openMountModal = (file: FileInfo) => { + fileToMount.value = file; + mountServiceName.value = mountServiceOptions.value[0] || props.deploymentName; + mountTargetPath.value = file.path; + mountReadOnly.value = !file.is_dir; + showMountModal.value = true; +}; + +const confirmMount = () => { + if (!fileToMount.value || !mountTargetPath.value.trim()) return; + + emit("mountCompose", { + sourcePath: mountSourcePath.value, + targetPath: mountTargetPath.value.trim(), + serviceName: mountServiceName.value, + readOnly: mountReadOnly.value, + isDirectory: fileToMount.value.is_dir, + name: fileToMount.value.name, + }); + showMountModal.value = false; + fileToMount.value = null; +}; + const deleteFile = async () => { if (!fileToDelete.value) return; @@ -831,7 +969,7 @@ onMounted(() => { .file-list-header { display: grid; - grid-template-columns: 1fr 100px 180px 100px; + grid-template-columns: 1fr 100px 180px 116px; padding: var(--space-2) var(--space-4); background: var(--color-gray-50); border-bottom: 1px solid var(--color-gray-200); @@ -842,7 +980,7 @@ onMounted(() => { .file-item { display: grid; - grid-template-columns: 1fr 100px 180px 100px; + grid-template-columns: 1fr 100px 180px 116px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-gray-100); cursor: pointer; @@ -904,8 +1042,8 @@ onMounted(() => { } .action-btn { - width: 28px; - height: 28px; + width: 24px; + height: 24px; display: flex; align-items: center; justify-content: center; @@ -922,6 +1060,15 @@ onMounted(() => { color: var(--color-gray-900); } +.action-btn.is-mounted { + background: var(--color-success-50); + color: var(--color-success-700); +} + +.action-btn.is-mounted:hover { + background: var(--color-success-100); +} + .action-btn.delete { background: var(--color-danger-50); color: var(--color-danger-600); @@ -994,6 +1141,35 @@ onMounted(() => { font-size: var(--text-sm); } +.mount-source { + display: grid; + gap: var(--space-1); + margin-bottom: var(--space-3); +} + +.mount-source span { + font-size: var(--text-sm); + font-weight: var(--font-medium); + color: var(--color-gray-700); +} + +.mount-source code { + padding: var(--space-2); + border-radius: var(--radius-sm); + background: var(--color-gray-100); + color: var(--color-gray-700); + word-break: break-all; +} + +.checkbox-label { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-sm); + color: var(--color-gray-700); + cursor: pointer; +} + .modal-footer { padding: var(--space-4); border-top: 1px solid var(--color-gray-200); diff --git a/src/services/api.ts b/src/services/api.ts index 1cd177d..b890bfc 100755 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -108,6 +108,25 @@ export const deploymentsApi = { apiClient.post<{ message: string; action_id: string; output: string }>(`/deployments/${name}/actions/${actionId}`), logs: (name: string) => apiClient.get(`/deployments/${name}/logs`), getComposeFile: (name: string) => apiClient.get(`/deployments/${name}/compose`), + addComposeMount: ( + name: string, + mount: { + source_path: string; + target_path: string; + service_name: string; + read_only: boolean; + selinux?: "" | "z" | "Z"; + }, + ) => + apiClient.post<{ + message: string; + name: string; + filename: string; + content: string; + service_name: string; + mount: string; + added: boolean; + }>(`/deployments/${name}/compose/mount`, mount), getStats: (name: string) => apiClient.get<{ deployment: string; diff --git a/src/utils/compose.test.ts b/src/utils/compose.test.ts new file mode 100644 index 0000000..925d4c0 --- /dev/null +++ b/src/utils/compose.test.ts @@ -0,0 +1,94 @@ +import { describe, expect, it } from "vitest"; +import { extractComposeMounts, extractComposeServiceNames, toComposeRelativePath } from "./compose"; + +describe("toComposeRelativePath", () => { + it("converts deployment-root file paths into relative compose paths", () => { + expect(toComposeRelativePath("/storage")).toBe("./storage"); + expect(toComposeRelativePath("config/app.php")).toBe("config/app.php"); + }); + it("keeps root as compose project root", () => { + expect(toComposeRelativePath("/")).toBe("."); + }); +}); + +describe("extractComposeServiceNames", () => { + it("extracts top-level compose service names", () => { + const compose = `services: + web: + image: nginx + app: + image: node +networks: + proxy: + external: true +`; + + expect(extractComposeServiceNames(compose)).toEqual(["web", "app"]); + }); + + it("ignores nested keys inside service blocks", () => { + const compose = `services: + web: + image: nginx + environment: + APP_ENV: production +`; + + expect(extractComposeServiceNames(compose)).toEqual(["web"]); + }); +}); + +describe("extractComposeMounts", () => { + it("returns short-syntax bind mounts per service", () => { + const compose = `services: + app: + image: nginx + volumes: + - ./storage:/var/www/storage + - ./config:/etc/nginx:ro +`; + + expect(extractComposeMounts(compose)).toEqual([ + { service: "app", source: "./storage", target: "/var/www/storage", readOnly: false }, + { service: "app", source: "./config", target: "/etc/nginx", readOnly: true }, + ]); + }); + + it("parses SELinux relabel options", () => { + const compose = `services: + app: + volumes: + - ./data:/data:Z + - ./shared:/shared:z + - ./readonly:/ro:ro,Z +`; + + expect(extractComposeMounts(compose)).toEqual([ + { service: "app", source: "./data", target: "/data", readOnly: false, selinux: "Z" }, + { service: "app", source: "./shared", target: "/shared", readOnly: false, selinux: "z" }, + { service: "app", source: "./readonly", target: "/ro", readOnly: true, selinux: "Z" }, + ]); + }); + + it("collects mounts across multiple services", () => { + const compose = `services: + web: + volumes: + - ./a:/a + worker: + image: x + volumes: + - ./b:/b +`; + + expect(extractComposeMounts(compose)).toEqual([ + { service: "web", source: "./a", target: "/a", readOnly: false }, + { service: "worker", source: "./b", target: "/b", readOnly: false }, + ]); + }); + + it("returns empty for missing compose", () => { + expect(extractComposeMounts("")).toEqual([]); + expect(extractComposeMounts("not yaml")).toEqual([]); + }); +}); diff --git a/src/utils/compose.ts b/src/utils/compose.ts index 033f4de..e3fccbf 100644 --- a/src/utils/compose.ts +++ b/src/utils/compose.ts @@ -35,3 +35,111 @@ export function extractComposeServiceNames(content: string): string[] { return names; } + +export function toComposeRelativePath(path: string): string { + if (!path || path === "/") return "."; + return path.startsWith("/") ? `.${path}` : path; +} + +export interface ComposeMount { + service: string; + source: string; + target: string; + readOnly: boolean; + selinux?: "z" | "Z"; +} + +export function extractComposeMounts(content: string): ComposeMount[] { + if (!content) return []; + const lines = content.split(/\r?\n/); + const mounts: ComposeMount[] = []; + + let inServices = false; + let serviceIndent = -1; + let currentService = ""; + let inVolumes = false; + let volumesKeyIndent = -1; + let volumesItemIndent = -1; + + for (const raw of lines) { + if (/^\s*#/.test(raw) || raw.trim() === "") continue; + const indent = raw.match(/^\s*/)?.[0].length ?? 0; + + if (!inServices) { + if (/^services\s*:\s*$/.test(raw)) inServices = true; + continue; + } + + if (indent === 0) { + inServices = false; + currentService = ""; + inVolumes = false; + serviceIndent = -1; + volumesKeyIndent = -1; + volumesItemIndent = -1; + continue; + } + + if (serviceIndent === -1) serviceIndent = indent; + + if (indent === serviceIndent) { + const match = raw.match(/^\s*([A-Za-z0-9_.-]+)\s*:\s*$/); + if (match) { + currentService = match[1]; + inVolumes = false; + volumesKeyIndent = -1; + volumesItemIndent = -1; + } + continue; + } + + if (!currentService) continue; + + if (inVolumes && indent <= volumesKeyIndent) { + inVolumes = false; + volumesKeyIndent = -1; + volumesItemIndent = -1; + } + + if (!inVolumes) { + if (/^\s*volumes\s*:\s*$/.test(raw)) { + inVolumes = true; + volumesKeyIndent = indent; + } + continue; + } + + const listMatch = raw.match(/^(\s*)-\s+(.+?)\s*$/); + if (!listMatch) continue; + if (volumesItemIndent === -1) volumesItemIndent = listMatch[1].length; + if (listMatch[1].length !== volumesItemIndent) continue; + + const parsed = parseShortMount(stripQuotes(listMatch[2].trim())); + if (parsed) { + mounts.push({ service: currentService, ...parsed }); + } + } + + return mounts; +} + +function stripQuotes(value: string): string { + if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) { + return value.slice(1, -1); + } + return value; +} + +function parseShortMount(value: string): Omit | null { + const parts = value.split(":"); + if (parts.length < 2 || parts.length > 3) return null; + const source = parts[0]; + const target = parts[1]; + if (!source || !target) return null; + const opts = parts[2] ? parts[2].split(",") : []; + const readOnly = opts.includes("ro"); + let selinux: "z" | "Z" | undefined; + if (opts.includes("Z")) selinux = "Z"; + else if (opts.includes("z")) selinux = "z"; + return { source, target, readOnly, selinux }; +} diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue index 6be2429..ca0d197 100755 --- a/src/views/DeploymentDetailView.vue +++ b/src/views/DeploymentDetailView.vue @@ -452,7 +452,12 @@
- +
@@ -885,7 +890,7 @@

Docker Compose Configuration

-