fluentd-ui/app/javascript/packs/components/parser_plugin_form.js

/* global _ */
"use strict";

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",
  components: {
    "parser-multiline-form": ParserMultilineForm,
    "config-field": ConfigField
  },
  props: [
    "id",
    "optionsJson",
    "initialPluginName",
    "initialParamsJson",
    "pluginType",
    "pluginLabel"
  ],
  data: () => {
    return {
      pluginName: "",
      options: [],
      initialParams: {},
      commonOptions: [],
      advancedOptions: [],
      expression: null,
      timeFormat: null,
      unwatchExpression: null,
      unwatchTimeFormat: null
    };
  },

  computed: {
    token: function() {
      return Rails.csrfToken();
    }
  },

  mounted: function() {
    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");
  },

  methods: {
    onChange: function(event) {
      store.dispatch("parserParams/updateType", event);
      this.$emit("change-plugin-name", event.target.value);
      this.updateSection();
    },

    onChangeFormats: function(data) {
      console.log("parserPluginForm:onChangeFormats", data);
      this.$emit("change-formats", data);
    },

    onChangeParseConfig: function(data) {
      console.log("parserPluginForm:onChangeParseConfig");
      this.$emit("change-parse-config", {});
    },

    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;
        let foundExpression = false;
        let foundTimeFormat = false;
        _.each(this.commonOptions, (option) => {
          if (option.name === "expression") {
            foundExpression = true;
            this.expression = option.default;
            this.unwatchExpression = this.$watch("expression", (newValue, oldValue) => {
              console.log(newValue);
              this.$emit("change-parse-config", {
                "expression": this.expression,
                "time_format": this.timeFormat
              });
            });
          }
          if (option.name === "time_format") {
            foundTimeFormat = true;
            this.timeFormat = option.default;
            console.log(this.timeFormat);
            this.unwatchTimeFormat = this.$watch("timeFormat", (newValue, oldValue) => {
              console.log({"watch time_format": newValue});
              this.$emit("change-parse-config", {
                "expression": this.expression,
                "time_format": this.timeFormat
              });
            });
          }

          if (!foundExpression && this.unwatchExpression) {
            this.expression = null;
            this.unwatchExpression();
            this.unwatchExpression = null;
          }
          if (!foundTimeFormat && this.unwatchTimeFormat) {
            this.timeFormat = null;
            this.unwatchTimeFormat();
            this.unwatchTimeFormat = null;
          }
        });
      });
    },

    selectId: function(pluginType) {
      return `setting_${pluginType}_type`;
    },
    selectClass: function(pluginType) {
      return `${pluginType} form-control`;
    },
    selectName: function(pluginType) {
      return `setting[${pluginType}_type]`;
    }
  }
};

export { ParserPluginForm as default };