sqlui 0.1.58 → 0.1.60

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e0a7dab933454e7e153894eb7e0317680dd1f4aa88953480b31d94a825f95f10
-  data.tar.gz: 6cf9998337f955912eb5a050dfd024bee292afef191a2ee639cda5552e86490c
+  metadata.gz: 45285cfe6706fdfa5bae7abf73f1a287e0238709f2f83a18eda8386c71f4de63
+  data.tar.gz: 9d3eacf4a4306697c4c34d91b51303dd88b376bec29526124d18ec5c4fbe43d7
 SHA512:
-  metadata.gz: f0da91f85d1880eec8ef7d99e5858c49f61334dbabf7d8286b226f34ff9984d5faf30eb4c1be59ea810c4f45e7a148782eadd5d0fb4c488c96403d96d6257b84
-  data.tar.gz: b1da77e8601b4a7c48bedadcb6e513ef7729893eaad9e30232d1dadb1d600d5ad6f127c28726eb009bbc6abc274369b1fe99d611dc69dae3d353db00c3ea4f59
+  metadata.gz: f94e45bf232683013994f63a46eb18257aeaf9d81dd906ccffdbdced023be1743ebca28ff87f34a3b45932757b80516fae979d74a9ab1002affa78a7adb412dc
+  data.tar.gz: 4151e2f3f7d795931abfee848f040e9b6066c4ef4ec9503d0f3cdb586e82d3ced59f50c3eb8744c2adc2847324d275d642e313c0ba825768e452e7a0f8af7b75

data/.release-version

@@ -1 +1 @@
-0.1.58
+0.1.60

data/app/server.rb

@@ -143,31 +143,60 @@ class Server < Sinatra::Base
         status 200
         headers 'Content-Type' => 'application/json; charset=utf-8'
 
-        database.with_client do |client|
-          query_result = execute_query(client, variables, queries)
-          stream do |out|
+        stream do |out|
+          database.with_client do |client|
+            begin
+              query_result = execute_query(client, variables, queries)
+            rescue Mysql2::Error => e
+              stacktrace = e.full_message(highlight: false)
+              message = "ERROR #{e.error_number} (#{e.sql_state}): #{e.message.lines.first&.strip || 'unknown error'}"
+              out << { error: message, stacktrace: stacktrace }.compact.to_json
+              break
+            rescue StandardError => e
+              stacktrace = e.full_message(highlight: false)
+              message = e.message.lines.first&.strip || 'unknown error'
+              out << { error: message, stacktrace: stacktrace }.compact.to_json
+              break
+            end
+
             if query_result
               json = <<~RES.chomp
                 {
                   "columns": #{query_result.fields.to_json},
                   "column_types": #{MysqlTypes.map_to_google_charts_types(query_result.field_types).to_json},
-                  "total_rows": #{query_result.size.to_json},
                   "selection": #{params[:selection].to_json},
                   "query": #{params[:sql].to_json},
                   "rows": [
               RES
               out << json
-              bytes = json.bytesize
+              bytes_written = json.bytesize
+              max_rows_written = false
+              rows_written = 0
+              total_rows = 0
               query_result.each_with_index do |row, i|
+                total_rows += 1
+                next if max_rows_written
+
                 json = "#{i.zero? ? '' : ','}\n    #{row.map { |v| big_decimal_to_float(v) }.to_json}"
-                bytes += json.bytesize
-                break if i == Sqlui::MAX_ROWS || bytes > Sqlui::MAX_BYTES
+                bytesize = json.bytesize
+                if bytes_written + bytesize > Sqlui::MAX_BYTES
+                  max_rows_written = true
+                  next
+                end
 
                 out << json
+                bytes_written += bytesize
+                rows_written += 1
+
+                if rows_written == Sqlui::MAX_ROWS
+                  max_rows_written = true
+                  next
+                end
               end
               out << <<~RES
 
-                  ]
+                  ],
+                  "total_rows": #{total_rows}
                 }
               RES
             else
@@ -198,9 +227,21 @@ class Server < Sinatra::Base
         attachment 'result.csv'
         status 200
 
-        database.with_client do |client|
-          query_result = execute_query(client, variables, queries)
-          stream do |out|
+        stream do |out|
+          database.with_client do |client|
+            begin
+              query_result = execute_query(client, variables, queries)
+            rescue Mysql2::Error => e
+              stacktrace = e.full_message(highlight: false)
+              message = "ERROR #{e.error_number} (#{e.sql_state}): #{e.message.lines.first&.strip || 'unknown error'}"
+              out << { error: message, stacktrace: stacktrace }.compact.to_json
+              break
+            rescue StandardError => e
+              stacktrace = e.full_message(highlight: false)
+              message = e.message.lines.first&.strip || 'unknown error'
+              out << { error: message, stacktrace: stacktrace }.compact.to_json
+              break
+            end
             out << CSV::Row.new(query_result.fields, query_result.fields, header_row: true).to_s.strip
             query_result.each do |row|
               out << "\n#{CSV::Row.new(query_result.fields, row.map { |v| big_decimal_to_float(v) }).to_s.strip}"
@@ -230,7 +271,7 @@ class Server < Sinatra::Base
       stacktrace = exception&.full_message(highlight: false)
       if request.env['HTTP_ACCEPT'] == 'application/json'
         headers 'Content-Type' => 'application/json; charset=utf-8'
-        message = exception&.message&.lines&.first&.strip || 'unexpected error'
+        message = "error: #{exception&.message&.lines&.first&.strip || 'unexpected error'}"
         json = { error: message, stacktrace: stacktrace }.compact.to_json
         body json
       else
@@ -274,7 +315,10 @@ class Server < Sinatra::Base
     variables.each do |name, value|
       client.query("SET @#{name} = #{value};")
     end
-    queries.map { |current| client.query(current) }.last
+    queries[0..-2].map do |current|
+      client.query(current, stream: true)&.free
+    end
+    client.query(queries[-1], stream: true)
   end
 
   def big_decimal_to_float(maybe_big_decimal)

data/app/sqlui.rb

@@ -6,7 +6,7 @@ require_relative 'version'
 
 # Main entry point.
 class Sqlui
-  MAX_ROWS = 50_000
+  MAX_ROWS = 100_000
   MAX_BYTES = 10 * 1_024 * 1_024 # 10 MB
 
   def initialize(config_file)

data/app/views/sqlui.erb

@@ -25,24 +25,24 @@
   </head>
 
   <body>
-    <div id="loading-box" class="loading-box">
+    <div id="loading-box">
     </div>
 
-    <div id="main-box" class="main-box" style="display:none">
-      <div class="tabs-box">
-        <h1 class="header"><a id="header-link">SQLUI</a></h1>
-        <h1 id="server-name" class="server-name"></h1>
+    <div id="main-box" style="display:none">
+      <div id="tabs-box">
+        <h1 id="header"><a id="header-link">SQLUI</a></h1>
+        <h1 id="server-name"></h1>
         <a id="query-tab-button" class="tab-button">Query</a>
         <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>
       </div>
 
-      <div id="query-box" class="query-box tab-content-element graph-element query-element" style="display: none;">
+      <div id="query-box" class="tab-content-element graph-element query-element" style="display: none;">
         <div id="query" class="query"></div>
       </div>
 
-      <div id="submit-box" class="submit-box tab-content-element graph-element query-element" style="display: none;">
+      <div id="submit-box" class="tab-content-element graph-element query-element" style="display: none;">
         <input id="cancel-button" class="cancel-button" type="button" value="cancel"></input>
         <div class="submit-fill"></div>
         <div style="position: relative;">
@@ -66,44 +66,50 @@
         </div>
       </div>
 
-      <div id="result-box" class="result-box tab-content-element query-element" style="display: none;">
+      <div id="result-box" class="tab-content-element query-element" style="display: none;">
       </div>
 
-      <div id="graph-box" class="graph-box tab-content-element graph-element" style="display: none;">
+      <div id="graph-box" class="tab-content-element graph-element" style="display: none;">
       </div>
 
-      <div id="fetch-sql-box" class="fetch-sql-box tab-content-element graph-element query-element" style="display: none;">
+      <div id="fetch-sql-box" class="tab-content-element graph-element query-element" style="display: none;">
         <div id="result-loader" class="loader"></div>
         <p id="result-time" class="result-time"></p>
       </div>
 
-      <div id="saved-box" class="saved-box tab-content-element saved-element" style="display: none;">
+      <div id="saved-box" class="tab-content-element saved-element" style="display: none;">
       </div>
 
-      <div id="structure-box" class="structure-box tab-content-element structure-element" style="display: none;">
+      <div id="structure-box" class="tab-content-element structure-element" style="display: none;">
         <div class="structure-wrapper">
-          <select id="schemas" class="schemas" size="4">
+          <select id="schemas" size="4">
           </select>
-          <select id="tables" class="tables" size="4">
+          <select id="tables" size="4">
           </select>
-          <div id="table-info" class="table-info">
-            <div id="columns" class="columns">
+          <div id="table-info">
+            <div id="columns">
             </div>
-            <div id="indexes" class="indexes">
+            <div id="indexes">
             </div>
           </div>
         </div>
       </div>
 
-      <div id="status-box" class="status-box">
+      <div id="status-box">
         <div id="status-message"></div>
         <div style="flex: 1;"></div>
         <div id="pagination-box" class="tab-content-element">
           <div id="page-count-box"></div>
-          <input id="first-button" class="pagination-button" type="button" value="First" />
-          <input id="prev-button" class="pagination-button" type="button" value="Prev" />
-          <input id="next-button" class="pagination-button" type="button" value="Next" />
-          <input id="last-button" class="pagination-button" type="button" value="Last" />
+          <input id="first-button" class="pagination-button" type="button" value="&laquo;" />
+          <input id="jb5-button" class="pagination-button jump-button" type="button" value="50" data-jump="-50" data-min="100" />
+          <input id="jb10-button" class="pagination-button jump-button" type="button" value="10" data-jump="-10" data-min="25"/>
+          <input id="jb50-button" class="pagination-button jump-button" type="button" value="5"  data-jump="-5"  data-min="10" data-max="24"/>
+          <input id="prev-button" class="pagination-button" type="button" value="&lsaquo;" />
+          <input id="next-button" class="pagination-button" type="button" value="&rsaquo;" />
+          <input id="jf5-button" class="pagination-button jump-button" type="button"  value="5"  data-jump="5"   data-min="10" data-max="24"/>
+          <input id="jf10-button" class="pagination-button jump-button" type="button" value="10" data-jump="10"  data-min="25"/>
+          <input id="jf50-button" class="pagination-button jump-button" type="button" value="50" data-jump="50"  data-min="100"/>
+          <input id="last-button" class="pagination-button" type="button" value="&raquo;" />
         </div>
       </div>
     </div>

data/client/resources/sqlui.css

@@ -20,7 +20,7 @@ p {
     font-size: 18px;
 }
 
-.loading-box {
+#loading-box {
     font-family: monospace;
     display: flex;
     flex-direction: column;
@@ -34,7 +34,7 @@ p {
     color: #333;
 }
 
-.main-box {
+#main-box {
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -43,24 +43,24 @@ p {
     min-height: 100%;
 }
 
-.header, .server-name {
+#header, #server-name {
     display: flex;
     align-items: center;
     justify-content: start;
     color: #333;
 }
 
-.header {
+#header {
     font-weight: bold;
     padding-left: 5px;
 }
 
-.header a {
+#header a {
     text-decoration: none;
     color: #333
 }
 
-.server-name {
+#server-name {
     flex: 1;
     padding-left: 15px;
     font-weight: normal;
@@ -69,12 +69,13 @@ p {
     margin: 0;
 }
 
-.tabs-box {
+#tabs-box {
     display: flex;
     flex-direction: row;
     border-bottom: 1px solid #ddd;
     height: 36px;
     font-family: Helvetica, sans-serif;
+    padding: 5px;
 }
 
 .tab-button, .selected-tab-button {
@@ -103,7 +104,7 @@ p {
     font-weight: bold;
 }
 
-.query-box {
+#query-box {
     display: flex;
     flex-direction: column;
 }
@@ -112,7 +113,7 @@ p {
     font-size: 18px;
 }
 
-.submit-box {
+#submit-box {
     display: flex;
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
@@ -214,7 +215,10 @@ p {
     background-color: #efefef;
 }
 
-.submit-dropdown-content-button:active, .submit-button:active, .cancel-button:active, .submit-dropdown-button:active {
+.submit-dropdown-content-button:active,
+.submit-button:active,
+.cancel-button:active,
+.submit-dropdown-button:active {
     background-color: #e6e6e6;
     outline: none
 }
@@ -229,18 +233,18 @@ p {
 }
 
 #status-message {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    flex-direction: row;
+    min-width: 0;
+    justify-content: left;
     font-family: Helvetica, sans-serif;
     white-space: nowrap;
     overflow: hidden;
     font-size: 16px;
     color: #333;
+    margin: 0 5px;
+    text-overflow: ellipsis;
 }
 
-.result-box, .fetch-sql-box, .saved-box, .graph-box, .structure-box {
+#result-box, #fetch-sql-box, #saved-box, #graph-box, #structure-box {
     flex: 1;
     overflow: auto;
     display: flex;
@@ -250,6 +254,10 @@ table tbody tr td {
   height: 21px;
 }
 
+#result-table td, #result-table th {
+    cursor: default;
+}
+
 #result-table tbody tr td abbr a {
     color: #555;
     cursor: pointer;
@@ -259,6 +267,7 @@ table tbody tr td {
     border: 1px dotted #555;
     font-size: 12px;
     display: inline-block;
+    user-select: none;
 }
 
 #result-table tbody tr td abbr {
@@ -268,12 +277,12 @@ table tbody tr td {
     bottom: 2px; /* To make the links look vertically centered. */
 }
 
-.fetch-sql-box {
+#fetch-sql-box {
     justify-content: center;
     align-items: center;
 }
 
-.graph-box {
+#graph-box {
     padding: 20px;
 }
 
@@ -352,8 +361,9 @@ thead {
     background: #eee;
 }
 
-.status-box {
-    padding: 5px 15px;
+#status-box {
+    width: 100%;
+    padding: 5px 0;
     display: flex;
     flex-direction: row;
     border-top: 1px solid #ddd;
@@ -366,17 +376,11 @@ thead {
     color: #999;
 }
 
-.tabs-box {
-    display: flex;
-    padding: 5px;
-}
-
-.saved-box {
+#saved-box {
     font-family: Helvetica, sans-serif;
 }
 
-.saved-box h2 {
-    margin: 0;
+#saved-box h2 {
     font-weight: bold;
 }
 
@@ -384,7 +388,7 @@ thead {
     border-top: none !important;
 }
 
-.saved-box p {
+#saved-box p {
     margin: 0;
 }
 
@@ -427,27 +431,27 @@ thead {
     height: 100%;
 }
 
-.schemas, .tables {
+#schemas, #tables {
     border: none;
     display: flex;
     min-width: 200px;
 }
 
-.table-info {
+#table-info {
     display: grid;
     grid-template-rows: 0.5fr 0.5fr;
     justify-items: stretch;
     flex: 1;
 }
 
-.columns {
+#columns {
     border-bottom: 1px solid #ddd;
     overflow: auto;
     grid-column: 1;
     grid-row: 1;
 }
 
-.indexes {
+#indexes {
     overflow: auto;
     grid-column: 1;
     grid-row: 2;
@@ -486,24 +490,40 @@ select {
 #pagination-box {
     display: flex;
     flex-direction: row;
+    margin: 0 5px;
 }
 
 #page-count-box {
     align-self: center;
     font-size: 16px;
+    white-space: nowrap;
 }
 
 .pagination-button {
-    margin: 0 10px;
-    cursor: pointer;
+    margin: 0 0 0 10px;
     background: none;
     color: #333;
     border: 1px solid #888;
     font-size: 16px;
-    padding: 2px 10px;
+    padding: 2px 5px;
+    width: 30px;
+    justify-content: center;
+}
+
+.pagination-button:enabled {
+    cursor: pointer;
 }
 
 .pagination-button:disabled {
     color: #888;
     border: 1px solid #ddd;
 }
+
+.pagination-button:active:enabled {
+    background-color: #e6e6e6;
+    outline: none
+}
+
+.jump-button {
+    font-size: 12px;
+}