sqlui 0.1.52 → 0.1.54

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 67496893776f87c67e14c32003e03f5ad2efa2dede7afc7efb6b7d69a6489fcc
-  data.tar.gz: c7b0678eada7efa6b22666950b16157e5dfd06bebee46b978e2a8c2339a456e0
+  metadata.gz: 62f95d3843d478f8bec0c3b78beb490f731fc00608126c6ac6a6093235912ec7
+  data.tar.gz: 756c530843ef0f7f684f40f919d7e71c8284bb0910082758ea05dc4c9358d20c
 SHA512:
-  metadata.gz: 23df6f8e5acdff2a680e933db3730f989d8e4f6cc51829f091c7aa12651a27ab3179eac4a31eae3d6f4dbd314000628dc0deca94c553f359f599e2a44d25bfbe
-  data.tar.gz: 3389a5572cddc8ebe39b7d12eb7fef3d1548aae2a2957b0eeea96fa18e622acc204eb85bc1aec68556757058ac3142b5471e1001a61678a124a7fd55c36a2154
+  metadata.gz: a4abb367d1945feda08acf76583501baf457dd15ef3b8b7a76c39160e6171628a89dff645116c845ecd8e01cb9b150378f4e052f68686479ae2fd5c4ea0e1f39
+  data.tar.gz: 6327b8f5e755c37b5399f10a16187b61fd975c42c48a83f282861dee6a6e0cf44702acd34ae30a3b681db9a2f4e4c2622162d99d77101fe429fcd4e485314d8f

data/.release-version

@@ -0,0 +1 @@
+0.1.54

data/app/server.rb

@@ -2,6 +2,7 @@
 
 require 'base64'
 require 'csv'
+require 'digest/md5'
 require 'erb'
 require 'json'
 require 'prometheus/middleware/collector'
@@ -13,6 +14,7 @@ require_relative 'database_metadata'
 require_relative 'mysql_types'
 require_relative 'sql_parser'
 require_relative 'sqlui'
+require_relative 'version'
 
 # SQLUI Sinatra server.
 class Server < Sinatra::Base
@@ -21,13 +23,14 @@ class Server < Sinatra::Base
   end
 
   def self.init_and_run(config, resources_dir)
+    logger.info("Starting SQLUI v#{Version::SQLUI}")
     logger.info("Airbrake enabled: #{config.airbrake[:server]&.[](:enabled) || false}")
     if config.airbrake[:server]&.[](:enabled)
       require 'airbrake'
       require 'airbrake/rack'
 
       Airbrake.configure do |c|
-        c.app_version = File.read('.version').strip
+        c.app_version = Version::SQLUI
         c.environment = config.environment
         c.logger.level = Logger::DEBUG if config.environment != :production?
         config.airbrake[:server].each do |key, value|
@@ -56,6 +59,10 @@ class Server < Sinatra::Base
     set :raise_errors,    false
     set :show_exceptions, false
 
+    favicon_hash = Digest::MD5.hexdigest(File.read(File.join(resources_dir, 'favicon.svg')))
+    css_hash = Digest::MD5.hexdigest(File.read(File.join(resources_dir, 'sqlui.css')))
+    js_hash = Digest::MD5.hexdigest(File.read(File.join(resources_dir, 'sqlui.js')))
+
     get '/-/health' do
       status 200
       body 'OK'
@@ -66,10 +73,12 @@ class Server < Sinatra::Base
     end
 
     get '/favicon.svg' do
+      headers 'Cache-Control' => 'max-age=31536000'
       send_file File.join(resources_dir, 'favicon.svg')
     end
 
     get "#{config.list_url_path}/?" do
+      headers 'Cache-Control' => 'no-cache'
       erb :databases, locals: { config: config }
     end
 
@@ -80,11 +89,13 @@ class Server < Sinatra::Base
 
       get "#{database.url_path}/sqlui.css" do
         headers 'Content-Type' => 'text/css; charset=utf-8'
+        headers 'Cache-Control' => 'max-age=31536000'
         send_file File.join(resources_dir, 'sqlui.css')
       end
 
       get "#{database.url_path}/sqlui.js" do
         headers 'Content-Type' => 'text/javascript; charset=utf-8'
+        headers 'Cache-Control' => 'max-age=31536000'
         send_file File.join(resources_dir, 'sqlui.js')
       end
 
@@ -183,6 +194,7 @@ class Server < Sinatra::Base
         sql = find_selected_query(sql, params[:selection])
 
         content_type 'application/csv; charset=utf-8'
+        headers 'Cache-Control' => 'no-cache'
         attachment 'result.csv'
         status 200
 
@@ -199,12 +211,16 @@ class Server < Sinatra::Base
 
       get(%r{#{Regexp.escape(database.url_path)}/(query|graph|structure|saved)}) do
         status 200
+        headers 'Cache-Control' => 'no-cache'
         client_config = config.airbrake[:client] || {}
         erb :sqlui, locals: {
           environment: config.environment.to_s,
           airbrake_enabled: client_config[:enabled] || false,
           airbrake_project_id: client_config[:project_id] || '',
-          airbrake_project_key: client_config[:project_key] || ''
+          airbrake_project_key: client_config[:project_key] || '',
+          js_hash: js_hash,
+          css_hash: css_hash,
+          favicon_hash: favicon_hash
         }
       end
     end

data/app/sqlui.rb

@@ -2,6 +2,7 @@
 
 require_relative 'sqlui_config'
 require_relative 'server'
+require_relative 'version'
 
 # Main entry point.
 class Sqlui
@@ -25,7 +26,7 @@ class Sqlui
 
   def self.from_command_line(args)
     if args.include?('-v') || args.include?('--version')
-      puts File.read('.version')
+      puts Version::SQLUI
       exit
     end
 

data/app/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class Version
+  SQLUI = File.read(File.expand_path(File.join(__dir__, '..', '.release-version'))).strip
+end

data/app/views/sqlui.erb

@@ -1,8 +1,9 @@
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>SQLUI</title>
-    <link rel="icon" type="image/x-icon" href="/favicon.svg">
+    <link rel="icon" type="image/x-icon" href="/favicon.svg?<%= favicon_hash %>">
     <!-- Initialize Airbrake before loading the main app JS so that we can catch errors as early as possible. -->
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@airbrake/browser"></script>
     <script type="text/javascript">
@@ -18,9 +19,9 @@
         window.airbrake?.notify(error)
       }
     </script>
-    <script type="text/javascript" src="sqlui.js"></script>
+    <script type="text/javascript" src="sqlui.js?<%= js_hash %>"></script>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-    <link rel="stylesheet" href="sqlui.css">
+    <link rel="stylesheet" href="sqlui.css?<%= css_hash %>">
   </head>
 
   <body>

data/client/resources/sqlui.css

@@ -1,4 +1,9 @@
+html {
+    height: 100%;
+}
+
 body {
+    height: 100%;
     margin: 0;
     overflow: hidden;
 }
@@ -245,8 +250,8 @@ p {
     display: flex;
     flex-direction: column;
 }
-#result-table tbody tr td{
-  height: calc(21px + 10px); // 21 for text, 10 for top and bottom padding of 5
+table tbody tr td {
+  height: 21px;
 }
 
 #result-table tbody tr td abbr a {
@@ -264,10 +269,7 @@ p {
     margin: 0 5px 0 0;
     text-decoration: none;
     position: relative;
-}
-
-#result-table tbody tr td abbr:last-child {
-    margin: 0;
+    bottom: 2px; /* To make the links look vertically centered. */
 }
 
 .fetch-sql-box {
@@ -281,41 +283,62 @@ p {
 
 table {
     font-family: monospace;
-    flex: 1;
     border-spacing: 0;
-    display: flex;
-    width: 100%;
     color: #333;
     font-size: 18px;
+    width: 100%;
+    table-layout: auto; /* Will be overridden if a column is resized. */
 }
 
 table td:last-child, table th:last-child {
-    width: 100%;
     border-right: none !important;
 }
 
 td, th {
-    padding: 5px 10px;
     font-weight: normal;
     white-space: nowrap;
     max-width: 500px;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 5px 10px;
     text-align: right;
 }
 
+#result-table tbody tr td .cell-content-wrapper {
+    display: flex;
+}
+
+#result-table tbody tr td .cell-value {
+    flex: 1;
+}
+
 th {
-    text-align: left;
     font-weight: bold;
     border-bottom: 1px solid #ddd;
     border-right: 1px solid #ddd;
 }
 
-table {
-    display: block;
+th div.col-content-wrapper {
+    display: flex;
+}
+
+th div.col-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    height: 21px;
+    text-align: left;
+    padding: 5px 10px;
+}
+
+th div.col-resizer {
+    width: 7px;
+    position: relative;
+    left: 5px; /* center over the right border */
+    cursor: col-resize;
 }
 
 thead {
@@ -325,7 +348,6 @@ thead {
     position: sticky;
     top: 0;
     z-index: 1;
-    table-layout: fixed;
 }
 
 .highlighted-row {

data/client/resources/sqlui.js

@@ -24182,27 +24182,152 @@
      return match ? match[1] : identifier
    }
 
-   function createTable (columns, rows, id, headerRenderer, cellRenderer) {
+   const drag = {
+     containerElement: null,
+     tableElement: null,
+     thElement: null,
+     colElement: null,
+     otherColWidths: null,
+     lastColElement: null
+   };
+
+   document.addEventListener('mousedown', (event) => {
+     if (event.target.classList.contains('col-resizer')) {
+       event.preventDefault();
+       const thElement = event.target.parentElement.parentElement;
+       if (thElement.tagName.toLowerCase() !== 'th') {
+         throw new Error(`expected th element, found: ${thElement}`)
+       }
+       const trElement = thElement.parentElement;
+       const theadElement = trElement.parentElement;
+       drag.tableElement = theadElement.parentElement;
+       drag.containerElement = drag.tableElement.parentElement;
+       drag.thElement = thElement;
+       drag.colElement = document.getElementById(event.target.dataset.colId);
+
+       const colElements = Array.from(drag.colElement.parentElement.childNodes);
+       drag.lastColElement = colElements[colElements.length - 1];
+       drag.otherColWidths = [];
+       for (let i = 0; i < colElements.length - 1; i++) {
+         if (colElements[i] !== drag.colElement) {
+           drag.otherColWidths.push(colElements[i].getBoundingClientRect().width);
+         }
+       }
+       colElements.forEach((element) => {
+         element.style.width = `${element.getBoundingClientRect().width}px`;
+       });
+       drag.tableElement.style.tableLayout = 'fixed';
+     }
+   });
+
+   document.addEventListener('mouseup', (event) => {
+     drag.containerElement = null;
+     drag.tableElement = null;
+     drag.thElement = null;
+     drag.colElement = null;
+     drag.otherColWidths = null;
+     drag.lastColElement = null;
+   });
+
+   document.addEventListener('mousemove', (event) => {
+     if (drag.colElement) {
+       const scrollOffset = drag.containerElement.scrollLeft;
+       const scrolled = scrollOffset > 0;
+       const containerOffset = drag.containerElement.offsetLeft;
+       const newColumnWidth = Math.max(0, scrollOffset + (event.clientX - containerOffset) - drag.thElement.offsetLeft);
+       if (newColumnWidth < drag.colElement.getBoundingClientRect().width && newColumnWidth < 30) return
+
+       drag.colElement.style.width = `${newColumnWidth}px`;
+       let runningWidth = newColumnWidth;
+       drag.otherColWidths.forEach((width) => {
+         runningWidth += width;
+       });
+       let remainingWidth;
+       if (scrolled) {
+         remainingWidth = (scrollOffset + drag.containerElement.getBoundingClientRect().width) - runningWidth;
+       } else {
+         remainingWidth = Math.max(10, drag.containerElement.getBoundingClientRect().width - runningWidth);
+       }
+       drag.lastColElement.style.width = `${remainingWidth}px`;
+       runningWidth += remainingWidth;
+       drag.tableElement.style.width = `${runningWidth}px`;
+     }
+   });
+
+   function createTable (containerElement, columns, rows, id, cellRenderer) {
+     if (!containerElement) throw new Error('missing table containerElement')
+     if (!columns) throw new Error('missing table columns')
+     if (!rows) throw new Error('missing table rows')
+     if (!id) throw new Error('missing table id')
+
      const tableElement = document.createElement('table');
      if (id) tableElement.id = id;
+
+     const colgroupElement = document.createElement('colgroup');
+     tableElement.appendChild(colgroupElement);
+
      const theadElement = document.createElement('thead');
-     const headerTrElement = document.createElement('tr');
-     const tbodyElement = document.createElement('tbody');
-     theadElement.appendChild(headerTrElement);
      tableElement.appendChild(theadElement);
+
+     const tbodyElement = document.createElement('tbody');
      tableElement.appendChild(tbodyElement);
 
-     columns.forEach(function (columnName) {
-       if (headerRenderer) {
-         headerRenderer(headerTrElement, columnName);
-       } else {
-         const headerElement = document.createElement('th');
-         headerElement.innerText = columnName;
-         headerTrElement.appendChild(headerElement);
-       }
+     const headerTrElement = document.createElement('tr');
+     theadElement.appendChild(headerTrElement);
+
+     const nonLastColElements = [];
+     columns.forEach(function (column, index) {
+       const headerElement = document.createElement('th');
+       headerTrElement.appendChild(headerElement);
+
+       const contentWrapperElement = document.createElement('div');
+       contentWrapperElement.classList.add('col-content-wrapper');
+       headerElement.appendChild(contentWrapperElement);
+
+       const nameElement = document.createElement('div');
+       nameElement.classList.add('col-name');
+       contentWrapperElement.appendChild(nameElement);
+
+       const colElement = document.createElement('col');
+       colElement.id = `${id}-col-${index}`;
+       colgroupElement.appendChild(colElement);
+       nonLastColElements.push(colElement);
+
+       const resizerElement = document.createElement('div');
+       resizerElement.classList.add('col-resizer');
+       resizerElement.dataset.colId = colElement.id;
+       contentWrapperElement.appendChild(resizerElement);
+
+       nameElement.innerText = column;
      });
      if (columns.length > 0) {
        headerTrElement.appendChild(document.createElement('th'));
+       const lastColElement = document.createElement('col');
+       lastColElement.style.width = '100%';
+       function resize () {
+         let runningWidth = 0;
+         const colElements = Array.from(tableElement.getElementsByTagName('col'));
+         nonLastColElements.forEach((element, index) => {
+           runningWidth += element.getBoundingClientRect().width;
+         });
+         const remainingWidth = Math.max(10, containerElement.getBoundingClientRect().width - runningWidth);
+         colElements[colElements.length - 1].style.width = `${remainingWidth}px`;
+         runningWidth += remainingWidth;
+         tableElement.style.width = `${runningWidth}px`;
+       }
+
+       const resizeObserver = new ResizeObserver(resize);
+       resizeObserver.observe(containerElement);
+
+       const mutationObserver = new MutationObserver((mutationList, observer) => {
+         if (!tableElement.parentElement) {
+           resizeObserver.unobserve(containerElement);
+           resizeObserver.unobserve(containerElement);
+           observer.disconnect();
+         }
+       });
+       mutationObserver.observe(containerElement, { childList: true });
+       colgroupElement.appendChild(lastColElement);
      }
      let highlight = false;
      rows.forEach(function (row) {
@@ -24212,9 +24337,9 @@
        }
        highlight = !highlight;
        tbodyElement.appendChild(rowElement);
-       row.forEach(function (value, i) {
+       row.forEach(function (value, index) {
          if (cellRenderer) {
-           cellRenderer(rowElement, columns[i], value);
+           cellRenderer(rowElement, index, value);
          } else {
            const cellElement = document.createElement('td');
            cellElement.innerText = value;
@@ -24223,7 +24348,7 @@
        });
        rowElement.appendChild(document.createElement('td'));
      });
-     return tableElement
+     containerElement.appendChild(tableElement);
    }
 
    /* global google */
@@ -24540,7 +24665,13 @@
            }
            rows.push(row);
          }
-         columnsElement.appendChild(createTable(columns, rows, null));
+         const cellRenderer = function (rowElement, _columnIndex, value) {
+           const cellElement = document.createElement('td');
+           cellElement.style.textAlign = (typeof value) === 'string' ? 'left' : 'right';
+           cellElement.innerText = value;
+           rowElement.appendChild(cellElement);
+         };
+         createTable(columnsElement, columns, rows, 'columns-table', cellRenderer);
        }
 
        const indexEntries = Object.entries(table.indexes);
@@ -24560,7 +24691,13 @@
              rows.push(row);
            }
          }
-         indexesElement.appendChild(createTable(columns, rows, null));
+         const cellRenderer = function (rowElement, _columnIndex, value) {
+           const cellElement = document.createElement('td');
+           cellElement.style.textAlign = (typeof value) === 'string' ? 'left' : 'right';
+           cellElement.innerText = value;
+           rowElement.appendChild(cellElement);
+         };
+         createTable(indexesElement, columns, rows, 'tables-table', cellRenderer);
        }
      });
      window.structureLoaded = true;
@@ -24970,35 +25107,37 @@
        return abbrElement
      };
 
-     const headerRenderer = function (rowElement, column) {
-       const headerElement = document.createElement('th');
-       headerElement.innerText = column;
-       if (window.metadata.columns[column]) {
-         headerElement.colSpan = 2;
-       }
-       rowElement.appendChild(headerElement);
-     };
+     const cellRenderer = function (rowElement, columnIndex, value) {
+       const column = fetch.result.columns[columnIndex];
+       const columnType = fetch.result.column_types[columnIndex];
 
-     const cellRenderer = function (rowElement, column, value) {
-       if (window.metadata.columns[column]?.links?.length > 0) {
-         const linksColumnElement = document.createElement('td');
-         if (value) {
-           window.metadata.columns[column].links.forEach((link) => {
-             linksColumnElement.appendChild(createLink(link, value));
-           });
-         }
-         rowElement.appendChild(linksColumnElement);
-         const textColumnElement = document.createElement('td');
-         textColumnElement.innerText = value;
-         rowElement.appendChild(textColumnElement);
+       if (value && window.metadata.columns[column]?.links?.length > 0) {
+         const linksElement = document.createElement('div');
+         window.metadata.columns[column].links.forEach((link) => {
+           linksElement.appendChild(createLink(link, value));
+         });
+
+         const textElement = document.createElement('div');
+         textElement.classList.add('cell-value');
+         textElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
+         textElement.innerText = value;
+
+         const wrapperElement = document.createElement('div');
+         wrapperElement.classList.add('cell-content-wrapper');
+         wrapperElement.appendChild(linksElement);
+         wrapperElement.appendChild(textElement);
+
+         const columnElement = document.createElement('td');
+         columnElement.appendChild(wrapperElement);
+         rowElement.appendChild(columnElement);
        } else {
          const cellElement = document.createElement('td');
+         cellElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
          cellElement.innerText = value;
          rowElement.appendChild(cellElement);
        }
      };
-     document.getElementById('result-box')
-       .appendChild(createTable(fetch.result.columns, fetch.result.rows, 'result-table', headerRenderer, cellRenderer));
+     createTable(document.getElementById('result-box'), fetch.result.columns, fetch.result.rows, 'result-table', cellRenderer);
    }
 
    function disableDownloadButtons () {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.52
+  version: 0.1.54
 platform: ruby
 authors:
 - Nick Dower
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-12-01 00:00:00.000000000 Z
+date: 2022-12-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: airbrake
@@ -157,7 +157,7 @@ executables:
 extensions: []
 extra_rdoc_files: []
 files:
-- ".version"
+- ".release-version"
 - app/args.rb
 - app/database_config.rb
 - app/database_metadata.rb
@@ -167,6 +167,7 @@ files:
 - app/sql_parser.rb
 - app/sqlui.rb
 - app/sqlui_config.rb
+- app/version.rb
 - app/views/databases.erb
 - app/views/error.erb
 - app/views/sqlui.erb

data/.version

@@ -1 +0,0 @@
-0.1.52