51 lines
1.7 KiB
Svelte
51 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw';
|
|
import { page as pageState } from '$app/state';
|
|
import PageMeta from '$lib/components/seo/page-meta.svelte';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import * as Card from '$lib/components/ui/card';
|
|
import { m } from '$lib/paraglide/messages';
|
|
import { getDns } from '$lib/remotes/networking.remote';
|
|
|
|
const machineId = $derived(pageState.params.machineId!);
|
|
const dns = $derived(getDns(machineId));
|
|
</script>
|
|
|
|
<PageMeta title={m.seo_title_networking_dns()} description={m.seo_desc_networking_dns()} />
|
|
<div class="mx-auto flex w-full max-w-4xl flex-col gap-4 p-4">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="flex flex-col gap-0.5">
|
|
<h1 class="text-2xl font-semibold tracking-tight">{m.nav_networking_dns()}</h1>
|
|
<p class="text-muted-foreground text-sm">{m.networking_dns_description()}</p>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
title={m.dashboard_refresh()}
|
|
onclick={() => dns.refresh()}
|
|
>
|
|
<RefreshCwIcon class="size-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<Card.Root>
|
|
<Card.Header>
|
|
<Card.Title>{m.networking_dns_servers()}</Card.Title>
|
|
<Card.Description>{m.networking_dns_per_interface_hint()}</Card.Description>
|
|
</Card.Header>
|
|
<Card.Content>
|
|
{#if dns.loading && !dns.current}
|
|
<div class="text-muted-foreground py-2 text-sm">…</div>
|
|
{:else if !dns.current?.length}
|
|
<div class="text-muted-foreground py-2 text-sm">{m.networking_no_dns()}</div>
|
|
{:else}
|
|
<ul class="flex flex-col gap-1 font-mono text-sm">
|
|
{#each dns.current as s, i (s + i)}
|
|
<li class="bg-muted/40 rounded px-3 py-1.5">{s}</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</Card.Content>
|
|
</Card.Root>
|
|
</div>
|