fix: make published port links open reliably (#1359)

* fix: make published port links open reliably Container published-port links now render as real anchors that open on desktop and mobile, replacing ad hoc window.open calls. A shared service URL builder centralizes host resolution (configured host, remote node API host, or the browser host, with no browser fallback for unreachable remote nodes), protocol selection (HTTPS for port 443), and known app sub-paths (Plex opens its web path). The container port mapping itself is the link, with a Copy URL action beside it. The stack Open App menu and the anatomy panel footer use the same builder, and the menu only offers Open App when a reachable URL can be built. * fix: skip UDP ports and scope known-app paths to the container port Two follow-ups to the published-port links: - The known-app path (Plex web sub-path) was borrowed from the published host port even when the container port was known and unregistered, so a non-Plex service published on host port 32400 wrongly inherited it. The container-port lookup now wins when known; the published-port lookup stays a fallback for the menu and anatomy footer, which only have the host port. - UDP ports could surface as HTTP links. The backend now carries the port protocol through both container-mapping paths and skips UDP when choosing the main web port (extracted as selectMainWebPort), and the container card filters UDP before selecting a port to link.
2026-08-18 06:23:18 +00:00 · 2026-06-11 16:37:53 -04:00
parent e3944295f2
commit f253276303
21 changed files with 782 additions and 76 deletions
@@ -0,0 +1,82 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+vi.mock('@/lib/clipboard', () => ({ copyToClipboard: vi.fn().mockResolvedValue(undefined) }));
+vi.mock('../../Terminal', () => ({ default: () => null }));
+vi.mock('../../StructuredLogViewer', () => ({ default: () => null }));
+vi.mock('../../ImageSourceMenu', () => ({ ImageSourceMenu: () => null }));
+
+import { ContainersHealth } from '../editor-view-blocks';
+import { copyToClipboard } from '@/lib/clipboard';
+import type { ContainerInfo } from '../EditorView';
+import type { Node } from '@/context/NodeContext';
+
+const LOCAL_NODE = { id: 1, type: 'local' } as Node;
+
+function container(ports: { PrivatePort: number; PublicPort: number; Type?: string }[]): ContainerInfo {
+  return {
+    Id: 'abc123def456',
+    Names: ['/web'],
+    State: 'running',
+    Status: 'Up 2 hours',
+    Image: 'nginx',
+    Ports: ports,
+  } as unknown as ContainerInfo;
+}
+
+function renderHealth(c: ContainerInfo, activeNode: Node | null = LOCAL_NODE) {
+  return render(
+    <ContainersHealth
+      safeContainers={[c]}
+      containerStats={{}}
+      containerStatsError={null}
+      isAdmin
+      activeNode={activeNode}
+      openLogViewer={vi.fn()}
+      openBashModal={vi.fn()}
+      serviceAction={vi.fn()}
+    />,
+  );
+}
+
+describe('ContainersHealth published port link', () => {
+  beforeEach(() => {
+    vi.mocked(copyToClipboard).mockClear();
+  });
+
+  it('renders the port mapping as a real anchor with safe new-tab attributes', () => {
+    renderHealth(container([{ PrivatePort: 80, PublicPort: 8080 }]));
+    const link = screen.getByRole('link', { name: /8080/ });
+    expect(link).toHaveAttribute('href', 'http://localhost:8080');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('uses https when the container port is 443', () => {
+    renderHealth(container([{ PrivatePort: 443, PublicPort: 8443 }]));
+    expect(screen.getByRole('link', { name: /8443/ })).toHaveAttribute('href', 'https://localhost:8443');
+  });
+
+  it('appends the known service path for a recognised app, keyed by the container port', () => {
+    renderHealth(container([{ PrivatePort: 32400, PublicPort: 12345 }]));
+    expect(screen.getByRole('link', { name: /12345/ })).toHaveAttribute('href', 'http://localhost:12345/web');
+  });
+
+  it('copies the service URL from the row', async () => {
+    renderHealth(container([{ PrivatePort: 80, PublicPort: 8080 }]));
+    fireEvent.click(screen.getByRole('button', { name: 'Copy service URL' }));
+    await waitFor(() => expect(copyToClipboard).toHaveBeenCalledWith('http://localhost:8080'));
+  });
+
+  it('does not render a link for a UDP-only published port', () => {
+    renderHealth(container([{ PrivatePort: 53, PublicPort: 5353, Type: 'udp' }]));
+    expect(screen.queryByRole('link', { name: /5353/ })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Copy service URL' })).toBeNull();
+  });
+
+  it('shows the port as plain text (no link) for a remote node with no reachable host', () => {
+    renderHealth(container([{ PrivatePort: 80, PublicPort: 8080 }]), { id: 2, type: 'remote', api_url: '' } as Node);
+    expect(screen.queryByRole('link', { name: /8080/ })).toBeNull();
+    expect(screen.getByText(/8080 → 80\/tcp/)).toBeInTheDocument();
+  });
+});