RubyGems - railsblazer - Versions diffs - 2.0.0 - Mend

railsblazer 2.0.0

Files changed (107) hide show

checksums.yaml +7 -0
data/.gitattributes +1 -0
data/.github/ISSUE_TEMPLATE.md +0 -0
data/.gitignore +14 -0
data/CHANGELOG.md +247 -0
data/CONTRIBUTING.md +42 -0
data/Gemfile +4 -0
data/LICENSE.txt +22 -0
data/README.md +855 -0
data/Rakefile +1 -0
data/app/assets/fonts/blazer/glyphicons-halflings-regular.eot +0 -0
data/app/assets/fonts/blazer/glyphicons-halflings-regular.svg +288 -0
data/app/assets/fonts/blazer/glyphicons-halflings-regular.ttf +0 -0
data/app/assets/fonts/blazer/glyphicons-halflings-regular.woff +0 -0
data/app/assets/fonts/blazer/glyphicons-halflings-regular.woff2 +0 -0
data/app/assets/javascripts/blazer/Chart.js +14145 -0
data/app/assets/javascripts/blazer/Sortable.js +1144 -0
data/app/assets/javascripts/blazer/ace.js +6 -0
data/app/assets/javascripts/blazer/ace/ace.js +11 -0
data/app/assets/javascripts/blazer/ace/ext-language_tools.js +5 -0
data/app/assets/javascripts/blazer/ace/mode-sql.js +1 -0
data/app/assets/javascripts/blazer/ace/snippets/sql.js +1 -0
data/app/assets/javascripts/blazer/ace/snippets/text.js +1 -0
data/app/assets/javascripts/blazer/ace/theme-twilight.js +1 -0
data/app/assets/javascripts/blazer/application.js +79 -0
data/app/assets/javascripts/blazer/bootstrap.js +2366 -0
data/app/assets/javascripts/blazer/chartkick.js +1693 -0
data/app/assets/javascripts/blazer/daterangepicker.js +1505 -0
data/app/assets/javascripts/blazer/fuzzysearch.js +24 -0
data/app/assets/javascripts/blazer/highlight.pack.js +1 -0
data/app/assets/javascripts/blazer/jquery.js +10308 -0
data/app/assets/javascripts/blazer/jquery.stickytableheaders.js +263 -0
data/app/assets/javascripts/blazer/jquery_ujs.js +469 -0
data/app/assets/javascripts/blazer/moment-timezone.js +1007 -0
data/app/assets/javascripts/blazer/moment.js +3043 -0
data/app/assets/javascripts/blazer/queries.js +110 -0
data/app/assets/javascripts/blazer/routes.js +23 -0
data/app/assets/javascripts/blazer/selectize.js +3667 -0
data/app/assets/javascripts/blazer/stupidtable.js +114 -0
data/app/assets/javascripts/blazer/vue.js +7515 -0
data/app/assets/stylesheets/blazer/application.css +198 -0
data/app/assets/stylesheets/blazer/bootstrap.css.erb +6202 -0
data/app/assets/stylesheets/blazer/daterangepicker-bs3.css +375 -0
data/app/assets/stylesheets/blazer/github.css +125 -0
data/app/assets/stylesheets/blazer/selectize.default.css +387 -0
data/app/controllers/blazer/base_controller.rb +113 -0
data/app/controllers/blazer/checks_controller.rb +56 -0
data/app/controllers/blazer/dashboards_controller.rb +105 -0
data/app/controllers/blazer/queries_controller.rb +337 -0
data/app/helpers/blazer/base_helper.rb +57 -0
data/app/mailers/blazer/check_mailer.rb +27 -0
data/app/mailers/blazer/slack_notifier.rb +76 -0
data/app/models/blazer/audit.rb +6 -0
data/app/models/blazer/check.rb +104 -0
data/app/models/blazer/connection.rb +5 -0
data/app/models/blazer/dashboard.rb +13 -0
data/app/models/blazer/dashboard_query.rb +9 -0
data/app/models/blazer/query.rb +40 -0
data/app/models/blazer/record.rb +5 -0
data/app/views/blazer/_nav.html.erb +16 -0
data/app/views/blazer/_variables.html.erb +102 -0
data/app/views/blazer/check_mailer/failing_checks.html.erb +6 -0
data/app/views/blazer/check_mailer/state_change.html.erb +47 -0
data/app/views/blazer/checks/_form.html.erb +79 -0
data/app/views/blazer/checks/edit.html.erb +1 -0
data/app/views/blazer/checks/index.html.erb +43 -0
data/app/views/blazer/checks/new.html.erb +1 -0
data/app/views/blazer/dashboards/_form.html.erb +76 -0
data/app/views/blazer/dashboards/edit.html.erb +1 -0
data/app/views/blazer/dashboards/new.html.erb +1 -0
data/app/views/blazer/dashboards/show.html.erb +47 -0
data/app/views/blazer/queries/_form.html.erb +240 -0
data/app/views/blazer/queries/edit.html.erb +2 -0
data/app/views/blazer/queries/home.html.erb +152 -0
data/app/views/blazer/queries/new.html.erb +2 -0
data/app/views/blazer/queries/run.html.erb +165 -0
data/app/views/blazer/queries/schema.html.erb +20 -0
data/app/views/blazer/queries/show.html.erb +73 -0
data/app/views/layouts/blazer/application.html.erb +24 -0
data/blazer-0.0.1.gem +0 -0
data/blazer.gemspec +27 -0
data/config/routes.rb +16 -0
data/lib/blazer.rb +223 -0
data/lib/blazer/adapters/athena_adapter.rb +128 -0
data/lib/blazer/adapters/base_adapter.rb +53 -0
data/lib/blazer/adapters/bigquery_adapter.rb +68 -0
data/lib/blazer/adapters/cassandra_adapter.rb +59 -0
data/lib/blazer/adapters/drill_adapter.rb +28 -0
data/lib/blazer/adapters/druid_adapter.rb +67 -0
data/lib/blazer/adapters/elasticsearch_adapter.rb +46 -0
data/lib/blazer/adapters/mongodb_adapter.rb +39 -0
data/lib/blazer/adapters/presto_adapter.rb +45 -0
data/lib/blazer/adapters/snowflake_adapter.rb +73 -0
data/lib/blazer/adapters/sql_adapter.rb +182 -0
data/lib/blazer/data_source.rb +195 -0
data/lib/blazer/detect_anomalies.R +19 -0
data/lib/blazer/engine.rb +30 -0
data/lib/blazer/result.rb +170 -0
data/lib/blazer/run_statement.rb +40 -0
data/lib/blazer/run_statement_job.rb +21 -0
data/lib/blazer/version.rb +3 -0
data/lib/generators/blazer/install_generator.rb +39 -0
data/lib/generators/blazer/templates/config.yml.tt +62 -0
data/lib/generators/blazer/templates/install.rb.tt +46 -0
data/lib/tasks/blazer.rake +11 -0
data/railsblazer-0.0.1.gem +0 -0
metadata +234 -0

data/app/views/blazer/check_mailer/failing_checks.html.erb ADDED

@@ -0,0 +1,6 @@
+<ul>
+  <% @checks.each do |check| %>
+    <li><%= link_to check.query.name, query_url(check.query_id) %> <%= check.state %></li>
+  <% end %>
+</ul>
+<p><%= link_to "Manage checks", checks_url %></p>

data/app/views/blazer/check_mailer/state_change.html.erb ADDED

@@ -0,0 +1,47 @@
+<html>
+  <head>
+  </head>
+  <body style="font-family: 'Helvetica Neue', Arial, Helvetica; font-size: 14px; color: #333;">
+    <p><%= link_to "View", query_url(@check.query_id) %></p>
+    <% if @error %>
+      <p><%= @error %></p>
+    <% elsif @rows_count > 0 && @check_type == "bad_data" %>
+      <p>
+        <% if @rows_count <= 10 %>
+          <%= pluralize(@rows_count, "row") %>
+        <% else %>
+          Showing 10 of <%= @rows_count %> rows
+        <% end %>
+      </p>
+      <table style="width: 100%; border-spacing: 0; border-collapse: collapse;">
+        <thead>
+          <tr>
+            <% @columns.first(5).each do |column| %>
+              <th style="padding: 8px; line-height: 1.4; text-align: left; vertical-align: bottom; border-bottom: 2px solid #ddd; width: <%= (100 / @columns.size).round(2) %>%;">
+                <%= column %>
+              </th>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody>
+          <% @rows.first(10).each do |row| %>
+            <tr>
+              <% @columns.first(5).each_with_index do |column, i| %>
+                <td style="padding: 8px; line-height: 1.4; vertical-align: top; border-top: 1px solid #ddd;">
+                  <% value = row[i] %>
+                  <% if @column_types[i] == "time" && value.to_s.length > 10 %>
+                    <% value = Time.parse(value).in_time_zone(Blazer.time_zone) rescue value %>
+                  <% end %>
+                  <%= value %>
+                </td>
+              <% end %>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+      <% if @columns.size > 5 %>
+        <p style="color: #999;">Only first 5 columns shown</p>
+      <% end %>
+    <% end %>
+  </body>
+</html>

data/app/views/blazer/checks/_form.html.erb ADDED

@@ -0,0 +1,79 @@
+<% unless @check.respond_to?(:invert) %>
+  <p class="text-muted">Checks are designed to identify bad data. A check fails if there are any results.</p>
+<% end %>
+<% if @check.errors.any? %>
+  <div class="alert alert-danger"><%= @check.errors.full_messages.first %></div>
+<% end %>
+<%= form_for @check do |f| %>
+  <div class="form-group">
+    <%= f.label :query_id, "Query" %>
+    <div class="hide">
+      <%= f.select :query_id, [], {include_blank: true} %>
+    </div>
+    <script>
+      <%= blazer_js_var "queries", Blazer::Query.named.order(:name).select("id, name").map { |q| {text: q.name, value: q.id} } %>
+      <%= blazer_js_var "items", [@check.query_id].compact %>
+      $("#check_query_id").selectize({options: queries, items: items, highlight: false, maxOptions: 100}).parents(".hide").removeClass("hide");
+    </script>
+  </div>
+  <% if @check.respond_to?(:check_type) %>
+    <div class="form-group">
+      <%= f.label :check_type, "Alert if" %>
+      <div class="hide">
+        <% check_options = [["Any results (bad data)", "bad_data"], ["No results (missing data)", "missing_data"]] %>
+        <% check_options << ["Anomaly (most recent data point)", "anomaly"] if Blazer.anomaly_checks %>
+        <%= f.select :check_type, check_options %>
+      </div>
+      <script>
+        $("#check_check_type").selectize({}).parent().removeClass("hide");
+      </script>
+    </div>
+  <% elsif @check.respond_to?(:invert) %>
+    <div class="form-group">
+      <%= f.label :invert, "Fails if" %>
+      <div class="hide">
+        <%= f.select :invert, [["Any results (bad data)", false], ["No results (missing data)", true]] %>
+      </div>
+      <script>
+        $("#check_invert").selectize({}).parent().removeClass("hide");
+      </script>
+    </div>
+  <% end %>
+  <% if @check.respond_to?(:schedule) && Blazer.check_schedules %>
+    <div class="form-group">
+      <%= f.label :schedule, "Run every" %>
+      <div class="hide">
+        <%= f.select :schedule, Blazer.check_schedules.map { |v| [v, v] } %>
+      </div>
+      <script>
+        $("#check_schedule").selectize({}).parent().removeClass("hide");
+      </script>
+    </div>
+  <% end %>
+  <div class="form-group">
+    <%= f.label :emails %>
+    <%= f.text_field :emails, placeholder: "Optional, comma separated", class: "form-control" %>
+  </div>
+  <% if Blazer.slack? %>
+    <div class="form-group">
+      <%= f.label :slack_channels %>
+      <%= f.text_field :slack_channels, placeholder: "Optional, comma separated", class: "form-control" %>
+    </div>
+  <% end %>
+  <p class="text-muted">Emails <%= Blazer.slack? ? "and Slack notifications " : nil %>are sent when a check starts failing, and when it starts passing again.
+  <p>
+    <% if @check.persisted? %>
+      <%= link_to "Delete", check_path(@check), method: :delete, "data-confirm" => "Are you sure?", class: "btn btn-danger" %>
+    <% end %>
+    <%= f.submit "Save", class: "btn btn-success" %>
+    <%= link_to "Back", :back, class: "btn btn-link" %>
+  </p>
+<% end %>

data/app/views/blazer/checks/edit.html.erb ADDED

	@@ -0,0 +1 @@
1	+ <%= render partial: "form" %>

data/app/views/blazer/checks/index.html.erb ADDED

@@ -0,0 +1,43 @@
+<% blazer_title "Checks" %>
+<p style="float: right;"><%= link_to "New Check", new_check_path, class: "btn btn-info" %></p>
+<%= render partial: "blazer/nav" %>
+<table class="table">
+  <thead>
+    <tr>
+      <th>Query</th>
+      <th style="width: 10%;">State</th>
+      <th style="width: 10%;">Run</th>
+      <th style="width: 20%;">Notify</th>
+      <th style="width: 15%;"></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @checks.each do |check| %>
+      <tr>
+        <td><%= link_to check.query.name, check.query %> <span class="text-muted"><%= check.try(:check_type).to_s.gsub("_", " ") %></span></td>
+        <td>
+          <% if check.state %>
+            <small class="check-state <%= check.state.parameterize.gsub("-", "_") %>"><%= check.state.upcase %></small>
+          <% end %>
+        </td>
+        <td><%= check.schedule if check.respond_to?(:schedule) %></td>
+        <td>
+          <ul class="list-unstyled" style="margin-bottom: 0; word-break: break-all;">
+            <% check.split_emails.each do |email| %>
+              <li><%= email %></li>
+            <% end %>
+            <% check.split_slack_channels.each do |channel| %>
+              <li><%= channel %></li>
+            <% end %>
+          </ul>
+        </td>
+        <td style="text-align: right; padding: 1px;">
+          <%= link_to "Edit", edit_check_path(check), class: "btn btn-info" %>
+          <%= link_to "Run Now", query_path(check.query), class: "btn btn-primary" %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/blazer/checks/new.html.erb ADDED

	@@ -0,0 +1 @@
1	+ <%= render partial: "form" %>

data/app/views/blazer/dashboards/_form.html.erb ADDED

@@ -0,0 +1,76 @@
+<% if @dashboard.errors.any? %>
+  <div class="alert alert-danger"><%= @dashboard.errors.full_messages.first %></div>
+<% end %>
+<%= form_for @dashboard, url: (@dashboard.persisted? ? dashboard_path(@dashboard, variable_params) : dashboards_path(variable_params)), html: {id: "app"} do |f| %>
+  <div class="form-group">
+    <%= f.label :name %>
+    <%= f.text_field :name, class: "form-control" %>
+  </div>
+  <div class="form-group" v-show="queries.length">
+    <%= f.label :charts %>
+    <ul id="queries" class="list-group">
+      <li class="list-group-item" v-for="(query, index) in queries" :key="query.id" v-cloak>
+        <span class="glyphicon glyphicon-remove" aria-hidden="true" v-on:click="remove(index)"></span>
+        {{ query.name }}
+        <input type="hidden" name="query_ids[]" :value="query.id">
+      </li>
+    </ul>
+  </div>
+  <div class="form-group" v-cloak>
+    <%= f.label :query_id, "Add Chart" %>
+    <%= select_tag :query_id, nil, {include_blank: true, placeholder: "Select chart"} %>
+  </div>
+  <p style="padding-bottom: 140px;" v-cloak>
+    <% if @dashboard.persisted? %>
+      <%= link_to "Delete", dashboard_path(@dashboard), method: :delete, "data-confirm" => "Are you sure?", class: "btn btn-danger"%>
+    <% end %>
+    <%= f.submit "Save", class: "btn btn-success" %>
+    <%= link_to "Back", :back, class: "btn btn-link" %>
+  </p>
+<% end %>
+<script>
+  <%= blazer_js_var "queries", Blazer::Query.named.order(:name).select("id, name").map { |q| {text: q.name, value: q.id} } %>
+  <%= blazer_js_var "dashboardQueries", @queries || @dashboard.dashboard_queries.order(:position).map(&:query) %>
+  var app = new Vue({
+    el: "#app",
+    data: {
+      queries: dashboardQueries
+    },
+    methods: {
+      remove: function(index) {
+        this.queries.splice(index, 1)
+      }
+    },
+    mounted: function() {
+      $("#query_id").selectize({
+        options: queries,
+        highlight: false,
+        maxOptions: 100,
+        onChange: function(val) {
+          if (val) {
+            var item = this.getItem(val)
+            // if duplicate query is added, remove the first one
+            for (var i = 0; i < app.queries.length; i++) {
+              if (app.queries[i].id == val) {
+                app.queries.splice(i, 1)
+                break
+              }
+            }
+            app.queries.push({id: val, name: item.text()})
+            this.setValue("")
+          }
+        }
+      })
+    }
+  })
+  Sortable.create($("#queries").get(0), {
+    onEnd: function(e) {
+      app.queries.splice(e.newIndex, 0, app.queries.splice(e.oldIndex, 1)[0])
+    }
+  })
+</script>

data/app/views/blazer/dashboards/edit.html.erb ADDED

	@@ -0,0 +1 @@
1	+ <%= render partial: "form" %>

data/app/views/blazer/dashboards/new.html.erb ADDED

	@@ -0,0 +1 @@
1	+ <%= render partial: "form" %>

data/app/views/blazer/dashboards/show.html.erb ADDED

@@ -0,0 +1,47 @@
+<% blazer_title @dashboard.name %>
+<div class="topbar">
+  <div class="container">
+    <div class="row" style="padding-top: 13px;">
+      <div class="col-sm-9">
+        <%= render partial: "blazer/nav" %>
+        <h3 style="margin: 0; line-height: 34px; display: inline;">
+          <%= @dashboard.name %>
+        </h3>
+      </div>
+      <div class="col-sm-3 text-right">
+        <%= link_to "Edit", edit_dashboard_path(@dashboard, variable_params), class: "btn btn-info" %>
+      </div>
+    </div>
+  </div>
+</div>
+<div style="margin-bottom: 60px;"></div>
+<% if @data_sources.any? { |ds| ds.cache_mode != "off" } %>
+  <p class="text-muted" style="float: right;">
+    Some queries may be cached
+    <%= link_to "Refresh", refresh_dashboard_path(@dashboard, variable_params), method: :post %>
+  </p>
+<% end %>
+<%= render partial: "blazer/variables", locals: {action: dashboard_path(@dashboard)} %>
+<% @queries.each_with_index do |query, i| %>
+  <div class="chart-container">
+    <h4><%= link_to query.friendly_name, query_path(query, variable_params), target: "_blank" %></h4>
+    <div id="chart-<%= i %>" class="chart">
+      <p class="text-muted">Loading...</p>
+    </div>
+  </div>
+  <script>
+    <%= blazer_js_var "data", {statement: query.statement, query_id: query.id, only_chart: true} %>
+    runQuery(data, function (data) {
+      $("#chart-<%= i %>").html(data)
+      $("#chart-<%= i %> table").stupidtable()
+    }, function (message) {
+      $("#chart-<%= i %>").addClass("query-error").html(message)
+    });
+  </script>
+<% end %>

data/app/views/blazer/queries/_form.html.erb ADDED

@@ -0,0 +1,240 @@
+<% if @query.errors.any? %>
+  <div class="alert alert-danger"><%= @query.errors.full_messages.first %></div>
+<% end %>
+<div id="app" v-cloak>
+  <%= form_for @query, url: (@query.persisted? ? query_path(@query, variable_params) : queries_path(variable_params)), html: {autocomplete: "off"} do |f| %>
+    <div class="row">
+      <div id="statement-box" class="col-xs-8">
+        <div class= "form-group">
+          <%= f.hidden_field :statement %>
+          <div id="editor-container">
+            <div id="editor" :style="{ height: editorHeight }"><%= @query.statement %></div>
+          </div>
+        </div>
+        <div class="form-group text-right">
+          <div class="pull-left" style="margin-top: 9px;">
+            <%= link_to "Back", :back %>
+          </div>
+          <a :href="dataSourcePath" target="_blank" style="margin-right: 10px;">Schema</a>
+          <%= f.select :data_source, Blazer.data_sources.values.select { |ds| q = @query.dup; q.data_source = ds.id; q.editable?(blazer_user) }.map { |ds| [ds.name, ds.id] }, {}, class: ("hide" if Blazer.data_sources.size <= 1), style: "width: 140px;" %>
+          <div id="tables" style="display: inline-block; width: 250px; margin-right: 10px;">
+            <select id="table_names" style="width: 240px;" placeholder="Preview table"></select>
+          </div>
+          <a v-on:click="run" v-if="!running" class="btn btn-info" style="vertical-align: top; width: 70px;">Run</a>
+          <a v-on:click="cancel" v-if="running" class="btn btn-danger" style="vertical-align: top; width: 70px;">Cancel</a>
+        </div>
+      </div>
+      <div class="col-xs-4">
+        <div class="form-group">
+          <%= f.label :name %>
+          <%= f.text_field :name, class: "form-control" %>
+        </div>
+        <div class="form-group">
+          <%= f.label :description %>
+          <%= f.text_area :description, placeholder: "Optional", style: "height: 80px;", class: "form-control" %>
+        </div>
+        <div class="text-right">
+          <%= f.submit "For Enter Press", class: "hide" %>
+          <% if @query.persisted? %>
+            <%= link_to "Delete", query_path(@query), method: :delete, "data-confirm" => "Are you sure?", class: "btn btn-danger" %>
+            <%= f.submit "Fork", class: "btn btn-info" %>
+          <% end %>
+          <%= f.submit @query.persisted? ? "Update" : "Create", class: "btn btn-success" %>
+        </div>
+        <% if @query.persisted? %>
+          <% dashboards_count = @query.dashboards.count %>
+          <% checks_count = @query.checks.count %>
+          <% words = [] %>
+          <% words << pluralize(dashboards_count, "dashboard") if dashboards_count > 0 %>
+          <% words << pluralize(checks_count, "check") if checks_count > 0 %>
+          <% if words.any? %>
+            <div class="alert alert-info" style="margin-top: 10px; padding: 8px 12px;">
+              Part of <%= words.to_sentence %>. Be careful when editing.
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+  <div id="results">
+    <p class="text-muted" v-if="running">Loading...</p>
+    <div id="results-html" v-if="!running" :class="{ 'query-error': error }"></div>
+  </div>
+</div>
+<script>
+  <%= blazer_js_var "params", variable_params %>
+  <%= blazer_js_var "previewStatement", Hash[Blazer.data_sources.map { |k, v| [k, (v.preview_statement rescue "")] }] %>
+  var app = new Vue({
+    el: "#app",
+    data: {
+      running: false,
+      results: "",
+      error: false,
+      dataSource: "",
+      selectize: null,
+      editorHeight: "180px"
+    },
+    computed: {
+      dataSourcePath: function() {
+        return Routes.schema_queries_path({data_source: this.dataSource})
+      }
+    },
+    methods: {
+      run: function(e) {
+        this.running = true
+        this.results = ""
+        this.error = false
+        cancelAllQueries()
+        var data = $.extend({}, params, {statement: this.getSQL(), data_source: $("#query_data_source").val()})
+        var _this = this
+        runQuery(data, function (data) {
+          _this.running = false
+          _this.showResults(data)
+          errorLine = _this.getErrorLine()
+          if (errorLine) {
+            editor.getSession().addGutterDecoration(errorLine - 1, "error")
+            editor.scrollToLine(errorLine, true, true, function () {})
+            editor.gotoLine(errorLine, 0, true)
+            editor.focus()
+          }
+        }, function (data) {
+          _this.running = false
+          _this.error = true
+          _this.showResults(data)
+        })
+      },
+      cancel: function(e) {
+        this.running = false
+        cancelAllQueries()
+      },
+      updateDataSource: function(dataSource) {
+        this.dataSource = dataSource
+        var selectize = this.selectize
+        selectize.clearOptions()
+        if (this.tablesXhr) {
+          this.tablesXhr.abort()
+        }
+        this.tablesXhr = $.getJSON(Routes.tables_queries_path({data_source: this.dataSource}), function(data) {
+          var newOptions = []
+          for (var i = 0; i < data.length; i++) {
+            newOptions.push({text: data[i], value: data[i]})
+          }
+          selectize.clearOptions()
+          selectize.addOption(newOptions)
+          selectize.refreshOptions(false)
+        })
+      },
+      showEditor: function() {
+        var _this = this
+        editor = ace.edit("editor")
+        editor.setTheme("ace/theme/twilight")
+        editor.getSession().setMode("ace/mode/sql")
+        editor.setOptions({
+          enableBasicAutocompletion: false,
+          enableSnippets: false,
+          enableLiveAutocompletion: false,
+          highlightActiveLine: false,
+          fontSize: 12,
+          minLines: 10
+        })
+        editor.renderer.setShowGutter(true)
+        editor.renderer.setPrintMarginColumn(false)
+        editor.renderer.setPadding(10)
+        editor.getSession().setUseWrapMode(true)
+        editor.commands.addCommand({
+          name: "run",
+          bindKey: {win: "Ctrl-Enter",  mac: "Command-Enter"},
+          exec: function(editor) {
+            _this.run()
+          },
+          readOnly: false // false if this command should not apply in readOnly mode
+        })
+        // fix command+L
+        editor.commands.removeCommands(["gotoline", "find"])
+        this.editor = editor
+        editor.getSession().on("change", function () {
+          $("#query_statement").val(editor.getValue())
+          _this.adjustHeight()
+        })
+        this.adjustHeight()
+        editor.focus()
+      },
+      adjustHeight: function() {
+        // https://stackoverflow.com/questions/11584061/
+        var editor = this.editor
+        var lines = editor.getSession().getScreenLength()
+        if (lines < 9) {
+          lines = 9
+        }
+        this.editorHeight = ((lines + 1) * 16).toString() + "px"
+        Vue.nextTick(function () {
+          editor.resize()
+        })
+      },
+      getSQL: function() {
+        var selectedText = editor.getSelectedText()
+        var text = selectedText.length < 10 ? editor.getValue() : selectedText
+        return text.replace(/\n/g, "\r\n")
+      },
+      getErrorLine: function() {
+        var editor = this.editor
+        var errorLine = this.results.substring(0, 100).includes("alert-danger") && /LINE (\d+)/g.exec(this.results)
+        if (errorLine) {
+          errorLine = parseInt(errorLine[1], 10)
+          if (editor.getSelectedText().length >= 10) {
+            errorLine += editor.getSelectionRange().start.row
+          }
+          return errorLine
+        }
+      },
+      showResults(data) {
+        // can't do it the Vue way due to script tags in results
+        // this.results = data
+        Vue.nextTick(function () {
+          $("#results-html").html(data)
+        })
+      }
+    },
+    mounted: function() {
+      var _this = this
+      var $select = $("#table_names").selectize({})
+      var selectize = $select[0].selectize
+      selectize.on("change", function(val) {
+        editor.setValue(previewStatement[_this.dataSource].replace("{table}", val), 1)
+        _this.run()
+        selectize.clear(true)
+        selectize.blur()
+      })
+      this.selectize = selectize
+      this.updateDataSource($("#query_data_source").val())
+      var $dsSelect = $("#query_data_source").selectize({})
+      var dsSelectize = $dsSelect[0].selectize
+      dsSelectize.on("change", function(val) {
+        _this.updateDataSource(val)
+        dsSelectize.blur()
+      })
+      this.showEditor()
+    }
+  })
+</script>