style(hosts,docker): Move search bar to its own row above filters
- Consistent with Kubernetes page layout - Search bar now takes full width on top row - Filter toggles on second row below search
This commit is contained in:
rcourtman
parent
fa5fde56e6
commit
ca8cd0e3b4
2 changed files with 400 additions and 406 deletions
|
|
@ -107,199 +107,199 @@ export const DockerFilter: Component<DockerFilterProps> = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card class="docker-filter mb-3" padding="sm">
|
<Card class="docker-filter mb-3" padding="sm">
|
||||||
<div class="flex flex-col lg:flex-row gap-3">
|
<div class="flex flex-col gap-3">
|
||||||
<div class="flex gap-2 flex-1 items-center">
|
{/* Search - full width on its own row */}
|
||||||
<div class="relative flex-1">
|
<div class="relative">
|
||||||
<input
|
<input
|
||||||
ref={(el) => {
|
ref={(el) => {
|
||||||
searchInputEl = el;
|
searchInputEl = el;
|
||||||
props.searchInputRef?.(el);
|
props.searchInputRef?.(el);
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search containers or host:hostname"
|
placeholder="Search containers or host:hostname"
|
||||||
value={props.search()}
|
value={props.search()}
|
||||||
onInput={(e) => props.setSearch(e.currentTarget.value)}
|
onInput={(e) => props.setSearch(e.currentTarget.value)}
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
commitSearchToHistory(e.currentTarget.value);
|
commitSearchToHistory(e.currentTarget.value);
|
||||||
closeHistory();
|
closeHistory();
|
||||||
} else if (e.key === 'Escape') {
|
} else if (e.key === 'Escape') {
|
||||||
props.setSearch('');
|
props.setSearch('');
|
||||||
closeHistory();
|
closeHistory();
|
||||||
e.currentTarget.blur();
|
e.currentTarget.blur();
|
||||||
} else if (e.key === 'ArrowDown' && searchHistory().length > 0) {
|
} else if (e.key === 'ArrowDown' && searchHistory().length > 0) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setIsHistoryOpen(true);
|
setIsHistoryOpen(true);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onBlur={(e) => {
|
onBlur={(e) => {
|
||||||
if (suppressBlurCommit) return;
|
if (suppressBlurCommit) return;
|
||||||
const next = e.relatedTarget as HTMLElement | null;
|
const next = e.relatedTarget as HTMLElement | null;
|
||||||
const interactingWithHistory = next
|
const interactingWithHistory = next
|
||||||
? historyMenuRef?.contains(next) || historyToggleRef?.contains(next)
|
? historyMenuRef?.contains(next) || historyToggleRef?.contains(next)
|
||||||
: false;
|
: false;
|
||||||
const interactingWithTips =
|
const interactingWithTips =
|
||||||
next?.getAttribute('aria-controls') === 'container-search-help';
|
next?.getAttribute('aria-controls') === 'container-search-help';
|
||||||
if (!interactingWithHistory && !interactingWithTips) {
|
if (!interactingWithHistory && !interactingWithTips) {
|
||||||
commitSearchToHistory(e.currentTarget.value);
|
commitSearchToHistory(e.currentTarget.value);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
class="w-full pl-9 pr-16 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all"
|
class="w-full pl-9 pr-16 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all"
|
||||||
title="Search containers by name, image, ID, or host"
|
title="Search containers by name, image, ID, or host"
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
class="absolute left-3 top-2 h-4 w-4 text-gray-400 dark:text-gray-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||||
/>
|
/>
|
||||||
<svg
|
</svg>
|
||||||
class="absolute left-3 top-2 h-4 w-4 text-gray-400 dark:text-gray-500"
|
<Show when={props.search()}>
|
||||||
fill="none"
|
<button
|
||||||
viewBox="0 0 24 24"
|
type="button"
|
||||||
stroke="currentColor"
|
class="absolute right-9 top-1/2 -translate-y-1/2 transform text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||||
|
onClick={() => props.setSearch('')}
|
||||||
|
onMouseDown={markSuppressCommit}
|
||||||
|
aria-label="Clear search"
|
||||||
|
title="Clear search"
|
||||||
>
|
>
|
||||||
<path
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
stroke-linecap="round"
|
<path
|
||||||
stroke-linejoin="round"
|
stroke-linecap="round"
|
||||||
stroke-width="2"
|
stroke-linejoin="round"
|
||||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
stroke-width="2"
|
||||||
/>
|
d="M6 18L18 6M6 6l12 12"
|
||||||
</svg>
|
/>
|
||||||
<Show when={props.search()}>
|
</svg>
|
||||||
<button
|
</button>
|
||||||
type="button"
|
</Show>
|
||||||
class="absolute right-9 top-1/2 -translate-y-1/2 transform text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
<div class="absolute inset-y-0 right-2 flex items-center gap-1">
|
||||||
onClick={() => props.setSearch('')}
|
<button
|
||||||
onMouseDown={markSuppressCommit}
|
ref={(el) => (historyToggleRef = el)}
|
||||||
aria-label="Clear search"
|
type="button"
|
||||||
title="Clear search"
|
class="flex h-6 w-6 items-center justify-center rounded-lg border border-transparent text-gray-400 transition-colors hover:border-gray-200 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-1 focus:ring-offset-white dark:text-gray-500 dark:hover:border-gray-700 dark:hover:text-gray-200 dark:focus:ring-blue-400/40 dark:focus:ring-offset-gray-900"
|
||||||
>
|
onClick={() =>
|
||||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
setIsHistoryOpen((prev) => {
|
||||||
<path
|
const next = !prev;
|
||||||
stroke-linecap="round"
|
if (!next) {
|
||||||
stroke-linejoin="round"
|
queueMicrotask(() => historyToggleRef?.blur());
|
||||||
stroke-width="2"
|
|
||||||
d="M6 18L18 6M6 6l12 12"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</Show>
|
|
||||||
<div class="absolute inset-y-0 right-2 flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
ref={(el) => (historyToggleRef = el)}
|
|
||||||
type="button"
|
|
||||||
class="flex h-6 w-6 items-center justify-center rounded-lg border border-transparent text-gray-400 transition-colors hover:border-gray-200 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-1 focus:ring-offset-white dark:text-gray-500 dark:hover:border-gray-700 dark:hover:text-gray-200 dark:focus:ring-blue-400/40 dark:focus:ring-offset-gray-900"
|
|
||||||
onClick={() =>
|
|
||||||
setIsHistoryOpen((prev) => {
|
|
||||||
const next = !prev;
|
|
||||||
if (!next) {
|
|
||||||
queueMicrotask(() => historyToggleRef?.blur());
|
|
||||||
}
|
|
||||||
return next;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onMouseDown={markSuppressCommit}
|
|
||||||
aria-haspopup="listbox"
|
|
||||||
aria-expanded={isHistoryOpen()}
|
|
||||||
title={
|
|
||||||
searchHistory().length > 0
|
|
||||||
? 'Show recent searches'
|
|
||||||
: 'No recent searches yet'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M12 8v4l2.5 1.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span class="sr-only">Show search history</span>
|
|
||||||
</button>
|
|
||||||
<SearchTipsPopover
|
|
||||||
popoverId="container-search-help"
|
|
||||||
intro="Filter containers quickly"
|
|
||||||
tips={[
|
|
||||||
{ code: 'name:api', description: 'Match containers with "api" in the name' },
|
|
||||||
{ code: 'image:postgres', description: 'Find containers running a specific image' },
|
|
||||||
{ code: 'host:prod', description: 'Show containers on a host' },
|
|
||||||
{ code: 'state:running', description: 'Running containers only' },
|
|
||||||
]}
|
|
||||||
triggerVariant="icon"
|
|
||||||
buttonLabel="Search tips"
|
|
||||||
openOnHover
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Show when={isHistoryOpen()}>
|
|
||||||
<div
|
|
||||||
ref={(el) => (historyMenuRef = el)}
|
|
||||||
class="absolute left-0 right-0 top-full z-50 mt-2 w-full overflow-hidden rounded-lg border border-gray-200 bg-white text-sm shadow-xl dark:border-gray-700 dark:bg-gray-800"
|
|
||||||
role="listbox"
|
|
||||||
>
|
|
||||||
<Show
|
|
||||||
when={searchHistory().length > 0}
|
|
||||||
fallback={
|
|
||||||
<div class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
Searches you run will appear here.
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
>
|
return next;
|
||||||
<div class="max-h-52 overflow-y-auto py-1">
|
})
|
||||||
<For each={searchHistory()}>
|
}
|
||||||
{(entry) => (
|
onMouseDown={markSuppressCommit}
|
||||||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20">
|
aria-haspopup="listbox"
|
||||||
<button
|
aria-expanded={isHistoryOpen()}
|
||||||
type="button"
|
title={
|
||||||
class="flex-1 truncate pr-2 text-left text-sm text-gray-700 transition-colors hover:text-blue-600 focus:outline-none dark:text-gray-200 dark:hover:text-blue-300"
|
searchHistory().length > 0
|
||||||
onClick={() => {
|
? 'Show recent searches'
|
||||||
props.setSearch(entry);
|
: 'No recent searches yet'
|
||||||
commitSearchToHistory(entry);
|
}
|
||||||
setIsHistoryOpen(false);
|
>
|
||||||
focusSearchInput();
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
}}
|
<path
|
||||||
onMouseDown={markSuppressCommit}
|
stroke-linecap="round"
|
||||||
>
|
stroke-linejoin="round"
|
||||||
{entry}
|
stroke-width="2"
|
||||||
</button>
|
d="M12 8v4l2.5 1.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
<button
|
/>
|
||||||
type="button"
|
</svg>
|
||||||
class="ml-1 flex h-6 w-6 items-center justify-center rounded text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-1 focus:ring-offset-white dark:text-gray-500 dark:hover:bg-gray-700/70 dark:hover:text-gray-200 dark:focus:ring-blue-400/40 dark:focus:ring-offset-gray-900"
|
<span class="sr-only">Show search history</span>
|
||||||
title="Remove from history"
|
</button>
|
||||||
onClick={() => deleteHistoryEntry(entry)}
|
<SearchTipsPopover
|
||||||
onMouseDown={markSuppressCommit}
|
popoverId="container-search-help"
|
||||||
>
|
intro="Filter containers quickly"
|
||||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
tips={[
|
||||||
<path
|
{ code: 'name:api', description: 'Match containers with "api" in the name' },
|
||||||
stroke-linecap="round"
|
{ code: 'image:postgres', description: 'Find containers running a specific image' },
|
||||||
stroke-linejoin="round"
|
{ code: 'host:prod', description: 'Show containers on a host' },
|
||||||
stroke-width="2"
|
{ code: 'state:running', description: 'Running containers only' },
|
||||||
d="M6 18L18 6M6 6l12 12"
|
]}
|
||||||
/>
|
triggerVariant="icon"
|
||||||
</svg>
|
buttonLabel="Search tips"
|
||||||
<span class="sr-only">Remove from history</span>
|
openOnHover
|
||||||
</button>
|
/>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="flex w-full items-center justify-center gap-2 border-t border-gray-200 px-3 py-2 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700/80 dark:hover:text-gray-200"
|
|
||||||
onClick={clearHistory}
|
|
||||||
onMouseDown={markSuppressCommit}
|
|
||||||
>
|
|
||||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3m-9 0h12"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Clear history
|
|
||||||
</button>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Show when={isHistoryOpen()}>
|
||||||
|
<div
|
||||||
|
ref={(el) => (historyMenuRef = el)}
|
||||||
|
class="absolute left-0 right-0 top-full z-50 mt-2 w-full overflow-hidden rounded-lg border border-gray-200 bg-white text-sm shadow-xl dark:border-gray-700 dark:bg-gray-800"
|
||||||
|
role="listbox"
|
||||||
|
>
|
||||||
|
<Show
|
||||||
|
when={searchHistory().length > 0}
|
||||||
|
fallback={
|
||||||
|
<div class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
Searches you run will appear here.
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div class="max-h-52 overflow-y-auto py-1">
|
||||||
|
<For each={searchHistory()}>
|
||||||
|
{(entry) => (
|
||||||
|
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex-1 truncate pr-2 text-left text-sm text-gray-700 transition-colors hover:text-blue-600 focus:outline-none dark:text-gray-200 dark:hover:text-blue-300"
|
||||||
|
onClick={() => {
|
||||||
|
props.setSearch(entry);
|
||||||
|
commitSearchToHistory(entry);
|
||||||
|
setIsHistoryOpen(false);
|
||||||
|
focusSearchInput();
|
||||||
|
}}
|
||||||
|
onMouseDown={markSuppressCommit}
|
||||||
|
>
|
||||||
|
{entry}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="ml-1 flex h-6 w-6 items-center justify-center rounded text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-1 focus:ring-offset-white dark:text-gray-500 dark:hover:bg-gray-700/70 dark:hover:text-gray-200 dark:focus:ring-blue-400/40 dark:focus:ring-offset-gray-900"
|
||||||
|
title="Remove from history"
|
||||||
|
onClick={() => deleteHistoryEntry(entry)}
|
||||||
|
onMouseDown={markSuppressCommit}
|
||||||
|
>
|
||||||
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">Remove from history</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex w-full items-center justify-center gap-2 border-t border-gray-200 px-3 py-2 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700/80 dark:hover:text-gray-200"
|
||||||
|
onClick={clearHistory}
|
||||||
|
onMouseDown={markSuppressCommit}
|
||||||
|
>
|
||||||
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3m-9 0h12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Clear history
|
||||||
|
</button>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Filters - second row */}
|
||||||
<div class="flex flex-wrap items-center gap-2">
|
<div class="flex flex-wrap items-center gap-2">
|
||||||
<Show when={props.statusFilter && props.setStatusFilter}>
|
<Show when={props.statusFilter && props.setStatusFilter}>
|
||||||
<div class="inline-flex rounded-lg bg-gray-100 p-0.5 dark:bg-gray-700">
|
<div class="inline-flex rounded-lg bg-gray-100 p-0.5 dark:bg-gray-700">
|
||||||
|
|
@ -307,11 +307,10 @@ export const DockerFilter: Component<DockerFilterProps> = (props) => {
|
||||||
type="button"
|
type="button"
|
||||||
aria-pressed={props.statusFilter?.() === 'all'}
|
aria-pressed={props.statusFilter?.() === 'all'}
|
||||||
onClick={() => props.setStatusFilter?.('all')}
|
onClick={() => props.setStatusFilter?.('all')}
|
||||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter?.() === 'all'
|
||||||
props.statusFilter?.() === 'all'
|
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
}`}
|
||||||
}`}
|
|
||||||
title="Show all hosts"
|
title="Show all hosts"
|
||||||
>
|
>
|
||||||
All
|
All
|
||||||
|
|
@ -322,11 +321,10 @@ export const DockerFilter: Component<DockerFilterProps> = (props) => {
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
props.setStatusFilter?.(props.statusFilter?.() === 'online' ? 'all' : 'online')
|
props.setStatusFilter?.(props.statusFilter?.() === 'online' ? 'all' : 'online')
|
||||||
}
|
}
|
||||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter?.() === 'online'
|
||||||
props.statusFilter?.() === 'online'
|
? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
|
||||||
? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
}`}
|
||||||
}`}
|
|
||||||
title="Show online hosts only"
|
title="Show online hosts only"
|
||||||
>
|
>
|
||||||
Online
|
Online
|
||||||
|
|
@ -339,11 +337,10 @@ export const DockerFilter: Component<DockerFilterProps> = (props) => {
|
||||||
props.statusFilter?.() === 'degraded' ? 'all' : 'degraded',
|
props.statusFilter?.() === 'degraded' ? 'all' : 'degraded',
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter?.() === 'degraded'
|
||||||
props.statusFilter?.() === 'degraded'
|
? 'bg-white dark:bg-gray-800 text-amber-600 dark:text-amber-400 shadow-sm'
|
||||||
? 'bg-white dark:bg-gray-800 text-amber-600 dark:text-amber-400 shadow-sm'
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
}`}
|
||||||
}`}
|
|
||||||
title="Show degraded hosts only"
|
title="Show degraded hosts only"
|
||||||
>
|
>
|
||||||
Degraded
|
Degraded
|
||||||
|
|
@ -356,11 +353,10 @@ export const DockerFilter: Component<DockerFilterProps> = (props) => {
|
||||||
props.statusFilter?.() === 'offline' ? 'all' : 'offline',
|
props.statusFilter?.() === 'offline' ? 'all' : 'offline',
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter?.() === 'offline'
|
||||||
props.statusFilter?.() === 'offline'
|
? 'bg-white dark:bg-gray-800 text-red-600 dark:text-red-400 shadow-sm'
|
||||||
? 'bg-white dark:bg-gray-800 text-red-600 dark:text-red-400 shadow-sm'
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
}`}
|
||||||
}`}
|
|
||||||
title="Show offline hosts only"
|
title="Show offline hosts only"
|
||||||
>
|
>
|
||||||
Offline
|
Offline
|
||||||
|
|
@ -373,22 +369,20 @@ export const DockerFilter: Component<DockerFilterProps> = (props) => {
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => props.setGroupingMode?.('grouped')}
|
onClick={() => props.setGroupingMode?.('grouped')}
|
||||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupingMode?.() === 'grouped'
|
||||||
props.groupingMode?.() === 'grouped'
|
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
Grouped
|
Grouped
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => props.setGroupingMode?.('flat')}
|
onClick={() => props.setGroupingMode?.('flat')}
|
||||||
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
|
class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupingMode?.() === 'flat'
|
||||||
props.groupingMode?.() === 'flat'
|
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
||||||
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
||||||
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
|
}`}
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
List
|
List
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -438,6 +432,6 @@ export const DockerFilter: Component<DockerFilterProps> = (props) => {
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card >
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -109,199 +109,199 @@ export const HostsFilter: Component<HostsFilterProps> = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card class="hosts-filter mb-3" padding="sm">
|
<Card class="hosts-filter mb-3" padding="sm">
|
||||||
<div class="flex flex-col lg:flex-row gap-3">
|
<div class="flex flex-col gap-3">
|
||||||
<div class="flex gap-2 flex-1 items-center">
|
{/* Search - full width on its own row */}
|
||||||
<div class="relative flex-1">
|
<div class="relative">
|
||||||
<input
|
<input
|
||||||
ref={(el) => {
|
ref={(el) => {
|
||||||
searchInputEl = el;
|
searchInputEl = el;
|
||||||
props.searchInputRef?.(el);
|
props.searchInputRef?.(el);
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search hosts by hostname, platform, or OS..."
|
placeholder="Search hosts by hostname, platform, or OS..."
|
||||||
value={props.search()}
|
value={props.search()}
|
||||||
onInput={(e) => props.setSearch(e.currentTarget.value)}
|
onInput={(e) => props.setSearch(e.currentTarget.value)}
|
||||||
onKeyDown={(e) => {
|
onKeyDown={(e) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
commitSearchToHistory(e.currentTarget.value);
|
commitSearchToHistory(e.currentTarget.value);
|
||||||
closeHistory();
|
closeHistory();
|
||||||
} else if (e.key === 'Escape') {
|
} else if (e.key === 'Escape') {
|
||||||
props.setSearch('');
|
props.setSearch('');
|
||||||
closeHistory();
|
closeHistory();
|
||||||
e.currentTarget.blur();
|
e.currentTarget.blur();
|
||||||
} else if (e.key === 'ArrowDown' && searchHistory().length > 0) {
|
} else if (e.key === 'ArrowDown' && searchHistory().length > 0) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setIsHistoryOpen(true);
|
setIsHistoryOpen(true);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onBlur={(e) => {
|
onBlur={(e) => {
|
||||||
if (suppressBlurCommit) return;
|
if (suppressBlurCommit) return;
|
||||||
const next = e.relatedTarget as HTMLElement | null;
|
const next = e.relatedTarget as HTMLElement | null;
|
||||||
const interactingWithHistory = next
|
const interactingWithHistory = next
|
||||||
? historyMenuRef?.contains(next) || historyToggleRef?.contains(next)
|
? historyMenuRef?.contains(next) || historyToggleRef?.contains(next)
|
||||||
: false;
|
: false;
|
||||||
const interactingWithTips =
|
const interactingWithTips =
|
||||||
next?.getAttribute('aria-controls') === 'hosts-search-help';
|
next?.getAttribute('aria-controls') === 'hosts-search-help';
|
||||||
if (!interactingWithHistory && !interactingWithTips) {
|
if (!interactingWithHistory && !interactingWithTips) {
|
||||||
commitSearchToHistory(e.currentTarget.value);
|
commitSearchToHistory(e.currentTarget.value);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
class="w-full pl-9 pr-16 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all"
|
class="w-full pl-9 pr-16 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all"
|
||||||
title="Search hosts by hostname, platform, or OS"
|
title="Search hosts by hostname, platform, or OS"
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
class="absolute left-3 top-2 h-4 w-4 text-gray-400 dark:text-gray-500"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||||
/>
|
/>
|
||||||
<svg
|
</svg>
|
||||||
class="absolute left-3 top-2 h-4 w-4 text-gray-400 dark:text-gray-500"
|
<Show when={props.search()}>
|
||||||
fill="none"
|
<button
|
||||||
viewBox="0 0 24 24"
|
type="button"
|
||||||
stroke="currentColor"
|
class="absolute right-9 top-1/2 -translate-y-1/2 transform text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
||||||
|
onClick={() => props.setSearch('')}
|
||||||
|
onMouseDown={markSuppressCommit}
|
||||||
|
aria-label="Clear search"
|
||||||
|
title="Clear search"
|
||||||
>
|
>
|
||||||
<path
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
stroke-linecap="round"
|
<path
|
||||||
stroke-linejoin="round"
|
stroke-linecap="round"
|
||||||
stroke-width="2"
|
stroke-linejoin="round"
|
||||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
stroke-width="2"
|
||||||
/>
|
d="M6 18L18 6M6 6l12 12"
|
||||||
</svg>
|
/>
|
||||||
<Show when={props.search()}>
|
</svg>
|
||||||
<button
|
</button>
|
||||||
type="button"
|
</Show>
|
||||||
class="absolute right-9 top-1/2 -translate-y-1/2 transform text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
<div class="absolute inset-y-0 right-2 flex items-center gap-1">
|
||||||
onClick={() => props.setSearch('')}
|
<button
|
||||||
onMouseDown={markSuppressCommit}
|
ref={(el) => (historyToggleRef = el)}
|
||||||
aria-label="Clear search"
|
type="button"
|
||||||
title="Clear search"
|
class="flex h-6 w-6 items-center justify-center rounded-lg border border-transparent text-gray-400 transition-colors hover:border-gray-200 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-1 focus:ring-offset-white dark:text-gray-500 dark:hover:border-gray-700 dark:hover:text-gray-200 dark:focus:ring-blue-400/40 dark:focus:ring-offset-gray-900"
|
||||||
>
|
onClick={() =>
|
||||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
setIsHistoryOpen((prev) => {
|
||||||
<path
|
const next = !prev;
|
||||||
stroke-linecap="round"
|
if (!next) {
|
||||||
stroke-linejoin="round"
|
queueMicrotask(() => historyToggleRef?.blur());
|
||||||
stroke-width="2"
|
|
||||||
d="M6 18L18 6M6 6l12 12"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</Show>
|
|
||||||
<div class="absolute inset-y-0 right-2 flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
ref={(el) => (historyToggleRef = el)}
|
|
||||||
type="button"
|
|
||||||
class="flex h-6 w-6 items-center justify-center rounded-lg border border-transparent text-gray-400 transition-colors hover:border-gray-200 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-1 focus:ring-offset-white dark:text-gray-500 dark:hover:border-gray-700 dark:hover:text-gray-200 dark:focus:ring-blue-400/40 dark:focus:ring-offset-gray-900"
|
|
||||||
onClick={() =>
|
|
||||||
setIsHistoryOpen((prev) => {
|
|
||||||
const next = !prev;
|
|
||||||
if (!next) {
|
|
||||||
queueMicrotask(() => historyToggleRef?.blur());
|
|
||||||
}
|
|
||||||
return next;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onMouseDown={markSuppressCommit}
|
|
||||||
aria-haspopup="listbox"
|
|
||||||
aria-expanded={isHistoryOpen()}
|
|
||||||
title={
|
|
||||||
searchHistory().length > 0
|
|
||||||
? 'Show recent searches'
|
|
||||||
: 'No recent searches yet'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M12 8v4l2.5 1.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span class="sr-only">Show search history</span>
|
|
||||||
</button>
|
|
||||||
<SearchTipsPopover
|
|
||||||
popoverId="hosts-search-help"
|
|
||||||
intro="Filter hosts quickly"
|
|
||||||
tips={[
|
|
||||||
{ code: 'hostname', description: 'Match hosts by hostname' },
|
|
||||||
{ code: 'linux', description: 'Find Linux hosts' },
|
|
||||||
{ code: 'darwin', description: 'Find macOS hosts' },
|
|
||||||
{ code: 'windows', description: 'Find Windows hosts' },
|
|
||||||
]}
|
|
||||||
triggerVariant="icon"
|
|
||||||
buttonLabel="Search tips"
|
|
||||||
openOnHover
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Show when={isHistoryOpen()}>
|
|
||||||
<div
|
|
||||||
ref={(el) => (historyMenuRef = el)}
|
|
||||||
class="absolute left-0 right-0 top-full z-50 mt-2 w-full overflow-hidden rounded-lg border border-gray-200 bg-white text-sm shadow-xl dark:border-gray-700 dark:bg-gray-800"
|
|
||||||
role="listbox"
|
|
||||||
>
|
|
||||||
<Show
|
|
||||||
when={searchHistory().length > 0}
|
|
||||||
fallback={
|
|
||||||
<div class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
Searches you run will appear here.
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
>
|
return next;
|
||||||
<div class="max-h-52 overflow-y-auto py-1">
|
})
|
||||||
<For each={searchHistory()}>
|
}
|
||||||
{(entry) => (
|
onMouseDown={markSuppressCommit}
|
||||||
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20">
|
aria-haspopup="listbox"
|
||||||
<button
|
aria-expanded={isHistoryOpen()}
|
||||||
type="button"
|
title={
|
||||||
class="flex-1 truncate pr-2 text-left text-sm text-gray-700 transition-colors hover:text-blue-600 focus:outline-none dark:text-gray-200 dark:hover:text-blue-300"
|
searchHistory().length > 0
|
||||||
onClick={() => {
|
? 'Show recent searches'
|
||||||
props.setSearch(entry);
|
: 'No recent searches yet'
|
||||||
commitSearchToHistory(entry);
|
}
|
||||||
setIsHistoryOpen(false);
|
>
|
||||||
focusSearchInput();
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
}}
|
<path
|
||||||
onMouseDown={markSuppressCommit}
|
stroke-linecap="round"
|
||||||
>
|
stroke-linejoin="round"
|
||||||
{entry}
|
stroke-width="2"
|
||||||
</button>
|
d="M12 8v4l2.5 1.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
<button
|
/>
|
||||||
type="button"
|
</svg>
|
||||||
class="ml-1 flex h-6 w-6 items-center justify-center rounded text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-1 focus:ring-offset-white dark:text-gray-500 dark:hover:bg-gray-700/70 dark:hover:text-gray-200 dark:focus:ring-blue-400/40 dark:focus:ring-offset-gray-900"
|
<span class="sr-only">Show search history</span>
|
||||||
title="Remove from history"
|
</button>
|
||||||
onClick={() => deleteHistoryEntry(entry)}
|
<SearchTipsPopover
|
||||||
onMouseDown={markSuppressCommit}
|
popoverId="hosts-search-help"
|
||||||
>
|
intro="Filter hosts quickly"
|
||||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
tips={[
|
||||||
<path
|
{ code: 'hostname', description: 'Match hosts by hostname' },
|
||||||
stroke-linecap="round"
|
{ code: 'linux', description: 'Find Linux hosts' },
|
||||||
stroke-linejoin="round"
|
{ code: 'darwin', description: 'Find macOS hosts' },
|
||||||
stroke-width="2"
|
{ code: 'windows', description: 'Find Windows hosts' },
|
||||||
d="M6 18L18 6M6 6l12 12"
|
]}
|
||||||
/>
|
triggerVariant="icon"
|
||||||
</svg>
|
buttonLabel="Search tips"
|
||||||
<span class="sr-only">Remove from history</span>
|
openOnHover
|
||||||
</button>
|
/>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</For>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="flex w-full items-center justify-center gap-2 border-t border-gray-200 px-3 py-2 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700/80 dark:hover:text-gray-200"
|
|
||||||
onClick={clearHistory}
|
|
||||||
onMouseDown={markSuppressCommit}
|
|
||||||
>
|
|
||||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3m-9 0h12"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Clear history
|
|
||||||
</button>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Show when={isHistoryOpen()}>
|
||||||
|
<div
|
||||||
|
ref={(el) => (historyMenuRef = el)}
|
||||||
|
class="absolute left-0 right-0 top-full z-50 mt-2 w-full overflow-hidden rounded-lg border border-gray-200 bg-white text-sm shadow-xl dark:border-gray-700 dark:bg-gray-800"
|
||||||
|
role="listbox"
|
||||||
|
>
|
||||||
|
<Show
|
||||||
|
when={searchHistory().length > 0}
|
||||||
|
fallback={
|
||||||
|
<div class="px-3 py-2 text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
Searches you run will appear here.
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div class="max-h-52 overflow-y-auto py-1">
|
||||||
|
<For each={searchHistory()}>
|
||||||
|
{(entry) => (
|
||||||
|
<div class="flex items-center justify-between px-2 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/20">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex-1 truncate pr-2 text-left text-sm text-gray-700 transition-colors hover:text-blue-600 focus:outline-none dark:text-gray-200 dark:hover:text-blue-300"
|
||||||
|
onClick={() => {
|
||||||
|
props.setSearch(entry);
|
||||||
|
commitSearchToHistory(entry);
|
||||||
|
setIsHistoryOpen(false);
|
||||||
|
focusSearchInput();
|
||||||
|
}}
|
||||||
|
onMouseDown={markSuppressCommit}
|
||||||
|
>
|
||||||
|
{entry}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="ml-1 flex h-6 w-6 items-center justify-center rounded text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-1 focus:ring-offset-white dark:text-gray-500 dark:hover:bg-gray-700/70 dark:hover:text-gray-200 dark:focus:ring-blue-400/40 dark:focus:ring-offset-gray-900"
|
||||||
|
title="Remove from history"
|
||||||
|
onClick={() => deleteHistoryEntry(entry)}
|
||||||
|
onMouseDown={markSuppressCommit}
|
||||||
|
>
|
||||||
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span class="sr-only">Remove from history</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex w-full items-center justify-center gap-2 border-t border-gray-200 px-3 py-2 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700/80 dark:hover:text-gray-200"
|
||||||
|
onClick={clearHistory}
|
||||||
|
onMouseDown={markSuppressCommit}
|
||||||
|
>
|
||||||
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3m-9 0h12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Clear history
|
||||||
|
</button>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Filters - second row */}
|
||||||
<div class="flex flex-wrap items-center gap-2">
|
<div class="flex flex-wrap items-center gap-2">
|
||||||
<div class="inline-flex rounded-lg bg-gray-100 p-0.5 dark:bg-gray-700">
|
<div class="inline-flex rounded-lg bg-gray-100 p-0.5 dark:bg-gray-700">
|
||||||
<button
|
<button
|
||||||
|
|
@ -413,6 +413,6 @@ export const HostsFilter: Component<HostsFilterProps> = (props) => {
|
||||||
</Show>
|
</Show>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card >
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue