webnet
/
tailscale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

client/web: add device details view

Browse Source 
Initial addition of device details view on the frontend. A little
more backend piping work to come to fill all of the detail fields,
for now using placeholders.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
main
Sonia Appasamy 2 years ago committed by Sonia Appasamy
parent 3e9026efda
commit d73e923b73
5 changed files with 242 additions and 52 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 108
      client/web/src/components/app.tsx
  2. 107
      client/web/src/components/views/device-details-view.tsx
  3. 40
      client/web/src/components/views/management-client-view.tsx
  4. 19
      client/web/src/index.css
  5. 20
      client/web/src/ui/profile-pic.tsx

108
client/web/src/components/app.tsx
Unescape View File

@ -1,31 +1,57 @@
import cx from "classnames"
import React from "react"
import React, { useEffect } from "react"
import LegacyClientView from "src/components/views/legacy-client-view"
import LoginClientView from "src/components/views/login-client-view"
import ManagementClientView from "src/components/views/management-client-view"
import ReadonlyClientView from "src/components/views/readonly-client-view"
import useAuth, { AuthResponse, SessionsCallbacks } from "src/hooks/auth"
import useNodeData from "src/hooks/node-data"
import { Route, Switch } from "wouter"
import useNodeData, { NodeData, NodeUpdate } from "src/hooks/node-data"
import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg"
import ProfilePic from "src/ui/profile-pic"
import { Link, Route, Switch, useLocation } from "wouter"
import DeviceDetailsView from "./views/device-details-view"
export default function App() {
const { data: auth, loading: loadingAuth, sessions } = useAuth()
const { data, refreshData, updateNode } = useNodeData()
useEffect(() => {
refreshData()
}, [auth, refreshData])
return (
<main className="flex flex-col items-center min-w-sm max-w-lg mx-auto py-14">
{loadingAuth ? (
<main className="min-w-sm max-w-lg mx-auto py-14 px-5">
{loadingAuth || !data ? (
<div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
) : (
<Switch>
<Route path="/">
<HomeView auth={auth} sessions={sessions} />
</Route>
<Route path="/details">{/* TODO */}Device details</Route>
<Route path="/subnets">{/* TODO */}Subnet router</Route>
<Route path="/ssh">{/* TODO */}Tailscale SSH server</Route>
<Route path="/serve">{/* TODO */}Share local content</Route>
<Route>Page not found</Route>
</Switch>
<>
{/* TODO(sonia): get rid of the conditions here once full/readonly
* views live on same components */}
{data.DebugMode === "full" && auth?.ok && <Header node={data} />}
<Switch>
<Route path="/">
<HomeView
auth={auth}
data={data}
sessions={sessions}
refreshData={refreshData}
updateNode={updateNode}
/>
</Route>
{data.DebugMode !== "" && (
<>
<Route path="/details">
<DeviceDetailsView node={data} />
</Route>
<Route path="/subnets">{/* TODO */}Subnet router</Route>
<Route path="/ssh">{/* TODO */}Tailscale SSH server</Route>
<Route path="/serve">{/* TODO */}Share local content</Route>
</>
)}
<Route>
<h2 className="mt-8">Page not found</h2>
</Route>
</Switch>
</>
)}
</main>
)
@ -33,18 +59,20 @@ export default function App() {
function HomeView({
auth,
data,
sessions,
refreshData,
updateNode,
}: {
auth?: AuthResponse
data: NodeData
sessions: SessionsCallbacks
refreshData: () => Promise<void>
updateNode: (update: NodeUpdate) => void
}) {
const { data, refreshData, updateNode } = useNodeData()
return (
<>
{!data ? (
<div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
) : data?.Status === "NeedsLogin" || data?.Status === "NoState" ? (
{data?.Status === "NeedsLogin" || data?.Status === "NoState" ? (
// Client not on a tailnet, render login.
<LoginClientView
data={data}
@ -64,19 +92,47 @@ function HomeView({
updateNode={updateNode}
/>
)}
{data && <Footer licensesURL={data.LicensesURL} />}
{<Footer licensesURL={data.LicensesURL} />}
</>
)
}
function Header({ node }: { node: NodeData }) {
const [loc] = useLocation()
return (
<>
<div className="flex justify-between mb-12">
<TailscaleIcon />
<div className="flex">
<p className="mr-2">{node.Profile.LoginName}</p>
<ProfilePic url={node.Profile.ProfilePicURL} />
</div>
</div>
{loc !== "/" && (
<Link
to="/"
className="text-indigo-500 font-medium leading-snug block mb-[10px]"
>
&larr; Back to {node.DeviceName}
</Link>
)}
</>
)
}
export function Footer(props: { licensesURL: string; className?: string }) {
export function Footer({
licensesURL,
className,
}: {
licensesURL: string
className?: string
}) {
return (
<footer
className={cx("container max-w-lg mx-auto text-center", props.className)}
>
<footer className={cx("container max-w-lg mx-auto text-center", className)}>
<a
className="text-xs text-gray-500 hover:text-gray-600"
href={props.licensesURL}
href={licensesURL}
>
Open Source Licenses
</a>

107
client/web/src/components/views/device-details-view.tsx
Unescape View File

@ -0,0 +1,107 @@
import React from "react"
import { NodeData } from "src/hooks/node-data"
import ProfilePic from "src/ui/profile-pic"
export default function DeviceDetailsView({ node }: { node: NodeData }) {
return (
<div>
<h1 className="mb-10">Device details</h1>
<div className="flex flex-col gap-4">
<div className="card">
<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>
<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>
</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>
<td>Managed by</td>
<td>{node.Profile.DisplayName}</td>
</tr>
<tr>
<td>Machine name</td>
<td>{node.DeviceName}</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS</td>
</tr>
<tr>
<td>ID</td>
<td>nPKyyg3CNTRL</td>
</tr>
<tr>
<td>Tailscale version</td>
<td>{node.IPNVersion}</td>
</tr>
<tr>
<td>Key expiry</td>
<td>3 months from now</td>
</tr>
</tbody>
</table>
</div>
<div className="card">
<h2 className="mb-2">Addresses</h2>
<table>
<tbody>
<tr>
<td>Tailscale IPv4</td>
<td>{node.IP}</td>
</tr>
<tr>
<td>Tailscale IPv6</td>
<td>fd7a:115c:a1e0:ab12:4843:cd96:627a:f179</td>
</tr>
<tr>
<td>Short domain</td>
<td>{node.DeviceName}</td>
</tr>
<tr>
<td>Full domain</td>
<td>{node.DeviceName}.corp.ts.net</td>
</tr>
</tbody>
</table>
</div>
<p className="text-neutral-500 text-sm leading-tight text-center">
Want even more details? Visit{" "}
<a
// TODO: pipe control serve url from backend
href="https://login.tailscale.com/admin"
target="_blank"
className="text-indigo-700 text-sm"
>
this device’s page
</a>{" "}
in the admin console.
</p>
</div>
</div>
)
}

40
client/web/src/components/views/management-client-view.tsx
Unescape View File

@ -4,30 +4,18 @@ import { NodeData } from "src/hooks/node-data"
import { ReactComponent as ArrowRight } from "src/icons/arrow-right.svg"
import { ReactComponent as ChevronDown } from "src/icons/chevron-down.svg"
import { ReactComponent as ConnectedDeviceIcon } from "src/icons/connected-device.svg"
import { ReactComponent as TailscaleIcon } from "src/icons/tailscale-icon.svg"
import ProfilePic from "src/ui/profile-pic"
import { Link } from "wouter"
export default function ManagementClientView(props: NodeData) {
return (
<div className="px-5 mb-12 w-full">
<div className="flex justify-between mb-12">
<TailscaleIcon />
<div className="flex">
<p className="mr-2">{props.Profile.LoginName}</p>
<ProfilePic url={props.Profile.ProfilePicURL} />
</div>
</div>
<h1 className="mb-3">This device</h1>
<div className="mb-12 w-full">
<h2 className="mb-3">This device</h2>
<div className="-mx-5 card mb-9">
<div className="flex justify-between items-center text-lg mb-5">
<div className="flex items-center">
<ConnectedDeviceIcon />
<div className="ml-3">
<p className="text-neutral-800 text-lg font-medium leading-snug">
{props.DeviceName}
</p>
<h1>{props.DeviceName}</h1>
{/* TODO(sonia): display actual status */}
<p className="text-neutral-500 text-sm">Connected</p>
</div>
@ -37,23 +25,28 @@ export default function ManagementClientView(props: NodeData) {
</p>
</div>
<ExitNodeSelector className="mb-5" />
<a className="text-indigo-500 font-medium leading-snug">
<Link
className="text-indigo-500 font-medium leading-snug"
to="/details"
>
View device details &rarr;
</a>
</Link>
</div>
<h1 className="mb-3">Settings</h1>
<h2 className="mb-3">Settings</h2>
<SettingsCard
link="/subnets"
className="mb-3"
title="Subnet router"
body="Add devices to your tailnet without installing Tailscale on them."
/>
<SettingsCard
link="/ssh"
className="mb-3"
title="Tailscale SSH server"
body="Run a Tailscale SSH server on this device and allow other devices in your tailnet to SSH into it."
/>
<SettingsCard
link="/serve"
title="Share local content"
body="Share local ports, services, and content to your Tailscale network or to the broader internet."
/>
@ -79,15 +72,18 @@ function ExitNodeSelector({ className }: { className?: string }) {
function SettingsCard({
title,
link,
body,
className,
}: {
title: string
link: string
body: string
className?: string
}) {
return (
<div
<Link
to={link}
className={cx(
"-mx-5 card flex justify-between items-center cursor-pointer",
className
@ -102,6 +98,6 @@ function SettingsCard({
<div>
<ArrowRight className="ml-3" />
</div>
</div>
</Link>
)
}

19
client/web/src/index.css
Unescape View File

@ -4,6 +4,10 @@
@layer base {
h1 {
@apply text-neutral-800 text-[22px] font-medium leading-[30.80px];
}
h2 {
@apply text-neutral-500 text-sm font-medium uppercase leading-tight tracking-wide;
}
}
@ -12,6 +16,21 @@
.card {
@apply p-5 bg-white rounded-lg border border-gray-200;
}
.card h1 {
@apply text-neutral-800 text-lg font-medium leading-snug;
}
.card h2 {
@apply text-neutral-500 text-xs font-semibold uppercase tracking-wide;
}
.card tbody {
@apply flex flex-col gap-2;
}
.card td:first-child {
@apply w-40 text-neutral-500 text-sm leading-tight;
}
.card td:last-child {
@apply text-neutral-800 text-sm leading-tight;
}
.hover-button {
@apply px-2 py-1.5 bg-white rounded-[1px] cursor-pointer;

20
client/web/src/ui/profile-pic.tsx
Unescape View File

@ -1,18 +1,30 @@
import cx from "classnames"
import React from "react"
export default function ProfilePic({ url }: { url: string }) {
export default function ProfilePic({
url,
size = "medium",
}: {
url: string
size?: "small" | "medium"
}) {
return (
<div className="relative flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
<div
className={cx("relative flex-shrink-0 rounded-full overflow-hidden", {
"w-5 h-5": size === "small",
"w-8 h-8": size === "medium",
})}
>
{url ? (
<div
className="w-8 h-8 flex pointer-events-none rounded-full bg-gray-200"
className="w-full h-full flex pointer-events-none rounded-full bg-gray-200"
style={{
backgroundImage: `url(${url})`,
backgroundSize: "cover",
}}
/>
) : (
<div className="w-8 h-8 flex pointer-events-none rounded-full border border-gray-400 border-dashed" />
<div className="w-full h-full flex pointer-events-none rounded-full border border-gray-400 border-dashed" />
)}
</div>
)

Write Preview
Loading…
Cancel
Save