danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Guest drawer fallback content for agentless guests (refs #563)

Browse source
This commit is contained in:
rcourtman 2025-10-16 12:39:23 +00:00
parent e367cd384e
commit 551a5d23ed
1 changed files with 133 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
frontend-modern/src/components/Dashboard/GuestRow.tsx
View file

@ -52,7 +52,7 @@ export function GuestRow(props: GuestRowProps) {
const [drawerOpen, setDrawerOpen] = createSignal(drawerState.get(initialGuestId) ?? false); const [drawerOpen, setDrawerOpen] = createSignal(drawerState.get(initialGuestId) ?? false);
const guestId = createMemo(() => buildGuestId(props.guest)); const guestId = createMemo(() => buildGuestId(props.guest));
const hasMultipleDisks = createMemo(() => (props.guest.disks?.length ?? 0) > 1); const hasFilesystemDetails = createMemo(() => (props.guest.disks?.length ?? 0) > 0);
const ipAddresses = createMemo(() => props.guest.ipAddresses ?? []); const ipAddresses = createMemo(() => props.guest.ipAddresses ?? []);
const networkInterfaces = createMemo(() => props.guest.networkInterfaces ?? []); const networkInterfaces = createMemo(() => props.guest.networkInterfaces ?? []);
const hasNetworkInterfaces = createMemo(() => networkInterfaces().length > 0); const hasNetworkInterfaces = createMemo(() => networkInterfaces().length > 0);
@ -95,16 +95,19 @@ export function GuestRow(props: GuestRowProps) {
} }
return lines.length > 0 ? lines : undefined; return lines.length > 0 ? lines : undefined;
}); });
const memoryTooltip = createMemo(() => const memoryTooltip = createMemo(() => memoryExtraLines()?.join('\n') ?? undefined);
memoryExtraLines()?.join('\n') ?? undefined, const hasDrawerContent = createMemo(
); () =>
const canShowDrawer = createMemo(() =>
hasOsInfo() || hasOsInfo() ||
ipAddresses().length > 0 || ipAddresses().length > 0 ||
(memoryExtraLines() && memoryExtraLines()!.length > 0) || (memoryExtraLines()?.length ?? 0) > 0 ||
hasMultipleDisks() || hasFilesystemDetails() ||
hasNetworkInterfaces(), hasNetworkInterfaces(),
); );
const hasFallbackContent = createMemo(
() => !hasDrawerContent() && (props.guest.type === 'qemu' || props.guest.type === 'lxc'),
);
const canShowDrawer = createMemo(() => hasDrawerContent() || hasFallbackContent());
createEffect(on(guestId, (id) => { createEffect(on(guestId, (id) => {
const stored = drawerState.get(id); const stored = drawerState.get(id);
@ -408,6 +411,34 @@ export function GuestRow(props: GuestRowProps) {
drawerDisabled() ? 'opacity-50 saturate-75 pointer-events-none' : '' drawerDisabled() ? 'opacity-50 saturate-75 pointer-events-none' : ''
}`} }`}
> >
<Show
when={hasDrawerContent()}
fallback={
<div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium text-gray-700 dark:text-gray-200">
Guest details unavailable
</div>
<div class="mt-1 space-y-1 text-gray-600 dark:text-gray-300">
<Show
when={isVM(props.guest)}
fallback={
<p>
Start this container and ensure the Pulse user has sufficient Proxmox
permissions to collect guest metrics.
</p>
}
>
<p>{getDiskStatusTooltip()}</p>
<p>
Install and run the qemu-guest-agent inside this VM so Pulse can surface
OS, network, and filesystem details.
</p>
</Show>
</div>
</div>
}
>
<>
<Show when={hasOsInfo() || ipAddresses().length > 0}> <Show when={hasOsInfo() || ipAddresses().length > 0}>
<div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30"> <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium text-gray-700 dark:text-gray-200">Guest Overview</div> <div class="text-[11px] font-medium text-gray-700 dark:text-gray-200">Guest Overview</div>
@ -449,7 +480,7 @@ export function GuestRow(props: GuestRowProps) {
</div> </div>
</Show> </Show>
<Show when={hasMultipleDisks() && props.guest.disks && props.guest.disks.length > 0}> <Show when={hasFilesystemDetails() && props.guest.disks && props.guest.disks.length > 0}>
<div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30"> <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="text-[11px] font-medium text-gray-700 dark:text-gray-200">Filesystems</div> <div class="text-[11px] font-medium text-gray-700 dark:text-gray-200">Filesystems</div>
<div class="mt-1 text-gray-600 dark:text-gray-300"> <div class="mt-1 text-gray-600 dark:text-gray-300">
@ -504,6 +535,8 @@ export function GuestRow(props: GuestRowProps) {
</div> </div>
</div> </div>
</Show> </Show>
</>
</Show>
</div> </div>
</td> </td>
</tr> </tr>