security-alert-center/frontend/src/views/HostsView.vue

<template>
  <h1>Хосты</h1>
  <div class="filters">
    <label>
      Поиск (hostname / display name)
      <input v-model="search" type="search" placeholder="UNMS Kalina" @keyup.enter="loadHosts" />
    </label>
    <button type="button" class="secondary" @click="loadHosts">Найти</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><button type="button" class="th-sort" @click="setSort('id')">ID {{ sortMark('id') }}</button></th>
          <th><button type="button" class="th-sort" @click="setSort('display_name')">Имя {{ sortMark('display_name') }}</button></th>
          <th><button type="button" class="th-sort" @click="setSort('hostname')">Hostname {{ sortMark('hostname') }}</button></th>
          <th><button type="button" class="th-sort" @click="setSort('product_version')">Версия агента {{ sortMark('product_version') }}</button></th>
          <th><button type="button" class="th-sort" @click="setSort('os_family')">OS {{ sortMark('os_family') }}</button></th>
          <th><button type="button" class="th-sort" @click="setSort('ipv4')">IPv4 {{ sortMark('ipv4') }}</button></th>
          <th><button type="button" class="th-sort" @click="setSort('agent_status')">Статус {{ sortMark('agent_status') }}</button></th>
          <th>Heartbeat</th>
          <th><button type="button" class="th-sort" @click="setSort('last_daily_report_at')">Отчёт {{ sortMark('last_daily_report_at') }}</button></th>
          <th><button type="button" class="th-sort" @click="setSort('last_seen_at')">Last seen {{ sortMark('last_seen_at') }}</button></th>
          <th><button type="button" class="th-sort" @click="setSort('event_count')">Events {{ sortMark('event_count') }}</button></th>
          <th>Действия</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="h in sortedItems" :key="h.id">
          <td>{{ h.id }}</td>
          <td>
            <RouterLink :to="`/hosts/${h.id}`" class="host-link">
              {{ h.display_name || h.hostname }}
            </RouterLink>
          </td>
          <td>
            <RouterLink v-if="h.hostname !== (h.display_name || h.hostname)" :to="`/hosts/${h.id}`" class="host-link">
              {{ h.hostname }}
            </RouterLink>
            <span v-else>{{ h.hostname }}</span>
          </td>
          <td>{{ h.product_version || "—" }}</td>
          <td>{{ h.os_family }}</td>
          <td>{{ h.ipv4 || "—" }}</td>
          <td :class="'agent-' + h.agent_status">{{ agentLabel(h.agent_status) }}</td>
          <td>{{ h.last_heartbeat_at ? formatDt(h.last_heartbeat_at) : "—" }}</td>
          <td>
            <RouterLink
              v-if="h.last_daily_report_at"
              :to="{ path: '/reports', query: { hostname: h.hostname } }"
            >
              {{ formatDt(h.last_daily_report_at) }}
            </RouterLink>
            <span v-else>—</span>
          </td>
          <td>{{ formatDt(h.last_seen_at) }}</td>
          <td>{{ h.event_count ?? 0 }}</td>
          <td class="actions">
            <button
              type="button"
              class="danger"
              :disabled="deletingId === h.id"
              title="Удалить хост и все его события"
              @click="confirmDelete(h)"
            >
              Удалить
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </template>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { apiFetch, type HostListResponse, type HostSummary } from "../api";

const data = ref<HostListResponse | null>(null);
const loading = ref(false);
const error = ref("");
const search = ref("");
type SortKey =
  | "id"
  | "display_name"
  | "hostname"
  | "product_version"
  | "os_family"
  | "ipv4"
  | "agent_status"
  | "last_seen_at"
  | "event_count"
  | "last_daily_report_at";

const HOSTS_SORT_KEYS: SortKey[] = [
  "id",
  "display_name",
  "hostname",
  "product_version",
  "os_family",
  "ipv4",
  "agent_status",
  "last_seen_at",
  "event_count",
  "last_daily_report_at",
];

const HOSTS_SORT_STORAGE_KEY = "sac_hosts_sort";

function loadHostsSortPrefs(): { sortBy: SortKey; sortDir: "asc" | "desc" } {
  const fallback = { sortBy: "last_seen_at" as SortKey, sortDir: "desc" as const };
  try {
    const raw = localStorage.getItem(HOSTS_SORT_STORAGE_KEY);
    if (!raw) return fallback;
    const parsed = JSON.parse(raw) as { sortBy?: string; sortDir?: string };
    if (
      parsed.sortBy &&
      HOSTS_SORT_KEYS.includes(parsed.sortBy as SortKey) &&
      (parsed.sortDir === "asc" || parsed.sortDir === "desc")
    ) {
      return { sortBy: parsed.sortBy as SortKey, sortDir: parsed.sortDir };
    }
  } catch {
    /* ignore corrupt storage */
  }
  return fallback;
}

function saveHostsSortPrefs(sortBy: SortKey, sortDir: "asc" | "desc") {
  localStorage.setItem(HOSTS_SORT_STORAGE_KEY, JSON.stringify({ sortBy, sortDir }));
}

const initialSort = loadHostsSortPrefs();
const sortBy = ref<SortKey>(initialSort.sortBy);
const sortDir = ref<"asc" | "desc">(initialSort.sortDir);
const deletingId = ref<number | null>(null);

function formatDt(iso: string) {
  return new Date(iso).toLocaleString("ru-RU");
}

function agentLabel(status: string) {
  if (status === "online") return "online";
  if (status === "stale") return "stale";
  return "unknown";
}

function agentStatusOrder(status: string) {
  if (status === "online") return 0;
  if (status === "stale") return 1;
  return 2;
}

function setSort(key: SortKey) {
  if (sortBy.value === key) {
    sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
  } else {
    sortBy.value = key;
    sortDir.value = key === "id" || key === "last_seen_at" || key === "event_count" ? "desc" : "asc";
  }
  saveHostsSortPrefs(sortBy.value, sortDir.value);
}

function sortMark(key: SortKey) {
  if (sortBy.value !== key) return "";
  return sortDir.value === "asc" ? "↑" : "↓";
}

function compareNullableStrings(a: string | null, b: string | null) {
  const av = (a ?? "").trim().toLowerCase();
  const bv = (b ?? "").trim().toLowerCase();
  return av.localeCompare(bv, "ru");
}

function compareNullableDates(a: string | null, b: string | null) {
  const av = a ? new Date(a).getTime() : 0;
  const bv = b ? new Date(b).getTime() : 0;
  return av - bv;
}

const sortedItems = computed(() => {
  const items = [...(data.value?.items ?? [])];
  const key = sortBy.value;
  const dir = sortDir.value === "asc" ? 1 : -1;
  items.sort((a: HostSummary, b: HostSummary) => {
    let cmp = 0;
    switch (key) {
      case "id":
        cmp = a.id - b.id;
        break;
      case "display_name":
        cmp = compareNullableStrings(a.display_name, b.display_name);
        break;
      case "hostname":
        cmp = compareNullableStrings(a.hostname, b.hostname);
        break;
      case "product_version":
        cmp = compareNullableStrings(a.product_version, b.product_version);
        break;
      case "os_family":
        cmp = compareNullableStrings(a.os_family, b.os_family);
        break;
      case "ipv4":
        cmp = compareNullableStrings(a.ipv4, b.ipv4);
        break;
      case "agent_status":
        cmp = agentStatusOrder(a.agent_status) - agentStatusOrder(b.agent_status);
        break;
      case "event_count":
        cmp = (a.event_count ?? 0) - (b.event_count ?? 0);
        break;
      case "last_daily_report_at":
        cmp = compareNullableDates(a.last_daily_report_at, b.last_daily_report_at);
        break;
      case "last_seen_at":
        cmp = compareNullableDates(a.last_seen_at, b.last_seen_at);
        break;
    }
    if (cmp === 0) {
      cmp = a.hostname.localeCompare(b.hostname, "ru");
    }
    return cmp * dir;
  });
  return items;
});

async function loadHosts() {
  loading.value = true;
  error.value = "";
  try {
    const q = search.value.trim();
    const params = new URLSearchParams({ page: "1", page_size: "100" });
    if (q) params.set("hostname", q);
    data.value = await apiFetch<HostListResponse>(`/api/v1/hosts?${params}`);
  } catch (e) {
    error.value = e instanceof Error ? e.message : "Ошибка";
  } finally {
    loading.value = false;
  }
}

interface HostDeleteResponse {
  status: string;
  host_id: number;
  hostname: string;
  deleted_events: number;
  deleted_problems: number;
}

async function confirmDelete(h: HostSummary) {
  const label = h.display_name || h.hostname;
  const n = h.event_count ?? 0;
  const msg =
    `Удалить хост «${label}» (${h.hostname})?\n\n` +
    `Будут удалены все события (${n}) и проблемы этого хоста. ` +
    `При новом ingest агент снова появится в списке.`;
  if (!window.confirm(msg)) {
    return;
  }
  deletingId.value = h.id;
  error.value = "";
  try {
    await apiFetch<HostDeleteResponse>(`/api/v1/hosts/${h.id}`, { method: "DELETE" });
    await loadHosts();
  } catch (e) {
    error.value = e instanceof Error ? e.message : "Не удалось удалить хост";
  } finally {
    deletingId.value = null;
  }
}

onMounted(() => {
  loadHosts();
});
</script>

<style scoped>
.host-link {
  cursor: pointer;
  text-decoration: none;
}
.host-link:hover {
  text-decoration: underline;
}
</style>