sql-jarvis 2.0.9 → 2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 95d91e5cd88710c9bcfc4275feefe9adcf44fe0094ee18a1292ade8667c745f9
-  data.tar.gz: ca7ac9b757cf70a255354471daaaae0a38bade6e1d32943ca57bf00af45f62b8
+  metadata.gz: c6ac3baeeb351f06d68988d5f2828002dcbc4edb6c07fb841bf2c316655398f4
+  data.tar.gz: 9d898978f1b770f769393cb2db0e6803392a15a9df23e5318a76263f77701b7f
 SHA512:
-  metadata.gz: 455fa161a14556cef7aac3baba521186c670b0c1469e945cc55201fd9d4635aaecfbad20051fd3e08438bb0b455567e9059f0199c44700f7bba3bc48d9194f09
-  data.tar.gz: e3752620502bcfe904e0320df5f8b51725d41283ab47b496f8a9b60dddf43af722c1cf9be09f38e29ddca1674d9490e07a81299ec01e0ba25a81b60bac10d0c9
+  metadata.gz: 56535c70ff300b1d818abf4d868002b00aec750ca5b569a0774d8944892599a4335d728f8115bd6d543029cc774e4337a0d9d1272f7733ba4000b02a261d1617
+  data.tar.gz: 5e7af8d4b27e85f9e14a2e502a6d72657499717cc981a9edec88c60732a662d84af73a8a6830eed0da5f8b938b58081163f0a2fdd8f8b3ce0a74f1ca190fe97c

data/app/assets/javascripts/blazer/main.js

@@ -19,19 +19,20 @@ $(document).on("click", "a.click2CopyTable", function (event) {
   copyToClipboard(selector)
 })
 
-$(document).on("mouseover", "table th[data-popup='true']", function (event) {
+$(document).on("mouseover", "table th[data-popup]", function (event) {
   var sum = 0, numbers = [];
   var columns = $(this).parents('thead').find('th');
   var columnIndex = columns.index(this) + 1;
   var cells = $(this).parents('table').find('tbody tr td:nth-child('+columnIndex+')');
   cells.each(function(index, cell) {
     content = $(cell).text();
-    content = content.split('.').join('').replace(',', '.');
+    content = content.split(',').join('');
     float = parseFloat(content);
     if (isNaN(float)) float = 0;
     numbers.push(float);
     sum += float
   });
+  sum = parseFloat(sum.toFixed(2));
   showTooltip({
     el: this,
     min: Math.min.apply(null, numbers),
@@ -42,7 +43,7 @@ $(document).on("mouseover", "table th[data-popup='true']", function (event) {
   })
 })
 
-$(document).on("mouseleave", "table th[data-popup='true']", function (event) {
+$(document).on("mouseleave", "table th[data-popup]", function (event) {
   $('#summanyPopup').remove();
 })
 

data/app/helpers/blazer/base_helper.rb

@@ -13,7 +13,7 @@ module Blazer
 
     def blazer_format_value(key, value)
       if value.is_a?(Numeric) && !key.to_s.end_with?("id") && !key.to_s.start_with?("id")
-        number_with_delimiter(value)
+        number_with_delimiter(value, delimiter: ',', separator: '.')
       elsif value =~ BLAZER_URL_REGEX
         # see if image or link
         if Blazer.images && (key.include?("image") || BLAZER_IMAGE_EXT.include?(value.split(".").last.split("?").first.try(:downcase)))

data/app/views/blazer/_nav.html.haml

@@ -0,0 +1,12 @@
+.btn-group{:style => "vertical-align: top; margin-right: 5px;"}
+  = link_to "Home", root_path, class: "btn btn-primary"
+  %button.btn.btn-primary.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button"}
+    %span.caret
+    %span.sr-only Toggle Dropdown
+  %ul.dropdown-menu
+    %li= link_to "Checks", checks_path
+    %li.divider{:role => "separator"}
+    %li= link_to "New Query", new_query_path
+    %li= link_to "New Dashboard", new_dashboard_path
+    - check_params = @query ? {query_id: @query.id} : {}
+    %li= link_to "New Check", new_check_path(check_params)

data/app/views/blazer/{_variables.html.erb → _variables.html.haml}

@@ -1,43 +1,35 @@
-<% if @bind_vars.any? %>
-  <script>
-    <%= blazer_js_var "timeZone", Blazer.time_zone.tzinfo.name %>
+- if @bind_vars.any?
+  :javascript
+    #{blazer_js_var "timeZone", Blazer.time_zone.tzinfo.name}
     var now = moment.tz(timeZone)
     var format = "YYYY-MM-DD"
 
     function toDate(time) {
       return moment.tz(time.format(format), timeZone)
     }
-  </script>
-  <form id="bind" method="get" action="<%= action %>" class="form-inline" style="margin-bottom: 15px;">
-    <% date_vars = ["start_time", "end_time"] %>
-    <% if (date_vars - @bind_vars).empty? %>
-      <% @bind_vars = @bind_vars - date_vars %>
-    <% else %>
-      <% date_vars = nil %>
-    <% end %>
-
-    <% @bind_vars.each_with_index do |var, i| %>
-      <%= label_tag var, var %>
-      <% if (data = @smart_vars[var]) %>
-        <%= select_tag var, options_for_select([[nil, nil]] + data, selected: params[var]), style: "margin-right: 20px; width: 200px; display: none;", multiple: true %>
-        <script>
-          $("#<%= var %>").selectize({
+  %form#bind.form-inline{:action => action, :method => "get", :style => "margin-bottom: 15px;"}
+    - date_vars = ["start_time", "end_time"]
+    - if (date_vars - @bind_vars).empty?
+      - @bind_vars = @bind_vars - date_vars
+    - else
+      - date_vars = nil
+    - @bind_vars.each_with_index do |var, i|
+      = label_tag var, var
+      - if (data = @smart_vars[var])
+        = select_tag var, options_for_select([[nil, nil]] + data, selected: params[var]), style: "margin-right: 20px; width: 200px; display: none;", multiple: true
+        :javascript
+          $("##{var}").selectize({
             create: true
           });
-        </script>
-      <% elsif var.end_with?("_at") || var == "start_time" || var == "end_time" %>
-        <%= hidden_field_tag var, params[var] %>
-
-        <div class="selectize-control single" style="width: 200px;">
-          <div id="<%= var %>-select" class="selectize-input" style="display: inline-block;">
-            <span>Select a date</span>
-          </div>
-        </div>
-
-        <script>
+      - elsif var.end_with?("_at") || var == "start_time" || var == "end_time"
+        = hidden_field_tag var, params[var]
+        .selectize-control.single{:style => "width: 200px;"}
+          .selectize-input{:id => "#{var}-select", :style => "display: inline-block;"}
+            %span Select a date
+        :javascript
           (function() {
-            var input = $("#<%= var %>")
-            var datePicker = $("#<%= var %>-select")
+            var input = $("##{var}")
+            var datePicker = $("##{var}-select")
             datePicker.daterangepicker({
               singleDatePicker: true,
               locale: {format: format},
@@ -48,32 +40,23 @@
             datePicker.on("apply.daterangepicker", function(ev, picker) {
               datePicker.find("span").html(toDate(picker.startDate).format("MMMM D, YYYY"))
               input.val(toDate(picker.startDate).utc().format())
-              submitIfCompleted($("#<%= var %>").closest("form"))
+              submitIfCompleted($("##{var}").closest("form"))
             })
             if (input.val().length > 0) {
               var picker = datePicker.data("daterangepicker")
               datePicker.find("span").html(toDate(picker.startDate).format("MMMM D, YYYY"))
             }
           })()
-        </script>
-      <% else %>
-        <%= text_field_tag var, params[var], style: "width: 120px; margin-right: 20px;", autofocus: i == 0 && !var.end_with?("_at") && !params[var], class: "form-control" %>
-      <% end %>
-    <% end %>
-
-    <% if date_vars %>
-      <% date_vars.each do |var| %>
-        <%= hidden_field_tag var, params[var] %>
-      <% end %>
-
-      <%= label_tag nil, date_vars.join(" & ") %>
-      <div class="selectize-control single" style="width: 300px;">
-        <div id="reportrange" class="selectize-input" style="display: inline-block;">
-          <span>Select a time range</span>
-        </div>
-      </div>
-
-      <script>
+      - else
+        = text_field_tag var, params[var], style: "width: 120px; margin-right: 20px;", autofocus: i == 0 && !var.end_with?("_at") && !params[var], class: "form-control"
+    - if date_vars
+      - date_vars.each do |var|
+        = hidden_field_tag var, params[var]
+      = label_tag nil, date_vars.join(" & ")
+      .selectize-control.single{:style => "width: 300px;"}
+        #reportrange.selectize-input{:style => "display: inline-block;"}
+          %span Select a time range
+      :javascript
         function dateStr(daysAgo) {
           return now.clone().subtract(daysAgo || 0, "days").format(format)
         }
@@ -116,9 +99,4 @@
           $("#reportrange").trigger("apply.daterangepicker", picker)
           submitIfCompleted($("#start_time").closest("form"))
         }
-      </script>
-    <% end %>
-
-    <input type="submit" class="btn btn-success" value="Run" style="vertical-align: top;" />
-  </form>
-<% end %>
+    %input.btn.btn-success{:style => "vertical-align: top;", :type => "submit", :value => "Run"}/

data/app/views/blazer/check_mailer/failing_checks.html.haml

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

data/app/views/blazer/check_mailer/state_change.html.haml

@@ -0,0 +1,31 @@
+!!!
+%html
+  %head
+    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
+  %body{:style => "font-family: 'Helvetica Neue', Arial, Helvetica; font-size: 14px; color: #333;"}
+    %p= link_to "View", query_url(@check.query_id, host: Blazer.host)
+    - if @error
+      %p= @error
+    - elsif @rows_count > 0 && @check_type == "bad_data"
+      %p
+        - if @rows_count <= 10
+          = pluralize(@rows_count, "row")
+        - else
+          Showing 10 of #{@rows_count} rows
+      %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
+        %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
+                  = value
+      - if @columns.size > 5
+        %p{:style => "color: #999;"} Only first 5 columns shown

data/app/views/blazer/checks/_form.html.haml

@@ -0,0 +1,51 @@
+= form_for @check, html: {class: "small-form"} do |f|
+  - unless @check.respond_to?(:check_type) || @check.respond_to?(:invert)
+    %p.text-muted Checks are designed to identify bad data. A check fails if there are any results.
+  - if @check.errors.any?
+    .alert.alert-danger= @check.errors.full_messages.first
+  .form-group
+    = f.label :query_id, "Query"
+    .hide
+      = f.select :query_id, [], {include_blank: true}
+    :javascript
+      #{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");
+  - if @check.respond_to?(:check_type)
+    .form-group
+      = f.label :check_type, "Alert if"
+      .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
+      :javascript
+        $("#check_check_type").selectize({}).parent().removeClass("hide");
+  - elsif @check.respond_to?(:invert)
+    .form-group
+      = f.label :invert, "Fails if"
+      .hide
+        = f.select :invert, [["Any results (bad data)", false], ["No results (missing data)", true]]
+      :javascript
+        $("#check_invert").selectize({}).parent().removeClass("hide");
+  - if @check.respond_to?(:schedule) && Blazer.check_schedules
+    .form-group
+      = f.label :schedule, "Run every"
+      .hide
+        = f.select :schedule, Blazer.check_schedules.map { |v| [v, v] }
+      :javascript
+        $("#check_schedule").selectize({}).parent().removeClass("hide");
+  .form-group
+    = f.label :emails
+    = f.text_field :emails, placeholder: "Optional, comma separated", class: "form-control"
+  - if Blazer.slack?
+    .form-group
+      = f.label :slack_channels
+      = f.text_field :slack_channels, placeholder: "Optional, comma separated", class: "form-control"
+  %p.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"
+    = f.submit "Save", class: "btn btn-success"
+    = link_to "Back", :back, class: "btn btn-link"

data/app/views/blazer/checks/edit.html.haml

@@ -0,0 +1,2 @@
+- blazer_title "Edit Check"
+= render partial: "form"

data/app/views/blazer/checks/index.html.haml

@@ -0,0 +1,48 @@
+- blazer_title "Checks"
+#header
+  .pull-right{:style => "line-height: 34px;"}
+    .btn-group
+      = link_to "New Check", new_check_path, class: "btn btn-info"
+      %button.btn.btn-info.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button"}
+        %span.caret
+        %span.sr-only Toggle Dropdown
+      %ul.dropdown-menu
+        %li= link_to "Home", root_path
+        %li.divider{:role => "separator"}
+        %li= link_to "New Query", new_query_path
+        %li= link_to "New Dashboard", new_dashboard_path
+  %input#search.search.form-control{:placeholder => "Start typing a query or state", :style => "width: 300px; display: inline-block;", :type => "text"}/
+%table#checks.table
+  %thead
+    %tr
+      %th Query
+      %th{:style => "width: 10%;"} State
+      %th{:style => "width: 10%;"} Run
+      %th{:style => "width: 20%;"} Notify
+      %th{:style => "width: 15%;"}
+  %tbody
+    - @checks.each do |check|
+      %tr
+        %td
+          = link_to check.query.name, check.query
+          %span.text-muted= check.try(:check_type).to_s.gsub("_", " ")
+        %td
+          - if check.state
+            %small{:class => "check-state #{check.state.parameterize.gsub("-", "_")}"}= check.state.upcase
+        %td= check.schedule if check.respond_to?(:schedule)
+        %td
+          %ul.list-unstyled{:style => "margin-bottom: 0; word-break: break-all;"}
+            - check.split_emails.each do |email|
+              %li= email
+            - check.split_slack_channels.each do |channel|
+              %li= channel
+        %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"
+:javascript
+  $("#search").on("keyup", function() {
+    var value = $(this).val().toLowerCase()
+    $("#checks tbody tr").filter( function() {
+      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
+    })
+  }).focus()

data/app/views/blazer/checks/new.html.haml

@@ -0,0 +1,2 @@
+- blazer_title "New Check"
+= render partial: "form"

data/app/views/blazer/dashboards/_form.html.haml

@@ -0,0 +1,64 @@
+= form_for @dashboard, url: (@dashboard.persisted? ? dashboard_path(@dashboard, variable_params) : dashboards_path(variable_params)), html: {id: "app", class: "small-form"} do |f|
+  - if @dashboard.errors.any?
+    .alert.alert-danger= @dashboard.errors.full_messages.first
+  .form-group
+    = f.label :name
+    = f.text_field :name, class: "form-control"
+  .form-group{"v-show" => "queries.length"}
+    = f.label :charts
+    %ul#queries.list-group
+      %li.list-group-item{":key" => "query.id", "v-cloak" => "", "v-for" => "(query, index) in queries"}
+        %span.glyphicon.glyphicon-remove{"aria-hidden" => "true", "v-on:click" => "remove(index)"}
+        {{ query.name }}
+        %input{":value" => "query.id", :name => "query_ids[]", :type => "hidden"}/
+  .form-group{"v-cloak" => ""}
+    = f.label :query_id, "Add Chart"
+    = select_tag :query_id, nil, {include_blank: true, placeholder: "Select chart"}
+  %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"
+    = f.submit "Save", class: "btn btn-success"
+    = link_to "Back", :back, class: "btn btn-link"
+:javascript
+  #{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])
+    }
+  })

data/app/views/blazer/dashboards/edit.html.haml

@@ -0,0 +1,2 @@
+- blazer_title "Edit Dashboard"
+= render partial: "form"

data/app/views/blazer/dashboards/new.html.haml

@@ -0,0 +1,2 @@
+- blazer_title "New Dashboard"
+= render partial: "form"

data/app/views/blazer/dashboards/show.html.haml

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

data/app/views/blazer/queries/{_form.html.erb → _form.html.haml}

@@ -1,81 +1,56 @@
-<% 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" style="margin-bottom: 8px;">
-          <div class="pull-left" style="margin-top: 8px;">
-            <%= link_to "Back", :back %>
-            <a :href="schemaPath" target="_blank" style="margin-left: 40px;">Schema</a>
-          </div>
-
-          <%= 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>
-        <hr>
-        <%= render partial: "tips" %>
-      </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>
-        <%- if @assignees.any? -%>
-          <div class="form-group">
-            <%= f.label :assignees %>
-            <%= f.collection_select :assignee_ids, @assignees, :first, :last, {}, { placeholder: "Assignees", style: "height: 80px;", class: "form-control", multiple: true } %>
-          </div>
-        <%- end -%>
-        <div class="form-group 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-bottom: 0;">
-              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 "")] }] %>
+- if @query.errors.any?
+  .alert.alert-danger= @query.errors.full_messages.first
+#app{"v-cloak" => ""}
+  = form_for @query, url: (@query.persisted? ? query_path(@query, variable_params) : queries_path(variable_params)), html: {autocomplete: "off"} do |f|
+    .row
+      #statement-box.col-xs-8
+        .form-group
+          = f.hidden_field :statement
+          #editor-container
+            #editor{":style" => "{ height: editorHeight }"}= @query.statement
+        .form-group.text-right{:style => "margin-bottom: 8px;"}
+          .pull-left{:style => "margin-top: 8px;"}
+            = link_to "Back", :back
+            %a{":href" => "schemaPath", :style => "margin-left: 40px;", :target => "_blank"} Schema
+          = 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;"
+          #tables{:style => "display: inline-block; width: 250px; margin-right: 10px;"}
+            %select#table_names{:placeholder => "Preview table", :style => "width: 240px;"}
+          %a.btn.btn-info{:style => "vertical-align: top; width: 70px;", "v-if" => "!running", "v-on:click" => "run"} Run
+          %a.btn.btn-danger{:style => "vertical-align: top; width: 70px;", "v-if" => "running", "v-on:click" => "cancel"} Cancel
+        %hr/
+        = render partial: "tips"
+      .col-xs-4
+        .form-group
+          = f.label :name
+          = f.text_field :name, class: "form-control"
+        .form-group
+          = f.label :description
+          = f.text_area :description, placeholder: "Optional", style: "height: 80px;", class: "form-control"
+        - if @assignees.any?
+          .form-group
+            = f.label :assignees
+            = f.collection_select :assignee_ids, @assignees, :first, :last, {}, { placeholder: "Assignees", style: "height: 80px;", class: "form-control", multiple: true }
+        .form-group.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"
+          = f.submit @query.persisted? ? "Update" : "Create", class: "btn btn-success"
+        - 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?
+            .alert.alert-info{:style => "margin-bottom: 0;"}
+              Part of #{words.to_sentence}. Be careful when editing.
+  #results
+    %p.text-muted{"v-if" => "running"} Loading...
+    #results-html{":class" => "{ 'query-error': error }", "v-if" => "!running"}
+:javascript
+  #{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",
@@ -308,7 +283,7 @@
 
   function backupSQL() {
     $.ajax({
-      url: "<%= backup_queries_path %>",
+      url: "#{backup_queries_path}",
       method: 'POST',
       data: {
         sql_query: $('#query_statement').val()
@@ -333,5 +308,3 @@
       return false;
     }
   });
-
-</script>