devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into refactor/frontend-time-format-options-20260813

Browse Source
This commit is contained in:
Hide_D
2026-08-13 15:27:53 +00:00
parent dcba974aa4 94b5b7813c
commit f4bc6ed85b
2 changed files with 254 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/gateway-frontend/e2e/server-operations.spec.ts
+155 -1
View File
@@ -26,6 +26,9 @@ type FixtureState = {
status: OperationStatus;
sourceMode?: 'BRANCH' | 'COMMIT';
sourceRef?: string;
resolvedCommitSha?: string;
completedAt?: string;
error?: string;
payload: Record<string, unknown>;
requestedBy: string;
createdAt: string;
@@ -38,6 +41,9 @@ type FixtureState = {
profileLogsEmpty?: boolean;
gatewayLogPollCount?: number;
gatewayLogsEmpty?: boolean;
gatewayStateFailuresAfterRequest?: number;
gatewayStateFailuresRemaining?: number;
gatewayStateFailureCount?: number;
capabilities?: Array<{ permission: string; scope: 'GLOBAL' | 'PROFILE'; scopes: string[] }>;
profileListDelayMs?: number;
profileNavigationDelayMs?: number;
@@ -139,6 +145,19 @@ const installFixture = async (page: Page, state: FixtureState) => {
await route.abort('failed');
return;
}
if (
names.includes('admin.releases.gatewayState') &&
(state.gatewayStateFailuresRemaining ?? 0) > 0
) {
state.gatewayStateFailuresRemaining = (state.gatewayStateFailuresRemaining ?? 0) - 1;
state.gatewayStateFailureCount = (state.gatewayStateFailureCount ?? 0) + 1;
await route.fulfill({
status: 502,
contentType: 'application/json',
body: '',
});
return;
}
if (names.includes('admin.operations.logs') && !state.profileLogProgress) {
await new Promise((resolve) => setTimeout(resolve, 50));
}
@@ -337,6 +356,7 @@ const installFixture = async (page: Page, state: FixtureState) => {
updatedAt: '2026-08-01T02:00:00.000Z',
};
state.gatewayOperations = [releaseOperation];
state.gatewayStateFailuresRemaining = state.gatewayStateFailuresAfterRequest;
return response(releaseOperation);
}
if (name === 'admin.operations.requestRuntime') {
@@ -815,7 +835,13 @@ test('scenario-only operator resets the current version without Git or Gateway c
});
test('controls gateway deployment and rollback through the external controller queue', async ({ page }, testInfo) => {
const state: FixtureState = { operations: [], gatewayOperations: [], runtimeRunning: true, requestBodies: [] };
const state: FixtureState = {
operations: [],
gatewayOperations: [],
runtimeRunning: true,
requestBodies: [],
gatewayStateFailuresAfterRequest: 1,
};
await installFixture(page, state);
page.on('dialog', (dialog) => dialog.accept());
@@ -828,6 +854,9 @@ test('controls gateway deployment and rollback through the external controller q
await page.getByTestId('request-gateway-deploy').click();
await expect(page.getByText(/Gateway 배포 작업을 등록했습니다/).first()).toBeVisible();
expect(state.gatewayStateFailureCount).toBe(1);
await expect(page.getByTestId('server-operations-page')).not.toContainText('Unexpected end of JSON input');
await expect(page.getByTestId('action-toast').filter({ hasText: 'Unexpected end of JSON input' })).toHaveCount(0);
await expect(page.getByTestId('gateway-release-table')).toContainText('DEPLOY');
await expect(page.getByTestId('gateway-release-log-panel')).toBeVisible();
await expect(page.getByTestId('gateway-release-log')).toContainText('Gateway 구성 요소를 빌드합니다.');
@@ -853,6 +882,131 @@ test('controls gateway deployment and rollback through the external controller q
expect(state.requestBodies.some((entry) => entry.operation === 'admin.releases.requestGatewayRollback')).toBe(true);
});
test('moves long Gateway release errors out of the table column into an expandable detail row', async ({
page,
}, testInfo) => {
const longError = [
'Gateway release did not become ready before the timeout.',
'Error: gateway-frontend readiness check failed after 30 attempts',
' at waitForGatewayReadiness (/srv/core/release-controller/dist/releaseController.js:842:19)',
'controller-output-without-breaks-'.repeat(12),
].join('\n');
const operationId = '88888888-8888-4888-8888-888888888888';
const state: FixtureState = {
operations: [],
gatewayOperations: [
{
id: operationId,
type: 'DEPLOY',
status: 'FAILED',
sourceMode: 'COMMIT',
sourceRef: 'cccccccccccccccccccccccccccccccccccccccc',
resolvedCommitSha: 'cccccccccccccccccccccccccccccccccccccccc',
completedAt: '2026-08-01T02:03:00.000Z',
error: longError,
payload: {},
requestedBy: 'admin',
createdAt: '2026-08-01T02:00:00.000Z',
updatedAt: '2026-08-01T02:03:00.000Z',
},
],
gatewayLogsEmpty: true,
runtimeRunning: true,
requestBodies: [],
};
await installFixture(page, state);
await page.goto('admin/releases');
const table = page.getByTestId('gateway-release-table');
await expect(table.getByRole('columnheader')).toHaveCount(6);
await expect(table.getByRole('columnheader', { name: '오류', exact: true })).toHaveCount(0);
await expect(table.getByRole('columnheader', { name: '상세', exact: true })).toBeVisible();
const errorToggle = page.getByTestId('gateway-release-error-toggle');
await expect(errorToggle).toHaveText('오류 보기');
await expect(errorToggle).toHaveAttribute('aria-expanded', 'false');
await expect(page.getByTestId('gateway-release-error-detail')).toBeHidden();
await errorToggle.focus();
const focusedToggleStyle = await errorToggle.evaluate((element) => {
const style = getComputedStyle(element);
return {
outlineStyle: style.outlineStyle,
outlineWidth: style.outlineWidth,
color: style.color,
};
});
expect(focusedToggleStyle.outlineStyle).not.toBe('none');
expect(parseFloat(focusedToggleStyle.outlineWidth)).toBeGreaterThanOrEqual(2);
await errorToggle.hover();
await errorToggle.click();
await expect(errorToggle).toHaveText('오류 닫기');
await expect(errorToggle).toHaveAttribute('aria-expanded', 'true');
const errorDetail = page.getByTestId('gateway-release-error-detail');
await expect(errorDetail).toContainText('Gateway release did not become ready');
await expect(errorDetail).toContainText('controller-output-without-breaks');
const desktopGeometry = await table.evaluate((element) => {
const headings = Array.from(element.querySelectorAll('thead th'));
const detail = element.querySelector('[data-testid="gateway-release-error-detail"]');
const detailCell = detail?.querySelector('td');
const errorText = detail?.querySelector('pre');
return {
tableWidth: element.getBoundingClientRect().width,
scrollerWidth: element.parentElement?.getBoundingClientRect().width ?? 0,
tableLayout: getComputedStyle(element).tableLayout,
columnCount: headings.length,
detailColSpan: detailCell?.getAttribute('colspan'),
detailWidth: detailCell?.getBoundingClientRect().width ?? 0,
errorWhiteSpace: errorText ? getComputedStyle(errorText).whiteSpace : '',
errorOverflowWrap: errorText ? getComputedStyle(errorText).overflowWrap : '',
};
});
expect(desktopGeometry).toMatchObject({
tableLayout: 'fixed',
columnCount: 6,
detailColSpan: '6',
errorWhiteSpace: 'pre-wrap',
});
expect(desktopGeometry.tableWidth).toBeGreaterThanOrEqual(680);
expect(desktopGeometry.detailWidth).toBeGreaterThanOrEqual(desktopGeometry.tableWidth - 1);
await page.screenshot({ path: testInfo.outputPath('gateway-release-error-expanded-desktop.png'), fullPage: true });
await page.setViewportSize({ width: 390, height: 844 });
await expect(table.getByRole('columnheader')).toHaveCount(4);
await expect(table.getByRole('columnheader', { name: '소스', exact: true })).toHaveCount(0);
await expect(table.getByRole('columnheader', { name: '해석 커밋', exact: true })).toHaveCount(0);
const mobileGeometry = await table.evaluate((element) => {
const scroller = element.parentElement!;
const scrollerRect = scroller.getBoundingClientRect();
const detailRect = element
.querySelector('[data-testid="gateway-release-error-detail"]')!
.getBoundingClientRect();
return {
tableWidth: element.getBoundingClientRect().width,
scrollerX: scrollerRect.x,
scrollerWidth: scrollerRect.width,
scrollerScrollWidth: scroller.scrollWidth,
detailWidth: detailRect.width,
viewportWidth: document.documentElement.clientWidth,
documentScrollWidth: document.documentElement.scrollWidth,
};
});
expect(mobileGeometry.tableWidth).toBeLessThanOrEqual(mobileGeometry.scrollerWidth + 1);
expect(mobileGeometry.detailWidth).toBeGreaterThanOrEqual(mobileGeometry.tableWidth - 1);
expect(mobileGeometry.scrollerScrollWidth).toBeLessThanOrEqual(mobileGeometry.scrollerWidth + 1);
expect(mobileGeometry.scrollerX).toBeGreaterThanOrEqual(0);
expect(mobileGeometry.scrollerX + mobileGeometry.scrollerWidth).toBeLessThanOrEqual(
mobileGeometry.viewportWidth
);
expect(mobileGeometry.documentScrollWidth).toBeLessThanOrEqual(mobileGeometry.viewportWidth);
await page.screenshot({ path: testInfo.outputPath('gateway-release-error-expanded-mobile.png'), fullPage: true });
await errorToggle.click();
await expect(errorToggle).toHaveAttribute('aria-expanded', 'false');
await expect(page.getByTestId('gateway-release-error-detail')).toBeHidden();
});
test('explains terminal releases created before controller progress logging', async ({ page }) => {
const state: FixtureState = {
operations: [],
app/gateway-frontend/src/views/ServerOperationsView.vue
+99 -33
View File
@@ -89,6 +89,7 @@ const profileOperationLogViewport = ref<HTMLElement>();
const gatewayReleaseState = ref<GatewayReleaseState | null>(null);
const gatewayReleaseOperations = ref<GatewayReleaseOperation[]>([]);
const selectedGatewayOperationId = ref('');
const expandedGatewayErrorOperationId = ref('');
const gatewayReleaseLogs = ref<GatewayReleaseLog[]>([]);
const gatewayReleaseLogCursor = ref<string>();
const gatewayReleaseLogStatus = ref('');
@@ -113,6 +114,7 @@ let stateRequestInFlight = false;
let releaseLogLoopGeneration = 0;
let profileLogLoopGeneration = 0;
let componentMounted = false;
let gatewayReleaseTransitionActive = false;
const form = reactive({
sourceMode: (props.mode === 'scenario' ? 'CURRENT' : 'BRANCH') as 'CURRENT' | 'BRANCH' | 'COMMIT',
@@ -169,7 +171,7 @@ const gatewayReleaseLogEmptyMessage = computed(() => {
return 'controller 로그를 기다리고 있습니다…';
}
if (operation.error) {
return `이 작업에는 controller 로그가 기록되지 않았습니다. 작업 오류: ${operation.error}`;
return '이 작업에는 controller 로그가 기록되지 않았습니다. 작업 이력의 오류 상세를 확인하세요.';
}
return '이 작업에는 controller 로그가 기록되지 않았습니다. 로그 지원 controller 적용 전 작업일 수 있습니다.';
});
@@ -286,6 +288,7 @@ const loadState = async (quiet = false) => {
const active = gatewayReleaseOperations.value.find((operation) =>
['QUEUED', 'RUNNING'].includes(operation.status)
);
gatewayReleaseTransitionActive = Boolean(active);
if (active && selectedGatewayOperationId.value !== active.id) {
selectedGatewayOperationId.value = active.id;
} else if (
@@ -312,7 +315,11 @@ const loadState = async (quiet = false) => {
}
}
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '운영 상태를 불러오지 못했습니다.';
// Gateway release가 process를 교체하는 동안에는 background poll의 HTTP 연결이
// 일시적으로 끊길 수 있다. 이 경우는 기존 상태를 유지하고 다음 poll에서 복구한다.
if (!quiet || props.mode !== 'gateway' || !gatewayReleaseTransitionActive) {
errorMessage.value = error instanceof Error ? error.message : '운영 상태를 불러오지 못했습니다.';
}
} finally {
loading.value = false;
stateRequestInFlight = false;
@@ -429,6 +436,11 @@ const selectGatewayReleaseOperation = (operationId: string) => {
selectedGatewayOperationId.value = operationId;
};
const toggleGatewayReleaseError = (operationId: string) => {
expandedGatewayErrorOperationId.value =
expandedGatewayErrorOperationId.value === operationId ? '' : operationId;
};
const requestDeploy = async () => {
clearStatus();
if (
@@ -475,6 +487,7 @@ const requestGatewayDeploy = async () => {
sourceRef: gatewayForm.sourceRef.trim(),
reason: gatewayForm.reason.trim() || undefined,
});
gatewayReleaseTransitionActive = true;
selectedGatewayOperationId.value = operation.id;
message.value = 'Gateway 배포 작업을 등록했습니다. 외부 release-controller가 처리합니다.';
await loadState(true);
@@ -499,6 +512,7 @@ const requestGatewayRollback = async () => {
const operation = await adminClient.releases.requestGatewayRollback.mutate({
reason: gatewayForm.reason.trim() || undefined,
});
gatewayReleaseTransitionActive = true;
selectedGatewayOperationId.value = operation.id;
message.value = 'Gateway rollback 작업을 등록했습니다.';
await loadState(true);
@@ -1119,45 +1133,97 @@ onBeforeUnmount(() => {
</div>
</section>
<div class="overflow-x-auto">
<table class="w-full min-w-[760px] text-left text-xs" data-testid="gateway-release-table">
<table
class="w-full table-fixed text-left text-xs sm:min-w-[680px]"
data-testid="gateway-release-table"
>
<colgroup>
<col class="w-[32%] sm:w-[144px]" />
<col class="w-[17%] sm:w-[68px]" />
<col class="w-[20%] sm:w-[88px]" />
<col class="hidden sm:table-column sm:w-[128px]" />
<col class="hidden sm:table-column sm:w-[112px]" />
<col class="w-[31%] sm:w-[140px]" />
</colgroup>
<thead class="border-b border-zinc-700 text-zinc-500">
<tr>
<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="hidden p-2 sm:table-cell">소스</th>
<th class="hidden p-2 sm:table-cell">해석 커밋</th>
<th class="p-2">상세</th>
</tr>
</thead>
<tbody>
<tr
v-for="operation in gatewayReleaseOperations"
:key="operation.id"
class="border-b border-zinc-800"
>
<td class="p-2">{{ formatTime(operation.createdAt) }}</td>
<td class="p-2">{{ operation.type }}</td>
<td class="p-2">{{ operation.status }}</td>
<td class="p-2 font-mono">{{ operation.sourceRef }}</td>
<td class="p-2 font-mono">{{ shortSha(operation.resolvedCommitSha) }}</td>
<td class="max-w-xs p-2 text-red-300">{{ operation.error }}</td>
<td class="p-2">
<button
type="button"
class="rounded border border-zinc-700 px-2 py-1 text-zinc-300 hover:bg-zinc-800"
:class="
operation.id === selectedGatewayOperationId
? 'border-violet-500 text-violet-200'
: ''
"
@click="selectGatewayReleaseOperation(operation.id)"
>
보기
</button>
</td>
</tr>
<template v-for="operation in gatewayReleaseOperations" :key="operation.id">
<tr class="border-b border-zinc-800 align-top">
<td class="p-2">{{ formatTime(operation.createdAt) }}</td>
<td class="p-2">
<div>{{ operation.type }}</div>
<div
class="mt-1 truncate font-mono text-[10px] text-zinc-500 sm:hidden"
:title="operation.sourceRef"
>
{{ operation.sourceRef ?? '-' }}
</div>
</td>
<td class="p-2 font-semibold">{{ operation.status }}</td>
<td class="hidden p-2 font-mono sm:table-cell">
<div class="truncate" :title="operation.sourceRef">{{ operation.sourceRef }}</div>
</td>
<td class="hidden p-2 font-mono sm:table-cell">
{{ shortSha(operation.resolvedCommitSha) }}
</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-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 === selectedGatewayOperationId
? 'border-violet-500 text-violet-200'
: ''
"
@click="selectGatewayReleaseOperation(operation.id)"
>
로그
</button>
<button
v-if="operation.error"
type="button"
class="rounded border border-red-800 px-2 py-1 text-red-300 hover:bg-red-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-400"
:aria-expanded="expandedGatewayErrorOperationId === operation.id"
:aria-controls="`gateway-release-error-${operation.id}`"
data-testid="gateway-release-error-toggle"
@click="toggleGatewayReleaseError(operation.id)"
>
{{ expandedGatewayErrorOperationId === operation.id ? '오류 닫기' : '오류 보기' }}
</button>
</div>
</td>
</tr>
<tr
v-if="operation.error"
v-show="expandedGatewayErrorOperationId === operation.id"
:id="`gateway-release-error-${operation.id}`"
class="border-b border-red-900/70 bg-red-950/30"
data-testid="gateway-release-error-detail"
>
<td colspan="6" class="p-4">
<div
class="rounded border border-red-900/70 bg-zinc-950 px-4 py-3"
role="region"
:aria-label="`${operation.type} 릴리스 오류 상세`"
>
<div class="mb-2 text-xs font-semibold text-red-300">오류 상세</div>
<pre
class="whitespace-pre-wrap break-all font-mono text-xs leading-5 text-red-200"
>{{ operation.error }}</pre>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>