Implement view for filter_grep

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

app/javascript/packs/filter_grep_setting.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import GrepContainer from "./grep_container";
+
+$(document).ready(() => {
+  new Vue({
+    el: "#filter-grep-setting",
+    components: {
+      "grep-container": GrepContainer,
+    },
+    data: function() {
+      return {
+        index: 0
+      };
+    },
+    mounted: function() {
+      this.$on("add-grep-container", this.addGrepContainer);
+      this.$on("remove-grep-container", this.removeGrepContainer);
+    },
+    methods: {
+      addGrepContainer: function(containerType, index) {
+        this.index += 1;
+      },
+      removeGrepContainer: function(containerType, index) {
+        this.index -= 1;
+      }
+    }
+  });
+});

app/javascript/packs/grep_container.js

@@ -0,0 +1,30 @@
+/* global _ */
+"use strict";
+import "lodash/lodash";
+import GrepPattern from "./grep_pattern";
+
+const GrepContainer = {
+  template: "#vue-grep-container",
+  components: {
+    "grep-pattern": GrepPattern
+  },
+  props: [
+    "containerType", // and/or
+    "index",
+  ],
+  filters: {
+    humanize: function(value) {
+      return _.capitalize(value.replace(/_/g, " "));
+    }
+  },
+  methods: {
+    add: function(event) {
+      this.$emit("add-grep-container", this.containerType, this.index);
+    },
+    remove: function(event) {
+      this.$emit("remove-grep-container", this.containerType, this.index);
+    }
+  }
+};
+
+export { GrepContainer as default };

app/javascript/packs/grep_pattern.js

@@ -0,0 +1,36 @@
+/* global _ */
+"use strict";
+import "lodash/lodash";
+
+const GrepPattern = {
+  template: "#vue-grep-pattern",
+  props: [
+    "containerType", // and/or
+    "grepType", // regexp/exclude
+    "index",
+  ],
+  data: function() {
+    return {
+      key: null,
+      pattern: null,
+    }
+  },
+
+  filters: {
+    humanize: function(value) {
+      return _.capitalize(value.replace(/_/g, " "));
+    }
+  },
+
+  methods: {
+    inputId: function(name, index) {
+      return `setting_${this.containerType}_${index}_${this.grepType}_0__${name}`;
+    },
+
+    inputName: function(name, index) {
+      return `setting[${this.containerType}[${index}]][${this.grepType}[0]][${name}]`;
+    }
+  }
+};
+
+export { GrepPattern as default };

app/views/fluentd/settings/filter_grep/_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/filter_grep_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/_filter_grep_setting.html.haml

@@ -0,0 +1,23 @@
+- add_javascript_pack_tag("filter_grep_setting")
+
+= render "shared/vue/grep_container"
+
+#filter-grep-setting
+  %grep-container{"v-bind:container-type" => '"and"',
+                  "v-bind:index" => "0",
+                  "v-on:add-grep-container" => "addGrepContainer",
+                  "v-on:remove-grep-container" => "removeGrepContainer"}
+  %template{"v-for" => "n in index"}
+    %grep-container{"v-bind:container-type" => '"and"',
+                    "v-bind:index" => "n",
+                    "v-on:add-grep-container" => "addGrepContainer",
+                    "v-on:remove-grep-container" => "removeGrepContainer"}
+  %grep-container{"v-bind:container-type" => '"or"',
+                  "v-bind:index" => "0",
+                  "v-on:add-grep-container" => "addGrepContainer",
+                  "v-on:remove-grep-container" => "removeGrepContainer"}
+  %template{"v-for" => "n in index"}
+    %grep-container{"v-bind:container-type" => '"or"',
+                    "v-bind:index" => "n",
+                    "v-on:add-grep-container" => "addGrepContainer",
+                    "v-on:remove-grep-container" => "removeGrepContainer"}

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

@@ -0,0 +1,15 @@
+= render "shared/vue/grep_pattern"
+%script{type: "text/x-template", id: "vue-grep-container"}
+  .form-group
+    %a.btn.btn-xs{"v-on:click" => "add", "v-if" => "index == 0"}
+      = icon("fa-plus")
+    %a.btn.btn-xs{"v-on:click" => "remove", "v-if" => "index != 0"}
+      = icon("fa-minus")
+    %label
+      {{ containerType | humanize }}
+    %grep-pattern{"v-bind:container-type" => "containerType",
+                  "v-bind:grep-type" => '"regexp"',
+                  "v-bind:index" => "index"}
+    %grep-pattern{"v-bind:container-type" => "containerType",
+                  "v-bind:grep-type" => '"exclude"',
+                  "v-bind:index" => "index"}

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

@@ -0,0 +1,18 @@
+%script{type: "text/x-template", id: "vue-grep-pattern"}
+  .form-group
+    %label
+      {{ grepType | humanize }}
+    .form-group
+      %label
+        Key
+        %input.form-control{"v-bind:id" => 'inputId("key", index)',
+                            "v-bind:name" => 'inputName("key", index)',
+                            "v-model:lazy" => "key",
+                            "type" => "text"}
+    .form-group
+      %label
+        Pattern
+        %input.form-control{"v-bind:id" => 'inputId("pattern", index)',
+                            "v-bind:name" => 'inputName("pattern", index)',
+                            "v-model:lazy" => "pattern",
+                            "type" => "text"}