sqlui 0.1.66 → 0.1.68

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b3cb90804665afcc2bfbefe7729bc1c80e62db6848770ad4537cfac031aad1f
-  data.tar.gz: 6fed2c90062a097f9ece30edc28dfcf0e32b72322bf7a94ebe40cdeaa22ad9d7
+  metadata.gz: 6a167a65032b5a64b37d6e25c6589669151951d75f3964be73d2f8e6ba9f0833
+  data.tar.gz: 0a25e8597d5955c1bd6c04cf31834d8666672662a49a646ee03a3d55d1e268bf
 SHA512:
-  metadata.gz: 65bcb424d283e50825d1352889f61e02d2439281e01af02a63c980df5ca94f433569b13f6d7ea69b906f1647d452313ac96a2ae509af29009fa43d35a3864d6e
-  data.tar.gz: b3663fe92817d2cbb195f758bea14a744081dbd56c415cd83a449f9fca70d04b9ffe8900d7a28970a6262641b3daf56f33fd9730003f4e1adc845ab801de3242
+  metadata.gz: 95d82ede6b694eef5cab00c48aae318dbf9e55ee0a20a1f41a40abc8013a4ea245cf0b530160da10e620e572e60ac1e696bb360d4fd2037a870b2ecf250e1ac4
+  data.tar.gz: d1b720a016ab0ed8716164aefc45b2a9db9c0aac876eda2f9210fda6184d739b6b7b3efd50a01e2d11bcf299906522a17994ffa90ea124c72ac1ca38dd536201

data/.release-version

@@ -1 +1 @@
-0.1.66
+0.1.68

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/server.rb

@@ -255,7 +255,7 @@ class Server < Sinatra::Base
         end
       end
 
-      get(/#{Regexp.escape("#{config.base_url_path}/#{database.url_path}/")}(query|graph|structure|saved)/) do
+      get(/#{Regexp.escape("#{config.base_url_path}/#{database.url_path}/")}(query|graph|saved|structure|help)/) do
         status 200
         headers 'Cache-Control' => 'no-cache'
         client_config = config.airbrake[:client] || {}

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

@@ -22,6 +22,7 @@
     <script type="text/javascript" src="<%= resource_path_map['sqlui.js'] %>"></script>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <link rel="stylesheet" href="<%= resource_path_map['sqlui.css'] %>">
+    <link rel="stylesheet" href="<%= resource_path_map['help.css'] %>">
   </head>
 
   <body>
@@ -36,6 +37,7 @@
         <a id="graph-tab-button" class="tab-button">Graph</a>
         <a id="saved-tab-button" class="tab-button">Saved</a>
         <a id="structure-tab-button" class="tab-button">Structure</a>
+        <a id="help-tab-button" class="tab-button">Help</a>
       </div>
 
       <div id="query-box" class="tab-content-element graph-element query-element" style="display: none;">
@@ -84,10 +86,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>
@@ -97,6 +105,77 @@
         </div>
       </div>
 
+      <div id="help-box" class="tab-content-element" style="display: none;">
+        <h2>Keyboard Shortcuts</h2>
+        <table id="keyboard-shortcuts">
+          <tbody>
+            <tr class="keyboard-shortcut-section"><td colspan="3">App Shortcuts</td></tr>
+            <tr class="keyboard-shortcut-header"><td> Mac</td><td>Windows</td><td>Action</td></tr>
+            <tr><td>Escape</td><td>Escape</td><td>Focus editor, Close popup</td></tr>
+
+            <tr class="keyboard-shortcut-section"><td colspan="3">Editor Submit Shortcuts</td></tr>
+            <tr class="keyboard-shortcut-header"><td> Mac</td><td>Windows</td><td>Action</td></tr>
+            <tr><td>Cmd+Enter</td><td>Ctrl+Enter</td><td>Execute query at cursor / selection</td></tr>
+            <tr><td>Cmd+Shift+Enter</td><td>Ctrl+Shift+Enter</td><td>Execute entire editor</td></tr>
+
+            <tr class="keyboard-shortcut-section"><td colspan="3">Editor Standard Shortcuts</td></tr>
+            <tr class="keyboard-shortcut-header"><td> Mac</td><td>Windows</td><td>Action</td></tr>
+            <tr><td>ArrowLeft</td><td>ArrowLeft</td><td>Move cursor left one character</td></tr>
+            <tr><td>ArrowRight</td><td>ArrowRight</td><td>Move cursor right one character</td></tr>
+            <tr><td>Alt+ArrowLeft</td><td>Ctrl+ArrowLeft</td><td>Move cursor one group left</td></tr>
+            <tr><td>Alt+ArrowRight</td><td>Ctrl+ArrowRight</td><td>Move cursor one group right</td></tr>
+            <tr><td>Cmd+ArrowLeft</td><td></td><td>Move cursor to start of line</td></tr>
+            <tr><td>Cmd+ArrowRight</td><td></td><td>Move cursor to end of line</td></tr>
+            <tr><td>ArrowUp</td><td>ArrowUp</td><td>Move cursor up one line</td></tr>
+            <tr><td>ArrowDown</td><td>ArrowDown</td><td>Move cursor down one line</td></tr>
+            <tr><td>Cmd+ArrowUp</td><td></td><td>Move cursor to start of document</td></tr>
+            <tr><td>Cmd+ArrowDown</td><td></td><td>Move cursor to end of document</td></tr>
+            <tr><td>Cmd+End</td><td>Ctrl+End</td><td>Move cursor to start of document</td></tr>
+            <tr><td>Cmd+Home</td><td>Ctrl+Home</td><td>Move cursor to end of document</td></tr>
+            <tr><td>PageUp</td><td>PageUp</td><td>Move cursor one page up</td></tr>
+            <tr><td>PageDown</td><td>PageDown</td><td>Move cursor one page down</td></tr>
+            <tr><td>Home</td><td>Home</td><td>Move cursor to previous line boundary</td></tr>
+            <tr><td>End</td><td>End</td><td>Move cursor to next line boundary</td></tr>
+            <tr><td>Enter</td><td>Enter</td><td>Insert new line and indent</td></tr>
+            <tr><td>Cmd+a</td><td>Ctrl+a</td><td>Select all</td></tr>
+            <tr><td>Backspace</td><td>Backspace</td><td>Delete previous character</td></tr>
+            <tr><td>Delete</td><td>Delete</td><td>Delete next character</td></tr>
+            <tr><td>Alt+Backspace</td><td>Ctrl+Backspace</td><td>Delete previous group</td></tr>
+            <tr><td>Alt+Delete</td><td>Ctrl+Delete</td><td>Delete next group</td></tr>
+            <tr><td>Cmd+Backspace</td><td></td><td>Delete to start of line</td></tr>
+            <tr><td>Cmd+Delete</td><td></td><td>Delete to end of line</td></tr>
+
+            <tr class="keyboard-shortcut-section"><td colspan="3">Editor Default Shortcuts</td></tr>
+            <tr class="keyboard-shortcut-header"><td> Mac</td><td>Windows</td><td>Action</td></tr>
+            <tr><td>Alt+ArrowUp</td><td>Alt+ArrowUp</td><td>Move line up</td></tr>
+            <tr><td>Alt+ArrowDown</td><td>Alt+ArrowDown</td><td>Move line down</td></tr>
+            <tr><td>Shift+Alt+ArrowUp</td><td>Shift+Alt+ArrowUp</td><td>Copy line up</td></tr>
+            <tr><td>Shift+Alt+ArrowDown</td><td>Shift+Alt+ArrowDown</td><td>Copy line down</td></tr>
+            <tr><td>Escape</td><td>Escape</td><td>Simplify selection</td></tr>
+            <tr><td>Shift+Enter</td><td>Shift+Enter</td><td>Insert blank line</td></tr>
+            <tr><td>Ctrl+l</td><td>Alt+l</td><td>Select line</td></tr>
+            <tr><td>Cmd+i</td><td>Ctrl+i</td><td>Expand current selection</td></tr>
+            <tr><td>Cmd+[</td><td>Ctrl+[</td><td>Decrease indent</td></tr>
+            <tr><td>Cmd+]</td><td>Ctrl+]</td><td>Increase indent</td></tr>
+            <tr><td>Cmd+Alt+\</td><td>Ctrl+Alt+\</td><td>Indent selection</td></tr>
+            <tr><td>Shift+Cmd+k</td><td>Shift+Ctrl+k</td><td>Delete line</td></tr>
+            <tr><td>Shift+Cmd+\</td><td>Shift+Ctrl+\</td><td>cursorMatchingBracket</td></tr>
+            <tr><td>Cmd+/</td><td>Ctrl+/</td><td>Toggle comment</td></tr>
+            <tr><td>Shift+Alt+a</td><td>Shift+Alt+a</td><td>Toggle comment</td></tr>
+
+            <tr class="keyboard-shortcut-section"><td colspan="3">Editor Completion Shortcuts</td></tr>
+            <tr class="keyboard-shortcut-header"><td> Mac</td><td>Windows</td><td>Action</td></tr>
+            <tr><td>Ctrl+Space</td><td>Ctrl+Space</td><td>Start completion</td></tr>
+            <tr><td>Escape</td><td>Escape</td><td>Close completion</td></tr>
+            <tr><td>ArrowUp</td><td>ArrowUp</td><td>Move selection up</td></tr>
+            <tr><td>ArrowDown</td><td>ArrowDown</td><td>Move selection down</td></tr>
+            <tr><td>PageUp</td><td>PageUp</td><td>Move selection page up</td></tr>
+            <tr><td>PageDown</td><td>PageDown</td><td>Move selection page down</td></tr>
+            <tr><td>Enter</td><td>Enter</td><td>Accept completion</td></tr>
+          </tbody>
+        </table>
+      </div>
+
       <div id="status-box">
         <div id="status-message"></div>
         <div style="flex: 1;"></div>

data/client/resources/help.css

@@ -0,0 +1,30 @@
+#help-box h2 {
+    font-size: 22px;
+    margin: 10px 0 20px 0;
+}
+#help-box table#keyboard-shortcuts {
+    border-collapse: collapse;
+}
+
+#help-box table#keyboard-shortcuts tr.keyboard-shortcut-header {
+    font-weight: bold;
+    background: #efefef;
+}
+
+#help-box table#keyboard-shortcuts td, #help-box table#keyboard-shortcuts tr.keyboard-shortcut-header {
+    text-align: left;
+    border: 1px solid #ddd;
+    padding: 10px;
+    font-size: 14px;
+}
+
+#help-box table#keyboard-shortcuts .keyboard-shortcut-section td {
+    border: none;
+    font-weight: bold;
+    padding: 20px 5px 5px 0;
+    font-size: 16px;
+}
+
+#help-box table#keyboard-shortcuts tr.keyboard-shortcut-section:first-child td {
+    padding-top: 0;
+}

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 {
@@ -252,17 +242,18 @@ p {
     text-overflow: ellipsis;
 }
 
-#result-box, #fetch-sql-box, #saved-box, #graph-box, #structure-box {
+#result-box, #fetch-sql-box, #graph-box, #saved-box, #structure-box, #help-box {
     flex: 1;
     overflow: auto;
     display: flex;
     flex-direction: column;
 }
-table tbody tr td {
+
+.resize-table tbody tr td {
   height: 21px;
 }
 
-#result-table tbody tr td abbr a {
+.resize-table tbody tr td abbr a {
     color: #555;
     cursor: pointer;
     text-decoration: none;
@@ -274,7 +265,7 @@ table tbody tr td {
     user-select: none;
 }
 
-#result-table tbody tr td abbr {
+.resize-table tbody tr td abbr {
     margin: 0 5px 0 0;
     text-decoration: none;
     position: relative;
@@ -290,53 +281,50 @@ table tbody tr td {
     padding: 20px;
 }
 
-table {
+.resize-table {
     font-family: monospace;
     border-spacing: 0;
     color: #333;
     font-size: 18px;
 }
 
-table td:last-child, table th:last-child {
+.resize-table td:last-child, .resize-table th:last-child {
     border-right: none !important;
+    max-width: none;
 }
 
-td, th {
+.resize-table td, .resize-table th {
     font-weight: normal;
     white-space: nowrap;
     max-width: 500px;
 }
 
-td:last-child, th:last-child {
-    max-width: none;
-}
-
-td {
+.resize-table td {
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 5px 10px;
     text-align: right;
 }
 
-#result-table tbody tr td .cell-content-wrapper {
+.resize-table tbody tr td .cell-content-wrapper {
     display: flex;
 }
 
-#result-table tbody tr td .cell-value {
+.resize-table tbody tr td .cell-value {
     flex: 1;
 }
 
-th {
+.resize-table th {
     font-weight: bold;
     border-bottom: 1px solid #ddd;
     border-right: 1px solid #ddd;
 }
 
-th div.col-content-wrapper {
+.resize-table th div.col-content-wrapper {
     display: flex;
 }
 
-th div.col-name {
+.resize-table th div.col-name {
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1;
@@ -345,14 +333,14 @@ th div.col-name {
     padding: 5px 10px;
 }
 
-th div.col-resizer {
+.resize-table th div.col-resizer {
     width: 7px;
     position: relative;
     left: 5px; /* center over the right border */
     cursor: col-resize;
 }
 
-thead {
+.resize-table thead {
     padding: 0;
     background-color: #fff;
     position: -webkit-sticky;
@@ -384,16 +372,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 +402,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 +418,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;
+}
+
+#stats table td:nth-child(1) {
+    text-align: left;
+    font-family: Helvetica, sans-serif;
+}
+
+#stats 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 {
@@ -531,3 +553,9 @@ select {
 .jump-button {
     font-size: 12px;
 }
+
+#help-box {
+    font-family: Helvetica, sans-serif;
+    padding: 10px;
+    width: 100%;
+}