From d1239a3ec0c6924dedd8296c2f7c8e169838f8ec Mon Sep 17 00:00:00 2001
From: Gerard Braad <me@gbraad.nl>
Date: Fri, 23 Jun 2023 15:14:21 +0800
Subject: [PATCH] Add version information

---
 src/app.tsx  | 89 ++++++++++++++++++++++++++++++----------------------
 src/types.ts |  9 ++++++
 2 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 40a6552..f006e12 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TailscaleBackendState, TailscalePeer, TailscaleStatus, TailscaleUp } from './types';
+import { TailscaleBackendState, TailscalePeer, TailscaleStatus, TailscaleUp, TailscaleVersion } from './types';
 import { Icon } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -16,21 +16,31 @@ type ApplicationProps = {
 
 type ApplicationState = {
     Status: TailscaleStatus
+    Version: TailscaleVersion
 }
 
-
 export class Application extends React.Component<ApplicationProps, ApplicationState> {
     state: ApplicationState = {
-        Status: null
+        Status: null,
+        Version: null
     }
 
     constructor(props: ApplicationProps) {
         super(props);
 
-        cockpit.spawn(['tailscale', 'status', '--json']).done(content => {
-            const status: TailscaleStatus = JSON.parse(content)
-            this.setState(state => ({ Status: status }));
-        });
+        cockpit
+            .spawn(['tailscale', 'version', '--json'])
+            .done(content => {
+                const version: TailscaleVersion = JSON.parse(content)
+                this.setState(state => ({ Version: version }));
+            });
+
+        cockpit
+            .spawn(['tailscale', 'status', '--json'])
+            .done(content => {
+                const status: TailscaleStatus = JSON.parse(content)
+                this.setState(state => ({ Status: status }));
+            });
     }
 
     render() {
@@ -43,36 +53,41 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
             <>
                 {
                     this.state.Status != null
-                        ? <Table
-                            aria-label="Tailscale peers"
-                            variant='compact' borders={false}>
-                            <Caption>Tailscale peers</Caption>
-                            <Thead>
-                                <Tr>
-                                    <Th></Th>
-                                    <Th>IP</Th>
-                                    <Th>Hostname</Th>
-                                    <Th>Network</Th>
-                                    <Th>Tags</Th>
-                                    <Th>State</Th>
-                                    <Th>Exit node</Th>
-                                    <Th>OS</Th>
-                                    <Th>Traffic</Th>
-                                </Tr>
-                            </Thead>
-                            <Tbody>
-                                { this.state.Status.Self.Self = true }
-                                <Peer {...this.state.Status.Self} />
-                                {
-                                    Object.values(this.state.Status.Peer)
-                                        .filter(isNotSharee)
-                                        .map(peer => {
-                                            return <Peer {...peer} />
-                                        }
-                                    )
-                                }
-                            </Tbody>
-                        </Table>
+                        ? <div>
+                            <Table
+                                aria-label="Tailscale peers"
+                                variant='compact' borders={false}>
+                                <Caption>Tailscale peers</Caption>
+                                <Thead>
+                                    <Tr>
+                                        <Th></Th>
+                                        <Th>IP</Th>
+                                        <Th>Hostname</Th>
+                                        <Th>Network</Th>
+                                        <Th>Tags</Th>
+                                        <Th>State</Th>
+                                        <Th>Exit node</Th>
+                                        <Th>OS</Th>
+                                        <Th>Traffic</Th>
+                                    </Tr>
+                                </Thead>
+                                <Tbody>
+                                    {this.state.Status.Self.Self = true}
+                                    <Peer {...this.state.Status.Self} />
+                                    {
+                                        Object.values(this.state.Status.Peer)
+                                            .filter(isNotSharee)
+                                            .map(peer => {
+                                                return <Peer {...peer} />
+                                            }
+                                            )
+                                    }
+                                </Tbody>
+                            </Table>
+
+                            <div>Tailscale {this.state.Version.majorMinorPatch}</div>
+                        </div>
+
                         : <p>Loading...</p>
                 }
             </>
diff --git a/src/types.ts b/src/types.ts
index 181ddf8..401ce08 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -9,6 +9,15 @@ export type TailscaleBackendState =
     | 'Starting'
     | 'Running';
 
+export type TailscaleVersion = {
+    majorMinorPatch: string;
+	short: string;
+	long: string;
+	gitCommit: string;
+	extraGitCommit: string;
+	cap: number;
+}
+
 export enum OS {
     Android = "android",
     IOS = "iOS",