tera-clone
/
teraWeb
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3 Commits
1 Branch
0 Tags
256 MiB
Tree: 3161ace466
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '3161ace466'
${ noResults }
teraWeb/frontend/web/templates/partials/dashboard.html

105 lines
8.0 KiB
Raw Normal View History

Initial source-only commit
2 months ago
{{define "dashboard"}}
<div class="dashboard" data-dashboard>
<div class="dashboard-toolbar">
<p>장치 상태와 연결 현황을 한눈에 확인하세요.</p>
<div class="dashboard-sync" data-dashboard-sync data-state="loading" role="status">
<span class="dashboard-status-dot" aria-hidden="true"></span>
<span data-dashboard-value="sync-label">데이터 불러오는 중</span>
<time data-dashboard-value="updated" data-i18n-skip>—</time>
</div>
</div>
<div class="dashboard-metrics" aria-label="핵심 상태">
<section class="dashboard-metric" data-metric="cpu">
<div class="dashboard-metric-label"><span class="dashboard-metric-icon" aria-hidden="true">CPU</span><h2>CPU 사용률</h2></div>
<div class="dashboard-metric-value" data-dashboard-value="cpu" data-i18n-skip>—</div>
<meter min="0" max="100" value="0" aria-label="CPU 사용률" hidden></meter>
<p><span>온도</span> <strong data-dashboard-value="temperature" data-i18n-skip>—</strong></p>
</section>
<section class="dashboard-metric" data-metric="storage">
<div class="dashboard-metric-label"><span class="dashboard-metric-icon" aria-hidden="true">DISK</span><h2>저장장치 사용량</h2></div>
<div class="dashboard-metric-value" data-dashboard-value="storage" data-i18n-skip>—</div>
<meter min="0" max="100" value="0" aria-label="저장장치 사용률" hidden></meter>
<p><span>사용 / 전체</span> <strong data-dashboard-value="storage-detail" data-i18n-skip>—</strong></p>
<p><span>사용 가능 공간</span> <strong data-dashboard-value="storage-available" data-i18n-skip>—</strong></p>
<p class="dashboard-metric-description">로그·백업 등이 함께 사용하는 데이터 파티션</p>
</section>
<section class="dashboard-metric" data-metric="sessions">
<div class="dashboard-metric-label"><span class="dashboard-metric-icon" aria-hidden="true">SES</span><h2>활성 세션</h2></div>
<div class="dashboard-metric-value" data-dashboard-value="sessions" data-i18n-skip>—</div>
<p class="dashboard-metric-description">현재 접속 중인 포트 세션</p>
</section>
<section class="dashboard-metric" data-metric="alarms">
<div class="dashboard-metric-label"><span class="dashboard-metric-icon" aria-hidden="true">ALM</span><h2>활성 알람</h2></div>
<div class="dashboard-metric-value" data-dashboard-value="alarms" data-i18n-skip>—</div>
<p class="dashboard-metric-description" data-dashboard-value="alarm-description">데이터 불러오는 중</p>
</section>
</div>
<section class="panel dashboard-ports">
<div class="panel-header dashboard-panel-heading">
<div><h2>포트 링크 상태</h2><p>포트를 선택하면 상세 설정으로 이동합니다.</p></div>
<a class="dashboard-detail-link" href="/port-status">전체 포트 보기 <span aria-hidden="true">↗</span></a>
</div>
<div class="dashboard-port-toolbar">
<div class="dashboard-port-summary"><span>활성 포트</span><strong data-dashboard-value="active-ports" data-i18n-skip>—</strong><span>/</span><span data-dashboard-value="total-ports" data-i18n-skip>48</span></div>
<div class="dashboard-filters" role="group" aria-label="포트 상태 필터">
<button type="button" data-port-filter="all" aria-pressed="true"><span>전체</span><b data-port-count="all">48</b></button>
<button type="button" data-port-filter="up" aria-pressed="false"><i class="dashboard-status-dot" aria-hidden="true"></i><span>UP</span><b data-port-count="up">—</b></button>
<button type="button" data-port-filter="session" aria-pressed="false"><i class="dashboard-status-dot" aria-hidden="true"></i><span>세션 연결</span><b data-port-count="session">—</b></button>
<button type="button" data-port-filter="down" aria-pressed="false"><i class="dashboard-status-dot" aria-hidden="true"></i><span>DOWN</span><b data-port-count="down">—</b></button>
<button type="button" data-port-filter="unknown" aria-pressed="false"><i class="dashboard-status-dot" aria-hidden="true"></i><span>미확인</span><b data-port-count="unknown">—</b></button>
</div>
</div>
<div class="port-link-grid">
{{range (index .Blocks 0).PortLinks}}
<a class="port-link" href="/ports/{{.Number}}/parameters" data-dashboard-port="{{.Number}}" data-port-state="unknown" aria-label="포트 {{.Number}}: 상태 확인 중">
<span class="dashboard-port-top"><span class="port-link-number" data-i18n-skip>{{.Number}}</span><i class="dashboard-status-dot" aria-hidden="true"></i></span>
<span class="port-link-state">미확인</span>
</a>
{{end}}
</div>
<p class="dashboard-port-empty" hidden>선택한 상태의 포트가 없습니다.</p>
<div class="dashboard-port-note"><span>미확인은 아직 장비 응답을 확인하지 못한 상태이며, 장애를 의미하지 않습니다.</span><span data-dashboard-value="port-sync-label">상태 확인 중</span></div>
</section>
<div class="dashboard-details">
<section class="panel dashboard-network">
<div class="panel-header dashboard-panel-heading"><h2>네트워크 정보</h2><span class="dashboard-section-tag">NETWORK</span></div>
<div data-dashboard-network><p class="dashboard-placeholder">데이터 불러오는 중</p></div>
<dl class="dashboard-facts dashboard-network-meta">
<div><dt>호스트 이름</dt><dd data-dashboard-value="host" data-i18n-skip>—</dd></div>
<div><dt>운영 모드</dt><dd data-dashboard-value="network-mode" data-i18n-skip>—</dd></div>
</dl>
</section>
<section class="panel dashboard-traffic">
<div class="panel-header dashboard-panel-heading"><h2>포트 사용 현황</h2><span class="dashboard-section-tag">TRAFFIC</span></div>
<div class="dashboard-traffic-totals">
<div><span>누적 수신</span><strong data-dashboard-value="rx" data-i18n-skip>—</strong></div>
<div><span>누적 송신</span><strong data-dashboard-value="tx" data-i18n-skip>—</strong></div>
</div>
<h3>트래픽 상위 포트</h3>
<ol class="dashboard-ranking" data-dashboard-ranking><li class="dashboard-placeholder">데이터 불러오는 중</li></ol>
<p class="dashboard-footnote">누적 수신 + 송신 기준 · 실시간 속도가 아닙니다.</p>
</section>
<section class="panel dashboard-system">
<div class="panel-header dashboard-panel-heading"><h2>시스템 정보</h2><span class="dashboard-section-tag">SYSTEM</span></div>
<div class="dashboard-device"><strong data-dashboard-value="model" data-i18n-skip>—</strong><span><span>가동 시간</span> <b data-dashboard-value="uptime">—</b></span></div>
<dl class="dashboard-facts dashboard-system-facts">
<div><dt>하드웨어 프로필</dt><dd data-dashboard-value="hardware" data-i18n-skip>—</dd></div>
<div><dt>펌웨어</dt><dd data-dashboard-value="firmware" data-i18n-skip>—</dd></div>
<div><dt>빌드번호</dt><dd data-dashboard-value="build" data-i18n-skip>—</dd></div>
<div><dt>장치 ID</dt><dd data-dashboard-value="device-id" data-i18n-skip>—</dd></div>
<div><dt>시스템 시간</dt><dd data-dashboard-value="system-time" data-i18n-skip>—</dd></div>
<div><dt>CPU 평균 (1 / 5 / 15분)</dt><dd data-dashboard-value="load" data-i18n-skip>—</dd></div>
<div><dt>RAM 사용률</dt><dd data-dashboard-value="memory" data-i18n-skip>—</dd></div>
<div><dt>RAM 사용 / 전체</dt><dd data-dashboard-value="memory-detail" data-i18n-skip>—</dd></div>
<div><dt>남은 RAM</dt><dd data-dashboard-value="memory-available" data-i18n-skip>—</dd></div>
<div><dt>저장공간 측정 경로</dt><dd data-dashboard-value="storage-path" data-i18n-skip>—</dd></div>
</dl>
<p class="dashboard-footnote">저장공간과 RAM은 별개입니다. 사용 가능 공간은 파일시스템 예약 영역을 제외합니다.</p>
</section>
</div>
</div>
{{end}}