Show ERD in settings tab
This commit is contained in:
Peter Stockings
@@ -116,3 +116,92 @@ def toggle_theme():
|
||||
# Actually, for HTMX we might want to return something or just 200 OK.
|
||||
return "", 200
|
||||
return "Invalid theme", 400
|
||||
|
||||
@settings.route("/database_schema", methods=["GET"])
|
||||
@login_required
|
||||
def database_schema():
|
||||
"""Display database schema with ERD visualization"""
|
||||
# Fetch database schema information
|
||||
schema_info = get_database_schema()
|
||||
|
||||
if htmx:
|
||||
return render_block(
|
||||
environment,
|
||||
"dashboard/settings/database_schema.html",
|
||||
"page",
|
||||
schema_info=schema_info
|
||||
)
|
||||
return render_template("dashboard/settings/database_schema.html", schema_info=schema_info)
|
||||
|
||||
def get_database_schema():
|
||||
"""Fetch database schema information for ERD generation"""
|
||||
# Get all tables
|
||||
tables = db.execute("""
|
||||
SELECT
|
||||
table_name,
|
||||
COALESCE(obj_description((quote_ident(table_schema)||'.'||quote_ident(table_name))::regclass), '') as table_comment
|
||||
FROM information_schema.tables
|
||||
WHERE table_schema = 'public'
|
||||
AND table_type = 'BASE TABLE'
|
||||
ORDER BY table_name
|
||||
""")
|
||||
|
||||
schema_data = []
|
||||
|
||||
for table in tables or []:
|
||||
table_name = table['table_name']
|
||||
|
||||
# Get columns for this table
|
||||
columns = db.execute("""
|
||||
SELECT
|
||||
column_name,
|
||||
data_type,
|
||||
is_nullable,
|
||||
column_default,
|
||||
character_maximum_length
|
||||
FROM information_schema.columns
|
||||
WHERE table_schema = 'public'
|
||||
AND table_name = %s
|
||||
ORDER BY ordinal_position
|
||||
""", [table_name])
|
||||
|
||||
# Get foreign keys for this table
|
||||
foreign_keys = db.execute("""
|
||||
SELECT
|
||||
kcu.column_name,
|
||||
ccu.table_name AS foreign_table_name,
|
||||
ccu.column_name AS foreign_column_name
|
||||
FROM information_schema.table_constraints AS tc
|
||||
JOIN information_schema.key_column_usage AS kcu
|
||||
ON tc.constraint_name = kcu.constraint_name
|
||||
AND tc.table_schema = kcu.table_schema
|
||||
JOIN information_schema.constraint_column_usage AS ccu
|
||||
ON ccu.constraint_name = tc.constraint_name
|
||||
AND ccu.table_schema = tc.table_schema
|
||||
WHERE tc.constraint_type = 'FOREIGN KEY'
|
||||
AND tc.table_name = %s
|
||||
AND tc.table_schema = 'public'
|
||||
""", [table_name])
|
||||
|
||||
# Get primary keys
|
||||
primary_keys = db.execute("""
|
||||
SELECT kcu.column_name
|
||||
FROM information_schema.table_constraints tc
|
||||
JOIN information_schema.key_column_usage kcu
|
||||
ON tc.constraint_name = kcu.constraint_name
|
||||
AND tc.table_schema = kcu.table_schema
|
||||
WHERE tc.constraint_type = 'PRIMARY KEY'
|
||||
AND tc.table_name = %s
|
||||
AND tc.table_schema = 'public'
|
||||
""", [table_name])
|
||||
|
||||
pk_columns = [pk['column_name'] for pk in (primary_keys or [])]
|
||||
|
||||
schema_data.append({
|
||||
'table_name': table_name,
|
||||
'columns': columns or [],
|
||||
'foreign_keys': foreign_keys or [],
|
||||
'primary_keys': pk_columns
|
||||
})
|
||||
|
||||
return schema_data
|
||||
|
||||
@@ -13,6 +13,11 @@
|
||||
class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
|
||||
Export Data
|
||||
</a>
|
||||
<a hx-get="{{ url_for('settings.database_schema') }}" hx-target="#container" hx-swap="innerHTML"
|
||||
hx-push-url="true"
|
||||
class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
|
||||
Database Schema
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
156
templates/dashboard/settings/database_schema.html
Normal file
156
templates/dashboard/settings/database_schema.html
Normal file
@@ -0,0 +1,156 @@
|
||||
{% extends 'dashboard.html' %}
|
||||
|
||||
{% block page %}
|
||||
<div class="p-6 max-w-7xl mx-auto">
|
||||
<!-- Settings Navigation -->
|
||||
<div class="mb-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<a hx-get="{{ url_for('settings.api_keys') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
|
||||
class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
|
||||
API Keys
|
||||
</a>
|
||||
<a hx-get="{{ url_for('settings.export') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
|
||||
class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
|
||||
Export Data
|
||||
</a>
|
||||
<a hx-get="{{ url_for('settings.database_schema') }}" hx-target="#container" hx-swap="innerHTML"
|
||||
hx-push-url="true"
|
||||
class="border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 py-4 px-1 text-sm font-medium cursor-pointer">
|
||||
Database Schema
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Database Schema</h1>
|
||||
<p class="text-gray-600 dark:text-gray-400">Visual representation of your database structure with tables and
|
||||
relationships.</p>
|
||||
</div>
|
||||
|
||||
<!-- ERD Diagram -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Entity Relationship Diagram</h2>
|
||||
|
||||
<div id="mermaid-diagram"
|
||||
class="bg-white dark:bg-gray-900 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
|
||||
<pre class="mermaid">
|
||||
erDiagram
|
||||
{% for table in schema_info %}
|
||||
{{ table.table_name|upper }} {
|
||||
{% for col in table.columns %} {{ col.data_type|replace(' ', '_') }} {{ col.column_name }}{% if col.column_name in table.primary_keys %} PK{% endif %}
|
||||
{% endfor %} }
|
||||
{% endfor %}
|
||||
{% for table in schema_info %}
|
||||
{% for fk in table.foreign_keys %}
|
||||
{{ table.table_name|upper }} }|--|| {{ fk.foreign_table_name|upper }} : "references"
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tables Overview -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Tables Overview</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{% for table in schema_info %}
|
||||
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||||
<h3 class="font-medium text-gray-900 dark:text-white mb-2 flex items-center">
|
||||
<svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
|
||||
</svg>
|
||||
{{ table.table_name }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
{{ table.columns|length }} column{{ 's' if table.columns|length != 1 else '' }}
|
||||
{% if table.primary_keys %}
|
||||
· {{ table.primary_keys|length }} PK
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<div class="space-y-1 max-h-40 overflow-y-auto">
|
||||
{% for col in table.columns %}
|
||||
<div class="text-xs flex items-start py-1">
|
||||
{% if col.column_name in table.primary_keys %}
|
||||
<svg class="w-3 h-3 mr-1.5 mt-0.5 text-yellow-500 flex-shrink-0" fill="currentColor"
|
||||
viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M10 2a3 3 0 00-3 3v1H5a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V8a2 2 0 00-2-2h-2V5a3 3 0 00-3-3zm3 5V5a1 1 0 10-2 0v2H9V5a1 1 0 00-2 0v2H5v7h10V7h-2z" />
|
||||
</svg>
|
||||
{% else %}
|
||||
<span class="w-3 h-3 mr-1.5 flex-shrink-0"></span>
|
||||
{% endif %}
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">{{ col.column_name }}</span>
|
||||
<span class="text-gray-500 dark:text-gray-500 ml-1">{{ col.data_type }}</span>
|
||||
{% if col.is_nullable == 'NO' %}
|
||||
<span class="text-red-500 text-[10px] ml-1">*</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if table.foreign_keys %}
|
||||
<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">References:</p>
|
||||
<div class="space-y-1">
|
||||
{% for fk in table.foreign_keys %}
|
||||
<div class="text-xs text-blue-600 dark:text-blue-400 flex items-center">
|
||||
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
{{ fk.foreign_table_name }} ({{ fk.column_name }})
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
// Dynamically import mermaid
|
||||
const mermaid = await import('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs');
|
||||
|
||||
// Initialize mermaid with theme
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
mermaid.default.initialize({
|
||||
startOnLoad: false,
|
||||
theme: isDark ? 'dark' : 'default',
|
||||
er: {
|
||||
fontSize: 14,
|
||||
useMaxWidth: true
|
||||
}
|
||||
});
|
||||
|
||||
// Render the diagram
|
||||
try {
|
||||
await mermaid.default.run({
|
||||
querySelector: '.mermaid'
|
||||
});
|
||||
console.log('Mermaid diagram rendered successfully');
|
||||
} catch (error) {
|
||||
console.error('Mermaid rendering error:', error);
|
||||
const diagramDiv = document.getElementById('mermaid-diagram');
|
||||
if (diagramDiv) {
|
||||
diagramDiv.innerHTML = `
|
||||
<div class="text-amber-600 dark:text-amber-400 p-6 text-center">
|
||||
<svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<p class="font-medium mb-2">Unable to render ERD</p>
|
||||
<p class="text-sm">View the tables overview below for schema information.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -13,6 +13,11 @@
|
||||
class="border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 py-4 px-1 text-sm font-medium cursor-pointer">
|
||||
Export Data
|
||||
</a>
|
||||
<a hx-get="{{ url_for('settings.database_schema') }}" hx-target="#container" hx-swap="innerHTML"
|
||||
hx-push-url="true"
|
||||
class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
|
||||
Database Schema
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +34,7 @@
|
||||
<svg class="w-5 h-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clip-rule="evenodd" />
|
||||
clip-rule="even odd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-900 dark:text-white">HTTP Functions</h3>
|
||||
|
||||
Reference in New Issue
Block a user