mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-10-28 14:15:24 +00:00
1622 lines
54 KiB
TypeScript
1622 lines
54 KiB
TypeScript
import { getErrorMessage } from "@/lib/error-message.js";
|
|
import { useState, useEffect, useCallback, useMemo, useRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { toast } from "sonner";
|
|
import {
|
|
Boxes,
|
|
Check,
|
|
ChevronLeft,
|
|
Download,
|
|
ExternalLink,
|
|
Loader2,
|
|
Package,
|
|
Play,
|
|
Plus,
|
|
RefreshCw,
|
|
Search,
|
|
Server,
|
|
Settings2,
|
|
Share2,
|
|
Shield,
|
|
Trash2,
|
|
Upload,
|
|
User,
|
|
X,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/button";
|
|
import { Input } from "@/components/input";
|
|
import { Textarea } from "@/components/textarea";
|
|
import { Checkbox } from "@/components/checkbox";
|
|
import { Badge } from "@/components/badge";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
} from "@/components/dialog";
|
|
import { FOLDER_COLORS } from "@/lib/theme";
|
|
import { getSSHHosts } from "@/api/ssh-host-management-api";
|
|
import { getUserList } from "@/api/user-management-api";
|
|
import {
|
|
getRoles,
|
|
type SharePermissionLevel,
|
|
type ShareTarget,
|
|
} from "@/api/rbac-api";
|
|
import { Select2 } from "@/components/select2";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/dropdown-menu";
|
|
import {
|
|
extractSnippetInputs,
|
|
type SnippetInput,
|
|
} from "@/lib/snippet-variables";
|
|
import {
|
|
listFleets,
|
|
createFleet,
|
|
updateFleet,
|
|
deleteFleet,
|
|
getFleetMembers,
|
|
addFleetMember,
|
|
removeFleetMember,
|
|
runFleetCommand,
|
|
pushFleetFile,
|
|
pullFleetFile,
|
|
getFleetInventory,
|
|
refreshFleetInventory,
|
|
runFleetPackageAction,
|
|
shareFleet,
|
|
type FleetRow,
|
|
type FleetMemberRow,
|
|
type FleetHostResult,
|
|
type FleetInventoryEntry,
|
|
type FleetPackageAction,
|
|
type FleetShareHostResult,
|
|
} from "@/api/fleets-api";
|
|
import type { SSHHost } from "@/types/index";
|
|
|
|
const SHARE_PERMISSION_LEVELS: SharePermissionLevel[] = [
|
|
"connect",
|
|
"view",
|
|
"edit",
|
|
"manage",
|
|
];
|
|
|
|
const SHARE_EXPIRY_PRESETS = [
|
|
{ key: "never", hours: undefined },
|
|
{ key: "oneHour", hours: 1 },
|
|
{ key: "oneDay", hours: 24 },
|
|
{ key: "sevenDays", hours: 24 * 7 },
|
|
{ key: "thirtyDays", hours: 24 * 30 },
|
|
{ key: "custom", hours: undefined },
|
|
] as const;
|
|
|
|
type ShareExpiryPresetKey = (typeof SHARE_EXPIRY_PRESETS)[number]["key"];
|
|
|
|
function formatUptime(seconds: number | null): string {
|
|
if (seconds === null) return "-";
|
|
const d = Math.floor(seconds / 86400);
|
|
const h = Math.floor((seconds % 86400) / 3600);
|
|
const m = Math.floor((seconds % 3600) / 60);
|
|
if (d > 0) return `${d}d ${h}h`;
|
|
if (h > 0) return `${h}h ${m}m`;
|
|
return `${m}m`;
|
|
}
|
|
|
|
function ResultsList({ results }: { results: FleetHostResult[] }) {
|
|
const { t } = useTranslation();
|
|
if (results.length === 0) return null;
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
{results.map((r) => (
|
|
<div
|
|
key={r.hostId}
|
|
className="flex flex-col gap-1 border border-border p-2.5"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Server className="size-3 shrink-0 text-muted-foreground" />
|
|
<span className="text-xs font-semibold">{r.hostName}</span>
|
|
<span
|
|
className={`ml-auto text-[10px] px-1.5 py-0.5 ${
|
|
r.success
|
|
? "bg-green-500/10 text-green-500"
|
|
: "bg-destructive/10 text-destructive"
|
|
}`}
|
|
>
|
|
{r.success
|
|
? t("newUi.sidebar.fleets.resultSuccess")
|
|
: t("newUi.sidebar.fleets.resultFailed")}
|
|
</span>
|
|
</div>
|
|
{(r.output || r.error) && (
|
|
<pre className="text-xs bg-muted/30 p-2 overflow-x-auto whitespace-pre-wrap font-mono text-muted-foreground max-h-40">
|
|
{r.error ? r.error : r.output}
|
|
</pre>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FleetFormDialog({
|
|
open,
|
|
onClose,
|
|
fleet,
|
|
onSaved,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
fleet: FleetRow | null;
|
|
onSaved: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [name, setName] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [color, setColor] = useState<string>(FOLDER_COLORS[0]);
|
|
const [tagRulesText, setTagRulesText] = useState("");
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
setName(fleet?.name ?? "");
|
|
setDescription(fleet?.description ?? "");
|
|
setColor(fleet?.color ?? FOLDER_COLORS[0]);
|
|
setTagRulesText((fleet?.tagRules ?? []).join(", "));
|
|
}, [open, fleet]);
|
|
|
|
async function handleSave() {
|
|
if (!name.trim()) {
|
|
toast.error(t("newUi.sidebar.fleets.nameRequired"));
|
|
return;
|
|
}
|
|
const tagRules = tagRulesText
|
|
.split(",")
|
|
.map((tag) => tag.trim())
|
|
.filter(Boolean);
|
|
|
|
setSaving(true);
|
|
try {
|
|
if (fleet) {
|
|
await updateFleet(fleet.id, {
|
|
name: name.trim(),
|
|
description: description.trim() || null,
|
|
color,
|
|
tagRules,
|
|
});
|
|
toast.success(t("newUi.sidebar.fleets.fleetUpdated"));
|
|
} else {
|
|
await createFleet({
|
|
name: name.trim(),
|
|
description: description.trim() || null,
|
|
color,
|
|
tagRules,
|
|
});
|
|
toast.success(t("newUi.sidebar.fleets.fleetCreated"));
|
|
}
|
|
onSaved();
|
|
onClose();
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.saveFailed"));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(next) => !next && onClose()}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{fleet
|
|
? t("newUi.sidebar.fleets.editFleetTitle")
|
|
: t("newUi.sidebar.fleets.createFleetTitle")}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t("newUi.sidebar.fleets.createFleetDescription")}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.nameLabel")}
|
|
</label>
|
|
<Input
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder={t("newUi.sidebar.fleets.namePlaceholder")}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.descriptionLabel")}
|
|
</label>
|
|
<Textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder={t("newUi.sidebar.fleets.descriptionPlaceholder")}
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.colorLabel")}
|
|
</label>
|
|
<div className="flex gap-1.5">
|
|
{FOLDER_COLORS.map((c) => (
|
|
<button
|
|
key={c}
|
|
type="button"
|
|
onClick={() => setColor(c)}
|
|
className={`size-6 transition-all ${
|
|
color === c
|
|
? "ring-2 ring-offset-2 ring-offset-background ring-white/50"
|
|
: "opacity-75 hover:opacity-100"
|
|
}`}
|
|
style={{ backgroundColor: c }}
|
|
aria-label={c}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.tagRulesLabel")}
|
|
</label>
|
|
<Input
|
|
value={tagRulesText}
|
|
onChange={(e) => setTagRulesText(e.target.value)}
|
|
placeholder={t("newUi.sidebar.fleets.tagRulesPlaceholder")}
|
|
/>
|
|
<span className="text-[11px] text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.tagRulesHint")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose}>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
>
|
|
{saving && <Loader2 className="size-3.5 mr-2 animate-spin" />}
|
|
{t("common.save")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function MemberPickerDialog({
|
|
open,
|
|
onClose,
|
|
fleetId,
|
|
allHosts,
|
|
memberIds,
|
|
onChanged,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
fleetId: number;
|
|
allHosts: SSHHost[];
|
|
memberIds: Set<number>;
|
|
onChanged: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [search, setSearch] = useState("");
|
|
const [busyId, setBusyId] = useState<number | null>(null);
|
|
|
|
const visibleHosts = useMemo(
|
|
() =>
|
|
allHosts.filter((h) =>
|
|
h.name.toLowerCase().includes(search.trim().toLowerCase()),
|
|
),
|
|
[allHosts, search],
|
|
);
|
|
|
|
async function toggleHost(host: SSHHost, isMember: boolean) {
|
|
setBusyId(host.id);
|
|
try {
|
|
if (isMember) {
|
|
await removeFleetMember(fleetId, host.id);
|
|
} else {
|
|
await addFleetMember(fleetId, host.id);
|
|
}
|
|
onChanged();
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.memberUpdateFailed"));
|
|
} finally {
|
|
setBusyId(null);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(next) => !next && onClose()}>
|
|
<DialogContent className="sm:max-w-md flex flex-col max-h-[80dvh]">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{t("newUi.sidebar.fleets.manageMembersTitle")}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t("newUi.sidebar.fleets.manageMembersDescription")}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="relative shrink-0">
|
|
<Search className="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
className="pl-7 h-8 text-xs"
|
|
placeholder={t("newUi.sidebar.fleets.searchHosts")}
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-1">
|
|
{visibleHosts.map((host) => {
|
|
const isMember = memberIds.has(host.id);
|
|
return (
|
|
<label
|
|
key={host.id}
|
|
className="flex items-center gap-2 text-xs cursor-pointer py-1"
|
|
>
|
|
<Checkbox
|
|
checked={isMember}
|
|
disabled={busyId === host.id}
|
|
onCheckedChange={() => toggleHost(host, isMember)}
|
|
/>
|
|
<span className="truncate flex-1">{host.name}</span>
|
|
<span className="text-muted-foreground text-[11px]">
|
|
{host.ip}
|
|
</span>
|
|
</label>
|
|
);
|
|
})}
|
|
{visibleHosts.length === 0 && (
|
|
<div className="text-xs text-muted-foreground text-center py-4">
|
|
{t("newUi.sidebar.fleets.noHostsFound")}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
onClick={onClose}
|
|
>
|
|
{t("common.close")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function FleetShareDialog({
|
|
open,
|
|
onClose,
|
|
fleet,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
fleet: FleetRow | null;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [targetTab, setTargetTab] = useState<"user" | "role">("user");
|
|
const [search, setSearch] = useState("");
|
|
const [shareUsers, setShareUsers] = useState<
|
|
{ id: string; username: string }[]
|
|
>([]);
|
|
const [shareRoles, setShareRoles] = useState<
|
|
{ id: number; name: string; displayName?: string }[]
|
|
>([]);
|
|
const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(
|
|
new Set(),
|
|
);
|
|
const [selectedRoleIds, setSelectedRoleIds] = useState<Set<number>>(
|
|
new Set(),
|
|
);
|
|
const [permissionLevel, setPermissionLevel] =
|
|
useState<SharePermissionLevel>("connect");
|
|
const [expiryPreset, setExpiryPreset] =
|
|
useState<ShareExpiryPresetKey>("never");
|
|
const [customHours, setCustomHours] = useState("");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [summary, setSummary] = useState<{
|
|
hostsShared: number;
|
|
hostsTotal: number;
|
|
hostResults: FleetShareHostResult[];
|
|
} | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
setSearch("");
|
|
setSelectedUserIds(new Set());
|
|
setSelectedRoleIds(new Set());
|
|
setPermissionLevel("connect");
|
|
setExpiryPreset("never");
|
|
setCustomHours("");
|
|
setTargetTab("user");
|
|
setSummary(null);
|
|
Promise.all([
|
|
getUserList().catch(() => ({ users: [] })),
|
|
getRoles().catch(() => ({ roles: [] })),
|
|
]).then(([usersRes, rolesRes]) => {
|
|
setShareUsers(
|
|
(usersRes.users ?? []).map((u) => ({
|
|
id: String(u.userId),
|
|
username: u.username,
|
|
})),
|
|
);
|
|
setShareRoles(
|
|
(rolesRes.roles ?? [])
|
|
.filter((r) => !r.isSystem)
|
|
.map((r) => ({
|
|
id: Number(r.id),
|
|
name: r.name,
|
|
displayName: r.displayName,
|
|
})),
|
|
);
|
|
});
|
|
}, [open]);
|
|
|
|
const filteredUsers = useMemo(() => {
|
|
const q = search.trim().toLowerCase();
|
|
return q
|
|
? shareUsers.filter((u) => u.username.toLowerCase().includes(q))
|
|
: shareUsers;
|
|
}, [shareUsers, search]);
|
|
|
|
const filteredRoles = useMemo(() => {
|
|
const q = search.trim().toLowerCase();
|
|
return q
|
|
? shareRoles.filter(
|
|
(r) =>
|
|
r.name.toLowerCase().includes(q) ||
|
|
(r.displayName ?? "").toLowerCase().includes(q),
|
|
)
|
|
: shareRoles;
|
|
}, [shareRoles, search]);
|
|
|
|
const selectedCount = selectedUserIds.size + selectedRoleIds.size;
|
|
|
|
const durationHours = (() => {
|
|
if (expiryPreset === "never") return undefined;
|
|
if (expiryPreset === "custom") {
|
|
const hours = Number(customHours);
|
|
return Number.isFinite(hours) && hours > 0 ? hours : undefined;
|
|
}
|
|
return (
|
|
SHARE_EXPIRY_PRESETS.find((p) => p.key === expiryPreset)?.hours ??
|
|
undefined
|
|
);
|
|
})();
|
|
|
|
async function handleShare() {
|
|
if (!fleet || selectedCount === 0) return;
|
|
const targets: ShareTarget[] = [
|
|
...[...selectedUserIds].map(
|
|
(id) => ({ type: "user", id }) as ShareTarget,
|
|
),
|
|
...[...selectedRoleIds].map(
|
|
(id) => ({ type: "role", id }) as ShareTarget,
|
|
),
|
|
];
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
const result = await shareFleet(fleet.id, {
|
|
targets,
|
|
permissionLevel,
|
|
...(durationHours ? { durationHours } : {}),
|
|
});
|
|
setSummary({
|
|
hostsShared: result.hostsShared,
|
|
hostsTotal: result.hostsTotal,
|
|
hostResults: result.hostResults,
|
|
});
|
|
setSelectedUserIds(new Set());
|
|
setSelectedRoleIds(new Set());
|
|
toast.success(
|
|
t("newUi.sidebar.fleets.fleetSharedSuccessfully", {
|
|
shared: result.hostsShared,
|
|
total: result.hostsTotal,
|
|
}),
|
|
);
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.failedToShareFleet"));
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(next) => !next && onClose()}>
|
|
<DialogContent className="sm:max-w-md flex flex-col max-h-[85dvh]">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{t("newUi.sidebar.fleets.shareFleetTitle", {
|
|
name: fleet?.name ?? "",
|
|
})}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t("newUi.sidebar.fleets.shareFleetDescription")}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-3">
|
|
{fleet && fleet.memberCount === 0 ? (
|
|
<div className="text-xs text-muted-foreground text-center py-6">
|
|
{t("newUi.sidebar.fleets.noMembersToShare")}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="flex gap-1.5">
|
|
{(["user", "role"] as const).map((tab) => (
|
|
<button
|
|
key={tab}
|
|
type="button"
|
|
onClick={() => setTargetTab(tab)}
|
|
className={`flex-1 flex items-center justify-center gap-1 px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest border transition-colors ${targetTab === tab ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
|
|
>
|
|
{tab === "user" ? (
|
|
<User className="size-3 shrink-0" />
|
|
) : (
|
|
<Shield className="size-3 shrink-0" />
|
|
)}
|
|
{tab === "user"
|
|
? t("hosts.sharing.usersTab")
|
|
: t("hosts.sharing.rolesTab")}
|
|
{tab === "user" && selectedUserIds.size > 0 && (
|
|
<span>({selectedUserIds.size})</span>
|
|
)}
|
|
{tab === "role" && selectedRoleIds.size > 0 && (
|
|
<span>({selectedRoleIds.size})</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="relative shrink-0">
|
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground/50" />
|
|
<Input
|
|
placeholder={t("hosts.sharing.searchPlaceholder")}
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col border border-border h-28 overflow-y-auto shrink-0">
|
|
{targetTab === "user" &&
|
|
(filteredUsers.length === 0 ? (
|
|
<div className="px-3 py-4 text-xs text-muted-foreground/50 text-center">
|
|
{t("hosts.sharing.noMatches")}
|
|
</div>
|
|
) : (
|
|
filteredUsers.map((user) => {
|
|
const isSelected = selectedUserIds.has(user.id);
|
|
return (
|
|
<button
|
|
key={user.id}
|
|
type="button"
|
|
onClick={() =>
|
|
setSelectedUserIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(user.id)) next.delete(user.id);
|
|
else next.add(user.id);
|
|
return next;
|
|
})
|
|
}
|
|
className={`flex items-center gap-2 px-2.5 py-1.5 text-xs text-left border-b border-border/50 last:border-0 transition-colors shrink-0 ${isSelected ? "bg-accent-brand/10 text-accent-brand" : "hover:bg-muted/40"}`}
|
|
>
|
|
<div
|
|
className={`size-3.5 border flex items-center justify-center shrink-0 transition-colors ${isSelected ? "border-accent-brand bg-accent-brand" : "border-border bg-background"}`}
|
|
>
|
|
{isSelected && (
|
|
<Check className="size-2.5 text-background" />
|
|
)}
|
|
</div>
|
|
<User className="size-3 text-muted-foreground shrink-0" />
|
|
<span className="truncate">{user.username}</span>
|
|
</button>
|
|
);
|
|
})
|
|
))}
|
|
{targetTab === "role" &&
|
|
(filteredRoles.length === 0 ? (
|
|
<div className="px-3 py-4 text-xs text-muted-foreground/50 text-center">
|
|
{t("hosts.sharing.noMatches")}
|
|
</div>
|
|
) : (
|
|
filteredRoles.map((role) => {
|
|
const isSelected = selectedRoleIds.has(role.id);
|
|
return (
|
|
<button
|
|
key={role.id}
|
|
type="button"
|
|
onClick={() =>
|
|
setSelectedRoleIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(role.id)) next.delete(role.id);
|
|
else next.add(role.id);
|
|
return next;
|
|
})
|
|
}
|
|
className={`flex items-center gap-2 px-2.5 py-1.5 text-xs text-left border-b border-border/50 last:border-0 transition-colors shrink-0 ${isSelected ? "bg-accent-brand/10 text-accent-brand" : "hover:bg-muted/40"}`}
|
|
>
|
|
<div
|
|
className={`size-3.5 border flex items-center justify-center shrink-0 transition-colors ${isSelected ? "border-accent-brand bg-accent-brand" : "border-border bg-background"}`}
|
|
>
|
|
{isSelected && (
|
|
<Check className="size-2.5 text-background" />
|
|
)}
|
|
</div>
|
|
<Shield className="size-3 text-muted-foreground shrink-0" />
|
|
<span className="truncate">
|
|
{role.displayName || role.name}
|
|
</span>
|
|
</button>
|
|
);
|
|
})
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-end gap-2 shrink-0">
|
|
<div className="flex flex-col gap-1 flex-1 min-w-0">
|
|
<span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.sharing.permissionLevelLabel")}
|
|
</span>
|
|
<Select2
|
|
value={permissionLevel}
|
|
onChange={(e) =>
|
|
setPermissionLevel(e.target.value as SharePermissionLevel)
|
|
}
|
|
className="h-8 w-full px-2.5 text-xs border border-border bg-background hover:bg-muted/40 transition-colors"
|
|
>
|
|
{SHARE_PERMISSION_LEVELS.map((level) => (
|
|
<option key={level} value={level}>
|
|
{t(`hosts.sharing.levels.${level}.label`)}
|
|
</option>
|
|
))}
|
|
</Select2>
|
|
</div>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="flex flex-col gap-1 shrink-0"
|
|
>
|
|
<span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground text-left">
|
|
{t("hosts.sharing.expiryLabel")}
|
|
</span>
|
|
<span className="h-8 flex items-center justify-center px-2.5 text-xs border border-border hover:bg-muted/40 transition-colors whitespace-nowrap">
|
|
{t(`hosts.sharing.expiry.${expiryPreset}`)}
|
|
</span>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="text-xs">
|
|
{SHARE_EXPIRY_PRESETS.map((preset) => (
|
|
<DropdownMenuItem
|
|
key={preset.key}
|
|
onClick={() => setExpiryPreset(preset.key)}
|
|
>
|
|
{expiryPreset === preset.key ? (
|
|
<Check className="size-3 mr-1.5" />
|
|
) : (
|
|
<span className="size-3 mr-1.5" />
|
|
)}
|
|
{t(`hosts.sharing.expiry.${preset.key}`)}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<p className="text-[11px] text-muted-foreground leading-snug shrink-0">
|
|
{t(`hosts.sharing.levels.${permissionLevel}.description`)}
|
|
</p>
|
|
|
|
{expiryPreset === "custom" && (
|
|
<Input
|
|
type="number"
|
|
autoFocus
|
|
placeholder={t("hosts.sharing.customHoursPlaceholder")}
|
|
value={customHours}
|
|
onChange={(e) => setCustomHours(e.target.value)}
|
|
className="shrink-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
/>
|
|
)}
|
|
|
|
{summary && (
|
|
<div className="flex flex-col gap-1 text-xs text-muted-foreground border-t border-border pt-2 shrink-0">
|
|
<span>
|
|
{t("newUi.sidebar.fleets.fleetSharedSuccessfully", {
|
|
shared: summary.hostsShared,
|
|
total: summary.hostsTotal,
|
|
})}
|
|
</span>
|
|
{summary.hostResults.some((r) => !r.shared) && (
|
|
<div className="flex flex-col gap-0.5">
|
|
{summary.hostResults
|
|
.filter((r) => !r.shared)
|
|
.map((r) => (
|
|
<span
|
|
key={r.hostId}
|
|
className="text-[10px] text-destructive"
|
|
>
|
|
{t("newUi.sidebar.fleets.resultFailed")}: #
|
|
{r.hostId} ({r.reason ?? "unknown"})
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose}>
|
|
{t("common.close")}
|
|
</Button>
|
|
{fleet && fleet.memberCount > 0 && (
|
|
<Button
|
|
variant="outline"
|
|
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
disabled={
|
|
selectedCount === 0 ||
|
|
submitting ||
|
|
(expiryPreset === "custom" && !durationHours)
|
|
}
|
|
onClick={handleShare}
|
|
>
|
|
{submitting ? (
|
|
<Loader2 className="size-3.5 mr-1.5 animate-spin" />
|
|
) : (
|
|
<Share2 className="size-3.5 mr-1.5" />
|
|
)}
|
|
{selectedCount > 0
|
|
? t("hosts.sharing.shareWithCount", { count: selectedCount })
|
|
: t("hosts.sharing.shareButton")}
|
|
</Button>
|
|
)}
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function RunCommandTab({ fleetId }: { fleetId: number }) {
|
|
const { t } = useTranslation();
|
|
const [command, setCommand] = useState("");
|
|
const [inputs, setInputs] = useState<SnippetInput[]>([]);
|
|
const [inputValues, setInputValues] = useState<Record<string, string>>({});
|
|
const [running, setRunning] = useState(false);
|
|
const [results, setResults] = useState<FleetHostResult[] | null>(null);
|
|
|
|
useEffect(() => {
|
|
setInputs(extractSnippetInputs(command));
|
|
}, [command]);
|
|
|
|
async function handleRun() {
|
|
if (!command.trim()) {
|
|
toast.error(t("newUi.sidebar.fleets.commandRequired"));
|
|
return;
|
|
}
|
|
setRunning(true);
|
|
setResults(null);
|
|
try {
|
|
const { results: r } = await runFleetCommand(
|
|
fleetId,
|
|
command,
|
|
inputs.length > 0 ? inputValues : undefined,
|
|
);
|
|
setResults(r);
|
|
const failed = r.filter((x) => !x.success).length;
|
|
if (failed === 0) {
|
|
toast.success(t("newUi.sidebar.fleets.commandSucceeded"));
|
|
} else {
|
|
toast.warning(
|
|
t("newUi.sidebar.fleets.commandPartialFailure", {
|
|
failed,
|
|
total: r.length,
|
|
}),
|
|
);
|
|
}
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.commandFailed"));
|
|
} finally {
|
|
setRunning(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<Textarea
|
|
value={command}
|
|
onChange={(e) => setCommand(e.target.value)}
|
|
placeholder={t("newUi.sidebar.fleets.commandPlaceholder")}
|
|
rows={4}
|
|
className="font-mono text-xs"
|
|
/>
|
|
{inputs.length > 0 && (
|
|
<div className="flex flex-col gap-2 border border-border p-2.5">
|
|
<span className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.commandInputsLabel")}
|
|
</span>
|
|
{inputs.map((input) => (
|
|
<div key={input.key} className="flex flex-col gap-1">
|
|
<label className="text-xs">{input.label}</label>
|
|
<Input
|
|
value={inputValues[input.key] ?? ""}
|
|
onChange={(e) =>
|
|
setInputValues((prev) => ({
|
|
...prev,
|
|
[input.key]: e.target.value,
|
|
}))
|
|
}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleRun}
|
|
disabled={running}
|
|
className="self-start border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
>
|
|
{running ? (
|
|
<Loader2 className="size-3.5 mr-2 animate-spin" />
|
|
) : (
|
|
<Play className="size-3.5 mr-2" />
|
|
)}
|
|
{t("newUi.sidebar.fleets.runOnFleet")}
|
|
</Button>
|
|
{results && <ResultsList results={results} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TransferTab({ fleetId }: { fleetId: number }) {
|
|
const { t } = useTranslation();
|
|
const [direction, setDirection] = useState<"push" | "pull">("push");
|
|
const [remotePath, setRemotePath] = useState("");
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [results, setResults] = useState<FleetHostResult[] | null>(null);
|
|
|
|
async function handleTransfer() {
|
|
if (!remotePath.trim()) {
|
|
toast.error(t("newUi.sidebar.fleets.remotePathRequired"));
|
|
return;
|
|
}
|
|
if (direction === "push" && !file) {
|
|
toast.error(t("newUi.sidebar.fleets.fileRequired"));
|
|
return;
|
|
}
|
|
|
|
setBusy(true);
|
|
setResults(null);
|
|
try {
|
|
if (direction === "push" && file) {
|
|
const { results: r } = await pushFleetFile(fleetId, file, remotePath);
|
|
setResults(r);
|
|
} else {
|
|
const {
|
|
results: r,
|
|
blob,
|
|
fileName,
|
|
} = await pullFleetFile(fleetId, remotePath);
|
|
setResults(r);
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = fileName;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
toast.success(t("newUi.sidebar.fleets.transferComplete"));
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.transferFailed"));
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex gap-1.5">
|
|
<Button
|
|
size="sm"
|
|
variant={direction === "push" ? "default" : "outline"}
|
|
onClick={() => setDirection("push")}
|
|
>
|
|
<Upload className="size-3.5 mr-1.5" />
|
|
{t("newUi.sidebar.fleets.push")}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant={direction === "pull" ? "default" : "outline"}
|
|
onClick={() => setDirection("pull")}
|
|
>
|
|
<Download className="size-3.5 mr-1.5" />
|
|
{t("newUi.sidebar.fleets.pull")}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.remotePathLabel")}
|
|
</label>
|
|
<Input
|
|
value={remotePath}
|
|
onChange={(e) => setRemotePath(e.target.value)}
|
|
placeholder="/etc/hosts"
|
|
className="font-mono text-xs"
|
|
/>
|
|
</div>
|
|
|
|
{direction === "push" && (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.fileLabel")}
|
|
</label>
|
|
<Input
|
|
type="file"
|
|
onChange={(e) => setFile(e.target.files?.[0] ?? null)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<span className="text-[11px] text-muted-foreground">
|
|
{direction === "push"
|
|
? t("newUi.sidebar.fleets.pushHint")
|
|
: t("newUi.sidebar.fleets.pullHint")}
|
|
</span>
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleTransfer}
|
|
disabled={busy}
|
|
className="self-start border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
>
|
|
{busy && <Loader2 className="size-3.5 mr-2 animate-spin" />}
|
|
{direction === "push"
|
|
? t("newUi.sidebar.fleets.push")
|
|
: t("newUi.sidebar.fleets.pull")}
|
|
</Button>
|
|
|
|
{results && <ResultsList results={results} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InventoryTab({ fleetId }: { fleetId: number }) {
|
|
const { t } = useTranslation();
|
|
const [entries, setEntries] = useState<FleetInventoryEntry[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await getFleetInventory(fleetId);
|
|
setEntries(data);
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.inventoryLoadFailed"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [fleetId, t]);
|
|
|
|
useEffect(() => {
|
|
load();
|
|
}, [load]);
|
|
|
|
async function handleRefresh() {
|
|
setRefreshing(true);
|
|
try {
|
|
const { results } = await refreshFleetInventory(fleetId);
|
|
const failed = results.filter((r) => !r.success).length;
|
|
if (failed > 0) {
|
|
toast.warning(
|
|
t("newUi.sidebar.fleets.commandPartialFailure", {
|
|
failed,
|
|
total: results.length,
|
|
}),
|
|
);
|
|
} else {
|
|
toast.success(t("newUi.sidebar.fleets.inventoryRefreshed"));
|
|
}
|
|
await load();
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.inventoryRefreshFailed"));
|
|
} finally {
|
|
setRefreshing(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleRefresh}
|
|
disabled={refreshing}
|
|
size="sm"
|
|
className="self-start border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
>
|
|
{refreshing ? (
|
|
<Loader2 className="size-3.5 mr-2 animate-spin" />
|
|
) : (
|
|
<RefreshCw className="size-3.5 mr-2" />
|
|
)}
|
|
{t("newUi.sidebar.fleets.refreshInventory")}
|
|
</Button>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-8 text-muted-foreground">
|
|
<Loader2 className="size-4 animate-spin" />
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-2">
|
|
{entries.map((entry) => (
|
|
<div
|
|
key={entry.hostId}
|
|
className="flex flex-col gap-1 border border-border p-2.5"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Server className="size-3 shrink-0 text-muted-foreground" />
|
|
<span className="text-xs font-semibold">{entry.hostName}</span>
|
|
</div>
|
|
{entry.inventory ? (
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-0.5 text-[11px] text-muted-foreground pl-5">
|
|
<span>
|
|
{t("newUi.sidebar.fleets.inventoryOs")}:{" "}
|
|
{entry.inventory.osPrettyName ?? "-"}
|
|
</span>
|
|
<span>
|
|
{t("newUi.sidebar.fleets.inventoryKernel")}:{" "}
|
|
{entry.inventory.kernel ?? "-"}
|
|
</span>
|
|
<span>
|
|
{t("newUi.sidebar.fleets.inventoryArch")}:{" "}
|
|
{entry.inventory.architecture ?? "-"}
|
|
</span>
|
|
<span>
|
|
{t("newUi.sidebar.fleets.inventoryUptime")}:{" "}
|
|
{formatUptime(entry.inventory.uptimeSeconds)}
|
|
</span>
|
|
<span>
|
|
{t("newUi.sidebar.fleets.inventoryPackageManager")}:{" "}
|
|
{entry.inventory.packageManager ?? "-"}
|
|
</span>
|
|
<span>
|
|
{t("newUi.sidebar.fleets.inventoryCollectedAt")}:{" "}
|
|
{new Date(entry.inventory.collectedAt).toLocaleString()}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-[11px] text-muted-foreground pl-5">
|
|
{t("newUi.sidebar.fleets.inventoryNoData")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PackagesTab({ fleetId }: { fleetId: number }) {
|
|
const { t } = useTranslation();
|
|
const [action, setAction] = useState<FleetPackageAction>("install");
|
|
const [packageName, setPackageName] = useState("");
|
|
const [running, setRunning] = useState(false);
|
|
const [results, setResults] = useState<FleetHostResult[] | null>(null);
|
|
|
|
async function handleRun() {
|
|
if (action !== "upgrade-all" && !packageName.trim()) {
|
|
toast.error(t("newUi.sidebar.fleets.packageNameRequired"));
|
|
return;
|
|
}
|
|
setRunning(true);
|
|
setResults(null);
|
|
try {
|
|
const { results: r } = await runFleetPackageAction(
|
|
fleetId,
|
|
action,
|
|
action === "upgrade-all" ? undefined : packageName.trim(),
|
|
);
|
|
setResults(r);
|
|
const failed = r.filter((x) => !x.success).length;
|
|
if (failed === 0) {
|
|
toast.success(t("newUi.sidebar.fleets.commandSucceeded"));
|
|
} else {
|
|
toast.warning(
|
|
t("newUi.sidebar.fleets.commandPartialFailure", {
|
|
failed,
|
|
total: r.length,
|
|
}),
|
|
);
|
|
}
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.commandFailed"));
|
|
} finally {
|
|
setRunning(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.packageActionLabel")}
|
|
</label>
|
|
<select
|
|
className="px-2 py-1.5 text-xs bg-background border border-border text-foreground outline-none"
|
|
value={action}
|
|
onChange={(e) => setAction(e.target.value as FleetPackageAction)}
|
|
>
|
|
<option value="install">
|
|
{t("newUi.sidebar.fleets.packageInstall")}
|
|
</option>
|
|
<option value="remove">
|
|
{t("newUi.sidebar.fleets.packageRemove")}
|
|
</option>
|
|
<option value="upgrade-all">
|
|
{t("newUi.sidebar.fleets.packageUpgradeAll")}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
{action !== "upgrade-all" && (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-xs text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.packageNameLabel")}
|
|
</label>
|
|
<Input
|
|
value={packageName}
|
|
onChange={(e) => setPackageName(e.target.value)}
|
|
placeholder="curl"
|
|
className="font-mono text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<span className="text-[11px] text-muted-foreground">
|
|
{t("newUi.sidebar.fleets.packageHint")}
|
|
</span>
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={handleRun}
|
|
disabled={running}
|
|
className="self-start border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
>
|
|
{running ? (
|
|
<Loader2 className="size-3.5 mr-2 animate-spin" />
|
|
) : (
|
|
<Package className="size-3.5 mr-2" />
|
|
)}
|
|
{t("newUi.sidebar.fleets.runOnFleet")}
|
|
</Button>
|
|
|
|
{results && <ResultsList results={results} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type FleetActionView = "run" | "transfer" | "inventory" | "packages";
|
|
|
|
function FleetDetail({
|
|
fleet,
|
|
allHosts,
|
|
onBack,
|
|
onFleetChanged,
|
|
onOpenFleetInventory,
|
|
}: {
|
|
fleet: FleetRow;
|
|
allHosts: SSHHost[];
|
|
onBack: () => void;
|
|
onFleetChanged: () => void;
|
|
onOpenFleetInventory?: (fleetId: number) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [members, setMembers] = useState<FleetMemberRow[]>([]);
|
|
const [loadingMembers, setLoadingMembers] = useState(true);
|
|
const [pickerOpen, setPickerOpen] = useState(false);
|
|
const [shareOpen, setShareOpen] = useState(false);
|
|
const [actionView, setActionView] = useState<FleetActionView>("run");
|
|
|
|
const loadMembers = useCallback(async () => {
|
|
setLoadingMembers(true);
|
|
try {
|
|
const data = await getFleetMembers(fleet.id);
|
|
setMembers(data);
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.membersLoadFailed"));
|
|
} finally {
|
|
setLoadingMembers(false);
|
|
}
|
|
}, [fleet.id, t]);
|
|
|
|
useEffect(() => {
|
|
loadMembers();
|
|
}, [loadMembers]);
|
|
|
|
const memberIds = useMemo(() => new Set(members.map((m) => m.id)), [members]);
|
|
|
|
function handleMembersChanged() {
|
|
loadMembers();
|
|
onFleetChanged();
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 min-h-0">
|
|
<div className="flex items-center gap-2 p-3 border-b border-border shrink-0">
|
|
<Button variant="ghost" size="sm" onClick={onBack}>
|
|
<ChevronLeft className="size-4" />
|
|
</Button>
|
|
<span
|
|
className="size-2.5 shrink-0"
|
|
style={{ backgroundColor: fleet.color ?? "#6b7280" }}
|
|
/>
|
|
<span className="text-sm font-semibold truncate">{fleet.name}</span>
|
|
<Badge variant="secondary" className="ml-1">
|
|
{t("newUi.sidebar.fleets.memberCount", { count: members.length })}
|
|
</Badge>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="ml-auto"
|
|
onClick={() => setShareOpen(true)}
|
|
>
|
|
<Share2 className="size-3.5 mr-1.5" />
|
|
{t("newUi.sidebar.fleets.shareFleet")}
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={() => setPickerOpen(true)}>
|
|
<Settings2 className="size-3.5 mr-1.5" />
|
|
{t("newUi.sidebar.fleets.manageMembers")}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex-1 min-h-0 overflow-y-auto p-3">
|
|
{loadingMembers ? (
|
|
<div className="flex items-center justify-center py-8 text-muted-foreground">
|
|
<Loader2 className="size-4 animate-spin" />
|
|
</div>
|
|
) : members.length === 0 ? (
|
|
<div className="text-xs text-muted-foreground text-center py-8">
|
|
{t("newUi.sidebar.fleets.noMembers")}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<select
|
|
className="flex-1 px-2 py-1.5 text-xs bg-background border border-border text-foreground outline-none"
|
|
value={actionView}
|
|
onChange={(e) =>
|
|
setActionView(e.target.value as FleetActionView)
|
|
}
|
|
>
|
|
<option value="run">{t("newUi.sidebar.fleets.tabRun")}</option>
|
|
<option value="transfer">
|
|
{t("newUi.sidebar.fleets.tabTransfer")}
|
|
</option>
|
|
<option value="inventory">
|
|
{t("newUi.sidebar.fleets.tabInventory")}
|
|
</option>
|
|
<option value="packages">
|
|
{t("newUi.sidebar.fleets.tabPackages")}
|
|
</option>
|
|
</select>
|
|
{actionView === "inventory" && onOpenFleetInventory && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onOpenFleetInventory(fleet.id)}
|
|
title={t("newUi.sidebar.fleets.openInventoryTab")}
|
|
>
|
|
<ExternalLink className="size-3.5" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{actionView === "run" && <RunCommandTab fleetId={fleet.id} />}
|
|
{actionView === "transfer" && <TransferTab fleetId={fleet.id} />}
|
|
{actionView === "inventory" && <InventoryTab fleetId={fleet.id} />}
|
|
{actionView === "packages" && <PackagesTab fleetId={fleet.id} />}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<MemberPickerDialog
|
|
open={pickerOpen}
|
|
onClose={() => setPickerOpen(false)}
|
|
fleetId={fleet.id}
|
|
allHosts={allHosts}
|
|
memberIds={memberIds}
|
|
onChanged={handleMembersChanged}
|
|
/>
|
|
|
|
<FleetShareDialog
|
|
open={shareOpen}
|
|
onClose={() => setShareOpen(false)}
|
|
fleet={fleet}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function FleetsPanel({
|
|
active,
|
|
onOpenFleetInventory,
|
|
}: {
|
|
active?: boolean;
|
|
onOpenFleetInventory?: (fleetId: number) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [fleets, setFleets] = useState<FleetRow[]>([]);
|
|
const [allHosts, setAllHosts] = useState<SSHHost[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [search, setSearch] = useState("");
|
|
const [selectedFleet, setSelectedFleet] = useState<FleetRow | null>(null);
|
|
const [formOpen, setFormOpen] = useState(false);
|
|
const [editingFleet, setEditingFleet] = useState<FleetRow | null>(null);
|
|
const [deleteTarget, setDeleteTarget] = useState<FleetRow | null>(null);
|
|
const [shareTarget, setShareTarget] = useState<FleetRow | null>(null);
|
|
const hasLoadedRef = useRef(false);
|
|
|
|
const loadFleets = useCallback(async () => {
|
|
try {
|
|
const data = await listFleets();
|
|
setFleets(data);
|
|
setSelectedFleet((prev) =>
|
|
prev ? (data.find((f) => f.id === prev.id) ?? null) : null,
|
|
);
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.loadFailed"));
|
|
}
|
|
}, [t]);
|
|
|
|
useEffect(() => {
|
|
if (!active || hasLoadedRef.current) return;
|
|
hasLoadedRef.current = true;
|
|
setLoading(true);
|
|
Promise.all([listFleets(), getSSHHosts({ includeStatus: false })])
|
|
.then(([fleetData, hosts]) => {
|
|
setFleets(fleetData);
|
|
setAllHosts(hosts as unknown as SSHHost[]);
|
|
})
|
|
.catch((error: unknown) => {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.loadFailed"));
|
|
})
|
|
.finally(() => setLoading(false));
|
|
}, [active, hasLoadedRef, t]);
|
|
|
|
async function handleDelete() {
|
|
if (!deleteTarget) return;
|
|
try {
|
|
await deleteFleet(deleteTarget.id);
|
|
toast.success(t("newUi.sidebar.fleets.fleetDeleted"));
|
|
if (selectedFleet?.id === deleteTarget.id) setSelectedFleet(null);
|
|
setDeleteTarget(null);
|
|
loadFleets();
|
|
} catch (error) {
|
|
const message = getErrorMessage(error, "");
|
|
toast.error(message || t("newUi.sidebar.fleets.deleteFailed"));
|
|
}
|
|
}
|
|
|
|
const visibleFleets = fleets.filter((f) =>
|
|
f.name.toLowerCase().includes(search.trim().toLowerCase()),
|
|
);
|
|
|
|
if (selectedFleet) {
|
|
return (
|
|
<FleetDetail
|
|
fleet={selectedFleet}
|
|
allHosts={allHosts}
|
|
onBack={() => setSelectedFleet(null)}
|
|
onFleetChanged={loadFleets}
|
|
onOpenFleetInventory={onOpenFleetInventory}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 min-h-0">
|
|
<div className="flex items-center gap-2 p-3 border-b border-border shrink-0">
|
|
<Boxes className="size-4 text-muted-foreground" />
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<span className="truncate text-sm font-semibold">
|
|
{t("newUi.sidebar.fleets.title")}
|
|
</span>
|
|
<a
|
|
href="https://docs.termix.site/features/fleets/overview"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="w-fit text-[10px] text-accent-brand hover:underline"
|
|
>
|
|
{t("hosts.docsLink")}
|
|
</a>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="shrink-0 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
|
|
onClick={() => {
|
|
setEditingFleet(null);
|
|
setFormOpen(true);
|
|
}}
|
|
>
|
|
<Plus className="size-3.5 mr-1.5" />
|
|
{t("newUi.sidebar.fleets.createFleet")}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="p-3 pb-0 shrink-0">
|
|
<div className="relative">
|
|
<Search className="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
className="pl-7 h-8 text-xs"
|
|
placeholder={t("newUi.sidebar.fleets.searchFleets")}
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 min-h-0 overflow-y-auto p-3">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-8 text-muted-foreground">
|
|
<Loader2 className="size-4 animate-spin" />
|
|
</div>
|
|
) : visibleFleets.length === 0 ? (
|
|
<div className="text-xs text-muted-foreground text-center py-8">
|
|
{t("newUi.sidebar.fleets.noFleets")}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-1.5">
|
|
{visibleFleets.map((fleet) => (
|
|
<div
|
|
key={fleet.id}
|
|
className="flex items-center gap-2 border border-border p-2.5 cursor-pointer hover:bg-muted/40 group"
|
|
onClick={() => setSelectedFleet(fleet)}
|
|
>
|
|
<span
|
|
className="size-2.5 shrink-0"
|
|
style={{ backgroundColor: fleet.color ?? "#6b7280" }}
|
|
/>
|
|
<div className="flex flex-col min-w-0 flex-1">
|
|
<span className="text-xs font-semibold truncate">
|
|
{fleet.name}
|
|
</span>
|
|
{fleet.description && (
|
|
<span className="text-[11px] text-muted-foreground truncate">
|
|
{fleet.description}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<Badge variant="secondary" className="shrink-0">
|
|
{t("newUi.sidebar.fleets.memberCount", {
|
|
count: fleet.memberCount,
|
|
})}
|
|
</Badge>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="shrink-0 opacity-0 group-hover:opacity-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setShareTarget(fleet);
|
|
}}
|
|
>
|
|
<Share2 className="size-3.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="shrink-0 opacity-0 group-hover:opacity-100"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setEditingFleet(fleet);
|
|
setFormOpen(true);
|
|
}}
|
|
>
|
|
<Settings2 className="size-3.5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="shrink-0 opacity-0 group-hover:opacity-100 hover:text-destructive"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setDeleteTarget(fleet);
|
|
}}
|
|
>
|
|
<Trash2 className="size-3.5" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<FleetFormDialog
|
|
open={formOpen}
|
|
onClose={() => setFormOpen(false)}
|
|
fleet={editingFleet}
|
|
onSaved={loadFleets}
|
|
/>
|
|
|
|
<FleetShareDialog
|
|
open={!!shareTarget}
|
|
onClose={() => setShareTarget(null)}
|
|
fleet={shareTarget}
|
|
/>
|
|
|
|
<Dialog
|
|
open={!!deleteTarget}
|
|
onOpenChange={(next) => !next && setDeleteTarget(null)}
|
|
>
|
|
<DialogContent className="sm:max-w-sm">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{t("newUi.sidebar.fleets.deleteFleetTitle")}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t("newUi.sidebar.fleets.deleteFleetDescription", {
|
|
name: deleteTarget?.name,
|
|
})}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setDeleteTarget(null)}>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
<Button variant="destructive" onClick={handleDelete}>
|
|
<X className="size-3.5 mr-2" />
|
|
{t("common.delete")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|