Kim.KANGHEE
512 lines
26 KiB
HTML
512 lines
26 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
/* 모달이 Navbar 위에 오도록 z-index 조정 */
|
|
.modal {
|
|
z-index: 1060 !important;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
z-index: 1050 !important;
|
|
}
|
|
|
|
/* 모달 헤더가 항상 잘 보이도록 배경색 및 위치 조정 */
|
|
.modal-header {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding: 1rem 1rem;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1070;
|
|
}
|
|
|
|
/* 모달이 너무 위로 붙지 않게 여백 추가 */
|
|
.modal-dialog {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
/* ===== 탭 가시성 개선 ===== */
|
|
/* Pills 스타일 탭 버튼 */
|
|
.nav-pills .nav-link {
|
|
color: #495057 !important;
|
|
background-color: #e9ecef !important;
|
|
border: 1px solid #ced4da !important;
|
|
margin-right: 0.25rem;
|
|
font-weight: 500;
|
|
padding: 0.5rem 1rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-pills .nav-link:hover {
|
|
background-color: #dee2e6 !important;
|
|
border-color: #adb5bd !important;
|
|
color: #212529 !important;
|
|
}
|
|
|
|
.nav-pills .nav-link.active {
|
|
background-color: #0d6efd !important;
|
|
border-color: #0d6efd !important;
|
|
color: #ffffff !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Select 드롭다운 가시성 개선 */
|
|
.form-select {
|
|
border: 2px solid #ced4da !important;
|
|
font-weight: 500;
|
|
color: #212529 !important;
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.form-select:focus {
|
|
border-color: #0d6efd !important;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
|
|
}
|
|
|
|
.form-select option {
|
|
color: #212529 !important;
|
|
background-color: #ffffff !important;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* 탭 컨테이너 배경 */
|
|
.nav-pills-container {
|
|
background-color: #f8f9fa;
|
|
padding: 0.75rem;
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
</style>
|
|
<div class="container-fluid py-4">
|
|
|
|
<!-- 헤더 -->
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h2 class="fw-bold mb-1">
|
|
<i class="bi bi-clipboard-data text-primary me-2"></i>
|
|
BIOS Baseline 비교
|
|
</h2>
|
|
<p class="text-muted mb-0">납품 전 서버의 BIOS 설정을 표준 설정과 비교합니다</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 메인 작업 영역 -->
|
|
<div class="row g-4 mb-4">
|
|
<!-- 왼쪽: IP 입력 및 설정 -->
|
|
<div class="col-lg-5">
|
|
<div class="card border shadow-sm h-100">
|
|
<div class="card-header bg-light border-0 py-2">
|
|
<h6 class="mb-0">
|
|
<i class="bi bi-search me-2"></i>
|
|
비교 설정
|
|
</h6>
|
|
</div>
|
|
<div class="card-body p-4 d-flex flex-column">
|
|
|
|
<!-- Baseline 선택 -->
|
|
<div class="mb-3">
|
|
<label for="baseline-select" class="form-label">Baseline 선택</label>
|
|
<select id="baseline-select" class="form-select">
|
|
<option value="">Baseline을 선택하세요</option>
|
|
</select>
|
|
<button class="btn btn-sm btn-outline-primary mt-2 w-100" onclick="showBaselineManageModal()">
|
|
<i class="bi bi-plus-circle me-1"></i> 새 Baseline 생성
|
|
</button>
|
|
</div>
|
|
|
|
<!-- IP 주소 입력 -->
|
|
<div class="mb-3 flex-grow-1 d-flex flex-column">
|
|
<label for="ip-addresses"
|
|
class="form-label w-100 d-flex justify-content-between align-items-end mb-2">
|
|
<span class="mb-1">
|
|
서버 IP 주소
|
|
<span class="badge bg-secondary ms-1" id="ip-count">0</span>
|
|
</span>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1"
|
|
onclick="clearIPs()" title="입력 내용 지우기" style="font-size: 0.75rem;">
|
|
<i class="bi bi-trash me-1"></i>지우기
|
|
</button>
|
|
</label>
|
|
<textarea id="ip-addresses" class="form-control font-monospace flex-grow-1"
|
|
placeholder="예: 10.10.0.1 10.10.0.2 10.10.0.3" style="resize: none;"></textarea>
|
|
</div>
|
|
|
|
<!-- 인증 정보 -->
|
|
<div class="row g-2 mb-3">
|
|
<div class="col-6">
|
|
<input type="text" id="username" class="form-control" value="root" placeholder="Username">
|
|
</div>
|
|
<div class="col-6">
|
|
<input type="password" id="password" class="form-control" placeholder="Password">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 비교 시작 버튼 -->
|
|
<button onclick="startComparison()" class="btn btn-primary w-100 py-2">
|
|
<i class="bi bi-arrows-angle-contract me-1"></i> 비교 시작
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 오른쪽: 결과 요약 -->
|
|
<div class="col-lg-7">
|
|
<div class="card border shadow-sm h-100">
|
|
<div class="card-header bg-light border-0 py-2">
|
|
<h6 class="mb-0">
|
|
<i class="bi bi-bar-chart me-2"></i>
|
|
비교 결과 요약
|
|
</h6>
|
|
</div>
|
|
<div class="card-body p-4" id="summary-section">
|
|
<div class="text-center text-muted py-5">
|
|
<i class="bi bi-info-circle fs-1 mb-3"></i>
|
|
<p class="mb-0">비교를 시작하면 결과가 여기에 표시됩니다</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 진행률 -->
|
|
<div class="row mb-4" id="progress-section" style="display: none;">
|
|
<div class="col">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body p-3">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<i class="bi bi-activity text-primary me-2"></i>
|
|
<span class="fw-semibold">처리 진행률</span>
|
|
</div>
|
|
<div class="progress" style="height: 25px;">
|
|
<div id="progress-bar"
|
|
class="progress-bar progress-bar-striped progress-bar-animated bg-success"
|
|
role="progressbar" style="width: 0%">
|
|
<span class="fw-semibold">0%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 상세 비교 결과 -->
|
|
<div class="row" id="results-section" style="display: none;">
|
|
<div class="col">
|
|
<div class="card border shadow-sm">
|
|
<div class="card-header bg-light border-0 py-2 d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">
|
|
<i class="bi bi-list-check me-2"></i>
|
|
상세 비교 결과
|
|
</h6>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="toggleDiffOnly()" id="diff-only-btn">
|
|
<i class="bi bi-funnel me-1"></i> 차이점만 보기
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-primary" onclick="downloadResults()">
|
|
<i class="bi bi-download me-1"></i> Excel 다운로드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-4" id="results-container">
|
|
<!-- 서버별 결과가 여기에 표시됨 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Baseline 관리 모달 -->
|
|
<div class="modal fade" id="baseline-manage-modal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="bi bi-clipboard-data me-2"></i>
|
|
Baseline 관리
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<!-- 탭 -->
|
|
<div class="nav-pills-container">
|
|
<ul class="nav nav-pills mb-0" role="tablist">
|
|
<li class="nav-item">
|
|
<button class="nav-link active" data-bs-toggle="pill" data-bs-target="#create-tab">
|
|
새로 생성
|
|
</button>
|
|
</li>
|
|
<li class="nav-item">
|
|
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#list-tab">
|
|
목록 관리
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<!-- 생성 탭 -->
|
|
<div class="tab-pane fade show active" id="create-tab">
|
|
<form id="create-baseline-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">서버 IP 주소 *</label>
|
|
<input type="text" class="form-control" id="create-ip" placeholder="10.10.0.1" required>
|
|
</div>
|
|
<div class="row g-2 mb-3">
|
|
<div class="col-6">
|
|
<label class="form-label">Username</label>
|
|
<input type="text" class="form-control" id="create-username" value="root">
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label">Password *</label>
|
|
<input type="password" class="form-control" id="create-password" required>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Baseline 이름 *</label>
|
|
<input type="text" class="form-control" id="create-name"
|
|
placeholder="R6615_GPU_Standard_2024" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">서버 타입</label>
|
|
<input type="text" class="form-control" id="create-type" placeholder="GPU Server">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">설명</label>
|
|
<textarea class="form-control" id="create-description" rows="2"
|
|
placeholder="표준 GPU 서버 설정"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100">
|
|
<i class="bi bi-download me-1"></i> Redfish로 가져와서 생성
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 목록 탭 -->
|
|
<div class="tab-pane fade" id="list-tab">
|
|
<div id="baseline-list">
|
|
<div class="text-center text-muted py-4">
|
|
<i class="bi bi-hourglass-split"></i> 로딩 중...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Baseline 상세 편집 모달 -->
|
|
<div class="modal fade" id="edit-baseline-modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="bi bi-pencil-square me-2"></i>
|
|
Baseline 상세 편집
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body bg-light">
|
|
<div class="row g-3">
|
|
<!-- 왼쪽: 메타데이터 편집 -->
|
|
<div class="col-lg-4">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-white fw-bold">기본 정보</div>
|
|
<div class="card-body">
|
|
<form id="edit-baseline-meta-form">
|
|
<input type="hidden" id="edit-id">
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">Baseline 이름</label>
|
|
<input type="text" class="form-control" id="edit-name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">서버 모델</label>
|
|
<input type="text" class="form-control bg-light" id="edit-model" readonly>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">서버 타입</label>
|
|
<input type="text" class="form-control" id="edit-type">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">설명</label>
|
|
<textarea class="form-control" id="edit-description" rows="4"></textarea>
|
|
</div>
|
|
<div class="text-muted small">
|
|
<p class="mb-1"><i class="bi bi-calendar me-1"></i>생성일: <span
|
|
id="edit-created-at">-</span></p>
|
|
<p class="mb-1"><i class="bi bi-cpu me-1"></i>원본 IP: <span
|
|
id="edit-source-ip">-</span></p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 오른쪽: BIOS 설정 편집 -->
|
|
<!-- 오른쪽: 상세 설정 편집 -->
|
|
<div class="col-lg-8">
|
|
<div class="card h-100 border shadow-sm">
|
|
<div class="card-body p-3">
|
|
<!-- 탭 메뉴 -->
|
|
<div class="nav-pills-container">
|
|
<ul class="nav nav-pills mb-0" id="edit-tabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="tab-edit-bios" data-bs-toggle="pill"
|
|
data-bs-target="#content-edit-bios" type="button">BIOS</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="tab-edit-idrac" data-bs-toggle="pill"
|
|
data-bs-target="#content-edit-idrac" type="button">iDRAC</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="tab-edit-raid" data-bs-toggle="pill"
|
|
data-bs-target="#content-edit-raid" type="button">RAID</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="tab-edit-nic" data-bs-toggle="pill"
|
|
data-bs-target="#content-edit-nic" type="button">NIC</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="tab-edit-boot" data-bs-toggle="pill"
|
|
data-bs-target="#content-edit-boot" type="button">Boot</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="tab-edit-firmware" data-bs-toggle="pill"
|
|
data-bs-target="#content-edit-firmware" type="button">Firmware</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tab-content h-100">
|
|
|
|
<!-- BIOS 탭 -->
|
|
<div class="tab-pane fade show active h-100" id="content-edit-bios">
|
|
<div
|
|
class="d-flex justify-content-between align-items-center p-2 border-bottom bg-light">
|
|
<span class="small text-muted fw-bold ms-2">항목 수: <span
|
|
id="edit-bios-count">0</span></span>
|
|
<button class="btn btn-sm btn-outline-primary bg-white"
|
|
onclick="addSettingRow('bios')">
|
|
<i class="bi bi-plus-lg"></i> 항목 추가
|
|
</button>
|
|
</div>
|
|
<div class="table-responsive" style="max-height: 450px;">
|
|
<table class="table table-hover mb-0" id="table-edit-bios">
|
|
<thead class="table-light sticky-top">
|
|
<tr>
|
|
<th style="width: 40%;">설정 항목 (Key)</th>
|
|
<th style="width: 40%;">설정값 (Value)</th>
|
|
<th style="width: 20%;">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody><!-- JS 채움 --></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- iDRAC 탭 -->
|
|
<div class="tab-pane fade h-100" id="content-edit-idrac">
|
|
<div
|
|
class="d-flex justify-content-between align-items-center p-2 border-bottom bg-light">
|
|
<span class="small text-muted fw-bold ms-2">항목 수: <span
|
|
id="edit-idrac-count">0</span></span>
|
|
<button class="btn btn-sm btn-outline-primary bg-white"
|
|
onclick="addSettingRow('idrac')">
|
|
<i class="bi bi-plus-lg"></i> 항목 추가
|
|
</button>
|
|
</div>
|
|
<div class="table-responsive" style="max-height: 450px;">
|
|
<table class="table table-hover mb-0" id="table-edit-idrac">
|
|
<thead class="table-light sticky-top">
|
|
<tr>
|
|
<th style="width: 40%;">설정 항목 (Key)</th>
|
|
<th style="width: 40%;">설정값 (Value)</th>
|
|
<th style="width: 20%;">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody><!-- JS 채움 --></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RAID 탭 -->
|
|
<div class="tab-pane fade h-100 p-3" id="content-edit-raid">
|
|
<div class="alert alert-info py-2 small">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
RAID 구성은 복잡하므로 현재 JSON 직접 편집만 지원합니다. (Read-Only 권장)
|
|
</div>
|
|
<textarea class="form-control font-monospace small" id="json-edit-raid"
|
|
rows="15" style="height: 400px;"></textarea>
|
|
</div>
|
|
|
|
<!-- NIC 탭 -->
|
|
<div class="tab-pane fade h-100 p-3" id="content-edit-nic">
|
|
<div class="alert alert-info py-2 small">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
NIC 설정은 JSON 형식으로 편집합니다.
|
|
</div>
|
|
<textarea class="form-control font-monospace small" id="json-edit-nic" rows="15"
|
|
style="height: 400px;"></textarea>
|
|
</div>
|
|
|
|
<!-- Boot 탭 -->
|
|
<div class="tab-pane fade h-100 p-3" id="content-edit-boot">
|
|
<div class="alert alert-info py-2 small">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
부팅 순서 및 설정을 JSON 형식으로 편집합니다.
|
|
</div>
|
|
<textarea class="form-control font-monospace small" id="json-edit-boot"
|
|
rows="15" style="height: 400px;"></textarea>
|
|
</div>
|
|
|
|
<!-- Firmware 탭 -->
|
|
<div class="tab-pane fade h-100" id="content-edit-firmware">
|
|
<div
|
|
class="d-flex justify-content-between align-items-center p-2 border-bottom bg-light">
|
|
<span class="small text-muted fw-bold ms-2">항목 수: <span
|
|
id="edit-firmware-count">0</span></span>
|
|
<button class="btn btn-sm btn-outline-primary bg-white"
|
|
onclick="addSettingRow('firmware')">
|
|
<i class="bi bi-plus-lg"></i> 항목 추가
|
|
</button>
|
|
</div>
|
|
<div class="table-responsive" style="max-height: 450px;">
|
|
<table class="table table-hover mb-0" id="table-edit-firmware">
|
|
<thead class="table-light sticky-top">
|
|
<tr>
|
|
<th style="width: 40%;">컴포넌트</th>
|
|
<th style="width: 40%;">버전</th>
|
|
<th style="width: 20%;">작업</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody><!-- JS 채움 --></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveBaselineChanges()">
|
|
<i class="bi bi-save me-1"></i> 변경사항 저장
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script src="{{ url_for('static', filename='js/bios_baseline.js') }}?v={{ range(1, 100000) | random }}"></script>
|
|
{% endblock %} |