show common app pipeline sha and duration
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
2026-07-09 10:22:11 +09:00
parent 3cab64a256
commit 14a779ce01
4 changed files with 39 additions and 19 deletions
+19 -19
View File
@@ -6,7 +6,7 @@ import { PageTitle } from '../../layout/AppLayout';
import { cn } from '../../lib/utils';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import { listCommonAppPipelines, type CommonAppPipeline } from './common-app-api';
import { formatPipelineRelativeTime, formatRepositoryName, isActivePipelineStatus, pipelineStatusDotClass, pipelineStatusTone } from './common-app-utils';
import { formatDuration, formatPipelineRelativeTime, formatRepositoryName, formatShortSha, isActivePipelineStatus, pipelineStatusDotClass, pipelineStatusTone } from './common-app-utils';
export function CommonAppBuildPage() {
const { toast } = useToast();
@@ -77,25 +77,25 @@ export function CommonAppBuildPage() {
) : null}
<div className="divide-y divide-border">
{pipelines.map((pipeline) => (
<div key={pipeline.id} className="px-5 py-4 transition-colors hover:bg-muted/20">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<div className="flex min-w-0 items-center gap-2">
<span className={cn('size-2.5 shrink-0 rounded-full', pipelineStatusDotClass(pipeline.status))} />
<p className="truncate text-sm font-semibold">{formatRepositoryName(pipeline.repository)}</p>
</div>
<p className="mt-1 truncate text-sm text-muted-foreground">{pipeline.message || '-'}</p>
<div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
<Badge tone={pipelineStatusTone(pipeline.status)}>
<span className="inline-flex items-center gap-1.5">
{isActivePipelineStatus(pipeline.status) ? <Loader2 className="size-3 animate-spin" /> : null}
{pipeline.status || '-'}
</span>
</Badge>
<span>{pipeline.branch || '-'}</span>
<span>{formatPipelineRelativeTime(pipeline.createdAt)}</span>
</div>
<div key={pipeline.id} className="flex flex-col gap-3 px-5 py-3 transition-colors hover:bg-muted/20 md:flex-row md:items-center md:justify-between">
<div className="min-w-0">
<div className="flex min-w-0 items-center gap-2">
<span className={cn('size-2.5 shrink-0 rounded-full', pipelineStatusDotClass(pipeline.status))} />
<p className="truncate text-sm font-semibold">{formatRepositoryName(pipeline.repository)}</p>
</div>
<p className="mt-1 truncate text-sm text-muted-foreground">{pipeline.message || '-'}</p>
</div>
<div className="flex shrink-0 flex-wrap items-center gap-2 text-xs text-muted-foreground md:justify-end">
<Badge tone={pipelineStatusTone(pipeline.status)}>
<span className="inline-flex items-center gap-1.5">
{isActivePipelineStatus(pipeline.status) ? <Loader2 className="size-3 animate-spin" /> : null}
{pipeline.status || '-'}
</span>
</Badge>
<span className="rounded-md bg-muted/50 px-2 py-1">{pipeline.branch || '-'}</span>
<span className="rounded-md bg-muted/50 px-2 py-1 font-mono">SHA1 {formatShortSha(pipeline.commitSha)}</span>
<span className="rounded-md bg-muted/50 px-2 py-1">소요 {formatDuration(pipeline.durationSeconds)}</span>
<span className="min-w-16 text-right">{formatPipelineRelativeTime(pipeline.createdAt)}</span>
</div>
</div>
))}