Initial commit — Server_Monitorizare_v2
This commit is contained in:
ske087
230
templates/device_detail.html
Normal file
230
templates/device_detail.html
Normal file
@@ -0,0 +1,230 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ device.hostname }} – {{ app_name }}{% endblock %}
|
||||
{% block page_title %}Device: {{ device.hostname }}{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.severity-debug { color: #6c757d; }
|
||||
.severity-info { color: #0dcaf0; }
|
||||
.severity-warning { color: #ffc107; }
|
||||
.severity-error { color: #dc3545; }
|
||||
.severity-critical { color: #b02a37; font-weight: 600; }
|
||||
.log-row td { font-size: 0.83rem; padding: 0.35rem 0.6rem; vertical-align: middle; }
|
||||
.info-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<nav aria-label="breadcrumb" class="mb-3">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('main.devices') }}">Devices</a></li>
|
||||
<li class="breadcrumb-item active">{{ device.hostname }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Header card -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
|
||||
<div>
|
||||
<h4 class="mb-1">
|
||||
{{ device.nume_masa or device.hostname }}
|
||||
{% if device.status == 'active' %}
|
||||
<span class="badge bg-success ms-2">Active</span>
|
||||
{% elif device.status == 'maintenance' %}
|
||||
<span class="badge bg-warning text-dark ms-2">Maintenance</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger ms-2">Offline</span>
|
||||
{% endif %}
|
||||
{% if device.mac_address %}
|
||||
<span class="badge bg-info ms-1" title="WMT Client">WMT</span>
|
||||
{% endif %}
|
||||
</h4>
|
||||
<div class="text-muted">{{ device.hostname }} • <code>{{ device.device_ip }}</code></div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ url_for('main.device_edit', device_id=device.id) }}" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="fas fa-edit me-1"></i>Edit
|
||||
</a>
|
||||
<a href="{{ url_for('main.logs') }}?device_id={{ device.id }}" class="btn btn-outline-info btn-sm">
|
||||
<i class="fas fa-list me-1"></i>All Logs
|
||||
</a>
|
||||
<a href="{{ url_for('main.devices') }}" class="btn btn-outline-primary btn-sm">
|
||||
<i class="fas fa-arrow-left me-1"></i>Back
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-4">
|
||||
<!-- Device info -->
|
||||
<div class="col-lg-5">
|
||||
<div class="card h-100">
|
||||
<div class="card-header"><i class="fas fa-info-circle me-2"></i>Device Info</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tr>
|
||||
<td class="info-label">Hostname</td>
|
||||
<td>{{ device.hostname }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">IP Address</td>
|
||||
<td><code>{{ device.device_ip }}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Device Name</td>
|
||||
<td>{{ device.nume_masa or '—' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Type</td>
|
||||
<td>{{ device.device_type or '—' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">OS</td>
|
||||
<td>{{ device.os_version or '—' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Location</td>
|
||||
<td>{{ device.location or '—' }}</td>
|
||||
</tr>
|
||||
{% if device.description %}
|
||||
<tr>
|
||||
<td class="info-label">Description</td>
|
||||
<td>{{ device.description }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="info-label">Last Seen</td>
|
||||
<td>{{ device.last_seen.strftime('%Y-%m-%d %H:%M:%S') if device.last_seen else '—' }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats + WMT -->
|
||||
<div class="col-lg-7">
|
||||
<div class="row g-3 h-100">
|
||||
<!-- Log stats -->
|
||||
<div class="col-sm-4">
|
||||
<div class="card text-center h-100">
|
||||
<div class="card-body py-3">
|
||||
<h3 class="mb-0">{{ log_stats.total }}</h3>
|
||||
<small class="text-muted">Total Logs</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card text-center h-100">
|
||||
<div class="card-body py-3">
|
||||
<h3 class="mb-0 text-info">{{ log_stats.last_24h }}</h3>
|
||||
<small class="text-muted">Last 24 h</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card text-center h-100">
|
||||
<div class="card-body py-3">
|
||||
<h3 class="mb-0 text-danger">{{ log_stats.by_severity.get('error', 0) + log_stats.by_severity.get('critical', 0) }}</h3>
|
||||
<small class="text-muted">Errors</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if device.mac_address %}
|
||||
<!-- WMT info -->
|
||||
<div class="col-12">
|
||||
<div class="card border-info">
|
||||
<div class="card-header text-info"><i class="fas fa-sliders-h me-2"></i>WMT Client Info</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-sm table-borderless mb-0">
|
||||
<tr>
|
||||
<td class="info-label">MAC Address</td>
|
||||
<td><code>{{ device.mac_address }}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Config Updated</td>
|
||||
<td>{{ device.config_updated_at.strftime('%Y-%m-%d %H:%M:%S') if device.config_updated_at else 'Never' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="info-label">Info Reviewed</td>
|
||||
<td>
|
||||
{% if device.info_reviewed_at and device.info_reviewed_at.year > 1970 %}
|
||||
<span class="text-success">{{ device.info_reviewed_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
||||
{% else %}
|
||||
<span class="text-muted">Never reviewed</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Severity breakdown -->
|
||||
{% if log_stats.by_severity %}
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><i class="fas fa-chart-bar me-2"></i>Severity Breakdown</div>
|
||||
<div class="card-body py-2">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% for sev, cnt in log_stats.by_severity.items() %}
|
||||
<span class="badge bg-secondary">{{ sev }}: {{ cnt }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent logs -->
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span><i class="fas fa-list-alt me-2"></i>Recent Logs <small class="text-muted">(last 100)</small></span>
|
||||
<a href="{{ url_for('main.logs') }}?device_id={{ device.id }}" class="btn btn-sm btn-outline-secondary">
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
{% if logs %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr class="log-row">
|
||||
<th>Timestamp</th>
|
||||
<th>Severity</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for log in logs %}
|
||||
<tr class="log-row">
|
||||
<td class="text-nowrap text-muted">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') if log.timestamp else '—' }}</td>
|
||||
<td>
|
||||
<span class="severity-{{ log.severity }}">
|
||||
<i class="fas fa-circle fa-xs me-1"></i>{{ log.severity }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ log.resolved_message or '—' }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted text-center py-5 mb-0">
|
||||
<i class="fas fa-inbox fa-2x d-block mb-2"></i>No logs for this device yet.
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user