sqlui 0.1.5

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c1cecf33df22e86f955f8485d16c8a4add25d5598d4336f8b93f25116275a704
+  data.tar.gz: 502cb4a146fe34ad3255e66cf016d8b7dc7ab2d1558ebe313f45624e0e8eb4c3
+SHA512:
+  metadata.gz: aa5faf1265ade6457bd26d5fce342ea3ebd09902dbdb4d359b4e50a989f82e43d68e20a263dd359598ff2994ee792c9475a15011ba1ebe4f879b28dbc311e384
+  data.tar.gz: 0d5ef75a2ca38abde8955e9b3650e082e8fffa5c3abfa17b6a10ddb25b364f4c9c1c66681d3e8ea5efc5149fe81c97e2c250b84e3d372686c99b2bc71f601500

data/lib/sqlui.rb

@@ -0,0 +1,217 @@
+require 'json'
+require 'uri'
+require 'set'
+
+class SQLUI
+  MAX_ROWS = 1_000
+
+  def initialize(name:, saved_path:, max_rows: MAX_ROWS, &block)
+    @name = name
+    @saved_path = saved_path
+    @max_rows = max_rows
+    @queryer = block
+    @resources_dir = File.join(File.expand_path('..', File.dirname(__FILE__)), 'resources')
+  end
+
+  def get(params)
+    case params[:route]
+    when 'app'
+      { body: html.html_safe, status: 200, content_type: 'text/html' }
+    when 'sqlui.css'
+      { body: css, status: 200, content_type: 'text/css' }
+    when 'sqlui.js'
+      { body: javascript, status: 200, content_type: 'text/javascript' }
+    when 'metadata'
+      { body: metadata.to_json, status: 200, content_type: 'application/json' }
+    when 'query_file'
+      { body: query_file(params).to_json, status: 200, content_type: 'application/json' }
+    else
+      { body: "unknown route: #{params[:route]}", status: 404, content_type: 'text/plain' }
+    end
+  end
+
+  def post(params)
+    case params[:route]
+    when 'query'
+      { body: query(params).to_json, status: 200, content_type: 'text/html' }
+    else
+      { body: "unknown route: #{params[:route]}", status: 404, content_type: 'text/plain' }
+    end
+  end
+
+  private
+
+  def html
+    @html ||= File.read(File.join(@resources_dir, 'sqlui.html'))
+  end
+
+  def css
+    @css ||= File.read(File.join(@resources_dir, 'sqlui.css'))
+  end
+
+  def javascript
+    @javascript ||= File.read(File.join(@resources_dir, 'sqlui.js'))
+  end
+
+  def query(params)
+    raise 'missing sql' unless params[:sql]
+    raise 'missing cursor' unless params[:cursor]
+
+    sql = find_query_at_cursor(params[:sql], Integer(params[:cursor]))
+    raise "can't find query at cursor" unless sql
+
+    execute_query(sql)
+  end
+
+  def query_file(params)
+    if params['file']
+      sql = File.read("#{@saved_path}/#{params['file']}")
+      execute_query(sql).tap { |r| r[:file] = params[:file] }
+    else
+      raise 'missing file param'
+    end
+  end
+
+  def metadata
+    @metadata ||= load_metadata
+  end
+
+  def load_metadata
+    stats_result = @queryer.call(
+      <<~SQL.squish
+        select
+          table_schema,
+          table_name,
+          index_name,
+          seq_in_index,
+          non_unique,
+          column_name
+        from information_schema.statistics
+        where table_schema not in('mysql', 'sys')
+        order by table_schema, table_name, if(index_name = "PRIMARY", 0, index_name), seq_in_index;
+      SQL
+    )
+    result = {
+      server:  @name,
+      schemas: {},
+      saved:   Dir.glob("#{@saved_path}/*.sql").sort.map do |path|
+        {
+          filename:    File.basename(path),
+          description: File.readlines(path).take_while { |l| l.start_with?('--') }.map { |l| l.sub(/^-- */, '') }.join
+        }
+      end
+    }
+    stats_result.each do |row|
+      table_schema = row['table_schema']
+      unless result[:schemas][table_schema]
+        result[:schemas][table_schema] = {
+          tables: {}
+        }
+      end
+      tables = result[:schemas][table_schema][:tables]
+      table_name = row['table_name']
+      unless tables[table_name]
+        tables[table_name] = {
+          indexes: {},
+          columns: {}
+        }
+      end
+      indexes = tables[table_name][:indexes]
+      index_name = row['index_name']
+      unless indexes[index_name]
+        indexes[index_name] = {}
+      end
+      index = indexes[index_name]
+      column_name = row['column_name']
+      index[column_name] = {}
+      column = index[column_name]
+      column[:name] = index_name
+      column[:seq_in_index] = row['seq_in_index']
+      column[:non_unique] = row['non_unique']
+      column[:column_name] = row['column_name']
+    end
+
+    column_result = @queryer.call(
+      <<~SQL.squish
+        select
+          table_schema,
+          table_name,
+          column_name,
+          data_type,
+          character_maximum_length,
+          is_nullable,
+          column_key,
+          column_default,
+          extra
+        from information_schema.columns
+        where table_schema not in('information_schema' 'mysql', 'performance_schema', 'sys')
+        order by table_schema, table_name, column_name, ordinal_position;
+    SQL
+    )
+    column_result.each do |row|
+      table_schema = row['table_schema']
+      table_name = row['table_name']
+      column_name = row['column_name']
+      next unless result[:schemas][table_schema]
+      next unless result[:schemas][table_schema][:tables][table_name]
+
+      columns = result[:schemas][table_schema][:tables][table_name][:columns]
+      unless columns[column_name]
+        columns[column_name] = {}
+      end
+      column = columns[column_name]
+      column[:name] = column_name
+      column[:data_type] = row['data_type']
+      column[:length] = row['character_maximum_length']
+      column[:allow_null] = row['is_nullable']
+      column[:key] = row['column_key']
+      column[:default] = row['column_default']
+      column[:extra] = row['extra']
+    end
+
+    result
+  end
+
+  def execute_query(sql)
+    result = @queryer.call(sql)
+    rows = result.rows
+    column_types = result.columns.map { |_| 'string' }
+    unless rows.empty?
+      maybe_non_null_column_value_exemplars = result.columns.each_with_index.map do |_, index|
+        rows.find do |row|
+          !row[index].nil?
+        end.try(:[], index)
+      end
+      column_types = maybe_non_null_column_value_exemplars.map do |value|
+        case value
+        when String, NilClass
+          'string'
+        when Integer
+          'number'
+        when Date, Time
+          'date'
+        else
+          value.class.to_s
+        end
+      end
+    end
+    {
+      query:        sql,
+      columns:      result.columns,
+      column_types: column_types,
+      total_rows:   rows.size,
+      rows:         rows.take(@max_rows)
+    }
+  end
+
+  def find_query_at_cursor(sql, cursor)
+    parts_with_ranges = []
+    sql.scan(/[^;]*;[ \n]*/) { |part| parts_with_ranges << [part, 0, part.size] }
+    parts_with_ranges.inject(0) do |pos, part_with_range|
+      part_with_range[1] += pos
+      part_with_range[2] += pos
+    end
+    part_with_range = parts_with_ranges.find { |part_with_range| cursor >= part_with_range[1] && cursor < part_with_range[2] } || parts_with_ranges[-1]
+    part_with_range[0]
+  end
+end

data/resources/sqlui.css

@@ -0,0 +1,242 @@
+    body {
+      font-size: 16px;
+      margin: 0;
+    }
+
+    .main-box {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      margin: 0;
+      height: 100%;
+      min-height: 100%;
+    }
+
+    .header {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: start;
+      padding-left: 5px;
+      color: #333;
+      font-weight: bold;
+    }
+
+    .tabs-box {
+      display: flex;
+      flex-direction: row;
+      border-bottom: 1px solid #ddd;
+      height: 36px;
+      font-size: 16px;
+      font-family: Helvetica;
+    }
+
+    .tab-button, .selected-tab-button {
+      border: none;
+      outline: none;
+      cursor: pointer;
+      width: 150px;
+      padding: 2px;
+      margin: 0px;
+      display: flex;
+      justify-content: center;
+      background-color: #fff;
+    }
+
+    .tab-button {
+      color: #888;
+    }
+
+    .tab-button:hover {
+      color: #333;
+    }
+
+    .selected-tab-button {
+      color: #333;
+      font-weight: bold;
+    }
+
+    .tab-content-element {
+      display: none;
+    }
+
+    .query-box {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .query {
+      display: flex;
+      flex: 1;
+    }
+
+    .submit-box {
+      display: flex;
+      border-top: 1px solid #ddd;
+      height: 36px;
+      justify-content: right;
+    }
+
+    .status {
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      flex-direction: column;
+      font-family: Helvetica;
+    }
+
+    .result-box, .saved-box, .graph-box, .structure-box {
+      flex: 1;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .graph-box, .result-box {
+      border-top: 1px solid #ddd;
+    }
+
+    .graph-box {
+      padding: 20px;
+    }
+
+    table {
+      font-family: monospace;
+      flex: 1;
+      border-spacing: 0px;
+      display: flex;
+      width: 100%;
+    }
+
+    table td:last-child, table th:last-child {
+      width: 100%;
+      border-right: none !important;
+    }
+
+    td, th {
+      padding: 5px 20px 5px 5px;
+      font-weight: normal;
+      white-space: nowrap;
+      max-width: 500px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    td {
+      text-align: right;
+    }
+
+    th {
+      text-align: left;
+      font-weight: bold;
+      border-bottom: 1px solid #ddd;
+      border-right: 1px solid #ddd;
+    }
+
+    table {
+      display: block;
+    }
+
+    thead {
+      padding: 0px;
+      background-color: #fff;
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0px;
+      z-index: 100;
+      table-layout:fixed;
+    }
+
+    .highlighted-row {
+      background: #eee;
+    }
+
+    .status-box {
+      padding: 5px;
+      display: flex;
+      flex-direction: rows;
+      justify-content: space-between;
+      border-top: 1px solid #ddd;
+      height: 30px;
+    }
+
+    .CodeMirror pre.CodeMirror-placeholder {
+      color: #999;
+    }
+
+    .tabs-box {
+      display: flex;
+    }
+
+    .saved-box {
+      font-family: Helvetica;
+    }
+
+    .saved-box h1 {
+      margin: 0px;
+      padding-left: 10px;
+      padding-right: 10px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .saved-box div:first-child {
+      border-top: none !important;
+    }
+
+    .saved-box p {
+      margin: 0px;
+      padding-left: 20px;
+      padding-bottom: 20px;
+    }
+
+    .saved-box div {
+      cursor: pointer;
+      border-top: 1px solid #eeeeee;
+    }
+
+    .saved-box div:hover {
+      background: #eee;
+    }
+
+    .submit-button {
+      cursor: pointer;
+      margin-right: 10px;
+    }
+
+    .cm-editor.cm-focused {
+      outline: none !important;
+    }
+
+    .schemas, .tables {
+      border: none;
+      display: flex;
+      min-width: 200px;
+    }
+
+    .table-info {
+      display: grid;
+      grid-template-columns: 1;
+      grid-template-rows: 0.5fr 0.5fr;
+      justify-items: stretch;
+      flex: 1;
+    }
+
+    .columns {
+      border-bottom: 1px solid #ddd;
+      overflow: auto;
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .indexes {
+      overflow: auto;
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    select {
+      outline: none;
+    }

data/resources/sqlui.html

@@ -0,0 +1,60 @@
+<head>
+
+  <title>SQLUI</title>
+
+  <script src="sqlui.js"></script>
+  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <link rel="stylesheet" href="sqlui.css">
+</head>
+
+<body>
+  <div class="main-box">
+    <div class="tabs-box">
+      <div id="header" class="header">SQLUI</div>
+      <input id="query-tab-button" class="tab-button" type="button" value="Query" onclick="sqlui.selectTab('query')"></input>
+      <input id="graph-tab-button" class="tab-button" type="button" value="Graph" onclick="sqlui.selectTab('graph')"></input>
+      <input id="saved-tab-button" class="tab-button" type="button" value="Saved" onclick="sqlui.selectTab('saved')"></input>
+      <input id="structure-tab-button" class="tab-button" type="button" value="Structure" onclick="sqlui.selectTab('structure')"></input>
+    </div>
+
+    <div id="query-box" class="query-box tab-content-element graph-element query-element" style="display: none;">
+      <div id="query"></div>
+    </div>
+
+    <!--
+    <div id="submit-box" class="submit-box tab-content-element graph-element query-element" style="display: none;">
+      <input id="submit-button" class="submit-button" type="button" value="submit" onclick="submit();"></input>
+    </div>
+    -->
+
+    <div id="result-box" class="result-box 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>
+
+    <div id="saved-box" class="saved-box 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 style="display: flex; flex: 1; flex-direction: row; align-items: stretch;">
+        <select id="schemas" class="schemas" size="4">
+        </select>
+        <select id="tables" class="tables" size="4">
+        </select>
+        <div id="table-info" class="table-info">
+          <div id="columns" class="columns">
+          </div>
+          <div id="indexes" class="indexes">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="status-box" class="status-box">
+      <div id="query-status" class="status tab-content-element query-element"></div>
+      <div id="graph-status" class="status tab-content-element graph-element"></div>
+      <div id="saved-status" class="status tab-content-element saved-element"></div>
+    </div>
+  </div>
+</body>