From 74ab528176fa1145d8d6679f83e7d45b17afe732 Mon Sep 17 00:00:00 2001
From: Gerard Braad <me@gbraad.nl>
Date: Thu, 22 Jun 2023 22:29:20 +0800
Subject: [PATCH] Show hostname, network and exitnode

---
 src/app.tsx | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index dc0387b..07c9336 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -33,11 +33,6 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
     }
 
     render() {
-
-
-        const columns: TableProps['cols'] = ['', 'IP', 'Hostname'];
-  
-
         
         return (
             <>
@@ -47,6 +42,15 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
                                 aria-label="Tailscale peers"
                                 variant='compact' borders={false}>
                             <Caption>Tailscale peers</Caption>
+                            <Thead noWrap>
+                                <Tr>
+                                    <Th></Th>
+                                    <Th>IP</Th>
+                                    <Th>Hostname</Th>
+                                    <Th>Network</Th>
+                                    <Th>Exit node</Th>
+                                </Tr>
+                            </Thead>
                             <Tbody>
                                 <Peer {...this.state.Status.Self} />
                                 {
@@ -67,15 +71,27 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
 
 class Peer extends React.Component<TailscalePeer> {
     render() {
+
+        const name = this.props.DNSName.split('.');
+        const hostName = name[0];
+        const network = name[1] + '.' + 'ts.net';
+
         return (
             <Tr>
                 <Td>
-                    {this.props.Online
+                    { this.props.Online
                         ? <Icon status="success"><CheckCircleIcon /></Icon>
                         : <Icon status="danger"><ExclamationCircleIcon /></Icon>
                     }</Td>
-                <Td>{this.props.TailscaleIPs[0]}</Td>
-                <Td>{this.props.HostName}</Td>
+                <Td>{ this.props.TailscaleIPs[0] }</Td>
+                <Td>{ hostName }</Td>
+                <Td>{ network }</Td>
+                <Td>{ this.props.ExitNode
+                        ? "Current"
+                        : this.props.ExitNodeOption
+                            ? "Yes"
+                            : ""
+                }</Td>
             </Tr>);
     }
 }