push

templates/devices/view.html

@@ -0,0 +1,78 @@
+{% extends "base.html" %}
+{% block title %}{{ device.name }} - Device - MikroMon{% endblock %}
+{% block content %}
+<div class="d-flex align-items-start justify-content-between mb-3 flex-wrap gap-2">
+  <div>
+    <h1 class="h3 mb-0">{{ device.name }}</h1>
+    <div class="text-muted">{{ device.host }}</div>
+  </div>
+  <div class="d-flex gap-2">
+    <a class="btn btn-outline-secondary" href="{{ url_for('devices.index') }}"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
+    <a class="btn btn-outline-primary" href="{{ url_for('devices.edit', device_id=device.id) }}"><i class="fa-solid fa-pen-to-square me-1"></i>Edit</a>
+    <form method="post" action="{{ url_for('devices.delete', device_id=device.id) }}" onsubmit="return confirm('Delete this device?');">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+      <button class="btn btn-outline-danger" type="submit"><i class="fa-solid fa-trash me-1"></i>Delete</button>
+    </form>
+    <button class="btn btn-primary" id="btnTest"><i class="fa-solid fa-plug-circle-check me-1"></i>Test REST</button>
+    <button class="btn btn-outline-primary" id="btnDiscover"><i class="fa-solid fa-magnifying-glass me-1"></i>Discover</button>
+  </div>
+</div>
+
+<div class="row g-3">
+  <div class="col-12 col-lg-5">
+    <div class="card shadow-sm">
+      <div class="card-body">
+        <div class="fw-semibold mb-2"><i class="fa-solid fa-server me-2"></i>Configuration</div>
+        <dl class="row mb-0 small">
+          <dt class="col-5 text-muted">REST</dt><dd class="col-7">{{ device.host }}:{{ device.rest_port }}{{ device.rest_base_path }}</dd>
+          <dt class="col-5 text-muted">TLS</dt><dd class="col-7">{{ 'insecure' if device.allow_insecure_tls else 'strict' }}</dd>
+          <dt class="col-5 text-muted">SSH</dt><dd class="col-7">{{ 'enabled' if device.ssh_enabled else 'disabled' }}{% if device.ssh_enabled %} ({{ device.ssh_port }}){% endif %}</dd>
+          <dt class="col-5 text-muted">Last error</dt><dd class="col-7">{{ device.last_error or '-' }}</dd>
+          <dt class="col-5 text-muted">Created</dt><dd class="col-7">{{ device.created_at }}</dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-12 col-lg-7">
+    <div class="card shadow-sm">
+      <div class="card-body">
+        <div class="fw-semibold mb-2"><i class="fa-solid fa-terminal me-2"></i>Result</div>
+        <pre class="bg-light border rounded p-3 mb-0" style="min-height: 240px" id="out">{}</pre>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function(){
+  const out = document.getElementById('out');
+  const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
+  function show(obj){ out.textContent = JSON.stringify(obj, null, 2); }
+  async function postJson(url){
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type':'application/json', 'X-CSRFToken': csrf },
+      body: JSON.stringify({})
+    });
+    let data = null;
+    try { data = await res.json(); } catch(e) { data = { ok:false, error:'Invalid JSON response' }; }
+    if(!res.ok) return { ok:false, ...data };
+    return data;
+  }
+  document.getElementById('btnTest')?.addEventListener('click', async ()=>{
+    show({loading:true});
+    const data = await postJson("{{ url_for('devices.test', device_id=device.id) }}");
+    show(data);
+  });
+  document.getElementById('btnDiscover')?.addEventListener('click', async ()=>{
+    show({loading:true});
+    const res = await fetch("{{ url_for('devices.discover', device_id=device.id) }}");
+    const data = await res.json();
+    show(data);
+  });
+})();
+</script>
+{% endblock %}