Use Vuex.Store to share parser plugin parameters

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

app/javascript/packs/config_field.js

@@ -1,21 +1,20 @@
 /* global _ */
 "use strict";
 import "lodash/lodash";
+import store from "./store";
 
 const ConfigField = {
   template: "#vue-config-field",
   props: [
     "pluginType",
     "option",
-    "initialExpression",
-    "initialTimeFormat",
     "initialTextValue",
   ],
 
   data: function() {
     return {
-      expression: null,
-      timeFormat: null,
+      selectedValue: null,
+      checkboxValue: null,
       textValue: null,
     };
   },
@@ -27,13 +26,29 @@ const ConfigField = {
   },
 
   mounted: function() {
-    if (this.option.name === "expression") {
-      this.expression = this.initialExpression;
-    } else if (this.option.name === "time_format") {
-      this.timeFormat = this.initialTimeFormat;
+    if (this.option.type === "enum") {
+      this.selectedValue = this.option.default;
+    } else if (this.option.type === "bool") {
+      this.checkboxValue = this.option.default;
     } else {
       this.textValue = this.initialTextValue || this.option.default;
     }
+
+    if (this.option.name === "message_format") {
+      store.commit("parserParams/setMessageFormat", this.selectedValue);
+    }
+    if (this.option.name === "rfc5424_time_format") {
+      store.commit("parserParams/setRfc5424TimeFormat", this.textValue);
+    }
+    if (this.option.name === "with_priority") {
+      store.commit("parserParams/setWithPriority", this.checkboxValue);
+    }
+    if (this.option.name === "expression") {
+      store.commit("parserParams/Expression", this.textValue);
+    }
+    if (this.option.name === "timeFormat") {
+      store.commit("parserParams/timeFormat", this.textValue);
+    }
   },
 
   updated: function() {
@@ -52,22 +67,26 @@ const ConfigField = {
     });
   },
 
-  watch: {
-    "expression": function(_newValue, _oldValue) {
-      this.$emit("change-parse-config", {
-        "expression": this.expression,
-        "timeFormat": this.timeFormat
-      });
-    },
-    "timeFormat": function(_newValue, _oldValue) {
-      this.$emit("change-parse-config", {
-        "expression": this.expression,
-        "timeFormat": this.timeFormat
-      });
-    }
-  },
-
   methods: {
+    onChange: function(event) {
+      console.log("onChange", this.option.name,  event.target.value);
+      if (this.option.name === "message_format") {
+        store.dispatch("parserParams/updateMessageFormat", event);
+      }
+      if (this.option.name === "rfc5424_time_format") {
+        store.dispatch("parserParams/updateRfc5424TimeFormat", event);
+      }
+      if (this.option.name === "with_priority") {
+        store.dispatch("parserParams/updateWithPriority", event);
+      }
+      if (this.option.name === "expression") {
+        store.dispatch("parserParams/updateExpression", event);
+      }
+      if (this.option.name === "timeFormat") {
+        store.dispatch("parserParams/updateTimeFormat", event);
+      }
+      this.$emit("change-parse-config", {});
+    },
     inputId: function(pluginType, option) {
       if (pluginType === "output") {
         return `setting_${option.name}`;

app/javascript/packs/in_tail_parse.js

@@ -4,13 +4,20 @@ import "lodash/lodash";
 import "popper.js/dist/popper";
 import "bootstrap/dist/js/bootstrap";
 import ParserPluginForm from "./parser_plugin_form";
+import store from "./store";
 
 $(document).ready(() => {
   new Vue({
     el: "#in-tail-parse",
+    store,
     components: {
       "parser-plugin-form": ParserPluginForm
     },
+    props: [
+      "initialPluginName",
+      "pluginType",
+      "pluginLabel",
+    ],
     data: function() {
       return {
         "path": "",
@@ -53,16 +60,17 @@ $(document).ready(() => {
     methods: {
       onChangePluginName: function(name) {
         console.log("#in-tail-parse onChangePluginName", name);
+        console.log("#in-tail-parse onChangePluginName store", this.$store);
         this.parseType = name;
         this.parse = {}; // clear parser plugin configuration
       },
       onChangeParseConfig: function(data) {
-        console.log("#in-tail-parse onChangeParseConfig", data);
-        _.merge(this.parse, data);
+        console.log("#in-tail-parse onChangeParseConfig", store.getters["parserParams/toParams"]);
+        _.merge(this.parse, store.getters["parserParams/toParams"]);
         this.preview();
       },
       onChangeFormats: function(data) {
-        console.log("in_tail_parse:onChangeFormats", data);
+        console.log("#in_tail_parse onChangeFormats", data);
         _.merge(this.parse, data);
         this.preview();
       },
@@ -128,7 +136,7 @@ $(document).ready(() => {
         if (this.previewAjax && this.previewAjax.state() === "pending") {
           this.previewAjax.abort();
         }
-
+        const parseType = store.getters["parserParams/pluginName"];
         this.previewAjax = $.ajax({
           method: "POST",
           url: `${relativeUrlRoot}/api/regexp_preview`,
@@ -136,7 +144,7 @@ $(document).ready(() => {
             "X-CSRF-Token": this.token
           },
           data: {
-            parse_type: _.isEmpty(this.parseType) ? "regexp" : this.parseType,
+            parse_type: _.isEmpty(parseType) ? "regexp" : parseType,
             file: this.path,
             plugin_config: this.parse
           }

app/javascript/packs/parser_plugin_form.js

@@ -4,6 +4,7 @@
 import "lodash/lodash";
 import ParserMultilineForm from "./parser_multiline_form";
 import ConfigField from "./config_field";
+import store from "./store";
 
 const ParserPluginForm = {
   template: "#vue-parser-plugin-form",
@@ -43,6 +44,7 @@ const ParserPluginForm = {
     this.options = JSON.parse(this.optionsJson);
     this.initialParams = JSON.parse(this.initialParamsJson || "{}");
     this.pluginName = this.initialPluginName;
+    store.commit("parserParams/setType", this.initialPluginName);
     this.$once("data-loaded", () => {
       this.updateSection();
     });
@@ -59,11 +61,9 @@ const ParserPluginForm = {
   },
 
   methods: {
-    onChange: function() {
+    onChange: function(event) {
+      store.dispatch("parserParams/updateType", event);
       this.updateSection();
-      if (this.pluginType === "parse") {
-        this.$emit("change-plugin-name", this.pluginName);
-      }
     },
 
     onChangeFormats: function(data) {
@@ -72,9 +72,8 @@ const ParserPluginForm = {
     },
 
     onChangeParseConfig: function(data) {
-      console.log("parserPluginForm:onChangeParseConfig", data);
-      this.expression = data.expression;
-      this.timeFormat = data.timeFormat;
+      console.log("parserPluginForm:onChangeParseConfig");
+      this.$emit("change-parse-config", {});
     },
 
     updateSection: function() {

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

@@ -8,6 +8,8 @@
         {{ option.name | humanize }}
       %select{"v-bind:id" => "inputId(pluginType, option)",
               "v-bind:name" => "inputName(pluginType, option)",
+              "v-model.lazy" => "selectedValue",
+              "v-on:change" => "onChange",
               "class" => "form-control"}
         %option{"v-for" => "item in option.list",
                 "v-bind:value" => "item",
@@ -17,6 +19,8 @@
       %input{"v-bind:id" => "inputId(pluginType, option)",
              "v-bind:name" => "inputName(pluginType, option)",
              "v-bind:checked" => "checked(option.default)",
+             "v-model.lazy" => "checkboxValue",
+             "v-on:change" => "onChange",
              "type" => "checkbox"}
       %label{"v-bind:for" => "inputId(pluginType, option)",
              "data-toggle" => "tooltip",
@@ -29,21 +33,9 @@
              "data-placement" => "right",
              "v-bind:title" => "option.desc"}
         {{ option.name | humanize }}
-      %template{"v-if" => 'option.name === "expression"'}
-        %input{"v-bind:id" => "inputId(pluginType, option)",
-               "v-bind:name" => "inputName(pluginType, option)",
-               "v-model.lazy" => "expression",
-               "type" => "text",
-               "class" => "form-control"}
-      %template{"v-else-if" => 'option.name === "time_format"'}
-        %input{"v-bind:id" => "inputId(pluginType, option)",
-               "v-bind:name" => "inputName(pluginType, option)",
-               "v-model.lazy" => "timeFormat",
-               "type" => "text",
-               "class" => "form-control"}
-      %template(v-else)
-        %input{"v-bind:id" => "inputId(pluginType, option)",
-               "v-bind:name" => "inputName(pluginType, option)",
-               "v-model.lazy" => "textValue",
-               "type" => "text",
-               "class" => "form-control"}
+      %input{"v-bind:id" => "inputId(pluginType, option)",
+             "v-bind:name" => "inputName(pluginType, option)",
+             "v-model.lazy" => "textValue",
+             "v-on:change" => "onChange",
+             "type" => "text",
+             "class" => "form-control"}

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

@@ -20,14 +20,12 @@
                              "v-bind:common-options" => "commonOptions",
                              "v-on:change-formats" => "onChangeFormats"}
       %template(v-else)
-        %config-field{"v-for" => "option in commonOptions",
-                      "v-bind:key" => "option.name",
-                      "v-bind:plugin-type" => "pluginType",
-                      "v-bind:option" => "option",
-                      "v-bind:initial-expression" => "expression",
-                      "v-bind:initial-time-format" => "timeFormat",
-                      "v-bind:initial-text-value" => "initialParams[option.name]",
-                      "v-on:change-parse-config" => "onChangeParseConfig"}
+        %template{"v-for" => "option in commonOptions"}
+          %config-field{"v-bind:key" => "option.name",
+                        "v-bind:plugin-type" => "pluginType",
+                        "v-bind:option" => "option",
+                        "v-bind:initial-text-value" => "initialParams[option.name]",
+                        "v-on:change-parse-config" => "onChangeParseConfig"}
         %template{"v-if" => '!_.isEmpty(advancedOptions)'}
           .card.card-body.bg-light
             %h4{"data-toggle" => "collapse", "href" => "#owned-plugin-advanced-setting"}