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

Add Add Host shortcut to Docker hosts list

Browse source
This commit is contained in:
rcourtman 2025-10-14 13:24:24 +00:00
parent 5cf0697157
commit 86b44bbed3
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend-modern/src/components/Docker/DockerHosts.tsx
View file

@ -1,5 +1,6 @@
import type { Component } from 'solid-js'; import type { Component } from 'solid-js';
import { For, Show, createMemo, createSignal, createEffect, on } from 'solid-js'; import { For, Show, createMemo, createSignal, createEffect, on } from 'solid-js';
import { useNavigate } from '@solidjs/router';
import type { DockerHost, DockerContainer, Alert } from '@/types/api'; import type { DockerHost, DockerContainer, Alert } from '@/types/api';
import { formatBytes, formatRelativeTime, formatUptime } from '@/utils/format'; import { formatBytes, formatRelativeTime, formatUptime } from '@/utils/format';
import { Card } from '@/components/shared/Card'; import { Card } from '@/components/shared/Card';
@ -384,6 +385,7 @@ const DockerContainerRow: Component<{
}; };
export const DockerHosts: Component<DockerHostsProps> = (props) => { export const DockerHosts: Component<DockerHostsProps> = (props) => {
const navigate = useNavigate();
const { initialDataReceived, reconnecting, connected } = useWebSocket(); const { initialDataReceived, reconnecting, connected } = useWebSocket();
const isLoading = createMemo(() => { const isLoading = createMemo(() => {
if (typeof initialDataReceived === 'function') { if (typeof initialDataReceived === 'function') {
@ -624,9 +626,19 @@ export const DockerHosts: Component<DockerHostsProps> = (props) => {
<div class="flex gap-4"> <div class="flex gap-4">
{/* Left: Host List */} {/* Left: Host List */}
<Card padding="none" class="w-72 flex-shrink-0 overflow-hidden"> <Card padding="none" class="w-72 flex-shrink-0 overflow-hidden">
<div class="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700"> <div class="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-start justify-between gap-2">
<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Docker Hosts</h3> <div>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{sortedHosts().length} {sortedHosts().length === 1 ? 'host' : 'hosts'}</p> <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Docker Hosts</h3>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{sortedHosts().length} {sortedHosts().length === 1 ? 'host' : 'hosts'}</p>
</div>
<button
type="button"
onClick={() => navigate('/settings/docker')}
class="inline-flex items-center gap-1 rounded border border-blue-200 dark:border-blue-500/40 bg-white dark:bg-blue-500/10 px-2 py-1 text-[11px] font-medium text-blue-600 dark:text-blue-300 shadow-sm hover:bg-blue-50 dark:hover:bg-blue-500/20 transition-colors"
>
<span class="text-base leading-none">+</span>
<span>Add Host</span>
</button>
</div> </div>
<div class="divide-y divide-gray-200 dark:divide-gray-700"> <div class="divide-y divide-gray-200 dark:divide-gray-700">
<For each={sortedHosts()}> <For each={sortedHosts()}>