client/web: populate device details view

Fills /details page with real values, passed back from the /data
endpoint.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/components/acl-tag.tsx

@@ -0,0 +1,25 @@
+import cx from "classnames"
+import React from "react"
+import Badge from "src/ui/badge"
+
+/**
+ * ACLTag handles the display of an ACL tag.
+ */
+export default function ACLTag({
+  tag,
+  className,
+}: {
+  tag: string
+  className?: string
+}) {
+  return (
+    <Badge
+      variant="status"
+      color="outline"
+      className={cx("flex text-xs items-center", className)}
+    >
+      <span className="font-medium">tag:</span>
+      <span className="text-gray-500">{tag.replace("tag:", "")}</span>
+    </Badge>
+  )
+}

client/web/src/components/views/device-details-view.tsx

@@ -1,8 +1,13 @@
+import cx from "classnames"
 import React from "react"
+import { apiFetch } from "src/api"
 import { NodeData } from "src/hooks/node-data"
-import ProfilePic from "src/ui/profile-pic"
+import { useLocation } from "wouter"
+import ACLTag from "../acl-tag"
 
 export default function DeviceDetailsView({ node }: { node: NodeData }) {
+  const [, setLocation] = useLocation()
+
   return (
     <div>
       <h1 className="mb-10">Device details</h1>
@@ -11,37 +16,36 @@ export default function DeviceDetailsView({ node }: { node: NodeData }) {
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <h1>{node.DeviceName}</h1>
-              {/* TODO: connected status */}
-              <div className="w-2.5 h-2.5 bg-emerald-500 rounded-full" />
+              <div
+                className={cx("w-2.5 h-2.5 rounded-full", {
+                  "bg-emerald-500": node.Status === "Running",
+                  "bg-gray-300": node.Status !== "Running",
+                })}
+              />
             </div>
-            <button className="px-3 py-2 bg-stone-50 rounded shadow border border-stone-200 text-neutral-800 text-sm font-medium">
-              Log out…
+            <button
+              className="px-3 py-2 bg-stone-50 rounded shadow border border-stone-200 text-neutral-800 text-sm font-medium"
+              onClick={() =>
+                apiFetch("/local/v0/logout", "POST")
+                  .then(() => setLocation("/"))
+                  .catch((err) => alert("Logout failed: " + err.message))
+              }
+            >
+              Disconnect…
             </button>
           </div>
-          <hr className="my-5" />
-          <div className="text-neutral-500 text-sm leading-tight mb-1">
-            Managed by
-          </div>
-          <div className="flex">
-            {/* TODO: tags display */}
-            <ProfilePic size="small" url={node.Profile.ProfilePicURL} />
-            <div className="ml-2 text-neutral-800 text-sm leading-tight">
-              {node.Profile.LoginName}
-            </div>
-          </div>
         </div>
         <div className="card">
           <h2 className="mb-2">General</h2>
           <table>
             <tbody>
-              {/* TODO: pipe through these values */}
-              <tr>
-                <td>Creator</td>
-                <td>{node.Profile.DisplayName}</td>
-              </tr>
-              <tr>
+              <tr className="flex">
                 <td>Managed by</td>
-                <td>{node.Profile.DisplayName}</td>
+                <td className="flex gap-1 flex-wrap">
+                  {node.IsTagged
+                    ? node.Tags.map((t) => <ACLTag key={t} tag={t} />)
+                    : node.Profile.DisplayName}
+                </td>
               </tr>
               <tr>
                 <td>Machine name</td>
@@ -49,11 +53,11 @@ export default function DeviceDetailsView({ node }: { node: NodeData }) {
               </tr>
               <tr>
                 <td>OS</td>
-                <td>MacOS</td>
+                <td>{node.OS}</td>
               </tr>
               <tr>
                 <td>ID</td>
-                <td>nPKyyg3CNTRL</td>
+                <td>{node.ID}</td>
               </tr>
               <tr>
                 <td>Tailscale version</td>
@@ -61,7 +65,12 @@ export default function DeviceDetailsView({ node }: { node: NodeData }) {
               </tr>
               <tr>
                 <td>Key expiry</td>
-                <td>3 months from now</td>
+                <td>
+                  {node.KeyExpired
+                    ? "Expired"
+                    : // TODO: present as relative expiry (e.g. "5 months from now")
+                      new Date(node.KeyExpiry).toLocaleString()}
+                </td>
               </tr>
             </tbody>
           </table>
@@ -76,7 +85,7 @@ export default function DeviceDetailsView({ node }: { node: NodeData }) {
               </tr>
               <tr>
                 <td>Tailscale IPv6</td>
-                <td>fd7a:115c:a1e0:ab12:4843:cd96:627a:f179</td>
+                <td>{node.IPv6}</td>
               </tr>
               <tr>
                 <td>Short domain</td>
@@ -84,7 +93,9 @@ export default function DeviceDetailsView({ node }: { node: NodeData }) {
               </tr>
               <tr>
                 <td>Full domain</td>
-                <td>{node.DeviceName}.corp.ts.net</td>
+                <td>
+                  {node.DeviceName}.{node.TailnetName}
+                </td>
               </tr>
             </tbody>
           </table>

client/web/src/hooks/node-data.ts

@@ -3,9 +3,14 @@ import { apiFetch, setUnraidCsrfToken } from "src/api"
 
 export type NodeData = {
   Profile: UserProfile
-  Status: string
+  Status: NodeState
   DeviceName: string
+  OS: string
   IP: string
+  IPv6: string
+  ID: string
+  KeyExpiry: string
+  KeyExpired: boolean
   AdvertiseExitNode: boolean
   AdvertiseRoutes: string
   LicensesURL: string
@@ -16,10 +21,21 @@ export type NodeData = {
   UnraidToken: string
   IPNVersion: string
   URLPrefix: string
+  TailnetName: string
+  IsTagged: boolean
+  Tags: string[]
 
   DebugMode: "" | "login" | "full" // empty when not running in any debug mode
 }
 
+type NodeState =
+  | "NoState"
+  | "NeedsLogin"
+  | "NeedsMachineAuth"
+  | "Stopped"
+  | "Starting"
+  | "Running"
+
 export type UserProfile = {
   LoginName: string
   DisplayName: string

client/web/src/index.css

@@ -26,7 +26,7 @@
     @apply flex flex-col gap-2;
   }
   .card td:first-child {
-    @apply w-40 text-neutral-500 text-sm leading-tight;
+    @apply w-40 text-neutral-500 text-sm leading-tight flex-shrink-0;
   }
   .card td:last-child {
     @apply text-neutral-800 text-sm leading-tight;

client/web/src/ui/badge.tsx

@@ -0,0 +1,48 @@
+import cx from "classnames"
+import React, { HTMLAttributes } from "react"
+
+export type BadgeColor =
+  | "blue"
+  | "green"
+  | "red"
+  | "orange"
+  | "yellow"
+  | "gray"
+  | "outline"
+
+type Props = {
+  variant: "tag" | "status"
+  color: BadgeColor
+} & HTMLAttributes<HTMLDivElement>
+
+export default function Badge(props: Props) {
+  const { className, color, variant, ...rest } = props
+
+  return (
+    <div
+      className={cx(
+        "inline-flex items-center align-middle justify-center font-medium",
+        {
+          "border border-gray-200 bg-gray-200 text-gray-600": color === "gray",
+          "border border-green-50 bg-green-50 text-green-600":
+            color === "green",
+          "border border-blue-50 bg-blue-50 text-blue-600": color === "blue",
+          "border border-orange-50 bg-orange-50 text-orange-600":
+            color === "orange",
+          "border border-yellow-50 bg-yellow-50 text-yellow-600":
+            color === "yellow",
+          "border border-red-50 bg-red-50 text-red-600": color === "red",
+          "border border-gray-300 bg-white": color === "outline",
+          "rounded-full px-2 py-1 leading-none": variant === "status",
+          "rounded-sm px-1": variant === "tag",
+        },
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
+Badge.defaultProps = {
+  color: "gray",
+}