Christian Krakau-Louis
406 lines
18 KiB
HTML
406 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}System Status{% endblock %}
|
|
|
|
{% block head %}
|
|
<!-- Font Awesome is loaded in base.html -->
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold mb-2">System Status</h1>
|
|
<p class="text-gray-600">
|
|
This dashboard shows the status of all configured integrations and targets.
|
|
</p>
|
|
<div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
|
|
<p><strong>App Version:</strong> {{ app_version }}</p>
|
|
<p><strong>Debug Mode:</strong> {{ "Enabled" if debug_enabled else "Disabled" }}</p>
|
|
{% if last_check %}
|
|
<p><strong>Last Check:</strong> {{ last_check }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{% for name, provider in providers.items() %}
|
|
<div class="bg-white overflow-hidden shadow rounded-lg">
|
|
<div class="px-4 py-5 sm:px-6 flex justify-between items-center">
|
|
<div class="flex items-center">
|
|
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md {{ 'bg-green-500' if provider.configured else 'bg-gray-400' }} text-white mr-3">
|
|
<!-- Use Font Awesome icon -->
|
|
<i class="{{ provider.icon }} fa-lg"></i>
|
|
</span>
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">{{ name }}</h3>
|
|
</div>
|
|
{% if provider.configured %}
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
|
Configured
|
|
</span>
|
|
{% else %}
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
|
|
Not Configured
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="border-t border-gray-200">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<p class="text-sm text-gray-500">{{ provider.description }}</p>
|
|
|
|
<!-- NextCloud or link to provider URL -->
|
|
{% if provider.configured and name == "NextCloud" %}
|
|
{% if provider.details and provider.details.url %}
|
|
{% set nextcloud_base_url = provider.details.url.split('/remote.php')[0] %}
|
|
<div class="mt-3">
|
|
<a href="{{ nextcloud_base_url }}" target="_blank" class="text-sm text-blue-600 hover:text-blue-800">
|
|
{{ nextcloud_base_url|truncate(30) }} <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% elif provider.url and provider.configured %}
|
|
<div class="mt-3">
|
|
<a href="{{ provider.url }}" target="_blank" class="text-sm text-blue-600 hover:text-blue-800">
|
|
{{ provider.url|truncate(30) }} <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<div>
|
|
{% if provider.configured %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800">
|
|
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
|
|
<circle cx="4" cy="4" r="3" />
|
|
</svg>
|
|
Active
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-100 text-gray-800">
|
|
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-gray-400" fill="currentColor" viewBox="0 0 8 8">
|
|
<circle cx="4" cy="4" r="3" />
|
|
</svg>
|
|
Inactive
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="flex space-x-2">
|
|
{% if provider.configured and provider.details %}
|
|
<button
|
|
class="view-details-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
data-provider="{{ name }}"
|
|
data-details="{{ provider.details|tojson|forceescape }}">
|
|
View Details
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if name == "Dropbox" %}
|
|
{% if provider.configured %}
|
|
<button
|
|
class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
data-provider="dropbox">
|
|
Test Connection
|
|
</button>
|
|
<a href="/dropbox-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<i class="fa-solid fa-gear h-3 w-3 mr-1"></i>
|
|
Manage
|
|
</a>
|
|
{% else %}
|
|
<a href="/dropbox-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
Configure Now
|
|
</a>
|
|
{% endif %}
|
|
{% elif name == "OneDrive" %}
|
|
{% if provider.configured %}
|
|
<button
|
|
class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
data-provider="onedrive">
|
|
Test Connection
|
|
</button>
|
|
<a href="/onedrive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<i class="fa-solid fa-gear h-3 w-3 mr-1"></i>
|
|
Manage
|
|
</a>
|
|
{% else %}
|
|
<a href="/onedrive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
Configure Now
|
|
</a>
|
|
{% endif %}
|
|
{% elif provider.configured and name == "Paperless-ngx" %}
|
|
<a href="{{ provider.details.host }}" target="_blank" class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<i class="fa-solid fa-external-link h-3 w-3 mr-1"></i>
|
|
Open
|
|
</a>
|
|
{% elif provider.configured and name == "NextCloud" %}
|
|
{% if provider.details and provider.details.url %}
|
|
{% set nextcloud_base_url = provider.details.url.split('/remote.php')[0] %}
|
|
<a href="{{ nextcloud_base_url }}" target="_blank" class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
<i class="fa-solid fa-external-link h-3 w-3 mr-1"></i>
|
|
Open
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="mt-8 bg-gray-50 p-4 rounded-lg border border-gray-200">
|
|
<h3 class="text-lg font-medium text-gray-900">Configuration Settings</h3>
|
|
<p class="text-sm text-gray-600 mt-1">
|
|
For more detailed configuration settings and environment variables, check the environment debug page.
|
|
</p>
|
|
|
|
<div class="mt-4">
|
|
<a href="/env" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
View Detailed Configuration
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result Modal -->
|
|
<div id="resultModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog">
|
|
<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
|
|
<div class="mt-3 text-center">
|
|
<div id="modalIcon" class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
|
|
<!-- Icon will be injected by JS -->
|
|
</div>
|
|
<h3 id="modalTitle" class="text-lg leading-6 font-medium text-gray-900">Success</h3>
|
|
<div class="mt-2 px-7 py-3">
|
|
<p id="modalMessage" class="text-sm text-gray-500">
|
|
Operation completed successfully.
|
|
</p>
|
|
</div>
|
|
<div class="items-center px-4 py-3">
|
|
<button id="modalClose" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Details Modal -->
|
|
<div id="detailsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog">
|
|
<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white">
|
|
<div class="absolute top-0 right-0 pt-4 pr-4">
|
|
<button type="button" id="closeDetailsModal" class="text-gray-400 hover:text-gray-500">
|
|
<span class="sr-only">Close</span>
|
|
<i class="fa-solid fa-xmark h-6 w-6"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mt-3">
|
|
<h3 id="detailsModalTitle" class="text-lg leading-6 font-medium text-gray-900 mb-4">Provider Details</h3>
|
|
<div class="mt-4">
|
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
|
|
<div id="detailsContent" class="col-span-2">
|
|
<!-- Details will be populated by JavaScript -->
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<div class="mt-6 flex justify-end">
|
|
<button type="button" id="closeDetailsBtn" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Modal elements
|
|
const resultModal = document.getElementById('resultModal');
|
|
const modalTitle = document.getElementById('modalTitle');
|
|
const modalMessage = document.getElementById('modalMessage');
|
|
const modalIcon = document.getElementById('modalIcon');
|
|
const modalClose = document.getElementById('modalClose');
|
|
|
|
// Details Modal elements
|
|
const detailsModal = document.getElementById('detailsModal');
|
|
const detailsModalTitle = document.getElementById('detailsModalTitle');
|
|
const detailsContent = document.getElementById('detailsContent');
|
|
const closeDetailsModal = document.getElementById('closeDetailsModal');
|
|
const closeDetailsBtn = document.getElementById('closeDetailsBtn');
|
|
|
|
// Modal functions
|
|
function showModal(status, title, message) {
|
|
modalTitle.textContent = title;
|
|
modalMessage.textContent = message;
|
|
|
|
// Set the appropriate icon using Font Awesome
|
|
if (status === 'success') {
|
|
modalIcon.innerHTML = '<i class="fa-solid fa-check text-green-600 fa-2x"></i>';
|
|
modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
|
|
} else {
|
|
modalIcon.innerHTML = '<i class="fa-solid fa-xmark text-red-600 fa-2x"></i>';
|
|
modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4';
|
|
}
|
|
|
|
resultModal.classList.remove('hidden');
|
|
}
|
|
|
|
function hideModal() {
|
|
resultModal.classList.add('hidden');
|
|
}
|
|
|
|
function showDetailsModal(providerName, details) {
|
|
detailsModalTitle.textContent = providerName + ' Configuration Details';
|
|
|
|
// Clear previous content
|
|
detailsContent.innerHTML = '';
|
|
|
|
// Create and populate the details list
|
|
if (details && Object.keys(details).length > 0) {
|
|
const table = document.createElement('table');
|
|
table.className = 'min-w-full divide-y divide-gray-200';
|
|
|
|
const thead = document.createElement('thead');
|
|
thead.className = 'bg-gray-50';
|
|
thead.innerHTML = `
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Setting</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
|
|
</tr>
|
|
`;
|
|
|
|
const tbody = document.createElement('tbody');
|
|
tbody.className = 'bg-white divide-y divide-gray-200';
|
|
|
|
let count = 0;
|
|
for (const [key, value] of Object.entries(details)) {
|
|
const row = document.createElement('tr');
|
|
row.className = count % 2 === 0 ? 'bg-white' : 'bg-gray-50';
|
|
|
|
const keyCell = document.createElement('td');
|
|
keyCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
|
|
keyCell.textContent = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');
|
|
|
|
const valueCell = document.createElement('td');
|
|
valueCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
|
|
|
|
// Check if value contains sensitive information that should be masked
|
|
const sensitiveKeys = ['token', 'password', 'secret', 'key', 'credentials'];
|
|
const isSensitive = sensitiveKeys.some(sKey => key.toLowerCase().includes(sKey));
|
|
|
|
if (isSensitive && value !== 'Not set' && value !== '') {
|
|
valueCell.textContent = value.slice(4) + '********' + value.slice(-4);
|
|
// For better readability, we can also use HTML to mask the middle part of the string
|
|
valueCell.innerHTML = value.slice(0, 4) + '<span class="text-gray-400">********</span>' + value.slice(-4);
|
|
} else {
|
|
valueCell.textContent = value;
|
|
}
|
|
|
|
row.appendChild(keyCell);
|
|
row.appendChild(valueCell);
|
|
tbody.appendChild(row);
|
|
count++;
|
|
}
|
|
|
|
table.appendChild(thead);
|
|
table.appendChild(tbody);
|
|
detailsContent.appendChild(table);
|
|
} else {
|
|
detailsContent.innerHTML = '<p class="text-sm text-gray-500">No details available</p>';
|
|
}
|
|
|
|
detailsModal.classList.remove('hidden');
|
|
}
|
|
|
|
function hideDetailsModal() {
|
|
detailsModal.classList.add('hidden');
|
|
}
|
|
|
|
// Close modal when clicking the close button
|
|
modalClose.addEventListener('click', hideModal);
|
|
|
|
// Close modal when clicking outside of it
|
|
resultModal.addEventListener('click', function(e) {
|
|
if (e.target === resultModal) {
|
|
hideModal();
|
|
}
|
|
});
|
|
|
|
// Close details modal
|
|
closeDetailsModal.addEventListener('click', hideDetailsModal);
|
|
closeDetailsBtn.addEventListener('click', hideDetailsModal);
|
|
|
|
// Close details modal when clicking outside
|
|
detailsModal.addEventListener('click', function(e) {
|
|
if (e.target === detailsModal) {
|
|
hideDetailsModal();
|
|
}
|
|
});
|
|
|
|
// View Details button handlers
|
|
const detailsButtons = document.querySelectorAll('.view-details-btn');
|
|
detailsButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const providerName = this.getAttribute('data-provider');
|
|
let detailsData = {};
|
|
|
|
try {
|
|
detailsData = JSON.parse(this.getAttribute('data-details'));
|
|
} catch (e) {
|
|
console.error('Error parsing details data:', e);
|
|
}
|
|
|
|
showDetailsModal(providerName, detailsData);
|
|
});
|
|
});
|
|
|
|
// Test provider connections
|
|
const testButtons = document.querySelectorAll('.test-provider-btn');
|
|
testButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const provider = this.getAttribute('data-provider');
|
|
const originalText = this.textContent;
|
|
|
|
this.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> Testing...';
|
|
this.disabled = true;
|
|
|
|
let endpoint = '';
|
|
if (provider === 'dropbox') {
|
|
endpoint = '/api/dropbox/test-token';
|
|
} else if (provider === 'onedrive') {
|
|
endpoint = '/api/onedrive/test-token';
|
|
}
|
|
|
|
fetch(endpoint)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
showModal('success', 'Connection Test Successful', `${data.message} ${data.account ? 'as ' + data.account : ''}`);
|
|
} else {
|
|
if (data.needs_reauth) {
|
|
showModal('error', 'Authentication Required', 'Your token has expired or is invalid. Please reconfigure this connection.');
|
|
// Add option to go to config page
|
|
modalClose.textContent = "Configure Now";
|
|
modalClose.addEventListener('click', function redirectToConfig() {
|
|
window.location.href = `/${provider}-setup`;
|
|
modalClose.removeEventListener('click', redirectToConfig);
|
|
}, { once: true });
|
|
} else {
|
|
showModal('error', 'Connection Test Failed', data.message);
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showModal('error', 'Connection Error', 'Error testing connection: ' + error.message);
|
|
})
|
|
.finally(() => {
|
|
this.textContent = originalText;
|
|
this.disabled = false;
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|