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

-