sqlui 0.1.65 → 0.1.67

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dccd56c50fbd55f848e0af58c735e04a2359f752d83bc5733011de736d88e47c
-  data.tar.gz: 2d1399f6aa1ac923101aad2d409c7488fec210107426ec2480475626fa57dbb2
+  metadata.gz: 7b91f535db1da5166bfebd7b9d9097db156b429aa283c6084e1f79bb348f56c4
+  data.tar.gz: bec7b344b15ee7730f88e77ad88910a8e316ac135aa9f66a4ea96aafecf763ac
 SHA512:
-  metadata.gz: a60671998954c01b16253548b4ed9217a931cd9fded5d0af3262c506950665993d0261d4b0e6ecb942acd970e98b2d166cf2a8ee4f2f1cb1917ce50ed3054c55
-  data.tar.gz: 22b4e49d4b7ab49298f80c2e11a6da30c418d49b4a9f212c5441cf3e43136bcf460f6b399916ebd4e607f6c4090e74d9038885eae2ad750f26c274ed153336fb
+  metadata.gz: e470fbc8f9ea18c9de08eb05ce67a491f6a0b42a9e0895033566f97953da3e630963f431192411af6471dc678979e45e67aa845fbde3b07093abc4c95c119e3d
+  data.tar.gz: bd4030d8b1e3095873b887c36dad1303b63aa1e020851ce5fa3336b8b5f055b6b33b20b21db28a203350c3cc7746cd1dc422a221a08412903a39b8d0f6a79afa

data/.release-version

@@ -1 +1 @@
-0.1.65
+0.1.67

data/app/database_metadata.rb

@@ -10,6 +10,7 @@ class DatabaseMetadata
     def lookup(client, database_config)
       result = load_columns(client, database_config)
       load_stats(result, client, database_config)
+      load_tables(result, client, database_config)
 
       result
     end
@@ -91,7 +92,7 @@ class DatabaseMetadata
           from information_schema.statistics
           #{where_clause}
           order by table_schema, table_name, if(index_name = "PRIMARY", 0, index_name), seq_in_index;
-      SQL
+        SQL
       )
       stats_result.each do |row|
         table_schema = row.shift
@@ -110,5 +111,81 @@ class DatabaseMetadata
         column[:column_name] = column_name
       end
     end
+
+    def load_tables(result, client, _database_config)
+      tables_result = client.query(
+        <<~SQL
+          SELECT
+            TABLE_SCHEMA,
+            TABLE_NAME,
+            CREATE_TIME,
+            UPDATE_TIME,
+            ENGINE,
+            TABLE_ROWS,
+            AVG_ROW_LENGTH,
+            DATA_LENGTH,
+            INDEX_LENGTH,
+            TABLE_COLLATION,
+            AUTO_INCREMENT
+          FROM information_schema.TABLES;
+        SQL
+      )
+      tables_hash = {}
+      tables_result.each do |row|
+        table_schema = row.shift
+        table_name = row.shift
+        tables_hash[table_schema] ||= {}
+        tables_hash[table_schema][table_name] = {
+          created_at: row.shift,
+          updated_at: row.shift,
+          engine: row.shift,
+          rows: add_thousands_separator(row.shift),
+          average_row_size: pretty_data_size(row.shift),
+          data_size: pretty_data_size(row.shift),
+          index_size: pretty_data_size(row.shift),
+          encoding: row.shift,
+          auto_increment: add_thousands_separator(row.shift)
+        }
+      end
+      result.each do |table_schema, schema_hash|
+        schema_hash[:tables].each do |table_name, table|
+          table[:info] = tables_hash[table_schema][table_name]
+        end
+      end
+    end
+
+    def pretty_data_size(size)
+      if size.nil?
+        return nil
+      elsif size < 1024
+        unit = "byte#{size == 1 ? '' : 's'}"
+        converted = size
+      elsif size < 1024 * 1024
+        unit = 'KiB'
+        converted = (size.to_f / 1024).round(2)
+      elsif size < 1024 * 1024 * 1024
+        unit = 'MiB'
+        converted = (size.to_f / (1024 * 1024)).round(2)
+      elsif size < 1024 * 1024 * 1024 * 1024
+        unit = 'GiB'
+        converted = (size.to_f / (1024 * 1024 * 1024)).round(2)
+      end
+
+      "#{add_thousands_separator(converted)} #{unit}"
+    end
+
+    def add_thousands_separator(value)
+      return nil if value.nil?
+
+      integer = value.round(1).floor
+      fractional = ((value.round(1) - integer) * 10).floor
+
+      with_commas = integer.to_s.reverse.scan(/.{1,3}/).join(',').reverse
+      if fractional.zero?
+        with_commas
+      else
+        "#{with_commas}.#{fractional}"
+      end
+    end
   end
 end

data/app/sql_parser.rb

@@ -40,10 +40,10 @@ class SqlParser
         multi_commented = true
       elsif multi_commented && char == '*' && scanner.peek(1) == '/'
         multi_commented = false
-      elsif multi_commented
+      elsif multi_commented || (single_commented && char != "\n")
         next
       elsif !single_quoted && !double_quoted && !escaped && !multi_commented &&
-            char == '-' && scanner.peek(1).match?(/-[ \n\t]/)
+            char == '-' && scanner.peek(2).match?(/-[ \n\t]/)
         current += scanner.getch
         single_commented = true
       elsif !single_quoted && !double_quoted && !escaped && !multi_commented && char == '#'
@@ -51,7 +51,7 @@ class SqlParser
       elsif single_commented && char == "\n"
         single_commented = false
       elsif single_commented
-        single_quoted = false if char == "\n"
+        single_commented = false if char == "\n"
       elsif char == '\\'
         escaped = true
       elsif char == "'"

data/app/views/databases.erb

@@ -11,18 +11,6 @@
           margin: 0;
       }
 
-      h1 {
-          font-size: 22px;
-      }
-
-      h2 {
-          font-size: 20px;
-      }
-
-      p {
-          font-size: 18px;
-      }
-
       .header-box {
           display: flex;
           flex-direction: row;
@@ -37,6 +25,12 @@
           align-items: center;
           justify-content: start;
           color: #333;
+          font-size: 22px;
+      }
+
+      .header {
+          font-weight: bold;
+          padding-left: 5px;
       }
 
       .server-name {
@@ -45,30 +39,28 @@
           font-weight: normal;
       }
 
-      .name-and-links {
+      .links {
           display: flex;
           flex-direction: row;
           align-items: center;
+          margin-top: 5px;
       }
 
-      .header {
-          font-weight: bold;
-          padding-left: 5px;
-      }
-
-      .database a {
-          margin-right: 5px;
+      .link {
+          margin-right: 10px;
           color: darkblue;
-          font-size: 16px;
+          font-size: 17px;
           text-decoration: none;
       }
 
-      .database h2 {
-          margin: 0 10px 0 0;
+      .name {
+          margin: 0 200px 0 0;
+          font-size: 20px;
       }
 
-      .database p {
-          margin: 10px 0 0;
+      .description {
+          margin: 20px 0 0;
+          font-size: 18px;
       }
 
       .database {
@@ -90,11 +82,11 @@
 </div>
 <% config.database_configs.each do |database_config| %>
   <div class="database">
-    <div class="name-and-links">
-      <h2 class='name'><%= database_config.display_name %></h2>
-      <a class='query-link' href="<%= "#{config.base_url_path}/#{database_config.url_path}/query" %>">query</a>
-      <a class='saved-link' href="<%= "#{config.base_url_path}/#{database_config.url_path}/saved" %>">saved</a>
-      <a class='structure-link' href="<%= "#{config.base_url_path}/#{database_config.url_path}/structure" %>">structure</a>
+    <h2 class='name'><%= database_config.display_name %></h2>
+    <div class="links">
+      <a class='link query-link' href="<%= "#{config.base_url_path}/#{database_config.url_path}/query" %>">query</a>
+      <a class='link saved-link' href="<%= "#{config.base_url_path}/#{database_config.url_path}/saved" %>">saved</a>
+      <a class='link structure-link' href="<%= "#{config.base_url_path}/#{database_config.url_path}/structure" %>">structure</a>
     </div>
     <p class='description'>
       <%= database_config.description %>

data/app/views/sqlui.erb

@@ -84,10 +84,16 @@
 
       <div id="structure-box" class="tab-content-element structure-element" style="display: none;">
         <div class="structure-wrapper">
-          <select id="schemas" size="4">
-          </select>
-          <select id="tables" size="4">
-          </select>
+          <div id="schemas-tables-and-stats">
+            <div id="schemas-and-tables">
+              <select id="schemas" size="4">
+              </select>
+              <select id="tables" size="4">
+              </select>
+            </div>
+            <div id="stats">
+            </div>
+          </div>
           <div id="table-info">
             <div id="columns">
             </div>

data/client/resources/sqlui.css

@@ -8,18 +8,6 @@ body {
     overflow: hidden;
 }
 
-h1 {
-    font-size: 22px;
-}
-
-h2 {
-    font-size: 20px;
-}
-
-p {
-    font-size: 18px;
-}
-
 #loading-box {
     font-family: monospace;
     display: flex;
@@ -48,6 +36,7 @@ p {
     align-items: center;
     justify-content: start;
     color: #333;
+    font-size: 22px;
 }
 
 #header {
@@ -126,6 +115,7 @@ p {
     cursor: row-resize;
     flex-direction: column;
     align-items: center;
+    padding-left: 220px; /* To center the resizer icon. Ok, it's a hack. Get over it. */
 }
 
 #cancel-button {
@@ -135,7 +125,7 @@ p {
     border: 1px solid #888;
     height: 32px;
     font-size: 18px;
-    margin: 0 220px 0 0; /* To center the resizer icon. Ok, it's a hack. Get over it. */
+    margin: 0;
 }
 
 #cancel-button-spacer {
@@ -258,6 +248,7 @@ p {
     display: flex;
     flex-direction: column;
 }
+
 table tbody tr td {
   height: 21px;
 }
@@ -384,16 +375,28 @@ thead {
     font-family: Helvetica, sans-serif;
 }
 
-#saved-box h2 {
-    font-weight: bold;
+.links {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 5px;
 }
 
-.saved-list-item:last-child {
-    border-top: none !important;
+.link {
+    margin-right: 10px;
+    color: darkblue;
+    font-size: 17px;
+    text-decoration: none;
 }
 
-#saved-box p {
-    margin: 0;
+.name {
+    margin: 0 200px 0 0;
+    font-size: 20px;
+}
+
+.description {
+    margin: 20px 0 0;
+    font-size: 18px;
 }
 
 .saved-list-item {
@@ -402,25 +405,8 @@ thead {
     padding: 10px;
 }
 
-.saved-list-item h2 {
-    margin: 0 10px 0 0;
-}
-
-.saved-list-item p {
-    margin: 10px 0 0;
-}
-
-.name-and-links {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.name-and-links a {
-    margin-right: 5px;
-    color: darkblue;
-    font-size: 16px;
-    text-decoration: none;
+.saved-list-item:last-child {
+    border-bottom: none;
 }
 
 .cm-editor.cm-focused {
@@ -435,10 +421,49 @@ thead {
     height: 100%;
 }
 
+#schemas-and-tables {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+}
+
+#schemas-tables-and-stats {
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid #ddd;
+    min-width: 400px;
+}
+
+#stats {
+    border-top: 1px solid #ddd;
+    padding: 5px 0;
+}
+
+#stats table {
+    width: 100%;
+}
+
+#stats table td {
+    padding: 2px 5px;
+    font-size: 18px;
+    color: #333;
+}
+
+table td:nth-child(1) {
+    text-align: left;
+    font-family: Helvetica, sans-serif;
+}
+
+table td:nth-child(2) {
+    text-align: right;
+    font-family: monospace;
+}
+
 #schemas, #tables {
     border: none;
     display: flex;
-    min-width: 200px;
+    flex: 1;
+    padding: 5px
 }
 
 #table-info {

data/client/resources/sqlui.js

@@ -21908,6 +21908,7 @@
    }
 
    function copyTextToClipboard (text) {
+     if (text === null) text = '';
      const type = 'text/plain';
      const blob = new Blob([text], { type });
      navigator.clipboard.write([new window.ClipboardItem({ [type]: blob })]);
@@ -24744,9 +24745,17 @@
      popupElement.appendChild(contentElement);
 
      let renderedText = text;
-     if (typeof text === 'string' && text.match(/^\s*(?:\{.*\}|\[.*\])\s*$/)) {
+     let clipboardText = text;
+     let formatted = false;
+     if (text === null) {
+       renderedText = 'null';
+       contentElement.style.color = '#888';
+       clipboardText = '';
+     } else if (typeof text === 'string' && text.match(/^\s*(?:\{.*\}|\[.*\])\s*$/)) {
        try {
          renderedText = JSON.stringify(JSON.parse(text), null, 2);
+         clipboardText = renderedText;
+         formatted = renderedText !== text;
        } catch (_) { }
      }
      contentElement.innerText = renderedText;
@@ -24762,11 +24771,11 @@
      buttonBarElement.appendChild(copyElement);
 
      copyElement.addEventListener('click', (event) => {
-       copyTextToClipboard(renderedText);
+       copyTextToClipboard(clipboardText);
        toast('Text copied to clipboard.');
      });
 
-     if (renderedText !== text) {
+     if (formatted) {
        const copyOriginalElement = document.createElement('input');
        copyOriginalElement.classList.add(styles$1.button);
        copyOriginalElement.type = 'button';
@@ -25118,6 +25127,23 @@
      }
    }
 
+   function statsHtml (info) {
+     const hidden = info == null;
+     info ||= {};
+     return `
+      <table ${hidden ? 'style="visibility: hidden;"' : ''}>
+        <tr><td>created:</td><td>${valueOrNullHtml(info.created_at)}</td></tr>
+        <tr><td>updated:</td><td>${valueOrNullHtml(info.updated_at)}</td></tr>
+        <tr><td>data size:</td><td>${valueOrNullHtml(info.data_size)}</td></tr>
+        <tr><td>index size:</td><td>${valueOrNullHtml(info.index_size)}</td></tr>
+        <tr><td>rows:</td><td>${valueOrNullHtml(info.rows)}</td></tr>
+        <tr><td>row size:</td><td>${valueOrNullHtml(info.average_row_size)}</td></tr>
+        <tr><td>encoding:</td><td>${valueOrNullHtml(info.encoding)}</td></tr>
+        <tr><td>auto increment:</td><td>${valueOrNullHtml(info.auto_increment)}</td></tr>
+      </table>
+    `
+   }
+
    function selectStructureTab () {
      Array.prototype.forEach.call(document.getElementsByClassName('structure-element'), function (selected) {
        selected.style.display = 'flex';
@@ -25129,6 +25155,9 @@
 
      const schemasElement = document.getElementById('schemas');
      const tablesElement = document.getElementById('tables');
+     const statsElement = document.getElementById('stats');
+     statsElement.innerHTML = statsHtml(null);
+
      const columnsElement = document.getElementById('columns');
      const indexesElement = document.getElementById('indexes');
 
@@ -25157,6 +25186,10 @@
          schemasElement.appendChild(optionElement);
        });
        schemasElement.addEventListener('change', function () {
+         while (statsElement.firstChild) {
+           statsElement.removeChild(statsElement.firstChild);
+         }
+         statsElement.innerHTML = statsHtml(null);
          while (tablesElement.firstChild) {
            tablesElement.removeChild(tablesElement.firstChild);
          }
@@ -25178,6 +25211,9 @@
        });
      }
      tablesElement.addEventListener('change', function () {
+       while (statsElement.firstChild) {
+         statsElement.removeChild(statsElement.firstChild);
+       }
        while (columnsElement.firstChild) {
          columnsElement.removeChild(columnsElement.firstChild);
        }
@@ -25187,7 +25223,9 @@
        const schemaName = schemaNames.length === 1 ? schemaNames[0] : schemasElement.value;
        const tableName = tablesElement.value;
        const table = window.metadata.schemas[schemaName].tables[tableName];
+       const info = table.info;
 
+       statsElement.innerHTML = statsHtml(info);
        const columnEntries = Object.entries(table.columns);
        if (columnEntries.length > 0) {
          const columns = Object.keys(columnEntries[0][1]);
@@ -25275,7 +25313,7 @@
        viewUrl.searchParams.set('file', file.filename);
 
        const viewLinkElement = document.createElement('a');
-       viewLinkElement.classList.add('view-link');
+       viewLinkElement.classList.add('link', 'view-link');
        viewLinkElement.innerText = 'view';
        viewLinkElement.href = viewUrl.pathname + viewUrl.search;
        addEventListener(viewLinkElement, 'click', (event) => {
@@ -25289,7 +25327,7 @@
        runUrl.searchParams.set('run', 'true');
 
        const runLinkElement = document.createElement('a');
-       runLinkElement.classList.add('run-link');
+       runLinkElement.classList.add('link', 'run-link');
        runLinkElement.innerText = 'run';
        runLinkElement.href = runUrl.pathname + runUrl.search;
        addEventListener(runLinkElement, 'click', (event) => {
@@ -25300,25 +25338,31 @@
 
        const nameElement = document.createElement('h2');
        nameElement.innerText = file.filename;
+       nameElement.classList.add('name');
 
-       const nameAndLinksElement = document.createElement('div');
-       nameAndLinksElement.classList.add('name-and-links');
-       nameAndLinksElement.appendChild(nameElement);
-       nameAndLinksElement.appendChild(viewLinkElement);
-       nameAndLinksElement.appendChild(runLinkElement);
+       const linksElement = document.createElement('div');
+       linksElement.classList.add('links');
+       linksElement.appendChild(viewLinkElement);
+       linksElement.appendChild(runLinkElement);
 
        const descriptionElement = document.createElement('p');
        descriptionElement.innerText = file.description;
+       descriptionElement.classList.add('description');
 
        const divElement = document.createElement('div');
        divElement.classList.add('saved-list-item');
-       divElement.appendChild(nameAndLinksElement);
+       divElement.appendChild(nameElement);
+       divElement.appendChild(linksElement);
        divElement.appendChild(descriptionElement);
 
        savedElement.appendChild(divElement);
      });
    }
 
+   function valueOrNullHtml (value) {
+     return value == null ? '<span style="color: #888">null</span>' : value
+   }
+
    function submitAll (target, event) {
      submit(target, event);
    }
@@ -25651,6 +25695,9 @@
        return wrapperElement
      } else {
        cellElement.style.textAlign = columnType === 'string' ? 'left' : 'right';
+       if (value === null) {
+         cellElement.style.color = '#888';
+       }
        return document.createTextNode(value)
      }
    };
@@ -25961,6 +26008,12 @@
      }
    });
 
+   document.addEventListener('keydown', (event) => {
+     if (event.code === 'Escape') {
+       focus();
+     }
+   });
+
    window.onload = function () {
      Promise.all([
        google.charts.load('current', { packages: ['corechart', 'line'] }),

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sqlui
 version: !ruby/object:Gem::Version
-  version: 0.1.65
+  version: 0.1.67
 platform: ruby
 authors:
 - Nick Dower
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-02-08 00:00:00.000000000 Z
+date: 2023-02-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: airbrake