Add separated setting view for AWS credentials

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

app/javascript/packs/aws_credential.js

@@ -0,0 +1,61 @@
+'use strict'
+
+import ConfigField from './config_field'
+
+const AwsCredential = {
+  template: "#vue-aws-credential",
+  components: {
+    "config-field": ConfigField,
+  },
+  props: [
+    "id",
+    "pluginType",
+    "pluginName",
+  ],
+  data: () => {
+    return {
+      credentialType: null,
+      credentialOptions: [],
+      options: [
+        "simple",
+        "assumeRoleCredentials",
+        "instanceProfileCredentials",
+        "sharedCredentials"
+      ]
+    }
+  },
+
+  computed: {
+    token: function() {
+      return Rails.csrfToken()
+    }
+  },
+
+  mounted: function() {
+
+  },
+
+  methods: {
+    onChange: function() {
+      this.updateSection()
+    },
+
+    updateSection: function() {
+      $.ajax({
+        method: "GET",
+        url: "/api/config_definitions",
+        headers: {
+          'X-CSRF-Token': this.token
+        },
+        data: {
+          type: this.pluginType,
+          name: this.pluginName
+        }
+      }).then((data) => {
+        this.credentialOptions = data["awsCredentialOptions"][this.credentialType]
+      })
+    }
+  }
+}
+
+export { AwsCredential as default }

app/javascript/packs/out_s3_setting.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import OwnedPluginForm from "./owned_plugin_form"
+import AwsCredential from "./aws_credential"
+
+$(document).ready(() => {
+  new Vue({
+    el: "#out-s3-setting",
+    components: {
+      "owned-plugin-form": OwnedPluginForm,
+      "aws-credential": AwsCredential
+    }
+  })
+});

app/models/fluentd/setting/out_s3.rb

@@ -26,14 +26,28 @@ class Fluentd
 
       def common_options
         [
-          :pattern, :aws_key_id, :aws_sec_key,
+          :pattern,
           :s3_region, :s3_bucket, :use_ssl, :path,
         ]
       end
 
       def hidden_options
         [
-          :secondary, :inject, :buffer
+          :secondary, :inject, :buffer, :format,
+        ] + aws_credential_options + aws_credential_sections
+      end
+
+      def aws_credential_options
+        [
+          :aws_key_id, :aws_sec_key,
+        ]
+      end
+
+      def aws_credential_sections
+        [
+          :assume_role_credentials,
+          :instance_profile_credentials,
+          :shared_credentials
         ]
       end
     end

app/views/fluentd/settings/out_s3/_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/out_s3_setting", 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/_aws_credential.html.haml

@@ -0,0 +1,22 @@
+= render "shared/vue/config_field"
+
+%script{type: "text/x-template", id: "vue-aws-credential"}
+  .form-group.card.bg-light.mb-3
+    .card-body
+      %label{"for" => "aws-credential"}
+        AWS credential
+      %select{"id" => "aws-credential",
+              "class" => "form-control mb-3",
+              "v-model" => "credentialType",
+              "v-on:change" => "onChange"}
+        %option{"v-for" => "option in options",
+                "v-bind:value" => "option",
+                "v-bind:selected" => "credentialType===option"}
+          {{ option }}
+      %template{"v-for" => "option in credentialOptions"}
+        %template{"v-if" => 'credentialType==="simple"'}
+          %config-field{"v-bind:plugin-type" => '"output"',
+                        "v-bind:option" => "option"}
+        %template(v-else)
+          %config-field{"v-bind:plugin-type" => 'credentialType',
+                        "v-bind:option" => "option"}

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

@@ -0,0 +1,19 @@
+- add_javascript_pack_tag("out_s3_setting")
+
+= render "shared/vue/aws_credential"
+= render "shared/vue/owned_plugin_form"
+
+#out-s3-setting
+  %owned-plugin-form{"v-bind:id" => "'buffer-section'",
+                     "v-bind:options-json" => "'#{Fluent::Plugin::BUFFER_REGISTRY.map.keys.to_json}'",
+                     "v-bind:initial-plugin-name" => "'#{setting.buffer_type}'",
+                     "v-bind:plugin-type" => "'buffer'",
+                     "v-bind:plugin-label" => "'Buffer'"}
+  %owned-plugin-form{"v-bind:id" => "'format-section'",
+                     "v-bind:options-json" => "'#{Fluent::Plugin::FORMATTER_REGISTRY.map.keys.to_json}'",
+                     "v-bind:initial-plugin-name" => "'#{setting.format_type}'",
+                     "v-bind:plugin-type" => "'format'",
+                     "v-bind:plugin-label" => "'Format'"}
+  %aws-credential{"v-bind:id" => "'aws-credential'",
+                  "v-bind:plugin-type" => "'output'",
+                  "v-bind:plugin-name" => "'s3'"}