diff --git a/client/web/assets.go b/client/web/assets.go index ad6dc4970..c4af0694b 100644 --- a/client/web/assets.go +++ b/client/web/assets.go @@ -35,7 +35,7 @@ func startDevServer() (cleanup func()) { node := filepath.Join(root, "tool", "node") vite := filepath.Join(webClientPath, "node_modules", ".bin", "vite") - log.Printf("installing JavaScript deps using %s... (might take ~30s)", yarn) + log.Printf("installing JavaScript deps using %s...", yarn) out, err := exec.Command(yarn, "--non-interactive", "-s", "--cwd", webClientPath, "install").CombinedOutput() if err != nil { log.Fatalf("error running tailscale web's yarn install: %v, %s", err, out) diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx index 488abedca..b9e2827f0 100644 --- a/client/web/src/components/app.tsx +++ b/client/web/src/components/app.tsx @@ -2,10 +2,10 @@ import cx from "classnames" import React 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 ManagementClientView from "./views/management-client-view" export default function App() { const { data: auth, loading: loadingAuth, sessions } = useAuth() diff --git a/client/web/src/components/views/management-client-view.tsx b/client/web/src/components/views/management-client-view.tsx index aa26b258b..6f9cc1b14 100644 --- a/client/web/src/components/views/management-client-view.tsx +++ b/client/web/src/components/views/management-client-view.tsx @@ -1,35 +1,107 @@ +import cx from "classnames" import React from "react" 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" export default function ManagementClientView(props: NodeData) { return ( -
{props.Profile.LoginName}
- {/* TODO(sonia): support tagged node profile view more eloquently */}This device
-{props.DeviceName}
++ {props.DeviceName} +
+ {/* TODO(sonia): display actual status */} +Connected
+{props.IP}
++ {props.IP} +
+ Exit node +
+None
++ {title} +
+{body}
+- Tailscale is up and running. You can connect to this device from devices - in your tailnet by using its name or IP address. -
-