refactor(ui): standardize URL editing with shared UrlEditPopover component
- Create reusable UrlEditPopover component with fixed positioning - Add createUrlEditState hook for managing editing state - Update DockerHostSummaryTable to use new popover - Update DockerUnifiedTable (containers & services) to use new popover - Update GuestRow (Proxmox VMs/containers) to use new popover - Update HostsOverview (Proxmox hosts) to use new popover - Add Docker host metadata API for custom URLs - Consistent styling with save, delete, cancel buttons and keyboard shortcuts
This commit is contained in:
rcourtman
parent
337987cb56
commit
bd1f4682be
9 changed files with 1635 additions and 1118 deletions
40
frontend-modern/src/api/dockerHostMetadata.ts
Normal file
40
frontend-modern/src/api/dockerHostMetadata.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// Docker Host Metadata API - for managing custom URLs on Docker hosts
|
||||
import { apiFetchJSON } from '@/utils/apiClient';
|
||||
|
||||
export interface DockerHostMetadata {
|
||||
customDisplayName?: string;
|
||||
customUrl?: string;
|
||||
notes?: string[];
|
||||
}
|
||||
|
||||
export class DockerHostMetadataAPI {
|
||||
private static baseUrl = '/api/docker/hosts/metadata';
|
||||
|
||||
// Get metadata for a specific Docker host
|
||||
static async getMetadata(hostId: string): Promise<DockerHostMetadata> {
|
||||
return apiFetchJSON(`${this.baseUrl}/${encodeURIComponent(hostId)}`);
|
||||
}
|
||||
|
||||
// Get all Docker host metadata
|
||||
static async getAllMetadata(): Promise<Record<string, DockerHostMetadata>> {
|
||||
return apiFetchJSON(this.baseUrl);
|
||||
}
|
||||
|
||||
// Update metadata for a Docker host
|
||||
static async updateMetadata(
|
||||
hostId: string,
|
||||
metadata: Partial<DockerHostMetadata>,
|
||||
): Promise<DockerHostMetadata> {
|
||||
return apiFetchJSON(`${this.baseUrl}/${encodeURIComponent(hostId)}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(metadata),
|
||||
});
|
||||
}
|
||||
|
||||
// Delete metadata for a Docker host
|
||||
static async deleteMetadata(hostId: string): Promise<void> {
|
||||
await apiFetchJSON(`${this.baseUrl}/${encodeURIComponent(hostId)}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ import { StackedMemoryBar } from './StackedMemoryBar';
|
|||
import { StatusDot } from '@/components/shared/StatusDot';
|
||||
import { getGuestPowerIndicator, isGuestRunning } from '@/utils/status';
|
||||
import { GuestMetadataAPI } from '@/api/guestMetadata';
|
||||
import { UrlEditPopover, createUrlEditState } from '@/components/shared/UrlEditPopover';
|
||||
import { showSuccess, showError } from '@/utils/toast';
|
||||
import { logger } from '@/utils/logger';
|
||||
import { buildMetricKey } from '@/utils/metricsKeys';
|
||||
|
|
@ -516,28 +517,17 @@ export function GuestRow(props: GuestRowProps) {
|
|||
|
||||
const [customUrl, setCustomUrl] = createSignal<string | undefined>(props.customUrl);
|
||||
const [shouldAnimateIcon, setShouldAnimateIcon] = createSignal(false);
|
||||
const [isEditingUrl, setIsEditingUrl] = createSignal(false);
|
||||
const [editingUrlValue, setEditingUrlValue] = createSignal('');
|
||||
const [isSavingUrl, setIsSavingUrl] = createSignal(false);
|
||||
let urlInputRef: HTMLInputElement | undefined;
|
||||
|
||||
// Focus input when editing starts
|
||||
createEffect(() => {
|
||||
if (isEditingUrl() && urlInputRef) {
|
||||
urlInputRef.focus();
|
||||
urlInputRef.select();
|
||||
}
|
||||
});
|
||||
// URL editing using shared hook
|
||||
const urlEdit = createUrlEditState();
|
||||
|
||||
const startEditingUrl = (event: MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
setEditingUrlValue(customUrl() || '');
|
||||
setIsEditingUrl(true);
|
||||
const handleStartEditingUrl = (event: MouseEvent) => {
|
||||
urlEdit.startEditing(guestId(), customUrl() || '', event);
|
||||
};
|
||||
|
||||
const saveUrl = async () => {
|
||||
const newUrl = editingUrlValue().trim();
|
||||
setIsSavingUrl(true);
|
||||
const handleSaveUrl = async () => {
|
||||
const newUrl = urlEdit.editingValue().trim();
|
||||
urlEdit.setIsSaving(true);
|
||||
|
||||
try {
|
||||
await GuestMetadataAPI.updateMetadata(guestId(), { customUrl: newUrl });
|
||||
|
|
@ -549,7 +539,6 @@ export function GuestRow(props: GuestRowProps) {
|
|||
}
|
||||
|
||||
setCustomUrl(newUrl || undefined);
|
||||
setIsEditingUrl(false);
|
||||
|
||||
if (props.onCustomUrlUpdate) {
|
||||
props.onCustomUrlUpdate(guestId(), newUrl);
|
||||
|
|
@ -560,18 +549,36 @@ export function GuestRow(props: GuestRowProps) {
|
|||
} else {
|
||||
showSuccess('Guest URL cleared');
|
||||
}
|
||||
|
||||
urlEdit.finishEditing();
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to save guest URL';
|
||||
logger.error('Failed to save guest URL:', err);
|
||||
showError(message);
|
||||
} finally {
|
||||
setIsSavingUrl(false);
|
||||
urlEdit.setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const cancelEditingUrl = () => {
|
||||
setIsEditingUrl(false);
|
||||
setEditingUrlValue('');
|
||||
const handleDeleteUrl = async () => {
|
||||
urlEdit.setIsSaving(true);
|
||||
|
||||
try {
|
||||
await GuestMetadataAPI.updateMetadata(guestId(), { customUrl: '' });
|
||||
|
||||
setCustomUrl(undefined);
|
||||
|
||||
if (props.onCustomUrlUpdate) {
|
||||
props.onCustomUrlUpdate(guestId(), '');
|
||||
}
|
||||
|
||||
showSuccess('Guest URL removed');
|
||||
urlEdit.finishEditing();
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to remove guest URL';
|
||||
logger.error('Failed to remove guest URL:', err);
|
||||
showError(message);
|
||||
urlEdit.setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const ipAddresses = createMemo(() => props.guest.ipAddresses ?? []);
|
||||
|
|
@ -776,423 +783,388 @@ export function GuestRow(props: GuestRowProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<tr
|
||||
class={rowClass()}
|
||||
style={rowStyle()}
|
||||
onClick={handleRowClick}
|
||||
data-guest-id={guestId()}
|
||||
>
|
||||
{/* Name - always visible */}
|
||||
<td class={`pr-2 py-1 align-middle whitespace-nowrap ${props.isGroupedView ? GROUPED_FIRST_CELL_INDENT : DEFAULT_FIRST_CELL_INDENT}`}>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<StatusDot
|
||||
variant={guestStatus().variant}
|
||||
title={guestStatus().label}
|
||||
ariaLabel={guestStatus().label}
|
||||
size="xs"
|
||||
/>
|
||||
<Show
|
||||
when={isEditingUrl()}
|
||||
fallback={
|
||||
<div class="flex items-center gap-1.5 min-w-0 group/name">
|
||||
<span
|
||||
class="text-xs font-medium text-gray-900 dark:text-gray-100 select-none whitespace-nowrap"
|
||||
title={props.guest.name}
|
||||
<>
|
||||
<tr
|
||||
class={rowClass()}
|
||||
style={rowStyle()}
|
||||
onClick={handleRowClick}
|
||||
data-guest-id={guestId()}
|
||||
>
|
||||
{/* Name - always visible */}
|
||||
<td class={`pr-2 py-1 align-middle whitespace-nowrap ${props.isGroupedView ? GROUPED_FIRST_CELL_INDENT : DEFAULT_FIRST_CELL_INDENT}`}>
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<StatusDot
|
||||
variant={guestStatus().variant}
|
||||
title={guestStatus().label}
|
||||
ariaLabel={guestStatus().label}
|
||||
size="xs"
|
||||
/>
|
||||
<div class="flex items-center gap-1.5 min-w-0 group/name">
|
||||
<span
|
||||
class="text-xs font-medium text-gray-900 dark:text-gray-100 select-none whitespace-nowrap"
|
||||
title={props.guest.name}
|
||||
>
|
||||
{props.guest.name}
|
||||
</span>
|
||||
<Show when={customUrl() && customUrl() !== ''}>
|
||||
<a
|
||||
href={customUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class={`flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors ${shouldAnimateIcon() ? 'animate-fadeIn' : ''}`}
|
||||
title={`Open ${customUrl()}`}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
{props.guest.name}
|
||||
</span>
|
||||
<Show when={customUrl() && customUrl() !== ''}>
|
||||
<a
|
||||
href={customUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class={`flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors ${shouldAnimateIcon() ? 'animate-fadeIn' : ''}`}
|
||||
title={`Open ${customUrl()}`}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</Show>
|
||||
{/* Edit URL button - shows on hover */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={startEditingUrl}
|
||||
class="flex-shrink-0 opacity-0 group-hover/name:opacity-100 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-all"
|
||||
title={customUrl() ? 'Edit URL' : 'Add URL'}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/* Show backup indicator in name cell only if backup column is hidden */}
|
||||
<Show when={!isColVisible('backup')}>
|
||||
<BackupIndicator lastBackup={props.guest.lastBackup} isTemplate={props.guest.template} />
|
||||
</Show>
|
||||
{/* AI context indicator - shows when row is selected for AI */}
|
||||
<Show when={isInAIContext()}>
|
||||
<span class="flex-shrink-0 text-purple-500 dark:text-purple-400" title="Selected for AI context">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
||||
</svg>
|
||||
</span>
|
||||
</Show>
|
||||
</a>
|
||||
</Show>
|
||||
{/* Edit URL button - shows on hover */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleStartEditingUrl}
|
||||
class="flex-shrink-0 opacity-0 group-hover/name:opacity-100 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-all"
|
||||
title={customUrl() ? 'Edit URL' : 'Add URL'}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* Show backup indicator in name cell only if backup column is hidden */}
|
||||
<Show when={!isColVisible('backup')}>
|
||||
<BackupIndicator lastBackup={props.guest.lastBackup} isTemplate={props.guest.template} />
|
||||
</Show>
|
||||
{/* AI context indicator - shows when row is selected for AI */}
|
||||
<Show when={isInAIContext()}>
|
||||
<span class="flex-shrink-0 text-purple-500 dark:text-purple-400" title="Selected for AI context">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
||||
</svg>
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<Show when={lockLabel()}>
|
||||
<span
|
||||
class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide whitespace-nowrap"
|
||||
title={`Guest is locked (${lockLabel()})`}
|
||||
>
|
||||
Lock: {lockLabel()}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Type */}
|
||||
<Show when={isColVisible('type')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<span
|
||||
class={`inline-block px-1 py-0.5 text-[10px] font-medium rounded whitespace-nowrap ${props.guest.type === 'qemu'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
|
||||
: isOCIContainer()
|
||||
? 'bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300'
|
||||
: 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300'
|
||||
}`}
|
||||
title={
|
||||
isVM(props.guest)
|
||||
? 'Virtual Machine'
|
||||
: isOCIContainer()
|
||||
? `OCI Container${ociImage() ? ` • ${ociImage()}` : ''}`
|
||||
: 'LXC Container'
|
||||
}
|
||||
>
|
||||
{isVM(props.guest) ? 'VM' : isOCIContainer() ? 'OCI' : 'LXC'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* VMID */}
|
||||
<Show when={isColVisible('vmid')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">
|
||||
{props.guest.vmid}
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* CPU */}
|
||||
<Show when={isColVisible('cpu')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
|
||||
<Show when={isMobile()}>
|
||||
<div class="md:hidden h-4 flex items-center justify-center">
|
||||
<MetricText value={cpuPercent()} type="cpu" />
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block h-4">
|
||||
<EnhancedCPUBar
|
||||
usage={cpuPercent()}
|
||||
cores={props.guest.cpus}
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Memory */}
|
||||
<Show when={isColVisible('memory')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
|
||||
<div title={memoryTooltip() ?? undefined}>
|
||||
<Show when={isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<ResponsiveMetricCell
|
||||
value={memPercent()}
|
||||
type="memory"
|
||||
resourceId={metricsKey()}
|
||||
sublabel={memoryUsageLabel()}
|
||||
isRunning={isRunning()}
|
||||
showMobile={true}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block">
|
||||
<Show
|
||||
when={viewMode() === 'sparklines'}
|
||||
fallback={
|
||||
<StackedMemoryBar
|
||||
used={props.guest.memory?.used || 0}
|
||||
total={props.guest.memory?.total || 0}
|
||||
balloon={props.guest.memory?.balloon || 0}
|
||||
swapUsed={props.guest.memory?.swapUsed || 0}
|
||||
swapTotal={props.guest.memory?.swapTotal || 0}
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ResponsiveMetricCell
|
||||
value={memPercent()}
|
||||
type="memory"
|
||||
resourceId={metricsKey()}
|
||||
sublabel={memoryUsageLabel()}
|
||||
isRunning={isRunning()}
|
||||
showMobile={false}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Disk */}
|
||||
<Show when={isColVisible('disk')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
|
||||
<Show
|
||||
when={hasDiskUsage()}
|
||||
fallback={
|
||||
<div class="flex justify-center">
|
||||
<span class="text-xs text-gray-400" title={getDiskStatusTooltip()}>
|
||||
-
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* URL editing mode */}
|
||||
<div class="flex items-center gap-1 min-w-0" data-url-editor>
|
||||
<input
|
||||
ref={urlInputRef}
|
||||
type="text"
|
||||
value={editingUrlValue()}
|
||||
onInput={(e) => setEditingUrlValue(e.currentTarget.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
saveUrl();
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
cancelEditingUrl();
|
||||
}
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
placeholder="https://192.168.1.100:8080"
|
||||
class="w-40 px-2 py-0.5 text-xs border border-blue-500 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
disabled={isSavingUrl()}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
saveUrl();
|
||||
}}
|
||||
disabled={isSavingUrl()}
|
||||
class="flex-shrink-0 w-5 h-5 flex items-center justify-center text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
title="Save (Enter)"
|
||||
>
|
||||
✓
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
cancelEditingUrl();
|
||||
}}
|
||||
disabled={isSavingUrl()}
|
||||
class="flex-shrink-0 w-5 h-5 flex items-center justify-center text-xs bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors disabled:opacity-50"
|
||||
title="Cancel (Esc)"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<Show when={lockLabel()}>
|
||||
<span
|
||||
class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide whitespace-nowrap"
|
||||
title={`Guest is locked (${lockLabel()})`}
|
||||
>
|
||||
Lock: {lockLabel()}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Type */}
|
||||
<Show when={isColVisible('type')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<span
|
||||
class={`inline-block px-1 py-0.5 text-[10px] font-medium rounded whitespace-nowrap ${props.guest.type === 'qemu'
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
|
||||
: isOCIContainer()
|
||||
? 'bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300'
|
||||
: 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300'
|
||||
}`}
|
||||
title={
|
||||
isVM(props.guest)
|
||||
? 'Virtual Machine'
|
||||
: isOCIContainer()
|
||||
? `OCI Container${ociImage() ? ` • ${ociImage()}` : ''}`
|
||||
: 'LXC Container'
|
||||
}
|
||||
>
|
||||
{isVM(props.guest) ? 'VM' : isOCIContainer() ? 'OCI' : 'LXC'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* VMID */}
|
||||
<Show when={isColVisible('vmid')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">
|
||||
{props.guest.vmid}
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* CPU */}
|
||||
<Show when={isColVisible('cpu')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
|
||||
<Show when={isMobile()}>
|
||||
<div class="md:hidden h-4 flex items-center justify-center">
|
||||
<MetricText value={cpuPercent()} type="cpu" />
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block h-4">
|
||||
<EnhancedCPUBar
|
||||
usage={cpuPercent()}
|
||||
cores={props.guest.cpus}
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Memory */}
|
||||
<Show when={isColVisible('memory')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
|
||||
<div title={memoryTooltip() ?? undefined}>
|
||||
<Show when={isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<ResponsiveMetricCell
|
||||
value={memPercent()}
|
||||
type="memory"
|
||||
resourceId={metricsKey()}
|
||||
sublabel={memoryUsageLabel()}
|
||||
isRunning={isRunning()}
|
||||
showMobile={true}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block">
|
||||
<Show
|
||||
when={viewMode() === 'sparklines'}
|
||||
fallback={
|
||||
<StackedMemoryBar
|
||||
used={props.guest.memory?.used || 0}
|
||||
total={props.guest.memory?.total || 0}
|
||||
balloon={props.guest.memory?.balloon || 0}
|
||||
swapUsed={props.guest.memory?.swapUsed || 0}
|
||||
swapTotal={props.guest.memory?.swapTotal || 0}
|
||||
resourceId={metricsKey()}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ResponsiveMetricCell
|
||||
value={memPercent()}
|
||||
type="memory"
|
||||
resourceId={metricsKey()}
|
||||
sublabel={memoryUsageLabel()}
|
||||
isRunning={isRunning()}
|
||||
showMobile={false}
|
||||
/>
|
||||
<Show when={isMobile()}>
|
||||
<div class="md:hidden flex justify-center text-xs text-gray-600 dark:text-gray-400">
|
||||
{formatPercent(diskPercent())}
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Disk */}
|
||||
<Show when={isColVisible('disk')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
|
||||
<Show
|
||||
when={hasDiskUsage()}
|
||||
fallback={
|
||||
<div class="flex justify-center">
|
||||
<span class="text-xs text-gray-400" title={getDiskStatusTooltip()}>
|
||||
-
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Show when={isMobile()}>
|
||||
<div class="md:hidden flex justify-center text-xs text-gray-600 dark:text-gray-400">
|
||||
{formatPercent(diskPercent())}
|
||||
</div>
|
||||
</Show>
|
||||
<div class={isMobile() ? 'hidden md:block' : ''}>
|
||||
<Show
|
||||
when={viewMode() === 'sparklines'}
|
||||
fallback={
|
||||
<StackedDiskBar
|
||||
disks={props.guest.disks}
|
||||
aggregateDisk={props.guest.disk}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<ResponsiveMetricCell
|
||||
value={diskPercent()}
|
||||
type="disk"
|
||||
resourceId={metricsKey()}
|
||||
isRunning={isRunning()}
|
||||
showMobile={false}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* IP Address with Network Tooltip */}
|
||||
<Show when={isColVisible('ip')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={ipAddresses().length > 0 || hasNetworkInterfaces()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<NetworkInfoCell
|
||||
ipAddresses={ipAddresses()}
|
||||
networkInterfaces={networkInterfaces()}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Uptime */}
|
||||
<Show when={isColVisible('uptime')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<span class={`text-xs whitespace-nowrap ${props.guest.uptime < 3600 ? 'text-orange-500' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
<Show when={isRunning()} fallback="-">
|
||||
<Show when={isMobile()} fallback={formatUptime(props.guest.uptime)}>
|
||||
{formatUptime(props.guest.uptime, true)}
|
||||
</Show>
|
||||
</Show>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Node - NEW */}
|
||||
<Show when={isColVisible('node')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 truncate max-w-[80px]" title={props.guest.node}>
|
||||
{props.guest.node}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Backup Status */}
|
||||
<Show when={isColVisible('backup')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={!props.guest.template}>
|
||||
<BackupStatusCell lastBackup={props.guest.lastBackup} />
|
||||
</Show>
|
||||
<Show when={props.guest.template}>
|
||||
<span class="text-xs text-gray-400">-</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Tags */}
|
||||
<Show when={isColVisible('tags')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center" onClick={(event) => event.stopPropagation()}>
|
||||
<TagBadges
|
||||
tags={Array.isArray(props.guest.tags) ? props.guest.tags : []}
|
||||
maxVisible={0}
|
||||
onTagClick={props.onTagClick}
|
||||
activeSearch={props.activeSearch}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* OS */}
|
||||
<Show when={isColVisible('os')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show
|
||||
when={hasOsInfo()}
|
||||
fallback={
|
||||
<div class={isMobile() ? 'hidden md:block' : ''}>
|
||||
<Show
|
||||
when={ociImage()}
|
||||
fallback={<span class="text-xs text-gray-400">-</span>}
|
||||
when={viewMode() === 'sparklines'}
|
||||
fallback={
|
||||
<StackedDiskBar
|
||||
disks={props.guest.disks}
|
||||
aggregateDisk={props.guest.disk}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{/* For OCI containers without guest agent, show image name in OS column */}
|
||||
<span
|
||||
class="text-xs text-purple-600 dark:text-purple-400 truncate max-w-[100px]"
|
||||
title={`OCI Image: ${ociImage()}`}
|
||||
>
|
||||
{ociImage()}
|
||||
</span>
|
||||
<ResponsiveMetricCell
|
||||
value={diskPercent()}
|
||||
type="disk"
|
||||
resourceId={metricsKey()}
|
||||
isRunning={isRunning()}
|
||||
showMobile={false}
|
||||
/>
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<OSInfoCell
|
||||
osName={osName()}
|
||||
osVersion={osVersion()}
|
||||
agentVersion={agentVersion()}
|
||||
</div>
|
||||
</Show>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* IP Address with Network Tooltip */}
|
||||
<Show when={isColVisible('ip')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={ipAddresses().length > 0 || hasNetworkInterfaces()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<NetworkInfoCell
|
||||
ipAddresses={ipAddresses()}
|
||||
networkInterfaces={networkInterfaces()}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Uptime */}
|
||||
<Show when={isColVisible('uptime')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<span class={`text-xs whitespace-nowrap ${props.guest.uptime < 3600 ? 'text-orange-500' : 'text-gray-600 dark:text-gray-400'}`}>
|
||||
<Show when={isRunning()} fallback="-">
|
||||
<Show when={isMobile()} fallback={formatUptime(props.guest.uptime)}>
|
||||
{formatUptime(props.guest.uptime, true)}
|
||||
</Show>
|
||||
</Show>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Node - NEW */}
|
||||
<Show when={isColVisible('node')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 truncate max-w-[80px]" title={props.guest.node}>
|
||||
{props.guest.node}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Backup Status */}
|
||||
<Show when={isColVisible('backup')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={!props.guest.template}>
|
||||
<BackupStatusCell lastBackup={props.guest.lastBackup} />
|
||||
</Show>
|
||||
<Show when={props.guest.template}>
|
||||
<span class="text-xs text-gray-400">-</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Tags */}
|
||||
<Show when={isColVisible('tags')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center" onClick={(event) => event.stopPropagation()}>
|
||||
<TagBadges
|
||||
tags={Array.isArray(props.guest.tags) ? props.guest.tags : []}
|
||||
maxVisible={0}
|
||||
onTagClick={props.onTagClick}
|
||||
activeSearch={props.activeSearch}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Disk Read */}
|
||||
<Show when={isColVisible('diskRead')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center whitespace-nowrap">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<span class={`text-xs ${getIOColorClass(diskRead())}`}>{formatSpeed(diskRead())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
{/* OS */}
|
||||
<Show when={isColVisible('os')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show
|
||||
when={hasOsInfo()}
|
||||
fallback={
|
||||
<Show
|
||||
when={ociImage()}
|
||||
fallback={<span class="text-xs text-gray-400">-</span>}
|
||||
>
|
||||
{/* For OCI containers without guest agent, show image name in OS column */}
|
||||
<span
|
||||
class="text-xs text-purple-600 dark:text-purple-400 truncate max-w-[100px]"
|
||||
title={`OCI Image: ${ociImage()}`}
|
||||
>
|
||||
{ociImage()}
|
||||
</span>
|
||||
</Show>
|
||||
}
|
||||
>
|
||||
<OSInfoCell
|
||||
osName={osName()}
|
||||
osVersion={osVersion()}
|
||||
agentVersion={agentVersion()}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Disk Write */}
|
||||
<Show when={isColVisible('diskWrite')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center whitespace-nowrap">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<span class={`text-xs ${getIOColorClass(diskWrite())}`}>{formatSpeed(diskWrite())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
{/* Disk Read */}
|
||||
<Show when={isColVisible('diskRead')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center whitespace-nowrap">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<span class={`text-xs ${getIOColorClass(diskRead())}`}>{formatSpeed(diskRead())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Net In */}
|
||||
<Show when={isColVisible('netIn')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center whitespace-nowrap">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<span class={`text-xs ${getIOColorClass(networkIn())}`}>{formatSpeed(networkIn())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
{/* Disk Write */}
|
||||
<Show when={isColVisible('diskWrite')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center whitespace-nowrap">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<span class={`text-xs ${getIOColorClass(diskWrite())}`}>{formatSpeed(diskWrite())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Net Out */}
|
||||
<Show when={isColVisible('netOut')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center whitespace-nowrap">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<span class={`text-xs ${getIOColorClass(networkOut())}`}>{formatSpeed(networkOut())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
</tr>
|
||||
{/* Net In */}
|
||||
<Show when={isColVisible('netIn')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center whitespace-nowrap">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<span class={`text-xs ${getIOColorClass(networkIn())}`}>{formatSpeed(networkIn())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Net Out */}
|
||||
<Show when={isColVisible('netOut')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center whitespace-nowrap">
|
||||
<Show when={isRunning()} fallback={<span class="text-xs text-gray-400">-</span>}>
|
||||
<span class={`text-xs ${getIOColorClass(networkOut())}`}>{formatSpeed(networkOut())}</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
</tr>
|
||||
|
||||
{/* URL editing popover - using shared component */}
|
||||
<UrlEditPopover
|
||||
isOpen={urlEdit.isEditing() && urlEdit.editingId() === guestId()}
|
||||
value={urlEdit.editingValue()}
|
||||
position={urlEdit.position()}
|
||||
isSaving={urlEdit.isSaving()}
|
||||
hasExistingUrl={!!customUrl()}
|
||||
placeholder="https://192.168.1.100:8080"
|
||||
helpText="Add a URL to quickly access this guest's web interface"
|
||||
onValueChange={urlEdit.setEditingValue}
|
||||
onSave={handleSaveUrl}
|
||||
onCancel={urlEdit.cancelEditing}
|
||||
onDelete={handleDeleteUrl}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@ import { useBreakpoint } from '@/hooks/useBreakpoint';
|
|||
import { ResponsiveMetricCell, MetricText } from '@/components/shared/responsive';
|
||||
import { EnhancedCPUBar } from '@/components/Dashboard/EnhancedCPUBar';
|
||||
import { isAgentOutdated, getAgentVersionTooltip } from '@/utils/agentVersion';
|
||||
import { DockerHostMetadataAPI, type DockerHostMetadata } from '@/api/dockerHostMetadata';
|
||||
import { UrlEditPopover, createUrlEditState } from '@/components/shared/UrlEditPopover';
|
||||
import { showSuccess, showError } from '@/utils/toast';
|
||||
import { logger } from '@/utils/logger';
|
||||
|
||||
export interface DockerHostSummary {
|
||||
host: DockerHost;
|
||||
|
|
@ -35,6 +39,8 @@ interface DockerHostSummaryTableProps {
|
|||
summaries: () => DockerHostSummary[];
|
||||
selectedHostId: () => string | null;
|
||||
onSelect: (hostId: string) => void;
|
||||
dockerHostMetadata?: Record<string, DockerHostMetadata>;
|
||||
onHostCustomUrlUpdate?: (hostId: string, url: string) => void;
|
||||
}
|
||||
|
||||
type SortKey = 'name' | 'uptime' | 'cpu' | 'memory' | 'disk' | 'running' | 'lastSeen' | 'agent';
|
||||
|
|
@ -55,6 +61,9 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
|
|||
const [sortDirection, setSortDirection] = createSignal<SortDirection>('asc');
|
||||
const { isMobile } = useBreakpoint();
|
||||
|
||||
// URL editing state using shared hook
|
||||
const urlEdit = createUrlEditState();
|
||||
|
||||
const handleSort = (key: SortKey) => {
|
||||
if (sortKey() === key) {
|
||||
setSortDirection(sortDirection() === 'asc' ? 'desc' : 'asc');
|
||||
|
|
@ -125,6 +134,68 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
|
|||
return list;
|
||||
});
|
||||
|
||||
// URL editing functions
|
||||
const getHostCustomUrl = (hostId: string) => {
|
||||
return props.dockerHostMetadata?.[hostId]?.customUrl;
|
||||
};
|
||||
|
||||
const handleStartEditingUrl = (hostId: string, event: MouseEvent) => {
|
||||
const currentUrl = getHostCustomUrl(hostId) || '';
|
||||
urlEdit.startEditing(hostId, currentUrl, event);
|
||||
};
|
||||
|
||||
const handleSaveUrl = async () => {
|
||||
const hostId = urlEdit.editingId();
|
||||
if (!hostId) return;
|
||||
|
||||
const newUrl = urlEdit.editingValue().trim();
|
||||
urlEdit.setIsSaving(true);
|
||||
|
||||
try {
|
||||
await DockerHostMetadataAPI.updateMetadata(hostId, { customUrl: newUrl });
|
||||
|
||||
if (props.onHostCustomUrlUpdate) {
|
||||
props.onHostCustomUrlUpdate(hostId, newUrl);
|
||||
}
|
||||
|
||||
if (newUrl) {
|
||||
showSuccess('Host URL saved');
|
||||
} else {
|
||||
showSuccess('Host URL cleared');
|
||||
}
|
||||
|
||||
urlEdit.finishEditing();
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to save host URL';
|
||||
logger.error('Failed to save host URL:', err);
|
||||
showError(message);
|
||||
urlEdit.setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUrl = async () => {
|
||||
const hostId = urlEdit.editingId();
|
||||
if (!hostId) return;
|
||||
|
||||
urlEdit.setIsSaving(true);
|
||||
|
||||
try {
|
||||
await DockerHostMetadataAPI.updateMetadata(hostId, { customUrl: '' });
|
||||
|
||||
if (props.onHostCustomUrlUpdate) {
|
||||
props.onHostCustomUrlUpdate(hostId, '');
|
||||
}
|
||||
|
||||
showSuccess('Host URL removed');
|
||||
urlEdit.finishEditing();
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to remove host URL';
|
||||
logger.error('Failed to remove host URL:', err);
|
||||
showError(message);
|
||||
urlEdit.setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renderSortIndicator = (key: SortKey) => {
|
||||
if (sortKey() !== key) return null;
|
||||
return sortDirection() === 'asc' ? '▲' : '▼';
|
||||
|
|
@ -133,261 +204,308 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
|
|||
// Agent version checking is now done via the shared utility that compares against server version
|
||||
|
||||
return (
|
||||
<Card padding="none" tone="glass" class="mb-4 overflow-hidden">
|
||||
<ScrollableTable persistKey="docker-host-summary">
|
||||
<table class="w-full border-collapse whitespace-nowrap">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
|
||||
<th
|
||||
class="pl-3 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 whitespace-nowrap"
|
||||
onClick={() => handleSort('name')}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={`Sort by host ${sortKey() === 'name' ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : ''}`}
|
||||
>
|
||||
Host {renderSortIndicator('name')}
|
||||
</th>
|
||||
<th class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap">
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('cpu')}
|
||||
>
|
||||
CPU {renderSortIndicator('cpu')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('memory')}
|
||||
>
|
||||
Memory {renderSortIndicator('memory')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('disk')}
|
||||
>
|
||||
Disk {renderSortIndicator('disk')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('running')}
|
||||
>
|
||||
Containers {renderSortIndicator('running')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('uptime')}
|
||||
>
|
||||
Uptime {renderSortIndicator('uptime')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('lastSeen')}
|
||||
>
|
||||
Last Update {renderSortIndicator('lastSeen')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('agent')}
|
||||
>
|
||||
Agent {renderSortIndicator('agent')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<For each={sortedSummaries()}>
|
||||
{(summary) => {
|
||||
const selected = props.selectedHostId() === summary.host.id;
|
||||
const online = isHostOnline(summary.host);
|
||||
const uptimeLabel = summary.uptimeSeconds ? formatUptime(summary.uptimeSeconds) : '—';
|
||||
<>
|
||||
<Card padding="none" tone="glass" class={`mb-4 ${urlEdit.isEditing() ? 'overflow-visible' : 'overflow-hidden'}`}>
|
||||
<ScrollableTable persistKey="docker-host-summary">
|
||||
<table class="w-full border-collapse whitespace-nowrap">
|
||||
<thead>
|
||||
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
|
||||
<th
|
||||
class="pl-3 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 whitespace-nowrap"
|
||||
onClick={() => handleSort('name')}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label={`Sort by host ${sortKey() === 'name' ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : ''}`}
|
||||
>
|
||||
Host {renderSortIndicator('name')}
|
||||
</th>
|
||||
<th class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap">
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('cpu')}
|
||||
>
|
||||
CPU {renderSortIndicator('cpu')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('memory')}
|
||||
>
|
||||
Memory {renderSortIndicator('memory')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('disk')}
|
||||
>
|
||||
Disk {renderSortIndicator('disk')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('running')}
|
||||
>
|
||||
Containers {renderSortIndicator('running')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('uptime')}
|
||||
>
|
||||
Uptime {renderSortIndicator('uptime')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('lastSeen')}
|
||||
>
|
||||
Last Update {renderSortIndicator('lastSeen')}
|
||||
</th>
|
||||
<th
|
||||
class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
|
||||
onClick={() => handleSort('agent')}
|
||||
>
|
||||
Agent {renderSortIndicator('agent')}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<For each={sortedSummaries()}>
|
||||
{(summary) => {
|
||||
const selected = props.selectedHostId() === summary.host.id;
|
||||
const online = isHostOnline(summary.host);
|
||||
const uptimeLabel = summary.uptimeSeconds ? formatUptime(summary.uptimeSeconds) : '—';
|
||||
|
||||
const rowStyle = () => {
|
||||
const styles: Record<string, string> = {};
|
||||
const shadows: string[] = [];
|
||||
const rowStyle = () => {
|
||||
const styles: Record<string, string> = {};
|
||||
const shadows: string[] = [];
|
||||
|
||||
if (selected) {
|
||||
shadows.push('0 0 0 1px rgba(59, 130, 246, 0.5)');
|
||||
shadows.push('0 2px 4px -1px rgba(0, 0, 0, 0.1)');
|
||||
}
|
||||
if (selected) {
|
||||
shadows.push('0 0 0 1px rgba(59, 130, 246, 0.5)');
|
||||
shadows.push('0 2px 4px -1px rgba(0, 0, 0, 0.1)');
|
||||
}
|
||||
|
||||
if (shadows.length > 0) {
|
||||
styles['box-shadow'] = shadows.join(', ');
|
||||
}
|
||||
return styles;
|
||||
};
|
||||
if (shadows.length > 0) {
|
||||
styles['box-shadow'] = shadows.join(', ');
|
||||
}
|
||||
return styles;
|
||||
};
|
||||
|
||||
const rowClass = () => {
|
||||
const baseHover = 'cursor-pointer transition-all duration-200 relative hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:shadow-sm';
|
||||
const rowClass = () => {
|
||||
const baseHover = 'group cursor-pointer transition-all duration-200 relative hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:shadow-sm';
|
||||
|
||||
if (selected) {
|
||||
return 'cursor-pointer transition-all duration-200 relative bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 hover:shadow-sm z-10';
|
||||
}
|
||||
if (selected) {
|
||||
return 'group cursor-pointer transition-all duration-200 relative bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 hover:shadow-sm z-10';
|
||||
}
|
||||
|
||||
let className = baseHover;
|
||||
let className = baseHover;
|
||||
|
||||
if (!online) {
|
||||
className += ' opacity-60';
|
||||
}
|
||||
if (!online) {
|
||||
className += ' opacity-60';
|
||||
}
|
||||
|
||||
return className;
|
||||
};
|
||||
return className;
|
||||
};
|
||||
|
||||
const agentOutdated = isAgentOutdated(summary.host.agentVersion);
|
||||
const runtimeInfo = resolveHostRuntime(summary.host);
|
||||
const runtimeVersion = summary.host.runtimeVersion || summary.host.dockerVersion;
|
||||
const metricsKey = buildMetricKey('dockerHost', summary.host.id);
|
||||
const hostStatus = createMemo(() => getDockerHostStatusIndicator(summary.host));
|
||||
const agentOutdated = isAgentOutdated(summary.host.agentVersion);
|
||||
const runtimeInfo = resolveHostRuntime(summary.host);
|
||||
const runtimeVersion = summary.host.runtimeVersion || summary.host.dockerVersion;
|
||||
const metricsKey = buildMetricKey('dockerHost', summary.host.id);
|
||||
const hostStatus = createMemo(() => getDockerHostStatusIndicator(summary.host));
|
||||
|
||||
return (
|
||||
<tr
|
||||
class={rowClass()}
|
||||
style={rowStyle()}
|
||||
onClick={() => props.onSelect(summary.host.id)}
|
||||
>
|
||||
<td class="pr-2 py-1 pl-3 align-middle">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<StatusDot
|
||||
variant={hostStatus().variant}
|
||||
title={hostStatus().label}
|
||||
ariaLabel={hostStatus().label}
|
||||
size="xs"
|
||||
/>
|
||||
<span class="font-medium text-[11px] text-gray-900 dark:text-gray-100 truncate" title={getDisplayName(summary.host)}>
|
||||
{getDisplayName(summary.host)}
|
||||
</span>
|
||||
<Show when={getDisplayName(summary.host) !== summary.host.hostname}>
|
||||
<span class="hidden sm:inline text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
({summary.host.hostname})
|
||||
return (
|
||||
<tr
|
||||
class={rowClass()}
|
||||
style={rowStyle()}
|
||||
onClick={() => props.onSelect(summary.host.id)}
|
||||
>
|
||||
<td class="pr-2 py-1 pl-3 align-middle relative">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<StatusDot
|
||||
variant={hostStatus().variant}
|
||||
title={hostStatus().label}
|
||||
ariaLabel={hostStatus().label}
|
||||
size="xs"
|
||||
/>
|
||||
<span class="font-medium text-[11px] text-gray-900 dark:text-gray-100 truncate" title={getDisplayName(summary.host)}>
|
||||
{getDisplayName(summary.host)}
|
||||
</span>
|
||||
</Show>
|
||||
<div class="hidden xl:flex items-center gap-1.5 ml-1">
|
||||
<span
|
||||
class={`text-[9px] px-1 py-0 rounded font-medium whitespace-nowrap ${runtimeInfo.badgeClass}`}
|
||||
title={runtimeInfo.raw || runtimeInfo.label}
|
||||
{/* URL icon and link */}
|
||||
<Show when={getHostCustomUrl(summary.host.id)}>
|
||||
<a
|
||||
href={getHostCustomUrl(summary.host.id)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex-shrink-0 text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
|
||||
title={`Open ${getHostCustomUrl(summary.host.id)}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
||||
</svg>
|
||||
</a>
|
||||
</Show>
|
||||
<button
|
||||
type="button"
|
||||
class="flex-shrink-0 p-0.5 rounded text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100"
|
||||
classList={{ 'opacity-100': urlEdit.editingId() === summary.host.id }}
|
||||
title={getHostCustomUrl(summary.host.id) ? 'Edit URL' : 'Add URL'}
|
||||
onClick={(e) => handleStartEditingUrl(summary.host.id, e)}
|
||||
>
|
||||
{runtimeInfo.label}
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<Show when={getHostCustomUrl(summary.host.id)} fallback={
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
||||
}>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</Show>
|
||||
</svg>
|
||||
</button>
|
||||
<Show when={getDisplayName(summary.host) !== summary.host.hostname}>
|
||||
<span class="hidden sm:inline text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
({summary.host.hostname})
|
||||
</span>
|
||||
</Show>
|
||||
<div class="hidden xl:flex items-center gap-1.5 ml-1">
|
||||
<span
|
||||
class={`text-[9px] px-1 py-0 rounded font-medium whitespace-nowrap ${runtimeInfo.badgeClass}`}
|
||||
title={runtimeInfo.raw || runtimeInfo.label}
|
||||
>
|
||||
{runtimeInfo.label}
|
||||
</span>
|
||||
<Show when={runtimeVersion}>
|
||||
<span class="text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
v{runtimeVersion}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center items-center h-full w-full whitespace-nowrap">
|
||||
{renderDockerStatusBadge(summary.host.status)}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<Show when={isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<MetricText value={summary.cpuPercent} type="cpu" />
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block w-full">
|
||||
<EnhancedCPUBar
|
||||
usage={summary.cpuPercent}
|
||||
loadAverage={summary.host.loadAverage?.[0]}
|
||||
cores={summary.host.cpus}
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<ResponsiveMetricCell
|
||||
value={summary.memoryPercent}
|
||||
type="memory"
|
||||
sublabel={summary.memoryLabel}
|
||||
resourceId={metricsKey}
|
||||
isRunning={online}
|
||||
showMobile={isMobile()}
|
||||
/>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<ResponsiveMetricCell
|
||||
value={summary.diskPercent}
|
||||
type="disk"
|
||||
sublabel={summary.diskLabel}
|
||||
resourceId={metricsKey}
|
||||
isRunning={!!summary.diskLabel}
|
||||
showMobile={isMobile()}
|
||||
/>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center items-center h-full whitespace-nowrap w-full">
|
||||
<Show
|
||||
when={summary.totalCount > 0}
|
||||
fallback={<span class="text-xs text-gray-400 dark:text-gray-500">—</span>}
|
||||
>
|
||||
<StackedContainerBar
|
||||
running={summary.runningCount}
|
||||
stopped={summary.stoppedCount}
|
||||
error={summary.errorCount}
|
||||
total={summary.totalCount}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle whitespace-nowrap">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">
|
||||
{uptimeLabel}
|
||||
</span>
|
||||
<Show when={runtimeVersion}>
|
||||
<span class="text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
v{runtimeVersion}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<Show
|
||||
when={summary.lastSeenRelative}
|
||||
fallback={<span class="text-xs text-gray-400 dark:text-gray-500">—</span>}
|
||||
>
|
||||
{(relative) => (
|
||||
<span
|
||||
class="inline-flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap"
|
||||
title={summary.lastSeenAbsolute || undefined}
|
||||
>
|
||||
{relative()}
|
||||
</span>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex items-center justify-center gap-2 whitespace-nowrap text-[10px] h-full">
|
||||
<Show
|
||||
when={summary.host.agentVersion}
|
||||
fallback={<span class="text-gray-400 dark:text-gray-500 text-xs">—</span>}
|
||||
>
|
||||
{(version) => (
|
||||
<span
|
||||
class={
|
||||
agentOutdated
|
||||
? 'px-1.5 py-0.5 rounded bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 font-medium'
|
||||
: 'px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-medium'
|
||||
}
|
||||
title={`${getAgentVersionTooltip(summary.host.agentVersion)}${summary.host.intervalSeconds ? `\nReporting interval: ${summary.host.intervalSeconds}s` : ''}`}
|
||||
>
|
||||
{version()}
|
||||
</span>
|
||||
)}
|
||||
</Show>
|
||||
<Show when={agentOutdated}>
|
||||
<span class="text-[10px] text-yellow-600 dark:text-yellow-500 font-medium" title="Update recommended">
|
||||
⚠
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center items-center h-full w-full whitespace-nowrap">
|
||||
{renderDockerStatusBadge(summary.host.status)}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<Show when={isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<MetricText value={summary.cpuPercent} type="cpu" />
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block w-full">
|
||||
<EnhancedCPUBar
|
||||
usage={summary.cpuPercent}
|
||||
loadAverage={summary.host.loadAverage?.[0]}
|
||||
cores={summary.host.cpus}
|
||||
resourceId={metricsKey}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<ResponsiveMetricCell
|
||||
value={summary.memoryPercent}
|
||||
type="memory"
|
||||
sublabel={summary.memoryLabel}
|
||||
resourceId={metricsKey}
|
||||
isRunning={online}
|
||||
showMobile={isMobile()}
|
||||
/>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<ResponsiveMetricCell
|
||||
value={summary.diskPercent}
|
||||
type="disk"
|
||||
sublabel={summary.diskLabel}
|
||||
resourceId={metricsKey}
|
||||
isRunning={!!summary.diskLabel}
|
||||
showMobile={isMobile()}
|
||||
/>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center items-center h-full whitespace-nowrap w-full">
|
||||
<Show
|
||||
when={summary.totalCount > 0}
|
||||
fallback={<span class="text-xs text-gray-400 dark:text-gray-500">—</span>}
|
||||
>
|
||||
<StackedContainerBar
|
||||
running={summary.runningCount}
|
||||
stopped={summary.stoppedCount}
|
||||
error={summary.errorCount}
|
||||
total={summary.totalCount}
|
||||
/>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle whitespace-nowrap">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">
|
||||
{uptimeLabel}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<Show
|
||||
when={summary.lastSeenRelative}
|
||||
fallback={<span class="text-xs text-gray-400 dark:text-gray-500">—</span>}
|
||||
>
|
||||
{(relative) => (
|
||||
<span
|
||||
class="inline-flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap"
|
||||
title={summary.lastSeenAbsolute || undefined}
|
||||
>
|
||||
{relative()}
|
||||
</span>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex items-center justify-center gap-2 whitespace-nowrap text-[10px] h-full">
|
||||
<Show
|
||||
when={summary.host.agentVersion}
|
||||
fallback={<span class="text-gray-400 dark:text-gray-500 text-xs">—</span>}
|
||||
>
|
||||
{(version) => (
|
||||
<span
|
||||
class={
|
||||
agentOutdated
|
||||
? 'px-1.5 py-0.5 rounded bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 font-medium'
|
||||
: 'px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 font-medium'
|
||||
}
|
||||
title={`${getAgentVersionTooltip(summary.host.agentVersion)}${summary.host.intervalSeconds ? `\nReporting interval: ${summary.host.intervalSeconds}s` : ''}`}
|
||||
>
|
||||
{version()}
|
||||
</span>
|
||||
)}
|
||||
</Show>
|
||||
<Show when={agentOutdated}>
|
||||
<span class="text-[10px] text-yellow-600 dark:text-yellow-500 font-medium" title="Update recommended">
|
||||
⚠
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</ScrollableTable>
|
||||
</Card>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
</tbody>
|
||||
</table>
|
||||
</ScrollableTable>
|
||||
</Card>
|
||||
|
||||
{/* URL editing popover - using shared component */}
|
||||
<UrlEditPopover
|
||||
isOpen={urlEdit.isEditing()}
|
||||
value={urlEdit.editingValue()}
|
||||
position={urlEdit.position()}
|
||||
isSaving={urlEdit.isSaving()}
|
||||
hasExistingUrl={!!getHostCustomUrl(urlEdit.editingId() || '')}
|
||||
placeholder="https://portainer.local:9000"
|
||||
helpText="Add a URL to quickly access this host's management interface (e.g., Portainer)"
|
||||
onValueChange={urlEdit.setEditingValue}
|
||||
onSave={handleSaveUrl}
|
||||
onCancel={urlEdit.cancelEditing}
|
||||
onDelete={handleDeleteUrl}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,11 +12,13 @@ import { useWebSocket } from '@/App';
|
|||
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
|
||||
import { formatBytes, formatRelativeTime } from '@/utils/format';
|
||||
import { DockerMetadataAPI, type DockerMetadata } from '@/api/dockerMetadata';
|
||||
import { DockerHostMetadataAPI, type DockerHostMetadata } from '@/api/dockerHostMetadata';
|
||||
import { logger } from '@/utils/logger';
|
||||
import { STORAGE_KEYS } from '@/utils/localStorage';
|
||||
import { DEGRADED_HEALTH_STATUSES, OFFLINE_HEALTH_STATUSES } from '@/utils/status';
|
||||
|
||||
type DockerMetadataRecord = Record<string, DockerMetadata>;
|
||||
type DockerHostMetadataRecord = Record<string, DockerHostMetadata>;
|
||||
|
||||
interface DockerHostsProps {
|
||||
hosts: DockerHost[];
|
||||
|
|
@ -40,10 +42,27 @@ export const DockerHosts: Component<DockerHostsProps> = (props) => {
|
|||
return {};
|
||||
};
|
||||
|
||||
// Load docker host metadata from localStorage
|
||||
const loadInitialDockerHostMetadata = (): DockerHostMetadataRecord => {
|
||||
try {
|
||||
const cached = localStorage.getItem(STORAGE_KEYS.DOCKER_METADATA + '_hosts');
|
||||
if (cached) {
|
||||
return JSON.parse(cached);
|
||||
}
|
||||
} catch (err) {
|
||||
logger.warn('Failed to parse cached docker host metadata', err);
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
const [dockerMetadata, setDockerMetadata] = createSignal<DockerMetadataRecord>(
|
||||
loadInitialDockerMetadata(),
|
||||
);
|
||||
|
||||
const [dockerHostMetadata, setDockerHostMetadata] = createSignal<DockerHostMetadataRecord>(
|
||||
loadInitialDockerHostMetadata(),
|
||||
);
|
||||
|
||||
const sortedHosts = createMemo(() => {
|
||||
const hosts = props.hosts || [];
|
||||
return [...hosts].sort((a, b) => {
|
||||
|
|
@ -207,9 +226,58 @@ export const DockerHosts: Component<DockerHostsProps> = (props) => {
|
|||
.catch((err) => {
|
||||
logger.debug('Failed to load docker metadata', err);
|
||||
});
|
||||
|
||||
// Load docker host metadata from API
|
||||
DockerHostMetadataAPI.getAllMetadata()
|
||||
.then((metadata) => {
|
||||
setDockerHostMetadata(metadata || {});
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEYS.DOCKER_METADATA + '_hosts', JSON.stringify(metadata || {}));
|
||||
} catch (err) {
|
||||
logger.warn('Failed to cache docker host metadata', err);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.debug('Failed to load docker host metadata', err);
|
||||
});
|
||||
});
|
||||
onCleanup(() => document.removeEventListener('keydown', handleKeyDown));
|
||||
|
||||
// Handler to update docker host custom URL
|
||||
const handleHostCustomUrlUpdate = (hostId: string, url: string) => {
|
||||
const trimmedUrl = url.trim();
|
||||
const nextUrl = trimmedUrl === '' ? undefined : trimmedUrl;
|
||||
|
||||
setDockerHostMetadata((prev) => {
|
||||
const updated = { ...prev };
|
||||
if (nextUrl === undefined) {
|
||||
// Remove URL but keep other metadata fields
|
||||
if (updated[hostId]) {
|
||||
const { customUrl: _removed, ...rest } = updated[hostId];
|
||||
if (Object.keys(rest).length === 0 || (Object.keys(rest).length === 1 && !rest.customDisplayName && !rest.notes?.length)) {
|
||||
delete updated[hostId];
|
||||
} else {
|
||||
updated[hostId] = rest;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
updated[hostId] = {
|
||||
...(prev[hostId] || {}),
|
||||
customUrl: nextUrl,
|
||||
};
|
||||
}
|
||||
|
||||
// Cache to localStorage
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEYS.DOCKER_METADATA + '_hosts', JSON.stringify(updated));
|
||||
} catch (err) {
|
||||
logger.warn('Failed to cache docker host metadata', err);
|
||||
}
|
||||
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
// Handler to update docker resource custom URL
|
||||
const handleCustomUrlUpdate = (resourceId: string, url: string) => {
|
||||
const trimmedUrl = url.trim();
|
||||
|
|
@ -407,6 +475,8 @@ export const DockerHosts: Component<DockerHostsProps> = (props) => {
|
|||
summaries={filteredHostSummaries}
|
||||
selectedHostId={selectedHostId}
|
||||
onSelect={handleHostSelect}
|
||||
dockerHostMetadata={dockerHostMetadata()}
|
||||
onHostCustomUrlUpdate={handleHostCustomUrlUpdate}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import { usePersistentSignal } from '@/hooks/usePersistentSignal';
|
|||
import { ResponsiveMetricCell } from '@/components/shared/responsive';
|
||||
import { useBreakpoint } from '@/hooks/useBreakpoint';
|
||||
import { StackedMemoryBar } from '@/components/Dashboard/StackedMemoryBar';
|
||||
import { UrlEditPopover } from '@/components/shared/UrlEditPopover';
|
||||
import type { ColumnConfig } from '@/types/responsive';
|
||||
|
||||
const typeBadgeClass = (type: 'container' | 'service' | 'task' | 'unknown') => {
|
||||
|
|
@ -145,6 +146,7 @@ const [currentlyExpandedRowId, setCurrentlyExpandedRowId] = createSignal<string
|
|||
const [currentlyEditingDockerResourceId, setCurrentlyEditingDockerResourceId] = createSignal<string | null>(null);
|
||||
const dockerEditingValues = new Map<string, string>();
|
||||
const [dockerEditingValuesVersion, setDockerEditingValuesVersion] = createSignal(0);
|
||||
const [dockerPopoverPosition, setDockerPopoverPosition] = createSignal<{ top: number; left: number } | null>(null);
|
||||
|
||||
const toLower = (value?: string | null) => value?.toLowerCase() ?? '';
|
||||
|
||||
|
|
@ -994,6 +996,12 @@ const DockerContainerRow: Component<{
|
|||
|
||||
const startEditingUrl = (event: MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
// Calculate popover position from the button
|
||||
const button = event.currentTarget as HTMLElement;
|
||||
const rect = button.getBoundingClientRect();
|
||||
setDockerPopoverPosition({ top: rect.bottom + 4, left: Math.max(8, rect.left - 100) });
|
||||
|
||||
// If another resource is being edited, save it first
|
||||
const currentEditing = currentlyEditingDockerResourceId();
|
||||
|
|
@ -1057,6 +1065,7 @@ const DockerContainerRow: Component<{
|
|||
dockerEditingValues.delete(resourceId());
|
||||
setDockerEditingValuesVersion(v => v + 1);
|
||||
setCurrentlyEditingDockerResourceId(null);
|
||||
setDockerPopoverPosition(null);
|
||||
|
||||
// If URL hasn't changed, don't save
|
||||
if (newUrl === (customUrl() || '')) return;
|
||||
|
|
@ -1100,6 +1109,7 @@ const DockerContainerRow: Component<{
|
|||
dockerEditingValues.delete(resourceId());
|
||||
setDockerEditingValuesVersion(v => v + 1);
|
||||
setCurrentlyEditingDockerResourceId(null);
|
||||
setDockerPopoverPosition(null);
|
||||
|
||||
// If there was a URL set, delete it
|
||||
if (customUrl()) {
|
||||
|
|
@ -1127,6 +1137,7 @@ const DockerContainerRow: Component<{
|
|||
dockerEditingValues.delete(resourceId());
|
||||
setDockerEditingValuesVersion(v => v + 1);
|
||||
setCurrentlyEditingDockerResourceId(null);
|
||||
setDockerPopoverPosition(null);
|
||||
};
|
||||
|
||||
const cpuPercent = () => Math.max(0, Math.min(100, container.cpuPercent ?? 0));
|
||||
|
|
@ -1189,89 +1200,68 @@ const DockerContainerRow: Component<{
|
|||
size="xs"
|
||||
/>
|
||||
<div class="flex-1 min-w-0 truncate">
|
||||
<Show
|
||||
when={isEditingUrl()}
|
||||
fallback={
|
||||
<div class="flex items-center gap-1.5 flex-1 min-w-0 group/name">
|
||||
<span
|
||||
class="text-sm font-semibold text-gray-900 dark:text-gray-100 select-none truncate"
|
||||
title={containerTitle()}
|
||||
>
|
||||
{container.name || container.id}
|
||||
</span>
|
||||
<Show when={podName()}>
|
||||
{(name) => (
|
||||
<span class="inline-flex items-center gap-1 rounded bg-purple-100 px-1.5 py-0.5 text-[10px] font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200 flex-shrink-0">
|
||||
Pod: {name()}
|
||||
<Show when={isPodInfra()}>
|
||||
<span class="rounded bg-purple-200 px-1 py-0.5 text-[9px] uppercase text-purple-800 dark:bg-purple-800/50 dark:text-purple-200 ml-1">
|
||||
infra
|
||||
</span>
|
||||
</Show>
|
||||
<div class="flex items-center gap-1.5 flex-1 min-w-0 group/name">
|
||||
<span
|
||||
class="text-sm font-semibold text-gray-900 dark:text-gray-100 select-none truncate"
|
||||
title={containerTitle()}
|
||||
>
|
||||
{container.name || container.id}
|
||||
</span>
|
||||
<Show when={podName()}>
|
||||
{(name) => (
|
||||
<span class="inline-flex items-center gap-1 rounded bg-purple-100 px-1.5 py-0.5 text-[10px] font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200 flex-shrink-0">
|
||||
Pod: {name()}
|
||||
<Show when={isPodInfra()}>
|
||||
<span class="rounded bg-purple-200 px-1 py-0.5 text-[9px] uppercase text-purple-800 dark:bg-purple-800/50 dark:text-purple-200 ml-1">
|
||||
infra
|
||||
</span>
|
||||
)}
|
||||
</Show>
|
||||
<Show when={customUrl()}>
|
||||
<a
|
||||
href={customUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class={`flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors ${shouldAnimateIcon() ? 'animate-fadeIn' : ''}`}
|
||||
title="Open in new tab"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</Show>
|
||||
{/* Edit URL button - shows on hover */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={startEditingUrl}
|
||||
class="flex-shrink-0 opacity-0 group-hover/name:opacity-100 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-all"
|
||||
title={customUrl() ? 'Edit URL' : 'Add URL'}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
<Show when={props.showHostContext}>
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300 flex-shrink-0 max-w-[120px]"
|
||||
title={`Host: ${hostDisplayName()}`}
|
||||
>
|
||||
<StatusDot variant={hostStatus().variant} title={hostStatus().label} ariaLabel={hostStatus().label} size="xs" />
|
||||
<span class="truncate">{hostDisplayName()}</span>
|
||||
</span>
|
||||
</Show>
|
||||
{/* AI context indicator - shows when container is selected for AI */}
|
||||
<Show when={isInAIContext()}>
|
||||
<span class="flex-shrink-0 text-purple-500 dark:text-purple-400" title="Selected for AI context">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
||||
</svg>
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div class="flex-1 flex items-center gap-1 min-w-0" data-url-editor>
|
||||
<input
|
||||
ref={urlInputRef}
|
||||
type="text"
|
||||
value={editingUrlValue()}
|
||||
data-resource-id={resourceId()}
|
||||
onInput={(e) => { dockerEditingValues.set(resourceId(), e.currentTarget.value); setDockerEditingValuesVersion(v => v + 1); }}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); saveUrl(); } else if (e.key === 'Escape') { e.preventDefault(); cancelEditingUrl(); } }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
placeholder="https://example.com:8080"
|
||||
class="flex-1 min-w-0 px-2 py-0.5 text-sm border border-blue-500 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button type="button" data-url-editor-button onClick={(e) => { e.stopPropagation(); saveUrl(); }} class="flex-shrink-0 w-6 h-6 flex items-center justify-center text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors" title="Save (or press Enter)">✓</button>
|
||||
<button type="button" data-url-editor-button onClick={(e) => { e.stopPropagation(); deleteUrl(); }} class="flex-shrink-0 w-6 h-6 flex items-center justify-center text-xs bg-red-600 text-white rounded hover:bg-red-700 transition-colors" title="Delete URL">✕</button>
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
</span>
|
||||
)}
|
||||
</Show>
|
||||
<Show when={customUrl()}>
|
||||
<a
|
||||
href={customUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class={`flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors ${shouldAnimateIcon() ? 'animate-fadeIn' : ''}`}
|
||||
title="Open in new tab"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</Show>
|
||||
{/* Edit URL button - shows on hover */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={startEditingUrl}
|
||||
class="flex-shrink-0 opacity-0 group-hover/name:opacity-100 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-all"
|
||||
title={customUrl() ? 'Edit URL' : 'Add URL'}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
<Show when={props.showHostContext}>
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300 flex-shrink-0 max-w-[120px]"
|
||||
title={`Host: ${hostDisplayName()}`}
|
||||
>
|
||||
<StatusDot variant={hostStatus().variant} title={hostStatus().label} ariaLabel={hostStatus().label} size="xs" />
|
||||
<span class="truncate">{hostDisplayName()}</span>
|
||||
</span>
|
||||
</Show>
|
||||
{/* AI context indicator - shows when container is selected for AI */}
|
||||
<Show when={isInAIContext()}>
|
||||
<span class="flex-shrink-0 text-purple-500 dark:text-purple-400" title="Selected for AI context">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
||||
</svg>
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1414,6 +1404,21 @@ const DockerContainerRow: Component<{
|
|||
</For>
|
||||
</tr>
|
||||
|
||||
{/* URL editing popover - using shared component */}
|
||||
<UrlEditPopover
|
||||
isOpen={isEditingUrl()}
|
||||
value={editingUrlValue()}
|
||||
position={dockerPopoverPosition()}
|
||||
isSaving={false}
|
||||
hasExistingUrl={!!customUrl()}
|
||||
placeholder="https://example.com:8080"
|
||||
helpText="Add a URL to quickly access this container's web interface"
|
||||
onValueChange={(value) => { dockerEditingValues.set(resourceId(), value); setDockerEditingValuesVersion(v => v + 1); }}
|
||||
onSave={saveUrl}
|
||||
onCancel={cancelEditingUrl}
|
||||
onDelete={deleteUrl}
|
||||
/>
|
||||
|
||||
<Show when={expanded() && hasDrawerContent()}>
|
||||
<tr>
|
||||
<td colspan={DOCKER_COLUMNS.length} class="p-0">
|
||||
|
|
@ -1921,6 +1926,12 @@ const DockerServiceRow: Component<{
|
|||
|
||||
const startEditingUrl = (event: MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
// Calculate popover position from the button
|
||||
const button = event.currentTarget as HTMLElement;
|
||||
const rect = button.getBoundingClientRect();
|
||||
setDockerPopoverPosition({ top: rect.bottom + 4, left: Math.max(8, rect.left - 100) });
|
||||
|
||||
// If another resource is being edited, save it first
|
||||
const currentEditing = currentlyEditingDockerResourceId();
|
||||
|
|
@ -1984,6 +1995,7 @@ const DockerServiceRow: Component<{
|
|||
dockerEditingValues.delete(resourceId());
|
||||
setDockerEditingValuesVersion(v => v + 1);
|
||||
setCurrentlyEditingDockerResourceId(null);
|
||||
setDockerPopoverPosition(null);
|
||||
|
||||
// If URL hasn't changed, don't save
|
||||
if (newUrl === (customUrl() || '')) return;
|
||||
|
|
@ -2027,6 +2039,7 @@ const DockerServiceRow: Component<{
|
|||
dockerEditingValues.delete(resourceId());
|
||||
setDockerEditingValuesVersion(v => v + 1);
|
||||
setCurrentlyEditingDockerResourceId(null);
|
||||
setDockerPopoverPosition(null);
|
||||
|
||||
// If there was a URL set, delete it
|
||||
if (customUrl()) {
|
||||
|
|
@ -2054,6 +2067,7 @@ const DockerServiceRow: Component<{
|
|||
dockerEditingValues.delete(resourceId());
|
||||
setDockerEditingValuesVersion(v => v + 1);
|
||||
setCurrentlyEditingDockerResourceId(null);
|
||||
setDockerPopoverPosition(null);
|
||||
};
|
||||
|
||||
const badge = serviceHealthBadge(service);
|
||||
|
|
@ -2085,82 +2099,61 @@ const DockerServiceRow: Component<{
|
|||
size="xs"
|
||||
/>
|
||||
<div class="flex-1 min-w-0">
|
||||
<Show
|
||||
when={isEditingUrl()}
|
||||
fallback={
|
||||
<div class="flex items-center gap-1.5 flex-1 min-w-0 group/name">
|
||||
<span
|
||||
class="text-sm font-semibold text-gray-900 dark:text-gray-100 select-none"
|
||||
title={serviceTitle()}
|
||||
>
|
||||
{service.name || service.id || 'Service'}
|
||||
</span>
|
||||
<Show when={customUrl()}>
|
||||
<a
|
||||
href={customUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class={`flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors ${shouldAnimateIcon() ? 'animate-fadeIn' : ''}`}
|
||||
title="Open in new tab"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</Show>
|
||||
{/* Edit URL button - shows on hover */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={startEditingUrl}
|
||||
class="flex-shrink-0 opacity-0 group-hover/name:opacity-100 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-all"
|
||||
title={customUrl() ? 'Edit URL' : 'Add URL'}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
<Show when={service.stack && !isEditingUrl()}>
|
||||
<span class="text-[10px] text-gray-500 dark:text-gray-400 truncate" title={`Stack: ${service.stack}`}>
|
||||
Stack: {service.stack}
|
||||
</span>
|
||||
</Show>
|
||||
<Show when={props.showHostContext}>
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300"
|
||||
title={`Host: ${hostDisplayName()}`}
|
||||
>
|
||||
<StatusDot variant={hostStatus().variant} title={hostStatus().label} ariaLabel={hostStatus().label} size="xs" />
|
||||
<span class="max-w-[160px] truncate">{hostDisplayName()}</span>
|
||||
</span>
|
||||
</Show>
|
||||
{/* AI context indicator - shows when service is selected for AI */}
|
||||
<Show when={isInAIContext()}>
|
||||
<span class="flex-shrink-0 text-purple-500 dark:text-purple-400" title="Selected for AI context">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
||||
</svg>
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div class="flex-1 flex items-center gap-1 min-w-0" data-url-editor>
|
||||
<input
|
||||
ref={urlInputRef}
|
||||
type="text"
|
||||
value={editingUrlValue()}
|
||||
data-resource-id={resourceId()}
|
||||
onInput={(e) => { dockerEditingValues.set(resourceId(), e.currentTarget.value); setDockerEditingValuesVersion(v => v + 1); }}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); saveUrl(); } else if (e.key === 'Escape') { e.preventDefault(); cancelEditingUrl(); } }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
placeholder="https://example.com:8080"
|
||||
class="flex-1 min-w-0 px-2 py-0.5 text-sm border border-blue-500 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button type="button" data-url-editor-button onClick={(e) => { e.stopPropagation(); saveUrl(); }} class="flex-shrink-0 w-6 h-6 flex items-center justify-center text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors" title="Save (or press Enter)">✓</button>
|
||||
<button type="button" data-url-editor-button onClick={(e) => { e.stopPropagation(); deleteUrl(); }} class="flex-shrink-0 w-6 h-6 flex items-center justify-center text-xs bg-red-600 text-white rounded hover:bg-red-700 transition-colors" title="Delete URL">✕</button>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="flex items-center gap-1.5 flex-1 min-w-0 group/name">
|
||||
<span
|
||||
class="text-sm font-semibold text-gray-900 dark:text-gray-100 select-none"
|
||||
title={serviceTitle()}
|
||||
>
|
||||
{service.name || service.id || 'Service'}
|
||||
</span>
|
||||
<Show when={customUrl()}>
|
||||
<a
|
||||
href={customUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class={`flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors ${shouldAnimateIcon() ? 'animate-fadeIn' : ''}`}
|
||||
title="Open in new tab"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</Show>
|
||||
{/* Edit URL button - shows on hover */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={startEditingUrl}
|
||||
class="flex-shrink-0 opacity-0 group-hover/name:opacity-100 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-all"
|
||||
title={customUrl() ? 'Edit URL' : 'Add URL'}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
<Show when={service.stack}>
|
||||
<span class="text-[10px] text-gray-500 dark:text-gray-400 truncate" title={`Stack: ${service.stack}`}>
|
||||
Stack: {service.stack}
|
||||
</span>
|
||||
</Show>
|
||||
<Show when={props.showHostContext}>
|
||||
<span
|
||||
class="inline-flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300"
|
||||
title={`Host: ${hostDisplayName()}`}
|
||||
>
|
||||
<StatusDot variant={hostStatus().variant} title={hostStatus().label} ariaLabel={hostStatus().label} size="xs" />
|
||||
<span class="max-w-[160px] truncate">{hostDisplayName()}</span>
|
||||
</span>
|
||||
</Show>
|
||||
{/* AI context indicator - shows when service is selected for AI */}
|
||||
<Show when={isInAIContext()}>
|
||||
<span class="flex-shrink-0 text-purple-500 dark:text-purple-400" title="Selected for AI context">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
||||
</svg>
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2241,6 +2234,21 @@ const DockerServiceRow: Component<{
|
|||
</For>
|
||||
</tr>
|
||||
|
||||
{/* URL editing popover - using shared component */}
|
||||
<UrlEditPopover
|
||||
isOpen={isEditingUrl()}
|
||||
value={editingUrlValue()}
|
||||
position={dockerPopoverPosition()}
|
||||
isSaving={false}
|
||||
hasExistingUrl={!!customUrl()}
|
||||
placeholder="https://example.com:8080"
|
||||
helpText="Add a URL to quickly access this service's web interface"
|
||||
onValueChange={(value) => { dockerEditingValues.set(resourceId(), value); setDockerEditingValuesVersion(v => v + 1); }}
|
||||
onSave={saveUrl}
|
||||
onCancel={cancelEditingUrl}
|
||||
onDelete={deleteUrl}
|
||||
/>
|
||||
|
||||
<Show when={expanded() && hasTasks()}>
|
||||
<tr>
|
||||
<td colspan={DOCKER_COLUMNS.length} class="p-0">
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@ import { aiChatStore } from '@/stores/aiChat';
|
|||
import { STORAGE_KEYS } from '@/utils/localStorage';
|
||||
import { useResourcesAsLegacy } from '@/hooks/useResources';
|
||||
import { HostMetadataAPI, type HostMetadata } from '@/api/hostMetadata';
|
||||
import { UrlEditPopover, createUrlEditState } from '@/components/shared/UrlEditPopover';
|
||||
import { showSuccess, showError } from '@/utils/toast';
|
||||
import { logger } from '@/utils/logger';
|
||||
|
||||
// Column definition for hosts table
|
||||
|
|
@ -43,13 +45,13 @@ export const HOST_COLUMNS: HostColumnDef[] = [
|
|||
{ id: 'disk', label: 'Disk', priority: 'essential', width: '140px', sortKey: 'disk' },
|
||||
|
||||
// Secondary - visible on md+, toggleable
|
||||
{ id: 'temp', label: 'Temp', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>, priority: 'secondary', width: '50px', toggleable: true },
|
||||
{ id: 'uptime', label: 'Uptime', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>, priority: 'secondary', width: '65px', toggleable: true, sortKey: 'uptime' },
|
||||
{ id: 'temp', label: 'Temp', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>, priority: 'secondary', width: '50px', toggleable: true },
|
||||
{ id: 'uptime', label: 'Uptime', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>, priority: 'secondary', width: '65px', toggleable: true, sortKey: 'uptime' },
|
||||
{ id: 'agent', label: 'Agent', priority: 'secondary', width: '60px', toggleable: true },
|
||||
|
||||
// Supplementary - visible on lg+, toggleable
|
||||
// Note: CPU count and load average removed - they're shown in the EnhancedCPUBar tooltip
|
||||
{ id: 'ip', label: 'IP', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>, priority: 'supplementary', width: '50px', toggleable: true },
|
||||
{ id: 'ip', label: 'IP', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg>, priority: 'supplementary', width: '50px', toggleable: true },
|
||||
|
||||
// Detailed - visible on xl+, toggleable
|
||||
{ id: 'arch', label: 'Arch', priority: 'detailed', width: '55px', toggleable: true },
|
||||
|
|
@ -914,41 +916,43 @@ const HostRow: Component<HostRowProps> = (props) => {
|
|||
// Check if this host is in AI context
|
||||
const isInAIContext = createMemo(() => aiChatStore.enabled && aiChatStore.hasContextItem(host.id));
|
||||
|
||||
// URL editing state
|
||||
const [isEditingUrl, setIsEditingUrl] = createSignal(false);
|
||||
const [editingUrlValue, setEditingUrlValue] = createSignal('');
|
||||
const [isSavingUrl, setIsSavingUrl] = createSignal(false);
|
||||
let urlInputRef: HTMLInputElement | undefined;
|
||||
// URL editing using shared hook
|
||||
const urlEdit = createUrlEditState();
|
||||
|
||||
// Start editing URL
|
||||
const startEditingUrl = (e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setEditingUrlValue(props.customUrl || '');
|
||||
setIsEditingUrl(true);
|
||||
// Focus input after render
|
||||
setTimeout(() => urlInputRef?.focus(), 0);
|
||||
const handleStartEditingUrl = (e: MouseEvent) => {
|
||||
urlEdit.startEditing(host.id, props.customUrl || '', e);
|
||||
};
|
||||
|
||||
// Save URL
|
||||
const saveUrl = async () => {
|
||||
const url = editingUrlValue().trim();
|
||||
setIsSavingUrl(true);
|
||||
const handleSaveUrl = async () => {
|
||||
const url = urlEdit.editingValue().trim();
|
||||
urlEdit.setIsSaving(true);
|
||||
try {
|
||||
if (url) {
|
||||
await props.onUpdateCustomUrl(host.id, url);
|
||||
showSuccess('Host URL saved');
|
||||
} else {
|
||||
await props.onDeleteCustomUrl(host.id);
|
||||
showSuccess('Host URL removed');
|
||||
}
|
||||
setIsEditingUrl(false);
|
||||
} finally {
|
||||
setIsSavingUrl(false);
|
||||
urlEdit.finishEditing();
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to save URL';
|
||||
showError(message);
|
||||
urlEdit.setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Cancel editing
|
||||
const cancelEditingUrl = () => {
|
||||
setIsEditingUrl(false);
|
||||
setEditingUrlValue('');
|
||||
const handleDeleteUrl = async () => {
|
||||
urlEdit.setIsSaving(true);
|
||||
try {
|
||||
await props.onDeleteCustomUrl(host.id);
|
||||
showSuccess('Host URL removed');
|
||||
urlEdit.finishEditing();
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to remove URL';
|
||||
showError(message);
|
||||
urlEdit.setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Build context for AI - includes routing fields
|
||||
|
|
@ -999,287 +1003,252 @@ const HostRow: Component<HostRowProps> = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<tr class={rowClass()} onClick={handleRowClick}>
|
||||
{/* Host Name - always visible */}
|
||||
<td class="pl-4 pr-2 py-1 align-middle">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<StatusDot
|
||||
variant={hostStatus().variant}
|
||||
title={hostStatus().label}
|
||||
ariaLabel={hostStatus().label}
|
||||
size="xs"
|
||||
/>
|
||||
<Show
|
||||
when={isEditingUrl()}
|
||||
fallback={
|
||||
<div class="min-w-0 flex items-center gap-1.5 group/name">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 whitespace-nowrap">
|
||||
{host.displayName || host.hostname || host.id}
|
||||
<>
|
||||
<tr class={rowClass()} onClick={handleRowClick}>
|
||||
{/* Host Name - always visible */}
|
||||
<td class="pl-4 pr-2 py-1 align-middle">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<StatusDot
|
||||
variant={hostStatus().variant}
|
||||
title={hostStatus().label}
|
||||
ariaLabel={hostStatus().label}
|
||||
size="xs"
|
||||
/>
|
||||
<div class="min-w-0 flex items-center gap-1.5 group/name">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 whitespace-nowrap">
|
||||
{host.displayName || host.hostname || host.id}
|
||||
</p>
|
||||
<Show when={host.displayName && host.displayName !== host.hostname}>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 whitespace-nowrap">
|
||||
{host.hostname}
|
||||
</p>
|
||||
<Show when={host.displayName && host.displayName !== host.hostname}>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 whitespace-nowrap">
|
||||
{host.hostname}
|
||||
</p>
|
||||
</Show>
|
||||
<Show when={host.lastSeen}>
|
||||
<p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5 whitespace-nowrap">
|
||||
Updated {formatRelativeTime(host.lastSeen!)}
|
||||
</p>
|
||||
</Show>
|
||||
</div>
|
||||
{/* Custom URL link */}
|
||||
<Show when={props.customUrl}>
|
||||
<a
|
||||
href={props.customUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
|
||||
title={`Open ${props.customUrl}`}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</Show>
|
||||
{/* Edit URL button - shows on hover */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={startEditingUrl}
|
||||
class="flex-shrink-0 opacity-0 group-hover/name:opacity-100 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-all"
|
||||
title={props.customUrl ? 'Edit URL' : 'Add URL'}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* AI context indicator */}
|
||||
<Show when={isInAIContext()}>
|
||||
<span class="flex-shrink-0 text-purple-500 dark:text-purple-400" title="Selected for AI context">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
||||
</svg>
|
||||
</span>
|
||||
<Show when={host.lastSeen}>
|
||||
<p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5 whitespace-nowrap">
|
||||
Updated {formatRelativeTime(host.lastSeen!)}
|
||||
</p>
|
||||
</Show>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* URL editing mode */}
|
||||
<div class="flex items-center gap-1 min-w-0" data-url-editor>
|
||||
<input
|
||||
ref={urlInputRef}
|
||||
type="text"
|
||||
value={editingUrlValue()}
|
||||
onInput={(e) => setEditingUrlValue(e.currentTarget.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
saveUrl();
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
cancelEditingUrl();
|
||||
}
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
placeholder="https://192.168.1.100:8080"
|
||||
class="w-40 px-2 py-0.5 text-xs border border-blue-500 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
||||
disabled={isSavingUrl()}
|
||||
{/* Custom URL link */}
|
||||
<Show when={props.customUrl}>
|
||||
<a
|
||||
href={props.customUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
|
||||
title={`Open ${props.customUrl}`}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<svg
|
||||
class="w-3.5 h-3.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</Show>
|
||||
{/* Edit URL button - shows on hover */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleStartEditingUrl}
|
||||
class="flex-shrink-0 opacity-0 group-hover/name:opacity-100 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-all"
|
||||
title={props.customUrl ? 'Edit URL' : 'Add URL'}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* AI context indicator */}
|
||||
<Show when={isInAIContext()}>
|
||||
<span class="flex-shrink-0 text-purple-500 dark:text-purple-400" title="Selected for AI context">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z" />
|
||||
</svg>
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Platform */}
|
||||
<Show when={props.isColVisible('platform')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="text-xs text-gray-700 dark:text-gray-300">
|
||||
<p class="font-medium capitalize whitespace-nowrap">{host.platform || '—'}</p>
|
||||
<Show when={host.osName}>
|
||||
<p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5 whitespace-nowrap">
|
||||
{host.osName} {host.osVersion}
|
||||
</p>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* CPU */}
|
||||
<Show when={props.isColVisible('cpu')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<Show when={props.isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<MetricText value={cpuPercent} type="cpu" />
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block">
|
||||
<EnhancedCPUBar
|
||||
usage={cpuPercent}
|
||||
loadAverage={host.loadAverage?.[0]}
|
||||
cores={host.cpuCount}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
saveUrl();
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Memory */}
|
||||
<Show when={props.isColVisible('memory')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<Show when={props.isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<MetricText value={memPercent} type="memory" />
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block">
|
||||
<StackedMemoryBar
|
||||
used={host.memory?.used || 0}
|
||||
total={host.memory?.total || 0}
|
||||
balloon={host.memory?.balloon || 0}
|
||||
swapUsed={host.memory?.swapUsed || 0}
|
||||
swapTotal={host.memory?.swapTotal || 0}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Disk */}
|
||||
<Show when={props.isColVisible('disk')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<Show when={props.isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<MetricText value={diskStats.percent} type="disk" />
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block">
|
||||
<StackedDiskBar
|
||||
disks={host.disks}
|
||||
aggregateDisk={{
|
||||
total: diskStats.total,
|
||||
used: diskStats.used,
|
||||
free: diskStats.total - diskStats.used,
|
||||
usage: diskStats.percent / 100
|
||||
}}
|
||||
disabled={isSavingUrl()}
|
||||
class="flex-shrink-0 w-5 h-5 flex items-center justify-center text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
title="Save (Enter)"
|
||||
>
|
||||
✓
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
cancelEditingUrl();
|
||||
}}
|
||||
disabled={isSavingUrl()}
|
||||
class="flex-shrink-0 w-5 h-5 flex items-center justify-center text-xs bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors disabled:opacity-50"
|
||||
title="Cancel (Esc)"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Platform */}
|
||||
<Show when={props.isColVisible('platform')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="text-xs text-gray-700 dark:text-gray-300">
|
||||
<p class="font-medium capitalize whitespace-nowrap">{host.platform || '—'}</p>
|
||||
<Show when={host.osName}>
|
||||
<p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5 whitespace-nowrap">
|
||||
{host.osName} {host.osVersion}
|
||||
</p>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* CPU */}
|
||||
<Show when={props.isColVisible('cpu')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<Show when={props.isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<MetricText value={cpuPercent} type="cpu" />
|
||||
{/* Temperature - shows primary temp with all sensors in tooltip */}
|
||||
<Show when={props.isColVisible('temp')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<HostTemperatureCell sensors={host.sensors?.temperatureCelsius} />
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block">
|
||||
<EnhancedCPUBar
|
||||
usage={cpuPercent}
|
||||
loadAverage={host.loadAverage?.[0]}
|
||||
cores={host.cpuCount}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Memory */}
|
||||
<Show when={props.isColVisible('memory')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<Show when={props.isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<MetricText value={memPercent} type="memory" />
|
||||
{/* Uptime */}
|
||||
<Show when={props.isColVisible('uptime')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={host.uptimeSeconds} fallback={<span class="text-xs text-gray-400">—</span>}>
|
||||
<span class="text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{formatUptime(host.uptimeSeconds!)}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block">
|
||||
<StackedMemoryBar
|
||||
used={host.memory?.used || 0}
|
||||
total={host.memory?.total || 0}
|
||||
balloon={host.memory?.balloon || 0}
|
||||
swapUsed={host.memory?.swapUsed || 0}
|
||||
swapTotal={host.memory?.swapTotal || 0}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Disk */}
|
||||
<Show when={props.isColVisible('disk')}>
|
||||
<td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
|
||||
<Show when={props.isMobile()}>
|
||||
<div class="md:hidden flex justify-center">
|
||||
<MetricText value={diskStats.percent} type="disk" />
|
||||
{/* Agent Version */}
|
||||
<Show when={props.isColVisible('agent')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={host.agentVersion} fallback={<span class="text-xs text-gray-400">—</span>}>
|
||||
<span class="text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{host.agentVersion}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
<div class="hidden md:block">
|
||||
<StackedDiskBar
|
||||
disks={host.disks}
|
||||
aggregateDisk={{
|
||||
total: diskStats.total,
|
||||
used: diskStats.used,
|
||||
free: diskStats.total - diskStats.used,
|
||||
usage: diskStats.percent / 100
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Temperature - shows primary temp with all sensors in tooltip */}
|
||||
<Show when={props.isColVisible('temp')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<HostTemperatureCell sensors={host.sensors?.temperatureCelsius} />
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
{/* IP Address - uses icon + count with tooltip */}
|
||||
<Show when={props.isColVisible('ip')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<HostNetworkInfoCell networkInterfaces={host.networkInterfaces || []} />
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Uptime */}
|
||||
<Show when={props.isColVisible('uptime')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={host.uptimeSeconds} fallback={<span class="text-xs text-gray-400">—</span>}>
|
||||
<span class="text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{formatUptime(host.uptimeSeconds!)}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
{/* Architecture */}
|
||||
<Show when={props.isColVisible('arch')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={host.architecture} fallback={<span class="text-xs text-gray-400">—</span>}>
|
||||
<span class="text-[10px] text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{host.architecture}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Agent Version */}
|
||||
<Show when={props.isColVisible('agent')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={host.agentVersion} fallback={<span class="text-xs text-gray-400">—</span>}>
|
||||
<span class="text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{host.agentVersion}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
{/* Kernel */}
|
||||
<Show when={props.isColVisible('kernel')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={host.kernelVersion} fallback={<span class="text-xs text-gray-400">—</span>}>
|
||||
<span
|
||||
class="text-[10px] text-gray-700 dark:text-gray-300 max-w-[100px] truncate"
|
||||
title={host.kernelVersion}
|
||||
>
|
||||
{host.kernelVersion}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* IP Address - uses icon + count with tooltip */}
|
||||
<Show when={props.isColVisible('ip')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<HostNetworkInfoCell networkInterfaces={host.networkInterfaces || []} />
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
{/* RAID Status */}
|
||||
<Show when={props.isColVisible('raid')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<HostRAIDStatusCell raid={host.raid} />
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
</tr>
|
||||
|
||||
{/* Architecture */}
|
||||
<Show when={props.isColVisible('arch')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={host.architecture} fallback={<span class="text-xs text-gray-400">—</span>}>
|
||||
<span class="text-[10px] text-gray-700 dark:text-gray-300 whitespace-nowrap">
|
||||
{host.architecture}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* Kernel */}
|
||||
<Show when={props.isColVisible('kernel')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<Show when={host.kernelVersion} fallback={<span class="text-xs text-gray-400">—</span>}>
|
||||
<span
|
||||
class="text-[10px] text-gray-700 dark:text-gray-300 max-w-[100px] truncate"
|
||||
title={host.kernelVersion}
|
||||
>
|
||||
{host.kernelVersion}
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
|
||||
{/* RAID Status */}
|
||||
<Show when={props.isColVisible('raid')}>
|
||||
<td class="px-2 py-1 align-middle">
|
||||
<div class="flex justify-center">
|
||||
<HostRAIDStatusCell raid={host.raid} />
|
||||
</div>
|
||||
</td>
|
||||
</Show>
|
||||
</tr>
|
||||
{/* URL editing popover - using shared component */}
|
||||
<UrlEditPopover
|
||||
isOpen={urlEdit.isEditing() && urlEdit.editingId() === host.id}
|
||||
value={urlEdit.editingValue()}
|
||||
position={urlEdit.position()}
|
||||
isSaving={urlEdit.isSaving()}
|
||||
hasExistingUrl={!!props.customUrl}
|
||||
placeholder="https://192.168.1.100:8080"
|
||||
helpText="Add a URL to quickly access this host's web interface"
|
||||
onValueChange={urlEdit.setEditingValue}
|
||||
onSave={handleSaveUrl}
|
||||
onCancel={urlEdit.cancelEditing}
|
||||
onDelete={handleDeleteUrl}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
186
frontend-modern/src/components/shared/UrlEditPopover.tsx
Normal file
186
frontend-modern/src/components/shared/UrlEditPopover.tsx
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
import { Component, Show, createSignal, createEffect } from 'solid-js';
|
||||
|
||||
export interface UrlEditPopoverProps {
|
||||
/** Whether the popover is visible */
|
||||
isOpen: boolean;
|
||||
/** Current URL value being edited */
|
||||
value: string;
|
||||
/** Position of the popover (fixed positioning) */
|
||||
position: { top: number; left: number } | null;
|
||||
/** Whether the URL is currently being saved */
|
||||
isSaving?: boolean;
|
||||
/** Whether there's an existing URL that can be deleted */
|
||||
hasExistingUrl?: boolean;
|
||||
/** Placeholder text for the input */
|
||||
placeholder?: string;
|
||||
/** Help text shown below the input */
|
||||
helpText?: string;
|
||||
/** Called when the input value changes */
|
||||
onValueChange: (value: string) => void;
|
||||
/** Called when save is requested */
|
||||
onSave: () => void;
|
||||
/** Called when cancel is requested */
|
||||
onCancel: () => void;
|
||||
/** Called when delete is requested (only if hasExistingUrl is true) */
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* A reusable URL editing popover component that provides a consistent
|
||||
* experience across all tables for adding/editing custom URLs.
|
||||
*
|
||||
* Uses fixed positioning to escape overflow clipping from parent containers.
|
||||
*/
|
||||
export const UrlEditPopover: Component<UrlEditPopoverProps> = (props) => {
|
||||
let inputRef: HTMLInputElement | undefined;
|
||||
|
||||
// Focus input when popover opens
|
||||
createEffect(() => {
|
||||
if (props.isOpen && inputRef) {
|
||||
// Use setTimeout to ensure the element is in the DOM
|
||||
setTimeout(() => {
|
||||
inputRef?.focus();
|
||||
inputRef?.select();
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
props.onSave();
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
props.onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Show when={props.isOpen && props.position}>
|
||||
<div
|
||||
data-url-editor
|
||||
class="fixed z-[9999] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl p-3 min-w-[300px]"
|
||||
style={{ top: `${props.position!.top}px`, left: `${props.position!.left}px` }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="url"
|
||||
class="flex-1 text-sm px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
||||
placeholder={props.placeholder ?? 'https://example.com'}
|
||||
value={props.value}
|
||||
onInput={(e) => props.onValueChange(e.currentTarget.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={props.isSaving}
|
||||
/>
|
||||
|
||||
{/* Save button */}
|
||||
<button
|
||||
type="button"
|
||||
class="p-2 text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 hover:bg-green-50 dark:hover:bg-green-900/20 rounded transition-colors disabled:opacity-50"
|
||||
title="Save (Enter)"
|
||||
disabled={props.isSaving}
|
||||
onClick={props.onSave}
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Delete button - only show if there's an existing URL */}
|
||||
<Show when={props.hasExistingUrl && props.onDelete}>
|
||||
<button
|
||||
type="button"
|
||||
class="p-2 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors disabled:opacity-50"
|
||||
title="Remove URL"
|
||||
disabled={props.isSaving}
|
||||
onClick={props.onDelete}
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
{/* Cancel button */}
|
||||
<button
|
||||
type="button"
|
||||
class="p-2 text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||
title="Cancel (Esc)"
|
||||
onClick={props.onCancel}
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Help text */}
|
||||
<Show when={props.helpText}>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
{props.helpText}
|
||||
</p>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Hook to manage URL editing state.
|
||||
* Provides all the state and handlers needed for the UrlEditPopover.
|
||||
*/
|
||||
export function createUrlEditState() {
|
||||
const [isEditing, setIsEditing] = createSignal(false);
|
||||
const [editingValue, setEditingValue] = createSignal('');
|
||||
const [isSaving, setIsSaving] = createSignal(false);
|
||||
const [position, setPosition] = createSignal<{ top: number; left: number } | null>(null);
|
||||
const [editingId, setEditingId] = createSignal<string | null>(null);
|
||||
|
||||
const startEditing = (id: string, currentValue: string, event: MouseEvent) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
const button = event.currentTarget as HTMLElement;
|
||||
const rect = button.getBoundingClientRect();
|
||||
|
||||
// Position below the button, slightly to the left for better visibility
|
||||
setPosition({
|
||||
top: rect.bottom + 4,
|
||||
left: Math.max(8, rect.left - 100)
|
||||
});
|
||||
|
||||
setEditingValue(currentValue);
|
||||
setEditingId(id);
|
||||
setIsEditing(true);
|
||||
};
|
||||
|
||||
const cancelEditing = () => {
|
||||
setIsEditing(false);
|
||||
setEditingValue('');
|
||||
setEditingId(null);
|
||||
setPosition(null);
|
||||
};
|
||||
|
||||
const finishEditing = () => {
|
||||
setIsEditing(false);
|
||||
setEditingValue('');
|
||||
setEditingId(null);
|
||||
setPosition(null);
|
||||
setIsSaving(false);
|
||||
};
|
||||
|
||||
return {
|
||||
isEditing,
|
||||
editingValue,
|
||||
setEditingValue,
|
||||
isSaving,
|
||||
setIsSaving,
|
||||
position,
|
||||
editingId,
|
||||
startEditing,
|
||||
cancelEditing,
|
||||
finishEditing,
|
||||
};
|
||||
}
|
||||
|
|
@ -162,3 +162,154 @@ func (h *DockerMetadataHandler) HandleDeleteMetadata(w http.ResponseWriter, r *h
|
|||
|
||||
w.WriteHeader(http.StatusNoContent)
|
||||
}
|
||||
|
||||
// HandleGetHostMetadata retrieves metadata for a Docker host or all hosts
|
||||
func (h *DockerMetadataHandler) HandleGetHostMetadata(w http.ResponseWriter, r *http.Request) {
|
||||
if r.Method != http.MethodGet {
|
||||
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
|
||||
return
|
||||
}
|
||||
|
||||
// Check if requesting specific host
|
||||
path := r.URL.Path
|
||||
// Handle both /api/docker/hosts/metadata and /api/docker/hosts/metadata/
|
||||
if path == "/api/docker/hosts/metadata" || path == "/api/docker/hosts/metadata/" {
|
||||
// Get all host metadata
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
allMeta := h.store.GetAllHostMetadata()
|
||||
if allMeta == nil {
|
||||
// Return empty object instead of null
|
||||
json.NewEncoder(w).Encode(make(map[string]*config.DockerHostMetadata))
|
||||
} else {
|
||||
json.NewEncoder(w).Encode(allMeta)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Get specific host ID from path
|
||||
hostID := strings.TrimPrefix(path, "/api/docker/hosts/metadata/")
|
||||
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
|
||||
if hostID != "" {
|
||||
// Get specific Docker host metadata
|
||||
meta := h.store.GetHostMetadata(hostID)
|
||||
if meta == nil {
|
||||
// Return empty metadata instead of 404
|
||||
json.NewEncoder(w).Encode(&config.DockerHostMetadata{})
|
||||
} else {
|
||||
json.NewEncoder(w).Encode(meta)
|
||||
}
|
||||
} else {
|
||||
// This shouldn't happen with current routing, but handle it anyway
|
||||
http.Error(w, "Invalid request path", http.StatusBadRequest)
|
||||
}
|
||||
}
|
||||
|
||||
// HandleUpdateHostMetadata updates metadata for a Docker host
|
||||
func (h *DockerMetadataHandler) HandleUpdateHostMetadata(w http.ResponseWriter, r *http.Request) {
|
||||
if r.Method != http.MethodPut && r.Method != http.MethodPost {
|
||||
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
|
||||
return
|
||||
}
|
||||
|
||||
hostID := strings.TrimPrefix(r.URL.Path, "/api/docker/hosts/metadata/")
|
||||
if hostID == "" || hostID == "metadata" {
|
||||
http.Error(w, "Host ID required", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
// Limit request body to 16KB to prevent memory exhaustion
|
||||
r.Body = http.MaxBytesReader(w, r.Body, 16*1024)
|
||||
|
||||
var meta config.DockerHostMetadata
|
||||
if err := json.NewDecoder(r.Body).Decode(&meta); err != nil {
|
||||
http.Error(w, "Invalid request body", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
// Validate URL if provided
|
||||
if meta.CustomURL != "" {
|
||||
// Parse and validate the URL
|
||||
parsedURL, err := url.Parse(meta.CustomURL)
|
||||
if err != nil {
|
||||
http.Error(w, "Invalid URL format: "+err.Error(), http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
// Check scheme
|
||||
if parsedURL.Scheme != "http" && parsedURL.Scheme != "https" {
|
||||
http.Error(w, "URL must use http:// or https:// scheme", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
// Check host is present and valid
|
||||
if parsedURL.Host == "" {
|
||||
http.Error(w, "Invalid URL: missing host/domain (e.g., use https://192.168.1.100:9000 or https://portainer.local)", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
// Check for incomplete URLs like "https://portainer."
|
||||
if strings.HasSuffix(parsedURL.Host, ".") && !strings.Contains(parsedURL.Host, "..") {
|
||||
http.Error(w, "Incomplete URL: '"+meta.CustomURL+"' - please enter a complete domain or IP address", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// Get existing metadata to merge with new data
|
||||
existing := h.store.GetHostMetadata(hostID)
|
||||
if existing != nil {
|
||||
// Merge: only update fields that are provided
|
||||
if meta.CustomDisplayName != "" || existing.CustomDisplayName != "" {
|
||||
if meta.CustomDisplayName == "" {
|
||||
meta.CustomDisplayName = existing.CustomDisplayName
|
||||
}
|
||||
}
|
||||
// CustomURL can be explicitly cleared, so we don't merge it unless updating
|
||||
if meta.Notes == nil && existing.Notes != nil {
|
||||
meta.Notes = existing.Notes
|
||||
}
|
||||
}
|
||||
|
||||
if err := h.store.SetHostMetadata(hostID, &meta); err != nil {
|
||||
log.Error().Err(err).Str("hostID", hostID).Msg("Failed to save Docker host metadata")
|
||||
// Provide more specific error message
|
||||
errMsg := "Failed to save metadata"
|
||||
if strings.Contains(err.Error(), "permission") {
|
||||
errMsg = "Permission denied - check file permissions"
|
||||
} else if strings.Contains(err.Error(), "no space") {
|
||||
errMsg = "Disk full - cannot save metadata"
|
||||
}
|
||||
http.Error(w, errMsg, http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
log.Info().Str("hostID", hostID).Str("url", meta.CustomURL).Msg("Updated Docker host metadata")
|
||||
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
json.NewEncoder(w).Encode(&meta)
|
||||
}
|
||||
|
||||
// HandleDeleteHostMetadata removes metadata for a Docker host
|
||||
func (h *DockerMetadataHandler) HandleDeleteHostMetadata(w http.ResponseWriter, r *http.Request) {
|
||||
if r.Method != http.MethodDelete {
|
||||
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
|
||||
return
|
||||
}
|
||||
|
||||
hostID := strings.TrimPrefix(r.URL.Path, "/api/docker/hosts/metadata/")
|
||||
if hostID == "" || hostID == "metadata" {
|
||||
http.Error(w, "Host ID required", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
if err := h.store.SetHostMetadata(hostID, nil); err != nil {
|
||||
log.Error().Err(err).Str("hostID", hostID).Msg("Failed to delete Docker host metadata")
|
||||
http.Error(w, "Failed to delete metadata", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
log.Info().Str("hostID", hostID).Msg("Deleted Docker host metadata")
|
||||
|
||||
w.WriteHeader(http.StatusNoContent)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,9 @@ type DockerMetadata struct {
|
|||
|
||||
// DockerHostMetadata holds additional metadata for a Docker host
|
||||
type DockerHostMetadata struct {
|
||||
CustomDisplayName string `json:"customDisplayName,omitempty"` // User-defined custom display name
|
||||
CustomDisplayName string `json:"customDisplayName,omitempty"` // User-defined custom display name
|
||||
CustomURL string `json:"customUrl,omitempty"` // Custom URL for administration (e.g., Portainer)
|
||||
Notes []string `json:"notes,omitempty"` // User annotations for AI context
|
||||
}
|
||||
|
||||
// dockerMetadataFile represents the on-disk format for Docker metadata
|
||||
|
|
@ -107,8 +109,8 @@ func (s *DockerMetadataStore) SetHostMetadata(hostID string, meta *DockerHostMet
|
|||
s.mu.Lock()
|
||||
defer s.mu.Unlock()
|
||||
|
||||
if meta == nil || meta.CustomDisplayName == "" {
|
||||
// If metadata is nil or custom display name is empty, delete the entry
|
||||
// If metadata is nil or all fields are empty, delete the entry
|
||||
if meta == nil || (meta.CustomDisplayName == "" && meta.CustomURL == "" && len(meta.Notes) == 0) {
|
||||
delete(s.hostMetadata, hostID)
|
||||
} else {
|
||||
s.hostMetadata[hostID] = meta
|
||||
|
|
@ -116,6 +118,7 @@ func (s *DockerMetadataStore) SetHostMetadata(hostID string, meta *DockerHostMet
|
|||
|
||||
// Save to disk
|
||||
return s.save()
|
||||
|
||||
}
|
||||
|
||||
// Set updates or creates metadata for a Docker resource
|
||||
|
|
|
|||
Loading…
Reference in a new issue