fix(gateway): 서버 작업 이력을 상태 중심으로 간결화한다
서버별 화면의 작업 이력을 세 열 요약과 접근 가능한 상세 행으로 재구성한다. 500px Chromium에서 가로 넘침 없이 상태, 로그, 상세와 재시도 동작을 확인한다.
This commit is contained in:
@@ -86,6 +86,7 @@ type GatewayReleaseLog = {
|
||||
const scenarios = ref<Scenario[]>([]);
|
||||
const operations = ref<Operation[]>([]);
|
||||
const selectedProfileOperationId = ref('');
|
||||
const expandedProfileOperationId = ref('');
|
||||
const profileOperationLogs = ref<GatewayReleaseLog[]>([]);
|
||||
const profileOperationLogCursor = ref<string>();
|
||||
const profileOperationLogStatus = ref('');
|
||||
@@ -269,6 +270,40 @@ const formatTime = (value?: string): string => formatServerDateTime(value, { fal
|
||||
const formatLogTime = (value: string): string => formatServerDateTime(value, { format: 'timeSeconds' });
|
||||
const shortSha = (value?: string): string => (value ? value.slice(0, 12) : '-');
|
||||
|
||||
const operationTypeLabel = (type: Operation['type']): string => {
|
||||
const labels: Record<Operation['type'], string> = {
|
||||
DEPLOY: '버전 업데이트',
|
||||
RESET: '시나리오 초기화',
|
||||
CANCEL_GAME: '게임 취소',
|
||||
START: '서버 시작',
|
||||
STOP: '서버 중지',
|
||||
};
|
||||
return labels[type];
|
||||
};
|
||||
|
||||
const operationStatusLabel = (status: Operation['status']): string => {
|
||||
const labels: Record<Operation['status'], string> = {
|
||||
QUEUED: '대기 중',
|
||||
RUNNING: '진행 중',
|
||||
SUCCEEDED: '완료',
|
||||
FAILED: '실패',
|
||||
CANCELLED: '중단됨',
|
||||
};
|
||||
return labels[status];
|
||||
};
|
||||
|
||||
const operationStatusClass = (status: Operation['status']): string => {
|
||||
if (status === 'RUNNING') return 'border-emerald-700 bg-emerald-950/70 text-emerald-200';
|
||||
if (status === 'QUEUED') return 'border-amber-700 bg-amber-950/70 text-amber-200';
|
||||
if (status === 'SUCCEEDED') return 'border-cyan-800 bg-cyan-950/60 text-cyan-200';
|
||||
if (status === 'FAILED') return 'border-red-800 bg-red-950/70 text-red-200';
|
||||
return 'border-zinc-700 bg-zinc-800 text-zinc-300';
|
||||
};
|
||||
|
||||
const toggleProfileOperationDetails = (operationId: string) => {
|
||||
expandedProfileOperationId.value = expandedProfileOperationId.value === operationId ? '' : operationId;
|
||||
};
|
||||
|
||||
const clearStatus = () => {
|
||||
message.value = '';
|
||||
errorMessage.value = '';
|
||||
@@ -1753,7 +1788,7 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="mode !== 'gateway'" class="rounded-lg border border-zinc-800 bg-zinc-900 p-5">
|
||||
<section v-if="mode !== 'gateway'" class="rounded-lg border border-zinc-800 bg-zinc-900 p-3 sm:p-5">
|
||||
<div
|
||||
class="mb-4 rounded border border-amber-800/80 bg-amber-950/30 px-4 py-3 text-sm text-amber-100"
|
||||
data-testid="profile-build-recovery-guide"
|
||||
@@ -1764,116 +1799,170 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h3 class="text-lg font-semibold">작업 이력</h3>
|
||||
<span class="text-xs text-zinc-500">3초마다 상태 갱신</span>
|
||||
<span class="text-right text-xs text-zinc-500">진행 상태를 3초마다 갱신</span>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full min-w-[1300px] table-fixed text-left text-sm" data-testid="operations-table">
|
||||
<div>
|
||||
<table class="w-full table-fixed text-left text-xs sm:text-sm" data-testid="operations-table">
|
||||
<colgroup>
|
||||
<col style="width: 160px" />
|
||||
<col style="width: 264px" />
|
||||
<col style="width: 72px" />
|
||||
<col style="width: 64px" />
|
||||
<col style="width: 88px" />
|
||||
<col style="width: 112px" />
|
||||
<col style="width: 104px" />
|
||||
<col style="width: 176px" />
|
||||
<col style="width: 176px" />
|
||||
<col style="width: 84px" />
|
||||
<col class="w-[42%]" />
|
||||
<col class="w-[24%]" />
|
||||
<col class="w-[34%]" />
|
||||
</colgroup>
|
||||
<thead class="border-b border-zinc-700 text-xs text-zinc-500">
|
||||
<tr>
|
||||
<th class="p-2">요청/예약</th>
|
||||
<th class="p-2">작업 ID</th>
|
||||
<th class="p-2">프로필</th>
|
||||
<th class="p-2">작업</th>
|
||||
<th class="p-2">요청 · 작업</th>
|
||||
<th class="p-2">상태</th>
|
||||
<th class="p-2">소스</th>
|
||||
<th class="p-2">해석 커밋</th>
|
||||
<th class="p-2">요청자/사유</th>
|
||||
<th class="p-2">완료/오류</th>
|
||||
<th class="p-2">동작</th>
|
||||
<th class="p-2">보기</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="operation in operations"
|
||||
:key="operation.id"
|
||||
class="border-b border-zinc-800 align-top"
|
||||
>
|
||||
<td class="p-2 text-xs">
|
||||
{{ formatTime(operation.createdAt) }}
|
||||
<div v-if="operation.scheduledAt" class="mt-1 text-amber-300">
|
||||
예약 {{ formatTime(operation.scheduledAt) }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="max-w-48 break-all p-2 font-mono text-xs">{{ operation.id }}</td>
|
||||
<td class="p-2">{{ operation.profileName }}</td>
|
||||
<td class="p-2">{{ operation.type }}</td>
|
||||
<td class="p-2 font-semibold">{{ operation.status }}</td>
|
||||
<td class="p-2 font-mono text-xs">
|
||||
<div>{{ operation.sourceMode ?? '-' }}</div>
|
||||
<div
|
||||
v-if="operation.sourceRef"
|
||||
class="truncate"
|
||||
data-testid="operation-source-ref"
|
||||
:title="operation.sourceRef"
|
||||
>
|
||||
{{ operation.sourceRef }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2 font-mono text-xs">{{ shortSha(operation.resolvedCommitSha) }}</td>
|
||||
<td class="max-w-xs p-2 text-xs">
|
||||
<div class="font-mono">{{ operation.requestedBy }}</div>
|
||||
<div v-if="operation.reason" class="mt-1 text-zinc-400">{{ operation.reason }}</div>
|
||||
</td>
|
||||
<td class="max-w-xs p-2 text-xs">
|
||||
{{ formatTime(operation.completedAt) }}
|
||||
<div
|
||||
v-if="operation.error"
|
||||
class="mt-1"
|
||||
:class="operation.status === 'FAILED' ? 'text-red-400' : 'text-amber-300'"
|
||||
>
|
||||
{{ operation.error }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-zinc-700 px-2 py-1 text-xs text-zinc-300 hover:bg-zinc-800"
|
||||
:class="
|
||||
operation.id === selectedProfileOperationId
|
||||
? 'border-violet-500 text-violet-200'
|
||||
: ''
|
||||
"
|
||||
@click="selectProfileOperation(operation.id)"
|
||||
<template v-for="operation in operations" :key="operation.id">
|
||||
<tr class="border-b border-zinc-800 align-top" data-testid="operation-summary-row">
|
||||
<td class="p-2">
|
||||
<div class="font-semibold text-zinc-100">
|
||||
{{ operationTypeLabel(operation.type) }}
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] leading-4 text-zinc-400">
|
||||
{{ formatTime(operation.createdAt) }}
|
||||
</div>
|
||||
<div
|
||||
v-if="operation.scheduledAt"
|
||||
class="mt-1 text-[11px] leading-4 text-amber-300"
|
||||
>
|
||||
로그
|
||||
</button>
|
||||
<button
|
||||
v-if="
|
||||
operation.status === 'QUEUED' ||
|
||||
(operation.status === 'RUNNING' && operation.type === 'DEPLOY')
|
||||
"
|
||||
class="rounded border border-red-800 px-2 py-1 text-xs text-red-300 hover:bg-red-950"
|
||||
@click="cancelOperation(operation)"
|
||||
예약 {{ formatTime(operation.scheduledAt) }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<span
|
||||
class="inline-flex min-h-7 items-center rounded-full border px-2 py-1 text-[11px] font-semibold leading-none"
|
||||
:class="operationStatusClass(operation.status)"
|
||||
:data-operation-status="operation.status"
|
||||
>
|
||||
{{ operation.status === 'RUNNING' ? '빌드 중단' : '취소' }}
|
||||
</button>
|
||||
<button
|
||||
v-else-if="
|
||||
operation.status === 'FAILED' || operation.status === 'CANCELLED'
|
||||
"
|
||||
class="rounded border border-amber-700 px-2 py-1 text-xs text-amber-300 hover:bg-amber-950"
|
||||
@click="retryOperation(operation)"
|
||||
{{ operationStatusLabel(operation.status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-zinc-700 px-2 py-1 text-xs text-zinc-300 hover:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-400"
|
||||
:class="
|
||||
operation.id === selectedProfileOperationId
|
||||
? 'border-violet-500 text-violet-200'
|
||||
: ''
|
||||
"
|
||||
@click="selectProfileOperation(operation.id)"
|
||||
>
|
||||
로그
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-zinc-700 px-2 py-1 text-xs text-zinc-300 hover:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-400"
|
||||
:aria-expanded="expandedProfileOperationId === operation.id"
|
||||
:aria-controls="`profile-operation-detail-${operation.id}`"
|
||||
data-testid="operation-details-toggle"
|
||||
@click="toggleProfileOperationDetails(operation.id)"
|
||||
>
|
||||
{{ operation.error ? '오류 상세' : '상세' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="
|
||||
operation.status === 'QUEUED' ||
|
||||
(operation.status === 'RUNNING' && operation.type === 'DEPLOY')
|
||||
"
|
||||
type="button"
|
||||
class="rounded border border-red-800 px-2 py-1 text-xs text-red-300 hover:bg-red-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-400"
|
||||
@click="cancelOperation(operation)"
|
||||
>
|
||||
{{ operation.status === 'RUNNING' ? '빌드 중단' : '취소' }}
|
||||
</button>
|
||||
<button
|
||||
v-else-if="
|
||||
operation.status === 'FAILED' || operation.status === 'CANCELLED'
|
||||
"
|
||||
type="button"
|
||||
class="rounded border border-amber-700 px-2 py-1 text-xs text-amber-300 hover:bg-amber-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-400"
|
||||
@click="retryOperation(operation)"
|
||||
>
|
||||
재시도
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-show="expandedProfileOperationId === operation.id"
|
||||
:id="`profile-operation-detail-${operation.id}`"
|
||||
class="border-b border-zinc-700 bg-zinc-950/60"
|
||||
data-testid="operation-detail"
|
||||
>
|
||||
<td colspan="3" class="p-3 sm:p-4">
|
||||
<div
|
||||
class="rounded border border-zinc-800 bg-zinc-950 px-3 py-3"
|
||||
role="region"
|
||||
:aria-label="`${operationTypeLabel(operation.type)} 상세`"
|
||||
>
|
||||
재시도
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<dl class="grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<dt class="text-[11px] font-semibold text-zinc-500">서버 ID</dt>
|
||||
<dd class="mt-1 break-all font-mono text-xs text-zinc-300">
|
||||
{{ operation.profileName }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[11px] font-semibold text-zinc-500">작업 ID</dt>
|
||||
<dd class="mt-1 break-all font-mono text-xs text-zinc-300">
|
||||
{{ operation.id }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[11px] font-semibold text-zinc-500">소스</dt>
|
||||
<dd
|
||||
class="mt-1 break-all font-mono text-xs text-zinc-300"
|
||||
data-testid="operation-source-ref"
|
||||
>
|
||||
{{ operation.sourceMode ?? '-' }}
|
||||
{{ operation.sourceRef ?? '' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[11px] font-semibold text-zinc-500">해석 커밋</dt>
|
||||
<dd class="mt-1 break-all font-mono text-xs text-zinc-300">
|
||||
{{ operation.resolvedCommitSha ?? '-' }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[11px] font-semibold text-zinc-500">요청자</dt>
|
||||
<dd class="mt-1 break-all font-mono text-xs text-zinc-300">
|
||||
{{ operation.requestedBy }}
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-[11px] font-semibold text-zinc-500">완료 시각</dt>
|
||||
<dd class="mt-1 text-xs text-zinc-300">
|
||||
{{ formatTime(operation.completedAt) }}
|
||||
</dd>
|
||||
</div>
|
||||
<div v-if="operation.reason" class="sm:col-span-2">
|
||||
<dt class="text-[11px] font-semibold text-zinc-500">사유</dt>
|
||||
<dd
|
||||
class="mt-1 whitespace-pre-wrap break-all text-xs text-zinc-300"
|
||||
>
|
||||
{{ operation.reason }}
|
||||
</dd>
|
||||
</div>
|
||||
<div v-if="operation.error" class="sm:col-span-2">
|
||||
<dt class="text-[11px] font-semibold text-red-400">오류</dt>
|
||||
<dd class="mt-1 whitespace-pre-wrap break-all text-xs text-red-300">
|
||||
{{ operation.error }}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr v-if="operations.length === 0">
|
||||
<td colspan="10" class="p-6 text-center text-zinc-500">작업 이력이 없습니다.</td>
|
||||
<td colspan="3" class="p-6 text-center text-zinc-500">작업 이력이 없습니다.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user