mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-10-29 14:45:24 +00:00
release-2.9.1 (#1557)
* fix(sso): send the PKCE verifier for GitHub login (#1534) * fix(remote-desktop): clip cursor overflow without disabling zoom (#1535) * test(remote-desktop): preserve sessions beyond one hour (#1536) * fix(hosts): expose controls for overflowing editor tabs (#1537) * fix(hosts): expose controls for overflowing editor tabs * test(hosts): mock resize observation in admin panel tests * fix(status): skip TCP probes while host sessions are active (#1538) * fix(database): batch session activity persistence (#1539) * docs(api): describe cookie and API key authentication (#1540) * fix(snippets): repair missing note column on SQLite upgrades (#1541) * fix(docker): retain stored SSH credential association (#1543) * fix(file-manager): render transfer toasts without plugin hooks (#1546) * feat(hosts): keep compact row actions inline (#1547) * fix(auth): allow retrying unavailable second-factor interfaces (#1549) * fix(auth): reject unresolved legacy identity provisioning (#1550) * fix(desktop): ship the plugin SDK inside Mac App Store builds (#1551) * fix(tmux): pass full session info to the terminal's session picker (#1552) The tmux.sessions service reduced detected sessions to bare names, but the picker reads session.name, so every entry rendered blank and selecting one sent an empty name, which created a new session instead of attaching. * fix(ssh): read force keyboard-interactive as a boolean when resolving hosts (#1553) The column holds the text "true"/"false", and the resolver passed it through as-is. The string "false" is truthy, so the password provider treated every saved host as forced keyboard-interactive and left the password out. Jump hops are built straight from the resolved host, so a password hop whose server doesn't offer keyboard-interactive failed with "All configured authentication methods failed". * fix(database): batch database saves for bulk host writes (#1554) * fix(database): yield to the event loop between database saves Each SQLite save serializes and encrypts the whole database into new buffers, which V8 only releases once the event loop turns. Boot migrations and bulk host import write plugin settings per host and per key in an awaited loop, so hundreds of full copies piled up and the container ran out of memory. * fix(database): save once per bulk host write instead of once per row On SQLite every repository write force-saves the whole database. Boot plugin data migrations, host defaults materialization and the bulk host routes write one row per host per setting, so they serialized and encrypted the full database hundreds of times in a row. DatabaseSaveTrigger.batched wraps a function so force saves made while it runs collapse into a single save when it finishes. Nested scopes fold into the outer one, and work that outlives its scope saves normally. * feat(hosts): add instance-wide predefined tag suggestions (#1548) * feat(hosts): add shared predefined tag suggestions * style(hosts): format tag catalog routes * test(database): advance fake timers past the save yield (#1555) * fix(i18n): complete Simplified Chinese core and plugin translations (#1542) * fix(i18n): complete Chinese onboarding and navigation labels * fix(i18n): translate remaining Chinese core and plugin interfaces * fix(i18n): translate host editor tab overflow controls * fix(i18n): use consistent Chinese fleet terminology * fix(i18n): localize hardcoded controls and plugin views * fix(i18n): translate built-in homepage widget catalog * test(homepage): follow translated timezone placeholder * fix(i18n): translate plugin-provided homepage widgets * fix(i18n): localize feature settings section titles * fix: 2.8 oidc accounts unable to sign in after upgrading (#1381) * fix: plugins losing the saved ssh login when copying a host (#1391) * fix: fleets, proxmox and automations not getting the host sudo password * fix: host imports running a defaults pass and metrics restart per host (#1384) * fix: high cpu from status probes and full database saves on every sample (#1300) * fix: user data export freezing the server (#1393) * fix: op:// secret references rejected as ssh keys on credentials (#1394) * fix: slow file deletes from the trash lookups on every delete (#1390) * fix: add openapi docs and error handling to host tag routes * test: compare download stream buffers directly so it stops timing out * chore: drop em dash from host row comment * chore: update release notes for 2.9.1 * fix: restore space to add host tags and redesign predefined tags editor * fix: host key silently accepted when the host is missing from the database (#1397) * fix: clearer host login failed status label and fix its translations (#1396) * chore: add host key and status label fixes to release notes * fix: sso and ldap provider dialogs overflowing the screen and using mismatched toggles * chore: increment ver * fix(audit): store plugin entries with no acting user as a null user_id (#1556) Plugin audit entries written outside a request used the literal "system" as user_id. That column references users.id, so the insert was refused (Postgres logs it as an FK violation) and the entry was silently dropped. Write null instead and keep "system" / plugin:<id> in username. * chore: add sso/ldap dialog and audit log fixes to release notes * fix: tunnels and host settings missing from shared hosts on desktop * fix: remote desktop logins missing from shared hosts on desktop * fix: simplify host status to online/offline and keep it live without a refresh * chore: sync Crowdin translations for 2.9.1 --------- Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com>
This commit is contained in:
1 parent
5786eaccbb
commit
6b708106e1
912 files changed
+14220
-2200
No files matched your search
@@ -150,7 +150,7 @@ export function AdminApiKeysSection({
|
||||
<span className="text-accent-brand">*</span>
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g., CI Pipeline"
|
||||
placeholder={t("placeholders.apiKeyName")}
|
||||
value={newKeyName}
|
||||
onChange={(e) => setNewKeyName(e.target.value)}
|
||||
className="text-xs"
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import { X } from "lucide-react";
|
||||
import { getHostTags, saveHostTags } from "@/api/host-tags-api";
|
||||
|
||||
export function AdminHostTags() {
|
||||
const { t } = useTranslation();
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
getHostTags()
|
||||
.then((list) => {
|
||||
if (cancelled) return;
|
||||
setTags(list);
|
||||
setLoaded(true);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) toast.error(t("admin.hostTagsError"));
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
async function save(next: string[]) {
|
||||
const previous = tags;
|
||||
setTags(next);
|
||||
setSaving(true);
|
||||
try {
|
||||
setTags(await saveHostTags(next));
|
||||
window.dispatchEvent(new Event("termix:host-tags-changed"));
|
||||
} catch {
|
||||
setTags(previous);
|
||||
toast.error(t("admin.hostTagsError"));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
function add(raw: string) {
|
||||
const tag = raw.trim();
|
||||
setInput("");
|
||||
if (!tag || tags.includes(tag)) return;
|
||||
void save([...tags, tag]);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label htmlFor="global-host-tags" className="text-xs font-medium">
|
||||
{t("admin.hostTags")}
|
||||
</label>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{t("admin.hostTagsDesc")}
|
||||
</span>
|
||||
<div className="flex flex-wrap items-center gap-1 min-h-9 px-2 py-1 border border-border bg-background focus-within:ring-1 focus-within:ring-ring">
|
||||
{tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] bg-muted border border-border/60 text-foreground"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
type="button"
|
||||
disabled={saving}
|
||||
aria-label={t("common.remove")}
|
||||
onClick={() => void save(tags.filter((tg) => tg !== tag))}
|
||||
className="text-muted-foreground hover:text-destructive ml-0.5"
|
||||
>
|
||||
<X className="size-2.5" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
id="global-host-tags"
|
||||
className="flex-1 min-w-16 text-xs bg-transparent outline-none placeholder:text-muted-foreground/50"
|
||||
placeholder={tags.length === 0 ? t("hosts.addTag") : ""}
|
||||
disabled={!loaded || saving}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onBlur={() => add(input)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.nativeEvent.isComposing) return;
|
||||
if ((e.key === " " || e.key === "Enter") && input.trim()) {
|
||||
e.preventDefault();
|
||||
add(input);
|
||||
} else if (e.key === "Backspace" && !input && tags.length > 0) {
|
||||
void save(tags.slice(0, -1));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -117,7 +117,7 @@ export function AdminSettingsPanel({
|
||||
const [passwordLoginForced, setPasswordLoginForced] = useState(false);
|
||||
const [allowPasswordReset, setAllowPasswordReset] = useState(true);
|
||||
const [sessionTimeout, setSessionTimeout] = useState("24");
|
||||
const [statusInterval, setStatusInterval] = useState("60");
|
||||
const [statusInterval, setStatusInterval] = useState("30");
|
||||
const [logLevel, setLogLevel] = useState("info");
|
||||
const [notificationPrivateEndpoints, setNotificationPrivateEndpoints] =
|
||||
useState<string[]>([]);
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Input } from "@/components/input";
|
||||
import { SettingRow } from "@/components/section-card";
|
||||
import { Database, Lock, RefreshCw, Server, Settings } from "lucide-react";
|
||||
import { AccordionSection, AdminToggle } from "./AdminSettingsShared";
|
||||
import { AdminHostTags } from "./AdminHostTags";
|
||||
import type { TlsStatus } from "@/api/tls-api";
|
||||
|
||||
type GeneralSettingsSectionProps = {
|
||||
@@ -349,6 +350,9 @@ export function AdminHostDefaultsSection({
|
||||
>
|
||||
{t("hostDefaults.editServerDefaults")}
|
||||
</Button>
|
||||
<div className="border-t border-border pt-3">
|
||||
<AdminHostTags />
|
||||
</div>
|
||||
</div>
|
||||
</AccordionSection>
|
||||
);
|
||||
|
||||
@@ -183,7 +183,7 @@ export function CredentialEditorView({
|
||||
{t("hosts.friendlyNameLabel")}
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. Production SSH Key"
|
||||
placeholder={t("placeholders.credentialName")}
|
||||
value={credForm.name}
|
||||
onChange={(e) => setCredField("name", e.target.value)}
|
||||
/>
|
||||
@@ -203,7 +203,7 @@ export function CredentialEditorView({
|
||||
{t("hosts.descriptionLabel")}
|
||||
</label>
|
||||
<Input
|
||||
placeholder="Optional details..."
|
||||
placeholder={t("placeholders.optionalDetails")}
|
||||
value={credForm.description}
|
||||
onChange={(e) => setCredField("description", e.target.value)}
|
||||
/>
|
||||
@@ -278,7 +278,7 @@ export function CredentialEditorView({
|
||||
{t("hosts.username")}
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. root or deploy"
|
||||
placeholder={t("placeholders.sshUsername")}
|
||||
value={credForm.username}
|
||||
onChange={(e) => setCredField("username", e.target.value)}
|
||||
/>
|
||||
|
||||
@@ -1444,7 +1444,7 @@ export function HostEditor({
|
||||
{t("hosts.friendlyNameLabel")}
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. Production SSH Key"
|
||||
placeholder={t("placeholders.credentialName")}
|
||||
value={quickCredentialName}
|
||||
onChange={(e) => setQuickCredentialName(e.target.value)}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import { getHostTags } from "@/api/host-tags-api";
|
||||
import type { ProxyNode } from "@/types/index";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button } from "@/components/button";
|
||||
@@ -47,6 +48,39 @@ export function HostEditorGeneralTab({
|
||||
const { t } = useTranslation();
|
||||
const syncLinked = !!useSyncStatus()?.linked;
|
||||
const pluginProtocols = useHostProtocols();
|
||||
const [predefinedTags, setPredefinedTags] = React.useState<string[]>([]);
|
||||
React.useEffect(() => {
|
||||
let cancelled = false;
|
||||
const load = () => {
|
||||
void getHostTags()
|
||||
.then((tags) => {
|
||||
if (!cancelled) setPredefinedTags(tags);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
load();
|
||||
window.addEventListener("termix:host-tags-changed", load);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
window.removeEventListener("termix:host-tags-changed", load);
|
||||
};
|
||||
}, []);
|
||||
const suggestedTags = [
|
||||
...new Set([
|
||||
...predefinedTags,
|
||||
...hosts.flatMap((item) => item.tags ?? []),
|
||||
]),
|
||||
].filter(
|
||||
(tag) =>
|
||||
!form.tags.includes(tag) &&
|
||||
tag
|
||||
.toLocaleLowerCase()
|
||||
.includes(form.tagInput.trim().toLocaleLowerCase()),
|
||||
);
|
||||
const addTag = (tag: string) => {
|
||||
if (!form.tags.includes(tag)) setField("tags", [...form.tags, tag]);
|
||||
setField("tagInput", "");
|
||||
};
|
||||
|
||||
// Tracks which picker is shown, independent of whether a value is set yet
|
||||
// -- switching to "parent host" mode with nothing picked shouldn't bounce
|
||||
@@ -174,7 +208,7 @@ export function HostEditorGeneralTab({
|
||||
{t("hosts.addressIp")}
|
||||
</label>
|
||||
<Input
|
||||
placeholder="10.0.0.1 or example.com"
|
||||
placeholder={t("placeholders.hostAddress")}
|
||||
value={form.ip}
|
||||
onChange={(e) => setField("ip", e.target.value)}
|
||||
/>
|
||||
@@ -186,7 +220,7 @@ export function HostEditorGeneralTab({
|
||||
{t("hosts.friendlyName")}
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. Web Server Production"
|
||||
placeholder={t("placeholders.hostName")}
|
||||
value={form.name}
|
||||
onChange={(e) => setField("name", e.target.value)}
|
||||
/>
|
||||
@@ -284,13 +318,11 @@ export function HostEditorGeneralTab({
|
||||
onKeyDown={(e) => {
|
||||
if (
|
||||
(e.key === " " || e.key === "Enter") &&
|
||||
!e.nativeEvent.isComposing &&
|
||||
form.tagInput.trim()
|
||||
) {
|
||||
e.preventDefault();
|
||||
const tag = form.tagInput.trim();
|
||||
if (!form.tags.includes(tag))
|
||||
setField("tags", [...form.tags, tag]);
|
||||
setField("tagInput", "");
|
||||
addTag(form.tagInput.trim());
|
||||
} else if (
|
||||
e.key === "Backspace" &&
|
||||
!form.tagInput &&
|
||||
@@ -302,6 +334,24 @@ export function HostEditorGeneralTab({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{suggestedTags.length > 0 && (
|
||||
<div
|
||||
className="col-span-2 flex flex-wrap gap-1 max-h-24 overflow-y-auto"
|
||||
aria-label={t("admin.hostTags")}
|
||||
>
|
||||
{suggestedTags.map((tag) => (
|
||||
<button
|
||||
type="button"
|
||||
key={tag}
|
||||
onClick={() => addTag(tag)}
|
||||
className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-foreground/40 transition-colors"
|
||||
>
|
||||
<Plus className="size-2.5" />
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-1.5 col-span-2">
|
||||
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||||
{t("hosts.privateNotes")}
|
||||
|
||||
@@ -1,6 +1,19 @@
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import { useEffect, useRef, type ComponentType, type ReactNode } from "react";
|
||||
import { KeyRound, Settings, Terminal } from "lucide-react";
|
||||
import {
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ComponentType,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
KeyRound,
|
||||
Settings,
|
||||
Terminal,
|
||||
} from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { byOrderThenId, createRegistry } from "@/lib/registry";
|
||||
|
||||
/** Core host editor tabs. Plugins add theirs through registerHostEditorSection. */
|
||||
@@ -197,6 +210,27 @@ export function TabStrip({
|
||||
variant?: "primary" | "secondary";
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const { t } = useTranslation();
|
||||
const [scroll, setScroll] = useState({ left: false, right: false });
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const update = () =>
|
||||
setScroll({
|
||||
left: el.scrollLeft > 1,
|
||||
right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
|
||||
});
|
||||
const observer = new ResizeObserver(update);
|
||||
observer.observe(el);
|
||||
if (el.firstElementChild) observer.observe(el.firstElementChild);
|
||||
el.addEventListener("scroll", update);
|
||||
update();
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
el.removeEventListener("scroll", update);
|
||||
};
|
||||
}, [tabs]);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
@@ -229,14 +263,48 @@ export function TabStrip({
|
||||
);
|
||||
};
|
||||
|
||||
const overflow = scroll.left || scroll.right;
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`overflow-x-auto scrollbar-none ${
|
||||
variant === "secondary" ? "border-t border-border bg-card" : ""
|
||||
}`}
|
||||
className={`flex min-w-0 items-center ${variant === "secondary" ? "border-t border-border bg-card" : ""}`}
|
||||
>
|
||||
<div className="flex min-w-max">{tabs.map(renderTab)}</div>
|
||||
{overflow && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={t("common.scrollTabsLeft")}
|
||||
title={t("common.scrollTabsLeft")}
|
||||
disabled={!scroll.left}
|
||||
className="shrink-0 p-1 disabled:opacity-30"
|
||||
onClick={() =>
|
||||
ref.current?.scrollBy({
|
||||
left: -ref.current.clientWidth * 0.75,
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
</button>
|
||||
)}
|
||||
<div ref={ref} className="min-w-0 flex-1 overflow-x-auto scrollbar-none">
|
||||
<div className="flex min-w-max">{tabs.map(renderTab)}</div>
|
||||
</div>
|
||||
{overflow && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={t("common.scrollTabsRight")}
|
||||
title={t("common.scrollTabsRight")}
|
||||
disabled={!scroll.right}
|
||||
className="shrink-0 p-1 disabled:opacity-30"
|
||||
onClick={() =>
|
||||
ref.current?.scrollBy({
|
||||
left: ref.current.clientWidth * 0.75,
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
>
|
||||
<ChevronRight className="size-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { getErrorMessage } from "../lib/error-message.js";
|
||||
import { enabledHostProtocols, useHostProtocols } from "./host-protocols";
|
||||
import { useSshAuthProviders } from "@/hooks/useSshAuthProviders";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { HostData } from "@/types/index";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
@@ -53,6 +53,8 @@ import {
|
||||
import type { SSHHostWithStatus } from "@/main-axios";
|
||||
import type { Host, HostFolder, TabType } from "@/types/ui-types";
|
||||
import { sortHostTree, type SortKey } from "@/sidebar/host-sort";
|
||||
import { withLiveStatus } from "@/sidebar/live-host-status";
|
||||
import { useServerStatus } from "@/lib/ServerStatusContext";
|
||||
import { useHostSidebarPreferences } from "@/sidebar/tree/hooks/useHostSidebarPreferences";
|
||||
import { useArrangeLock } from "@/sidebar/use-arrange-lock";
|
||||
import type {
|
||||
@@ -137,9 +139,7 @@ function hostPassesFilters(
|
||||
if (filters.status.length > 0) {
|
||||
const ok =
|
||||
(filters.status.includes("online") && host.online) ||
|
||||
(filters.status.includes("offline") &&
|
||||
host.status !== "reachable" &&
|
||||
!host.online) ||
|
||||
(filters.status.includes("offline") && host.status === "offline") ||
|
||||
(filters.status.includes("pinned") && !!host.pin);
|
||||
if (!ok) return false;
|
||||
}
|
||||
@@ -219,6 +219,13 @@ export function HostsPanel({
|
||||
active?: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { statuses, getStatus } = useServerStatus();
|
||||
const liveHostTree = useMemo(
|
||||
() => (hostTree ? withLiveStatus(hostTree, getStatus) : undefined),
|
||||
// statuses changes identity whenever a host's status changes
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[hostTree, statuses, getStatus],
|
||||
);
|
||||
const hostSwitchPlugins = usePluginHostSections().filter(
|
||||
(plugin) => !!plugin.contributes?.settings?.host?.enableKey,
|
||||
);
|
||||
@@ -1028,10 +1035,10 @@ export function HostsPanel({
|
||||
<div className="flex flex-col flex-1 min-h-0">
|
||||
<SidebarTree
|
||||
children={
|
||||
hostTree
|
||||
liveHostTree
|
||||
? groupHosts(
|
||||
applyFilters(
|
||||
sortHostTree(hostTree, sortKey, pinnedFirst),
|
||||
sortHostTree(liveHostTree, sortKey, pinnedFirst),
|
||||
filterState,
|
||||
hostSwitches,
|
||||
),
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import type { Host, HostFolder } from "@/types/ui-types";
|
||||
import type { StatusValue } from "@/lib/server-status-store";
|
||||
import { isFolder } from "./tree/visible-rows";
|
||||
|
||||
/**
|
||||
* Copies each host's live status onto the tree so sorting, filtering and
|
||||
* grouping by status read the same value as the row's dot. A host with
|
||||
* status checks off gets no status.
|
||||
*/
|
||||
export function withLiveStatus(
|
||||
folder: HostFolder,
|
||||
getStatus: (hostId: number) => StatusValue,
|
||||
): HostFolder {
|
||||
return {
|
||||
...folder,
|
||||
children: folder.children.map((child) => {
|
||||
if (isFolder(child)) return withLiveStatus(child, getStatus);
|
||||
const host = child as Host;
|
||||
const status =
|
||||
host.statusCheckEnabled === false
|
||||
? undefined
|
||||
: getStatus(Number(host.id));
|
||||
if (host.status === status) return host;
|
||||
return { ...host, status, online: status === "online" };
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
/** The flat-list version of withLiveStatus. */
|
||||
export function withLiveHostStatus(
|
||||
hosts: Host[],
|
||||
getStatus: (hostId: number) => StatusValue,
|
||||
): Host[] {
|
||||
return withLiveStatus({ name: "", children: hosts }, getStatus)
|
||||
.children as Host[];
|
||||
}
|
||||
@@ -15,23 +15,12 @@ import { HostItem, statusCheckEnabled } from "../HostItem/HostItem";
|
||||
import { isFolder, folderHasMatch, collectAllHosts } from "../visible-rows";
|
||||
import { FolderActions } from "./FolderActions";
|
||||
|
||||
export function folderHostCount(folder: HostFolder): {
|
||||
total: number;
|
||||
online: number;
|
||||
} {
|
||||
let total = 0,
|
||||
online = 0;
|
||||
export function folderHostCount(folder: HostFolder): number {
|
||||
let total = 0;
|
||||
for (const child of folder.children) {
|
||||
if (isFolder(child)) {
|
||||
const c = folderHostCount(child);
|
||||
total += c.total;
|
||||
online += c.online;
|
||||
} else {
|
||||
total++;
|
||||
if (child.online) online++;
|
||||
}
|
||||
total += isFolder(child) ? folderHostCount(child) : 1;
|
||||
}
|
||||
return { total, online };
|
||||
return total;
|
||||
}
|
||||
|
||||
export function FolderItem({
|
||||
@@ -140,13 +129,11 @@ export function FolderItem({
|
||||
onReorderHoverChange?: (edge: "before" | "after" | null) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { getStatus, initialLoadComplete } = useServerStatus();
|
||||
const { total } = folderHostCount(folder);
|
||||
const online = initialLoadComplete
|
||||
? collectAllHosts(folder.children).filter(
|
||||
(h) => statusCheckEnabled(h) && getStatus(Number(h.id)) === "online",
|
||||
).length
|
||||
: folderHostCount(folder).online;
|
||||
const { getStatus } = useServerStatus();
|
||||
const total = folderHostCount(folder);
|
||||
const online = collectAllHosts(folder.children).filter(
|
||||
(h) => statusCheckEnabled(h) && getStatus(Number(h.id)) === "online",
|
||||
).length;
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
const reorderEdge = isReorderHovered ? reorderHoverEdge : null;
|
||||
|
||||
|
||||
@@ -59,11 +59,7 @@ import {
|
||||
useStatusColorScheme,
|
||||
getStatusClasses,
|
||||
} from "@/hooks/use-status-color-scheme";
|
||||
import {
|
||||
useHostStatus,
|
||||
useHostStatusReason,
|
||||
useServerStatusMeta,
|
||||
} from "@/lib/ServerStatusContext";
|
||||
import { useHostStatus } from "@/lib/ServerStatusContext";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
@@ -101,16 +97,16 @@ export function statusCheckEnabled(host: Host): boolean {
|
||||
|
||||
export function buildStatusTooltip(
|
||||
host: Host,
|
||||
status: "online" | "reachable" | "offline",
|
||||
status: "online" | "offline" | "unknown",
|
||||
t: (key: string) => string = (k) => k,
|
||||
): string {
|
||||
if (!statusCheckEnabled(host)) return t("hosts.status.monitoringDisabled");
|
||||
const statusLabel =
|
||||
status === "online"
|
||||
? t("hosts.status.available")
|
||||
: status === "reachable"
|
||||
? t("hosts.status.reachable")
|
||||
: t("hosts.status.offline");
|
||||
if (!statusCheckEnabled(host)) return t("hosts.status.monitoringDisabled");
|
||||
? t("hosts.status.online")
|
||||
: status === "offline"
|
||||
? t("hosts.status.offline")
|
||||
: t("hosts.status.checking");
|
||||
const protocols: string[] = [];
|
||||
if (host.enableSsh) protocols.push("SSH");
|
||||
for (const protocol of enabledHostProtocols(host)) {
|
||||
@@ -283,22 +279,11 @@ export function HostItem({
|
||||
const pluginMenuItems = hostMenuItemsFor(useHostContextMenuItems(), host);
|
||||
const splitTargets = useSplitTargets();
|
||||
const statusScheme = useStatusColorScheme();
|
||||
const { initialLoadComplete } = useServerStatusMeta();
|
||||
const statusCheckOn = statusCheckEnabled(host);
|
||||
const statusLoading = !initialLoadComplete && statusCheckOn;
|
||||
// Per-host subscription — status polls only re-render rows that flipped.
|
||||
const liveStatus = useHostStatus(Number(host.id), statusCheckOn);
|
||||
const statusReason = useHostStatusReason(Number(host.id), statusCheckOn);
|
||||
// Per-host subscription, so a poll only re-renders rows that flipped.
|
||||
const availability =
|
||||
liveStatus === "online" ||
|
||||
liveStatus === "reachable" ||
|
||||
liveStatus === "offline"
|
||||
? liveStatus
|
||||
: host.status === "reachable"
|
||||
? "reachable"
|
||||
: host.online
|
||||
? "online"
|
||||
: "offline";
|
||||
useHostStatus(Number(host.id), statusCheckOn) ?? "offline";
|
||||
const statusLoading = availability === "unknown";
|
||||
const isOnline = availability === "online";
|
||||
const previousAvailability = useRef(availability);
|
||||
const [statusLocking, setStatusLocking] = useState(false);
|
||||
@@ -1096,7 +1081,10 @@ export function HostItem({
|
||||
className={`flex flex-col flex-1 min-w-0 ${tokens.rowPadding} ${isCompact ? "" : "gap-[3.5px]"}`}
|
||||
>
|
||||
{/* Name row */}
|
||||
<div data-drag-label className="flex items-center gap-1.5 min-w-0">
|
||||
<div
|
||||
data-drag-label
|
||||
className={`flex items-center gap-1.5 min-w-0 ${isCompact ? "min-h-[19px]" : ""}`}
|
||||
>
|
||||
{onToggleExpand && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -1133,9 +1121,7 @@ export function HostItem({
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
{statusReason === "host_key_changed"
|
||||
? `${t("hostKey.keyChangedWarning")}: ${t("hostKey.keyChangedDescription")}`
|
||||
: buildStatusTooltip(host, availability, t)}
|
||||
{buildStatusTooltip(host, availability, t)}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
@@ -1190,6 +1176,23 @@ export function HostItem({
|
||||
{host.ip}
|
||||
</span>
|
||||
)}
|
||||
{isCompact && !selectionMode && (
|
||||
<div
|
||||
data-testid="host-inline-actions"
|
||||
className={`flex items-center gap-[2px] min-w-0 max-w-[60%] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>*]:shrink-0 ${alwaysShowTray || actionsOnly || trayOpenState || hoverTrayOpen ? "" : "hidden"}`}
|
||||
>
|
||||
{connectionButtons}
|
||||
<div
|
||||
className={
|
||||
alwaysShowTray || trayOpenState || hoverTrayOpen
|
||||
? "flex items-center gap-[2px]"
|
||||
: "hidden"
|
||||
}
|
||||
>
|
||||
{managementButtons}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!selectionMode && (shouldUseClickTray || actionsOnly) && (
|
||||
<button
|
||||
title={
|
||||
@@ -1239,7 +1242,8 @@ export function HostItem({
|
||||
)}
|
||||
|
||||
{/* Connection buttons: permanent in "always"/"actionsOnly" modes, or shown once the chevron opens the tray in click mode */}
|
||||
{!selectionMode &&
|
||||
{!isCompact &&
|
||||
!selectionMode &&
|
||||
(alwaysShowTray ||
|
||||
actionsOnly ||
|
||||
(shouldUseClickTray && isTrayOpen)) && (
|
||||
@@ -1251,61 +1255,63 @@ export function HostItem({
|
||||
)}
|
||||
|
||||
{/* Action tray — slides open on hover (default) or via chevron in click-tray mode */}
|
||||
<div className={trayVisibilityClass}>
|
||||
{tokens.showResourceRow &&
|
||||
isOnline &&
|
||||
((host.cpu != null && host.cpu > 0) ||
|
||||
(host.ram != null && host.ram > 0)) && (
|
||||
<div className="flex items-center gap-[10.5px] pt-[5.25px]">
|
||||
{host.cpu != null && host.cpu > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Cpu className="size-2.5 shrink-0 text-muted-foreground/40" />
|
||||
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`motion-meter h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
|
||||
style={{ width: `${host.cpu}%` }}
|
||||
/>
|
||||
{!isCompact && (
|
||||
<div className={trayVisibilityClass}>
|
||||
{tokens.showResourceRow &&
|
||||
isOnline &&
|
||||
((host.cpu != null && host.cpu > 0) ||
|
||||
(host.ram != null && host.ram > 0)) && (
|
||||
<div className="flex items-center gap-[10.5px] pt-[5.25px]">
|
||||
{host.cpu != null && host.cpu > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Cpu className="size-2.5 shrink-0 text-muted-foreground/40" />
|
||||
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`motion-meter h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
|
||||
style={{ width: `${host.cpu}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[9px] tabular-nums text-muted-foreground/50">
|
||||
{host.cpu}%
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[9px] tabular-nums text-muted-foreground/50">
|
||||
{host.cpu}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{host.ram != null && host.ram > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<MemoryStick className="size-2.5 shrink-0 text-muted-foreground/40" />
|
||||
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`motion-meter h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
|
||||
style={{ width: `${host.ram}%` }}
|
||||
/>
|
||||
)}
|
||||
{host.ram != null && host.ram > 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<MemoryStick className="size-2.5 shrink-0 text-muted-foreground/40" />
|
||||
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`motion-meter h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
|
||||
style={{ width: `${host.ram}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[9px] tabular-nums text-muted-foreground/50">
|
||||
{host.ram}%
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[9px] tabular-nums text-muted-foreground/50">
|
||||
{host.ram}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`flex flex-col gap-0.5 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "" : "pt-1.5"}`}
|
||||
>
|
||||
{/* Connection buttons — only shown here when not already shown above */}
|
||||
{!alwaysShowTray && !actionsOnly && !shouldUseClickTray && (
|
||||
<div className="flex items-center flex-wrap gap-[1.75px]">
|
||||
{connectionButtons}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Management buttons row */}
|
||||
<div
|
||||
className={`flex items-center gap-[1.75px] border-t border-border/30 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "pt-[5.25px]" : "pt-[3.5px] mt-[1.75px]"}`}
|
||||
className={`flex flex-col gap-0.5 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "" : "pt-1.5"}`}
|
||||
>
|
||||
{managementButtons}
|
||||
{/* Connection buttons, only shown here when not already shown above */}
|
||||
{!alwaysShowTray && !actionsOnly && !shouldUseClickTray && (
|
||||
<div className="flex items-center flex-wrap gap-[1.75px]">
|
||||
{connectionButtons}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Management buttons row */}
|
||||
<div
|
||||
className={`flex items-center gap-[1.75px] border-t border-border/30 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "pt-[5.25px]" : "pt-[3.5px] mt-[1.75px]"}`}
|
||||
>
|
||||
{managementButtons}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{authOverrideProtocol && (
|
||||
<HostAuthOverrideModal
|
||||
open
|
||||
|
||||
@@ -502,7 +502,7 @@ export function SidebarTree({
|
||||
|
||||
function handleDeleteFolder(folder: HostFolder) {
|
||||
const folderPath = folder.path ?? folder.name;
|
||||
const { total } = folderHostCount(folder);
|
||||
const total = folderHostCount(folder);
|
||||
setConfirmDialog({
|
||||
message: t("hosts.deleteFolderConfirm", {
|
||||
name: folder.name,
|
||||
@@ -754,6 +754,7 @@ export function SidebarTree({
|
||||
const row = visibleRows[index];
|
||||
if (!row) return FOLDER_ROW_HEIGHT;
|
||||
if (isFolder(row.item)) return FOLDER_ROW_HEIGHT;
|
||||
if (isCompactDensity) return 29;
|
||||
const tagExtra = showTags && row.item.tags?.length ? TAG_ROW_EXTRA : 0;
|
||||
// The resource bars only render for an online host that reported CPU/RAM.
|
||||
// Reserving their height unconditionally left a gap under every offline
|
||||
|
||||
Reference in new issue
Block a user