Initial version

README.md

@@ -1,4 +1,18 @@
-cockpit-headscale
-=================
+Headscale management for Cockpit
+================================
+
+!["Prompt"](https://raw.githubusercontent.com/gbraad/assets/gh-pages/icons/prompt-icon-64.png)
+
 
 Headscale management application for Cockpit
+
+
+![Screenshot](./docs/screenshot.png)
+
+
+Authors
+-------
+
+| [!["Gerard Braad"](http://gravatar.com/avatar/e466994eea3c2a1672564e45aca844d0.png?s=60)](http://gbraad.nl "Gerard Braad <me@gbraad.nl>") |
+|---|
+| [@gbraad](https://gbraad.nl/social)  |

src/app.tsx

@@ -1,24 +1,86 @@
 import React from 'react';
 
+import { HeadscaleNode } 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';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import {
+    ExpandableRowContent,
+    Table, Caption, Thead, Tbody, Tr, Th, Td,
+    SortByDirection,
+} from '@patternfly/react-table';
 
 type ApplicationProps = {
 }
 
 type ApplicationState = {
+    Nodes: HeadscaleNode
 }
 
 export class Application extends React.Component<ApplicationProps, ApplicationState> {
     state: ApplicationState = {
+        Nodes: null
     }
 
     constructor(props: ApplicationProps) {
         super(props);
+
+        cockpit
+        .spawn(['headscale', 'nodes', 'list', '-o', 'json'])
+        .done(content => {
+            const nodes: HeadscaleNode = JSON.parse(content)
+            this.setState(state => ({ Nodes: nodes }));
+        });
+
     }
 
     render() {
         return (
             <>
-                Hello
+                {
+                this.state.Nodes != null
+                    ? <Table
+                            aria-label="Headscale nodes"
+                            variant='compact' borders={false}>
+                            <Caption>Headscale nodes</Caption>
+                            <Thead>
+                                <Tr>
+                                    <Th></Th>
+                                    <Th>Hostname</Th>
+                                    <Th>Name</Th>
+                                    <Th>IP addresses</Th>
+                                </Tr>
+                            </Thead>
+                            <Tbody>
+                                {
+                                    Object.values(this.state.Nodes)
+                                        .map(node => {
+                                            return <Node {...node} />
+                                        }
+                                    )
+                                }
+                            </Tbody>
+                        </Table>
+
+                    : <p>Loading...</p>
+                }
             </>
     )}
 }
+
+class Node extends React.Component<HeadscaleNode> {
+    render() {
+
+        return (
+            <Tr>
+                <Td>{this.props.online
+                        ? <Icon status="success"><CheckCircleIcon /></Icon>
+                        : <Icon status="danger"><ExclamationCircleIcon /></Icon>
+                    }</Td>
+                <Td>{this.props.name}</Td>
+                <Td>{this.props.given_name}</Td>
+                <Td>{this.props.ip_addresses[0]}</Td>
+            </Tr>);
+    }
+}

src/manifest.json

@@ -5,7 +5,7 @@
 
     "tools": {
         "index": {
-            "label": "Template"
+            "label": "Headscale"
         }
     }
 }

src/types.ts

@@ -0,0 +1,30 @@
+export type HeadscaleNode = {
+    id:                     number;
+    machine_key:            string;
+    node_key:               string;
+    disco_key:              string;
+    ip_addresses:           string[];
+    name:                   string;
+    user:                   User;
+    last_seen:              CreatedAt;
+    last_successful_update: CreatedAt;
+    expiry:                 Expiry;
+    created_at:             CreatedAt;
+    given_name:             string;
+    online?:                boolean;
+}
+
+export type CreatedAt = {
+    seconds: number;
+    nanos:   number;
+}
+
+export type Expiry = {
+    seconds: number;
+}
+
+export type User = {
+    id:         string;
+    name:       string;
+    created_at: CreatedAt;
+}