9bcba0a317
Phase 4 — CSS 분리: - style.css(2,230→670줄)에서 탭별 스타일을 css/<tab>.css 8개로 분할 (t2s:437, pid:236, pb:106, hist:100, evt:50, opcsvr:14, llmchat:501, kbadmin:109) - 크로스탭 공유 스타일(nm-*, hist-status, dt-picker 등)은 style.css 잔류 - index.html head에 11개 CSS link 태그 (1 style.css + 8 tab + 2 lib) app.js 제거: - index.html에서 <script src=/js/app.js> 참조 제거 - app.js → 10줄 placeholder (이미 Phase 0-3에서 모든 로직 이전 완료) Pane wrapper 버그 수정: - 16개 pane 파일에서 <section class=pane id=pane-xxx> wrapper 제거 - activateTab이 innerHTML로 주입 시 중첩 section + display:none 발생 - 내용이 전혀 안 보이는 문제 해결 문서 갱신: - AGENTS.md: Frontend Architecture 섹션 추가 - 웹UI-개선플랜-byOPUS.md: Phase 0-4 완료 상태로 갱신, 결과 검증 추가 MCP: - server.py: timestamp 정밀도 개선 등
83 lines
3.7 KiB
HTML
83 lines
3.7 KiB
HTML
<header class="pane-hdr">
|
|
<div>
|
|
<h1>데이터 크롤링</h1>
|
|
<p>지정한 노드 값을 주기적으로 수집하여 CSV 파일로 저장합니다.</p>
|
|
</div>
|
|
<div class="pane-tag">CRAWL / CSV</div>
|
|
</header>
|
|
|
|
<div class="cols-2">
|
|
<div class="card">
|
|
<div class="card-cap">서버 설정</div>
|
|
<div class="fg"><label>Server IP</label>
|
|
<input id="w-server" class="inp" value="192.168.0.20"/></div>
|
|
<div class="fg"><label>Port</label>
|
|
<input id="w-port" class="inp" type="number" value="4840"/></div>
|
|
<div class="fg"><label>Client Hostname</label>
|
|
<input id="w-client" class="inp" value="dbsvr"/></div>
|
|
<div class="fg"><label>Username</label>
|
|
<input id="w-user" class="inp" value="mngr"/></div>
|
|
<div class="fg"><label>Password</label>
|
|
<input id="w-pass" class="inp" type="password" value="mngr"/></div>
|
|
<div class="fg"><label>수집 간격 (초)</label>
|
|
<input id="w-interval" class="inp" type="number" value="1" min="1"/></div>
|
|
<div class="fg"><label>수집 시간 (초)</label>
|
|
<input id="w-duration" class="inp" type="number" value="30" min="1"/></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-cap">수집 노드 목록 <em>(한 줄에 하나씩)</em></div>
|
|
<textarea id="w-nodes" class="ta" rows="9"
|
|
placeholder="ns=1;s=...">ns=1;s=sinamserver:p-6102.hzset.fieldvalue</textarea>
|
|
<button class="btn-a" id="crawl-btn" onclick="crawlStart()"
|
|
style="margin-top:14px">📡 크롤링 시작</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="crawl-prog" class="prog-wrap hidden">
|
|
<div class="prog-hdr">
|
|
<span id="crawl-ptxt">수집 중...</span>
|
|
<span id="crawl-cnt" class="mono">0</span>
|
|
</div>
|
|
<div class="prog-track"><div id="crawl-bar" class="prog-fill" style="width:0%"></div></div>
|
|
</div>
|
|
|
|
<div id="crawl-log" class="logbox hidden"></div>
|
|
|
|
<!-- ── 노드맵 수집 ──────────────────────────────────────── -->
|
|
<div class="section-div"></div>
|
|
|
|
<header class="pane-hdr" style="margin-bottom:16px">
|
|
<div>
|
|
<h2 class="sub-hdr">노드맵 수집</h2>
|
|
<p>서버 전체 노드를 재귀 탐색하여 AssetLoader 용 CSV 파일로 저장합니다.</p>
|
|
</div>
|
|
<div class="pane-tag">NODE MAP / CSV</div>
|
|
</header>
|
|
|
|
<div class="card">
|
|
<div class="card-cap">전체 노드 탐색 설정</div>
|
|
<div class="nm-row">
|
|
<div class="fg" style="margin-bottom:0;width:200px">
|
|
<label>최대 탐색 깊이</label>
|
|
<input id="nm-depth" class="inp" type="number" value="10" min="1" max="20"/>
|
|
</div>
|
|
<button class="btn-a" id="nm-btn" onclick="nodeMapCrawl()">🗺 전체 노드맵 수집</button>
|
|
</div>
|
|
<p class="nm-hint">
|
|
서버 설정은 위 크롤링 설정을 그대로 사용합니다 ·
|
|
노드 수에 따라 수 분이 소요될 수 있습니다 ·
|
|
결과는 <code>data/csv/{서버명}_*.csv</code> 에 저장됩니다
|
|
</p>
|
|
</div>
|
|
|
|
<div id="nm-prog" class="prog-wrap hidden">
|
|
<div class="prog-hdr">
|
|
<span id="nm-ptxt">탐색 중...</span>
|
|
<span id="nm-cnt" class="mono"></span>
|
|
</div>
|
|
<div class="prog-track"><div id="nm-bar" class="prog-fill" style="width:0%"></div></div>
|
|
</div>
|
|
|
|
<div id="nm-log" class="logbox hidden"></div>
|