Twins
/
cockpit-tailscale
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add version information

main
Gerard Braad 2023-06-23 15:14:21 +08:00
parent f853605898
commit d1239a3ec0
2 changed files with 61 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/app.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; 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 { Icon } from '@patternfly/react-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@ -16,21 +16,31 @@ type ApplicationProps = {
type ApplicationState = { type ApplicationState = {
Status: TailscaleStatus Status: TailscaleStatus
Version: TailscaleVersion
} }
export class Application extends React.Component<ApplicationProps, ApplicationState> { export class Application extends React.Component<ApplicationProps, ApplicationState> {
state: ApplicationState = { state: ApplicationState = {
Status: null Status: null,
Version: null
} }
constructor(props: ApplicationProps) { constructor(props: ApplicationProps) {
super(props); super(props);
cockpit.spawn(['tailscale', 'status', '--json']).done(content => { cockpit
const status: TailscaleStatus = JSON.parse(content) .spawn(['tailscale', 'version', '--json'])
this.setState(state => ({ Status: status })); .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() { render() {
@ -43,36 +53,41 @@ export class Application extends React.Component<ApplicationProps, ApplicationSt
<> <>
{ {
this.state.Status != null this.state.Status != null
? <Table ? <div>
aria-label="Tailscale peers" <Table
variant='compact' borders={false}> aria-label="Tailscale peers"
<Caption>Tailscale peers</Caption> variant='compact' borders={false}>
<Thead> <Caption>Tailscale peers</Caption>
<Tr> <Thead>
<Th></Th> <Tr>
<Th>IP</Th> <Th></Th>
<Th>Hostname</Th> <Th>IP</Th>
<Th>Network</Th> <Th>Hostname</Th>
<Th>Tags</Th> <Th>Network</Th>
<Th>State</Th> <Th>Tags</Th>
<Th>Exit node</Th> <Th>State</Th>
<Th>OS</Th> <Th>Exit node</Th>
<Th>Traffic</Th> <Th>OS</Th>
</Tr> <Th>Traffic</Th>
</Thead> </Tr>
<Tbody> </Thead>
{ this.state.Status.Self.Self = true } <Tbody>
<Peer {...this.state.Status.Self} /> {this.state.Status.Self.Self = true}
{ <Peer {...this.state.Status.Self} />
Object.values(this.state.Status.Peer) {
.filter(isNotSharee) Object.values(this.state.Status.Peer)
.map(peer => { .filter(isNotSharee)
return <Peer {...peer} /> .map(peer => {
} return <Peer {...peer} />
) }
} )
</Tbody> }
</Table> </Tbody>
</Table>
<div>Tailscale {this.state.Version.majorMinorPatch}</div>
</div>
: <p>Loading...</p> : <p>Loading...</p>
} }
</> </>

9
src/types.ts
View File

@ -9,6 +9,15 @@ export type TailscaleBackendState =
| 'Starting' | 'Starting'
| 'Running'; | 'Running';
export type TailscaleVersion = {
majorMinorPatch: string;
short: string;
long: string;
gitCommit: string;
extraGitCommit: string;
cap: number;
}
export enum OS { export enum OS {
Android = "android", Android = "android",
IOS = "iOS", IOS = "iOS",