diff --git a/app/javascript/packs/config_field.js b/app/javascript/packs/config_field.js index ab33aff..a0e6da6 100644 --- a/app/javascript/packs/config_field.js +++ b/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}`; diff --git a/app/javascript/packs/in_tail_parse.js b/app/javascript/packs/in_tail_parse.js index 7995f90..fd00827 100644 --- a/app/javascript/packs/in_tail_parse.js +++ b/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 } diff --git a/app/javascript/packs/parser_plugin_form.js b/app/javascript/packs/parser_plugin_form.js index 075fb5f..0a1bd6a 100644 --- a/app/javascript/packs/parser_plugin_form.js +++ b/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() { diff --git a/app/views/shared/vue/_config_field.html.haml b/app/views/shared/vue/_config_field.html.haml index c07c6b8..0c958c4 100644 --- a/app/views/shared/vue/_config_field.html.haml +++ b/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"} diff --git a/app/views/shared/vue/_parser_plugin_form.html.haml b/app/views/shared/vue/_parser_plugin_form.html.haml index d374034..f121ac9 100644 --- a/app/views/shared/vue/_parser_plugin_form.html.haml +++ b/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"}