blazer 3.4.0 → 3.5.0

data/app/helpers/blazer/base_helper.rb

@@ -29,7 +29,7 @@ module Blazer
     end
 
     def blazer_js_var(name, value)
-      "var #{name} = #{json_escape(value.to_json(root: false))};".html_safe
+      "const #{name} = #{json_escape(value.to_json(root: false))};".html_safe
     end
 
     def blazer_series_name(k)

data/app/models/blazer/check.rb

@@ -10,48 +10,16 @@ module Blazer
     before_validation :set_state
     before_validation :fix_emails
 
-    def split_emails
-      emails.to_s.downcase.split(",").map(&:strip)
-    end
-
-    def split_slack_channels
-      if Blazer.slack?
-        slack_channels.to_s.downcase.split(",").map(&:strip)
-      else
-        []
-      end
-    end
-
     def update_state(result)
-      check_type =
-        if respond_to?(:check_type)
-          self.check_type
-        elsif respond_to?(:invert)
-          invert ? "missing_data" : "bad_data"
-        else
-          "bad_data"
-        end
-
-      message = result.error
+      check_type = computed_check_type
 
-      self.state =
+      self.state, message =
         if result.timed_out?
-          "timed out"
+          ["timed out", result.error]
         elsif result.error
-          "error"
-        elsif check_type == "anomaly"
-          anomaly, message = result.detect_anomaly
-          if anomaly.nil?
-            "error"
-          elsif anomaly
-            "failing"
-          else
-            "passing"
-          end
-        elsif result.rows.any?
-          check_type == "missing_data" ? "passing" : "failing"
+          ["error", result.error]
         else
-          check_type == "missing_data" ? "failing" : "passing"
+          Blazer.check_types.fetch(check_type).fetch(:block).call(result)
         end
 
       self.last_run_at = Time.now if respond_to?(:last_run_at=)
@@ -68,37 +36,47 @@ module Blazer
 
       # do not notify on creation, except when not passing
       if (state_was != "new" || state != "passing") && state != state_was
-        Blazer::CheckMailer.state_change(self, state, state_was, result.rows.size, message, result.columns, result.rows.first(10).as_json, result.column_types, check_type).deliver_now if emails.present?
-        Blazer::SlackNotifier.state_change(self, state, state_was, result.rows.size, message, check_type)
+        Blazer.notifiers.each do |notifier|
+          notifier.state_change(check: self, state:, state_was:, result:, message:, check_type:)
+        end
       end
       save! if changed?
     end
 
+    def computed_check_type
+      if respond_to?(:check_type)
+        check_type
+      elsif respond_to?(:invert)
+        invert ? "missing_data" : "bad_data"
+      else
+        "bad_data"
+      end
+    end
+
     private
 
-      def set_state
-        self.state ||= "new"
-      end
+    def set_state
+      self.state ||= "new"
+    end
 
-      def fix_emails
-        # some people like doing ; instead of ,
-        # but we know what they mean, so let's fix it
-        # also, some people like to use whitespace
-        if emails.present?
-          self.emails = emails.strip.gsub(/[;\s]/, ",").gsub(/,+/, ", ")
-        end
+    # TODO rename
+    def fix_emails
+      Blazer.notifiers.each do |notifier|
+        notifier.before_validation(self) if notifier.respond_to?(:before_validation)
       end
+    end
 
-      def validate_emails
-        unless split_emails.all? { |e| e =~ /\A\S+@\S+\.\S+\z/ }
-          errors.add(:base, "Invalid emails")
-        end
+    # TODO rename
+    def validate_emails
+      Blazer.notifiers.each do |notifier|
+        notifier.validate(self) if notifier.respond_to?(:validate)
       end
+    end
 
-      def validate_variables
-        if query.variables.any?
-          errors.add(:base, "Query can't have variables")
-        end
+    def validate_variables
+      if query && query.variables.any?
+        errors.add(:base, "Query can't have variables")
       end
+    end
   end
 end

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

@@ -1,4 +1,4 @@
-<div class="btn-group" style="vertical-align: top; margin-right: 5px;">
+<div class="btn-group nav-btn-group">
   <%= link_to "Home", root_path, class: "btn btn-primary" %>
   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="caret"></span>

data/app/views/blazer/_variables.html.erb

@@ -2,14 +2,14 @@
   <% var_params = request.query_parameters %>
   <%= javascript_tag nonce: true do %>
     <%= blazer_js_var "timeZone", Blazer.time_zone.tzinfo.name %>
-    var now = moment.tz(timeZone)
-    var format = "YYYY-MM-DD"
+    const now = moment.tz(timeZone)
+    const format = "YYYY-MM-DD"
 
     function toDate(time) {
       return moment.tz(time.format(format), timeZone)
     }
   <% end %>
-  <form id="bind" method="get" action="<%= action %>" class="form-inline" style="margin-bottom: 15px;">
+  <%= tag.form id: "bind", method: "get", action: action, class: "form-inline", style: "margin-bottom: 15px;" do %>
     <% date_vars = ["start_time", "end_time"] %>
     <% if (date_vars - @bind_vars).empty? %>
       <% @bind_vars = @bind_vars - date_vars %>
@@ -22,39 +22,47 @@
       <% if (data = @smart_vars[var]) %>
         <%= select_tag var, options_for_select([[nil, nil]] + data, selected: var_params[var]), style: "margin-right: 20px; width: 200px; display: none;" %>
         <%= javascript_tag nonce: true do %>
-          $("#<%= var %>").selectize({
-            create: true
-          });
+          (function () {
+            <%= blazer_js_var "varId", var %>
+            new TomSelect(document.getElementById(varId), {
+              create: true,
+              onChange: function () {
+                submitIfCompleted(this.input.closest("form"))
+                this.blur()
+              }
+            })
+          })()
         <% end %>
       <% elsif var.end_with?("_at") || var == "start_time" || var == "end_time" %>
         <%= hidden_field_tag var, 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 class="ts-wrapper single" style="width: 200px;">
+          <%= tag.div id: "#{var}-select", class: "ts-control" do %>
+            <div class="item">Select a date</div>
+          <% end %>
         </div>
 
         <%= javascript_tag nonce: true do %>
-          (function() {
-            var input = $("#<%= var %>")
-            var datePicker = $("#<%= var %>-select")
-            datePicker.daterangepicker({
+          (function () {
+            <%= blazer_js_var "varId", var %>
+            <%= blazer_js_var "selectId", "#{var}-select" %>
+            const input = document.getElementById(varId)
+            const datePicker = document.getElementById(selectId)
+            const picker = new DateRangePicker(datePicker, {
               singleDatePicker: true,
               locale: {format: format},
               autoUpdateInput: false,
               autoApply: true,
-              startDate: input.val().length > 0 ? moment.tz(input.val(), timeZone) : now
+              startDate: input.value.length > 0 ? moment.tz(input.value, timeZone) : now
             })
             // hack to start with empty date
-            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"))
+            datePicker.addEventListener("apply.daterangepicker", function () {
+              datePicker.querySelector(".item").textContent = toDate(picker.startDate).format("MMMM D, YYYY")
+              input.value = toDate(picker.startDate).utc().format()
+              submitIfCompleted(input.closest("form"))
             })
-            if (input.val().length > 0) {
-              var picker = datePicker.data("daterangepicker")
-              datePicker.find("span").html(toDate(picker.startDate).format("MMMM D, YYYY"))
+            if (input.value.length > 0) {
+              datePicker.querySelector(".item").textContent = toDate(picker.startDate).format("MMMM D, YYYY")
             }
           })()
         <% end %>
@@ -69,23 +77,32 @@
       <% 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 class="ts-wrapper single" style="width: 300px;">
+        <div class="ts-control" id="reportrange">
+          <div class="item">Select a time range</div>
         </div>
       </div>
 
       <%= javascript_tag nonce: true do %>
+        const startTime = document.getElementById("start_time")
+        const endTime = document.getElementById("end_time")
+        const reportrange = document.getElementById("reportrange")
+
         function dateStr(daysAgo) {
           return now.clone().subtract(daysAgo || 0, "days").format(format)
         }
 
         function setTimeInputs(start, end) {
-          $("#start_time").val(toDate(start).utc().format())
-          $("#end_time").val(toDate(end).endOf("day").utc().format())
+          startTime.value = toDate(start).utc().format()
+          endTime.value = toDate(end).endOf("day").utc().format()
+        }
+
+        function applyDateRangePicker(picker) {
+          setTimeInputs(picker.startDate, picker.endDate)
+          reportrange.querySelector(".item").textContent = toDate(picker.startDate).format("MMMM D, YYYY") + " - " + toDate(picker.endDate).format("MMMM D, YYYY")
         }
 
-        $("#reportrange").daterangepicker(
+        const picker = new DateRangePicker(reportrange,
           {
             ranges: {
              "Today": [dateStr(), dateStr()],
@@ -100,28 +117,26 @@
             opens: "right",
             alwaysShowCalendars: true
           },
-          function(start, end) {
+          function (start, end) {
             setTimeInputs(start, end)
-            submitIfCompleted($("#start_time").closest("form"))
+            submitIfCompleted(startTime.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"))
+        )
+        reportrange.addEventListener("apply.daterangepicker", function () {
+          applyDateRangePicker(picker)
         })
 
-        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)
+        if (startTime.value.length > 0) {
+          picker.setStartDate(moment.tz(startTime.value, timeZone))
+          picker.setEndDate(moment.tz(endTime.value, timeZone))
+          applyDateRangePicker(picker)
         } else {
-          var picker = $("#reportrange").data("daterangepicker")
-          $("#reportrange").trigger("apply.daterangepicker", picker)
-          submitIfCompleted($("#start_time").closest("form"))
+          applyDateRangePicker(picker)
+          submitIfCompleted(startTime.closest("form"))
         }
       <% end %>
     <% end %>
 
     <input type="submit" class="btn btn-success" value="Run" style="vertical-align: top;" />
-  </form>
+  <% end %>
 <% end %>

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

@@ -1,3 +1,14 @@
+<%= javascript_tag nonce: true do %>
+  function createSelect(id, options) {
+    const element = document.getElementById(id)
+    const onChange = function () {
+      this.blur()
+    }
+    new TomSelect(element, {onChange, ...options})
+    show(element.closest(".hide"))
+  }
+<% end %>
+
 <%= form_for @check, html: {class: "small-form"} do |f| %>
   <% unless @check.respond_to?(:check_type) || @check.respond_to?(:invert) %>
     <p class="text-muted">Checks are designed to identify bad data. A check fails if there are any results.</p>
@@ -15,8 +26,7 @@
     <%= javascript_tag nonce: true do %>
       <%= blazer_js_var "queries", Blazer::Query.active.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");
+      createSelect("check_query_id", {options: queries, items: items, highlight: false, maxOptions: 100})
     <% end %>
   </div>
 
@@ -24,12 +34,11 @@
     <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 %>
+        <% check_options = Blazer.check_types.reject { |k, _| k == "anomaly" && !Blazer.anomaly_checks }.map { |k, v| [v[:label], k] } %>
         <%= f.select :check_type, check_options %>
       </div>
       <%= javascript_tag nonce: true do %>
-        $("#check_check_type").selectize({}).parent().removeClass("hide");
+        createSelect("check_check_type", {})
       <% end %>
     </div>
   <% elsif @check.respond_to?(:invert) %>
@@ -39,7 +48,7 @@
         <%= f.select :invert, [["Any results (bad data)", false], ["No results (missing data)", true]] %>
       </div>
       <%= javascript_tag nonce: true do %>
-        $("#check_invert").selectize({}).parent().removeClass("hide");
+        createSelect("check_invert", {})
       <% end %>
     </div>
   <% end %>
@@ -51,24 +60,19 @@
         <%= f.select :schedule, Blazer.check_schedules.map { |v| [v, v] } %>
       </div>
       <%= javascript_tag nonce: true do %>
-        $("#check_schedule").selectize({}).parent().removeClass("hide");
+        createSelect("check_schedule", {})
       <% end %>
     </div>
   <% end %>
 
-  <div class="form-group">
-    <%= f.label :emails %>
-    <%= f.text_field :emails, placeholder: "Optional, comma separated", class: "form-control" %>
-  </div>
-
-  <% if Blazer.slack? %>
+  <% Blazer.notifiers.flat_map(&:fields).each do |field| %>
     <div class="form-group">
-      <%= f.label :slack_channels %>
-      <%= f.text_field :slack_channels, placeholder: "Optional, comma separated", class: "form-control" %>
+      <%= f.label field %>
+      <%= f.text_field field, 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 class="text-muted">Notifications 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" %>

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

@@ -1,7 +1,7 @@
 <% blazer_title "Checks" %>
 
 <div id="header">
-  <div class="pull-right" style="line-height: 34px;">
+  <div class="pull-right header-div">
     <div class="btn-group">
       <%= link_to "New Check", new_check_path, class: "btn btn-info" %>
       <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -20,17 +20,17 @@
     </div>
   </div>
 
-  <input id="search" type="text" placeholder="Start typing a query or state" style="width: 300px; display: inline-block;" class="search form-control" />
+  <input id="search" type="text" placeholder="Start typing a query or state" class="search form-control" autofocus />
 </div>
 
 <table id="checks" 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>
+      <th class="state-header">State</th>
+      <th class="run-header">Run</th>
+      <th class="notify-header">Notify</th>
+      <th class="actions-header"></th>
     </tr>
   </thead>
   <tbody>
@@ -39,21 +39,18 @@
         <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>
+            <%= tag.small check.state.upcase, class: ["check-state", check.state.parameterize.gsub("-", "_")] %>
           <% 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>
+          <ul class="list-unstyled notifiers">
+            <% Blazer.notifiers.flat_map { |n| n.notify_list(check) }.each do |item| %>
+              <li><%= item %></li>
             <% end %>
           </ul>
         </td>
-        <td style="text-align: right; padding: 1px;">
+        <td class="check-actions">
           <%= link_to "Edit", edit_check_path(check), class: "btn btn-info" %>
           <%= button_to "Run Now", refresh_query_path(check.query), class: "btn btn-primary" %>
         </td>
@@ -63,10 +60,10 @@
 </table>
 
 <%= javascript_tag nonce: true do %>
-  $("#search").on("keyup", function() {
-    var value = $(this).val().toLowerCase()
-    $("#checks tbody tr").filter( function() {
-      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
-    })
-  }).focus()
+  document.getElementById("search").addEventListener("input", function () {
+    const value = this.value.toLowerCase()
+    for (const check of document.querySelectorAll("#checks tbody tr")) {
+      toggle(check, check.textContent.toLowerCase().includes(value))
+    }
+  })
 <% end %>

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

@@ -7,21 +7,15 @@
     <%= f.label :name %>
     <%= f.text_field :name, class: "form-control" %>
   </div>
-  <div class="form-group" v-show="queries.length">
+  <div class="form-group hide" id="queries-group">
     <%= 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>
+    <ul id="queries" class="list-group"></ul>
   </div>
-  <div class="form-group" v-cloak>
+  <div class="form-group hide">
     <%= 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>
+  <p class="hide" id="dashboard-actions">
     <% if @dashboard.persisted? %>
       <%= link_to "Delete", dashboard_path(@dashboard), method: :delete, "data-confirm" => "Are you sure?", class: "btn btn-danger" %>
     <% end %>
@@ -32,51 +26,72 @@
 
 <%= javascript_tag nonce: true do %>
   <%= blazer_js_var "queries", Blazer::Query.active.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) %>
+  <%= blazer_js_var "dashboardQueries", (@queries || @dashboard.dashboard_queries.order(:position).map(&:query)).as_json(only: [:id, :name]) %>
 
-  var app = Vue.createApp({
-    data: function() {
-      return {
-        queries: dashboardQueries
-      }
-    },
-    methods: {
-      remove: function(index) {
-        this.queries.splice(index, 1)
+  const queriesList = document.getElementById("queries")
+  const queriesGroup = document.getElementById("queries-group")
+  const querySelect = document.getElementById("query_id")
+  const actions = document.getElementById("dashboard-actions")
+
+  function addQuery(query) {
+    const li = document.createElement("li")
+    li.classList.add("list-group-item")
+    li.setAttribute("data-query-id", query.id)
+
+    const span = document.createElement("span")
+    span.classList.add("glyphicon", "glyphicon-remove")
+    span.setAttribute("aria-hidden", "true")
+
+    const input = document.createElement("input")
+    input.setAttribute("type", "hidden")
+    input.setAttribute("name", "query_ids[]")
+    input.setAttribute("value", query.id)
+
+    li.append(span, query.name, input)
+    queriesList.append(li)
+    show(queriesGroup)
+  }
+
+  for (const query of dashboardQueries) {
+    addQuery(query)
+  }
+
+  queriesList.addEventListener("click", function (e) {
+    const target = e.target.closest(".glyphicon-remove")
+    if (target) {
+      target.closest("li").remove()
+
+      if (queriesList.querySelectorAll("li").length == 0) {
+        hide(queriesGroup)
       }
-    },
-    mounted: function() {
-      var app = this
-      $("#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
-              }
-            }
+  new TomSelect(querySelect, {
+    options: queries,
+    highlight: false,
+    maxOptions: 100,
+    onChange: function (id) {
+      if (id) {
+        const item = this.getItem(id)
 
-            app.queries.push({id: val, name: item.text()})
-            this.setValue("")
+        // if duplicate query is added, remove the first one
+        for (const query of queriesList.querySelectorAll("li")) {
+          if (query.getAttribute("data-query-id") == id) {
+            query.remove()
+            break
           }
         }
-      })
-    }
-  })
-  app.config.compilerOptions.whitespace = "preserve"
-  app.mount("#app")
 
-  Sortable.create($("#queries").get(0), {
-    onEnd: function(e) {
-      var app = window.app._component.data()
-      app.queries.splice(e.newIndex, 0, app.queries.splice(e.oldIndex, 1)[0])
+        addQuery({id: id, name: item.textContent})
+        this.setValue("")
+        this.blur()
+      }
     }
   })
+
+  show(querySelect.closest(".hide"))
+  show(actions)
+
+  Sortable.create(queriesList)
 <% end %>