feat: expose profile reset operation progress

This commit is contained in:
2026-07-31 13:19:32 +00:00
parent 26fbba39b4
commit 78844700c0
4 changed files with 228 additions and 16 deletions
@@ -33,12 +33,15 @@ const installFixture = async (
page: Page,
options: {
deferRequest?: boolean;
deferInstall?: boolean;
initialActions?: RuntimeAction[];
afterRequestActions?: RuntimeAction[];
pendingProfileReads?: number;
} = {}
) => {
let requested = false;
let installRequested = false;
let installActive = false;
let postRequestProfileReads = 0;
const requestBodies: unknown[] = [];
let releaseRequest = (): void => {};
@@ -47,6 +50,12 @@ const installFixture = async (
releaseRequest = resolve;
})
: Promise.resolve();
let releaseInstall = (): void => {};
const installGate = options.deferInstall
? new Promise<void>((resolve) => {
releaseInstall = resolve;
})
: Promise.resolve();
await page.addInitScript(() => {
window.localStorage.setItem('sammo-session-token', 'playwright-admin-session');
});
@@ -58,6 +67,12 @@ const installFixture = async (
requestBodies.push(body);
await requestGate;
}
if (operations.includes('admin.profiles.install')) {
installRequested = true;
requestBodies.push(body);
await installGate;
installActive = true;
}
const results = operations.map((operation) => {
if (operation === 'me') {
return response({
@@ -75,7 +90,17 @@ const installFixture = async (
return response({ enabled: true });
}
if (operation === 'admin.profiles.listScenarios') {
return response([]);
return response([
{
id: 1010,
title: '【테스트】황건의 난',
year: 184,
npcCount: 42,
npcExCount: 0,
npcNeutralCount: 0,
nations: [],
},
]);
}
if (operation === 'admin.profiles.list') {
const keepPending = requested && postRequestProfileReads++ < (options.pendingProfileReads ?? 0);
@@ -83,11 +108,17 @@ const installFixture = async (
{
profileName: 'hwe:default',
profile: 'hwe',
scenario: 'default',
scenario: '1010',
apiPort: 15015,
status: 'RUNNING',
buildStatus: 'SUCCEEDED',
meta: {},
activeOperation: installActive
? {
id: '77777777-7777-4777-8777-777777777777',
status: 'QUEUED',
}
: null,
runtime: {
profileName: 'hwe:default',
apiRunning: true,
@@ -123,6 +154,32 @@ const installFixture = async (
},
});
}
if (operation === 'admin.profiles.install') {
return response({
ok: true,
operationId: '77777777-7777-4777-8777-777777777777',
});
}
if (operation === 'admin.operations.list') {
return response(
installRequested
? [
{
id: '77777777-7777-4777-8777-777777777777',
profileName: 'hwe:default',
type: 'RESET',
status: installActive ? 'QUEUED' : 'RUNNING',
sourceMode: 'COMMIT',
sourceRef: '0123456789abcdef0123456789abcdef01234567',
payload: {},
requestedBy: 'admin-user',
createdAt: '2026-07-30T02:00:00.000Z',
updatedAt: '2026-07-30T02:00:00.000Z',
},
]
: []
);
}
throw new Error(`Unhandled tRPC operation: ${operation}`);
});
await route.fulfill({
@@ -131,7 +188,7 @@ const installFixture = async (
body: JSON.stringify(results),
});
});
return { releaseRequest, requestBodies };
return { releaseRequest, releaseInstall, requestBodies };
};
test('reports clock-shift acceptance separately from actual application', async ({ page }) => {
@@ -215,3 +272,33 @@ test('renders an ignored terminal outcome without calling it applied', async ({
await expect(page.getByText('지원하지 않는 요청')).toBeVisible();
await expect(page.getByText(/적용됨|요청 완료/)).toHaveCount(0);
});
test('keeps profile installation disabled while its queued operation is active', async ({ page }, testInfo) => {
const fixture = await installFixture(page, { deferInstall: true });
page.on('dialog', (dialog) => dialog.accept());
await page.goto('admin');
const installButton = page.getByRole('button', { name: '설치 적용' });
const click = installButton.click();
await expect.poll(() => fixture.requestBodies.length).toBe(1);
await expect(page.getByRole('button', { name: '등록 중…' })).toBeDisabled();
fixture.releaseInstall();
await click;
const operationLink = page.getByRole('link', { name: /77777777-7777-4777-8777-777777777777 상태 보기/ });
await expect(operationLink).toBeVisible();
await expect(page.getByRole('button', { name: '설치 작업 진행 중' })).toBeDisabled();
await page.setViewportSize({ width: 390, height: 844 });
const linkGeometry = await operationLink.evaluate((element) => {
const rect = element.getBoundingClientRect();
return { left: rect.left, right: rect.right, viewportWidth: window.innerWidth };
});
expect(linkGeometry.left).toBeGreaterThanOrEqual(0);
expect(linkGeometry.right).toBeLessThanOrEqual(linkGeometry.viewportWidth);
await page.screenshot({ path: testInfo.outputPath('admin-install-active-mobile.png'), fullPage: true });
await operationLink.click();
await expect(page).toHaveURL(/\/gateway\/admin\/server-operations\?operationId=77777777/);
await expect(page.getByTestId('operations-table')).toContainText('77777777-7777-4777-8777-777777777777');
});
@@ -10,6 +10,8 @@ type Operation = {
sourceMode?: 'BRANCH' | 'COMMIT';
sourceRef?: string;
resolvedCommitSha?: string;
completedAt?: string;
error?: string;
payload: Record<string, unknown>;
requestedBy: string;
createdAt: string;
@@ -127,6 +129,22 @@ const installFixture = async (page: Page, state: FixtureState) => {
state.operations = [operation];
return response(operation);
}
if (name === 'admin.operations.retry') {
const operation: Operation = {
id: '44444444-4444-4444-8444-444444444444',
profileName: 'che:2',
type: 'RESET',
status: 'QUEUED',
sourceMode: 'COMMIT',
sourceRef: 'fedcba9876543210fedcba9876543210fedcba98',
payload: { installOperationId: 'failed-generation' },
requestedBy: 'admin',
createdAt: '2026-07-25T04:00:00.000Z',
updatedAt: '2026-07-25T04:00:00.000Z',
};
state.operations = [operation, ...state.operations];
return response(operation);
}
throw new Error(`Unhandled tRPC operation: ${name}`);
});
await route.fulfill({
@@ -190,7 +208,7 @@ test('separates branch and commit semantics and submits a reset from the dedicat
await page.getByTestId('request-reset').hover();
await page.getByTestId('request-reset').click();
await expect(page.getByText('초기화 작업을 시작했습니다.')).toBeVisible();
await expect(page.getByText('초기화 작업을 등록했습니다.')).toBeVisible();
await expect(page.getByTestId('operations-table')).toContainText('RESET');
const resetRequest = state.requestBodies.find((entry) => entry.operation === 'admin.operations.requestReset');
expect(JSON.stringify(resetRequest?.body)).toContain('"sourceMode":"COMMIT"');
@@ -232,3 +250,66 @@ test('starts and stops all runtime roles through the operation controls', async
expect(serializedRequests).toContain('"action":"START"');
expect(serializedRequests).toContain('"action":"STOP"');
});
test('renders a failed reset, retries it as a new operation, and reaches success', async ({ page }, testInfo) => {
const longError =
'선택한 커밋의 프로필 프로세스를 시작하지 못했습니다. 실패 원인을 확인한 뒤 동일 generation으로 재시도해 주세요.';
const state: FixtureState = {
operations: [
{
id: '55555555-5555-4555-8555-555555555555',
profileName: 'che:2',
type: 'RESET',
status: 'FAILED',
sourceMode: 'COMMIT',
sourceRef: 'fedcba9876543210fedcba9876543210fedcba98',
resolvedCommitSha: 'fedcba9876543210fedcba9876543210fedcba98',
payload: { installOperationId: 'failed-generation' },
requestedBy: 'admin',
completedAt: '2026-07-25T03:30:00.000Z',
error: longError,
createdAt: '2026-07-25T03:00:00.000Z',
updatedAt: '2026-07-25T03:30:00.000Z',
},
],
runtimeRunning: false,
requestBodies: [],
};
await installFixture(page, state);
page.on('dialog', (dialog) => dialog.accept());
await page.goto('admin/server-operations');
await expect(page.getByText('FAILED', { exact: true })).toBeVisible();
await expect(page.getByRole('cell', { name: 'fedcba987654', exact: true })).toBeVisible();
const failure = page.getByText(longError);
await expect(failure).toBeVisible();
expect(await failure.evaluate((element) => getComputedStyle(element).color)).toBe('oklch(0.704 0.191 22.216)');
await page.getByRole('button', { name: '재시도' }).click();
await expect(page.getByText('재시도 작업을 등록했습니다.')).toBeVisible();
await expect(page.getByText('FAILED', { exact: true })).toBeVisible();
await expect(page.getByText('QUEUED', { exact: true })).toBeVisible();
await expect(page.getByTestId('operations-table').locator('tbody tr')).toHaveCount(2);
state.operations[0] = {
...state.operations[0]!,
status: 'SUCCEEDED',
resolvedCommitSha: 'fedcba9876543210fedcba9876543210fedcba98',
completedAt: '2026-07-25T04:05:00.000Z',
updatedAt: '2026-07-25T04:05:00.000Z',
};
state.runtimeRunning = true;
await page.getByTestId('refresh-operations').click();
await expect(page.getByText('SUCCEEDED', { exact: true })).toBeVisible();
await expect(page.getByText('RUNNING', { exact: true }).first()).toBeVisible();
await page.screenshot({ path: testInfo.outputPath('failed-retry-succeeded-desktop.png'), fullPage: true });
await page.setViewportSize({ width: 390, height: 844 });
const tableGeometry = await page.getByTestId('operations-table').evaluate((table) => {
const tableRect = table.getBoundingClientRect();
const scrollerRect = table.parentElement!.getBoundingClientRect();
return { tableWidth: tableRect.width, scrollerWidth: scrollerRect.width };
});
expect(tableGeometry.tableWidth).toBeGreaterThan(tableGeometry.scrollerWidth);
await page.screenshot({ path: testInfo.outputPath('failed-retry-succeeded-mobile.png'), fullPage: true });
});
+45 -9
View File
@@ -74,6 +74,10 @@ type AdminProfile = {
tournamentRunning: boolean;
};
buildCommitSha?: string;
activeOperation?: {
id: string;
status: 'QUEUED' | 'RUNNING';
} | null;
meta: Record<string, unknown>;
runtimeActions: Array<{
id: string;
@@ -238,7 +242,7 @@ type AdminClient = {
gitRef?: string;
};
reason?: string;
}) => Promise<{ ok: boolean; action?: unknown }>;
}) => Promise<{ ok: boolean; operationId: string; action?: unknown }>;
};
requestAction: {
mutate: (input: {
@@ -306,6 +310,8 @@ const profileActionSubmitting = ref<Record<string, boolean>>({});
const scenarioCatalogs = ref<Record<string, ScenarioCatalogState>>({});
const profileInstalls = ref<Record<string, InstallFormState>>({});
const profileInstallStatus = ref<Record<string, string>>({});
const profileInstallSubmitting = ref<Record<string, boolean>>({});
const profileInstallOperationId = ref<Record<string, string>>({});
const runtimeActionPending = (profile: AdminProfile): boolean => {
return profile.runtimeActions.some((action) => action.status === 'REQUESTED' || action.status === 'PARTIAL');
@@ -685,6 +691,9 @@ const loadScenariosForProfile = async (profileName: string) => {
if (!install) {
return;
}
if (profileInstallSubmitting.value[profileName]) {
return;
}
await loadScenarioCatalog(install.gitRef);
};
@@ -817,8 +826,9 @@ const requestInstall = async (profileName: string) => {
return;
}
try {
profileInstallSubmitting.value = { ...profileInstallSubmitting.value, [profileName]: true };
const gitRef = normalizeGitRefInput(install.gitRef);
await adminClient.profiles.install.mutate({
const result = await adminClient.profiles.install.mutate({
profileName,
install: {
scenarioId: install.scenarioId,
@@ -840,14 +850,20 @@ const requestInstall = async (profileName: string) => {
});
profileInstallStatus.value = {
...profileInstallStatus.value,
[profileName]: openAt ? '설치 예약 완료' : '설치 요청 완료',
[profileName]: openAt ? '설치 작업을 예약했습니다.' : '설치 작업을 등록했습니다.',
};
profileInstallOperationId.value = {
...profileInstallOperationId.value,
[profileName]: result.operationId,
};
await loadProfiles();
} catch (error) {
profileInstallStatus.value = {
...profileInstallStatus.value,
[profileName]: '설치 요청 실패',
[profileName]: error instanceof Error ? `설치 요청 실패: ${error.message}` : '설치 요청 실패',
};
} finally {
profileInstallSubmitting.value = { ...profileInstallSubmitting.value, [profileName]: false };
}
};
@@ -1664,9 +1680,19 @@ onMounted(() => {
>
<div class="flex items-center justify-between">
<h4 class="text-sm font-semibold">설치/리셋</h4>
<span class="text-xs text-zinc-500">{{
profileInstallStatus[profile.profileName]
}}</span>
<div class="text-right text-xs text-zinc-500">
<div>{{ profileInstallStatus[profile.profileName] }}</div>
<RouterLink
v-if="profileInstallOperationId[profile.profileName]"
:to="{
path: '/admin/server-operations',
query: { operationId: profileInstallOperationId[profile.profileName] },
}"
class="block break-all text-amber-400 underline hover:text-amber-300"
>
작업 {{ profileInstallOperationId[profile.profileName] }} 상태 보기
</RouterLink>
</div>
</div>
<div class="grid lg:grid-cols-2 gap-4">
<div class="space-y-3">
@@ -2064,10 +2090,20 @@ onMounted(() => {
</div>
<button
class="bg-emerald-600 hover:bg-emerald-500 text-black font-semibold px-4 py-2 rounded w-full"
class="bg-emerald-600 hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50 text-black font-semibold px-4 py-2 rounded w-full"
:disabled="
profileInstallSubmitting[profile.profileName] ||
Boolean(profile.activeOperation)
"
@click="requestInstall(profile.profileName)"
>
설치 적용
{{
profileInstallSubmitting[profile.profileName]
? '등록 중…'
: profile.activeOperation
? '설치 작업 진행 중'
: '설치 적용'
}}
</button>
<div
@@ -254,7 +254,7 @@ const requestReset = async () => {
preopenAt: toIso(form.preopenAt),
},
});
message.value = form.scheduledAt ? '예약 초기화 작업을 등록했습니다.' : '초기화 작업을 시작했습니다.';
message.value = form.scheduledAt ? '예약 초기화 작업을 등록했습니다.' : '초기화 작업을 등록했습니다.';
await loadState(true);
} catch (error) {
errorMessage.value = error instanceof Error ? error.message : '초기화 요청에 실패했습니다.';
@@ -668,6 +668,7 @@ onBeforeUnmount(() => {
<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>
@@ -690,6 +691,7 @@ onBeforeUnmount(() => {
예약 {{ 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>
@@ -703,7 +705,13 @@ onBeforeUnmount(() => {
</td>
<td class="max-w-xs p-2 text-xs">
{{ formatTime(operation.completedAt) }}
<div v-if="operation.error" class="mt-1 text-red-400">{{ operation.error }}</div>
<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">
<button
@@ -723,7 +731,7 @@ onBeforeUnmount(() => {
</td>
</tr>
<tr v-if="operations.length === 0">
<td colspan="9" class="p-6 text-center text-zinc-500">작업 이력이 없습니다.</td>
<td colspan="10" class="p-6 text-center text-zinc-500">작업 이력이 없습니다.</td>
</tr>
</tbody>
</table>