{ "annotations": { "list": [ { "builtIn": 1, "datasource": { "type": "grafana", "uid": "-- Grafana --" }, "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "type": "dashboard" } ] }, "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 0, "id": null, "links": [], "liveNow": false, "panels": [ { "id": 1, "type": "volkovlabs-text-panel", "title": "SQLite based device management", "gridPos": { "x": 0, "y": 0, "h": 20, "w": 24 }, "fieldConfig": { "defaults": { "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "pluginVersion": "6.0.0", "targets": [ { "datasource": { "type": "marcusolsson-static-datasource", "uid": "U0HP2Rv4z" }, "frame": { "fields": [ { "config": {}, "name": "static", "type": "string", "values": [ "data" ] } ], "meta": {} }, "refId": "A" } ], "datasource": { "type": "marcusolsson-static-datasource", "uid": "U0HP2Rv4z" }, "options": { "renderMode": "data", "editors": [ "content", "afterRender", "styles" ], "editor": { "language": "html", "format": "auto" }, "wrap": true, "contentPartials": [], "content": "\n
\n
\n

\n \n SQLite Device Management System\n

\n

\n Advanced device management with inline editing, CRUD operations, and keyboard navigation.\n Adapted for SQLite compatibility.\n

\n
\n \n
\n
\n \n
Loading SQLite device data...
\n
Click the button below to load and manage devices
\n
\n
\n \n
\n \n \n
\n \n Database: ./tmp/devices.db\n
\n
\n \n
\n

\n \n Advanced Features\n

\n
\n
\n ✏️ Inline Editing:\n
    \n
  • Click edit icon or any cell to modify
    • \n
  • Real-time validation with visual feedback
    • \n
  • Timestamp format detection
    • \n
\n
\n
\n ⌨️ Keyboard Navigation:\n
    \n
  • Tab / Shift+Tab - Navigate cells
    • \n
  • Enter - Next cell or save row
    • \n
  • Ctrl+S - Save current row
    • \n
  • Esc - Cancel editing
    • \n
\n
\n
\n 💾 CRUD Operations:\n
    \n
  • Create, Read, Update, Delete records
    • \n
  • Individual row save/cancel operations
    • \n
  • Confirmation dialogs for destructive actions
    • \n
\n
\n
\n 🎨 UI Features:\n
    \n
  • Frozen columns (hostname, ip_address)
    • \n
  • Grafana theme integration
    • \n
  • Smooth animations and transitions
    • \n
  • Responsive table layout
    • \n
\n
\n
\n
\n \n
\n 🔧 SQLite Specific Notes:\n \n
\n
\n\n\n\n\n", "defaultContent": "The query didn't return any results.", "helpersRemoteUrl": "", "helpers": "", "afterRenderRemoteUrl": "", "afterRender": "// SQLite Device Management - Learning Panel Edit\n// Advanced device management with inline editing, CRUD operations, and keyboard navigation\n// Adapted from PostgreSQL version for SQLite compatibility\n\nlet currentDataSourceUid = 'sqlite-demo'; // SQLite datasource UID\nlet editingCell = null;\nlet originalValues = {};\nlet tableStructure = null; // Store table structure info\nlet currentFocusedInput = null; // Track currently focused input for keyboard navigation\n\nasync function loadDevices() {\n try {\n const result = await context.dataSource.sql(currentDataSourceUid, 'SELECT * FROM devices ORDER BY id');\n const rows = context.dataSource.utils.toObjects(result);\n\n if (rows.length === 0) {\n document.getElementById('devices-table').innerHTML = '

No devices found

';\n return;\n }\n\n // Store table structure information for better field handling\n const keys = Object.keys(rows[0]);\n tableStructure = {\n fields: keys,\n idField: detectIdField(keys), // Better ID field detection\n editableFields: keys.filter(key => !isIdField(key, keys)) // Filter out ID fields\n };\n\n // Get Grafana theme for styling\n const theme = context.grafana.theme;\n\n // Create scrollable table container with frozen columns\n let html = `\n
\n \n \n \n \n \n \n \n \n \n \n `;\n\n // Add remaining headers (scrollable)\n tableStructure.fields.forEach(key => {\n const isId = key === tableStructure.idField;\n const isFrozen = key === 'hostname' || key === 'ip_address';\n\n // Skip ID column and frozen columns (already added)\n if (isId || isFrozen) return;\n\n html += ``;\n });\n\n html += `\n \n \n `;\n\n // Add rows with Font Awesome icons and frozen columns\n rows.forEach((row, index) => {\n // Alternate row colors for better readability\n const rowBg = index % 2 === 0 ? theme.colors.background.primary : theme.colors.background.secondary;\n\n html += ``;\n\n // Get ID value for operations\n const idValue = row[tableStructure.idField];\n\n // Actions column (frozen left)\n html += ``;\n\n // Frozen hostname column\n const hostnameValue = row['hostname'] || '';\n const hostnameKey = 'hostname';\n const hostnameCellId = `cell-${index}-hostname`;\n originalValues[hostnameCellId] = hostnameValue;\n\n html += ``;\n\n // Frozen ip_address column\n const ipValue = row['ip_address'] || '';\n const ipKey = 'ip_address';\n const ipCellId = `cell-${index}-ip_address`;\n originalValues[ipCellId] = ipValue;\n\n html += ``;\n\n // Add remaining scrollable columns\n tableStructure.fields.forEach((key, keyIndex) => {\n const isIdField = key === tableStructure.idField;\n const isFrozen = key === 'hostname' || key === 'ip_address';\n\n // Skip ID and frozen columns (already handled)\n if (isIdField || isFrozen) return;\n\n const cellId = `cell-${index}-${keyIndex}`;\n originalValues[cellId] = row[key];\n const isEditable = !isIdField;\n\n html += ``;\n });\n\n html += '';\n });\n\n html += `\n \n
Actionshostnameip_address${key}
\n \n \n \n \n \n \n \n \n \n \n \n \n ${hostnameValue}${ipValue}${formatDisplayValue(key, row[key])}
\n
\n \n \n \n `;\n\n document.getElementById('devices-table').innerHTML = html;\n\n // Add event listeners\n addEventListeners();\n\n } catch (error) {\n const theme = context.grafana.theme;\n document.getElementById('devices-table').innerHTML = `\n
\n SQLite Error: ${error.message}\n
`;\n }\n}\n\n// Helper function to format display values (especially timestamps)\nfunction formatDisplayValue(fieldName, value) {\n if (value === null || value === undefined || value === '') {\n return 'null';\n }\n\n // Handle timestamp fields for SQLite (Unix timestamps)\n const timestampPatterns = [\n /.*_at$/i, /.*_time$/i, /.*timestamp$/i, /^date$/i, /^time$/i\n ];\n \n const isTimestampField = timestampPatterns.some(pattern => pattern.test(fieldName));\n \n if (isTimestampField && /^\\d{10,13}$/.test(String(value))) {\n // Convert Unix timestamp to readable format\n const timestamp = parseInt(value);\n const date = new Date(timestamp > 9999999999 ? timestamp : timestamp * 1000);\n return `${date.toLocaleString()}`;\n }\n\n return String(value);\n}\n\n// Helper function to detect ID field using common patterns\nfunction detectIdField(fields) {\n // Common ID field patterns (case-insensitive)\n const idPatterns = [\n /^id$/i, // exact match: \"id\"\n /^.*_id$/i, // ends with \"_id\": \"user_id\", \"device_id\"\n /^id_.*$/i, // starts with \"id_\": \"id_user\", \"id_device\"\n /^.*id$/i, // ends with \"id\": \"userid\", \"deviceid\"\n /^uid$/i, // exact match: \"uid\"\n /^uuid$/i, // exact match: \"uuid\"\n /^pk$/i, // exact match: \"pk\" (primary key)\n /^primary_key$/i // exact match: \"primary_key\"\n ];\n\n // Find first field matching ID patterns\n for (const pattern of idPatterns) {\n const idField = fields.find(field => pattern.test(field));\n if (idField) return idField;\n }\n\n // Fallback: return first field (most common case)\n return fields[0];\n}\n\n// Helper function to check if a field is an ID field\nfunction isIdField(fieldName, allFields) {\n return fieldName === detectIdField(allFields);\n}\n\n// Helper function to format SQL values for SQLite\nfunction formatSqlValue(fieldName, value) {\n // Handle null values\n if (value === null || value === 'null' || value === '') {\n return 'NULL';\n }\n\n // Convert to string and trim\n const stringValue = String(value).trim();\n\n // Handle timestamp fields (SQLite specific)\n const timestampPatterns = [\n /.*_at$/i, // ends with \"_at\": created_at, updated_at, last_seen_at\n /.*_time$/i, // ends with \"_time\": start_time, end_time\n /.*timestamp$/i, // ends with \"timestamp\"\n /^date$/i, // exact: \"date\"\n /^time$/i // exact: \"time\"\n ];\n\n const isTimestampField = timestampPatterns.some(pattern => pattern.test(fieldName));\n\n if (isTimestampField) {\n // Check if it's a Unix timestamp (numbers only, reasonable length)\n if (/^\\d{10,13}$/.test(stringValue)) {\n return stringValue; // Keep as number for SQLite\n }\n\n // Check if it's already a valid date string\n const parsedDate = new Date(stringValue);\n if (!isNaN(parsedDate.getTime())) {\n // Convert to Unix timestamp for SQLite (milliseconds to seconds)\n return Math.floor(parsedDate.getTime() / 1000);\n }\n\n // If we can't parse it as a date, treat it as NULL\n return 'NULL';\n }\n\n // Handle numeric fields\n if (/^\\-?\\d+(\\.\\d+)?$/.test(stringValue)) {\n return stringValue; // No quotes for numbers\n }\n\n // Handle boolean fields (SQLite uses 1/0 for boolean)\n if (stringValue.toLowerCase() === 'true' || stringValue.toLowerCase() === 'false') {\n return stringValue.toLowerCase() === 'true' ? '1' : '0';\n }\n\n // Default: treat as string with proper escaping for SQLite\n return `'${stringValue.replace(/'/g, \"''\")}'`;\n}\n\nfunction addEventListeners() {\n const theme = context.grafana.theme;\n\n // Edit icon listeners\n document.querySelectorAll('.edit-icon').forEach(icon => {\n icon.addEventListener('click', function () {\n const rowIndex = this.getAttribute('data-row-index');\n enterEditMode(rowIndex);\n });\n });\n\n // Save icon listeners\n document.querySelectorAll('.save-icon').forEach(icon => {\n icon.addEventListener('click', async function () {\n const deviceId = this.getAttribute('data-device-id');\n const rowIndex = this.getAttribute('data-row-index');\n await saveRow(deviceId, rowIndex);\n });\n });\n\n // Cancel icon listeners\n document.querySelectorAll('.cancel-icon').forEach(icon => {\n icon.addEventListener('click', function () {\n const rowIndex = this.getAttribute('data-row-index');\n cancelEdit(rowIndex);\n });\n });\n\n // Delete icon listeners\n document.querySelectorAll('.delete-icon').forEach(icon => {\n icon.addEventListener('click', async function () {\n const deviceId = this.getAttribute('data-device-id');\n await deleteDevice(deviceId, this);\n });\n });\n\n // Cell click listeners for inline editing\n document.querySelectorAll('.editable-cell').forEach(cell => {\n cell.addEventListener('click', function () {\n const rowIndex = this.getAttribute('data-row-index');\n if (editingCell === null) {\n enterEditMode(rowIndex);\n makeInlineEditable(this);\n }\n });\n });\n\n // Add keyboard navigation support\n document.addEventListener('keydown', handleGlobalKeyboard);\n}\n\n// Global keyboard handler for navigation and shortcuts\nfunction handleGlobalKeyboard(e) {\n // Only handle keyboard events during editing\n if (editingCell === null) return;\n\n if (e.key === 'Escape') {\n e.preventDefault();\n cancelEdit(editingCell);\n }\n\n if (e.ctrlKey && e.key === 's') {\n e.preventDefault();\n const row = document.querySelector(`tr[data-row-index=\"${editingCell}\"]`);\n const saveIcon = row.querySelector('.save-icon');\n if (saveIcon && saveIcon.style.display !== 'none') {\n saveIcon.click();\n }\n }\n}\n\nfunction enterEditMode(rowIndex) {\n if (editingCell !== null) {\n context.grafana.notifyError('Please save or cancel current edit before editing another row');\n return;\n }\n\n const row = document.querySelector(`tr[data-row-index=\"${rowIndex}\"]`);\n const editIcon = row.querySelector('.edit-icon');\n const saveIcon = row.querySelector('.save-icon');\n const cancelIcon = row.querySelector('.cancel-icon');\n\n // Toggle icon visibility\n editIcon.style.display = 'none';\n saveIcon.style.display = 'inline-block';\n cancelIcon.style.display = 'inline-block';\n\n // Store current values before making cells editable\n const cells = row.querySelectorAll('.editable-cell');\n cells.forEach(cell => {\n const cellId = cell.getAttribute('data-cell-id');\n const currentValue = cell.textContent.trim();\n originalValues[cellId] = currentValue;\n });\n\n // Make cells editable\n cells.forEach(cell => {\n makeInlineEditable(cell);\n });\n\n editingCell = rowIndex;\n}\n\nfunction makeInlineEditable(cell) {\n const theme = context.grafana.theme;\n const cellId = cell.getAttribute('data-cell-id');\n const fieldName = cell.getAttribute('data-field');\n const rowIndex = cell.getAttribute('data-row-index');\n \n // Get original value\n let originalValue = cell.getAttribute('data-original-value');\n if (!originalValue) {\n originalValue = originalValues[cellId];\n }\n if (originalValue === undefined || originalValue === null) {\n originalValue = cell.textContent.trim();\n }\n if (!originalValue) {\n originalValue = '';\n }\n\n // Skip ID field editing\n if (fieldName === tableStructure.idField) {\n context.grafana.notifyError('ID field cannot be edited');\n return;\n }\n\n // Create input with better styling\n const input = document.createElement('input');\n input.type = 'text';\n input.value = originalValue;\n input.setAttribute('data-original-value', originalValue);\n input.setAttribute('data-field', fieldName);\n\n // Add placeholder for timestamp fields\n const timestampPatterns = [\n /.*_at$/i, /.*_time$/i, /.*timestamp$/i, /^date$/i, /^time$/i\n ];\n const isTimestampField = timestampPatterns.some(pattern => pattern.test(fieldName));\n\n if (isTimestampField) {\n input.placeholder = 'e.g., 1671234567 (Unix) or 2023-12-17T10:30:00Z (ISO)';\n input.title = 'Enter Unix timestamp or ISO date format';\n }\n\n input.style.cssText = `\n width: 100%;\n background: ${theme.colors.background.canvas};\n border: 1px solid ${theme.colors.border.medium};\n color: ${theme.colors.text.primary};\n font-family: ${theme.typography.fontFamily};\n font-size: ${theme.typography.fontSize};\n padding: ${theme.spacing(1)};\n border-radius: ${theme.shape.radius.default}px;\n box-sizing: border-box;\n outline: none;\n transition: all 0.2s ease;\n box-shadow: none;\n `;\n\n // Enhanced keyboard navigation and input handling\n input.addEventListener('keydown', function (e) {\n handleInputKeyboard(e, cell, input);\n });\n\n input.addEventListener('focus', function () {\n currentFocusedInput = input;\n this.style.borderColor = theme.colors.primary.border;\n this.style.boxShadow = `0 0 0 2px ${theme.colors.primary.transparent}`;\n });\n\n input.addEventListener('blur', function () {\n this.style.borderColor = theme.colors.border.medium;\n this.style.boxShadow = 'none';\n });\n\n // Validate input on change\n input.addEventListener('input', function () {\n validateInput(input, theme);\n });\n\n cell.innerHTML = '';\n cell.appendChild(input);\n input.focus();\n input.select();\n currentFocusedInput = input;\n}\n\n// Enhanced keyboard handling for input fields\nfunction handleInputKeyboard(e, cell, input) {\n switch (e.key) {\n case 'Enter':\n e.preventDefault();\n const nextCell = getNextEditableCell(cell);\n if (nextCell) {\n makeInlineEditable(nextCell);\n } else {\n // If last cell, save the row\n const row = cell.closest('tr');\n const saveIcon = row.querySelector('.save-icon');\n if (saveIcon && saveIcon.style.display !== 'none') {\n saveIcon.click();\n }\n }\n break;\n\n case 'Tab':\n e.preventDefault();\n if (e.shiftKey) {\n // Shift+Tab: Move to previous editable cell\n const prevCell = getPreviousEditableCell(cell);\n if (prevCell) {\n makeInlineEditable(prevCell);\n }\n } else {\n // Tab: Move to next editable cell\n const nextCell = getNextEditableCell(cell);\n if (nextCell) {\n makeInlineEditable(nextCell);\n }\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n cancelEdit(editingCell);\n break;\n }\n}\n\n// Input validation with visual feedback\nfunction validateInput(input, theme) {\n const value = input.value.trim();\n const fieldName = input.getAttribute('data-field');\n\n // Basic validation\n if (value === '') {\n input.style.borderColor = theme.colors.warning.border;\n input.style.boxShadow = `0 0 0 2px ${theme.colors.warning.transparent}`;\n input.title = 'Field cannot be empty';\n return false;\n }\n\n // Validate timestamp fields\n const timestampPatterns = [\n /.*_at$/i, /.*_time$/i, /.*timestamp$/i, /^date$/i, /^time$/i\n ];\n\n const isTimestampField = timestampPatterns.some(pattern => pattern.test(fieldName));\n\n if (isTimestampField) {\n // Check if it's a valid Unix timestamp\n if (/^\\d{10,13}$/.test(value)) {\n const timestamp = parseInt(value);\n const date = new Date(timestamp > 9999999999 ? timestamp : timestamp * 1000);\n\n if (isNaN(date.getTime())) {\n input.style.borderColor = theme.colors.error.border;\n input.style.boxShadow = `0 0 0 2px ${theme.colors.error.transparent}`;\n input.title = 'Invalid timestamp format';\n return false;\n }\n\n // Show parsed date in tooltip for validation\n input.title = `Will be saved as: ${date.toISOString()}`;\n input.style.borderColor = theme.colors.success.border;\n input.style.boxShadow = `0 0 0 2px ${theme.colors.success.transparent}`;\n return true;\n }\n\n // Check if it's a valid date string\n const parsedDate = new Date(value);\n if (!isNaN(parsedDate.getTime())) {\n input.title = `Will be saved as: ${parsedDate.toISOString()}`;\n input.style.borderColor = theme.colors.success.border;\n input.style.boxShadow = `0 0 0 2px ${theme.colors.success.transparent}`;\n return true;\n }\n\n // Invalid timestamp format\n input.style.borderColor = theme.colors.error.border;\n input.style.boxShadow = `0 0 0 2px ${theme.colors.error.transparent}`;\n input.title = 'Invalid date/time format. Use Unix timestamp (e.g., 1671234567) or ISO date (e.g., 2023-12-17T10:30:00Z)';\n return false;\n }\n\n // Default validation passed\n input.style.borderColor = theme.colors.border.medium;\n input.style.boxShadow = 'none';\n input.title = '';\n return true;\n}\n\nfunction getNextEditableCell(currentCell) {\n const row = currentCell.closest('tr');\n const allCells = Array.from(row.querySelectorAll('.editable-cell'));\n const currentIndex = allCells.indexOf(currentCell);\n\n // Return next editable cell in same row, or first cell of next row\n if (currentIndex < allCells.length - 1) {\n return allCells[currentIndex + 1];\n } else {\n // Move to next row if available\n const nextRow = row.nextElementSibling;\n if (nextRow) {\n const firstEditableCell = nextRow.querySelector('.editable-cell');\n if (firstEditableCell) {\n // Switch to next row edit mode\n const nextRowIndex = nextRow.getAttribute('data-row-index');\n if (nextRowIndex !== editingCell) {\n cancelEdit(editingCell);\n enterEditMode(nextRowIndex);\n return firstEditableCell;\n }\n }\n }\n }\n return null;\n}\n\nfunction getPreviousEditableCell(currentCell) {\n const row = currentCell.closest('tr');\n const allCells = Array.from(row.querySelectorAll('.editable-cell'));\n const currentIndex = allCells.indexOf(currentCell);\n\n // Return previous editable cell in same row, or last cell of previous row\n if (currentIndex > 0) {\n return allCells[currentIndex - 1];\n } else {\n // Move to previous row if available\n const prevRow = row.previousElementSibling;\n if (prevRow) {\n const lastEditableCell = prevRow.querySelector('.editable-cell:last-of-type');\n if (lastEditableCell) {\n // Switch to previous row edit mode\n const prevRowIndex = prevRow.getAttribute('data-row-index');\n if (prevRowIndex !== editingCell) {\n cancelEdit(editingCell);\n enterEditMode(prevRowIndex);\n return lastEditableCell;\n }\n }\n }\n }\n return null;\n}\n\nasync function saveRow(deviceId, rowIndex) {\n const theme = context.grafana.theme;\n const row = document.querySelector(`tr[data-row-index=\"${rowIndex}\"]`);\n const cells = row.querySelectorAll('.editable-cell');\n\n // Collect updated data from editable fields only\n const updatedData = {};\n const changes = {};\n let hasChanges = false;\n let hasValidationErrors = false;\n\n cells.forEach(cell => {\n const fieldName = cell.getAttribute('data-field');\n const cellId = cell.getAttribute('data-cell-id');\n let newValue;\n\n const input = cell.querySelector('input');\n if (input) {\n newValue = input.value.trim();\n\n // Use the enhanced validation function\n if (!validateInput(input, theme)) {\n hasValidationErrors = true;\n return;\n }\n } else {\n newValue = cell.textContent.trim();\n }\n\n updatedData[fieldName] = newValue;\n\n // Check for changes\n if (originalValues[cellId] !== newValue) {\n hasChanges = true;\n changes[fieldName] = {\n old: originalValues[cellId],\n new: newValue\n };\n }\n });\n\n if (hasValidationErrors) {\n context.grafana.notifyError('Please fix validation errors before saving');\n return;\n }\n\n if (!hasChanges) {\n exitEditMode(rowIndex);\n context.grafana.notifySuccess('No changes to save');\n return;\n }\n\n try {\n // Build UPDATE SQL query for SQLite with only changed fields\n const updates = Object.keys(changes)\n .map(key => {\n const newValue = changes[key].new;\n return `${key} = ${formatSqlValue(key, newValue)}`;\n })\n .join(', ');\n\n const updateSql = `UPDATE devices SET ${updates} WHERE ${tableStructure.idField} = ${deviceId}`;\n\n // Show saving state\n const saveIcon = row.querySelector('.save-icon');\n const originalSaveClass = saveIcon.className;\n saveIcon.className = 'save-icon fas fa-spinner fa-spin';\n saveIcon.style.pointerEvents = 'none';\n saveIcon.title = 'Saving to SQLite...';\n\n console.log('Executing SQLite UPDATE:', updateSql);\n\n // Execute UPDATE SQL using SQLite\n await context.dataSource.sql(currentDataSourceUid, updateSql);\n\n // Update UI with new values and reset original values\n cells.forEach(cell => {\n const fieldName = cell.getAttribute('data-field');\n const cellId = cell.getAttribute('data-cell-id');\n const newValue = updatedData[fieldName];\n\n cell.innerHTML = formatDisplayValue(fieldName, newValue);\n originalValues[cellId] = newValue; // Update stored original values\n });\n\n // Restore save icon before exiting edit mode\n saveIcon.className = originalSaveClass;\n saveIcon.style.pointerEvents = 'auto';\n saveIcon.title = 'Save changes';\n\n exitEditMode(rowIndex);\n\n // Show detailed success message\n const changedFields = Object.keys(changes).join(', ');\n context.grafana.notifySuccess(`SQLite device updated successfully. Changed: ${changedFields}`);\n\n } catch (error) {\n // Re-enable save icon on error\n const saveIcon = row.querySelector('.save-icon');\n saveIcon.className = originalSaveClass;\n saveIcon.style.pointerEvents = 'auto';\n saveIcon.title = 'Save changes';\n\n // Enhanced error handling for SQLite\n let errorMessage = 'Unknown error occurred';\n let errorDetails = '';\n\n if (error && error.message) {\n errorMessage = error.message;\n }\n\n // Check if it's a database query error with additional details\n if (error && error.data && error.data.results) {\n const results = error.data.results;\n Object.keys(results).forEach(key => {\n const result = results[key];\n if (result.error) {\n errorMessage = result.error;\n if (result.errorSource) {\n errorDetails += `Source: ${result.errorSource}. `;\n }\n\n // Extract the executed query for debugging\n if (result.frames && result.frames[0] && result.frames[0].schema && result.frames[0].schema.meta) {\n const executedQuery = result.frames[0].schema.meta.executedQueryString;\n if (executedQuery) {\n console.error('Failed SQLite Query:', executedQuery);\n errorDetails += `Query: ${executedQuery.substring(0, 100)}${executedQuery.length > 100 ? '...' : ''}`;\n }\n }\n }\n });\n }\n\n // Show comprehensive error notification\n const fullErrorMessage = `SQLite update failed: ${errorMessage}${errorDetails ? ' | ' + errorDetails : ''}`;\n context.grafana.notifyError(fullErrorMessage);\n\n console.error('SQLite save operation failed:', {\n originalError: error,\n processedMessage: fullErrorMessage,\n deviceId: deviceId,\n changes: changes\n });\n }\n}\n\nfunction cancelEdit(rowIndex) {\n const row = document.querySelector(`tr[data-row-index=\"${rowIndex}\"]`);\n const cells = row.querySelectorAll('.editable-cell');\n\n // Restore original values\n cells.forEach(cell => {\n const cellId = cell.getAttribute('data-cell-id');\n const fieldName = cell.getAttribute('data-field');\n const originalValue = originalValues[cellId];\n cell.innerHTML = formatDisplayValue(fieldName, originalValue);\n });\n\n exitEditMode(rowIndex);\n context.grafana.notifySuccess('Edit cancelled');\n}\n\nfunction exitEditMode(rowIndex) {\n const row = document.querySelector(`tr[data-row-index=\"${rowIndex}\"]`);\n const editIcon = row.querySelector('.edit-icon');\n const saveIcon = row.querySelector('.save-icon');\n const cancelIcon = row.querySelector('.cancel-icon');\n\n // Toggle icon visibility\n editIcon.style.display = 'inline-block';\n saveIcon.style.display = 'none';\n cancelIcon.style.display = 'none';\n\n // Reset save icon to original state (in case it was a spinner)\n saveIcon.className = 'save-icon fas fa-check';\n saveIcon.style.pointerEvents = 'auto';\n saveIcon.title = 'Save changes';\n\n // Clean up state\n editingCell = null;\n currentFocusedInput = null;\n}\n\nasync function deleteDevice(deviceId, iconElement) {\n if (!confirm(`Are you sure you want to delete device ${deviceId}?`)) {\n return;\n }\n\n const theme = context.grafana.theme;\n\n // Disable icon during delete\n const originalClass = iconElement.className;\n iconElement.className = 'delete-icon fas fa-spinner fa-spin';\n iconElement.style.pointerEvents = 'none';\n iconElement.title = 'Deleting from SQLite...';\n\n try {\n // Execute DELETE SQL using SQLite syntax\n const deleteSql = `DELETE FROM devices WHERE ${tableStructure.idField} = ${deviceId}`;\n console.log('Executing SQLite DELETE:', deleteSql);\n \n await context.dataSource.sql(currentDataSourceUid, deleteSql);\n\n // Remove the row from table with smooth animation\n const row = iconElement.closest('tr');\n row.style.transition = 'opacity 0.3s ease';\n row.style.opacity = '0';\n setTimeout(() => row.remove(), 300);\n\n // Show success notification\n context.grafana.notifySuccess(`SQLite device ${deviceId} deleted successfully`);\n\n } catch (error) {\n // Re-enable icon on error\n iconElement.className = originalClass;\n iconElement.style.pointerEvents = 'auto';\n iconElement.title = 'Delete row';\n\n // Enhanced error handling for delete operation\n let errorMessage = 'Unknown error occurred';\n\n if (error && error.message) {\n errorMessage = error.message;\n }\n\n // Check for database-specific errors\n if (error && error.data && error.data.results) {\n const results = error.data.results;\n Object.keys(results).forEach(key => {\n const result = results[key];\n if (result.error) {\n errorMessage = result.error;\n }\n });\n }\n\n // Show comprehensive error notification\n const fullErrorMessage = `SQLite delete failed: ${errorMessage}`;\n context.grafana.notifyError(fullErrorMessage);\n\n console.error('SQLite delete operation failed:', {\n originalError: error,\n processedMessage: fullErrorMessage,\n deviceId: deviceId\n });\n }\n}\n\n// Clean up function to remove global event listeners\nfunction cleanup() {\n document.removeEventListener('keydown', handleGlobalKeyboard);\n editingCell = null;\n currentFocusedInput = null;\n}\n\n// Initialize: Load devices when the script runs\ndocument.getElementById('load-devices').addEventListener('click', loadDevices);", "externalStyles": [], "stylesRemoteUrl": "", "styles": "", "dataSource": { "enableDataSourceQueries": true, "queryTimeout": 30000, "showQueryErrors": true } } } ], "refresh": "", "schemaVersion": 39, "tags": [ "sqlite", "device-management", "crud" ], "templating": { "list": [] }, "time": { "from": "now-6h", "to": "now" }, "timepicker": {}, "timezone": "", "title": "SQLite based device management", "uid": "sqlite_device_management", "version": 1 }