Refactor check editor ui

- switch to tab-based
- support detail request payload and auth

app/controllers/checks_controller.rb

@@ -26,16 +26,16 @@ def create
   end
 
   def update
-    if @check.update(check_params)
+    if @check.update(format_check_params)
       redirect_to @check, notice: 'Check was successfully updated'
     else
       render :edit
     end
   end
 
   def destroy
-    @check.destroy
-    redirect_to checks_url, notice: 'Check was successfully destroyed.'
+    DestroyCheckWorker.perform_async(@check.id.to_s)
+    redirect_to checks_url, notice: t('check.destroy_schedule')
   end
 
   private
@@ -51,16 +51,28 @@ def set_check
   end
 
   def check_params
-    params.require(:check).permit(:name, :uri, :type)
+    params.require(:check).permit(:name, :uri, :type, :require_auth,
+                                  :http_method, :body, :body_type,
+                                  :auth_username, :auth_password, :http_headers)
   end
 
   def build_check
-    @check = Check.new(check_params)
+    @check = Check.new(format_check_params)
     auto_prefix
     @check.user = current.user
     @check.team = current.team
   end
 
+  def format_check_params
+    input = check_params
+
+    if input['http_headers'].is_a?(String)
+      input['http_headers'] = input['http_headers'].split("\n").map(&:strip).reject(&:empty?)
+    end
+
+    input
+  end
+
   def auto_prefix
     case @check.type
     when Check::TYPE_HTTP

app/helpers/check_helper.rb

@@ -5,6 +5,18 @@ def format_type_enum_for_select(check)
     check.type_enum.map { |v| [v, v] }.freeze
   end
 
+  def format_select_for_httpmethod(check)
+    Check::HTTP_METHODS.map { |v| [v, v] }
+  end
+
+  def hide_form_for_check_type(check, type)
+    if check.persisted?
+      return check.type == type ? '' : 'is-hidden'
+    end
+
+    'is-hidden'
+  end
+
   def first_dow_one_year_ago
     d = Time.current.end_of_week
     d - 364.days

app/javascript/controllers/check_controller.js

@@ -4,6 +4,7 @@ export default class extends Controller {
   static targets = [ "tcpForm", "httpForm", "cronForm", "heartbeatForm" ]
 
   connect() {
+    this.hideAuth = true
   }
 
   hide() {
@@ -30,4 +31,8 @@ export default class extends Controller {
         break;
     }
   }
+
+  toggleAuth() {
+    this.hideAuth = !this.hideAuth
+  }
 }

app/javascript/controllers/tabs_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "tab", "panel" ]
+
+  change(event) {
+    this.index = this.tabTargets.indexOf(event.currentTarget)
+  }
+
+  initialize() {
+    this.showTab()
+  }
+
+  showTab() {
+    this.tabTargets.forEach((tab, index) => {
+      const panel = this.panelTargets[index]
+      console.log(panel.getAttribute("href"))
+      history.pushState("changetab", panel.getAttribute("title"), panel.getAttribute("href"))
+      tab.classList.toggle("is-active", index == this.index)
+      panel.classList.toggle("is-hidden", index != this.index)
+    })
+  }
+
+  get index() {
+    return parseInt(this.data.get("index") || 0)
+  }
+
+  set index(value) {
+    this.data.set("index", value)
+    this.showTab()
+  }
+}

app/javascript/packs/application.js

@@ -10,6 +10,9 @@
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 
+import Rails from '@rails/ujs';
+Rails.start();
+
 require.context('../images', true);
 import '../src/application.scss';
 import * as Chartist from 'chartist';

app/javascript/packs/dashboard.js

@@ -10,6 +10,9 @@
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 
+import Rails from '@rails/ujs';
+Rails.start();
+
 require.context('../images', true);
 import '../src/application.scss';
 import * as Chartist from 'chartist';

app/javascript/src/checks.scss

@@ -3,7 +3,6 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 @import "common/_chartist-settings.scss";
 @import "chartist/dist/scss/chartist.scss";
-@import "balloon-css/src/balloon.scss";
 //@import "sass/utilities/initial-variables.sass";
 @import "common/_var.scss";
 

app/models/check.rb

@@ -13,6 +13,19 @@ class Check
   TYPE_HEARTBEAT = 'heartbeat'
   TYPES = [TYPE_HTTP, TYPE_TCP, TYPE_HEARTBEAT].freeze
 
+  HTTP_METHOD_HEAD = 'HEAD'
+  HTTP_METHOD_GET = 'GET'
+  HTTP_METHOD_POST = 'POST'
+  HTTP_METHOD_PUT = 'PUT'
+  HTTP_METHODS = [
+    HTTP_METHOD_HEAD,
+    HTTP_METHOD_GET,
+    HTTP_METHOD_POST,
+    HTTP_METHOD_PUT,
+  ].freeze
+
+  BODY_TYPES = %w(none raw josn form).freeze
+
   field :name, type: String
   field :uri, type: String
   field :type, type: String
@@ -25,6 +38,15 @@ class Check
   field :status_page_enable, type: Boolean
   field :status_page_domain
 
+  # Check payload
+  field :http_method, type: String
+  field :body_type, type: String
+  field :body, type: String
+  field :http_headers, type: Array
+  field :require_auth, type: Boolean
+  field :auth_username, type: String
+  field :auth_password, type: String
+
   belongs_to :user
   has_many :assertions, dependent: :destroy
   has_many :incidents, dependent: :destroy
@@ -38,6 +60,7 @@ class Check
   validates_presence_of :name, :uri, :type
   validates :type, inclusion: { in: TYPES }
   validates :uri, format: URI.regexp(%w[tcp udp http https])
+  validates :body_type, inclusion: { in: BODY_TYPES }
 
   def type_enum
     TYPES
@@ -65,4 +88,9 @@ def fetch_receivers
       nil
     end.select(&:present?)
   end
+
+  # TODO: Extract this method out
+  def http_headers_to_text_field
+    http_headers&.join("\n")
+  end
 end