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

135 lines
5.1 KiB
Svelte

<script lang="ts">
import {isLoading, t} from "svelte-i18n";
import LoadingWrapper from "$components/LoadingWrapper.svelte";
import {onMount} from "svelte";
import {APIResult, isAuthedMFA, isAuthedSession} from "$lib/auth.ts";
import {Logger, logSetup} from "$lib/logger";
import type {APIError} from "$lib/auth.ts";
import {PUBLIC_BASE_URL} from "$env/static/public";
import {Configuration, HostsApi, NetworksApi, RolesApi} from "$lib/api";
import type {Host} from "$lib/api/models/Host.ts";
import type {Role} from "$lib/api/models/Role.ts";
import AdminLayout from "$components/AdminLayout.svelte";
let loading = true;
let isError = false;
let error = '';
$: currentlyLoading = $isLoading || loading;
let hosts: Host[] = [];
let roles: Role[] = [];
logSetup();
let logger = new Logger("hosts/+page.svelte");
onMount(async () => {
let session_load_info = await isAuthedSession();
if (session_load_info[0] == APIResult.Failed) {
let err = session_load_info[1] as APIError;
logger.error(`session load failed: ${err.code} ${err.message}`);
window.location.href = '/login';
return;
}
let mfa_load_info = await isAuthedMFA();
if (mfa_load_info[0] == APIResult.Failed) {
let err = mfa_load_info[1] as APIError;
logger.error(`mfa load failed: ${err.code} ${err.message}`);
window.location.href = '/2fa';
return;
}
// pull networks
const configuration = new Configuration({
basePath: PUBLIC_BASE_URL,
accessToken: window.localStorage.getItem("session") + " " + window.localStorage.getItem("mfa")
});
const networksApi = new NetworksApi(configuration);
let networks;
try {
networks = await networksApi.networksList();
} catch (e) {
let resp_json = await e.response.json();
if (resp_json.errors[0].code == "ERR_NO_ORG") {
window.location.href = "/networkcreate";
return;
} else {
isError = true;
error = $t("networkcreate.error.generic", {values:{err:resp_json.errors[0].code}});
loading = false;
return;
}
}
console.log(networks);
if (networks.data?.length == 0) {
window.location.href = '/networkcreate';
return;
}
const hostsApi = new HostsApi(configuration);
hosts = (await hostsApi.hostsList({
filterIsLighthouse: false,
filterIsRelay: false
})).data!;
console.log(hosts);
const rolesApi = new RolesApi(configuration);
roles = (await rolesApi.rolesList()).data!;
loading = false;
});
function getRoleName(byId: string): string {
for (let i = 0; i < roles.length; i++) {
if (roles[i].id == byId) {
return roles[i].name!;
}
}
return "Unknown";
}
</script>
<svelte:head>
<title>{$t("common.title", {values: {title: $t("common.page.hosts")}})}</title>
</svelte:head>
<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><a href="/roles/{host.roleID}/edit">{getRoleName(host.roleID)}</a></td>
<td>
<div class="btn-group">
<a href="/hosts/{host.id}/enroll" title="{$t('hosts.enroll')}" class="btn btn-success"><i class="fas fa-arrows-rotate fa-fw"></i></a>
<a href="/hosts/{host.id}/edit" title="{$t('hosts.edit')}" class="btn btn-primary"><i class="fas fa-pencil fa-fw"></i></a>
<a href="/hosts/{host.id}/edit/config" title="{$t('hosts.config')}" class="btn btn-info"><i class="fas fa-gear fa-fw"></i></a>
<a href="/hosts/{host.id}/delete" title="{$t('hosts.delete')}" class="btn btn-danger"><i class="fas fa-trash fa-fw"></i></a>
</div>
</td>
</tr>
{/if}
{/each}
</tbody>
</table>
</AdminLayout>
</LoadingWrapper>