fix(ui): full-row host click, agent version label on host card
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+14
-17
@@ -17,29 +17,26 @@ a {
|
||||
color: #7eb8ff;
|
||||
}
|
||||
|
||||
/* Клик по хосту в таблице — как пункты левого меню (полоска слева, без подчёркивания). */
|
||||
.sac-host-nav-link {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.45rem 0.2rem 0.3rem;
|
||||
margin: -0.2rem -0.35rem;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid transparent;
|
||||
color: #c5d0dc;
|
||||
text-decoration: none;
|
||||
/* Клик по строке хоста — как пункты левого меню (полоска слева на всю строку). */
|
||||
.sac-host-row {
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
transition: background 0.12s ease, box-shadow 0.12s ease;
|
||||
}
|
||||
|
||||
.sac-host-nav-link:hover {
|
||||
.sac-host-row:hover,
|
||||
.sac-host-row:focus-visible {
|
||||
background: #1e2d3d;
|
||||
color: #fff;
|
||||
border-left-color: #3db8ff;
|
||||
box-shadow: inset 3px 0 0 #3db8ff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sac-host-nav-link.router-link-active {
|
||||
background: #1a3a52;
|
||||
color: #fff;
|
||||
border-left-color: #3db8ff;
|
||||
.sac-host-row td.actions {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.sac-host-row:hover td.actions,
|
||||
.sac-host-row:focus-visible td.actions {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.layout {
|
||||
|
||||
@@ -8,11 +8,10 @@
|
||||
<p>
|
||||
<strong>Hostname:</strong> {{ host.hostname }}
|
||||
· <strong>ID:</strong> {{ host.id }}
|
||||
· <strong>Агент:</strong>
|
||||
<span :class="'agent-' + host.agent_status">{{ agentLabel(host.agent_status) }}</span>
|
||||
· <strong>Агент:</strong> <span :class="'agent-' + host.agent_status">{{ agentLabel(host.agent_status) }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Product:</strong> {{ host.product }} {{ host.product_version || "" }}
|
||||
<strong>Версия агента:</strong> {{ host.product_version || "—" }}
|
||||
· <strong>OS:</strong> {{ host.os_family }} {{ host.os_version || "" }}
|
||||
· <strong>IPv4:</strong> {{ host.ipv4 || "—" }}
|
||||
</p>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<p v-else-if="loading">Загрузка…</p>
|
||||
<template v-else>
|
||||
<p>Всего: {{ data?.total ?? 0 }}</p>
|
||||
<table>
|
||||
<table class="hosts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><button type="button" class="th-sort" @click="setSort('id')">ID {{ sortMark('id') }}</button></th>
|
||||
@@ -29,24 +29,24 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="h in sortedItems" :key="h.id">
|
||||
<tr
|
||||
v-for="h in sortedItems"
|
||||
:key="h.id"
|
||||
class="sac-host-row"
|
||||
tabindex="0"
|
||||
:title="`Карточка хоста ${h.hostname}`"
|
||||
@click="openHost(h.id)"
|
||||
@keydown.enter="openHost(h.id)"
|
||||
>
|
||||
<td>{{ h.id }}</td>
|
||||
<td>
|
||||
<RouterLink
|
||||
:to="`/hosts/${h.id}`"
|
||||
class="sac-host-nav-link"
|
||||
:title="`Карточка хоста ${h.hostname}`"
|
||||
>
|
||||
{{ h.display_name || h.hostname }}
|
||||
</RouterLink>
|
||||
</td>
|
||||
<td>{{ h.display_name || h.hostname }}</td>
|
||||
<td>{{ h.hostname }}</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>
|
||||
<td @click.stop>
|
||||
<RouterLink
|
||||
v-if="h.last_daily_report_at"
|
||||
:to="{ path: '/reports', query: { hostname: h.hostname } }"
|
||||
@@ -57,7 +57,7 @@
|
||||
</td>
|
||||
<td>{{ formatDt(h.last_seen_at) }}</td>
|
||||
<td>{{ h.event_count ?? 0 }}</td>
|
||||
<td class="actions">
|
||||
<td class="actions" @click.stop>
|
||||
<button
|
||||
type="button"
|
||||
class="danger"
|
||||
@@ -76,8 +76,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { apiFetch, type HostListResponse, type HostSummary } from "../api";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const data = ref<HostListResponse | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref("");
|
||||
@@ -147,6 +150,10 @@ function agentLabel(status: string) {
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
function openHost(id: number) {
|
||||
router.push(`/hosts/${id}`);
|
||||
}
|
||||
|
||||
function agentStatusOrder(status: string) {
|
||||
if (status === "online") return 0;
|
||||
if (status === "stale") return 1;
|
||||
|
||||
Reference in New Issue
Block a user