237 lines
8.5 KiB
Vue
237 lines
8.5 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
/**
|
|||
|
|
* Админка SaaS → Impersonation: активные и недавно завершённые сессии.
|
|||
|
|
*
|
|||
|
|
* 2 секции:
|
|||
|
|
* - «Активные» (used_at != null AND session_ended_at == null) — каждую можно
|
|||
|
|
* завершить кнопкой «Завершить» (POST /api/admin/impersonation/end).
|
|||
|
|
* - «Последние 20 завершённых» — read-only лог (для аудита).
|
|||
|
|
*
|
|||
|
|
* На MVP без auth-middleware (см. routes/web.php). Production: middleware
|
|||
|
|
* 'auth:saas-admin' + role super_admin.
|
|||
|
|
*/
|
|||
|
|
import * as adminApi from '../../api/admin';
|
|||
|
|
import { extractErrorMessage } from '../../api/client';
|
|||
|
|
import { onMounted, ref } from 'vue';
|
|||
|
|
|
|||
|
|
const active = ref<adminApi.ImpersonationActiveSession[]>([]);
|
|||
|
|
const recent = ref<adminApi.ImpersonationRecentSession[]>([]);
|
|||
|
|
const loadingActive = ref(false);
|
|||
|
|
const loadingRecent = ref(false);
|
|||
|
|
const errorMessage = ref<string | null>(null);
|
|||
|
|
const endingTokenId = ref<number | null>(null);
|
|||
|
|
|
|||
|
|
async function loadActive() {
|
|||
|
|
loadingActive.value = true;
|
|||
|
|
try {
|
|||
|
|
active.value = await adminApi.impersonationActive();
|
|||
|
|
} catch (err) {
|
|||
|
|
errorMessage.value = extractErrorMessage(err, 'Не удалось загрузить активные сессии.');
|
|||
|
|
} finally {
|
|||
|
|
loadingActive.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function loadRecent() {
|
|||
|
|
loadingRecent.value = true;
|
|||
|
|
try {
|
|||
|
|
recent.value = await adminApi.impersonationRecent();
|
|||
|
|
} catch (err) {
|
|||
|
|
errorMessage.value = extractErrorMessage(err, 'Не удалось загрузить недавние сессии.');
|
|||
|
|
} finally {
|
|||
|
|
loadingRecent.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function endSession(tokenId: number) {
|
|||
|
|
endingTokenId.value = tokenId;
|
|||
|
|
try {
|
|||
|
|
await adminApi.impersonationEnd(tokenId);
|
|||
|
|
// Перегружаем оба списка — завершённый перейдёт из active в recent.
|
|||
|
|
await Promise.all([loadActive(), loadRecent()]);
|
|||
|
|
} catch (err) {
|
|||
|
|
errorMessage.value = extractErrorMessage(err, 'Не удалось завершить сессию.');
|
|||
|
|
} finally {
|
|||
|
|
endingTokenId.value = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatDateTime(iso: string): string {
|
|||
|
|
return new Date(iso).toLocaleString('ru-RU', { dateStyle: 'short', timeStyle: 'short' });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatDuration(s: number | null): string {
|
|||
|
|
if (s === null) return '—';
|
|||
|
|
if (s < 60) return `${s} сек`;
|
|||
|
|
if (s < 3600) return `${Math.floor(s / 60)} мин ${s % 60} сек`;
|
|||
|
|
return `${Math.floor(s / 3600)} ч ${Math.floor((s % 3600) / 60)} мин`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function expiresIn(iso: string): string {
|
|||
|
|
const ms = new Date(iso).getTime() - Date.now();
|
|||
|
|
if (ms <= 0) return 'истёк';
|
|||
|
|
const min = Math.floor(ms / 60000);
|
|||
|
|
if (min < 60) return `через ${min} мин`;
|
|||
|
|
return `через ${Math.floor(min / 60)} ч`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
loadActive();
|
|||
|
|
loadRecent();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
defineExpose({ active, recent, loadActive, loadRecent, endSession });
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<v-container fluid class="admin-impersonation pa-6">
|
|||
|
|
<header class="page-head mb-4">
|
|||
|
|
<div>
|
|||
|
|
<h1 class="text-h4 page-title">Impersonation</h1>
|
|||
|
|
<p class="text-body-2 text-medium-emphasis ma-0">Активные сессии «вход как клиент» (Ю-1 / ТЗ §22.7).</p>
|
|||
|
|
</div>
|
|||
|
|
<v-btn
|
|||
|
|
variant="outlined"
|
|||
|
|
size="small"
|
|||
|
|
prepend-icon="mdi-refresh"
|
|||
|
|
:loading="loadingActive"
|
|||
|
|
data-testid="refresh-btn"
|
|||
|
|
@click="
|
|||
|
|
loadActive();
|
|||
|
|
loadRecent();
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
Обновить
|
|||
|
|
</v-btn>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<v-alert
|
|||
|
|
v-if="errorMessage"
|
|||
|
|
type="error"
|
|||
|
|
variant="tonal"
|
|||
|
|
density="compact"
|
|||
|
|
class="mb-4"
|
|||
|
|
data-testid="error-alert"
|
|||
|
|
>
|
|||
|
|
{{ errorMessage }}
|
|||
|
|
</v-alert>
|
|||
|
|
|
|||
|
|
<!-- ACTIVE -->
|
|||
|
|
<v-card variant="outlined" class="pa-4 mb-4" data-testid="active-section">
|
|||
|
|
<h2 class="text-h6 mb-3">Активные ({{ active.length }})</h2>
|
|||
|
|
|
|||
|
|
<div v-if="loadingActive" class="text-center py-4">
|
|||
|
|
<v-progress-circular indeterminate color="primary" />
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
v-else-if="active.length === 0"
|
|||
|
|
class="text-medium-emphasis text-center py-4"
|
|||
|
|
data-testid="active-empty"
|
|||
|
|
>
|
|||
|
|
Нет активных impersonation-сессий.
|
|||
|
|
</div>
|
|||
|
|
<v-table v-else density="comfortable">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>Тенант</th>
|
|||
|
|
<th>Admin ID</th>
|
|||
|
|
<th>Email клиента</th>
|
|||
|
|
<th>Основание</th>
|
|||
|
|
<th>Активна с</th>
|
|||
|
|
<th>TTL</th>
|
|||
|
|
<th class="text-end">Действие</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr v-for="s in active" :key="s.token_id" data-testid="active-row">
|
|||
|
|
<td>{{ s.tenant_name ?? `#${s.tenant_id}` }}</td>
|
|||
|
|
<td class="num">{{ s.requested_by }}</td>
|
|||
|
|
<td class="text-caption">{{ s.sent_to_email }}</td>
|
|||
|
|
<td class="reason-cell">{{ s.reason }}</td>
|
|||
|
|
<td class="num text-medium-emphasis">{{ formatDateTime(s.used_at) }}</td>
|
|||
|
|
<td class="num text-medium-emphasis">{{ expiresIn(s.expires_at) }}</td>
|
|||
|
|
<td class="text-end">
|
|||
|
|
<v-btn
|
|||
|
|
size="small"
|
|||
|
|
color="error"
|
|||
|
|
variant="tonal"
|
|||
|
|
prepend-icon="mdi-stop-circle-outline"
|
|||
|
|
:loading="endingTokenId === s.token_id"
|
|||
|
|
:data-testid="`end-btn-${s.token_id}`"
|
|||
|
|
@click="endSession(s.token_id)"
|
|||
|
|
>
|
|||
|
|
Завершить
|
|||
|
|
</v-btn>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</v-table>
|
|||
|
|
</v-card>
|
|||
|
|
|
|||
|
|
<!-- RECENT -->
|
|||
|
|
<v-card variant="outlined" class="pa-4" data-testid="recent-section">
|
|||
|
|
<h2 class="text-h6 mb-3">Недавно завершённые ({{ recent.length }})</h2>
|
|||
|
|
|
|||
|
|
<div v-if="loadingRecent" class="text-center py-4">
|
|||
|
|
<v-progress-circular indeterminate color="primary" />
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
v-else-if="recent.length === 0"
|
|||
|
|
class="text-medium-emphasis text-center py-4"
|
|||
|
|
data-testid="recent-empty"
|
|||
|
|
>
|
|||
|
|
История impersonation-сессий пуста.
|
|||
|
|
</div>
|
|||
|
|
<v-table v-else density="comfortable">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>Тенант</th>
|
|||
|
|
<th>Admin</th>
|
|||
|
|
<th>Основание</th>
|
|||
|
|
<th>Длилась</th>
|
|||
|
|
<th>Завершена</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr v-for="s in recent" :key="s.token_id" data-testid="recent-row">
|
|||
|
|
<td>{{ s.tenant_name ?? `#${s.tenant_id}` }}</td>
|
|||
|
|
<td class="num">{{ s.requested_by }}</td>
|
|||
|
|
<td class="reason-cell">{{ s.reason }}</td>
|
|||
|
|
<td class="num">{{ formatDuration(s.duration_seconds) }}</td>
|
|||
|
|
<td class="num text-medium-emphasis">{{ formatDateTime(s.session_ended_at) }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</v-table>
|
|||
|
|
</v-card>
|
|||
|
|
</v-container>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.admin-impersonation {
|
|||
|
|
max-width: 1440px;
|
|||
|
|
}
|
|||
|
|
.page-head {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
.page-title {
|
|||
|
|
font-variation-settings: 'opsz' 28;
|
|||
|
|
letter-spacing: -0.018em;
|
|||
|
|
}
|
|||
|
|
.num {
|
|||
|
|
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|||
|
|
font-feature-settings: 'tnum';
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.reason-cell {
|
|||
|
|
max-width: 320px;
|
|||
|
|
white-space: normal;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
color: #081319;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
</style>
|