forked from clan/clan-core
UI: display known network hosts
This commit is contained in:
parent
70954acf3d
commit
56b2347a30
@ -2,6 +2,7 @@ import { Accessor, For, Match, Switch } from "solid-js";
|
|||||||
import { MachineListView } from "./routes/machines/view";
|
import { MachineListView } from "./routes/machines/view";
|
||||||
import { colors } from "./routes/colors/view";
|
import { colors } from "./routes/colors/view";
|
||||||
import { clan } from "./routes/clan/view";
|
import { clan } from "./routes/clan/view";
|
||||||
|
import { HostList } from "./routes/hosts/view";
|
||||||
|
|
||||||
export type Route = keyof typeof routes;
|
export type Route = keyof typeof routes;
|
||||||
|
|
||||||
@ -16,6 +17,11 @@ export const routes = {
|
|||||||
label: "Machines",
|
label: "Machines",
|
||||||
icon: "devices_other",
|
icon: "devices_other",
|
||||||
},
|
},
|
||||||
|
hosts: {
|
||||||
|
child: HostList,
|
||||||
|
label: "hosts",
|
||||||
|
icon: "devices_other",
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
child: colors,
|
child: colors,
|
||||||
label: "Colors",
|
label: "Colors",
|
||||||
|
98
pkgs/webview-ui/app/src/routes/hosts/view.tsx
Normal file
98
pkgs/webview-ui/app/src/routes/hosts/view.tsx
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
import {
|
||||||
|
For,
|
||||||
|
Match,
|
||||||
|
Show,
|
||||||
|
Switch,
|
||||||
|
createEffect,
|
||||||
|
createSignal,
|
||||||
|
type Component,
|
||||||
|
} from "solid-js";
|
||||||
|
import { useMachineContext } from "../../Config";
|
||||||
|
import { route } from "@/src/App";
|
||||||
|
import { OperationResponse, pyApi } from "@/src/api";
|
||||||
|
import toast from "solid-toast";
|
||||||
|
|
||||||
|
type ServiceModel = Extract<
|
||||||
|
OperationResponse<"show_mdns">,
|
||||||
|
{ status: "success" }
|
||||||
|
>["data"]["services"];
|
||||||
|
|
||||||
|
export const HostList: Component = () => {
|
||||||
|
const [services, setServices] = createSignal<ServiceModel>();
|
||||||
|
|
||||||
|
pyApi.show_mdns.receive((r) => {
|
||||||
|
const { status } = r;
|
||||||
|
if (status === "error") return console.error(r.errors);
|
||||||
|
setServices(r.data.services);
|
||||||
|
});
|
||||||
|
|
||||||
|
createEffect(() => {
|
||||||
|
if (route() === "hosts") pyApi.show_mdns.dispatch({});
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div class="tooltip" data-tip="Refresh install targets">
|
||||||
|
<button
|
||||||
|
class="btn btn-ghost"
|
||||||
|
onClick={() => pyApi.show_mdns.dispatch({})}
|
||||||
|
>
|
||||||
|
<span class="material-icons ">refresh</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2 flex-wrap">
|
||||||
|
<Show when={services()}>
|
||||||
|
{(services) => (
|
||||||
|
<For each={Object.values(services())}>
|
||||||
|
{(service) => (
|
||||||
|
<div class="rounded-lg bg-white p-5 shadow-lg w-[30rem]">
|
||||||
|
<div class="stats shadow flex flex-col">
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-title">Host</div>
|
||||||
|
<div class="stat-value">{service.host}</div>
|
||||||
|
<div class="stat-desc"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat">
|
||||||
|
<div class="stat-title">IP</div>
|
||||||
|
<div class="stat-value">{service.ip}</div>
|
||||||
|
<div class="stat-desc"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="join join-vertical w-full px-0">
|
||||||
|
<div class="collapse collapse-arrow join-item">
|
||||||
|
<input type="radio" name="my-accordion-4" />
|
||||||
|
<div class="collapse-title text-xl font-medium">
|
||||||
|
Details
|
||||||
|
</div>
|
||||||
|
<div class="collapse-content">
|
||||||
|
<p>
|
||||||
|
<span class="font-bold">Interface</span>
|
||||||
|
{service.interface}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="font-bold">Protocol</span>
|
||||||
|
{service.protocol}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<span class="font-bold">Type</span>
|
||||||
|
{service.type_}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="font-bold">Domain</span>
|
||||||
|
{service.domain}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
)}
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user