feat: phase 1C JWT UI, events/hosts API, Vue frontend
This commit is contained in:
PTah
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<nav v-if="showNav">
|
||||
<span class="brand">SAC</span>
|
||||
<RouterLink to="/events">События</RouterLink>
|
||||
<RouterLink to="/hosts">Хосты</RouterLink>
|
||||
<button type="button" class="secondary" @click="logout">Выход</button>
|
||||
</nav>
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { clearToken, getToken } from "./api";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const showNav = computed(() => route.path !== "/login" && !!getToken());
|
||||
|
||||
function logout() {
|
||||
clearToken();
|
||||
router.push("/login");
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
const TOKEN_KEY = "sac_token";
|
||||
|
||||
export function getToken(): string | null {
|
||||
return localStorage.getItem(TOKEN_KEY);
|
||||
}
|
||||
|
||||
export function setToken(token: string): void {
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
}
|
||||
|
||||
export function clearToken(): void {
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
}
|
||||
|
||||
export async function apiFetch<T>(path: string, init: RequestInit = {}): Promise<T> {
|
||||
const headers = new Headers(init.headers);
|
||||
if (!headers.has("Content-Type") && init.body) {
|
||||
headers.set("Content-Type", "application/json");
|
||||
}
|
||||
const token = getToken();
|
||||
if (token) {
|
||||
headers.set("Authorization", `Bearer ${token}`);
|
||||
}
|
||||
const res = await fetch(path, { ...init, headers });
|
||||
if (res.status === 401) {
|
||||
clearToken();
|
||||
window.location.href = "/login";
|
||||
throw new Error("Unauthorized");
|
||||
}
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(text || res.statusText);
|
||||
}
|
||||
return res.json() as Promise<T>;
|
||||
}
|
||||
|
||||
export interface TokenResponse {
|
||||
access_token: string;
|
||||
token_type: string;
|
||||
}
|
||||
|
||||
export interface EventSummary {
|
||||
id: number;
|
||||
event_id: string;
|
||||
host_id: number;
|
||||
hostname: string;
|
||||
occurred_at: string;
|
||||
received_at: string;
|
||||
category: string;
|
||||
type: string;
|
||||
severity: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
}
|
||||
|
||||
export interface EventListResponse {
|
||||
items: EventSummary[];
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
}
|
||||
|
||||
export interface EventDetail extends EventSummary {
|
||||
details: Record<string, unknown> | null;
|
||||
raw: Record<string, unknown> | null;
|
||||
payload: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface HostSummary {
|
||||
id: number;
|
||||
hostname: string;
|
||||
display_name: string | null;
|
||||
os_family: string;
|
||||
product: string;
|
||||
product_version: string | null;
|
||||
ipv4: string | null;
|
||||
last_seen_at: string;
|
||||
event_count: number | null;
|
||||
}
|
||||
|
||||
export interface HostListResponse {
|
||||
items: HostSummary[];
|
||||
total: number;
|
||||
page: number;
|
||||
page_size: number;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import "./style.css";
|
||||
|
||||
createApp(App).use(router).mount("#app");
|
||||
@@ -0,0 +1,25 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import { getToken } from "./api";
|
||||
import EventsView from "./views/EventsView.vue";
|
||||
import EventDetailView from "./views/EventDetailView.vue";
|
||||
import HostsView from "./views/HostsView.vue";
|
||||
import LoginView from "./views/LoginView.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{ path: "/", redirect: "/events" },
|
||||
{ path: "/login", component: LoginView },
|
||||
{ path: "/events", component: EventsView },
|
||||
{ path: "/events/:id", component: EventDetailView, props: true },
|
||||
{ path: "/hosts", component: HostsView },
|
||||
],
|
||||
});
|
||||
|
||||
router.beforeEach((to) => {
|
||||
if (to.path === "/login") return true;
|
||||
if (!getToken()) return { path: "/login" };
|
||||
return true;
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -0,0 +1,117 @@
|
||||
:root {
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
line-height: 1.5;
|
||||
color: #e8eaed;
|
||||
background: #0f1419;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #7eb8ff;
|
||||
}
|
||||
|
||||
.layout {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1.25rem 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid #2a3441;
|
||||
}
|
||||
|
||||
nav .brand {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0.65rem;
|
||||
border-bottom: 1px solid #2a3441;
|
||||
}
|
||||
|
||||
th {
|
||||
color: #9aa4b2;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sev-critical,
|
||||
.sev-high {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
.sev-warning {
|
||||
color: #ffc857;
|
||||
}
|
||||
.sev-info {
|
||||
color: #7eb8ff;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #1a2332;
|
||||
border: 1px solid #2a3441;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
font: inherit;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #3d4f63;
|
||||
background: #0f1419;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background: transparent;
|
||||
border-color: #3d4f63;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
font-size: 0.8rem;
|
||||
background: #0f1419;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<p><RouterLink to="/events">← События</RouterLink></p>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading">Загрузка…</p>
|
||||
<template v-else-if="event">
|
||||
<h1>{{ event.title }}</h1>
|
||||
<div class="card">
|
||||
<p><strong>ID:</strong> {{ event.id }} · <strong>event_id:</strong> {{ event.event_id }}</p>
|
||||
<p><strong>Хост:</strong> {{ event.hostname }} · <strong>Severity:</strong>
|
||||
<span :class="'sev-' + event.severity">{{ event.severity }}</span>
|
||||
</p>
|
||||
<p><strong>Type:</strong> <code>{{ event.type }}</code></p>
|
||||
<p><strong>Occurred:</strong> {{ event.occurred_at }}</p>
|
||||
<p>{{ event.summary }}</p>
|
||||
</div>
|
||||
<h2>details</h2>
|
||||
<pre>{{ JSON.stringify(event.details, null, 2) }}</pre>
|
||||
<h2>payload</h2>
|
||||
<pre>{{ JSON.stringify(event.payload, null, 2) }}</pre>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { apiFetch, type EventDetail } from "../api";
|
||||
|
||||
const props = defineProps<{ id: string }>();
|
||||
const event = ref<EventDetail | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
event.value = await apiFetch<EventDetail>(`/api/v1/events/${props.id}`);
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : "Не найдено";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
watch(() => props.id, load);
|
||||
</script>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<h1>События</h1>
|
||||
<div class="filters">
|
||||
<input v-model="q" placeholder="Поиск в summary/title" @keyup.enter="load(1)" />
|
||||
<select v-model="severity" @change="load(1)">
|
||||
<option value="">Все severity</option>
|
||||
<option>info</option>
|
||||
<option>warning</option>
|
||||
<option>high</option>
|
||||
<option>critical</option>
|
||||
</select>
|
||||
<input v-model="typeFilter" placeholder="type" @keyup.enter="load(1)" />
|
||||
<button type="button" @click="load(1)">Применить</button>
|
||||
</div>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading">Загрузка…</p>
|
||||
<template v-else>
|
||||
<p>Всего: {{ data?.total ?? 0 }}</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Время</th>
|
||||
<th>Хост</th>
|
||||
<th>Severity</th>
|
||||
<th>Type</th>
|
||||
<th>Title</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="e in data?.items ?? []" :key="e.id">
|
||||
<td>
|
||||
<RouterLink :to="`/events/${e.id}`">{{ e.id }}</RouterLink>
|
||||
</td>
|
||||
<td>{{ formatDt(e.occurred_at) }}</td>
|
||||
<td>{{ e.hostname }}</td>
|
||||
<td :class="'sev-' + e.severity">{{ e.severity }}</td>
|
||||
<td><code>{{ e.type }}</code></td>
|
||||
<td>{{ e.title }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="filters" style="margin-top: 1rem">
|
||||
<button type="button" class="secondary" :disabled="page <= 1" @click="load(page - 1)">Назад</button>
|
||||
<span>Стр. {{ page }}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="secondary"
|
||||
:disabled="!data || page * pageSize >= data.total"
|
||||
@click="load(page + 1)"
|
||||
>
|
||||
Вперёд
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { apiFetch, type EventListResponse } from "../api";
|
||||
|
||||
const data = ref<EventListResponse | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
const page = ref(1);
|
||||
const pageSize = 50;
|
||||
const q = ref("");
|
||||
const severity = ref("");
|
||||
const typeFilter = ref("");
|
||||
|
||||
function formatDt(iso: string) {
|
||||
return new Date(iso).toLocaleString("ru-RU");
|
||||
}
|
||||
|
||||
async function load(p: number) {
|
||||
page.value = p;
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: String(page.value),
|
||||
page_size: String(pageSize),
|
||||
});
|
||||
if (severity.value) params.set("severity", severity.value);
|
||||
if (typeFilter.value) params.set("type", typeFilter.value);
|
||||
if (q.value.trim()) params.set("q", q.value.trim());
|
||||
data.value = await apiFetch<EventListResponse>(`/api/v1/events?${params}`);
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : "Ошибка загрузки";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => load(1));
|
||||
</script>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<h1>Хосты</h1>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading">Загрузка…</p>
|
||||
<template v-else>
|
||||
<p>Всего: {{ data?.total ?? 0 }}</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Hostname</th>
|
||||
<th>Product</th>
|
||||
<th>OS</th>
|
||||
<th>IPv4</th>
|
||||
<th>Last seen</th>
|
||||
<th>Events</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="h in data?.items ?? []" :key="h.id">
|
||||
<td>{{ h.id }}</td>
|
||||
<td>{{ h.display_name || h.hostname }}</td>
|
||||
<td>{{ h.product }} {{ h.product_version || "" }}</td>
|
||||
<td>{{ h.os_family }}</td>
|
||||
<td>{{ h.ipv4 || "—" }}</td>
|
||||
<td>{{ formatDt(h.last_seen_at) }}</td>
|
||||
<td>{{ h.event_count ?? 0 }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { apiFetch, type HostListResponse } from "../api";
|
||||
|
||||
const data = ref<HostListResponse | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
|
||||
function formatDt(iso: string) {
|
||||
return new Date(iso).toLocaleString("ru-RU");
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
data.value = await apiFetch<HostListResponse>("/api/v1/hosts?page=1&page_size=100");
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : "Ошибка";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="card" style="max-width: 360px; margin: 4rem auto">
|
||||
<h1 style="margin-top: 0">Вход в SAC</h1>
|
||||
<form @submit.prevent="submit">
|
||||
<p>
|
||||
<label>Логин<br />
|
||||
<input v-model="username" autocomplete="username" required />
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>Пароль<br />
|
||||
<input v-model="password" type="password" autocomplete="current-password" required />
|
||||
</label>
|
||||
</p>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<button type="submit" :disabled="loading">{{ loading ? "…" : "Войти" }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { apiFetch, setToken, type TokenResponse } from "../api";
|
||||
|
||||
const router = useRouter();
|
||||
const username = ref("admin");
|
||||
const password = ref("");
|
||||
const error = ref("");
|
||||
const loading = ref(false);
|
||||
|
||||
async function submit() {
|
||||
error.value = "";
|
||||
loading.value = true;
|
||||
try {
|
||||
const data = await apiFetch<TokenResponse>("/api/v1/auth/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ username: username.value, password: password.value }),
|
||||
});
|
||||
setToken(data.access_token);
|
||||
await router.push("/events");
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : "Ошибка входа";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user