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

data/app/javascript/packs/nested_settings.js

@@ -1,40 +1,41 @@
-'use strict';
-import 'lodash/lodash';
+/* global _ */
+"use strict";
+import "lodash/lodash";
 $(document).ready(()=> {
-  var $firstSetting = $('.js-nested-column.js-multiple:first');
+  var $firstSetting = $(".js-nested-column.js-multiple:first");
 
   if ($firstSetting.length === 0) {
     return;
   }
 
   var counter = 0;
-  $('.js-append', $firstSetting).on('click', function(ev){
+  $(".js-append", $firstSetting).on("click", function(ev){
     ev.preventDefault();
     var $new = $firstSetting.clone(true);
     counter++;
 
-    var fields = $('input,select,textarea', $new);
+    var fields = $("input,select,textarea", $new);
     _.each(fields, function(elm){
       elm.name = elm.name.replace("0", counter);
     });
-    $('label', $new).each(function(_, label){
+    $("label", $new).each(function(_, label){
       var $label = $(label);
-      $label.attr('for', $label.attr('for').replace("0", counter));
+      $label.attr("for", $label.attr("for").replace("0", counter));
     });
 
-    $('.js-remove', $new).show();
-    $('.js-append', $new).hide();
+    $(".js-remove", $new).show();
+    $(".js-append", $new).hide();
     $new.appendTo($firstSetting.parent());
   });
 
-  $('.js-remove').on('click', function(ev){
+  $(".js-remove").on("click", function(ev){
     ev.preventDefault();
-    $(this).closest('.js-nested-column').remove();
+    $(this).closest(".js-nested-column").remove();
   });
 
-  var $allSettings = $('.js-nested-column.js-multiple');
-  $('.js-append', $allSettings).hide();
-  $('.js-remove', $allSettings).show();
-  $('.js-append', $firstSetting).show();
-  $('.js-remove', $firstSetting).hide();
+  var $allSettings = $(".js-nested-column.js-multiple");
+  $(".js-append", $allSettings).hide();
+  $(".js-remove", $allSettings).show();
+  $(".js-append", $firstSetting).show();
+  $(".js-remove", $firstSetting).hide();
 });

data/app/javascript/packs/notification.js

@@ -1,13 +1,22 @@
-const POLLING_INTERVAL = 3 * 1000
-const POLLING_URL = "/polling/alerts"
+const POLLING_INTERVAL = 3 * 1000;
+const POLLING_URL = "/polling/alerts";
 
 $(document).ready(()=> {
-  let alert = new Vue({
+  new Vue({
     el: "#vue-notification",
     data: {
       "alerts": []
     },
 
+    computed: {
+      alertsCount: {
+        get: function(){ return this.alerts.length; }
+      },
+      hasAlerts: {
+        get: function(){ return this.alertsCount > 0; }
+      }
+    },
+
     created: function(){
       let timer;
       let self = this;
@@ -30,25 +39,16 @@ $(document).ready(()=> {
           }
         });
       };
-      window.addEventListener('focus', function(ev){
+      window.addEventListener("focus", function(_event){
         currentInterval = POLLING_INTERVAL;
         timer = setTimeout(fetch, currentInterval);
       }, false);
-      window.addEventListener('blur', function(ev){
+      window.addEventListener("blur", function(_event){
         clearTimeout(timer);
       }, false);
       fetch();
     },
 
-    computed: {
-      alertsCount: {
-        get: function(){ return this.alerts.length; }
-      },
-      hasAlerts: {
-        get: function(){ return this.alertsCount > 0; }
-      }
-    },
-
     methods: {
       fetchAlertsData: function() {
         return new Promise(function(resolve, reject) {

data/app/javascript/packs/out_forward_setting.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import TransportConfig from "./transport_config";
+import OwnedPluginForm from "./owned_plugin_form";
+
+$(document).ready(() => {
+  new Vue({
+    el: "#out-forward-setting",
+    components: {
+      "transport-config": TransportConfig,
+      "owned-plugin-form": OwnedPluginForm,
+    }
+  });
+});

data/app/javascript/packs/out_s3_setting.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import OwnedPluginForm from "./owned_plugin_form";
+import AwsCredential from "./aws_credential";
+
+$(document).ready(() => {
+  new Vue({
+    el: "#out-s3-setting",
+    components: {
+      "owned-plugin-form": OwnedPluginForm,
+      "aws-credential": AwsCredential
+    }
+  });
+});

data/app/javascript/packs/owned_plugin_form.js

@@ -1,16 +1,21 @@
-'use strict'
+/* global _ */
+"use strict";
 
-import ParserMultilineForm from './parser_multiline_form'
+import "lodash/lodash";
+import ParserMultilineForm from "./parser_multiline_form";
+import ConfigField from "./config_field";
 
 const OwnedPluginForm = {
   template: "#vue-owned-plugin-form",
   components: {
     "parser-multiline-form": ParserMultilineForm,
+    "config-field": ConfigField
   },
   props: [
     "id",
     "optionsJson",
     "initialPluginName",
+    "initialParamsJson",
     "pluginType",
     "pluginLabel"
   ],
@@ -18,46 +23,56 @@ const OwnedPluginForm = {
     return {
       pluginName: "",
       options: [],
+      initialParams: {},
       commonOptions: [],
       advancedOptions: [],
       expression: null,
       timeFormat: null,
       unwatchExpression: null,
       unwatchTimeFormat: null
-    }
+    };
   },
 
   computed: {
     token: function() {
-      return Rails.csrfToken()
+      return Rails.csrfToken();
     }
   },
 
   mounted: function() {
-    this.options = JSON.parse(this.optionsJson)
-    this.pluginName = this.initialPluginName
+    this.options = JSON.parse(this.optionsJson);
+    this.initialParams = JSON.parse(this.initialParamsJson || "{}");
+    this.pluginName = this.initialPluginName;
     this.$on("hook:updated", () => {
-      console.log("hook:updated")
-      $("[data-toggle=tooltip]").tooltip("dispose")
-      $("[data-toggle=tooltip]").tooltip("enable")
-    })
+      console.log("hook:updated");
+      this.$nextTick(() => {
+        $("[data-toggle=tooltip]").tooltip("dispose");
+        $("[data-toggle=tooltip]").tooltip("enable");
+      });
+    });
     this.$once("data-loaded", () => {
-      this.updateSection()
-    })
-    this.$emit("data-loaded")
+      this.updateSection();
+    });
+    this.$emit("data-loaded");
   },
 
   methods: {
     onChange: function() {
-      this.updateSection()
+      this.updateSection();
       if (this.pluginType === "parse") {
-        this.$emit("change-plugin-name", this.pluginName)
+        this.$emit("change-plugin-name", this.pluginName);
       }
     },
 
     onChangeFormats: function(data) {
-      console.log("ownedPluginForm:onChangeFormats", data)
-      this.$emit("change-formats", data)
+      console.log("ownedPluginForm:onChangeFormats", data);
+      this.$emit("change-formats", data);
+    },
+
+    onChangeParseConfig: function(data) {
+      console.log("ownedPluginForm:onChangeParseConfig", data);
+      this.expression = data.expression;
+      this.timeFormat = data.timeFormat;
     },
 
     updateSection: function() {
@@ -65,77 +80,65 @@ const OwnedPluginForm = {
         method: "GET",
         url: "/api/config_definitions",
         headers: {
-          'X-CSRF-Token': this.token
+          "X-CSRF-Token": this.token
         },
         data: {
           type: this.pluginType,
           name: this.pluginName
         }
       }).then((data) => {
-        this.commonOptions = data.commonOptions
-        let foundExpression = false
-        let foundTimeFormat = false
+        this.commonOptions = data.commonOptions;
+        let foundExpression = false;
+        let foundTimeFormat = false;
         _.each(this.commonOptions, (option) => {
           if (option.name === "expression") {
-            foundExpression = true
-            this.expression = option.default
+            foundExpression = true;
+            this.expression = option.default;
             this.unwatchExpression = this.$watch("expression", (newValue, oldValue) => {
-              console.log(newValue)
+              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
+            foundTimeFormat = true;
+            this.timeFormat = option.default;
+            console.log(this.timeFormat);
             this.unwatchTimeFormat = this.$watch("timeFormat", (newValue, oldValue) => {
-              console.log({"watch time_format": newValue})
+              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
+            this.expression = null;
+            this.unwatchExpression();
+            this.unwatchExpression = null;
           }
           if (!foundTimeFormat && this.unwatchTimeFormat) {
-            this.timeFormat = null
-            this.unwatchTimeFormat()
-            this.unwatchTimeFormat = null
+            this.timeFormat = null;
+            this.unwatchTimeFormat();
+            this.unwatchTimeFormat = null;
           }
-        })
-      })
+        });
+      });
     },
 
     selectId: function(pluginType) {
-      return `setting_${pluginType}_type`
+      return `setting_${pluginType}_type`;
     },
     selectClass: function(pluginType) {
-      return `${pluginType} form-control`
+      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 ""
-      }
+      return `setting[${pluginType}_type]`;
     }
   }
-}
+};
 
-export { OwnedPluginForm as default }
+export { OwnedPluginForm as default };

data/app/javascript/packs/parser_multiline_form.js

@@ -1,5 +1,6 @@
-'use strict'
-import 'lodash/lodash'
+/* global _ */
+"use strict";
+import "lodash/lodash";
 const ParserMultilineForm = {
   template: "#vue-parser-multiline-form",
   props: [
@@ -12,40 +13,40 @@ const ParserMultilineForm = {
       formatFirstline: "",
       formats: "",
       formatFirstlineDesc: ""
-    }
+    };
   },
 
   watch: {
     "formatFirstLine": function(newValue, oldValue) {
-      console.log(`watch formatFirstLine: ${newValue}`)
+      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}`)
+      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
+        return o.name === "format_firstline";
+      });
+      this.formatFirstlineDesc = option.desc;
     }
   },
 
   methods: {
     textareaId: function(pluginType) {
-      return `setting_${pluginType}_0__formats`
+      return `setting_${pluginType}_0__formats`;
     },
     textareaName: function(pluginType) {
-      return `setting[${pluginType}[0]][formats]`
+      return `setting[${pluginType}[0]][formats]`;
     }
   }
-}
+};
 
-export { ParserMultilineForm as default }
+export { ParserMultilineForm as default };

data/app/javascript/packs/plugin_setting.js

@@ -1,19 +1,19 @@
-'use strict'
-import 'lodash/lodash'
-import 'popper.js/dist/popper'
-import 'bootstrap/dist/js/bootstrap'
-import OwnedPluginForm from './owned_plugin_form'
+"use strict";
+import "lodash/lodash";
+import "popper.js/dist/popper";
+import "bootstrap/dist/js/bootstrap";
+import OwnedPluginForm from "./owned_plugin_form";
 
-window.addEventListener('load', () => {
+window.addEventListener("load", () => {
   new Vue({
-    el: '#plugin-setting',
-    data: () => {
-      return {}
-    },
+    el: "#plugin-setting",
     components: {
-      'owned-plugin-form': OwnedPluginForm
+      "owned-plugin-form": OwnedPluginForm
+    },
+    data: () => {
+      return {};
     },
     methods: {
     }
-  })
-})
+  });
+});

data/app/javascript/packs/settings.js

@@ -1,10 +1,15 @@
+/* global _ */
+"use strict";
+
+import "lodash/lodash";
+
 $(document).ready(() => {
   const SettingSection = {
-    template: '#vue-setting-section',
-    props: ['id', 'content', 'type', 'name', 'arg'],
+    template: "#vue-setting-section",
+    props: ["id", "content", "type", "name", "arg"],
     data: function() {
       return {
-        mode: 'default',
+        mode: "default",
         processing: false
       };
     },
@@ -13,24 +18,24 @@ $(document).ready(() => {
     },
     computed: {
       endpoint: function() {
-        return '/api/settings/' + this.id;
+        return "/api/settings/" + this.id;
       }
     },
     methods: {
-      onCancel: function(event) {
+      onCancel: function(_event) {
         this.initialState();
       },
-      onEdit: function(ev) {
+      onEdit: function(_event) {
         this.mode = "edit";
       },
-      onDelete: function(ev) {
+      onDelete: function(_event) {
         if (!confirm("really?")) {
           return;
         }
         this.destroy();
       },
-      onSubmit: function(ev) {
-        const token = document.getElementsByName("csrf-token")[0].getAttribute('content');
+      onSubmit: function(_event) {
+        const token = document.getElementsByName("csrf-token")[0].getAttribute("content");
         this.processing = true;
         this.content = $(`#${this.id} textarea.form-control`)[0].dataset.content;
         $.ajax({
@@ -42,7 +47,7 @@ $(document).ready(() => {
             content: this.content
           },
           headers: {
-            'X-CSRF-Token': token
+            "X-CSRF-Token": token
           }
         }).then((data)=> {
           _.each(data, function(v,k){
@@ -55,10 +60,10 @@ $(document).ready(() => {
       },
       initialState: function(){
         this.processing = false;
-        this.mode = 'default';
+        this.mode = "default";
       },
       destroy: function(){
-        const token = document.getElementsByName("csrf-token")[0].getAttribute('content');
+        const token = document.getElementsByName("csrf-token")[0].getAttribute("content");
         $.ajax({
           url: this.endpoint,
           method: "POST",
@@ -67,7 +72,7 @@ $(document).ready(() => {
             id: this.id
           },
           headers: {
-            'X-CSRF-Token': token
+            "X-CSRF-Token": token
           }
         }).then(()=> {
           this.$parent.update();
@@ -78,6 +83,9 @@ $(document).ready(() => {
 
   new Vue({
     el: "#vue-setting",
+    components: {
+      "setting-section": SettingSection
+    },
     data: function(){
       return {
         loaded: false,
@@ -91,10 +99,7 @@ $(document).ready(() => {
     mounted: function() {
       this.$nextTick(() => {
         this.update();
-      })
-    },
-    components: {
-      'setting-section': SettingSection
+      });
     },
     methods: {
       update: function() {
@@ -119,4 +124,4 @@ $(document).ready(() => {
       }
     }
   });
-})
+});