시골약사
a9aa31cc4a
Fix machine management page to display proper Magic DNS names: - Use given_name instead of hostname for machine display - Add Magic DNS address with copy-to-clipboard functionality - Distinguish between machine name and OS hostname like Headplane - Enhance UI with Magic DNS information (.headscale.local) Changes: - farmq-admin/utils/database_new.py: Use given_name for machine_name - farmq-admin/models/farmq_models.py: Update sync logic for given_name - farmq-admin/templates/machines/list.html: Add Magic DNS display with copy feature - FARMQ_ADMIN_MACHINE_NAME_FIX_PLAN.md: Complete analysis and implementation plan Now displays: - Machine Name: pbs-hp (Magic DNS name) - Magic DNS: pbs-hp.headscale.local (with copy button) - OS Hostname: proxmox-backup-server (system name) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
468 lines
23 KiB
HTML
468 lines
23 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}머신 관리 - 팜큐 약국 관리 시스템{% endblock %}
|
|
|
|
{% block breadcrumb %}
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{{ url_for('dashboard') }}">대시보드</a></li>
|
|
<li class="breadcrumb-item active">머신 관리</li>
|
|
</ol>
|
|
</nav>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h1 class="h2 mb-0">
|
|
<i class="fas fa-desktop text-primary"></i>
|
|
머신 관리
|
|
</h1>
|
|
<p class="text-muted">연결된 모든 머신의 상태 및 하드웨어 정보</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button class="btn btn-outline-secondary" onclick="refreshMachineList()">
|
|
<i class="fas fa-sync-alt"></i> 새로고침
|
|
</button>
|
|
<div class="btn-group" role="group">
|
|
<input type="radio" class="btn-check" name="viewMode" id="listView" autocomplete="off" checked>
|
|
<label class="btn btn-outline-primary" for="listView">
|
|
<i class="fas fa-list"></i> 목록
|
|
</label>
|
|
|
|
<input type="radio" class="btn-check" name="viewMode" id="cardView" autocomplete="off">
|
|
<label class="btn btn-outline-primary" for="cardView">
|
|
<i class="fas fa-th-large"></i> 카드
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 필터 및 검색 -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-3 mb-2">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
|
<input type="text" class="form-control" id="searchMachine" placeholder="머신 검색...">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 mb-2">
|
|
<select class="form-select" id="filterStatus">
|
|
<option value="">전체 상태</option>
|
|
<option value="online">온라인</option>
|
|
<option value="offline">오프라인</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2 mb-2">
|
|
<select class="form-select" id="filterPharmacy">
|
|
<option value="">전체 약국</option>
|
|
<!-- 약국 목록은 동적으로 로드 -->
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3 mb-2">
|
|
<div class="d-flex gap-2">
|
|
<span class="badge bg-success">온라인: <span id="onlineCount">0</span></span>
|
|
<span class="badge bg-danger">오프라인: <span id="offlineCount">0</span></span>
|
|
<span class="badge bg-secondary">전체: <span id="totalCount">0</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 머신 목록 (테이블 뷰) -->
|
|
<div id="listView" class="machine-view">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
{% if machines %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>머신 정보</th>
|
|
<th>네트워크</th>
|
|
<th>하드웨어</th>
|
|
<th>상태</th>
|
|
<th>소속 약국</th>
|
|
<th>액션</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for machine_data in machines %}
|
|
<tr class="machine-row" data-status="{% if machine_data.is_online %}online{% else %}offline{% endif %}">
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3">
|
|
{% if machine_data.is_online %}
|
|
<i class="fas fa-desktop fa-2x text-success"></i>
|
|
{% else %}
|
|
<i class="fas fa-desktop fa-2x text-muted"></i>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<strong>{{ machine_data.machine_name or machine_data.hostname }}</strong>
|
|
<div class="small text-success">
|
|
<i class="fas fa-link"></i> <code>{{ machine_data.machine_name or machine_data.hostname }}.headscale.local</code>
|
|
<button class="btn btn-sm btn-outline-secondary ms-1" onclick="copyToClipboard('{{ machine_data.machine_name or machine_data.hostname }}.headscale.local')" title="Magic DNS 주소 복사">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
{% if machine_data.hostname != (machine_data.machine_name or machine_data.hostname) %}
|
|
<div class="small text-muted">
|
|
<i class="fas fa-server"></i> OS: {{ machine_data.hostname }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="small">
|
|
<i class="fas fa-user"></i> {{ machine_data.headscale_user_name or '미지정' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<code class="small">{{ machine_data.tailscale_ip }}</code>
|
|
</div>
|
|
{% if machine_data.ipv6 %}
|
|
<div>
|
|
<code class="small text-muted">{{ machine_data.ipv6 }}</code>
|
|
</div>
|
|
{% endif %}
|
|
<div class="small text-muted">
|
|
엔드포인트: 0개
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{% if machine_data.specs %}
|
|
<div class="small">
|
|
<div><i class="fas fa-microchip"></i> {{ machine_data.specs.cpu_model[:20] }}{% if machine_data.specs.cpu_model|length > 20 %}...{% endif %}</div>
|
|
<div><i class="fas fa-memory"></i> {{ machine_data.specs.ram_gb }}GB RAM</div>
|
|
<div><i class="fas fa-hdd"></i> {{ machine_data.specs.storage_gb }}GB</div>
|
|
</div>
|
|
{% else %}
|
|
<span class="text-muted small">정보 없음</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="d-flex flex-column">
|
|
{% if machine_data.is_online %}
|
|
<span class="badge bg-success mb-1">
|
|
<i class="fas fa-circle"></i> 온라인
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-danger mb-1">
|
|
<i class="fas fa-circle"></i> 오프라인
|
|
</span>
|
|
{% endif %}
|
|
|
|
{% if machine_data.latest_monitoring %}
|
|
<div class="small">
|
|
<div>CPU: {{ machine_data.latest_monitoring.cpu_usage }}%</div>
|
|
<div>온도: {{ machine_data.latest_monitoring.cpu_temperature }}°C</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{% if machine_data.pharmacy %}
|
|
<div>
|
|
<strong>{{ machine_data.pharmacy.pharmacy_name }}</strong>
|
|
<div class="small text-muted">{{ machine_data.pharmacy.manager_name }}</div>
|
|
</div>
|
|
{% else %}
|
|
<span class="text-muted">미지정</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<a href="{{ url_for('machine_detail', machine_id=machine_data.id) }}"
|
|
class="btn btn-outline-primary" title="상세 정보">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<button class="btn btn-outline-info"
|
|
onclick="showMonitoring({{ machine_data.id }})" title="모니터링">
|
|
<i class="fas fa-chart-line"></i>
|
|
</button>
|
|
{% if machine_data.is_online %}
|
|
<button class="btn btn-outline-warning" title="재시작">
|
|
<i class="fas fa-redo"></i>
|
|
</button>
|
|
{% endif %}
|
|
<button class="btn btn-outline-danger"
|
|
onclick="confirmDeleteNode({{ machine_data.id }}, '{{ machine_data.machine_name or machine_data.hostname }}')"
|
|
title="노드 삭제">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center text-muted py-5">
|
|
<i class="fas fa-desktop fa-4x mb-4 text-secondary"></i>
|
|
<h4>연결된 머신이 없습니다</h4>
|
|
<p class="mb-4">아직 등록된 머신이 없습니다. Headscale에 머신을 연결해주세요.</p>
|
|
<a href="http://localhost:3000/admin/" target="_blank" class="btn btn-primary">
|
|
<i class="fas fa-external-link-alt"></i> Headplane에서 머신 등록
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 머신 목록 (카드 뷰) -->
|
|
<div id="cardView" class="machine-view d-none">
|
|
<div class="row">
|
|
{% for machine_data in machines %}
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="card h-100 machine-card" data-status="{% if machine_data.is_online %}online{% else %}offline{% endif %}">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div>
|
|
<h5 class="card-title mb-1">{{ machine_data.machine_name or machine_data.hostname }}</h5>
|
|
<p class="card-text text-muted small">{{ machine_data.hostname }}</p>
|
|
</div>
|
|
{% if machine_data.is_online %}
|
|
<span class="badge bg-success">온라인</span>
|
|
{% else %}
|
|
<span class="badge bg-danger">오프라인</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="small mb-2">
|
|
<i class="fas fa-network-wired"></i> {{ machine_data.tailscale_ip }}
|
|
</div>
|
|
{% if machine_data.pharmacy %}
|
|
<div class="small mb-2">
|
|
<i class="fas fa-store"></i> {{ machine_data.pharmacy.pharmacy_name }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="small">
|
|
<i class="fas fa-clock"></i> {{ machine_data.last_seen_humanized }}
|
|
</div>
|
|
</div>
|
|
|
|
{% if machine_data.specs %}
|
|
<div class="mb-3">
|
|
<hr>
|
|
<div class="row text-center">
|
|
<div class="col-4">
|
|
<div class="small text-muted">CPU</div>
|
|
<div class="small">{{ machine_data.specs.cpu_cores }}코어</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="small text-muted">RAM</div>
|
|
<div class="small">{{ machine_data.specs.ram_gb }}GB</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="small text-muted">Storage</div>
|
|
<div class="small">{{ machine_data.specs.storage_gb }}GB</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if machine_data.latest_monitoring %}
|
|
<div class="mb-3">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="small text-muted">CPU 사용률</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-primary"
|
|
style="width: {{ machine_data.latest_monitoring.cpu_usage }}%"></div>
|
|
</div>
|
|
<div class="small">{{ machine_data.latest_monitoring.cpu_usage }}%</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="small text-muted">온도</div>
|
|
<div class="text-center">
|
|
<span class="h6 {% if machine_data.latest_monitoring.cpu_temperature > 80 %}text-danger{% elif machine_data.latest_monitoring.cpu_temperature > 70 %}text-warning{% else %}text-success{% endif %}">
|
|
{{ machine_data.latest_monitoring.cpu_temperature }}°C
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-footer bg-transparent">
|
|
<div class="d-grid gap-2 d-md-block">
|
|
<a href="{{ url_for('machine_detail', machine_id=machine_data.id) }}"
|
|
class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-eye"></i> 상세
|
|
</a>
|
|
<button class="btn btn-outline-info btn-sm"
|
|
onclick="showMonitoring({{ machine_data.id }})">
|
|
<i class="fas fa-chart-line"></i> 모니터링
|
|
</button>
|
|
<button class="btn btn-outline-danger btn-sm"
|
|
onclick="confirmDeleteNode({{ machine_data.id }}, '{{ machine_data.machine_name or machine_data.hostname }}')">
|
|
<i class="fas fa-trash"></i> 삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// 뷰 모드 전환
|
|
document.querySelectorAll('input[name="viewMode"]').forEach(radio => {
|
|
radio.addEventListener('change', function() {
|
|
document.querySelectorAll('.machine-view').forEach(view => {
|
|
view.classList.add('d-none');
|
|
});
|
|
|
|
if (this.id === 'listView') {
|
|
document.getElementById('listView').classList.remove('d-none');
|
|
} else {
|
|
document.getElementById('cardView').classList.remove('d-none');
|
|
}
|
|
|
|
// 뷰 변경 시 카운터 업데이트
|
|
filterMachines();
|
|
});
|
|
});
|
|
|
|
// 머신 검색
|
|
document.getElementById('searchMachine').addEventListener('input', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
filterMachines();
|
|
});
|
|
|
|
// 상태 필터
|
|
document.getElementById('filterStatus').addEventListener('change', function() {
|
|
filterMachines();
|
|
});
|
|
|
|
function filterMachines() {
|
|
const searchTerm = document.getElementById('searchMachine').value.toLowerCase();
|
|
const statusFilter = document.getElementById('filterStatus').value;
|
|
|
|
let visibleCount = 0;
|
|
let onlineCount = 0;
|
|
let offlineCount = 0;
|
|
|
|
// 현재 활성화된 뷰만 선택 (List 또는 Card)
|
|
const isListView = document.getElementById('listView').checked;
|
|
const activeSelector = isListView ? '.machine-row' : '.machine-card';
|
|
|
|
document.querySelectorAll(activeSelector).forEach(element => {
|
|
const machineText = element.textContent.toLowerCase();
|
|
const machineStatus = element.dataset.status;
|
|
|
|
let showElement = true;
|
|
|
|
// 검색어 필터
|
|
if (searchTerm && !machineText.includes(searchTerm)) {
|
|
showElement = false;
|
|
}
|
|
|
|
// 상태 필터
|
|
if (statusFilter && machineStatus !== statusFilter) {
|
|
showElement = false;
|
|
}
|
|
|
|
if (showElement) {
|
|
element.style.display = '';
|
|
visibleCount++;
|
|
if (machineStatus === 'online') onlineCount++;
|
|
else offlineCount++;
|
|
} else {
|
|
element.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// 카운터 업데이트
|
|
document.getElementById('onlineCount').textContent = onlineCount;
|
|
document.getElementById('offlineCount').textContent = offlineCount;
|
|
document.getElementById('totalCount').textContent = visibleCount;
|
|
}
|
|
|
|
// 모니터링 모달
|
|
function showMonitoring(machineId) {
|
|
// TODO: 모니터링 모달 구현
|
|
showToast(`머신 ${machineId} 모니터링 기능 준비 중`, 'info');
|
|
}
|
|
|
|
// 머신 목록 새로고침
|
|
function refreshMachineList() {
|
|
showToast('머신 목록을 새로고침 중...', 'info');
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 1000);
|
|
}
|
|
|
|
// 노드 삭제 확인
|
|
function confirmDeleteNode(nodeId, nodeName) {
|
|
if (confirm(`정말로 노드 "${nodeName}"를 삭제하시겠습니까?\n\n삭제된 노드는 복구할 수 없으며, 해당 머신은 네트워크에서 완전히 제거됩니다.`)) {
|
|
deleteNode(nodeId, nodeName);
|
|
}
|
|
}
|
|
|
|
// 노드 삭제 실행
|
|
function deleteNode(nodeId, nodeName) {
|
|
showToast(`노드 ${nodeName} 삭제 중...`, 'info');
|
|
|
|
fetch(`/api/nodes/${nodeId}/delete`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showToast(`노드 ${nodeName}가 성공적으로 삭제되었습니다.`, 'success');
|
|
// 페이지 새로고침으로 목록 업데이트
|
|
setTimeout(() => {
|
|
location.reload();
|
|
}, 1500);
|
|
} else {
|
|
showToast(`노드 삭제 실패: ${data.error}`, 'danger');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('노드 삭제 오류:', error);
|
|
showToast('노드 삭제 중 오류가 발생했습니다.', 'danger');
|
|
});
|
|
}
|
|
|
|
// Magic DNS 주소 클립보드 복사 기능
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
showToast(`Magic DNS 주소가 복사되었습니다: ${text}`, 'success');
|
|
}).catch(err => {
|
|
console.error('복사 실패:', err);
|
|
showToast('복사에 실패했습니다.', 'danger');
|
|
});
|
|
}
|
|
|
|
// 초기 카운터 설정
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
filterMachines();
|
|
});
|
|
</script>
|
|
{% endblock %} |