fluentd-ui 1.0.0.alpha.3 → 1.0.0.beta.1

data/app/controllers/concerns/setting_concern.rb

@@ -14,15 +14,11 @@ module SettingConcern
     @storage = @setting.create_storage
     @parser = @setting.create_parser
     @formatter = @setting.create_formatter
-    @_used_param = {}
-    @_used_section = {}
     render "shared/settings/show"
   end
 
   def finish
     @setting = target_class.new(setting_params)
-    @_used_param = {}
-    @_used_section = {}
     unless @setting.valid?
       return render "shared/settings/show"
     end

data/app/controllers/fluentd/settings/in_tail_controller.rb

@@ -58,7 +58,7 @@ class Fluentd::Settings::InTailController < ApplicationController
     permit_params = target_class._types.keys
     permit_params << :parse_type
     section_class = Fluentd::Setting.const_get("parser_#{params.dig(:setting, :parse_type)}".classify)
-    permit_params << { parse: section_class._types.keys }
+    permit_params << { parse: section_class._types.keys + [:type] }
     params.require(:setting).permit(*permit_params)
   end
 

data/app/form_builders/fluentd_form_builder.rb

@@ -24,17 +24,22 @@ class FluentdFormBuilder < ActionView::Helpers::FormBuilder
     when :bool
       bool_field(key, options)
     else
-      other_field(key, options)
+      if key.to_sym == :log_level
+        log_level_field(key, options)
+      else
+        other_field(key, options)
+      end
     end
   end
 
   def enum_field(key, options)
     label(key, nil, data: { toggle: "tooltip", placement: "right" }, title: object.desc(key)) +
-      select(key, object.list_of(key), options, { class: "enum" })
+      select(key, object.list_of(key), options, { class: "enum form-control" })
   end
 
   def bool_field(key, options)
-    check_box(key, options, "true", "false") + " " +
+    return unless object.respond_to?(key)
+    check_box(key, options, true, false) + " " +
       label(key, nil, data: { toggle: "tooltip", placement: "right" }, title: object.desc(key))
   end
 
@@ -44,13 +49,20 @@ class FluentdFormBuilder < ActionView::Helpers::FormBuilder
       text_field(key, class: "form-control", **options)
   end
 
+  def log_level_field(key, options)
+    return unless object.respond_to?(key)
+    label(key, nil, data: { toggle: "tooltip", placement: "right" }, title: object.desc(key)) +
+      select(key, Fluent::Log::LEVEL_TEXT, { include_blank: true }, { class: "form-control" })
+  end
+
   def render_section(key, options)
     section_class = object.class._sections[key]
     children = object.__send__(key) || { "0" => {} }
     html = ""
+    html_class = "js-nested-column #{section_class.multi ? "js-multiple" : ""}"
 
     children.each do |index, child|
-      html << content_tag("div", class: "js-nested-column #{section_class.multi ? "js-multiple" : ""}") do
+      html << content_tag("div", class: html_class) do
         _html = ""
         _html << append_and_remove_links if section_class.multi
         _html << label(key, nil, data: { toggle: "tooltip", placement: "right" }, title: object.desc(key))
@@ -73,8 +85,8 @@ class FluentdFormBuilder < ActionView::Helpers::FormBuilder
   end
 
   def append_and_remove_links
-    %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> !
+    %Q!<a class="btn btn-xs js-append">#{icon('fa-plus')}</a> ! +
+    %Q!<a class="btn btn-xs js-remove" style="display:none">#{icon('fa-minus')}</a> !
   end
 
   def icon(classes, inner=nil)

data/app/javascript/packs/application.js

@@ -7,34 +7,34 @@
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
-console.log('Hello World from Webpacker')
+console.log("Hello World from Webpacker");
 
-import jQuery from 'jquery/dist/jquery'
+import jQuery from "jquery/dist/jquery";
 
-window.$ = jQuery
-window.jQuery = jQuery
+window.$ = jQuery;
+window.jQuery = jQuery;
 
-import Rails from 'rails-ujs/lib/assets/compiled/rails-ujs.js'
+import Rails from "rails-ujs/lib/assets/compiled/rails-ujs.js";
 
-window.Rails = Rails
-Rails.start()
+window.Rails = Rails;
+Rails.start();
 
-import 'popper.js/dist/popper'
-import 'bootstrap/dist/js/bootstrap'
-import 'datatables.net/js/jquery.dataTables'
-import 'startbootstrap-sb-admin/js/sb-admin'
-import 'startbootstrap-sb-admin/js/sb-admin-datatables'
+import "popper.js/dist/popper";
+import "bootstrap/dist/js/bootstrap";
+import "datatables.net/js/jquery.dataTables";
+import "startbootstrap-sb-admin/js/sb-admin";
+import "startbootstrap-sb-admin/js/sb-admin-datatables";
 
-import Vue from 'vue/dist/vue.esm'
+import Vue from "vue/dist/vue.esm";
 
-Vue.filter('to_json', function (value) {
-    return JSON.stringify(value);
-})
+Vue.filter("to_json", function (value) {
+  return JSON.stringify(value);
+});
 
-window.Vue = Vue
+window.Vue = Vue;
 
-import '../stylesheets/application.scss'
+import "../stylesheets/application.scss";
 
 $(document).ready(() => {
-  $("[data-toggle=tooltip]").tooltip()
-})
+  $("[data-toggle=tooltip]").tooltip();
+});

data/app/javascript/packs/aws_credential.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import ConfigField from "./config_field";
+
+const AwsCredential = {
+  template: "#vue-aws-credential",
+  components: {
+    "config-field": ConfigField,
+  },
+  props: [
+    "id",
+    "pluginType",
+    "pluginName",
+  ],
+  data: () => {
+    return {
+      credentialType: null,
+      credentialOptions: [],
+      options: [
+        "simple",
+        "assumeRoleCredentials",
+        "instanceProfileCredentials",
+        "sharedCredentials"
+      ]
+    };
+  },
+
+  computed: {
+    token: function() {
+      return Rails.csrfToken();
+    }
+  },
+
+  mounted: function() {
+
+  },
+
+  methods: {
+    onChange: function() {
+      this.updateSection();
+    },
+
+    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.credentialOptions = data["awsCredentialOptions"][this.credentialType];
+      });
+    }
+  }
+};
+
+export { AwsCredential as default };

data/app/javascript/packs/codemirror.js

@@ -1,10 +1,12 @@
-import CodeMirror from 'codemirror/lib/codemirror'
-import 'lodash/lodash'
+/* global _ */
+"use strict";
+import CodeMirror from "codemirror/lib/codemirror";
+import "lodash/lodash";
 
 // See: http://codemirror.net/doc/manual.html#modeapi
 // and sample mode files: https://github.com/codemirror/CodeMirror/tree/master/mode
 
-CodeMirror.defineMode('fluentd', function(){
+CodeMirror.defineMode("fluentd", function(){
   return {
     startState: function(aa){
       return { "context" : null };
@@ -21,40 +23,34 @@ CodeMirror.defineMode('fluentd', function(){
       }
 
       switch(stream.peek()){
-        case "#":
-          stream.skipToEnd();
-          return "comment";
-          break;
-        case "<":
-          state.context = "inner-bracket";
-          stream.pos += 1;
+      case "#":
+        stream.skipToEnd();
+        return "comment";
+      case "<":
+        state.context = "inner-bracket";
+        stream.pos += 1;
+        return "keyword";
+      case ">":
+        stream.pos += 1;
+        state.context = "inner-definition";
+        return "keyword";
+      default:
+        switch(state.context){
+        case "inner-bracket":
+          stream.eat(/[^#<>]+/);
           return "keyword";
-          break;
-        case ">":
-          stream.pos += 1;
+        case "inner-definition":
+          stream.eatWhile(/[^ \t#]/);
+          state.context =  "inner-definition-keyword-appeared";
+          return "variable";
+        case "inner-definition-keyword-appeared":
+          stream.eatWhile(/[^#]/);
           state.context = "inner-definition";
-          return "keyword";
-          break;
+          return "builtin";
         default:
-          switch(state.context){
-            case "inner-bracket":
-              stream.eat(/[^#<>]+/);
-              return "keyword";
-              break;
-            case "inner-definition":
-              var key = stream.eatWhile(/[^ \t#]/);
-              state.context =  "inner-definition-keyword-appeared";
-              return "variable";
-              break;
-            case "inner-definition-keyword-appeared":
-              var key = stream.eatWhile(/[^#]/);
-              state.context = "inner-definition";
-              return "builtin";
-              break;
-            default:
-              stream.eat(/[^<>#]+/);
-              return "string";
-          }
+          stream.eat(/[^<>#]+/);
+          return "string";
+        }
       }
     }
   };
@@ -70,18 +66,18 @@ function codemirrorify(el) {
 }
 
 $(function(){
-  $('.js-fluentd-config-editor').each(function(_, el){
+  $(".js-fluentd-config-editor").each(function(_, el){
     codemirrorify(el);
   });
 });
 
-Vue.directive('config-editor', {
+Vue.directive("config-editor", {
   bind: function(el, binding, vnode, oldVnode){
     // NOTE: needed delay for waiting CodeMirror setup
     _.delay(function(textarea){
       let cm = codemirrorify(textarea);
       // textarea.codemirror = cm; // for test, but doesn't work for now (working on Chrome, but Poltergeist not)
-      cm.on('change', function(code_mirror){
+      cm.on("change", function(code_mirror){
         // bridge Vue - CodeMirror world
         el.dataset.content = code_mirror.getValue();
       });

data/app/javascript/packs/config_field.js

@@ -0,0 +1,93 @@
+/* global _ */
+"use strict";
+import "lodash/lodash";
+
+const ConfigField = {
+  template: "#vue-config-field",
+  props: [
+    "pluginType",
+    "option",
+    "initialExpression",
+    "initialTimeFormat",
+    "initialTextValue",
+  ],
+
+  data: function() {
+    return {
+      expression: null,
+      timeFormat: null,
+      textValue: null,
+    };
+  },
+
+  filters: {
+    humanize: function(value) {
+      return _.capitalize(value.replace(/_/g, " "));
+    }
+  },
+
+  mounted: function() {
+    if (this.option.name === "expression") {
+      this.expression = this.initialExpression;
+    } else if (this.option.name === "time_format") {
+      this.timeFormat = this.initialTimeFormat;
+    } else {
+      this.textValue = this.initialTextValue || this.option.default;
+    }
+  },
+
+  updated: function() {
+    if (this.option.name === "expression") {
+      this.expression = this.initialExpression;
+    }
+    if (this.option.name === "time_format") {
+      this.timeFormat = this.initialTimeFormat;
+    }
+    this.$nextTick(() => {
+      console.log("config-field updated");
+      $("[data-toggle=tooltip]").tooltip("dispose");
+      $("[data-toggle=tooltip]").tooltip("enable");
+    });
+  },
+
+  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: {
+    inputId: function(pluginType, option) {
+      if (pluginType === "output") {
+        return `setting_${option.name}`;
+      } else {
+        return `setting_${_.snakeCase(pluginType)}_0__${option.name}`;
+      }
+    },
+    inputName: function(pluginType, option) {
+      if (pluginType === "output") {
+        return `setting[${option.name}]`;
+      } else {
+        return `setting[${_.snakeCase(pluginType)}[0]][${option.name}]`;
+      }
+    },
+    checked: function(checked) {
+      if (checked === true || checked === "true") {
+        return "checked";
+      } else {
+        return "";
+      }
+    }
+  }
+};
+
+export { ConfigField as default };

data/app/javascript/packs/fluent_log.js

@@ -1,15 +1,22 @@
-'use strict';
+"use strict";
 $(document).ready(()=> {
   new Vue({
     el: "#fluent-log",
-    props: ["logUrl", "initialAutoReload"],
     data: {
+      "logUrl": "",
+      "initialAutoReload": false,
       "autoFetch": false,
       "logs": [],
       "limit": 30,
       "processing": false
     },
 
+    computed: {
+      isPresentedLogs: function(){
+        return this.logs.length > 0;
+      }
+    },
+
     beforeMount: function() {
       this.logUrl = this.$el.attributes.logUrl.nodeValue;
       this.initialAutoReload = this.$el.attributes.initialAutoReload.nodeValue;
@@ -36,12 +43,6 @@ $(document).ready(()=> {
       }
     },
 
-    computed: {
-      isPresentedLogs: function(){
-        return this.logs.length > 0;
-      }
-    },
-
     methods: {
       fetchLogs: function() {
         if(this.processing) return;
@@ -54,7 +55,7 @@ $(document).ready(()=> {
           setTimeout(function(){
             self.processing = false;
           }, 256); // delay to reduce flicking loading icon
-        })["catch"](function(error){
+        })["catch"](function(_error){
           self.processing = false;
         });
       }

data/app/javascript/packs/in_tail_parse.js

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