blazer 1.7.0 → 1.7.1

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

@@ -12,17 +12,15 @@
         </div>
       </div>
       <div class="form-group text-right">
-        <div class="pull-left" style="margin-top: 6px;">
+        <div class="pull-left" style="margin-top: 9px;">
           <%= link_to "Back", :back %>
         </div>
+        <%= link_to "Schema", "#", target: "_blank", id: "view-schema", style: "margin-right: 10px;" %>
         <%= f.select :data_source, Blazer.data_sources.values.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;" class="hide">
           <%= render partial: "tables" %>
         </div>
         <script>
-          function updatePreviewSelect() {
-            $("#tables").load("<%= tables_queries_path %>?" + $.param({data_source: $("#query_data_source").val()}));
-          }
           updatePreviewSelect();
           $("#query_data_source").selectize().change(updatePreviewSelect);
         </script>
@@ -40,6 +38,7 @@
         <%= 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" %>
@@ -65,142 +64,7 @@
 <div id="results"></div>
 
 <script>
-  var 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) {
-      $("#run").click();
-    },
-    readOnly: false // false if this command should not apply in readOnly mode
-  });
-  // fix command+L
-  editor.commands.removeCommands(["gotoline"]);
-
- // http://stackoverflow.com/questions/11584061/
- function adjustHeight() {
-    var lines = editor.getSession().getScreenLength();
-    if (lines < 9) {
-      lines = 9;
-    }
-
-    var newHeight = (lines + 1) * 16;
-    $("#editor").height(newHeight.toString() + "px");
-    editor.resize();
-  };
-
-  function getSQL() {
-    var selectedText = editor.getSelectedText();
-    var text = selectedText.length < 10 ? editor.getValue() : selectedText;
-    return text.replace(/\n/g, "\r\n");
-  }
-
-  function getErrorLine() {
-    var error_line = /LINE (\d+)/g.exec($("#results").find('.alert-danger').text());
-
-    if (error_line) {
-      error_line = parseInt(error_line[1], 10);
-      if (editor.getSelectedText().length >= 10) {
-        error_line += editor.getSelectionRange().start.row;
-      }
-      return error_line;
-    }
-  }
-
-  editor.getSession().on("change", adjustHeight);
-  adjustHeight();
-  $("#editor").show();
-  editor.focus();
-
-  var error_line = null;
-  var runningQuery;
   var params = <%= raw blazer_json_escape(variable_params.to_json) %>;
   var previewStatement = <%= raw blazer_json_escape(Hash[Blazer.data_sources.map { |k, v| [k, v.preview_statement] }].to_json) %>;
-
-
-  function queryDone() {
-    runningQuery = null
-    $("#run").removeClass("hide")
-    $("#cancel").addClass("hide")
-  }
-
-  $("#cancel").click( function (e) {
-    e.preventDefault()
-
-    cancelQuery(runningQuery)
-    queryDone()
-
-    $("#results").html("")
-  })
-
-  $(window).unload(function() {
-    if (runningQuery) {
-      remoteCancelQuery(runningQuery)
-    }
-  })
-
-  $("#run").click( function (e) {
-    e.preventDefault();
-
-    $(this).addClass("hide")
-    $("#cancel").removeClass("hide")
-
-    if (error_line) {
-      editor.getSession().removeGutterDecoration(error_line - 1, "error");
-      error_line = null;
-    }
-
-    $("#results").html('<p class="text-muted">Loading...</p>');
-
-    var data = $.extend({}, params, {statement: getSQL(), data_source: $("#query_data_source").val()});
-
-    runningQuery = {};
-
-    runQuery(data, function (data) {
-      queryDone()
-
-      $("#results").html(data);
-
-      error_line = getErrorLine();
-      if (error_line) {
-        editor.getSession().addGutterDecoration(error_line - 1, "error");
-        editor.scrollToLine(error_line, true, true, function () {});
-        editor.gotoLine(error_line, 0, true);
-        editor.focus();
-      }
-    }, function (data) {
-      // TODO show error
-      queryDone()
-    }, runningQuery);
-  });
-
-  $(document).on("change", "#table_names", function () {
-    var val = $(this).val();
-    if (val.length > 0) {
-      var dataSource = $("#query_data_source").val();
-      editor.setValue(previewStatement[dataSource].replace("{table}", val), 1);
-      $("#run").click();
-    }
-  });
-
-  $("form.the_form").on("submit", function() {
-    $("#query_statement").val(editor.getValue());
-    return true;
-  });
-
-  preventBackspaceNav();
+  showEditor();
 </script>

data/app/views/blazer/queries/home.html.erb

@@ -25,7 +25,7 @@
         </ul>
       </div>
     </div>
-    <input type="text" placeholder="Start typing a query or person" style="width: 300px; display: inline-block;" autofocus=true class="search form-control" />
+    <input type="text" v-model="searchTerm" placeholder="Start typing a query or person" style="width: 300px; display: inline-block;" autofocus=true class="search form-control" />
   </div>
 
   <table class="table">
@@ -35,56 +35,107 @@
         <th style="width: 20%; text-align: right;">Mastermind</th>
       </tr>
     </thead>
-    <tbody class="list">
-      <tr id="search-item">
+    <tbody class="list" v-cloak>
+      <tr v-for="query in visibleItems">
         <td>
-          <span class="name"></span>
-          <span class="vars"></span>
-          <span class="hide"></span>
+          <span v-bind:class="{dashboard: query.dashboard}"><a :href="itemPath(query)">{{query.name}}</a></span>
+          <span class="vars">{{query.vars}}</span>
         </td>
-        <td class="creator"></td>
+        <td class="creator">{{query.creator}}</td>
       </tr>
     </tbody>
   </table>
+
+  <p v-if="more" class="text-muted">Loading...</p>
 </div>
 
 <script>
-  var options = {
-    valueNames: ["name", "vars", "hide", "creator"],
-    item: "search-item",
-    page: 200,
-    indexAsync: true
-  };
-  var dashboardValues = <%= blazer_json_escape(@dashboards.to_json).html_safe %>;
-  var queryValues = <%= blazer_json_escape(@queries.to_json).html_safe %>;
-  var queryList = new List("queries", options, dashboardValues);
-  queryList.add(queryValues);
-
-  var queryIds = {};
-  for (var i = 0; i < queryValues.length; i++) {
-    queryIds[queryValues[i].id] = true;
+  var prepareSearch = function (list) {
+    var i, q
+    for (i = 0; i < list.length; i++) {
+      q = list[i]
+      q.searchStr = prepareQuery(q.name + q.creator)
+    }
   }
-</script>
 
-<% if @more %>
-  <p id="loading" class="text-muted">Loading...</p>
-  <script>
-    $.getJSON("<%= queries_path %>", function (data) {
-      var i, j, newValues, val, size = 500;
-      $("#loading").remove();
-      for (i = 0; i < data.length / size; i++) {
-        newValues = [];
-        for (j = 0; j < size; j++) {
-          val = data[i * size + j];
-          if (!val) {
-            break;
+  var prepareQuery = function (str) {
+    return str.toLowerCase().replace(/\W+/g, "")
+  }
+
+  var app = new Vue({
+    el: "#queries",
+    data: {
+      searchTerm: "",
+      more: gon.more,
+      updateCounter: 0
+    },
+    created: function() {
+      this.listItems = gon.dashboards.concat(gon.queries)
+
+      prepareSearch(this.listItems)
+
+      this.queryIds = {}
+      for (i = 0; i < gon.queries.length; i++) {
+        this.queryIds[gon.queries[i].id] = true
+      }
+
+      if (this.more) {
+        var _this = this
+
+        $.getJSON(Routes.blazer_queries_path(), function (data) {
+          var i, j, newValues, val, size = 500;
+
+          var newValues = []
+          for (j = 0; j < data.length; j++) {
+            val = data[j]
+            if (val && !_this.queryIds[val.id]) {
+              newValues.push(val)
+            }
           }
-          if (!queryIds[val.id]) {
-            newValues.push(val);
+
+          prepareSearch(newValues)
+
+          _this.listItems = _this.listItems.concat(newValues)
+          _this.more = false
+          // hack to get to update
+          _this.updateCounter++
+        })
+      }
+    },
+    computed: {
+      visibleItems: function () {
+        // hack to get to update
+        this.updateCounter
+
+        var pageSize = 200
+        var q, i
+
+        if (this.searchTerm.length > 0) {
+          var term = prepareQuery(this.searchTerm)
+          var items = []
+          for (i = 0; i < this.listItems.length; i++) {
+            q = this.listItems[i]
+            if (q.searchStr.indexOf(term) !== -1) {
+              items.push(q)
+              if (items.length == pageSize) {
+                break
+              }
+            }
           }
+          return items
+        } else {
+          return this.listItems.slice(0, pageSize)
+        }
+      }
+    },
+    methods: {
+      itemPath: function (item) {
+        if (item.dashboard) {
+          return Routes.blazer_dashboard_path(item.to_param)
+        } else {
+          return Routes.blazer_query_path(item.to_param)
         }
-        queryList.add(newValues);
       }
-    });
-  </script>
-<% end %>
+    }
+  })
+</script>

data/app/views/blazer/queries/show.html.erb

@@ -37,105 +37,9 @@
   <p><%= @query.description %></p>
 <% end %>
 
-<% if @bind_vars.any? %>
-  <form id="bind" method="get" action="<%= query_path(@query, variable_params) %>" class="form-inline" style="margin-bottom: 10px;">
-    <% date_vars = ["start_time", "end_time"] %>
-    <% if (date_vars - @bind_vars).empty? %>
-      <% @bind_vars = @bind_vars - date_vars %>
-    <% else %>
-      <% date_vars = nil %>
-    <% end %>
+<%= render partial: "blazer/variables", locals: {action: query_path(@query)} %>
 
-    <% @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;" %>
-        <script>
-          $("#<%= var %>").selectize({
-            create: true
-          });
-        </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 var.end_with?("_at") %>
-          <script>
-            $("#<%= var %>").daterangepicker({singleDatePicker: true, locale: {format: "YYYY-MM-DD"}});
-          </script>
-        <% end %>
-      <% 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>
-        var timeZone = "<%= Blazer.time_zone.tzinfo.name %>";
-        var format = "YYYY-MM-DD";
-        var now = moment.tz(timeZone);
-
-        function dateStr(daysAgo) {
-          return now.clone().subtract(daysAgo || 0, "days").format(format);
-        }
-
-        function toDate(time) {
-          return moment.tz(time.format(format), timeZone);
-        }
-
-        function setTimeInputs(start, end) {
-          $("#start_time").val(toDate(start).utc().format());
-          $("#end_time").val(toDate(end).endOf("day").utc().format());
-        }
-
-        $('#reportrange').daterangepicker(
-          {
-            ranges: {
-             "Today": [dateStr(), dateStr()],
-             "Last 7 Days": [dateStr(6), dateStr()],
-             "Last 30 Days": [dateStr(29), dateStr()]
-            },
-            locale: {
-              format: format
-            },
-            startDate: dateStr(29),
-            endDate: dateStr(),
-            opens: "right"
-          },
-          function(start, end) {
-            setTimeInputs(start, end);
-            submitIfCompleted($("#start_time").closest("form"));
-          }
-        ).on('apply.daterangepicker', function(ev, picker) {
-          setTimeInputs(picker.startDate, picker.endDate);
-          $('#reportrange span').html(toDate(picker.startDate).format('MMMM D, YYYY') + ' - ' + toDate(picker.endDate).format('MMMM D, YYYY'));
-        })
-
-        if ($("#start_time").val().length > 0) {
-          var picker = $("#reportrange").data('daterangepicker');
-          picker.setStartDate(moment.tz($("#start_time").val(), timeZone));
-          picker.setEndDate(moment.tz($("#end_time").val(), timeZone));
-          $("#reportrange").trigger('apply.daterangepicker', picker)
-        } else {
-          var picker = $("#reportrange").data('daterangepicker');
-          $("#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 %>
-
-<pre style="max-height: 236px; overflow: hidden;" onclick="this.style.maxHeight = 'none';"><code><%= @statement %></code></pre>
+<pre id="code"><code><%= @statement %></code></pre>
 
 <% if @success %>
   <div id="results">
@@ -163,13 +67,7 @@
     // do not highlight really long queries
     // this can lead to performance issues
     if ($("code").text().length < 10000) {
-      hljs.initHighlightingOnLoad();
+      hljs.highlightBlock(document.getElementById("code"));
     }
   </script>
 <% end %>
-
-<script>
-  $(".form-inline input, .form-inline select").change( function () {
-    submitIfCompleted($(this).closest("form"));
-  });
-</script>

data/app/views/layouts/blazer/application.html.erb

@@ -7,10 +7,7 @@
 
     <%= stylesheet_link_tag "blazer/application" %>
     <%= javascript_include_tag "blazer/application" %>
-    <script>
-      var runQueriesPath = <%= run_queries_path.to_json.html_safe %>;
-      var cancelQueriesPath = <%= cancel_queries_path.to_json.html_safe %>;
-    </script>
+    <%= Gon::Base.render_data %>
     <% if blazer_maps? %>
       <%= stylesheet_link_tag "https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css" %>
       <%= javascript_include_tag "https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js" %>