diff --git a/ui/src/components/StartupLogPanel.module.css b/ui/src/components/StartupLogPanel.module.css index c6b724b5..4551ec5b 100644 --- a/ui/src/components/StartupLogPanel.module.css +++ b/ui/src/components/StartupLogPanel.module.css @@ -4,6 +4,9 @@ border-radius: 6px; overflow: hidden; margin-top: 8px; + display: flex; + flex-direction: column; + min-height: 0; } .header { diff --git a/ui/src/components/StartupLogPanel.tsx b/ui/src/components/StartupLogPanel.tsx index 150989ab..27e156ce 100644 --- a/ui/src/components/StartupLogPanel.tsx +++ b/ui/src/components/StartupLogPanel.tsx @@ -8,9 +8,10 @@ interface StartupLogPanelProps { deployment: Deployment; appSlug: string; envSlug: string; + className?: string; } -export function StartupLogPanel({ deployment, appSlug, envSlug }: StartupLogPanelProps) { +export function StartupLogPanel({ deployment, appSlug, envSlug, className }: StartupLogPanelProps) { const isStarting = deployment.status === 'STARTING'; const isFailed = deployment.status === 'FAILED'; @@ -21,7 +22,7 @@ export function StartupLogPanel({ deployment, appSlug, envSlug }: StartupLogPane if (entries.length === 0 && !isStarting) return null; return ( -
+
Startup Logs @@ -38,7 +39,7 @@ export function StartupLogPanel({ deployment, appSlug, envSlug }: StartupLogPane {entries.length} lines
{entries.length > 0 ? ( - + ) : (
Waiting for container output...
)} diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/DeploymentTab.tsx b/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/DeploymentTab.tsx new file mode 100644 index 00000000..8a3bcc0e --- /dev/null +++ b/ui/src/pages/AppsTab/AppDeploymentPage/DeploymentTab/DeploymentTab.tsx @@ -0,0 +1,51 @@ +import type { Deployment, AppVersion } from '../../../../api/queries/admin/apps'; +import { DeploymentProgress } from '../../../../components/DeploymentProgress'; +import { StartupLogPanel } from '../../../../components/StartupLogPanel'; +import { EmptyState } from '@cameleer/design-system'; +import { StatusCard } from './StatusCard'; +import { HistoryDisclosure } from './HistoryDisclosure'; +import styles from '../AppDeploymentPage.module.css'; + +interface Props { + deployments: Deployment[]; + versions: AppVersion[]; + appSlug: string; + envSlug: string; + externalUrl: string; + onStop: (deploymentId: string) => void; + onStart: (deploymentId: string) => void; +} + +export function DeploymentTab({ deployments, versions, appSlug, envSlug, externalUrl, onStop, onStart }: Props) { + const latest = deployments + .slice() + .sort((a, b) => (b.createdAt ?? '').localeCompare(a.createdAt ?? ''))[0] ?? null; + + if (!latest) { + return ; + } + + const version = versions.find((v) => v.id === latest.appVersionId) ?? null; + + return ( +
+ onStop(latest.id)} + onStart={() => onStart(latest.id)} + /> + {latest.status === 'STARTING' && ( + + )} + {latest.status === 'FAILED' && ( + + )} + + +
+ ); +}