peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add functionality to query DB through settings

Browse Source
This commit is contained in:
Peter Stockings
2025-12-01 10:04:19 +11:00
parent 0f26545c51
commit 290b141d32
2 changed files with 253 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
templates/dashboard/settings/database_schema.html
View File

@@ -23,8 +23,7 @@
<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>
<p class="text-gray-600 dark:text-gray-400">Explore your database structure and run queries on your data.</p>
</div>
<!-- ERD Diagram -->
@@ -42,13 +41,60 @@ erDiagram
{% endfor %}
{% for table in schema_info %}
{% for fk in table.foreign_keys %}
{{ table.table_name|upper }} }|--|| {{ fk.foreign_table_name|upper }} : "references"
{{ table.table_name|upper }} }|--|| {{ fk.foreign_table_name|upper }} : "{{ fk.column_name }}"
{% endfor %}
{% endfor %}
</pre>
</div>
</div>
<!-- SQL Query Explorer -->
<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">SQL Query Explorer</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Run SELECT queries on your data. Queries are automatically scoped to your user account for security.
</p>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">SQL Query</label>
<div id="sql-editor" class="border border-gray-300 dark:border-gray-600 rounded" style="height: 150px;">
</div>
</div>
<div class="flex items-center justify-between mb-4">
<button id="run-query-btn"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Run Query
</button>
<button id="clear-query-btn"
class="px-4 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
Clear
</button>
</div>
<div id="query-message" class="hidden mb-4 p-3 rounded-lg"></div>
<div id="query-results" class="hidden">
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Results</h3>
<div class="overflow-x-auto border border-gray-200 dark:border-gray-700 rounded-lg max-h-96">
<table id="results-table" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700 sticky top-0">
<tr id="results-header"></tr>
</thead>
<tbody id="results-body"
class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
</tbody>
</table>
</div>
</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>
@@ -115,6 +161,130 @@ erDiagram
</div>
</div>
<!-- Ace Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.0/ace.js"></script>
<!-- SQL Query Interface Script -->
<script>
// Initialize Ace Editor for SQL
const sqlEditor = ace.edit("sql-editor");
sqlEditor.setTheme("ace/theme/monokai");
sqlEditor.session.setMode("ace/mode/sql");
sqlEditor.setOptions({
fontSize: "14px",
showPrintMargin: false,
showGutter: true,
highlightActiveLine: true,
enableLiveAutocompletion: true
});
// Set default query
sqlEditor.setValue(`SELECT * FROM http_functions`, -1);
// Run query button
document.getElementById('run-query-btn').addEventListener('click', async () => {
const query = sqlEditor.getValue().trim();
const messageDiv = document.getElementById('query-message');
const resultsDiv = document.getElementById('query-results');
const runBtn = document.getElementById('run-query-btn');
if (!query) {
showMessage('Please enter a SQL query', 'error');
return;
}
// Disable button and show loading
runBtn.disabled = true;
runBtn.innerHTML = '<svg class="w-4 h-4 mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Running...';
try {
const response = await fetch('{{ url_for("settings.execute_query") }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ query })
});
const data = await response.json();
if (!response.ok) {
showMessage(data.error || 'Query failed', 'error');
resultsDiv.classList.add('hidden');
} else {
showMessage(data.message, 'success');
displayResults(data);
}
} catch (error) {
showMessage('Error executing query: ' + error.message, 'error');
resultsDiv.classList.add('hidden');
} finally {
// Re-enable button
runBtn.disabled = false;
runBtn.innerHTML = '<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>Run Query';
}
});
// Clear button
document.getElementById('clear-query-btn').addEventListener('click', () => {
sqlEditor.setValue('', -1);
document.getElementById('query-message').classList.add('hidden');
document.getElementById('query-results').classList.add('hidden');
});
function showMessage(message, type) {
const messageDiv = document.getElementById('query-message');
messageDiv.classList.remove('hidden', 'bg-green-50', 'bg-red-50', 'text-green-700', 'text-red-700',
'dark:bg-green-900/20', 'dark:bg-red-900/20', 'dark:text-green-300', 'dark:text-red-300');
if (type === 'success') {
messageDiv.classList.add('bg-green-50', 'text-green-700', 'dark:bg-green-900/20', 'dark:text-green-300');
} else {
messageDiv.classList.add('bg-red-50', 'text-red-700', 'dark:bg-red-900/20', 'dark:text-red-300');
}
messageDiv.textContent = message;
}
function displayResults(data) {
const resultsDiv = document.getElementById('query-results');
const headerRow = document.getElementById('results-header');
const tbody = document.getElementById('results-body');
// Clear previous results
headerRow.innerHTML = '';
tbody.innerHTML = '';
if (data.row_count === 0) {
resultsDiv.classList.add('hidden');
return;
}
// Add column headers
data.columns.forEach(col => {
const th = document.createElement('th');
th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider';
th.textContent = col;
headerRow.appendChild(th);
});
// Add rows
data.rows.forEach(row => {
const tr = document.createElement('tr');
row.forEach(cell => {
const td = document.createElement('td');
td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300';
td.textContent = cell === null ? 'NULL' : cell;
tr.appendChild(td);
});
tbody.appendChild(tr);
});
resultsDiv.classList.remove('hidden');
}
</script>
<!-- Mermaid Diagram Script -->
<script type="module">
// Dynamically import mermaid
const mermaid = await import('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs');