diff --git a/src/components/ContainerFilesPanel.test.ts b/src/components/ContainerFilesPanel.test.ts new file mode 100644 index 0000000..c5e0dbb --- /dev/null +++ b/src/components/ContainerFilesPanel.test.ts @@ -0,0 +1,112 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import { mount, flushPromises } from "@vue/test-utils"; +import { createTestingPinia } from "@pinia/testing"; +import ContainerFilesPanel from "./ContainerFilesPanel.vue"; +import { containerFilesApi } from "@/services/api"; + +vi.mock("@/services/api", () => ({ + containerFilesApi: { + list: vi.fn(), + materialize: vi.fn(), + }, +})); + +// Shaped like what the agent returns, which mirrors a real `ls -lA` line from +// nginx:alpine. +const listing = { + data: { + path: "/etc/nginx", + service: "app", + files: [ + { name: "conf.d", path: "/etc/nginx/conf.d", size: 4096, mode: "drwxr-xr-x", is_dir: true, is_symlink: false }, + { + name: "nginx.conf", + path: "/etc/nginx/nginx.conf", + size: 648, + mode: "-rw-r--r--", + is_dir: false, + is_symlink: false, + modified_raw: "Jun 17 15:58", + }, + ], + }, +}; + +const mountTab = () => + mount(ContainerFilesPanel, { + props: { deploymentName: "test-app", serviceNames: ["app", "db"] }, + global: { + plugins: [createTestingPinia({ createSpy: vi.fn })], + stubs: { ConfirmModal: { template: "
", props: ["visible"] } }, + }, + }); + +describe("ContainerFilesPanel", () => { + beforeEach(() => { + vi.clearAllMocks(); + vi.mocked(containerFilesApi.list).mockResolvedValue(listing as any); + }); + + it("lists what the running service holds", async () => { + const wrapper = mountTab(); + await flushPromises(); + + expect(containerFilesApi.list).toHaveBeenCalledWith("test-app", "app", "/"); + expect(wrapper.text()).toContain("conf.d"); + expect(wrapper.text()).toContain("nginx.conf"); + }); + + it("navigates into a directory", async () => { + const wrapper = mountTab(); + await flushPromises(); + + const confd = wrapper.findAll(".cf-name").find((b) => b.text().includes("conf.d")); + await confd!.trigger("click"); + await flushPromises(); + + expect(containerFilesApi.list).toHaveBeenLastCalledWith("test-app", "app", "/etc/nginx/conf.d"); + }); + + it("brings a path onto the host and reports where it landed", async () => { + vi.mocked(containerFilesApi.materialize).mockResolvedValue({ + data: { + deployment: "test-app", + service: "app", + container_path: "/etc/nginx/nginx.conf", + host_path: "./nginx.conf", + }, + } as any); + + const wrapper = mountTab(); + await flushPromises(); + + // The row action confirms first, so drive the confirmed path directly. + (wrapper.vm as any).pending = "/etc/nginx/nginx.conf"; + await (wrapper.vm as any).materialize(); + await flushPromises(); + + expect(containerFilesApi.materialize).toHaveBeenCalledWith("test-app", "app", { + container_path: "/etc/nginx/nginx.conf", + }); + expect(wrapper.emitted("materialized")?.[0]).toEqual([ + { hostPath: "./nginx.conf", containerPath: "/etc/nginx/nginx.conf" }, + ]); + }); + + it("explains why an image without a shell cannot be browsed", async () => { + vi.mocked(containerFilesApi.list).mockRejectedValue({ + response: { + data: { + error: "failed to list /: no shell", + hint: "the service must be running and its image must provide a shell to be browsed", + }, + }, + }); + + const wrapper = mountTab(); + await flushPromises(); + + expect(wrapper.text()).toContain("no shell"); + expect(wrapper.text()).toContain("must provide a shell"); + }); +}); diff --git a/src/components/ContainerFilesPanel.vue b/src/components/ContainerFilesPanel.vue new file mode 100644 index 0000000..a69d902 --- /dev/null +++ b/src/components/ContainerFilesPanel.vue @@ -0,0 +1,403 @@ + + + + + diff --git a/src/components/FileBrowser.test.ts b/src/components/FileBrowser.test.ts new file mode 100644 index 0000000..3c7a574 --- /dev/null +++ b/src/components/FileBrowser.test.ts @@ -0,0 +1,128 @@ +import { describe, it, expect, vi, beforeEach } from "vitest"; +import { mount, flushPromises } from "@vue/test-utils"; +import { createTestingPinia } from "@pinia/testing"; +import FileBrowser from "./FileBrowser.vue"; +import { deploymentsApi } from "@/services/api"; +import type { FileBrowserApi, FileInfo } from "@/services/api"; +import type { ComposeMount } from "@/utils/compose"; + +vi.mock("@/services/api", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + deploymentsApi: { removeComposeMount: vi.fn() }, + configApi: { get: vi.fn().mockResolvedValue({ data: {} }) }, + }; +}); + +const files: FileInfo[] = [ + { name: "conf.d", path: "/conf.d", size: 4096, is_dir: true, mod_time: "2026-07-14T00:00:00Z", permissions: "755" }, + { + name: "notes.txt", + path: "/notes.txt", + size: 12, + is_dir: false, + mod_time: "2026-07-14T00:00:00Z", + permissions: "644", + }, +]; + +// Only conf.d is mounted, so the two rows should be treated differently. +const mounts: ComposeMount[] = [{ service: "app", source: "./conf.d", target: "/etc/nginx/conf.d", readOnly: false }]; + +const fakeApi = (): FileBrowserApi => ({ + list: vi.fn().mockResolvedValue({ data: { files } }), + getInfo: vi.fn().mockResolvedValue({ data: { total_size: 0, file_count: 0 } }), + upload: vi.fn(), + download: vi.fn(), + createDir: vi.fn(), + createFile: vi.fn(), + chmod: vi.fn(), + delete: vi.fn().mockResolvedValue({}), + getContent: vi.fn().mockResolvedValue({ data: "" }), +}); + +const mountBrowser = () => + mount(FileBrowser, { + props: { deploymentName: "test-app", api: fakeApi(), mounts, serviceNames: ["app"], enableMount: true }, + global: { plugins: [createTestingPinia({ createSpy: vi.fn })] }, + }); + +describe("FileBrowser mounted paths", () => { + beforeEach(() => vi.clearAllMocks()); + + it("tags a path the container reads, and says where", async () => { + const wrapper = mountBrowser(); + await flushPromises(); + + const tags = wrapper.findAll(".mount-tag"); + expect(tags).toHaveLength(1); + expect(tags[0].attributes("title")).toContain("app reads this at /etc/nginx/conf.d"); + }); + + it("offers Unmount only for a path that is mounted", async () => { + const wrapper = mountBrowser(); + await flushPromises(); + + (wrapper.vm as any).toggleRowMenu("/conf.d"); + await flushPromises(); + expect(wrapper.text()).toContain("Unmount"); + + (wrapper.vm as any).toggleRowMenu("/notes.txt"); + await flushPromises(); + expect(wrapper.text()).not.toContain("Unmount"); + }); + + it("unmounts every service reading the path, then reports it", async () => { + vi.mocked(deploymentsApi.removeComposeMount).mockResolvedValue({ data: {} } as any); + + const wrapper = mountBrowser(); + await flushPromises(); + + (wrapper.vm as any).fileToUnmount = files[0]; + await (wrapper.vm as any).unmountFile(); + await flushPromises(); + + expect(deploymentsApi.removeComposeMount).toHaveBeenCalledWith("test-app", { + source_path: "./conf.d", + target_path: "/etc/nginx/conf.d", + service_name: "app", + }); + expect(wrapper.emitted("unmounted")).toBeTruthy(); + }); + + // The modals are teleported to the body, so they are read from there. + it("warns that deleting a mounted path takes it from the container too", async () => { + const wrapper = mountBrowser(); + await flushPromises(); + + (wrapper.vm as any).confirmDelete(files[0]); + await flushPromises(); + expect(document.body.textContent).toContain("takes it from the running container too"); + + wrapper.unmount(); + }); + + it("does not warn about the container when the path is not mounted", async () => { + const wrapper = mountBrowser(); + await flushPromises(); + + (wrapper.vm as any).confirmDelete(files[1]); + await flushPromises(); + expect(document.body.textContent).not.toContain("takes it from the running container too"); + + wrapper.unmount(); + }); + + it("explains that an unmount leaves the host copy behind", async () => { + const wrapper = mountBrowser(); + await flushPromises(); + + (wrapper.vm as any).confirmUnmount(files[0]); + await flushPromises(); + expect(document.body.textContent).toContain("stays on the host"); + expect(document.body.textContent).toContain("will not touch the container"); + + wrapper.unmount(); + }); +}); diff --git a/src/components/FileBrowser.vue b/src/components/FileBrowser.vue index cf5bea7..1e5b853 100644 --- a/src/components/FileBrowser.vue +++ b/src/components/FileBrowser.vue @@ -114,6 +114,10 @@ {{ file.name }} + + + Mounted + {{ file.child_count }} items @@ -153,6 +157,14 @@ {{ fileMounts(file).length > 0 ? "Edit mount" : "Add compose mount" }} +
{{ file.name }}
+
+ + Mounted +
{{ file.is_dir @@ -218,6 +234,14 @@ {{ fileMounts(file).length > 0 ? "Edit mount" : "Add compose mount" }} +
@@ -325,6 +358,46 @@
+
+
+
+

+ + Unmount +

+
+
+

+ Stop + {{ + fileToUnmount + ? fileMounts(fileToUnmount) + .map((m) => `${m.service} reading ${m.target}`) + .join(" and ") + : "" + }} + from {{ fileToUnmount?.name }}? +

+

+ The service restarts and goes back to whatever its image holds there, so anything only in this copy stops + being used. +

+

+ {{ fileToUnmount?.name }} stays on the host. Deleting it afterwards will not touch the + container. +

+
+
+ + +
+
+
+
@@ -488,7 +561,7 @@ import { ref, reactive, computed, onMounted, onBeforeUnmount, watch } from "vue" import { Codemirror } from "vue-codemirror"; import { yaml } from "@codemirror/lang-yaml"; import { oneDark } from "@codemirror/theme-one-dark"; -import { configApi, createDeploymentFileApi, type FileBrowserApi, type FileInfo } from "@/services/api"; +import { configApi, createDeploymentFileApi, deploymentsApi, type FileBrowserApi, type FileInfo } from "@/services/api"; import { useNotificationsStore } from "@/stores/notifications"; import { toComposeRelativePath, type ComposeMount } from "@/utils/compose"; import Icon from "@/components/base/Icon.vue"; @@ -529,6 +602,7 @@ const emit = defineEmits<{ name: string; }, ]; + unmounted: []; }>(); const notifications = useNotificationsStore(); @@ -561,19 +635,55 @@ const mountServiceName = ref(""); const mountTargetPath = ref(""); const mountReadOnly = ref(false); +const showUnmountModal = ref(false); +const fileToUnmount = ref(null); +const unmounting = ref(false); + const rowMenuOpenFor = ref(null); const toggleRowMenu = (path: string) => { rowMenuOpenFor.value = rowMenuOpenFor.value === path ? null : path; }; -const onMenuAction = (action: "mount" | "permissions" | "delete", file: FileInfo) => { +const onMenuAction = (action: "mount" | "unmount" | "permissions" | "delete", file: FileInfo) => { rowMenuOpenFor.value = null; if (action === "mount") openMountModal(file); + else if (action === "unmount") confirmUnmount(file); else if (action === "permissions") openPermissionsModal(file); else if (action === "delete") confirmDelete(file); }; +const confirmUnmount = (file: FileInfo) => { + fileToUnmount.value = file; + showUnmountModal.value = true; +}; + +const unmountFile = async () => { + const file = fileToUnmount.value; + const mounts = file ? fileMounts(file) : []; + if (!file || !mounts.length || !props.deploymentName) return; + + unmounting.value = true; + try { + // A path can be mounted into more than one service, and it stays mounted + // until the last one lets go. + for (const mount of mounts) { + await deploymentsApi.removeComposeMount(props.deploymentName, { + source_path: mount.source, + target_path: mount.target, + service_name: mount.service, + }); + } + emit("unmounted"); + showUnmountModal.value = false; + fileToUnmount.value = null; + } catch (err: any) { + error.value = err.response?.data?.error || err.message || "Could not unmount"; + } finally { + unmounting.value = false; + } +}; + const onDocumentClick = () => { if (rowMenuOpenFor.value !== null) rowMenuOpenFor.value = null; }; @@ -680,6 +790,11 @@ const fileMounts = (file: FileInfo): ComposeMount[] => { return mountsBySource.value.get(toComposeRelativePath(file.path)) || []; }; +const mountSummary = (file: FileInfo): string => + fileMounts(file) + .map((m) => `${m.service} reads this at ${m.target}${m.readOnly ? " (read only)" : ""}`) + .join("\n"); + const pathParts = computed(() => { return currentPath.value.split("/").filter((p) => p.length > 0); }); @@ -1148,6 +1263,23 @@ onBeforeUnmount(() => { min-height: 500px; } +/* Marks a path a container reads through a bind mount, so it is clear before + editing or deleting that the change reaches inside the container. */ +.mount-tag { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 0 var(--space-2); + border: 1px solid var(--accent); + border-radius: var(--radius-full); + background: var(--accent-subtle); + color: var(--accent); + font-size: var(--text-xs); + line-height: 1.6; + white-space: nowrap; + cursor: help; +} + .browser-toolbar { display: flex; justify-content: space-between; diff --git a/src/services/api.ts b/src/services/api.ts index eb59b1d..e42a77c 100755 --- a/src/services/api.ts +++ b/src/services/api.ts @@ -214,6 +214,25 @@ export const deploymentsApi = { mount: string; added: boolean; }>(`/deployments/${name}/compose/mount`, mount), + // Removes a bind mount and recreates the service, which returns it to what its + // image holds there. The host copy is left alone. + removeComposeMount: ( + name: string, + mount: { + source_path: string; + target_path: string; + service_name: string; + }, + ) => + apiClient.post<{ + message: string; + name: string; + filename: string; + content: string; + service_name: string; + source_path: string; + target_path: string; + }>(`/deployments/${name}/compose/unmount`, mount), getStats: (name: string) => apiClient.get<{ deployment: string; @@ -643,6 +662,32 @@ export interface FilesInfo { file_count: number; } +export interface ContainerFile { + name: string; + path: string; + size: number; + mode: string; + is_dir: boolean; + is_symlink: boolean; + link_target?: string; + modified_raw?: string; +} + +export const containerFilesApi = { + list: (deploymentName: string, service: string, path: string = "/") => + apiClient.get<{ path: string; service: string; files: ContainerFile[] }>( + `/deployments/${deploymentName}/container-files/${service}`, + { params: { path } }, + ), + // Copies a container path onto the host and mounts it back, so it becomes an + // ordinary file the deployment's own file browser can edit. + materialize: (deploymentName: string, service: string, data: { container_path: string; host_path?: string }) => + apiClient.post<{ deployment: string; service: string; container_path: string; host_path: string }>( + `/deployments/${deploymentName}/container-files/${service}/materialize`, + data, + ), +}; + export const filesApi = { list: (deploymentName: string, path: string = "/") => apiClient.get<{ files: FileInfo[] }>(`/deployments/${deploymentName}/files`, { diff --git a/src/views/DeploymentDetailView.vue b/src/views/DeploymentDetailView.vue index 99f4555..02f7d2f 100755 --- a/src/views/DeploymentDetailView.vue +++ b/src/views/DeploymentDetailView.vue @@ -557,12 +557,37 @@
+
+ +
+ +
@@ -1835,6 +1860,7 @@ import type { ProtectedModeConfig, } from "@/types"; import FileBrowser from "@/components/FileBrowser.vue"; +import ContainerFilesPanel from "@/components/ContainerFilesPanel.vue"; import LogViewer from "@/components/LogViewer.vue"; import ConfirmModal from "@/components/ConfirmModal.vue"; import ContainerTerminal from "@/components/ContainerTerminal.vue"; @@ -3075,6 +3101,20 @@ const saveCredential = async () => { } }; +const fileSources = [ + { id: "host", label: "Host", icon: "hard-drive" }, + { id: "container", label: "Container", icon: "box" }, +]; +const filesSource = ref("host"); + +// A path brought out of the container is an ordinary file on the host now, so +// switch to the browser that edits it, and refresh the compose view that just +// gained the mount. +const handleMaterialized = async () => { + await fetchDeployment(); + filesSource.value = "host"; +}; + const handleComposeMount = async (mount: { sourcePath: string; targetPath: string; @@ -4319,6 +4359,50 @@ onUnmounted(() => { .files-tab { height: 600px; + display: flex; + flex-direction: column; +} + +/* Matches the file browser's own toolbar padding, so the switcher and the + toolbar beneath it read as one stack rather than two misaligned bars. The + browser's toolbar draws the rule; a second one here would double it. */ +.files-source { + display: flex; + align-items: center; + gap: var(--space-1); + padding: var(--space-3) var(--space-4); + flex-shrink: 0; +} + +.files-source-btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-3); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + background: var(--surface); + color: var(--text-muted); + font-size: var(--text-sm); + cursor: pointer; +} + +.files-source-btn:hover { + color: var(--text); + border-color: var(--border-subtle); +} + +.files-source-btn.active { + background: var(--accent-subtle); + border-color: var(--accent); + color: var(--accent); +} + +/* The browsers size themselves to their container, so the pane takes what the + source switcher leaves. */ +.files-pane { + flex: 1; + min-height: 0; } .domain-settings-modal {