Basic peer overview

src/app.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { ReactComponentElement, ReactNode } from 'react';
 
-import { TailscaleBackendState, TailscaleStatus, TailscaleUp } from './types';
+import { TailscaleBackendState, TailscalePeer, TailscaleStatus, TailscaleUp } from './types';
 import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 
 type ApplicationProps = { 
@@ -26,19 +26,39 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
     }
 
     render() {
+
         return (
 		<Card>
             <CardTitle>Tailscale</CardTitle>
             <CardBody>
-                <pre>
                 {
                     this.state.Status != null
-                        ? this.state.Status.Self.HostName + " " + this.state.Status.Self.TailscaleIPs[0]
+                        ? <>
+                            <Peer { ...this.state.Status.Self } />
+                            <hr />
+                            {
+                                Object.entries(this.state.Status.Peer).map(peer =>
+                                    {
+                                        return <Peer {...peer[1]} />
+                                    }
+                                )    
+                            }
+                          </>
                         : <p>Loading...</p>
                 }
-                </pre>
             </CardBody>
 		</Card>
         );
     }
 }
+
+
+class Peer extends React.Component<TailscalePeer> {
+    render() {
+         return (<div>
+                <p>
+                    <pre>{ this.props.TailscaleIPs[0] } { ' '.repeat(15 - this.props.TailscaleIPs[0].length) } { this.props.HostName }</pre>
+                </p>
+            </div>);
+    }
+}

src/types.ts

@@ -1,13 +1,13 @@
 // BackendState
 // Keep in sync with https://github.com/tailscale/tailscale/blob/main/ipn/backend.go
 export type TailscaleBackendState =
-  | 'NoState'
+    | 'NoState'
-  | 'NeedsMachineAuth'
+    | 'NeedsMachineAuth'
-  | 'NeedsLogin'
+    | 'NeedsLogin'
-  | 'InUseOtherUser'
+    | 'InUseOtherUser'
-  | 'Stopped'
+    | 'Stopped'
-  | 'Starting'
+    | 'Starting'
-  | 'Running';
+    | 'Running';
 
 export enum OS {
     Android = "android",
@@ -26,42 +26,51 @@ export type TailscalePeer = {
     UserID: string;
     TailscaleIPs: string[]
     Tags?: string[];
-    Online: boolean;
     Capabilities?: string[];
+    Relay: string;
+    RxBytes: number;
+    TxBytes: number;
+    Created: Date;
+    LastWrite: Date;
+    LastSeen: Date;
+    LastHandshake: Date;
+    Online: boolean;
+    KeepAlive: boolean;
+    ExitNode: boolean;
+    ExitNodeOption: boolean;
+    Active: boolean;
 }
 
 export interface TailscaleExitNodeStatus {
-    ID:           string;
+    ID: string;
-    Online:       boolean;
+    Online: boolean;
     TailscaleIPs: string[];
 }
 
 export type TailscaleStatus = {
-  BackendState: TailscaleBackendState;
+    BackendState: TailscaleBackendState;
-  AuthURL: string;
+    AuthURL: string;
-  Self: TailscalePeer,
+    Self: TailscalePeer,
-  User: Record<string, TailscaleUser> | null;
+    CurrentTailnet: {
-  CurrentTailnet: {
+        Name: string;
-    Name: string;
+        MagicDNSSuffix: string;
-    MagicDNSSuffix: string;
+        MagicDNSEnabled: boolean;
-    MagicDNSEnabled: boolean;
+    } | null;
-  } | null;
+    ExitNodeStatus: TailscaleExitNodeStatus | null;
-  ExitNodeStatus: TailscaleExitNodeStatus | null;
+    User: Record<string, TailscaleUser> | null;
-  Peer: {
+    Peer: Record<string, TailscalePeer> | null;
-    [key: string]: TailscalePeer
-  };
 };
 
 export type TailscaleUser = {
-  ID: number;
+    ID: number;
-  LoginName: string;
+    LoginName: string;
-  DisplayName: string;
+    DisplayName: string;
-  ProfilePicURL: string;
+    ProfilePicURL: string;
-  Roles: string[];
+    Roles: string[];
 };
 
 export type TailscaleUp = {
-  BackendState: TailscaleBackendState;
+    BackendState: TailscaleBackendState;
-  AuthURL?: string;
+    AuthURL?: string;
-  QR?: string;
+    QR?: string;
 };