Start operator UI redesign
This commit is contained in:
benya
+71
-15
@@ -22,10 +22,17 @@ const els = {
|
||||
apiState: document.querySelector("#apiState"),
|
||||
refreshBtn: document.querySelector("#refreshBtn"),
|
||||
deviceList: document.querySelector("#deviceList"),
|
||||
fleetView: document.querySelector("#fleetView"),
|
||||
fleetTotalCount: document.querySelector("#fleetTotalCount"),
|
||||
fleetOnlineCount: document.querySelector("#fleetOnlineCount"),
|
||||
fleetOfflineCount: document.querySelector("#fleetOfflineCount"),
|
||||
fleetAlertCount: document.querySelector("#fleetAlertCount"),
|
||||
navAlertCount: document.querySelector("#navAlertCount"),
|
||||
statusLine: document.querySelector("#statusLine"),
|
||||
pageTitle: document.querySelector("#pageTitle"),
|
||||
emptyState: document.querySelector("#emptyState"),
|
||||
deviceView: document.querySelector("#deviceView"),
|
||||
backToFleetBtn: document.querySelector("#backToFleetBtn"),
|
||||
deviceName: document.querySelector("#deviceName"),
|
||||
deviceMeta: document.querySelector("#deviceMeta"),
|
||||
deviceBadge: document.querySelector("#deviceBadge"),
|
||||
@@ -269,6 +276,26 @@ function deviceDisplayName(device) {
|
||||
return device.id || "unknown";
|
||||
}
|
||||
|
||||
function deviceModel(device) {
|
||||
return device && device.inventory && device.inventory.board && device.inventory.board.model
|
||||
? device.inventory.board.model
|
||||
: "-";
|
||||
}
|
||||
|
||||
function deviceClientCount(device) {
|
||||
const leases = Array.isArray(device.inventory && device.inventory.dhcp_leases) ? device.inventory.dhcp_leases.length : 0;
|
||||
const wifi = Array.isArray(device.inventory && device.inventory.wifi_clients) ? device.inventory.wifi_clients.length : 0;
|
||||
return { leases, wifi, total: Math.max(leases, wifi) };
|
||||
}
|
||||
|
||||
function deviceWanSummary(device) {
|
||||
const wanIP = device.inventory && device.inventory.wan_ip;
|
||||
const checks = Array.isArray(device.metrics && device.metrics.connectivity_checks) ? device.metrics.connectivity_checks : [];
|
||||
if (!device.online) return { label: "Нет данных", className: "offline" };
|
||||
if (checks.some((check) => !check.reachable)) return { label: wanIP || "Есть потери связи", className: "warning" };
|
||||
return { label: wanIP || "Подключено", className: "online" };
|
||||
}
|
||||
|
||||
function filteredDevices() {
|
||||
const search = els.fleetSearch.value.trim().toLowerCase();
|
||||
const group = els.fleetGroupFilter.value.trim().toLowerCase();
|
||||
@@ -284,6 +311,8 @@ function filteredDevices() {
|
||||
deviceDisplayName(device),
|
||||
device.id,
|
||||
device.openwrt_version,
|
||||
deviceModel(device),
|
||||
device.inventory && device.inventory.wan_ip,
|
||||
device.group,
|
||||
...(device.tags || []),
|
||||
].join(" ").toLowerCase();
|
||||
@@ -296,27 +325,46 @@ function filteredDevices() {
|
||||
function renderDevices() {
|
||||
const devices = filteredDevices();
|
||||
els.deviceList.innerHTML = "";
|
||||
const online = state.devices.filter((device) => device.online).length;
|
||||
const alerts = state.devices.filter((device) => device.active_alerts).length;
|
||||
els.fleetTotalCount.textContent = state.devices.length;
|
||||
els.fleetOnlineCount.textContent = online;
|
||||
els.fleetOfflineCount.textContent = state.devices.length - online;
|
||||
els.fleetAlertCount.textContent = alerts;
|
||||
els.navAlertCount.textContent = alerts;
|
||||
|
||||
if (devices.length === 0) {
|
||||
const empty = document.createElement("div");
|
||||
empty.className = "device-item";
|
||||
empty.textContent = "No devices";
|
||||
els.deviceList.appendChild(empty);
|
||||
els.emptyState.classList.remove("is-hidden");
|
||||
return;
|
||||
}
|
||||
els.emptyState.classList.add("is-hidden");
|
||||
|
||||
for (const device of devices) {
|
||||
const displayName = deviceDisplayName(device);
|
||||
const clients = deviceClientCount(device);
|
||||
const wan = deviceWanSummary(device);
|
||||
const item = document.createElement("button");
|
||||
item.type = "button";
|
||||
item.className = `device-item ${device.id === state.selectedDeviceId ? "is-selected" : ""}`;
|
||||
item.innerHTML = `
|
||||
<div class="device-line">
|
||||
<span class="fleet-status ${device.online ? "online" : "offline"}">
|
||||
<i></i>${device.online ? "На связи" : "Не на связи"}
|
||||
</span>
|
||||
<div class="device-identity">
|
||||
<strong>${escapeHtml(displayName)}</strong>
|
||||
${device.active_alerts ? `<b class="device-alert-count">${device.active_alerts}</b>` : ""}
|
||||
<small>${escapeHtml(device.openwrt_version || device.id)}</small>
|
||||
</div>
|
||||
<span>${device.online ? "online" : "offline"} - ${escapeHtml(device.openwrt_version || "unknown")}</span>
|
||||
<span>${escapeHtml([device.group || "", ...(device.tags || [])].filter(Boolean).join(" / ") || device.id)}</span>
|
||||
<div class="device-context">
|
||||
<span>${escapeHtml(deviceModel(device))}</span>
|
||||
<small>${escapeHtml([device.group || "", ...(device.tags || [])].filter(Boolean).join(" / ") || "Без группы")}</small>
|
||||
</div>
|
||||
<span class="wan-state ${wan.className}">${escapeHtml(wan.label)}</span>
|
||||
<span class="client-count">${clients.total}</span>
|
||||
<span class="${device.active_alerts ? "problem-count has-problems" : "problem-count"}">
|
||||
${device.active_alerts ? `${device.active_alerts} активн.` : "Нет"}
|
||||
</span>
|
||||
<span class="last-contact">${escapeHtml(formatDate(device.last_seen_at))}</span>
|
||||
<span class="row-chevron">›</span>
|
||||
`;
|
||||
item.addEventListener("click", () => selectDevice(device.id));
|
||||
els.deviceList.appendChild(item);
|
||||
@@ -325,13 +373,13 @@ function renderDevices() {
|
||||
|
||||
function renderDeviceDetail(device) {
|
||||
if (!device) {
|
||||
els.emptyState.classList.remove("is-hidden");
|
||||
els.fleetView.classList.remove("is-hidden");
|
||||
els.deviceView.classList.add("is-hidden");
|
||||
els.pageTitle.textContent = "Devices";
|
||||
els.pageTitle.textContent = "Объекты";
|
||||
return;
|
||||
}
|
||||
|
||||
els.emptyState.classList.add("is-hidden");
|
||||
els.fleetView.classList.add("is-hidden");
|
||||
els.deviceView.classList.remove("is-hidden");
|
||||
const displayName = deviceDisplayName(device);
|
||||
els.pageTitle.textContent = displayName;
|
||||
@@ -509,18 +557,18 @@ function renderAlerts(alerts) {
|
||||
}
|
||||
|
||||
async function loadDevices() {
|
||||
setStatus("Loading devices");
|
||||
setStatus("Обновление");
|
||||
const data = await api("/api/devices");
|
||||
state.devices = data.devices || [];
|
||||
if (!state.selectedDeviceId && state.devices.length > 0) {
|
||||
state.selectedDeviceId = state.devices[0].id;
|
||||
if (state.selectedDeviceId && !currentDevice()) {
|
||||
state.selectedDeviceId = null;
|
||||
}
|
||||
renderDevices();
|
||||
renderDeviceDetail(currentDevice());
|
||||
if (state.selectedDeviceId) {
|
||||
await Promise.all([loadCommands(), loadAudit(), loadMetricsHistory(), loadAlerts(), loadRemoteSessions()]);
|
||||
}
|
||||
setStatus("Ready");
|
||||
setStatus(`Обновлено ${new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`);
|
||||
}
|
||||
|
||||
async function selectDevice(id) {
|
||||
@@ -530,6 +578,13 @@ async function selectDevice(id) {
|
||||
await Promise.all([loadCommands(), loadAudit(), loadMetricsHistory(), loadAlerts(), loadRemoteSessions()]);
|
||||
}
|
||||
|
||||
function showFleet() {
|
||||
state.selectedDeviceId = null;
|
||||
state.selectedCommand = null;
|
||||
renderDevices();
|
||||
renderDeviceDetail(null);
|
||||
}
|
||||
|
||||
async function loadCommands() {
|
||||
if (!state.selectedDeviceId) return;
|
||||
const data = await api(`/api/devices/${encodeURIComponent(state.selectedDeviceId)}/commands?limit=50`);
|
||||
@@ -987,6 +1042,7 @@ els.loginForm.addEventListener("submit", (event) => {
|
||||
els.logoutBtn.addEventListener("click", () => logout().catch((error) => setStatus(error.message)));
|
||||
|
||||
els.refreshBtn.addEventListener("click", () => loadDevices().catch((error) => setStatus(error.message)));
|
||||
els.backToFleetBtn.addEventListener("click", showFleet);
|
||||
els.reloadCommandsBtn.addEventListener("click", () => loadCommands().catch((error) => setStatus(error.message)));
|
||||
els.reloadAuditBtn.addEventListener("click", () => loadAudit().catch((error) => setStatus(error.message)));
|
||||
els.reloadAlertsBtn.addEventListener("click", () => loadAlerts().catch((error) => setStatus(error.message)));
|
||||
|
||||
+87
-37
@@ -35,37 +35,38 @@
|
||||
<div class="brand-mark">R</div>
|
||||
<div>
|
||||
<h1>OpenWrt RMM</h1>
|
||||
<p id="apiState">API: checking</p>
|
||||
<p id="apiState">Проверка сервера</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="panel auth-panel">
|
||||
<div class="operator-row">
|
||||
<div>
|
||||
<small>Signed in as</small>
|
||||
<strong id="operatorName">operator</strong>
|
||||
</div>
|
||||
<button id="logoutBtn" type="button">Sign out</button>
|
||||
</div>
|
||||
</section>
|
||||
<nav class="main-nav" aria-label="Основная навигация">
|
||||
<button class="nav-item is-active" type="button">
|
||||
<span class="nav-icon">◫</span>
|
||||
Объекты
|
||||
</button>
|
||||
<button class="nav-item" type="button" disabled>
|
||||
<span class="nav-icon">!</span>
|
||||
Проблемы
|
||||
<span id="navAlertCount" class="nav-count">0</span>
|
||||
</button>
|
||||
<button class="nav-item" type="button" disabled>
|
||||
<span class="nav-icon">⌁</span>
|
||||
Операции
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<section class="panel">
|
||||
<div class="section-title">
|
||||
<h2>Devices</h2>
|
||||
<button id="refreshBtn" type="button">Refresh</button>
|
||||
<div class="sidebar-spacer"></div>
|
||||
|
||||
<div class="operator-row">
|
||||
<div class="operator-avatar">О</div>
|
||||
<div class="operator-copy">
|
||||
<small>Оператор</small>
|
||||
<strong id="operatorName">operator</strong>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<button class="filter is-active" data-filter="all" type="button">Все</button>
|
||||
<button class="filter" data-filter="online" type="button">Онлайн</button>
|
||||
<button class="filter" data-filter="offline" type="button">Офлайн</button>
|
||||
<button class="filter" data-filter="alerts" type="button">Проблемы</button>
|
||||
</div>
|
||||
<div class="fleet-filter-grid">
|
||||
<input id="fleetSearch" type="search" placeholder="Поиск по имени, ID, тегу">
|
||||
<input id="fleetGroupFilter" type="text" placeholder="Группа">
|
||||
<input id="fleetTagFilter" type="text" placeholder="Тег">
|
||||
</div>
|
||||
<div class="bulk-command-grid">
|
||||
<button id="logoutBtn" class="icon-button" type="button" title="Выйти" aria-label="Выйти">↪</button>
|
||||
</div>
|
||||
|
||||
<div class="bulk-command-grid is-hidden" aria-hidden="true">
|
||||
<select id="bulkCommandType">
|
||||
<option value="ping">ping</option>
|
||||
<option value="traceroute">traceroute</option>
|
||||
@@ -73,28 +74,77 @@
|
||||
</select>
|
||||
<input id="bulkCommandTarget" type="text" placeholder="цель">
|
||||
<button id="sendBulkCommandBtn" type="button">Запустить для выбранных</button>
|
||||
</div>
|
||||
<div id="deviceList" class="device-list"></div>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="workspace">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<p class="eyebrow">Fleet</p>
|
||||
<h2 id="pageTitle">Devices</h2>
|
||||
<p class="eyebrow">Управление</p>
|
||||
<h2 id="pageTitle">Объекты</h2>
|
||||
</div>
|
||||
<div class="topbar-actions">
|
||||
<span id="statusLine" class="status-line">Готово</span>
|
||||
<button id="refreshBtn" class="icon-button" type="button" title="Обновить данные" aria-label="Обновить данные">↻</button>
|
||||
</div>
|
||||
<div id="statusLine" class="status-line">Idle</div>
|
||||
</header>
|
||||
|
||||
<section id="emptyState" class="empty-state">
|
||||
<h2>No device selected</h2>
|
||||
<p>Waiting for agent check-in.</p>
|
||||
<section id="fleetView" class="fleet-view">
|
||||
<div class="fleet-summary">
|
||||
<div>
|
||||
<span>Всего</span>
|
||||
<strong id="fleetTotalCount">0</strong>
|
||||
</div>
|
||||
<div class="summary-good">
|
||||
<span>На связи</span>
|
||||
<strong id="fleetOnlineCount">0</strong>
|
||||
</div>
|
||||
<div class="summary-bad">
|
||||
<span>Не на связи</span>
|
||||
<strong id="fleetOfflineCount">0</strong>
|
||||
</div>
|
||||
<div class="summary-warn">
|
||||
<span>Требуют внимания</span>
|
||||
<strong id="fleetAlertCount">0</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fleet-toolbar">
|
||||
<input id="fleetSearch" type="search" placeholder="Поиск по имени, модели, ID или тегу">
|
||||
<div class="filters">
|
||||
<button class="filter is-active" data-filter="all" type="button">Все</button>
|
||||
<button class="filter" data-filter="online" type="button">На связи</button>
|
||||
<button class="filter" data-filter="offline" type="button">Не на связи</button>
|
||||
<button class="filter" data-filter="alerts" type="button">Проблемы</button>
|
||||
</div>
|
||||
<input id="fleetGroupFilter" type="text" placeholder="Группа">
|
||||
<input id="fleetTagFilter" type="text" placeholder="Тег">
|
||||
</div>
|
||||
|
||||
<div class="fleet-table-shell">
|
||||
<div class="fleet-table-head">
|
||||
<span>Статус</span>
|
||||
<span>Объект</span>
|
||||
<span>Модель и группа</span>
|
||||
<span>WAN / интернет</span>
|
||||
<span>Клиенты</span>
|
||||
<span>Проблемы</span>
|
||||
<span>Последний контакт</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div id="deviceList" class="device-list"></div>
|
||||
</div>
|
||||
|
||||
<section id="emptyState" class="empty-state is-hidden">
|
||||
<h2>Объекты не найдены</h2>
|
||||
<p>Измените фильтры или дождитесь подключения агента.</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="deviceView" class="device-view is-hidden">
|
||||
<section id="deviceView" class="device-view is-hidden">
|
||||
<div class="device-header">
|
||||
<div>
|
||||
<button id="backToFleetBtn" class="back-button" type="button">← Объекты</button>
|
||||
<p class="eyebrow">Device</p>
|
||||
<h2 id="deviceName"></h2>
|
||||
<p id="deviceMeta"></p>
|
||||
@@ -441,6 +491,6 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/app.js?v=8" defer></script>
|
||||
<script src="/app.js?v=9" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+307
-36
@@ -1,17 +1,18 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f4f6f8;
|
||||
--surface: #ffffff;
|
||||
--surface-muted: #eef2f5;
|
||||
--text: #17202a;
|
||||
--muted: #667085;
|
||||
--line: #d9e0e7;
|
||||
--accent: #166f7a;
|
||||
--accent-strong: #10545c;
|
||||
--good: #137a48;
|
||||
--bad: #b42318;
|
||||
--warn: #b54708;
|
||||
--shadow: 0 14px 35px rgba(23, 32, 42, 0.08);
|
||||
color-scheme: dark;
|
||||
--bg: #14191f;
|
||||
--surface: #1e252d;
|
||||
--surface-muted: #29333d;
|
||||
--surface-raised: #242d36;
|
||||
--text: #f4f7fa;
|
||||
--muted: #9baaba;
|
||||
--line: #3a4652;
|
||||
--accent: #21a8d8;
|
||||
--accent-strong: #1687b0;
|
||||
--good: #73c83e;
|
||||
--bad: #f05252;
|
||||
--warn: #f3b43f;
|
||||
--shadow: none;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -63,14 +64,14 @@ select {
|
||||
min-height: 36px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 360px minmax(0, 1fr);
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@@ -116,9 +117,11 @@ select {
|
||||
|
||||
.sidebar {
|
||||
border-right: 1px solid var(--line);
|
||||
background: #fbfcfd;
|
||||
padding: 18px;
|
||||
background: #1b2128;
|
||||
padding: 16px 12px;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.brand {
|
||||
@@ -161,7 +164,12 @@ select {
|
||||
|
||||
.workspace {
|
||||
min-width: 0;
|
||||
padding: 22px;
|
||||
padding: 0 28px 28px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
min-height: 78px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.topbar,
|
||||
@@ -186,6 +194,12 @@ select {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
@@ -195,6 +209,172 @@ select {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-height: 42px;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-item.is-active {
|
||||
border-color: #31596a;
|
||||
background: #223640;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-item:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
color: var(--accent);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-count {
|
||||
min-width: 22px;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-muted);
|
||||
padding: 2px 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar-spacer {
|
||||
flex: 1;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.operator-row {
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.operator-avatar {
|
||||
display: grid !important;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex: 0 0 32px;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #2e5869;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.operator-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.operator-copy strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.fleet-view {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.fleet-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.fleet-summary > div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-height: 72px;
|
||||
border-right: 1px solid var(--line);
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.fleet-summary > div:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.fleet-summary span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.fleet-summary strong {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.fleet-summary .summary-good strong {
|
||||
color: var(--good);
|
||||
}
|
||||
|
||||
.fleet-summary .summary-bad strong {
|
||||
color: var(--bad);
|
||||
}
|
||||
|
||||
.fleet-summary .summary-warn strong {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.fleet-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 1fr) auto 180px 180px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fleet-toolbar .filters {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fleet-table-shell {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.fleet-table-head,
|
||||
.device-item {
|
||||
display: grid;
|
||||
grid-template-columns: 125px minmax(200px, 1.25fr) minmax(180px, 1fr) minmax(160px, 1fr) 80px 110px 170px 28px;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
min-width: 1180px;
|
||||
}
|
||||
|
||||
.fleet-table-head {
|
||||
min-height: 46px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--surface-muted);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.auth-panel label {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
@@ -469,21 +649,30 @@ select {
|
||||
|
||||
.device-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.device-item {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
min-height: 72px;
|
||||
padding: 10px;
|
||||
min-height: 68px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
padding: 8px 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.device-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.device-item:hover {
|
||||
border-color: var(--line);
|
||||
background: #242e37;
|
||||
}
|
||||
|
||||
.device-item.is-selected {
|
||||
border-color: var(--accent);
|
||||
background: #f1fbfc;
|
||||
background: #223640;
|
||||
}
|
||||
|
||||
.device-item strong {
|
||||
@@ -493,25 +682,77 @@ select {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.device-item span {
|
||||
.device-item span,
|
||||
.device-item small {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.device-item .device-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
.device-identity,
|
||||
.device-context {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.device-alert-count {
|
||||
border-radius: 999px;
|
||||
background: #fef3f2;
|
||||
.device-identity strong,
|
||||
.device-identity small,
|
||||
.device-context span,
|
||||
.device-context small,
|
||||
.last-contact,
|
||||
.wan-state {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fleet-status {
|
||||
display: inline-flex;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fleet-status i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
flex: 0 0 8px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.fleet-status.online,
|
||||
.wan-state.online {
|
||||
color: var(--good);
|
||||
}
|
||||
|
||||
.fleet-status.offline,
|
||||
.wan-state.offline {
|
||||
color: var(--bad);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wan-state.warning {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.client-count {
|
||||
color: var(--text) !important;
|
||||
font-weight: 800;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
|
||||
.problem-count {
|
||||
color: var(--good) !important;
|
||||
}
|
||||
|
||||
.problem-count.has-problems {
|
||||
color: var(--warn) !important;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.row-chevron {
|
||||
color: var(--accent) !important;
|
||||
font-size: 22px !important;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@@ -541,6 +782,14 @@ select {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
min-height: 30px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
@@ -775,6 +1024,28 @@ select {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.sidebar-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.operator-row {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.fleet-summary,
|
||||
.fleet-toolbar {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.fleet-toolbar > input:first-child,
|
||||
.fleet-toolbar .filters {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row,
|
||||
.row.audit,
|
||||
.command-form,
|
||||
|
||||
Reference in New Issue
Block a user