diff --git a/src/components/OverviewTab.tsx b/src/components/OverviewTab.tsx index 210d7c9..4fbe759 100644 --- a/src/components/OverviewTab.tsx +++ b/src/components/OverviewTab.tsx @@ -9,6 +9,7 @@ import { formatUptime } from '@/lib/stats'; import { STATUS_COLORS, STATUS_LABELS, formatRelativeTime, formatDuration } from '@/lib/deployments'; import type { DeploymentStatus } from '@/lib/deployments'; import type { HealthStatus } from '@/lib/PortalContext'; +import { getCoolifyUrl } from '@/lib/services'; import type { Service, DiscoveredService } from '@/lib/services'; function isDiscoveredService(s: Service): s is DiscoveredService { @@ -208,13 +209,24 @@ export function OverviewTab() { className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 border border-red-100 dark:border-red-800/30" > - {s.name} + {s.name} + {isDiscoveredService(s) && ( + + + + )} {uuid && ( controlService(s, 'start')} disabled={loading} title={`Start ${s.name}`} - className="ml-0.5 p-0.5 rounded hover:bg-red-100 dark:hover:bg-red-800/30 transition-colors disabled:opacity-50" + className="p-0.5 rounded hover:bg-red-100 dark:hover:bg-red-800/30 transition-colors disabled:opacity-50" > {loading ? ( @@ -243,13 +255,24 @@ export function OverviewTab() { className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-slate-50 dark:bg-stone-800/50 text-slate-500 dark:text-stone-500 border border-slate-200 dark:border-stone-700/50" > - {s.name} + {s.name} + {isDiscoveredService(s) && ( + + + + )} {uuid && ( controlService(s, 'start')} disabled={loading} title={`Start ${s.name}`} - className="ml-0.5 p-0.5 rounded hover:bg-slate-200 dark:hover:bg-stone-700 transition-colors disabled:opacity-50" + className="p-0.5 rounded hover:bg-slate-200 dark:hover:bg-stone-700 transition-colors disabled:opacity-50" > {loading ? ( @@ -278,31 +301,44 @@ export function OverviewTab() { className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 border border-emerald-100 dark:border-emerald-800/30" > - {s.name} - {uuid && ( - - controlService(s, 'restart')} - disabled={loading} - title={`Restart ${s.name}`} - className="p-0.5 rounded hover:bg-emerald-100 dark:hover:bg-emerald-800/30 transition-colors disabled:opacity-50" + {s.name} + + {isDiscoveredService(s) && ( + - {loading ? ( - - ) : ( - - )} - - controlService(s, 'stop')} - disabled={loading} - title={`Stop ${s.name}`} - className="p-0.5 rounded hover:bg-red-100 dark:hover:bg-red-800/30 hover:text-red-500 transition-colors disabled:opacity-50" - > - - - - )} + + + )} + {uuid && ( + <> + controlService(s, 'restart')} + disabled={loading} + title={`Restart ${s.name}`} + className="p-0.5 rounded hover:bg-emerald-100 dark:hover:bg-emerald-800/30 transition-colors disabled:opacity-50" + > + {loading ? ( + + ) : ( + + )} + + controlService(s, 'stop')} + disabled={loading} + title={`Stop ${s.name}`} + className="p-0.5 rounded hover:bg-red-100 dark:hover:bg-red-800/30 hover:text-red-500 transition-colors disabled:opacity-50" + > + + + > + )} + ); })} diff --git a/src/components/ServiceCard.tsx b/src/components/ServiceCard.tsx index 2975a0b..bfdfb1f 100644 --- a/src/components/ServiceCard.tsx +++ b/src/components/ServiceCard.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState, useCallback } from 'react'; -import { Service, DiscoveredService } from '@/lib/services'; +import { Service, DiscoveredService, getCoolifyUrl } from '@/lib/services'; import { HealthStatus } from '@/lib/PortalContext'; import { Icon } from './Icons'; @@ -101,13 +101,24 @@ export function ServiceCard({ service, status }: ServiceCardProps) { return ( - {/* Top row: badges */} + {/* Top row: badges + links */} {resourceBadge && ( {resourceBadge} )} + {discovered && ( + + + + )} {/* Clickable area for opening service URL */}