Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Details for instances

Browse Source
This commit is contained in:
Kobe
2025-06-10 09:47:54 +02:00
parent 580289d3a1
commit 5bb0667060
4 changed files with 263 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
templates/main/instance_detail.html Normal file
View File

@@ -0,0 +1,173 @@
{% extends "common/base.html" %}
{% from "components/header.html" import header %}
{% block title %}{{ instance.name }} - DocuPulse{% endblock %}
{% block content %}
{{ header(
title="Instance Details",
description=instance.name + " for " + instance.company,
icon="fa-server",
buttons=[
{
'text': 'Back to Instances',
'url': '/instances',
'icon': 'fa-arrow-left',
'class': 'btn-secondary'
}
]
) }}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row mb-4">
<!-- Activity Status Card -->
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="status-icon-wrapper">
<i class="fas fa-circle-notch fa-spin {% if instance.status == 'active' %}text-success{% else %}text-danger{% endif %} fa-2x"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h5 class="card-title mb-1">Activity Status</h5>
<p class="card-text mb-0">
<span class="badge bg-{{ 'success' if instance.status == 'active' else 'danger' }}">
{{ instance.status|title }}
</span>
{% if instance.status_details %}
<small class="text-muted d-block mt-1">{{ instance.status_details }}</small>
{% endif %}
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Authentication Status Card -->
<div class="col-md-6">
<div class="card h-100">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="status-icon-wrapper">
<i class="fas fa-shield-alt {% if instance.connection_token %}text-success{% else %}text-warning{% endif %} fa-2x"></i>
</div>
</div>
<div class="flex-grow-1 ms-3">
<h5 class="card-title mb-1">Authentication Status</h5>
<p class="card-text mb-0">
<span class="badge bg-{{ 'success' if instance.connection_token else 'warning' }}">
{{ 'Authenticated' if instance.connection_token else 'Not Authenticated' }}
</span>
{% if not instance.connection_token %}
<small class="text-muted d-block mt-1">This instance needs to be authenticated</small>
{% endif %}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content will be added later -->
<div class="row">
<div class="col-12">
<!-- Content will be added later -->
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
let statusUpdateInterval;
// Function to check instance status
async function checkInstanceStatus() {
try {
const response = await fetch(`/instances/{{ instance.id }}/status`);
if (!response.ok) throw new Error('Failed to check instance status');
const data = await response.json();
// Update activity status
const activityIcon = document.querySelector('.status-icon-wrapper .fa-circle-notch');
const activityBadge = document.querySelector('.card:first-child .badge');
const activityDetails = document.querySelector('.card:first-child .text-muted');
if (activityIcon) {
activityIcon.className = `fas fa-circle-notch fa-spin ${data.status === 'active' ? 'text-success' : 'text-danger'} fa-2x`;
}
if (activityBadge) {
activityBadge.className = `badge bg-${data.status === 'active' ? 'success' : 'danger'}`;
activityBadge.textContent = data.status.charAt(0).toUpperCase() + data.status.slice(1);
}
if (activityDetails && data.status_details) {
activityDetails.textContent = data.status_details;
}
} catch (error) {
console.error('Error checking instance status:', error);
}
}
// Function to check authentication status
async function checkAuthStatus() {
try {
const response = await fetch(`/instances/{{ instance.id }}/auth-status`);
if (!response.ok) throw new Error('Failed to check authentication status');
const data = await response.json();
// Update authentication status
const authIcon = document.querySelector('.card:last-child .fa-shield-alt');
const authBadge = document.querySelector('.card:last-child .badge');
const authDetails = document.querySelector('.card:last-child .text-muted');
if (authIcon) {
authIcon.className = `fas fa-shield-alt ${data.authenticated ? 'text-success' : 'text-warning'} fa-2x`;
}
if (authBadge) {
authBadge.className = `badge bg-${data.authenticated ? 'success' : 'warning'}`;
authBadge.textContent = data.authenticated ? 'Authenticated' : 'Not Authenticated';
}
if (authDetails) {
authDetails.textContent = data.authenticated ? '' : 'This instance needs to be authenticated';
}
} catch (error) {
console.error('Error checking authentication status:', error);
}
}
// Function to update all statuses
async function updateAllStatuses() {
await Promise.all([
checkInstanceStatus(),
checkAuthStatus()
]);
}
// Initialize status updates
document.addEventListener('DOMContentLoaded', function() {
// Initial update
updateAllStatuses();
// Set up periodic updates (every 30 seconds)
statusUpdateInterval = setInterval(updateAllStatuses, 30000);
});
// Clean up interval when page is unloaded
window.addEventListener('beforeunload', function() {
if (statusUpdateInterval) {
clearInterval(statusUpdateInterval);
}
});
</script>
{% endblock %}