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

@@ -26,8 +26,19 @@ 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 {
@@ -40,16 +51,14 @@ export type TailscaleStatus = {
     BackendState: TailscaleBackendState;
     AuthURL: string;
     Self: TailscalePeer,
-  User: Record<string, TailscaleUser> | null;
     CurrentTailnet: {
         Name: string;
         MagicDNSSuffix: string;
         MagicDNSEnabled: boolean;
     } | null;
     ExitNodeStatus: TailscaleExitNodeStatus | null;
-  Peer: {
-    [key: string]: TailscalePeer
-  };
+    User: Record<string, TailscaleUser> | null;
+    Peer: Record<string, TailscalePeer> | null;
 };
 
 export type TailscaleUser = {