ui(deploy): remove redundant HistoryDisclosure from Deployment tab
This commit is contained in:
@@ -3,7 +3,6 @@ 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 {
|
||||
@@ -40,8 +39,6 @@ export function DeploymentTab({ deployments, versions, appSlug, envSlug, externa
|
||||
)}
|
||||
<StartupLogPanel deployment={latest} appSlug={appSlug} envSlug={envSlug}
|
||||
className={styles.logFill} />
|
||||
<HistoryDisclosure deployments={deployments} versions={versions}
|
||||
appSlug={appSlug} envSlug={envSlug} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { DataTable } from '@cameleer/design-system';
|
||||
import type { Column } from '@cameleer/design-system';
|
||||
import type { Deployment, AppVersion } from '../../../../api/queries/admin/apps';
|
||||
import { timeAgo } from '../../../../utils/format-utils';
|
||||
import { StartupLogPanel } from '../../../../components/StartupLogPanel';
|
||||
import styles from '../AppDeploymentPage.module.css';
|
||||
|
||||
interface Props {
|
||||
deployments: Deployment[];
|
||||
versions: AppVersion[];
|
||||
appSlug: string;
|
||||
envSlug: string;
|
||||
}
|
||||
|
||||
export function HistoryDisclosure({ deployments, versions, appSlug, envSlug }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [expanded, setExpanded] = useState<string | null>(null);
|
||||
const logPanelRef = useRef<HTMLDivElement | null>(null);
|
||||
const versionMap = new Map(versions.map((v) => [v.id, v]));
|
||||
|
||||
useEffect(() => {
|
||||
if (expanded && logPanelRef.current) {
|
||||
logPanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
}, [expanded]);
|
||||
|
||||
const rows = deployments
|
||||
.slice()
|
||||
.sort((a, b) => (b.createdAt ?? '').localeCompare(a.createdAt ?? ''));
|
||||
|
||||
const columns: Column<Deployment>[] = [
|
||||
{ key: 'createdAt', header: 'Started', render: (_, d) => timeAgo(d.createdAt) },
|
||||
{
|
||||
key: 'appVersionId', header: 'Version',
|
||||
render: (_, d) => {
|
||||
const v = versionMap.get(d.appVersionId);
|
||||
return v ? `v${v.version}` : '?';
|
||||
},
|
||||
},
|
||||
{ key: 'status', header: 'Status' },
|
||||
{
|
||||
key: 'deployedAt', header: 'Duration',
|
||||
render: (_, d) => d.deployedAt && d.createdAt
|
||||
? `${Math.round((Date.parse(d.deployedAt) - Date.parse(d.createdAt)) / 1000)}s`
|
||||
: '—',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.historyRow}>
|
||||
<button type="button" className={styles.disclosureToggle} onClick={() => setOpen(!open)}>
|
||||
{open ? '▼' : '▶'} History ({rows.length})
|
||||
</button>
|
||||
{open && (
|
||||
<>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={rows}
|
||||
onRowClick={(row) => setExpanded(expanded === row.id ? null : row.id)}
|
||||
/>
|
||||
{expanded && (() => {
|
||||
const d = rows.find((r) => r.id === expanded);
|
||||
if (!d) return null;
|
||||
return (
|
||||
<div ref={logPanelRef}>
|
||||
<StartupLogPanel deployment={d} appSlug={appSlug} envSlug={envSlug} />
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user