dbviewer 0.6.7 → 0.7.0

data/app/assets/stylesheets/dbviewer/entity_relationship_diagram.css

@@ -0,0 +1,181 @@
+#erd-container {
+  overflow: auto;
+  height: calc(100vh - 125px);
+  padding: 20px;
+  position: relative;
+}
+
+.mermaid {
+  display: flex;
+  justify-content: center;
+  min-width: 100%;
+}
+
+/* Loading state styling */
+#erd-loading {
+  background-color: var(--bs-body-bg);
+}
+
+#erd-loading .text-center p {
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+#erd-loading .text-center small {
+  font-size: 0.875rem;
+}
+
+/* Error state styling */
+#erd-error {
+  max-width: 600px;
+  margin: 2rem auto;
+}
+
+#erd-error h5 {
+  color: var(--bs-danger);
+  margin-bottom: 0.75rem;
+}
+
+#erd-error-details {
+  font-size: 0.8rem;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+/* SVG Pan Zoom styles */
+.svg-pan-zoom_viewport {
+  transition: 0.2s;
+}
+
+/* Make sure SVG maintains its size */
+#erd-container svg {
+  width: 100%;
+  height: auto;
+  display: block;
+  min-width: 800px;
+  min-height: 600px;
+}
+
+/* Override mermaid defaults for a better look */
+.entityBox {
+  fill: #f8f9fa;
+  stroke: #6c757d;
+}
+
+.entityLabel,
+.mermaid .label {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 20px !important;
+}
+
+/* Dark mode overrides - comprehensive styling like mini ERD */
+[data-bs-theme="dark"] .entityBox {
+  fill: #2d3748;
+  stroke: #6ea8fe;
+}
+
+[data-bs-theme="dark"] .entityLabel,
+[data-bs-theme="dark"] .mermaid .label {
+  color: #f8f9fa;
+}
+
+[data-bs-theme="dark"] #erd-error-details {
+  background-color: var(--bs-dark) !important;
+  color: var(--bs-light);
+  border-color: var(--bs-border-color);
+}
+
+/* Dark mode: Update mermaid diagram elements */
+[data-bs-theme="dark"] .mermaid .er .entityBox {
+  fill: #2d3748 !important;
+  stroke: #6ea8fe !important;
+  stroke-width: 1.5px !important;
+}
+
+[data-bs-theme="dark"] .mermaid .er .entityLabel {
+  fill: #f8f9fa !important;
+  color: #f8f9fa !important;
+}
+
+[data-bs-theme="dark"] .mermaid .er .relationshipLine {
+  stroke: #6ea8fe !important;
+  stroke-width: 2px !important;
+}
+
+[data-bs-theme="dark"] .mermaid .er .relationshipLabel {
+  fill: #f8f9fa !important;
+  color: #f8f9fa !important;
+}
+
+[data-bs-theme="dark"] .mermaid .er .attributeBoxEven,
+[data-bs-theme="dark"] .mermaid .er .attributeBoxOdd {
+  fill: #374151 !important;
+}
+
+[data-bs-theme="dark"] .mermaid text {
+  fill: #f8f9fa !important;
+}
+
+/* Loading indicator dark mode */
+[data-bs-theme="dark"] #erd-loading {
+  background-color: var(--bs-dark);
+  color: var(--bs-light);
+}
+
+[data-bs-theme="dark"] #erd-loading .spinner-border {
+  color: #6ea8fe;
+}
+
+/* Zoom percentage display styling */
+#zoomPercentage {
+  font-size: 0.9rem;
+  font-weight: 500;
+  width: 45px;
+  display: inline-block;
+  text-align: center;
+}
+
+/* Data loading badge styling */
+#data-loading-badge {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+#data-loading-badge .badge {
+  font-size: 0.75rem;
+  padding: 0.4rem 0.6rem;
+}
+
+/* Mermaid override for text size */
+.mermaid .entityLabel div {
+  font-size: 20px !important;
+}
+
+.mermaid .er.relationshipLabel {
+  font-size: 20px !important;
+}
+
+/* Enhanced table highlighting for current table */
+.current-table-highlight rect {
+  fill: var(--bs-primary-bg-subtle) !important;
+  stroke: var(--bs-primary) !important;
+  stroke-width: 2px !important;
+}
+
+[data-bs-theme="dark"] .current-table-highlight rect {
+  fill: #2c3034 !important;
+  stroke: #6ea8fe !important;
+  stroke-width: 2px !important;
+}

data/app/assets/stylesheets/dbviewer/home.css

@@ -0,0 +1,229 @@
+/* ================================================
+     CSS Custom Properties (CSS Variables)
+     ================================================ */
+:root {
+  /* Colors */
+  --dbviewer-code-bg: rgba(0, 0, 0, 0.05);
+  --dbviewer-code-border: rgba(0, 0, 0, 0.1);
+  --dbviewer-muted-color: #6c757d;
+  --dbviewer-success-color: #28a745;
+  --dbviewer-danger-color: #dc3545;
+  --dbviewer-warning-color: #ffc107;
+
+  /* Skeleton loader colors */
+  --skeleton-base-color: #f0f0f0;
+  --skeleton-highlight-color: #e0e0e0;
+
+  /* Typography */
+  --dbviewer-monospace-font: "Courier New", Courier, monospace;
+  --dbviewer-code-font-size: 0.85rem;
+
+  /* Spacing and sizing */
+  --dbviewer-border-radius: 4px;
+  --dbviewer-border-radius-sm: 3px;
+  --dbviewer-padding-sm: 2px 4px;
+}
+
+/* ================================================
+     Dark Mode Support
+     ================================================ */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dbviewer-code-bg: rgba(255, 255, 255, 0.1);
+    --dbviewer-code-border: rgba(255, 255, 255, 0.15);
+    --dbviewer-muted-color: #adb5bd;
+    --skeleton-base-color: #2a2a2a;
+    --skeleton-highlight-color: #404040;
+  }
+}
+
+/* Bootstrap dark mode support */
+[data-bs-theme="dark"] {
+  --dbviewer-code-bg: rgba(255, 255, 255, 0.1);
+  --dbviewer-code-border: rgba(255, 255, 255, 0.15);
+  --dbviewer-muted-color: #adb5bd;
+  --skeleton-base-color: #2a2a2a;
+  --skeleton-highlight-color: #404040;
+}
+
+/* ================================================
+     SQL Query Styling
+     ================================================ */
+.sql-query-code {
+  font-family: var(--dbviewer-monospace-font);
+  font-size: var(--dbviewer-code-font-size);
+  background-color: var(--dbviewer-code-bg);
+  padding: var(--dbviewer-padding-sm);
+  border-radius: var(--dbviewer-border-radius-sm);
+  border: 1px solid var(--dbviewer-code-border);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.sql-query-code:hover {
+  background-color: var(--dbviewer-code-bg);
+  filter: brightness(0.95);
+}
+
+/* ================================================
+     Query Performance Indicators
+     ================================================ */
+.query-duration {
+  color: var(--dbviewer-success-color);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  transition: color 0.2s ease;
+}
+
+.query-duration-slow {
+  color: var(--dbviewer-danger-color);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  transition: color 0.2s ease;
+}
+
+.query-timestamp {
+  color: var(--dbviewer-muted-color);
+  font-variant-numeric: tabular-nums;
+  transition: color 0.2s ease;
+}
+
+/* ================================================
+     Empty States and Messages
+     ================================================ */
+.empty-data-message {
+  color: var(--dbviewer-muted-color);
+  transition: color 0.2s ease;
+}
+
+.empty-data-message p {
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.empty-data-message small {
+  opacity: 0.8;
+}
+
+/* ================================================
+     Loading States
+     ================================================ */
+.spinner-border-sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ================================================
+     Skeleton Loader System
+     ================================================ */
+.skeleton-loader {
+  display: inline-block;
+  height: 1.2em;
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base-color) 25%,
+    var(--skeleton-highlight-color) 37%,
+    var(--skeleton-base-color) 63%
+  );
+  background-size: 400% 100%;
+  animation: skeleton-loading 1.2s ease-in-out infinite;
+  border-radius: var(--dbviewer-border-radius);
+}
+
+/* Skeleton loader variants */
+.skeleton-loader.number-loader {
+  width: 2.5em;
+  height: 1.5em;
+  margin-bottom: 0.2em;
+}
+
+.skeleton-loader.table-cell-loader {
+  width: 6em;
+  height: 1.2em;
+}
+
+.skeleton-loader.records-loader {
+  width: 3em;
+  height: 1.2em;
+}
+
+.skeleton-loader.query-cell-loader {
+  width: 12em;
+  height: 1.2em;
+}
+
+.skeleton-loader.duration-cell-loader {
+  width: 4em;
+  height: 1.2em;
+}
+
+.skeleton-loader.time-cell-loader {
+  width: 7em;
+  height: 1.2em;
+}
+
+/* ================================================
+     Animations
+     ================================================ */
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+/* ================================================
+     Table Enhancements
+     ================================================ */
+.table-hover tbody tr:hover .sql-query-code {
+  background-color: var(--dbviewer-code-bg);
+  filter: brightness(0.9);
+}
+
+/* ================================================
+     Responsive Design
+     ================================================ */
+@media (max-width: 768px) {
+  .sql-query-code {
+    font-size: 0.75rem;
+    padding: 1px 3px;
+  }
+
+  .query-cell-loader {
+    width: 8em;
+  }
+
+  .duration-cell-loader {
+    width: 3em;
+  }
+
+  .time-cell-loader {
+    width: 5em;
+  }
+}
+
+/* ================================================
+     Accessibility Improvements
+     ================================================ */
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-loader {
+    animation: none;
+    background: var(--skeleton-base-color);
+  }
+
+  .sql-query-code,
+  .query-duration,
+  .query-duration-slow,
+  .query-timestamp,
+  .empty-data-message {
+    transition: none;
+  }
+}
+
+/* Focus states for better keyboard navigation */
+.sql-query-code:focus-visible {
+  outline: 2px solid var(--dbviewer-success-color);
+  outline-offset: 2px;
+}

data/app/assets/stylesheets/dbviewer/logs.css

@@ -0,0 +1,64 @@
+/* SQL query styling with dark mode support */
+.sql-query {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-height: 100px;
+  overflow-y: auto;
+  font-size: 0.85rem;
+  border-radius: 3px;
+  padding: 0.5rem;
+}
+
+/* Dark mode compatible styling */
+.sql-code-block {
+  background-color: var(--bs-secondary-bg);
+}
+
+[data-bs-theme="dark"] .sql-code-block {
+  background-color: var(--bs-tertiary-bg);
+}
+
+/* Request group header styling */
+.request-group-header {
+  border-top: 2px solid var(--bs-border-color);
+}
+
+.request-header-bg {
+  background-color: var(--bs-secondary-bg);
+}
+
+.request-group-header:first-child {
+  border-top: none;
+}
+
+/* Collapsed section styling */
+details summary {
+  cursor: pointer;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+/* Rotate icon when expanded */
+.collapsed-section[aria-expanded="true"] .bi-chevron-down {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
+
+.collapsed-section[aria-expanded="false"] .bi-chevron-down {
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+
+/* Code styling */
+.pattern-code,
+.query-binds {
+  background-color: var(--bs-secondary-bg);
+  border: 1px solid var(--bs-border-color);
+}
+
+/* Empty data message */
+.empty-data-message {
+  color: var(--bs-secondary-color);
+}

data/app/assets/stylesheets/dbviewer/query.css

@@ -0,0 +1,171 @@
+/* Monaco Editor styling */
+#monaco-editor {
+  margin-bottom: 1rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.monaco-editor-container {
+  border: 1px solid #ced4da;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+[data-bs-theme="dark"] .monaco-editor-container {
+  border: 1px solid #495057;
+}
+
+[data-bs-theme="dark"] #monaco-editor {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.example-queries {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 8px;
+}
+
+.example-query {
+  display: inline-block;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  font-size: 0.85rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+[data-bs-theme="light"] .example-query {
+  border-color: #ced4da;
+}
+
+[data-bs-theme="dark"] .example-query {
+  border-color: #495057;
+  color: #f8f9fa;
+}
+
+/* Result table styling */
+.results-table {
+  border-collapse: collapse;
+}
+
+[data-bs-theme="dark"] .results-table {
+  border-color: #495057;
+}
+
+.example-query:hover {
+  background-color: #0d6efd;
+  color: white;
+  border-color: #0d6efd;
+}
+
+/* Keyboard shortcut helper */
+.keyboard-hint {
+  font-size: 0.8rem;
+  margin-left: 8px;
+  opacity: 0.7;
+}
+
+[data-bs-theme="light"] .shortcut-hints {
+  color: #6c757d;
+}
+
+[data-bs-theme="dark"] .shortcut-hints {
+  color: #adb5bd;
+}
+
+/* Monaco status bar */
+.monaco-status-bar {
+  display: flex;
+  justify-content: space-between;
+  padding: 3px 8px;
+  font-size: 0.75rem;
+  border-top: none;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+[data-bs-theme="light"] .monaco-status-bar {
+  background-color: #f8f9fa;
+  border: 1px solid #ced4da;
+  color: #6c757d;
+}
+
+[data-bs-theme="dark"] .monaco-status-bar {
+  background-color: #343a40;
+  border: 1px solid #495057;
+  color: #adb5bd;
+}
+
+.monaco-status-bar .column-info {
+  font-weight: 500;
+}
+
+/* Table structure styles */
+#tableStructureHeader .btn-link {
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+}
+
+[data-bs-theme="light"] #tableStructureHeader .btn-link {
+  color: #212529;
+}
+
+[data-bs-theme="dark"] #tableStructureHeader .btn-link {
+  color: #f8f9fa;
+}
+
+[data-bs-theme="light"] .table-columns-count {
+  color: #6c757d;
+}
+
+[data-bs-theme="dark"] .table-columns-count {
+  color: #adb5bd;
+}
+
+#tableStructureHeader .btn-link:hover,
+#tableStructureHeader .btn-link:focus {
+  text-decoration: none;
+  color: #0d6efd;
+}
+
+#tableStructureHeader .btn-link i {
+  transition: transform 0.2s ease-in-out;
+}
+
+/* Table style overrides for query page */
+[data-bs-theme="dark"] .table-sm th,
+[data-bs-theme="dark"] .table-sm td {
+  border-color: #495057;
+}
+
+/* Results card styling */
+[data-bs-theme="dark"] .card-header h5 {
+  color: #f8f9fa;
+}
+
+/* Alert styling for dark mode */
+[data-bs-theme="dark"] .alert-warning {
+  background-color: rgba(255, 193, 7, 0.15);
+  border-color: rgba(255, 193, 7, 0.4);
+  color: #ffc107;
+}
+
+[data-bs-theme="dark"] .alert-danger {
+  background-color: rgba(220, 53, 69, 0.15);
+  border-color: rgba(220, 53, 69, 0.4);
+  color: #f8d7da;
+}
+
+/* Make headings stand out in dark mode */
+[data-bs-theme="dark"] h1,
+[data-bs-theme="dark"] h2,
+[data-bs-theme="dark"] h3,
+[data-bs-theme="dark"] h4,
+[data-bs-theme="dark"] h5,
+[data-bs-theme="dark"] h6 {
+  color: #f8f9fa;
+}