95 lines
5.5 KiB
HTML
95 lines
5.5 KiB
HTML
{{define "status-body"}}<div class="page" data-module="status" data-agent="{{.Agent.ID}}" data-relay-up-ms="{{.RelayUpMs}}">
|
|
<style>
|
|
.meters { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; margin-bottom:20px; }
|
|
.meters .card { margin:0; }
|
|
.meter .head { display:flex; align-items:baseline; justify-content:space-between; }
|
|
.meter .name { color:var(--muted); font-size:13px; }
|
|
.meter .val { font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; }
|
|
.meter .sub { color:var(--muted); font-size:13px; margin-top:8px; min-height:20px; font-variant-numeric:tabular-nums; }
|
|
.bar { height:8px; border-radius:4px; background:#0c0f13; border:1px solid var(--border); overflow:hidden; margin-top:10px; }
|
|
.bar i { display:block; height:100%; width:100%; background:var(--accent); transform-origin:left; transform:scaleX(0); transition:transform .4s; }
|
|
.bar i.warn { background:#e6a23c; }
|
|
.bar i.crit { background:var(--danger); }
|
|
.speed { display:flex; gap:28px; flex-wrap:wrap; margin-top:16px; }
|
|
.speed b { display:block; font-size:20px; font-variant-numeric:tabular-nums; }
|
|
.speed span { color:var(--muted); font-size:13px; }
|
|
.live { display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:20px; }
|
|
.gauge { position:relative; width:240px; flex:none; }
|
|
.gauge svg { display:block; width:100%; }
|
|
.gauge path { fill:none; stroke-width:14; stroke-linecap:round; }
|
|
.gauge .track { stroke:#0c0f13; }
|
|
.gauge .fill { stroke:var(--accent); stroke-dasharray:251.4; stroke-dashoffset:251.4; transition:stroke-dashoffset .25s linear, stroke .3s; }
|
|
.gauge .num { position:absolute; left:0; right:0; bottom:26px; text-align:center; font-size:38px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
|
|
.gauge .unit { position:absolute; left:0; right:0; bottom:4px; text-align:center; color:var(--muted); font-size:13px; }
|
|
.live .side { flex:1; min-width:220px; }
|
|
.live .phase { font-size:15px; margin-bottom:8px; }
|
|
.live .phase i { font-style:normal; color:var(--accent); margin-right:6px; }
|
|
.live.up .phase i { color:var(--ok); }
|
|
.live.up .gauge .fill { stroke:var(--ok); }
|
|
.spark { display:block; width:100%; height:64px; }
|
|
.spark polyline { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
|
|
.spark polygon { fill:var(--accent); opacity:.15; }
|
|
.live.up .spark polyline { stroke:var(--ok); }
|
|
.live.up .spark polygon { fill:var(--ok); }
|
|
label.check { display:inline-flex; align-items:center; gap:8px; margin:0; color:var(--text); font-size:14px; cursor:pointer; }
|
|
</style>
|
|
<div class="wrap">
|
|
<h1>Статус</h1>
|
|
<div class="err" id="err" hidden></div>
|
|
|
|
<div class="meters">
|
|
<div class="card meter">
|
|
<div class="head"><span class="name">Процессор</span><span class="val" id="cpu-val">-</span></div>
|
|
<div class="bar"><i id="cpu-bar"></i></div>
|
|
<div class="sub" id="cpu-sub"></div>
|
|
</div>
|
|
<div class="card meter">
|
|
<div class="head"><span class="name">Оперативная память</span><span class="val" id="mem-val">-</span></div>
|
|
<div class="bar"><i id="mem-bar"></i></div>
|
|
<div class="sub" id="mem-sub"></div>
|
|
</div>
|
|
<div class="card meter">
|
|
<div class="head"><span class="name">Диск (/)</span><span class="val" id="disk-val">-</span></div>
|
|
<div class="bar"><i id="disk-bar"></i></div>
|
|
<div class="sub" id="disk-sub"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Скорость соединения</h2>
|
|
<p class="muted">Клиент замеряет свой канал до хоста панели - тот же, по которому идут терминал, файлы и http-проброс.
|
|
С галочкой «До браузера» данные идут дальше, через панель до этого браузера и обратно: так виден весь путь клиент - панель - браузер.
|
|
Замер занимает около 15 секунд, не дольше 40, и на это время нагружает канал.</p>
|
|
<div class="row">
|
|
<button id="speed-btn" type="button">Замерить скорость</button>
|
|
<label class="check" title="Данные пойдут не только между клиентом и хостом панели, а через панель до этого браузера и обратно">
|
|
<input type="checkbox" id="speed-relay"> До браузера
|
|
</label>
|
|
<span class="muted" id="speed-note"></span>
|
|
</div>
|
|
<div class="live" id="live" hidden>
|
|
<div class="gauge">
|
|
<svg viewBox="0 0 200 110">
|
|
<path class="track" d="M20 100 A80 80 0 0 1 180 100"/>
|
|
<path class="fill" id="lv-arc" d="M20 100 A80 80 0 0 1 180 100"/>
|
|
</svg>
|
|
<div class="num" id="lv-num">-</div>
|
|
<div class="unit" id="lv-unit"></div>
|
|
</div>
|
|
<div class="side">
|
|
<div class="phase"><i id="lv-ico"></i><span id="lv-phase"></span></div>
|
|
<svg class="spark" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<polygon id="lv-area" points=""/>
|
|
<polyline id="lv-line" points=""/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="speed" id="speed" hidden>
|
|
<div><b id="sp-ping"></b><span>задержка</span></div>
|
|
<div><b id="sp-down"></b><span id="sp-down-lbl"></span></div>
|
|
<div><b id="sp-up"></b><span id="sp-up-lbl"></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>{{end}}
|