220 lines
9.8 KiB
HTML
220 lines
9.8 KiB
HTML
{% extends "common/base.html" %}
|
|
{% from "components/header.html" import header %}
|
|
|
|
{% block title %}{{ instance.name }} - DocuPulse{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}?v={{ 'css/settings.css'|asset_version }}">
|
|
{% 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>
|
|
|
|
<!-- Tabs Section -->
|
|
<div class="card">
|
|
<div class="card-header bg-white">
|
|
<ul class="nav nav-tabs card-header-tabs" id="instanceTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
|
|
<i class="fas fa-info-circle me-2"></i>Overview
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="statistics-tab" data-bs-toggle="tab" data-bs-target="#statistics" type="button" role="tab" aria-controls="statistics" aria-selected="false">
|
|
<i class="fas fa-chart-bar me-2"></i>Statistics
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">
|
|
<i class="fas fa-cog me-2"></i>Settings
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="tab-content" id="instanceTabsContent">
|
|
<!-- Overview Tab -->
|
|
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Overview content will be available soon.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Tab -->
|
|
<div class="tab-pane fade" id="statistics" role="tabpanel" aria-labelledby="statistics-tab">
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Statistics content will be available soon.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
Settings content will be available soon.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 %} |