mirror of
https://github.com/YuzuZensai/Termix.git
synced 2026-09-13 10:49:03 +00:00
61db35daad
* Add comprehensive Chinese internationalization support - Implemented i18n framework with react-i18next for multi-language support - Added Chinese (zh) and English (en) translation files with comprehensive coverage - Localized Admin interface, authentication flows, and error messages - Translated FileManager operations and UI elements - Updated HomepageAuth component with localized authentication messages - Localized LeftSidebar navigation and host management - Added language switcher component (shown after login only) - Configured default language as English with Chinese as secondary option - Localized TOTPSetup two-factor authentication interface - Updated Docker build to include translation files - Achieved 95%+ UI localization coverage across core components Co-Authored-By: Claude <noreply@anthropic.com> * Extend Chinese localization coverage to Host Manager components - Added comprehensive translations for HostManagerHostViewer component - Localized all host management UI text including import/export features - Translated error messages and confirmation dialogs for host operations - Added translations for HostManagerHostEditor validation messages - Localized connection details, organization settings, and form labels - Fixed syntax error in FileManagerOperations component - Achieved near-complete localization of SSH host management interface - Updated placeholders and tooltips for better user guidance Co-Authored-By: Claude <noreply@anthropic.com> * Complete comprehensive Chinese localization for Termix - Added full localization support for Tunnel components (connected/disconnected states, retry messages) - Localized all tunnel status messages and connection errors - Added translations for port forwarding UI elements - Verified Server, TopNavbar, and Tab components already have complete i18n support - Achieved 99%+ localization coverage across entire application - All core UI components now fully support Chinese and English languages This completes the comprehensive internationalization effort for the Termix SSH management platform. Co-Authored-By: Claude <noreply@anthropic.com> * Localize additional Host Manager components and authentication settings - Added translations for all authentication options (Password, Key, SSH Private Key) - Localized form labels in HostManagerHostEditor (Pin Connection, Enable Terminal/Tunnel/FileManager) - Translated Upload/Update Key button states - Localized Host Viewer and Add/Edit Host tab labels - Added Chinese translations for all host management settings - Fixed duplicate translation keys in JSON files Co-Authored-By: Claude <noreply@anthropic.com> * Extend localization coverage to UI components and common strings - Added comprehensive common translations (online/offline, success/error, etc.) - Localized status indicator component with all status states - Updated FileManagerLeftSidebar toast messages for rename/delete operations - Added translations for UI elements (close, toggle sidebar, etc.) - Expanded placeholder translations for form inputs - Added Chinese translations for all new common strings - Improved consistency across component status messages Co-Authored-By: Claude <noreply@anthropic.com> * Complete Chinese localization for remaining UI components - Add comprehensive Chinese translations for Host Manager component - Translate all form labels, buttons, and descriptions - Add translations for SSH configuration warnings and instructions - Localize tunnel connection settings and port forwarding options - Localize SSH Tools panel - Translate key recording functionality - Add translations for settings and configuration options - Translate homepage welcome messages and navigation elements - Add Chinese translations for login success messages - Localize "Updates & Releases" section title - Translate sidebar "Host Manager" button - Fix translation key display issues - Remove duplicate translation keys in both language files - Ensure all components properly reference translation keys - Fix hosts.tunnelConnections key mapping This completes the full Chinese localization of the Termix application, achieving near 100% UI translation coverage while maintaining English as the default language. * Complete final Chinese localization for Host Manager tunnel configuration - Add Chinese translations for authentication UI elements - Translate "Authentication", "Password", and "Key" tab labels - Localize SSH private key and key password fields - Add translations for key type selector - Localize tunnel connection configuration descriptions - Translate retry attempts and retry interval descriptions - Add dynamic tunnel forwarding description with port parameters - Localize endpoint SSH configuration labels - Fix missing translation keys - Add "upload" translation for file upload button - Ensure all FormLabel and FormDescription elements use translation keys This completes the comprehensive Chinese localization of the entire Termix application, achieving 100% UI translation coverage. * Fix OIDC errors for "Failed to get user information" * Fix OIDC errors for "Failed to get user information" * Fix spelling error * Fix PR feedback: Improve Profile section translations and UX - Fixed password reset translations in Profile section - Moved language selector from TopNavbar to Profile page - Added profile.selectPreferredLanguage translation key - Improved user experience for language preferences * Migrate everything to alert system, update user.ts for OIDC updates. * Update env * Fix OIDC errors for "Failed to get user information" * Fix OIDC errors for "Failed to get user information" * Fix spelling error * Migrate everything to alert system, update user.ts for OIDC updates. * Translation update * Translation update * Translation update * Translate tunnels * Comment update * Update build workflow naming * Add more translations, fix user delete failing * Fix config editor erorrs causing user delete failure --------- Co-authored-by: ZacharyZcR <PayasoNorahC@protonmail.com> Co-authored-by: Claude <noreply@anthropic.com>
490 lines
30 KiB
TypeScript
490 lines
30 KiB
TypeScript
import React from "react";
|
|
import {Button} from "@/components/ui/button.tsx";
|
|
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.tsx";
|
|
import {Separator} from "@/components/ui/separator.tsx";
|
|
import {useTranslation} from 'react-i18next';
|
|
import {
|
|
Loader2,
|
|
Pin,
|
|
Terminal,
|
|
Network,
|
|
FileEdit,
|
|
Tag,
|
|
Play,
|
|
Square,
|
|
AlertCircle,
|
|
Clock,
|
|
Wifi,
|
|
WifiOff,
|
|
Zap,
|
|
X
|
|
} from "lucide-react";
|
|
import {Badge} from "@/components/ui/badge.tsx";
|
|
|
|
const CONNECTION_STATES = {
|
|
DISCONNECTED: "disconnected",
|
|
CONNECTING: "connecting",
|
|
CONNECTED: "connected",
|
|
VERIFYING: "verifying",
|
|
FAILED: "failed",
|
|
UNSTABLE: "unstable",
|
|
RETRYING: "retrying",
|
|
WAITING: "waiting",
|
|
DISCONNECTING: "disconnecting"
|
|
};
|
|
|
|
interface TunnelConnection {
|
|
sourcePort: number;
|
|
endpointPort: number;
|
|
endpointHost: string;
|
|
maxRetries: number;
|
|
retryInterval: number;
|
|
autoStart: boolean;
|
|
}
|
|
|
|
interface SSHHost {
|
|
id: number;
|
|
name: string;
|
|
ip: string;
|
|
port: number;
|
|
username: string;
|
|
folder: string;
|
|
tags: string[];
|
|
pin: boolean;
|
|
authType: string;
|
|
enableTerminal: boolean;
|
|
enableTunnel: boolean;
|
|
enableFileManager: boolean;
|
|
defaultPath: string;
|
|
tunnelConnections: TunnelConnection[];
|
|
createdAt: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
interface TunnelStatus {
|
|
status: string;
|
|
reason?: string;
|
|
errorType?: string;
|
|
retryCount?: number;
|
|
maxRetries?: number;
|
|
nextRetryIn?: number;
|
|
retryExhausted?: boolean;
|
|
}
|
|
|
|
interface SSHTunnelObjectProps {
|
|
host: SSHHost;
|
|
tunnelStatuses: Record<string, TunnelStatus>;
|
|
tunnelActions: Record<string, boolean>;
|
|
onTunnelAction: (action: 'connect' | 'disconnect' | 'cancel', host: SSHHost, tunnelIndex: number) => Promise<any>;
|
|
compact?: boolean;
|
|
bare?: boolean;
|
|
}
|
|
|
|
export function TunnelObject({
|
|
host,
|
|
tunnelStatuses,
|
|
tunnelActions,
|
|
onTunnelAction,
|
|
compact = false,
|
|
bare = false
|
|
}: SSHTunnelObjectProps): React.ReactElement {
|
|
const {t} = useTranslation();
|
|
|
|
const getTunnelStatus = (tunnelIndex: number): TunnelStatus | undefined => {
|
|
const tunnel = host.tunnelConnections[tunnelIndex];
|
|
const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
|
|
return tunnelStatuses[tunnelName];
|
|
};
|
|
|
|
const getTunnelStatusDisplay = (status: TunnelStatus | undefined) => {
|
|
if (!status) return {
|
|
icon: <WifiOff className="h-4 w-4"/>,
|
|
text: t('tunnels.unknown'),
|
|
color: 'text-muted-foreground',
|
|
bgColor: 'bg-muted/50',
|
|
borderColor: 'border-border'
|
|
};
|
|
|
|
const statusValue = status.status || 'DISCONNECTED';
|
|
|
|
switch (statusValue.toUpperCase()) {
|
|
case 'CONNECTED':
|
|
return {
|
|
icon: <Wifi className="h-4 w-4"/>,
|
|
text: t('tunnels.connected'),
|
|
color: 'text-green-600 dark:text-green-400',
|
|
bgColor: 'bg-green-500/10 dark:bg-green-400/10',
|
|
borderColor: 'border-green-500/20 dark:border-green-400/20'
|
|
};
|
|
case 'CONNECTING':
|
|
return {
|
|
icon: <Loader2 className="h-4 w-4 animate-spin"/>,
|
|
text: t('tunnels.connecting'),
|
|
color: 'text-blue-600 dark:text-blue-400',
|
|
bgColor: 'bg-blue-500/10 dark:bg-blue-400/10',
|
|
borderColor: 'border-blue-500/20 dark:border-blue-400/20'
|
|
};
|
|
case 'DISCONNECTING':
|
|
return {
|
|
icon: <Loader2 className="h-4 w-4 animate-spin"/>,
|
|
text: t('tunnels.disconnecting'),
|
|
color: 'text-orange-600 dark:text-orange-400',
|
|
bgColor: 'bg-orange-500/10 dark:bg-orange-400/10',
|
|
borderColor: 'border-orange-500/20 dark:border-orange-400/20'
|
|
};
|
|
case 'DISCONNECTED':
|
|
return {
|
|
icon: <WifiOff className="h-4 w-4"/>,
|
|
text: t('tunnels.disconnected'),
|
|
color: 'text-muted-foreground',
|
|
bgColor: 'bg-muted/30',
|
|
borderColor: 'border-border'
|
|
};
|
|
case 'WAITING':
|
|
return {
|
|
icon: <Clock className="h-4 w-4"/>,
|
|
color: 'text-blue-600 dark:text-blue-400',
|
|
bgColor: 'bg-blue-500/10 dark:bg-blue-400/10',
|
|
borderColor: 'border-blue-500/20 dark:border-blue-400/20'
|
|
};
|
|
case 'ERROR':
|
|
case 'FAILED':
|
|
return {
|
|
icon: <AlertCircle className="h-4 w-4"/>,
|
|
text: status.reason || t('tunnels.error'),
|
|
color: 'text-red-600 dark:text-red-400',
|
|
bgColor: 'bg-red-500/10 dark:bg-red-400/10',
|
|
borderColor: 'border-red-500/20 dark:border-red-400/20'
|
|
};
|
|
default:
|
|
return {
|
|
icon: <WifiOff className="h-4 w-4"/>,
|
|
text: statusValue,
|
|
color: 'text-muted-foreground',
|
|
bgColor: 'bg-muted/30',
|
|
borderColor: 'border-border'
|
|
};
|
|
}
|
|
};
|
|
|
|
if (bare) {
|
|
return (
|
|
<div className="w-full min-w-0">
|
|
<div className="space-y-3">
|
|
{host.tunnelConnections && host.tunnelConnections.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{host.tunnelConnections.map((tunnel, tunnelIndex) => {
|
|
const status = getTunnelStatus(tunnelIndex);
|
|
const statusDisplay = getTunnelStatusDisplay(status);
|
|
const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
|
|
const isActionLoading = tunnelActions[tunnelName];
|
|
const statusValue = status?.status?.toUpperCase() || 'DISCONNECTED';
|
|
const isConnected = statusValue === 'CONNECTED';
|
|
const isConnecting = statusValue === 'CONNECTING';
|
|
const isDisconnecting = statusValue === 'DISCONNECTING';
|
|
const isRetrying = statusValue === 'RETRYING';
|
|
const isWaiting = statusValue === 'WAITING';
|
|
|
|
return (
|
|
<div key={tunnelIndex}
|
|
className={`border rounded-lg p-3 min-w-0 ${statusDisplay.bgColor} ${statusDisplay.borderColor}`}>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex items-start gap-2 flex-1 min-w-0">
|
|
<span className={`${statusDisplay.color} mt-0.5 flex-shrink-0`}>
|
|
{statusDisplay.icon}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium break-words">
|
|
{t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort}
|
|
</div>
|
|
<div className={`text-xs ${statusDisplay.color} font-medium`}>
|
|
{statusDisplay.text}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-end gap-1 flex-shrink-0 min-w-[120px]">
|
|
{!isActionLoading ? (
|
|
<div className="flex flex-col gap-1">
|
|
{isConnected ? (
|
|
<>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => onTunnelAction('disconnect', host, tunnelIndex)}
|
|
className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs"
|
|
>
|
|
<Square className="h-3 w-3 mr-1"/>
|
|
{t('tunnels.disconnect')}
|
|
</Button>
|
|
</>
|
|
) : isRetrying || isWaiting ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => onTunnelAction('cancel', host, tunnelIndex)}
|
|
className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs"
|
|
>
|
|
<X className="h-3 w-3 mr-1"/>
|
|
{t('tunnels.cancel')}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => onTunnelAction('connect', host, tunnelIndex)}
|
|
disabled={isConnecting || isDisconnecting}
|
|
className="h-7 px-2 text-green-600 dark:text-green-400 border-green-500/30 dark:border-green-400/30 hover:bg-green-500/10 dark:hover:bg-green-400/10 hover:border-green-500/50 dark:hover:border-green-400/50 text-xs"
|
|
>
|
|
<Play className="h-3 w-3 mr-1"/>
|
|
{t('tunnels.connect')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled
|
|
className="h-7 px-2 text-muted-foreground border-border text-xs"
|
|
>
|
|
<Loader2 className="h-3 w-3 mr-1 animate-spin"/>
|
|
{isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && (
|
|
<div
|
|
className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-500/10 dark:bg-red-400/10 rounded px-3 py-2 border border-red-500/20 dark:border-red-400/20">
|
|
<div className="font-medium mb-1">{t('tunnels.error')}:</div>
|
|
{status.reason}
|
|
{status.reason && status.reason.includes('Max retries exhausted') && (
|
|
<>
|
|
<div
|
|
className="mt-2 pt-2 border-t border-red-500/20 dark:border-red-400/20">
|
|
{t('tunnels.checkDockerLogs')} <a
|
|
href="https://discord.com/invite/jVQGdvHDrf" target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline text-blue-600 dark:text-blue-400">Discord</a> or
|
|
create a <a
|
|
href="https://github.com/LukeGus/Termix/issues/new"
|
|
target="_blank" rel="noopener noreferrer"
|
|
className="underline text-blue-600 dark:text-blue-400">GitHub
|
|
issue</a> for help.
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{(statusValue === 'RETRYING' || statusValue === 'WAITING') && status?.retryCount && status?.maxRetries && (
|
|
<div
|
|
className="mt-2 text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-500/10 dark:bg-yellow-400/10 rounded px-3 py-2 border border-yellow-500/20 dark:border-yellow-400/20">
|
|
<div className="font-medium mb-1">
|
|
{statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')}
|
|
</div>
|
|
<div>
|
|
{t('tunnels.attempt', { current: status.retryCount, max: status.maxRetries })}
|
|
{status.nextRetryIn && (
|
|
<span> • {t('tunnels.nextRetryIn', { seconds: status.nextRetryIn })}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-4 text-muted-foreground">
|
|
<Network className="h-8 w-8 mx-auto mb-2 opacity-50"/>
|
|
<p className="text-sm">{t('tunnels.noTunnelConnections')}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full bg-card border-border shadow-sm hover:shadow-md transition-shadow relative group p-0">
|
|
<div className="p-4">
|
|
{!compact && (
|
|
<div className="flex items-center justify-between gap-2 mb-3">
|
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
|
{host.pin && <Pin className="h-4 w-4 text-yellow-500 flex-shrink-0"/>}
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-card-foreground truncate">
|
|
{host.name || `${host.username}@${host.ip}`}
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{host.ip}:{host.port} • {host.username}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!compact && host.tags && host.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1 mb-3">
|
|
{host.tags.slice(0, 3).map((tag, index) => (
|
|
<Badge key={index} variant="secondary" className="text-xs px-1 py-0">
|
|
<Tag className="h-2 w-2 mr-0.5"/>
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
{host.tags.length > 3 && (
|
|
<Badge variant="outline" className="text-xs px-1 py-0">
|
|
+{host.tags.length - 3}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{!compact && <Separator className="mb-3"/>}
|
|
|
|
<div className="space-y-3">
|
|
{!compact && (
|
|
<h4 className="text-sm font-medium text-card-foreground flex items-center gap-2">
|
|
<Network className="h-4 w-4"/>
|
|
{t('tunnels.tunnelConnections')} ({host.tunnelConnections.length})
|
|
</h4>
|
|
)}
|
|
{host.tunnelConnections && host.tunnelConnections.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{host.tunnelConnections.map((tunnel, tunnelIndex) => {
|
|
const status = getTunnelStatus(tunnelIndex);
|
|
const statusDisplay = getTunnelStatusDisplay(status);
|
|
const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
|
|
const isActionLoading = tunnelActions[tunnelName];
|
|
const statusValue = status?.status?.toUpperCase() || 'DISCONNECTED';
|
|
const isConnected = statusValue === 'CONNECTED';
|
|
const isConnecting = statusValue === 'CONNECTING';
|
|
const isDisconnecting = statusValue === 'DISCONNECTING';
|
|
const isRetrying = statusValue === 'RETRYING';
|
|
const isWaiting = statusValue === 'WAITING';
|
|
|
|
return (
|
|
<div key={tunnelIndex}
|
|
className={`border rounded-lg p-3 ${statusDisplay.bgColor} ${statusDisplay.borderColor}`}>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex items-start gap-2 flex-1 min-w-0">
|
|
<span className={`${statusDisplay.color} mt-0.5 flex-shrink-0`}>
|
|
{statusDisplay.icon}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium break-words">
|
|
{t('tunnels.port')} {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort}
|
|
</div>
|
|
<div className={`text-xs ${statusDisplay.color} font-medium`}>
|
|
{statusDisplay.text}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 flex-shrink-0">
|
|
{!isActionLoading && (
|
|
<div className="flex flex-col gap-1">
|
|
{isConnected ? (
|
|
<>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => onTunnelAction('disconnect', host, tunnelIndex)}
|
|
className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs"
|
|
>
|
|
<Square className="h-3 w-3 mr-1"/>
|
|
{t('tunnels.disconnect')}
|
|
</Button>
|
|
</>
|
|
) : isRetrying || isWaiting ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => onTunnelAction('cancel', host, tunnelIndex)}
|
|
className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs"
|
|
>
|
|
<X className="h-3 w-3 mr-1"/>
|
|
{t('tunnels.cancel')}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => onTunnelAction('connect', host, tunnelIndex)}
|
|
disabled={isConnecting || isDisconnecting}
|
|
className="h-7 px-2 text-green-600 dark:text-green-400 border-green-500/30 dark:border-green-400/30 hover:bg-green-500/10 dark:hover:bg-green-400/10 hover:border-green-500/50 dark:hover:border-green-400/50 text-xs"
|
|
>
|
|
<Play className="h-3 w-3 mr-1"/>
|
|
{t('tunnels.connect')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
{isActionLoading && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled
|
|
className="h-7 px-2 text-muted-foreground border-border text-xs"
|
|
>
|
|
<Loader2 className="h-3 w-3 mr-1 animate-spin"/>
|
|
{isConnected ? t('tunnels.disconnecting') : isRetrying || isWaiting ? t('tunnels.canceling') : t('tunnels.connecting')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && (
|
|
<div
|
|
className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-500/10 dark:bg-red-400/10 rounded px-3 py-2 border border-red-500/20 dark:border-red-400/20">
|
|
<div className="font-medium mb-1">{t('tunnels.error')}:</div>
|
|
{status.reason}
|
|
{status.reason && status.reason.includes('Max retries exhausted') && (
|
|
<>
|
|
<div
|
|
className="mt-2 pt-2 border-t border-red-500/20 dark:border-red-400/20">
|
|
{t('tunnels.checkDockerLogs')} <a
|
|
href="https://discord.com/invite/jVQGdvHDrf" target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline text-blue-600 dark:text-blue-400">Discord</a> or
|
|
create a <a
|
|
href="https://github.com/LukeGus/Termix/issues/new"
|
|
target="_blank" rel="noopener noreferrer"
|
|
className="underline text-blue-600 dark:text-blue-400">GitHub
|
|
issue</a> for help.
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{(statusValue === 'RETRYING' || statusValue === 'WAITING') && status?.retryCount && status?.maxRetries && (
|
|
<div
|
|
className="mt-2 text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-500/10 dark:bg-yellow-400/10 rounded px-3 py-2 border border-yellow-500/20 dark:border-yellow-400/20">
|
|
<div className="font-medium mb-1">
|
|
{statusValue === 'WAITING' ? t('tunnels.waitingForRetry') : t('tunnels.retryingConnection')}
|
|
</div>
|
|
<div>
|
|
{t('tunnels.attempt', { current: status.retryCount, max: status.maxRetries })}
|
|
{status.nextRetryIn && (
|
|
<span> • {t('tunnels.nextRetryIn', { seconds: status.nextRetryIn })}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-4 text-muted-foreground">
|
|
<Network className="h-8 w-8 mx-auto mb-2 opacity-50"/>
|
|
<p className="text-sm">{t('tunnels.noTunnelConnections')}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |