out_forward: Display TLS options on form

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>

app/controllers/api/config_definitions_controller.rb

@@ -41,6 +41,12 @@ class Api::ConfigDefinitionsController < ApplicationController
         advancedOptions: transport_advanced_options
       }
     end
+
+    if type == "output" && name == "forward"
+      tls_options = build_options(target, target.tls_options)
+      options[:tlsOptions] = tls_options
+    end
+
     render json: options
   end
 

app/javascript/packs/config_field.js

@@ -63,10 +63,19 @@ const ConfigField = {
 
   methods: {
     inputId: function(pluginType, option) {
-      return `setting_${pluginType}_0__${option.name}`
+      if (pluginType === "output") {
+        return `setting_${option.name}`
+      } else {
+        return `setting_${pluginType}_0__${option.name}`
+      }
+
     },
     inputName: function(pluginType, option) {
-      return `setting[${pluginType}[0]][${option.name}]`
+      if (pluginType === "output") {
+        return `setting[${option.name}]`
+      } else {
+        return `setting[${pluginType}[0]][${option.name}]`
+      }
     },
     checked: function(checked) {
       if (checked === true || checked === "true") {

app/javascript/packs/transport_config.js

@@ -0,0 +1,67 @@
+'use strict'
+
+import ConfigField from './config_field'
+
+$(document).ready(() => {
+  new Vue({
+    el: '#transport-config',
+    components: {
+      "config-field": ConfigField
+    },
+    props: [
+      "transportType",
+    ],
+    propsData: {
+      "transportType": "tcp"
+    },
+    data: function() {
+      return {
+        pluginType: null,
+        pluginName: null,
+        options: ["tcp", "tls"],
+        tlsOptions: []
+      }
+    },
+    computed: {
+      token: function() {
+        return Rails.csrfToken()
+      }
+    },
+    filters: {
+      toUpper: function(value) {
+        return _.toUpper(value)
+      }
+    },
+    beforeMount: function() {
+      this.pluginType = this.$el.attributes.pluginType.nodeValue
+      this.pluginName = this.$el.attributes.pluginName.nodeValue
+    },
+    mounted: function() {
+    },
+    methods: {
+      onChange: function() {
+        console.log(this.pluginType, this.pluginName, this.transportType)
+        this.updateSection()
+      },
+
+      updateSection: function() {
+        if (this.transportType === "tcp") {
+          return
+        }
+        $.ajax({
+          method: "GET",
+          url: "/api/config_definitions",
+          headers: {
+            'X-CSRF-Token': this.token
+          },
+          data: {
+            type: this.pluginType,
+            name: this.pluginName
+          }
+        }).then((data) => {
+          this.tlsOptions = data.tlsOptions
+        })
+      }
+    }
+  })
+})

app/models/fluentd/setting/out_forward.rb

@@ -39,9 +39,20 @@ class Fluentd
       def hidden_options
         [
           :inject, :buffer,
+          # Deprecated options
           :host, :port,
-          # We don't support TLS configuration via fluentd-ui for now.
-          :transport, :tls_version, :tls_ciphers, :tls_insecure_mode, :tls_verify_hostname, :tls_cert_path
+          :transport
+        ].concat(tls_options) # Hide TLS related options to customize view
+      end
+
+      def tls_options
+        [
+          :tls_version,
+          :tls_ciphers,
+          :tls_insecure_mode,
+          :tls_allow_self_signed_cert,
+          :tls_verify_hostname,
+          :tls_cert_path
         ]
       end
     end

app/views/fluentd/settings/out_forward/_form.html.haml

@@ -0,0 +1,18 @@
+= render "shared/setting_errors"
+
+- # NOTE: plugin_setting_form_action_url is defined at SettingConcern
+= form_with(model: setting, scope: "setting", url: plugin_setting_form_action_url(fluentd), local: true, class: "ignore-rails-error-div", builder: FluentdFormBuilder) do |f|
+  - setting.common_options.each do |key|
+    = f.field(key)
+
+  = render "shared/vue/transport_config", setting: setting
+
+  .card.card-body.bg-light
+    %h4{"data-toggle" => "collapse", "href" => "#advanced-setting"}
+      = icon('fa-caret-down')
+      = t('terms.advanced_setting')
+    #advanced-setting.collapse
+      - setting.advanced_options.each do |key|
+        = f.field(key)
+
+  = f.submit t('fluentd.common.finish'), class: "btn btn-lg btn-primary pull-right"

app/views/shared/vue/_transport_config.html.haml

@@ -0,0 +1,22 @@
+- add_javascript_pack_tag("transport_config")
+
+= render "shared/vue/config_field"
+
+#transport-config.form-group.card.card-body.bg-light{"pluginType" => setting.plugin_type,
+                                                     "pluginName" => setting.plugin_name}
+  %h4
+    Transport
+  .form-group
+    %select{"class" => "form-control",
+            "v-model" => "transportType",
+            "v-on:change" => "onChange"}
+      %option{"v-for" => "option in options",
+              "v-bind:value" => "option",
+              "v-bind:selected" => "transportType === option"}
+        {{ option | toUpper }}
+  %p{"v-if" => 'transportType === "tcp"'}
+    Nothing to configure
+  %template(v-else)
+    %template{"v-for" => "option in tlsOptions"}
+      %config-field{"v-bind:plugin-type" => "pluginType",
+                    "v-bind:option" => "option"}