[web] host index page

tfweb/src/lib/i18n/locales/en.json

@@ -83,6 +83,13 @@
       "api": "Unable to contact the server. Try again later."
     }
   },
+  "hosts": {
+    "name": "Name",
+    "role": "Role",
+    "lastseen": "Last Seen",
+    "actions": "Actions",
+    "ipaddr": "IP Address"
+  },
   "roles": {
     "create": "Add",
     "explain": "Roles control how hosts, lighthouses, and relays communicate through firewall rules.",

tfweb/src/routes/hosts/+page.svelte

@@ -6,7 +6,8 @@
     import {Logger, logSetup} from "$lib/logger";
     import type {APIError} from "$lib/auth.ts";
     import {PUBLIC_BASE_URL} from "$env/static/public";
-    import {Configuration, NetworksApi} from "$lib/api";
+    import {Configuration, HostsApi, NetworksApi, RolesApi} from "$lib/api";
+    import type {Host} from "$lib/api/models/Host.ts";
     import AdminLayout from "$components/AdminLayout.svelte";
 
     let loading = true;
@@ -14,6 +15,8 @@
     let error = '';
     $: currentlyLoading = $isLoading || loading;
 
+    let hosts: Host[] = [];
+
     logSetup();
     let logger = new Logger("hosts/+page.svelte");
 
@@ -63,6 +66,14 @@
             return;
         }
 
+        const hostsApi = new HostsApi(configuration);
+        hosts = (await hostsApi.hostsList({
+            filterIsLighthouse: false,
+            filterIsRelay: false
+        })).data!;
+
+        console.log(hosts);
+
         loading = false;
     })
 </script>
@@ -74,5 +85,32 @@
 <LoadingWrapper isLoading={currentlyLoading} isError={isError} error={error}>
     <AdminLayout selected="hosts">
         <h3>{$t("common.page.hosts")}</h3>
+
+        <table class="table table-dark table-hover">
+            <thead>
+                <tr>
+                    <th scope="col">{$t("hosts.name")}</th>
+                    <th scope="col">{$t("hosts.lastseen")}</th>
+                    <th scope="col">{$t("hosts.ipaddr")}</th>
+                    <th scope="col">{$t("hosts.role")}</th>
+                    <th scope="col">{$t("hosts.actions")}</th>
+                </tr>
+            </thead>
+            <tbody>
+            {#each hosts as host}
+                {#if !(host.isLighthouse || host.isRelay)}
+                    <tr>
+                        <td>{host.name}</td>
+                        <td>{host.metadata?.lastSeenAt}</td>
+                        <td>{host.ipAddress}</td>
+                        <td>{host.roleID}</td>
+                        <td>
+
+                        </td>
+                    </tr>
+                {/if}
+            {/each}
+            </tbody>
+        </table>
     </AdminLayout>
 </LoadingWrapper>