517 lines
30 KiB
HTML
517 lines
30 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-building me-2"></i>Company Information
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="contacts-tab" data-bs-toggle="tab" data-bs-target="#contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">
|
|
<i class="fas fa-users me-2"></i>Contacts
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs" type="button" role="tab" aria-controls="logs" aria-selected="false">
|
|
<i class="fas fa-history me-2"></i>Activity Logs
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="mails-tab" data-bs-toggle="tab" data-bs-target="#mails" type="button" role="tab" aria-controls="mails" aria-selected="false">
|
|
<i class="fas fa-envelope me-2"></i>Mail Logs
|
|
</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="row">
|
|
<div class="col-md-6">
|
|
<h5 class="mb-3">Company Details</h5>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;" id="company-name-label">Company Name:</div>
|
|
<div class="company-value" id="company-name-value">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;">Industry:</div>
|
|
<div class="company-value" id="company-industry">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;">Description:</div>
|
|
<div class="company-value" id="company-description">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;">Version:</div>
|
|
<div class="company-value" id="instance-version-value">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;">Payment Plan:</div>
|
|
<div class="company-value" id="instance-payment-plan-value">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;">Portainer Stack:</div>
|
|
<div class="company-value">
|
|
{% if instance.portainer_stack_name %}
|
|
<span class="badge bg-primary">{{ instance.portainer_stack_name }}</span>
|
|
{% if instance.portainer_stack_id %}
|
|
<small class="text-muted d-block mt-1">ID: {{ instance.portainer_stack_id }}</small>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-muted">Not set</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h5 class="mb-3">Contact Information</h5>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;">Email:</div>
|
|
<div class="company-value" id="company-email">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;">Phone:</div>
|
|
<div class="company-value" id="company-phone">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;">Website:</div>
|
|
<div class="company-value" id="company-website">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex">
|
|
<div class="text-muted me-2" style="min-width: 120px;">Address:</div>
|
|
<div class="company-value" id="company-address">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contacts Tab -->
|
|
<div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="mb-0">Contact List</h5>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addContactModal">
|
|
<i class="fas fa-plus me-2"></i>Add Contact
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Contacts Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Phone</th>
|
|
<th>Company</th>
|
|
<th>Position</th>
|
|
<th>Role</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="contactsTableBody">
|
|
<tr>
|
|
<td colspan="7" class="text-center">Loading contacts...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs Tab -->
|
|
<div class="tab-pane fade" id="logs" role="tabpanel" aria-labelledby="logs-tab">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="card-title mb-0">Activity Log</h5>
|
|
<div class="d-flex gap-2">
|
|
<select class="form-select form-select-sm" id="logCategory">
|
|
<option value="">All Categories</option>
|
|
<option value="AUTH">Authentication</option>
|
|
<option value="FILE">File Operations</option>
|
|
<option value="USER">User Management</option>
|
|
<option value="SYSTEM">System</option>
|
|
</select>
|
|
<select class="form-select form-select-sm" id="dateRangeFilter">
|
|
<option value="24h">Last 24 Hours</option>
|
|
<option value="7d" selected>Last 7 Days</option>
|
|
<option value="30d">Last 30 Days</option>
|
|
<option value="all">All Time</option>
|
|
</select>
|
|
<button class="btn btn-secondary btn-sm" id="clearLogFiltersBtn">
|
|
<i class="fas fa-times me-1"></i>Clear Filters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Timestamp</th>
|
|
<th>Event Type</th>
|
|
<th>User</th>
|
|
<th>IP Address</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="logsTableBody">
|
|
<!-- Logs will be loaded here via JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="Logs pagination" class="mt-4">
|
|
<ul class="pagination justify-content-center" id="logsPagination">
|
|
<!-- Pagination will be loaded here via JavaScript -->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mails Tab -->
|
|
<div class="tab-pane fade" id="mails" role="tabpanel" aria-labelledby="mails-tab">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="card-title mb-0">Mail Log</h5>
|
|
<div class="d-flex gap-2">
|
|
<select class="form-select form-select-sm" id="statusFilter">
|
|
<option value="">All Statuses</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="sent">Sent</option>
|
|
<option value="failed">Failed</option>
|
|
</select>
|
|
<select class="form-select form-select-sm" id="dateRangeFilter">
|
|
<option value="24h">Last 24 Hours</option>
|
|
<option value="7d" selected>Last 7 Days</option>
|
|
<option value="30d">Last 30 Days</option>
|
|
<option value="all">All Time</option>
|
|
</select>
|
|
<button class="btn btn-secondary btn-sm" id="clearFiltersBtn">
|
|
<i class="fas fa-times me-1"></i>Clear Filters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mail Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Created At</th>
|
|
<th>Recipient</th>
|
|
<th>Subject</th>
|
|
<th>Sent At</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="mailsTableBody">
|
|
<!-- Mails will be loaded here via JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="Mails pagination" class="mt-4">
|
|
<ul class="pagination justify-content-center" id="mailsPagination">
|
|
<!-- Pagination will be loaded here via JavaScript -->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Contact Modal -->
|
|
<div class="modal fade" id="addContactModal" tabindex="-1" aria-labelledby="addContactModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addContactModalLabel">Add New Contact</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="addContactForm" onsubmit="addContact(event)">
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="name" name="name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="email" name="email" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="phone" class="form-label">Phone</label>
|
|
<input type="tel" class="form-control" id="phone" name="phone">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="company" class="form-label">Company</label>
|
|
<input type="text" class="form-control" id="company" name="company">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="position" class="form-label">Position</label>
|
|
<input type="text" class="form-control" id="position" name="position">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="role" class="form-label">Role</label>
|
|
<select class="form-select" id="role" name="role" required>
|
|
<option value="user">Standard User</option>
|
|
<option value="manager">Manager</option>
|
|
<option value="admin">Administrator</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="status" class="form-label">Status</label>
|
|
<select class="form-select" id="status" name="status">
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
<div class="text-end">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Add Contact</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Contact Modal -->
|
|
<div class="modal fade" id="editContactModal" tabindex="-1" aria-labelledby="editContactModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editContactModalLabel">Edit Contact</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="editContactForm" onsubmit="updateContact(event)">
|
|
<input type="hidden" id="edit-contact-id" name="id">
|
|
<div class="mb-3">
|
|
<label for="edit-name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="edit-name" name="name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="edit-email" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="edit-email" name="email" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="edit-phone" class="form-label">Phone</label>
|
|
<input type="tel" class="form-control" id="edit-phone" name="phone">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="edit-company" class="form-label">Company</label>
|
|
<input type="text" class="form-control" id="edit-company" name="company">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="edit-position" class="form-label">Position</label>
|
|
<input type="text" class="form-control" id="edit-position" name="position">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="edit-role" class="form-label">Role</label>
|
|
<select class="form-select" id="edit-role" name="role" required>
|
|
<option value="user">Standard User</option>
|
|
<option value="manager">Manager</option>
|
|
<option value="admin">Administrator</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="edit-status" class="form-label">Status</label>
|
|
<select class="form-select" id="edit-status" name="status">
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
<div class="text-end">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Contact Modal -->
|
|
<div class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="deleteContactModalLabel">Delete Contact</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete this contact? This action cannot be undone.</p>
|
|
<div class="text-end">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Details Modal -->
|
|
<div class="modal fade" id="logDetailsModal" tabindex="-1" aria-labelledby="logDetailsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="logDetailsModalLabel">Log Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" id="logDetailsContent">
|
|
<!-- Log details will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mail Details Modal -->
|
|
<div class="modal fade" id="mailDetailsModal" tabindex="-1" aria-labelledby="mailDetailsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="mailDetailsModalLabel">Mail Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" id="mailDetailsContent">
|
|
<!-- Mail details will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Pass instance data to JavaScript
|
|
window.instanceData = {
|
|
id: {{ instance.id }},
|
|
main_url: "{{ instance.main_url }}",
|
|
connection_token: "{{ instance.connection_token or '' }}",
|
|
company: "{{ instance.company or '' }}",
|
|
status: "{{ instance.status or '' }}",
|
|
status_details: "{{ instance.status_details or '' }}",
|
|
portainer_stack_name: "{{ instance.portainer_stack_name or '' }}",
|
|
portainer_stack_id: "{{ instance.portainer_stack_id or '' }}",
|
|
deployed_version: "{{ instance.deployed_version or '' }}",
|
|
deployed_branch: "{{ instance.deployed_branch or '' }}"
|
|
};
|
|
</script>
|
|
<script src="{{ url_for('static', filename='js/instance_detail.js') }}?v={{ 'js/instance_detail.js'|asset_version }}"></script>
|
|
{% endblock %} |