Details for instances
This commit is contained in:
173
templates/main/instance_detail.html
Normal file
173
templates/main/instance_detail.html
Normal 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 %}
|
||||
@@ -92,6 +92,9 @@
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="editInstance({{ instance.id }})">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-info" onclick="window.location.href='/instances/{{ instance.id }}/detail'">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="deleteInstance({{ instance.id }})">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user