Show containers with no public ports

This commit adds containers that don't expose public ports to our
container view, to help users troubleshoot why they can't access those
containers.

Author: rosszurowski

ui/src/components/dropdown-menu.tsx

@@ -103,7 +103,7 @@ function DropdownMenuItem(props: DropdownMenuItemProps) {
     <MenuPrimitive.Item
       className={cx(className, menuItemClasses, menuItemInteractiveClasses, {
         "text-red-400": intent === "danger",
-        "text-gray-400 bg-white cursor-default": disabled,
+        "text-gray-400 cursor-default": disabled,
       })}
       disabled={disabled}
       {...rest}

ui/src/components/icon.tsx

@@ -109,6 +109,22 @@ const icons: Record<string, React.FC<IconProps>> = {
       <line x1="12" y1="8" x2="12.01" y2="8"></line>
     </svg>
   ),
+  error: (props: IconProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10"></circle>
+      <line x1="12" y1="8" x2="12" y2="12"></line>
+      <line x1="12" y1="16" x2="12.01" y2="16"></line>
+    </svg>
+  ),
   check: (props: IconProps) => (
     <svg
       xmlns="http://www.w3.org/2000/svg"

ui/src/styles.css

@@ -39,7 +39,9 @@
      */
     background-color: var(--dd-color-background);
     color: var(--dd-text-color-primary);
-    padding: var(--dd-page-padding-top, 1.5rem) var(--dd-page-padding-right, 1.5rem) var(--dd-page-padding-bottom, 1.5rem) var(--dd-page-padding-left, 1.5rem);
+    padding: var(--dd-page-padding-top, 1.5rem)
+      var(--dd-page-padding-right, 1.5rem) var(--dd-page-padding-bottom, 1.5rem)
+      var(--dd-page-padding-left, 1.5rem);
   }
 }
 
@@ -165,6 +167,14 @@
       opacity: 0.2;
     }
   }
+
+  .help-text {
+    @apply text-gray-500 dark:text-gray-400;
+  }
+
+  .code {
+    @apply font-mono bg-gray-800/5 dark:bg-white/5 px-1.5 py-0.5 rounded-lg;
+  }
 }
 
 @layer utilities {

ui/src/tailscale.ts

@@ -30,6 +30,12 @@ export type State = {
    */
   initialized: boolean
   backendState: BackendState
+  /**
+   * containers is the list of Docker containers currently running. This list
+   * filters out all extension containers, but includes all containers that
+   * are running, including those that don't expose public ports. Be sure to
+   * filter down to containers with public ports before offering URLs to users.
+   */
   containers: Container[]
   hostname: string
   hostStatus: HostStatus
@@ -174,8 +180,6 @@ const useTailscale = create<State>((set, get) => ({
       (await ddClient.docker.listContainers()) as Container[]
     set((prev) => {
       const containers = allContainers
-        // only show containers that expose a public port
-        .filter((c) => c.Ports.some((p) => p.PublicPort))
         // only show non-extension containers
         .filter((c) => c.Labels["com.docker.desktop.plugin"] === undefined)
       if (shallow(prev.containers, containers)) {

ui/src/views/container-view.tsx

@@ -188,31 +188,31 @@ function ContainerTable() {
     <>
       <HostWarning />
       {containers.length > 0 ? (
-        <table className="w-full text-left">
-          <thead>
-            <tr>
-              <th className={cx(tableHeaderClass, "w-1/3")}>Container</th>
-              <th className={cx(tableHeaderClass, "w-1/2")}>Tailscale URL</th>
-              <th className={tableHeaderClass} />
-            </tr>
-          </thead>
-          <tbody>
-            {containers.map((c) => (
-              <ContainerRow
-                key={c.Id}
-                container={c}
-                hostIP={hostIP}
-                host={host}
-              />
-            ))}
-          </tbody>
-        </table>
+        <>
+          <table className="w-full text-left">
+            <thead>
+              <tr>
+                <th className={cx(tableHeaderClass, "w-1/3")}>Container</th>
+                <th className={cx(tableHeaderClass, "w-1/2")}>Tailscale URL</th>
+                <th className={tableHeaderClass} />
+              </tr>
+            </thead>
+            <tbody>
+              {containers.map((c) => (
+                <ContainerRow
+                  key={c.Id}
+                  container={c}
+                  hostIP={hostIP}
+                  host={host}
+                />
+              ))}
+            </tbody>
+          </table>
+        </>
       ) : (
         <div className="text-center py-12">
           <p className="text-xl font-medium mb-1">No containers are running.</p>
-          <p className="text-gray-500 dark:text-gray-400">
-            Go to the Containers tab to get started.
-          </p>
+          <p className="help-text">Go to the Containers tab to get started.</p>
         </div>
       )}
     </>
@@ -233,6 +233,9 @@ function ContainerRow(props: {
   const tailscaleURL = `http://${tailscaleIPPort}/`
   const tailscaleIPUrl = `http://${hostIP}:${publicPort?.PublicPort}/`.trim()
 
+  const hasPublicPorts = container.Ports.some((p) => p.PublicPort)
+  const online = container.State === "running" && hasPublicPorts
+
   const handleCopyClick = useCallback(() => {
     copyToClipboard(tailscaleURL)
     setShowTooltip(true)
@@ -256,9 +259,8 @@ function ContainerRow(props: {
       <td className={cx(tableCellClass, "flex items-center")}>
         <Icon
           className={cx("mr-3", {
-            "text-emerald-400 dark:text-green-300":
-              container.State === "running",
-            "text-gray-600": container.State !== "running",
+            "text-emerald-400 dark:text-green-300": online,
+            "text-gray-400 dark:text-gray-600": !online,
           })}
           name="container"
           size="24"
@@ -268,31 +270,49 @@ function ContainerRow(props: {
         </span>
       </td>
       <td className={cx(tableCellClass, "min-w-0")}>
-        <Tooltip
-          asChild
-          content={
-            copied || persistTooltipCopy ? "Copied!" : "Copy URL to clipboard"
-          }
-          closeOnClick={false}
-          open={showTooltip || copied}
-          onOpenChange={setShowTooltip}
-        >
-          <button
-            className={cx(tableButtonClass, "flex items-center min-w-0")}
-            onClick={handleCopyClick}
+        {hasPublicPorts ? (
+          <Tooltip
+            asChild
+            content={
+              copied || persistTooltipCopy ? "Copied!" : "Copy URL to clipboard"
+            }
+            closeOnClick={false}
+            open={showTooltip || copied}
+            onOpenChange={setShowTooltip}
           >
-            <span className="truncate">{tailscaleIPPort}</span>
-            <Icon
-              className="ml-1.5 text-gray-500 dark:text-gray-400"
-              name={copied ? "check" : "clipboard"}
-              size="14"
-            />
-          </button>
-        </Tooltip>
+            <button
+              className={cx(tableButtonClass, "flex items-center min-w-0")}
+              onClick={handleCopyClick}
+            >
+              <span className="truncate">{tailscaleIPPort}</span>
+              <Icon
+                className="ml-1.5 text-gray-500 dark:text-gray-400"
+                name={copied ? "check" : "clipboard"}
+                size="14"
+              />
+            </button>
+          </Tooltip>
+        ) : (
+          <Tooltip
+            content={
+              <>
+                This container has no public ports. Expose ports using{" "}
+                <code className="code">docker run</code> with the{" "}
+                <code className="code">-p</code> flag.
+              </>
+            }
+          >
+            <div className="flex items-center min-w-0 help-text">
+              <Icon name="error" size="14" />
+              <span className="truncate ml-1.5">No public ports</span>
+            </div>
+          </Tooltip>
+        )}
       </td>
       <td className={cx("space-x-3 text-right", tableButtonCellClass)}>
         <Tooltip asChild content="Open URL in browser">
           <button
+            disabled={!online}
             className={cx(tableIconButtonClass)}
             onClick={() => openBrowser(tailscaleURL)}
           >
@@ -307,7 +327,10 @@ function ContainerRow(props: {
             </button>
           }
         >
-          <DropdownMenu.Item onSelect={() => copyToClipboard(tailscaleIPUrl)}>
+          <DropdownMenu.Item
+            disabled={!online}
+            onSelect={() => copyToClipboard(tailscaleIPUrl)}
+          >
             Copy IP address
           </DropdownMenu.Item>
           <DropdownMenu.Separator />
@@ -332,7 +355,7 @@ const tableHeaderClass = cx(
 const tableCellClass = cx(tablePadding, borderColor)
 const tableButtonCellClass = cx("px-2", borderColor)
 const tableIconButtonClass =
-  "text-gray-600 dark:text-gray-300 focus:outline-none hover:bg-[rgba(31,41,55,0.05)] dark:hover:bg-[rgba(255,255,255,0.05)] focus-visible:bg-[rgba(31,41,55,0.05)] dark:focus-visible:bg-[rgba(255,255,255,0.05)] px-2 py-2 rounded"
+  "text-gray-600 dark:text-gray-300 focus:outline-none enabled:hover:bg-[rgba(31,41,55,0.05)] enabled:dark:hover:bg-[rgba(255,255,255,0.05)] focus-visible:bg-[rgba(31,41,55,0.05)] dark:focus-visible:bg-[rgba(255,255,255,0.05)] px-2 py-2 rounded disabled:opacity-50"
 const tableButtonClass = "focus:outline-none focus-visible:ring"
 
 const hostWarningSelector = (state: State) => ({