dbviewer 0.6.7 → 0.7.0

data/app/assets/javascripts/dbviewer/home.js

@@ -0,0 +1,287 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // Helper function to format numbers with commas
+  function numberWithDelimiter(number) {
+    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+
+  // Helper function to format file sizes
+  function numberToHumanSize(bytes) {
+    if (bytes === null || bytes === undefined) return "N/A";
+    if (bytes === 0) return "0 Bytes";
+
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  }
+
+  // Function to update analytics cards
+  function updateTablesCount(data) {
+    document.getElementById("tables-loading").classList.add("d-none");
+    document.getElementById("tables-count").classList.remove("d-none");
+    document.getElementById("tables-count").textContent =
+      data.total_tables || 0;
+  }
+
+  function updateRelationshipsCount(data) {
+    document.getElementById("relationships-loading").classList.add("d-none");
+    document.getElementById("relationships-count").classList.remove("d-none");
+    document.getElementById("relationships-count").textContent =
+      data.total_relationships || 0;
+  }
+
+  function updateDatabaseSize(data) {
+    document.getElementById("size-loading").classList.add("d-none");
+    document.getElementById("size-count").classList.remove("d-none");
+    document.getElementById("size-count").textContent = numberToHumanSize(
+      data.schema_size
+    );
+  }
+
+  function updateRecordsData(recordsData) {
+    // Update records count
+    document.getElementById("records-loading").classList.add("d-none");
+    document.getElementById("records-count").classList.remove("d-none");
+    document.getElementById("records-count").textContent = numberWithDelimiter(
+      recordsData.total_records || 0
+    );
+
+    // Update largest tables
+    updateLargestTables(recordsData);
+  }
+
+  // Function to update largest tables
+  function updateLargestTables(data) {
+    const container = document.getElementById("largest-tables-container");
+
+    if (data.largest_tables && data.largest_tables.length > 0) {
+      const tableHtml = `
+        <div class="table-responsive">
+          <table class="table table-sm table-hover">
+            <thead>
+              <tr>
+                <th>Table Name</th>
+                <th class="text-end">Records</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${data.largest_tables
+                .map(
+                  (table) => `
+                <tr>
+                  <td>
+                    <a href="${
+                      window.location.origin
+                    }${window.location.pathname.replace(/\/$/, "")}/tables/${
+                    table.name
+                  }">
+                      ${table.name}
+                    </a>
+                  </td>
+                  <td class="text-end">${numberWithDelimiter(
+                    table.record_count
+                  )}</td>
+                </tr>
+              `
+                )
+                .join("")}
+            </tbody>
+          </table>
+        </div>
+      `;
+      container.innerHTML = tableHtml;
+    } else {
+      container.innerHTML = `
+        <div class="text-center my-4 empty-data-message">
+          <p>No table data available</p>
+        </div>
+      `;
+    }
+  }
+
+  // Function to update recent queries
+  function updateRecentQueries(data) {
+    const container = document.getElementById("recent-queries-container");
+    const linkContainer = document.getElementById("queries-view-all-link");
+
+    if (data.enabled) {
+      // Show "View All Logs" link if query logging is enabled
+      linkContainer.innerHTML = `
+        <a href="${window.location.origin}${window.location.pathname.replace(
+        /\/$/,
+        ""
+      )}/logs" class="btn btn-sm btn-primary">View All Logs</a>
+      `;
+      linkContainer.classList.remove("d-none");
+
+      if (data.queries && data.queries.length > 0) {
+        const tableHtml = `
+          <div class="table-responsive">
+            <table class="table table-sm table-hover mb-0">
+              <thead>
+                <tr>
+                  <th>Query</th>
+                  <th class="text-end" style="width: 120px">Duration</th>
+                  <th class="text-end" style="width: 180px">Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${data.queries
+                  .map((query) => {
+                    const duration = query.duration_ms;
+                    const durationClass =
+                      duration > 100 ? "query-duration-slow" : "query-duration";
+                    const timestamp = new Date(query.timestamp);
+                    const timeString = timestamp.toLocaleTimeString();
+
+                    return `
+                    <tr>
+                      <td class="text-truncate" style="max-width: 500px;">
+                        <code class="sql-query-code">${query.sql}</code>
+                      </td>
+                      <td class="text-end">
+                        <span class="${durationClass}">
+                          ${duration} ms
+                        </span>
+                      </td>
+                      <td class="text-end query-timestamp">
+                        <small>${timeString}</small>
+                      </td>
+                    </tr>
+                  `;
+                  })
+                  .join("")}
+              </tbody>
+            </table>
+          </div>
+        `;
+        container.innerHTML = tableHtml;
+      } else {
+        container.innerHTML = `
+          <div class="text-center my-4 empty-data-message">
+            <p>No queries recorded yet</p>
+          </div>
+        `;
+      }
+    } else {
+      container.innerHTML = `
+        <div class="text-center my-4 empty-data-message">
+          <p>Query logging is disabled</p>
+          <small class="text-muted">Enable it in the configuration to see SQL queries here</small>
+        </div>
+      `;
+    }
+  }
+
+  // Function to show error state
+  function showError(containerId, message) {
+    const container = document.getElementById(containerId);
+    container.innerHTML = `
+      <div class="text-center my-4 text-danger">
+        <i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
+        <p>Error loading data</p>
+        <small>${message}</small>
+      </div>
+    `;
+  }
+
+  // Load tables count data
+  fetch(document.getElementById("api_tables_path").value, {
+    headers: {
+      Accept: "application/json",
+      "X-Requested-With": "XMLHttpRequest",
+    },
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      return response.json();
+    })
+    .then((data) => {
+      updateTablesCount(data);
+    })
+    .catch((error) => {
+      console.error("Error loading tables count:", error);
+      const loading = document.getElementById("tables-loading");
+      const count = document.getElementById("tables-count");
+      loading.classList.add("d-none");
+      count.classList.remove("d-none");
+      count.innerHTML = '<span class="text-danger">Error</span>';
+    });
+
+  // Load database size data
+  fetch(document.getElementById("size_api_database_path").value, {
+    headers: {
+      Accept: "application/json",
+      "X-Requested-With": "XMLHttpRequest",
+    },
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      return response.json();
+    })
+    .then((data) => {
+      updateDatabaseSize(data);
+    })
+    .catch((error) => {
+      console.error("Error loading database size:", error);
+      const loading = document.getElementById("size-loading");
+      const count = document.getElementById("size-count");
+      loading.classList.add("d-none");
+      count.classList.remove("d-none");
+      count.innerHTML = '<span class="text-danger">Error</span>';
+    });
+
+  // Load records data separately
+  fetch(document.getElementById("records_api_tables_path").value, {
+    headers: {
+      Accept: "application/json",
+      "X-Requested-With": "XMLHttpRequest",
+    },
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      return response.json();
+    })
+    .then((recordsData) => {
+      updateRecordsData(recordsData);
+    })
+    .catch((error) => {
+      console.error("Error loading records data:", error);
+      // Update records-related UI with error state
+      const recordsLoading = document.getElementById("records-loading");
+      const recordsCount = document.getElementById("records-count");
+      recordsLoading.classList.add("d-none");
+      recordsCount.classList.remove("d-none");
+      recordsCount.innerHTML = '<span class="text-danger">Error</span>';
+
+      showError("largest-tables-container", error.message);
+    });
+
+  // Load recent queries data
+  fetch(document.getElementById("recent_api_queries_path").value, {
+    headers: {
+      Accept: "application/json",
+      "X-Requested-With": "XMLHttpRequest",
+    },
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      return response.json();
+    })
+    .then((data) => {
+      updateRecentQueries(data);
+    })
+    .catch((error) => {
+      console.error("Error loading recent queries:", error);
+      showError("recent-queries-container", error.message);
+    });
+});

data/app/assets/javascripts/dbviewer/layout.js

@@ -0,0 +1,194 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // Theme toggle functionality
+  const themeToggleBtn = document.querySelector(".theme-toggle");
+  const htmlElement = document.documentElement;
+
+  // Check for saved theme preference or respect OS preference
+  const prefersDarkMode = window.matchMedia(
+    "(prefers-color-scheme: dark)"
+  ).matches;
+  const savedTheme = localStorage.getItem("dbviewerTheme");
+
+  // Set initial theme
+  if (savedTheme) {
+    htmlElement.setAttribute("data-bs-theme", savedTheme);
+  } else if (prefersDarkMode) {
+    htmlElement.setAttribute("data-bs-theme", "dark");
+    localStorage.setItem("dbviewerTheme", "dark");
+  }
+
+  // Toggle theme when button is clicked
+  if (themeToggleBtn) {
+    themeToggleBtn.addEventListener("click", function () {
+      const currentTheme = htmlElement.getAttribute("data-bs-theme");
+      const newTheme = currentTheme === "dark" ? "light" : "dark";
+
+      // Update theme
+      htmlElement.setAttribute("data-bs-theme", newTheme);
+      localStorage.setItem("dbviewerTheme", newTheme);
+
+      // Dispatch event for other components to respond to theme change (Monaco editor)
+      const themeChangeEvent = new CustomEvent("dbviewerThemeChanged", {
+        detail: { theme: newTheme },
+      });
+      document.dispatchEvent(themeChangeEvent);
+    });
+  }
+
+  // Check if styles are loaded properly
+  const styleCheck = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--dbviewer-styles-loaded");
+  if (!styleCheck) {
+    console.log(
+      "DBViewer: Using fallback inline styles (asset pipeline may not be available)"
+    );
+  } else {
+    console.log("DBViewer: External CSS loaded successfully");
+  }
+
+  const toggleBtn = document.querySelector(".dbviewer-sidebar-toggle");
+  const closeBtn = document.querySelector(".dbviewer-sidebar-close");
+  const sidebar = document.querySelector(".dbviewer-sidebar");
+  const overlay = document.createElement("div");
+
+  // Create and configure overlay for mobile
+  overlay.className = "dbviewer-sidebar-overlay";
+  document.body.appendChild(overlay);
+
+  function showSidebar() {
+    sidebar.classList.add("active");
+    document.body.classList.add("dbviewer-sidebar-open");
+    setTimeout(() => {
+      overlay.classList.add("active");
+    }, 50);
+  }
+
+  function hideSidebar() {
+    sidebar.classList.remove("active");
+    overlay.classList.remove("active");
+    setTimeout(() => {
+      document.body.classList.remove("dbviewer-sidebar-open");
+    }, 300);
+  }
+
+  if (toggleBtn) {
+    toggleBtn.addEventListener("click", function () {
+      if (sidebar.classList.contains("active")) {
+        hideSidebar();
+      } else {
+        showSidebar();
+        // Focus the search input when sidebar becomes visible
+        setTimeout(() => {
+          const searchInput = document.getElementById("tableSearch");
+          if (searchInput) searchInput.focus();
+        }, 300); // Small delay to allow for animation
+      }
+    });
+  }
+
+  if (closeBtn) {
+    closeBtn.addEventListener("click", function () {
+      hideSidebar();
+    });
+  }
+
+  overlay.addEventListener("click", function () {
+    hideSidebar();
+  });
+
+  // Close sidebar on window resize (from mobile to desktop)
+  let resizeTimer;
+  window.addEventListener("resize", function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(function () {
+      if (window.innerWidth >= 992 && sidebar.classList.contains("active")) {
+        overlay.classList.remove("active");
+      }
+    }, 250);
+  });
+
+  // Offcanvas enhancement for theme synchronization
+  const offcanvasElement = document.getElementById("navbarOffcanvas");
+  if (offcanvasElement) {
+    // Get all theme toggles
+    const allThemeToggles = document.querySelectorAll(".theme-toggle");
+
+    // Handle theme change from any toggle button
+    allThemeToggles.forEach((toggleBtn) => {
+      toggleBtn.addEventListener("click", function () {
+        const currentTheme =
+          document.documentElement.getAttribute("data-bs-theme") || "light";
+
+        // Update all theme toggle buttons to maintain consistency
+        allThemeToggles.forEach((btn) => {
+          // Update icon in all theme toggle buttons
+          if (currentTheme === "dark") {
+            btn.querySelector("span").innerHTML =
+              '<i class="bi bi-sun-fill"></i>';
+            btn.setAttribute("aria-label", "Switch to light mode");
+          } else {
+            btn.querySelector("span").innerHTML =
+              '<i class="bi bi-moon-fill"></i>';
+            btn.setAttribute("aria-label", "Switch to dark mode");
+          }
+        });
+      });
+    });
+
+    // Function to sync offcanvas colors with current theme
+    function syncOffcanvasWithTheme() {
+      const currentTheme =
+        document.documentElement.getAttribute("data-bs-theme") || "light";
+      if (currentTheme === "dark") {
+        offcanvasElement
+          .querySelector(".offcanvas-header")
+          .classList.remove("bg-light-subtle");
+        offcanvasElement
+          .querySelector(".offcanvas-header")
+          .classList.add("bg-dark-subtle");
+      } else {
+        offcanvasElement
+          .querySelector(".offcanvas-header")
+          .classList.remove("bg-dark-subtle");
+        offcanvasElement
+          .querySelector(".offcanvas-header")
+          .classList.add("bg-light-subtle");
+      }
+    }
+
+    // Sync on page load
+    document.addEventListener("DOMContentLoaded", syncOffcanvasWithTheme);
+
+    // Listen for theme changes
+    document.addEventListener("dbviewerThemeChanged", syncOffcanvasWithTheme);
+
+    // Handle link click in offcanvas (auto-close on mobile)
+    const offcanvasLinks = offcanvasElement.querySelectorAll(
+      ".nav-link:not(.dropdown-toggle)"
+    );
+    offcanvasLinks.forEach((link) => {
+      link.addEventListener("click", function () {
+        if (window.innerWidth < 992) {
+          bootstrap.Offcanvas.getInstance(offcanvasElement).hide();
+        }
+      });
+    });
+
+    // Fix offcanvas backdrop on desktop
+    window.addEventListener("resize", function () {
+      if (window.innerWidth >= 992) {
+        const offcanvasInstance =
+          bootstrap.Offcanvas.getInstance(offcanvasElement);
+        if (offcanvasInstance) {
+          offcanvasInstance.hide();
+        }
+        // Also remove any backdrop
+        const backdrop = document.querySelector(".offcanvas-backdrop");
+        if (backdrop) {
+          backdrop.remove();
+        }
+      }
+    });
+  }
+});