Add os-release information to hosts

See https://www.freedesktop.org/software/systemd/man/os-release.html

Author: Michel Zimmer

Dockerfile

@@ -26,5 +26,5 @@ LABEL org.opencontainers.image.vendor="neuland – Büro für Informatik GmbH"
 LABEL org.opencontainers.image.licenses="MIT"
 LABEL org.opencontainers.image.title="bandwhichd-ui"
 LABEL org.opencontainers.image.description="bandwhichd ui displaying network topology and statistics"
-LABEL org.opencontainers.image.version="0.6.0"
+LABEL org.opencontainers.image.version="0.6.1"
 COPY --from=build --chown=root:root /home/node/dist /usr/share/nginx/html

mocks/stats.json

@@ -1,6 +1,6 @@
 {
   "name": "bandwhichd-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "bandwhichd ui displaying network topology and statistics",
   "license": "MIT",
   "private": true,

package.json

@@ -1,3 +1,4 @@
+import React, { useState } from "react";
 import { Map } from "immutable";
 import { Connection, Host, HostId, Stats, UnmonitoredHost } from "./Stats";
 
@@ -16,6 +17,15 @@ export const HostDetails: React.FC<HostDetailsProps> =
         }
         const selectedHost = props.maybeSelectedHost;
 
+        const osReleasName: string =
+            selectedHost.os_release === null
+                ? "Unknown"
+                : selectedHost.os_release.pretty_name !== null
+                    && selectedHost.os_release.pretty_name.length > 0
+                    ? selectedHost.os_release.pretty_name
+                    : `${selectedHost.os_release.id} ${selectedHost.os_release.version_id}`;
+        const [showOsReleaseDetails, setShowOsReleaseDetails] = useState<boolean>(false);
+
         const connectionsToMonitoredHosts = selectedHost
             .connections
             .flatMap<HostId, { hostDetails: Host, connectionDetails: Connection }>((connection, hostId) => {
@@ -63,6 +73,32 @@ export const HostDetails: React.FC<HostDetailsProps> =
         return <aside className={style["host-details"]}>
             <section>
                 <p>{selectedHost.hostname}</p>
+                <p>OS: {osReleasName} {selectedHost.os_release && <button onClick={_ => setShowOsReleaseDetails(!showOsReleaseDetails)}>{showOsReleaseDetails ? "-" : "+"}</button>}</p>
+                {
+                    selectedHost.os_release && showOsReleaseDetails &&
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td>Pretty name:</td>
+                                <td>
+                                    <code>{selectedHost.os_release?.pretty_name}</code>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Id:</td>
+                                <td>
+                                    <code>{selectedHost.os_release?.id}</code>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Version id:</td>
+                                <td>
+                                    <code>{selectedHost.os_release?.version_id}</code>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                }
             </section>
             <section>
                 {
@@ -75,7 +111,7 @@ export const HostDetails: React.FC<HostDetailsProps> =
                             {
                                 connectionsToMonitoredHosts
                                     .entrySeq()
-                                    .sortBy(([_, {hostDetails}]) => hostDetails.hostname)
+                                    .sortBy(([_, { hostDetails }]) => hostDetails.hostname)
                                     .map(([hostId, { hostDetails }]) => <li key={hostId}>
                                         {
                                             hostId === selectedHost.hostId
@@ -99,7 +135,7 @@ export const HostDetails: React.FC<HostDetailsProps> =
                             {
                                 connectionsToUnmonitoredHosts
                                     .entrySeq()
-                                    .sortBy(([_, {unmonitoredHostDetails}]) => unmonitoredHostDetails.host)
+                                    .sortBy(([_, { unmonitoredHostDetails }]) => unmonitoredHostDetails.host)
                                     .map(([hostId, { unmonitoredHostDetails }]) => <li key={hostId}>{unmonitoredHostDetails.host}</li>)
                             }
                         </ul>

src/HostDetails.tsx

@@ -3,6 +3,7 @@ import * as Decoder from "io-ts/lib/Decoder"
 import { mapDecoder } from "./lib/immutable/io-ts/mapDecoder";
 import { parseBodyAsJson, rejectNonOk } from "./lib/es/response/promiseUtils";
 import { decode } from "./lib/io-ts/promiseUtils";
+import { undefinedAsNullDecoder } from "./lib/io-ts/undefinedAsNullDecoder";
 
 
 const hostIdTag = Symbol("HostId");
@@ -15,15 +16,43 @@ export type Hostname = string & { readonly _tag: typeof hostnameTag; };
 const createHostname: (value: string) => Hostname = (value) => value as Hostname;
 const hostnameDecoder = Decoder.map(createHostname)(Decoder.string);
 
+const osReleaseIdTag = Symbol("OsReleaseId");
+export type OsReleaseId = string & { readonly _tag: typeof osReleaseIdTag; };
+const createOsReleaseId: (value: string) => OsReleaseId = (value) => value as OsReleaseId;
+const osReleaseIdDecoder = Decoder.map(createOsReleaseId)(Decoder.string);
+
+const osReleasePrettyNameTag = Symbol("OsReleasePrettyName");
+export type OsReleasePrettyName = string & { readonly _tag: typeof osReleasePrettyNameTag; };
+const createOsReleasePrettyName: (value: string) => OsReleasePrettyName = (value) => value as OsReleasePrettyName;
+const osReleasePrettyNameDecoder = Decoder.map(createOsReleasePrettyName)(Decoder.string);
+
+const osReleaseVersionIdTag = Symbol("OsReleaseVersionId");
+export type OsReleaseVersionId = string & { readonly _tag: typeof osReleaseVersionIdTag; };
+const createOsReleaseVersionId: (value: string) => OsReleaseVersionId = (value) => value as OsReleaseVersionId;
+const osReleaseVersionIdDecoder = Decoder.map(createOsReleaseVersionId)(Decoder.string);
+
+export interface OsRelease {
+    readonly id: OsReleaseId | null;
+    readonly pretty_name: OsReleasePrettyName | null;
+    readonly version_id: OsReleaseVersionId | null;
+}
+const osReleaseDecoder = Decoder.struct({
+    id: undefinedAsNullDecoder(osReleaseIdDecoder),
+    pretty_name: undefinedAsNullDecoder(osReleasePrettyNameDecoder),
+    version_id: undefinedAsNullDecoder(osReleaseVersionIdDecoder),
+});
+
 export interface Connection { }
 const connectionDecoder = Decoder.struct({});
 
 export interface Host {
     readonly hostname: Hostname;
+    readonly os_release: OsRelease | null;
     readonly connections: Map<HostId, Connection>;
 }
 const hostDecoder = Decoder.struct({
     hostname: hostnameDecoder,
+    os_release: undefinedAsNullDecoder(osReleaseDecoder),
     connections: mapDecoder(hostIdDecoder, connectionDecoder),
 });
 

src/Stats.ts

@@ -0,0 +1,9 @@
+import * as Decoder from "io-ts/lib/Decoder";
+
+export const undefinedAsNullDecoder: <A>(decoder: Decoder.Decoder<unknown, A>) => Decoder.Decoder<unknown, A | null> =
+    <A>(decoder: Decoder.Decoder<unknown, A>) => ({
+        decode: (i: unknown) =>
+            i === undefined
+                ? Decoder.success(null)
+                : decoder.decode(i)
+    })