netbox-toolkit-plugin 0.1.1__py3-none-any.whl → 0.1.3__py3-none-any.whl

netbox_toolkit_plugin/static/netbox_toolkit_plugin/js/toolkit.js

@@ -1,6 +1,6 @@
 /**
  * NetBox Toolkit Plugin - Consolidated JavaScript
- * 
+ *
  * This file contains all the JavaScript functionality for the NetBox Toolkit plugin
  * to avoid duplication across templates and improve maintainability.
  */
@@ -8,15 +8,15 @@
 // Namespace for the toolkit functionality
 window.NetBoxToolkit = window.NetBoxToolkit || {};
 
-(function(Toolkit) {
+(function (Toolkit) {
     'use strict';
-    
+
     // Prevent multiple initialization
     if (Toolkit.initialized) {
         console.log('NetBox Toolkit already initialized, skipping');
         return;
     }
-    
+
     /**
      * Utility functions
      */
@@ -24,16 +24,16 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
         /**
          * Show success state on a button temporarily
          */
-        showButtonSuccess: function(btn, successText = '<i class="mdi mdi-check me-1"></i>Copied!', duration = 2000) {
+        showButtonSuccess: function (btn, successText = '<i class="mdi mdi-check me-1"></i>Copied!', duration = 2000) {
             const originalText = btn.innerHTML;
             const originalClass = btn.className;
-            
+
             btn.classList.add('copied');
             btn.innerHTML = successText;
             btn.style.backgroundColor = 'var(--tblr-success)';
             btn.style.borderColor = 'var(--tblr-success)';
             btn.style.color = 'white';
-            
+
             setTimeout(() => {
                 btn.className = originalClass;
                 btn.innerHTML = originalText;
@@ -42,18 +42,18 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                 btn.style.color = '';
             }, duration);
         },
-        
+
         /**
          * Fallback text copy using document.execCommand (legacy browsers)
          */
-        fallbackCopyText: function(text, btn) {
+        fallbackCopyText: function (text, btn) {
             const textArea = document.createElement('textarea');
             textArea.value = text;
             textArea.style.position = 'fixed';
             textArea.style.left = '-999999px';
             textArea.style.top = '-999999px';
             document.body.appendChild(textArea);
-            
+
             try {
                 textArea.focus();
                 textArea.select();
@@ -72,7 +72,7 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
             }
         }
     };
-    
+
     /**
      * Copy functionality for both parsed data and raw output
      * Works with multiple element ID patterns for flexibility
@@ -81,45 +81,51 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
         /**
          * Initialize copy functionality for both parsed data and raw output buttons
          */
-        init: function() {
+        init: function () {
             // Initialize parsed data copy buttons
             const copyParsedBtns = document.querySelectorAll('.copy-parsed-btn');
             copyParsedBtns.forEach(btn => {
                 btn.addEventListener('click', this.handleCopyParsedData.bind(this));
             });
-            
+
             // Initialize raw output copy buttons
             const copyOutputBtns = document.querySelectorAll('.copy-output-btn');
             copyOutputBtns.forEach(btn => {
                 btn.addEventListener('click', this.handleCopyRawOutput.bind(this));
             });
+
+            // Initialize CSV download buttons
+            const downloadCsvBtns = document.querySelectorAll('.download-csv-btn');
+            downloadCsvBtns.forEach(btn => {
+                btn.addEventListener('click', this.handleDownloadCSV.bind(this));
+            });
         },
-        
+
         /**
          * Handle copying raw command output from pre elements
          */
-        handleCopyRawOutput: function(event) {
+        handleCopyRawOutput: function (event) {
             const btn = event.target.closest('.copy-output-btn');
             if (!btn) return;
-            
+
             // Find the command output element
             // Look for .command-output within the same tab pane or nearby
             const tabPane = btn.closest('.tab-pane') || btn.closest('.card-body') || document;
             const outputElement = tabPane.querySelector('.command-output');
-            
+
             if (!outputElement) {
                 console.error('No command output element found');
                 alert('No command output found to copy');
                 return;
             }
-            
+
             const outputText = outputElement.textContent || outputElement.innerText;
             if (!outputText || !outputText.trim()) {
                 console.error('No command output text found');
                 alert('No command output available to copy');
                 return;
             }
-            
+
             // Use modern Clipboard API if available
             if (navigator.clipboard && window.isSecureContext) {
                 navigator.clipboard.writeText(outputText.trim()).then(() => {
@@ -133,44 +139,44 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                 Toolkit.Utils.fallbackCopyText(outputText.trim(), btn);
             }
         },
-        
+
         /**
          * Handle copying parsed data from JSON script elements
          */
-        handleCopyParsedData: function(event) {
+        handleCopyParsedData: function (event) {
             const btn = event.target.closest('.copy-parsed-btn');
             if (!btn) return;
-            
+
             // Try multiple possible element IDs for parsed data
             const possibleIds = [
                 'parsed-data-json',           // device_toolkit.html
                 'commandlog-parsed-data-json' // commandlog.html
             ];
-            
+
             let parsedDataElement = null;
             for (const id of possibleIds) {
                 parsedDataElement = document.getElementById(id);
                 if (parsedDataElement) break;
             }
-            
+
             if (!parsedDataElement) {
                 console.error('No parsed data script element found with IDs:', possibleIds);
                 alert('No parsed data found to copy');
                 return;
             }
-            
+
             const parsedDataStr = parsedDataElement.textContent;
             if (!parsedDataStr) {
                 console.error('No parsed data found to copy');
                 alert('No parsed data available');
                 return;
             }
-            
+
             try {
                 // Parse and re-stringify for clean formatting
                 const parsedData = JSON.parse(parsedDataStr);
                 const formattedJson = JSON.stringify(parsedData, null, 2);
-                
+
                 // Use modern Clipboard API if available
                 if (navigator.clipboard && window.isSecureContext) {
                     navigator.clipboard.writeText(formattedJson).then(() => {
@@ -187,22 +193,142 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                 console.error('Error processing parsed data:', err);
                 alert('Failed to process parsed data for copying: ' + err.message);
             }
+        },
+
+        /**
+         * Handle downloading parsed data as CSV
+         */
+        handleDownloadCSV: function (event) {
+            const btn = event.target.closest('.download-csv-btn');
+            if (!btn) return;
+
+            // Try multiple possible element IDs for parsed data
+            const possibleIds = [
+                'parsed-data-json',           // device_toolkit.html
+                'commandlog-parsed-data-json' // commandlog.html
+            ];
+
+            let parsedDataElement = null;
+            for (const id of possibleIds) {
+                parsedDataElement = document.getElementById(id);
+                if (parsedDataElement) break;
+            }
+
+            if (!parsedDataElement) {
+                console.error('No parsed data script element found with IDs:', possibleIds);
+                alert('No parsed data found to download');
+                return;
+            }
+
+            const parsedDataStr = parsedDataElement.textContent;
+            if (!parsedDataStr) {
+                console.error('No parsed data found to download');
+                alert('No parsed data available');
+                return;
+            }
+
+            try {
+                const parsedData = JSON.parse(parsedDataStr);
+                const csvContent = this.convertToCSV(parsedData);
+
+                // Create and trigger download
+                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+                const link = document.createElement('a');
+
+                if (link.download !== undefined) { // Feature detection
+                    const url = URL.createObjectURL(blob);
+                    link.setAttribute('href', url);
+                    link.setAttribute('download', 'parsed_data.csv');
+                    link.style.visibility = 'hidden';
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+
+                    // Show success feedback
+                    Toolkit.Utils.showButtonSuccess(btn, '<i class="mdi mdi-check me-1"></i>Downloaded!');
+                } else {
+                    // Fallback for older browsers
+                    alert('CSV download not supported in your browser');
+                }
+            } catch (err) {
+                console.error('Error processing parsed data for CSV:', err);
+                alert('Failed to process parsed data for CSV download: ' + err.message);
+            }
+        },
+
+        /**
+         * Convert JSON data to CSV format
+         */
+        convertToCSV: function (data) {
+            if (!data) return '';
+
+            // Handle different types of data
+            if (Array.isArray(data) && data.length > 0) {
+                if (typeof data[0] === 'object' && data[0] !== null) {
+                    // Array of objects - structured data
+                    const headers = Object.keys(data[0]);
+                    const csvRows = [];
+
+                    // Add header row
+                    csvRows.push(headers.map(header => this.escapeCSVField(header)).join(','));
+
+                    // Add data rows
+                    data.forEach(row => {
+                        const values = headers.map(header => {
+                            const value = row[header];
+                            return this.escapeCSVField(value);
+                        });
+                        csvRows.push(values.join(','));
+                    });
+
+                    return csvRows.join('\n');
+                } else {
+                    // Array of simple values
+                    return 'Value\n' + data.map(item => this.escapeCSVField(item)).join('\n');
+                }
+            } else if (typeof data === 'object' && data !== null) {
+                // Single object - convert to key-value pairs
+                const csvRows = ['Key,Value'];
+                Object.entries(data).forEach(([key, value]) => {
+                    csvRows.push(`${this.escapeCSVField(key)},${this.escapeCSVField(value)}`);
+                });
+                return csvRows.join('\n');
+            } else {
+                // Simple value
+                return 'Data\n' + this.escapeCSVField(data);
+            }
+        },
+
+        /**
+         * Escape CSV field values
+         */
+        escapeCSVField: function (field) {
+            if (field === null || field === undefined) return '';
+
+            const stringField = String(field);
+
+            // If field contains comma, quote, or newline, wrap in quotes and escape quotes
+            if (stringField.includes(',') || stringField.includes('"') || stringField.includes('\n') || stringField.includes('\r')) {
+                return '"' + stringField.replace(/"/g, '""') + '"';
+            }
+
+            return stringField;
         }
     };
-    
+
     /**
      * Modal management for device toolkit
      */
     Toolkit.ModalManager = {
         instance: null,
-        
+
         /**
          * Initialize modal functionality
          */
-        init: function() {
+        init: function () {
             const credentialModal = document.getElementById('credentialModal');
             if (!credentialModal) return;
-            
+
             // Try Bootstrap modal first, fallback to manual control
             try {
                 if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
@@ -216,56 +342,56 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                 console.error('Bootstrap modal initialization failed:', error);
                 this.instance = this.createManualModal(credentialModal);
             }
-            
+
             this.setupModalEvents(credentialModal);
         },
-        
+
         /**
          * Create manual modal controls for fallback
          */
-        createManualModal: function(modalElement) {
+        createManualModal: function (modalElement) {
             return {
-                show: function() {
+                show: function () {
                     modalElement.style.display = 'block';
                     modalElement.classList.add('show');
                     document.body.classList.add('modal-open');
-                    
+
                     // Create backdrop
                     const backdrop = document.createElement('div');
                     backdrop.className = 'modal-backdrop fade show';
                     backdrop.id = 'credentialModalBackdrop';
                     document.body.appendChild(backdrop);
-                    
+
                     // Trigger shown event
                     const shownEvent = new Event('shown.bs.modal');
                     modalElement.dispatchEvent(shownEvent);
                 },
-                hide: function() {
+                hide: function () {
                     modalElement.style.display = 'none';
                     modalElement.classList.remove('show');
                     document.body.classList.remove('modal-open');
-                    
+
                     // Remove backdrop
                     const backdrop = document.getElementById('credentialModalBackdrop');
                     if (backdrop) {
                         backdrop.remove();
                     }
-                    
+
                     // Trigger hidden event
                     const hiddenEvent = new Event('hidden.bs.modal');
                     modalElement.dispatchEvent(hiddenEvent);
                 }
             };
         },
-        
+
         /**
          * Setup modal event handlers
          */
-        setupModalEvents: function(credentialModal) {
+        setupModalEvents: function (credentialModal) {
             // Handle close button clicks
             const modalCloseButton = credentialModal.querySelector('.btn-close');
             const modalCancelButton = credentialModal.querySelector('.btn-secondary');
-            
+
             if (modalCloseButton) {
                 modalCloseButton.addEventListener('click', (event) => {
                     event.preventDefault();
@@ -274,7 +400,7 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                     }
                 });
             }
-            
+
             if (modalCancelButton) {
                 modalCancelButton.addEventListener('click', (event) => {
                     event.preventDefault();
@@ -283,7 +409,7 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                     }
                 });
             }
-            
+
             // Handle backdrop clicks for manual modal
             credentialModal.addEventListener('click', (event) => {
                 if (event.target === credentialModal && this.instance) {
@@ -291,112 +417,112 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                 }
             });
         },
-        
+
         /**
          * Show the modal
          */
-        show: function() {
+        show: function () {
             if (this.instance) {
                 this.instance.show();
             }
         },
-        
+
         /**
          * Hide the modal
          */
-        hide: function() {
+        hide: function () {
             if (this.instance) {
                 this.instance.hide();
             }
         }
     };
-    
+
     /**
      * Command execution functionality for device toolkit
      */
     Toolkit.CommandManager = {
         currentCommandData: null,
-        
+
         /**
          * Initialize command execution functionality
          */
-        init: function() {
+        init: function () {
             // Initialize modal first
             Toolkit.ModalManager.init();
-            
+
             // Setup collapse toggle for connection info
             this.setupConnectionInfoToggle();
-            
+
             // Setup command execution
             this.setupCommandExecution();
-            
+
             // Setup modal form handlers
             this.setupModalForm();
         },
-        
+
         /**
          * Setup connection info collapse toggle
          */
-        setupConnectionInfoToggle: function() {
+        setupConnectionInfoToggle: function () {
             const connectionInfoCollapse = document.getElementById('connectionInfoCollapse');
             const connectionInfoToggleButton = document.querySelector('[data-bs-target="#connectionInfoCollapse"]');
-            
+
             if (connectionInfoCollapse && connectionInfoToggleButton) {
                 connectionInfoCollapse.addEventListener('hidden.bs.collapse', function () {
                     connectionInfoToggleButton.classList.add('collapsed');
                 });
-                
+
                 connectionInfoCollapse.addEventListener('shown.bs.collapse', function () {
                     connectionInfoToggleButton.classList.remove('collapsed');
                 });
             }
         },
-        
+
         /**
          * Setup command execution event handlers
          */
-        setupCommandExecution: function() {
+        setupCommandExecution: function () {
             const commandContainer = document.querySelector('.card-commands');
             if (!commandContainer) {
                 console.error('Command container not found');
                 return;
             }
-            
+
             // Use event delegation to avoid duplicate listeners
             commandContainer.removeEventListener('click', this.handleRunButtonClick.bind(this));
             commandContainer.addEventListener('click', this.handleRunButtonClick.bind(this));
         },
-        
+
         /**
          * Handle run button clicks
          */
-        handleRunButtonClick: function(event) {
+        handleRunButtonClick: function (event) {
             // Only handle clicks on run buttons
             const runButton = event.target.closest('.command-run-btn');
             if (!runButton) return;
-            
+
             // Prevent any other event handlers from running
             event.preventDefault();
             event.stopImmediatePropagation();
-            
+
             console.log('Run button clicked:', runButton);
-            
+
             // Prevent double-clicks by checking if already processing
             if (runButton.dataset.processing === 'true') {
                 console.log('Command already processing, ignoring click');
                 return;
             }
-            
+
             // Get the command item and set active state
             const commandItem = runButton.closest('.command-item');
             const allCommandItems = document.querySelectorAll('.command-item');
             allCommandItems.forEach(ci => ci.classList.remove('active'));
             commandItem.classList.add('active');
-            
+
             // Store command data for modal
             const commandId = runButton.getAttribute('data-command-id');
             const commandName = runButton.getAttribute('data-command-name');
-            
+
             this.currentCommandData = {
                 id: commandId,
                 name: commandName,
@@ -404,22 +530,22 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                 button: runButton,
                 originalIconClass: runButton.querySelector('i').className
             };
-            
+
             // Update modal content
             const commandToExecuteElement = document.getElementById('commandToExecute');
             if (commandToExecuteElement) {
                 commandToExecuteElement.textContent = commandName;
             }
-            
+
             // Clear previous credentials and show modal
             const modalUsernameField = document.getElementById('modalUsername');
             const modalPasswordField = document.getElementById('modalPassword');
             if (modalUsernameField) modalUsernameField.value = '';
             if (modalPasswordField) modalPasswordField.value = '';
-            
+
             // Show the modal
             Toolkit.ModalManager.show();
-            
+
             // Focus on username field when modal is shown
             const credentialModal = document.getElementById('credentialModal');
             if (credentialModal && modalUsernameField) {
@@ -428,21 +554,21 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                 }, { once: true });
             }
         },
-        
+
         /**
          * Setup modal form handlers
          */
-        setupModalForm: function() {
+        setupModalForm: function () {
             const executeCommandBtn = document.getElementById('executeCommandBtn');
             const modalUsernameField = document.getElementById('modalUsername');
             const modalPasswordField = document.getElementById('modalPassword');
             const credentialModal = document.getElementById('credentialModal');
-            
+
             if (!executeCommandBtn) return;
-            
+
             // Handle execute button click in modal
             executeCommandBtn.addEventListener('click', this.executeCommand.bind(this));
-            
+
             // Handle Enter key in modal form
             if (modalPasswordField) {
                 modalPasswordField.addEventListener('keypress', (event) => {
@@ -452,7 +578,7 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                     }
                 });
             }
-            
+
             if (modalUsernameField) {
                 modalUsernameField.addEventListener('keypress', (event) => {
                     if (event.key === 'Enter') {
@@ -463,7 +589,7 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                     }
                 });
             }
-            
+
             // Clean up when modal is hidden
             if (credentialModal) {
                 credentialModal.addEventListener('hidden.bs.modal', () => {
@@ -476,63 +602,63 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                 });
             }
         },
-        
+
         /**
          * Execute the selected command
          */
-        executeCommand: function() {
+        executeCommand: function () {
             const modalUsernameField = document.getElementById('modalUsername');
             const modalPasswordField = document.getElementById('modalPassword');
-            
+
             // Validate credentials
             if (!modalUsernameField?.value || !modalPasswordField?.value) {
                 alert('Please enter both username and password');
                 return;
             }
-            
+
             if (!this.currentCommandData) {
                 alert('No command selected');
                 return;
             }
-            
+
             console.log('Executing command:', this.currentCommandData);
-            
+
             // Set processing flag and update UI
             this.setCommandProcessing(true);
-            
+
             // Update output area
             this.showCommandRunning();
-            
+
             // Prepare and submit form
             this.submitCommandForm();
         },
-        
+
         /**
          * Set command processing state
          */
-        setCommandProcessing: function(processing) {
+        setCommandProcessing: function (processing) {
             if (!this.currentCommandData) return;
-            
+
             const button = this.currentCommandData.button;
             const buttonIcon = button.querySelector('i');
-            
+
             button.dataset.processing = processing.toString();
             button.disabled = processing;
-            
+
             if (processing) {
                 buttonIcon.className = 'mdi mdi-loading mdi-spin';
             } else {
                 buttonIcon.className = this.currentCommandData.originalIconClass;
             }
         },
-        
+
         /**
          * Show command running state in output area
          */
-        showCommandRunning: function() {
+        showCommandRunning: function () {
             const outputContainer = document.getElementById('commandOutputContainer');
             const commandHeader = document.querySelector('.output-card .card-header span.text-muted');
-            
+
             if (outputContainer) {
                 outputContainer.innerHTML = `
                     <div class="alert alert-primary d-flex align-items-center mb-0">
@@ -544,44 +670,44 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                     </div>
                 `;
             }
-            
+
             // Update command header to show executing command
             if (commandHeader) {
                 commandHeader.textContent = `Executing: ${this.currentCommandData.name}`;
             }
         },
-        
+
         /**
          * Submit the command execution form
          */
-        submitCommandForm: function() {
+        submitCommandForm: function () {
             const commandForm = document.getElementById('commandExecutionForm');
             const selectedCommandIdField = document.getElementById('selectedCommandId');
             const formUsernameField = document.getElementById('formUsername');
             const formPasswordField = document.getElementById('formPassword');
             const modalUsernameField = document.getElementById('modalUsername');
             const modalPasswordField = document.getElementById('modalPassword');
-            
+
             if (!commandForm) {
                 console.error('Command form not found');
                 this.handleSubmissionError('Form not found');
                 return;
             }
-            
+
             // Prepare form data
             if (selectedCommandIdField) selectedCommandIdField.value = this.currentCommandData.id;
             if (formUsernameField) formUsernameField.value = modalUsernameField.value;
             if (formPasswordField) formPasswordField.value = modalPasswordField.value;
-            
+
             console.log('Form data:', {
                 commandId: selectedCommandIdField?.value,
                 username: formUsernameField?.value,
                 hasPassword: !!formPasswordField?.value
             });
-            
+
             // Close modal
             Toolkit.ModalManager.hide();
-            
+
             try {
                 commandForm.submit();
             } catch (error) {
@@ -589,20 +715,20 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                 this.handleSubmissionError('Error submitting form. Please check the console for details.');
             }
         },
-        
+
         /**
          * Handle form submission errors
          */
-        handleSubmissionError: function(message) {
+        handleSubmissionError: function (message) {
             alert(message);
-            
+
             // Reset processing state
             this.setCommandProcessing(false);
-            
+
             // Show error in output container
             const outputContainer = document.getElementById('commandOutputContainer');
             const commandHeader = document.querySelector('.output-card .card-header span.text-muted');
-            
+
             if (outputContainer) {
                 outputContainer.innerHTML = `
                     <div class="alert alert-danger d-flex align-items-start mb-3">
@@ -617,41 +743,41 @@ window.NetBoxToolkit = window.NetBoxToolkit || {};
                     </div>
                 `;
             }
-            
+
             // Clear command header
             if (commandHeader) {
                 commandHeader.textContent = '';
             }
         }
     };
-    
+
     /**
      * Main initialization function
      */
-    Toolkit.init = function() {
+    Toolkit.init = function () {
         console.log('Initializing NetBox Toolkit JavaScript');
-        
+
         // Initialize copy functionality (available on all pages)
         this.CopyManager.init();
-        
+
         // Initialize command functionality only if elements exist (device toolkit page)
         const commandForm = document.getElementById('commandExecutionForm');
         if (commandForm) {
             this.CommandManager.init();
         }
-        
+
         this.initialized = true;
         console.log('NetBox Toolkit JavaScript initialized successfully');
     };
-    
+
     // Auto-initialize when DOM is ready
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', function () {
             Toolkit.init();
         });
     } else {
         // DOM is already ready
         Toolkit.init();
     }
-    
+
 })(window.NetBoxToolkit);