fluentd-ui 1.0.0.alpha.2 → 1.0.0.alpha.3

data/app/helpers/settings_helper.rb

@@ -2,28 +2,74 @@ module SettingsHelper
   def field(form, key, opts = {})
     html = '<div class="form-group">'
 
-    field_resolver(form.object.column_type(key), html, form, key, opts)
+    field_resolver(html, form, key, opts)
 
     html << "</div>"
     html.html_safe
   end
 
   private
-  def field_resolver(type, html, form, key, opts)
-    case type
-    when :hidden
-      html << form.hidden_field(key)
-    when :boolean, :flag
-      boolean_field(html, form, key, opts)
-    when :choice
-      choice_field(html, form, key, opts)
-    when :nested
-      nested_field(html, form, key, opts)
-    else
-      other_field(html, form, key, opts)
+
+  def field_resolver(html, form, key, opts)
+    plugin_class = form.object.class
+    type = plugin_class.column_type(key)
+    if type && !@_used_param.key?(key)
+      case type
+      when :enum
+        enum_field(html, form, key, opts)
+      when :bool
+        bool_field(html, form, key, opts)
+      else
+        other_field(html, form, key, opts)
+      end
+      @_used_param[key] = true
+    end
+    if plugin_class._sections[key] && !@_used_section.key?(key)
+      section_field(html, form, key, opts)
+      @_used_section[key] = true
+    end
+  end
+
+  def section_field(html, form, key, opts = {})
+    klass = form.object.class._sections[key]
+    children = form.object.__send__(key) || { "0" => {} }
+    # <parse>/<format> section is not multiple in most cases
+    multi = if [:parse, :format].include?(key)
+              false
+            else
+              klass.multi
+            end
+
+    children.each do |index, child|
+      open_section_div(html, multi) do |_html|
+        _html << append_and_remove_links if multi
+        _html << h(form.label(key))
+        _html << section_fields(form, key, index, klass, child)
+      end
     end
   end
 
+  def open_section_div(html, multi)
+    html << %Q!<div class="js-nested-column #{ multi ? "js-multiple" : "" } well well-sm">!
+    yield html
+    html << "</div>"
+  end
+
+  def section_fields(form, key, index, klass, child)
+    html = ""
+    object = klass.new(child)
+    form.fields_for("#{key}[#{index}]", object) do |ff|
+      klass._types.keys.each do |kk|
+        if kk == :type
+          html << owned_plugin_type_field(ff, kk, key)
+        else
+          html << field(ff, kk)
+        end
+      end
+    end
+    html
+  end
+
   def nested_field(html, form, key, opts = {})
     klass    = child_data(form, key)[:class]
     options  = child_data(form, key)[:options]
@@ -54,28 +100,45 @@ module SettingsHelper
   end
 
   def append_and_remove_links
-    %Q!<a class="btn btn-sm btn-outline-secondary js-append">#{icon('fa-plus')}</a> ! +
-    %Q!<a class="btn btn-sm btn-outline-secondary js-remove" style="display:none">#{icon('fa-minus')}</a> !
+    %Q!<a class="btn btn-xs btn-default js-append">#{icon('fa-plus')}</a> ! +
+    %Q!<a class="btn btn-xs btn-default js-remove" style="display:none">#{icon('fa-minus')}</a> !
   end
 
   def child_data(form, key)
     form.object.class.children[key]
   end
 
-  def choice_field(html, form, key, opts = {})
+  def enum_field(html, form, key, opts = {})
     html << h(form.label(key))
     html << " " # NOTE: Adding space for padding
-    html << form.select(key, form.object.values_of(key), opts)
+    html << form.select(key, form.object.list_of(key), opts, { class: "enum" })
   end
 
-  def boolean_field(html, form, key, opts = {})
+  def bool_field(html, form, key, opts = {})
     html << form.check_box(key, {}, "true", "false")
     html << " " # NOTE: Adding space for padding
     html << h(form.label(key))
   end
 
   def other_field(html, form, key, opts = {})
+    return unless form.object.respond_to?(key)
     html << h(form.label(key))
     html << form.text_field(key, class: "form-control")
   end
+
+  def owned_plugin_type_field(form, key, plugin_type)
+    registry_type = case plugin_type
+                    when :parse
+                      "PARSER_REGISTRY"
+                    when :format
+                      "FORMATTER_REGISTRY"
+                    end
+    plugin_registry = Fluent::Plugin.const_get("#{registry_type}")
+    html = '<div class="form-group">'
+    html << form.label(key)
+    html << " " # NOTE: Adding space for padding
+    html << form.select(key, plugin_registry.map.keys, {}, { class: "owned" })
+    html << '</div>'
+    html
+  end
 end

data/app/javascript/packs/application.js

@@ -34,3 +34,7 @@ Vue.filter('to_json', function (value) {
 window.Vue = Vue
 
 import '../stylesheets/application.scss'
+
+$(document).ready(() => {
+  $("[data-toggle=tooltip]").tooltip()
+})

data/app/javascript/packs/in_tail_parse.js

@@ -0,0 +1,159 @@
+'use strict'
+import 'lodash/lodash'
+import 'popper.js/dist/popper'
+import 'bootstrap/dist/js/bootstrap'
+import OwnedPluginForm from './owned_plugin_form'
+
+$(document).ready(() => {
+  new Vue({
+    el: '#in-tail-parse',
+    props: [
+      "path",
+      "parseType"
+    ],
+    data: function() {
+      return {
+        highlightedLines: null
+      }
+    },
+    computed: {
+      token: function() {
+        return Rails.csrfToken()
+      }
+    },
+    components: {
+      'owned-plugin-form': OwnedPluginForm
+    },
+    watch: {
+      'parse.expression': function() {
+        console.log(`parse.expression: ${this.parse.expression}`)
+        this.preview()
+      },
+      'parse.time_format': function() {
+        console.log(`parse.time_format: ${this.parse.time_format}`)
+        this.preview()
+      },
+      'parseType': function() {
+        this.preview()
+      },
+    },
+    beforeMount: function() {
+      this.path = this.$el.attributes.path.nodeValue;
+    },
+    mounted: function() {
+      this.parse = {}
+      this.$on("hook:updated", () => {
+        $("[data-toggle=tooltip]").tooltip("dispose")
+        $("[data-toggle=tooltip]").tooltip("enable")
+      })
+    },
+    methods: {
+      onChangePluginName: function(name) {
+        console.log("onChangePluginName")
+        this.parseType = name
+        this.parse = {} // clear parser plugin configuration
+      },
+      onChangeParseConfig: function(data) {
+        console.log("onChangeParseConfig", data)
+        _.merge(this.parse, data)
+        this.preview()
+      },
+      onChangeFormats: function(data) {
+        console.log("in_tail_parse:onChangeFormats", data)
+        _.merge(this.parse, data)
+        this.preview()
+      },
+      updateHighlightedLines: function(matches) {
+        if (!matches) {
+          this.highlightedLines = null
+          return
+        }
+
+        let $container = $('<div>')
+        _.each(matches, (match) => {
+          const colors = ["#ff9", "#cff", "#fcf", "#dfd"]
+          const whole = match.whole
+          let html = ""
+          let _matches = []
+          let lastPos = 0
+
+          _.each(match.matches, (m) => {
+            let matched = m.matched
+            if (!matched) {
+              return
+            }
+            // Ignore empty matched with "foobar".match(/foo(.*?)bar/)[1] #=> ""
+            if (matched.length === 0) {
+              return
+            }
+            // rotate color
+            let currentColor = colors.shift()
+            colors.push(currentColor)
+
+            // create highlighted range HTML
+            let $highlighted = $("<span>").text(matched)
+            $highlighted.attr({
+              "class": "regexp-preview",
+              "data-toggle": "tooltip",
+              "data-placement": "top",
+              "title": m.key,
+              'style': 'background-color:' + currentColor
+            })
+            let highlightedHtml = $highlighted.wrap("<div>").parent().html()
+            let pos = {
+              start: m.pos[0],
+              end: m.pos[1]
+            }
+            if (pos.start > 0) {
+              html += _.escape(whole.substring(lastPos, pos.start))
+            }
+            html += highlightedHtml
+            lastPos = pos.end
+          })
+          html += whole.substring(lastPos)
+
+          $container.append(html)
+          $container.append("<br>")
+        })
+
+        this.highlightedLines = $container.html()
+        this.$emit("hook:updated")
+      },
+
+      preview: function() {
+        console.log("preview!!!!")
+        if (this.previewAjax && this.previewAjax.state() === "pending") {
+          this.previewAjax.abort()
+        }
+
+        this.previewAjax = $.ajax({
+          method: "POST",
+          url: "/api/regexp_preview",
+          headers: {
+            'X-CSRF-Token': this.token
+          },
+          data: {
+            parse_type: _.isEmpty(this.parseType) ? "regexp" : this.parseType,
+            file: this.path,
+            plugin_config: this.parse
+          }
+        }).then(
+          (result) => {
+            if (result.matches) {
+              this.updateHighlightedLines(result.matches)
+            } else {
+              console.error(result.error)
+              this.previewError = result.error
+            }
+          },
+          (error) => {
+            this.highlightedLines = null
+            // console.error(error.responseText)
+            if (error.stack) {
+              console.error(error.stack)
+            }
+          })
+      }
+    }
+  })
+})

data/app/javascript/packs/owned_plugin_form.js

@@ -0,0 +1,141 @@
+'use strict'
+
+import ParserMultilineForm from './parser_multiline_form'
+
+const OwnedPluginForm = {
+  template: "#vue-owned-plugin-form",
+  components: {
+    "parser-multiline-form": ParserMultilineForm,
+  },
+  props: [
+    "id",
+    "optionsJson",
+    "initialPluginName",
+    "pluginType",
+    "pluginLabel"
+  ],
+  data: () => {
+    return {
+      pluginName: "",
+      options: [],
+      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.pluginName = this.initialPluginName
+    this.$on("hook:updated", () => {
+      console.log("hook:updated")
+      $("[data-toggle=tooltip]").tooltip("dispose")
+      $("[data-toggle=tooltip]").tooltip("enable")
+    })
+    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: "/api/config_definitions",
+        headers: {
+          'X-CSRF-Token': this.token
+        },
+        data: {
+          type: this.pluginType,
+          name: this.pluginName
+        }
+      }).then((data) => {
+        this.commonOptions = data.commonOptions
+        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
+            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]`
+    },
+    inputId: function(pluginType, option) {
+      return `setting_${pluginType}_0__${option.name}`
+    },
+    inputName: function(pluginType, option) {
+      return `setting[${pluginType}[0]][${option.name}]`
+    },
+    checked: function(checked) {
+      if (checked === true || checked === "true") {
+        return "checked"
+      } else {
+        return ""
+      }
+    }
+  }
+}
+
+export { OwnedPluginForm as default }

data/app/javascript/packs/parser_multiline_form.js

@@ -0,0 +1,51 @@
+'use strict'
+import 'lodash/lodash'
+const ParserMultilineForm = {
+  template: "#vue-parser-multiline-form",
+  props: [
+    "pluginType",
+    "commonOptions"
+  ],
+
+  data: function() {
+    return {
+      formatFirstline: "",
+      formats: "",
+      formatFirstlineDesc: ""
+    }
+  },
+
+  watch: {
+    "formatFirstLine": function(newValue, oldValue) {
+      console.log(`watch formatFirstLine: ${newValue}`)
+      this.$emit("change-formats", {
+        "format_firstline": this.formatFirstline,
+        "formats": this.formats
+      })
+    },
+    "formats": function(newValue, oldValue) {
+      console.log(`watch formats: ${newValue}`)
+      this.$emit("change-formats", {
+        "format_firstline": this.formatFirstline,
+        "formats": this.formats
+      })
+    },
+    "commonOptions": function(newValue, oldValue) {
+      const option = _.find(newValue, (o) => {
+        return o.name === "format_firstline"
+      })
+      this.formatFirstlineDesc = option.desc
+    }
+  },
+
+  methods: {
+    textareaId: function(pluginType) {
+      return `setting_${pluginType}_0__formats`
+    },
+    textareaName: function(pluginType) {
+      return `setting[${pluginType}[0]][formats]`
+    }
+  }
+}
+
+export { ParserMultilineForm as default }