fluentd-ui 1.1.0 → 1.2.0

data/app/javascript/packs/{grep_container.js → components/grep_container.js}

@@ -16,7 +16,7 @@ const GrepContainer = {
     return {
       grepType: "regexp",
       patterns: [true],
-    }
+    };
   },
   filters: {
     humanize: function(value) {

data/app/javascript/packs/{grep_pattern.js → components/grep_pattern.js}

@@ -14,7 +14,7 @@ const GrepPattern = {
     return {
       key: null,
       pattern: null,
-    }
+    };
   },
 
   filters: {
@@ -30,10 +30,12 @@ const GrepPattern = {
     remove: function(event) {
       this.$emit("remove-grep-pattern", this.grepType, this.subIndex);
     },
+    labelId: function(name, index, subIndex) {
+      return `label_${this.inputId(name, index, subIndex)}`;
+    },
     inputId: function(name, index, subIndex) {
       return `setting_${this.containerType}_${index}_${this.grepType}_${subIndex}__${name}`;
     },
-
     inputName: function(name, index, subIndex) {
       return `setting[${this.containerType}[${index}]][${this.grepType}[${subIndex}]][${name}]`;
     }

data/app/javascript/packs/components/owned_plugin_form.js

@@ -0,0 +1,88 @@
+/* global _ */
+"use strict";
+
+import "lodash/lodash";
+import ConfigField from "./config_field";
+
+const OwnedPluginForm = {
+  template: "#vue-owned-plugin-form",
+  components: {
+    "config-field": ConfigField
+  },
+  props: [
+    "id",
+    "optionsJson",
+    "initialPluginName",
+    "initialParamsJson",
+    "pluginType",
+    "pluginLabel"
+  ],
+  data: () => {
+    return {
+      pluginName: "",
+      options: [],
+      initialParams: {},
+      commonOptions: [],
+      advancedOptions: [],
+    };
+  },
+
+  computed: {
+    token: function() {
+      return Rails.csrfToken();
+    }
+  },
+
+  mounted: function() {
+    this.options = JSON.parse(this.optionsJson);
+    this.initialParams = JSON.parse(this.initialParamsJson || "{}");
+    this.pluginName = this.initialPluginName;
+    this.$once("data-loaded", () => {
+      this.updateSection();
+    });
+    this.$emit("data-loaded");
+  },
+
+  methods: {
+    onChange: function() {
+      this.updateSection();
+      if (this.pluginType === "parse") {
+        this.$emit("change-plugin-name", this.pluginName);
+      }
+    },
+
+    onChangeFormats: function(data) {
+      console.log("ownedPluginForm:onChangeFormats", data);
+      this.$emit("change-formats", data);
+    },
+
+    updateSection: function() {
+      $.ajax({
+        method: "GET",
+        url: `${relativeUrlRoot}/api/config_definitions`,
+        headers: {
+          "X-CSRF-Token": this.token
+        },
+        data: {
+          type: this.pluginType,
+          name: this.pluginName
+        }
+      }).then((data) => {
+        this.commonOptions = data.commonOptions;
+        this.advancedOptions = data.advancedOptions;
+      });
+    },
+
+    selectId: function(pluginType) {
+      return `setting_${pluginType}_type`;
+    },
+    selectClass: function(pluginType) {
+      return `${pluginType} form-control`;
+    },
+    selectName: function(pluginType) {
+      return `setting[${pluginType}_type]`;
+    }
+  }
+};
+
+export { OwnedPluginForm as default };

data/app/javascript/packs/{owned_plugin_form.js → components/parser_plugin_form.js}

@@ -4,9 +4,10 @@
 import "lodash/lodash";
 import ParserMultilineForm from "./parser_multiline_form";
 import ConfigField from "./config_field";
+import store from "../store";
 
-const OwnedPluginForm = {
-  template: "#vue-owned-plugin-form",
+const ParserPluginForm = {
+  template: "#vue-parser-plugin-form",
   components: {
     "parser-multiline-form": ParserMultilineForm,
     "config-field": ConfigField
@@ -43,38 +44,28 @@ const OwnedPluginForm = {
     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();
     });
     this.$emit("data-loaded");
   },
 
-  updated: function() {
-    this.$nextTick(() => {
-      if ($("[data-toggle=tooltip]").tooltip) {
-        $("[data-toggle=tooltip]").tooltip("dispose");
-        $("[data-toggle=tooltip]").tooltip("enable");
-      }
-    });
-  },
-
   methods: {
-    onChange: function() {
+    onChange: function(event) {
+      store.dispatch("parserParams/updateType", event);
+      this.$emit("change-plugin-name", event.target.value);
       this.updateSection();
-      if (this.pluginType === "parse") {
-        this.$emit("change-plugin-name", this.pluginName);
-      }
     },
 
     onChangeFormats: function(data) {
-      console.log("ownedPluginForm:onChangeFormats", data);
+      console.log("parserPluginForm:onChangeFormats", data);
       this.$emit("change-formats", data);
     },
 
     onChangeParseConfig: function(data) {
-      console.log("ownedPluginForm:onChangeParseConfig", data);
-      this.expression = data.expression;
-      this.timeFormat = data.timeFormat;
+      console.log("parserPluginForm:onChangeParseConfig");
+      this.$emit("change-parse-config", {});
     },
 
     updateSection: function() {
@@ -90,6 +81,7 @@ const OwnedPluginForm = {
         }
       }).then((data) => {
         this.commonOptions = data.commonOptions;
+        this.advancedOptions = data.advancedOptions;
         let foundExpression = false;
         let foundTimeFormat = false;
         _.each(this.commonOptions, (option) => {
@@ -143,4 +135,4 @@ const OwnedPluginForm = {
   }
 };
 
-export { OwnedPluginForm as default };
+export { ParserPluginForm as default };

data/app/javascript/packs/filter_grep_setting.js

@@ -2,9 +2,9 @@
 "use strict";
 import "lodash/lodash";
 
-import GrepContainer from "./grep_container";
+import GrepContainer from "./components/grep_container";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#filter-grep-setting",
     components: {

data/app/javascript/packs/fluent_log.js

@@ -1,5 +1,5 @@
 "use strict";
-$(document).ready(()=> {
+window.addEventListener("load", ()=> {
   new Vue({
     el: "#fluent-log",
     data: {

data/app/javascript/packs/in_tail_parse.js

@@ -3,14 +3,21 @@
 import "lodash/lodash";
 import "popper.js/dist/popper";
 import "bootstrap/dist/js/bootstrap";
-import OwnedPluginForm from "./owned_plugin_form";
+import ParserPluginForm from "./components/parser_plugin_form";
+import store from "./store";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#in-tail-parse",
+    store,
     components: {
-      "owned-plugin-form": OwnedPluginForm
+      "parser-plugin-form": ParserPluginForm
     },
+    props: [
+      "initialPluginName",
+      "pluginType",
+      "pluginLabel",
+    ],
     data: function() {
       return {
         "path": "",
@@ -41,26 +48,23 @@ $(document).ready(() => {
     },
     mounted: function() {
       this.parse = {};
-      this.$on("hook:updated", () => {
-        this.$nextTick(() => {
-          $("[data-toggle=tooltip]").tooltip("dispose");
-          $("[data-toggle=tooltip]").tooltip("enable");
-        });
-      });
+      this.parseType = this.initialPluginName;
+      this.preview();
     },
     methods: {
       onChangePluginName: function(name) {
         console.log("#in-tail-parse onChangePluginName", name);
-        this.parseType = name;
+        this.updateHighlightedLines([]);
         this.parse = {}; // clear parser plugin configuration
+        this.onChangeParseConfig();
       },
       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();
       },
@@ -124,9 +128,9 @@ $(document).ready(() => {
       preview: function() {
         console.log("preview!!!!");
         if (this.previewAjax && this.previewAjax.state() === "pending") {
-          this.previewAjax.abort();
+          this.previewAjax.abort && this.previewAjax.abort();
         }
-
+        const parseType = store.getters["parserParams/pluginName"];
         this.previewAjax = $.ajax({
           method: "POST",
           url: `${relativeUrlRoot}/api/regexp_preview`,
@@ -134,7 +138,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
           }

data/app/javascript/packs/{notification.js → navigation.js}

@@ -1,19 +1,21 @@
 const POLLING_INTERVAL = 3 * 1000;
 const POLLING_URL = "/polling/alerts";
 
-$(document).ready(()=> {
+window.addEventListener("load", () => {
   new Vue({
-    el: "#vue-notification",
-    data: {
-      "alerts": []
+    el: "#mainNav",
+    data: function() {
+      return {
+        alerts: []
+      };
     },
 
     computed: {
       alertsCount: {
-        get: function(){ return this.alerts.length; }
+        get: function() { return this.alerts.length; }
       },
       hasAlerts: {
-        get: function(){ return this.alertsCount > 0; }
+        get: function() { return this.alertsCount > 0; }
       }
     },
 

data/app/javascript/packs/nested_settings.js

@@ -1,7 +1,7 @@
 /* global _ */
 "use strict";
 import "lodash/lodash";
-$(document).ready(()=> {
+window.addEventListener("load", () => {
   var $firstSetting = $(".js-nested-column.js-multiple:first");
 
   if ($firstSetting.length === 0) {

data/app/javascript/packs/out_forward_setting.js

@@ -1,9 +1,9 @@
 "use strict";
 
-import TransportConfig from "./transport_config";
-import OwnedPluginForm from "./owned_plugin_form";
+import TransportConfig from "./components/transport_config";
+import OwnedPluginForm from "./components/owned_plugin_form";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#out-forward-setting",
     components: {

data/app/javascript/packs/out_s3_setting.js

@@ -1,9 +1,9 @@
 "use strict";
 
-import OwnedPluginForm from "./owned_plugin_form";
-import AwsCredential from "./aws_credential";
+import OwnedPluginForm from "./components/owned_plugin_form";
+import AwsCredential from "./components/aws_credential";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#out-s3-setting",
     components: {

data/app/javascript/packs/plugin_setting.js

@@ -2,13 +2,15 @@
 import "lodash/lodash";
 import "popper.js/dist/popper";
 import "bootstrap/dist/js/bootstrap";
-import OwnedPluginForm from "./owned_plugin_form";
+import OwnedPluginForm from "./components/owned_plugin_form";
+import ParserPluginForm from "./components/parser_plugin_form";
 
 window.addEventListener("load", () => {
   new Vue({
     el: "#plugin-setting",
     components: {
-      "owned-plugin-form": OwnedPluginForm
+      "owned-plugin-form": OwnedPluginForm,
+      "parser-plugin-form": ParserPluginForm
     },
     data: () => {
       return {};

data/app/javascript/packs/settings.js

@@ -3,7 +3,7 @@
 
 import "lodash/lodash";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   const SettingSection = {
     template: "#vue-setting-section",
     props: [
@@ -141,7 +141,7 @@ $(document).ready(() => {
             if (_.isEmpty(data[label])) {
               this.$delete(this.sections, label);
             }
-          })
+          });
           if (_.isEmpty(data["ROOT"])) {
             this.$set(this.sections, "ROOT", []);
           }

data/app/javascript/packs/store/index.js

@@ -0,0 +1,21 @@
+/* global process:true */
+import Vue from "vue/dist/vue.esm";
+import Vuex from "vuex/dist/vuex.esm";
+import { createNamespaceHelpers } from "vuex/dist/vuex.esm";
+import createLogger from "vuex/dist/logger";
+
+Vue.use(Vuex);
+
+const debug = process.env.NODE_ENV !== "production";
+
+import parserParams from "./modules/parser_params";
+
+const store = new Vuex.Store({
+  modules: {
+    parserParams,
+  },
+  strict: debug,
+  plugins: debug ? [createLogger()] : []
+});
+
+export { store as default };

data/app/javascript/packs/store/modules/parser_params.js

@@ -0,0 +1,83 @@
+"user strict";
+
+const state = {
+  type: null,
+  expression: null,
+  timeFormat: null,
+  messageFormat: null,
+  rfc5424TimeFormat: null,
+  withPriority: null,
+};
+
+const getters = {
+  toParams: (state) => {
+    return {
+      expression: state.expression,
+      time_format: state.timeFormat,
+      message_format: state.messageFormat,
+      rfc5424_time_format: state.rfc5424TimeFormat,
+      with_priority: state.withPriority
+    };
+  },
+  pluginName: (state) => {
+    return state.type;
+  }
+};
+
+const actions = {
+  updateType({ commit, state }, event) {
+    commit("setType", event.target.value);
+    commit("clearParams");
+  },
+  updateExpression({ commit, state }, event) {
+    commit("setExpression", event.target.value);
+  },
+  updateTimeFormat({ commit, state }, event) {
+    commit("setTimeFormat", event.target.value);
+  },
+  updateMessageFormat({ commit, state }, event) {
+    commit("setMessageFormat", event.target.value);
+  },
+  updateRfc5424TimeFormat({ commit, state }, event) {
+    commit("setRfc5424TimeFormat", event.target.value);
+  },
+  updateWithPriority({ commit, state }, event) {
+    commit("setWithPriority", event.target.checked);
+  }
+};
+
+const mutations = {
+  setType(state, value) {
+    state.type = value;
+  },
+  setExpression(state, value) {
+    state.expression = value;
+  },
+  setTimeFormat(state, value) {
+    state.timeFormat = value;
+  },
+  setMessageFormat(state, value) {
+    state.messageFormat = value;
+  },
+  setRfc5424TimeFormat(state, value) {
+    state.rfc5424TimeFormat = value;
+  },
+  setWithPriority(state, value) {
+    state.withPriority = value;
+  },
+  clearParams(state) {
+    state.expression = null;
+    state.timeFormat = null;
+    state.messageFormat = null;
+    state.rfc5424TimeFormat = null;
+    state.withPriority = null;
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+};