fluent · okkez · Oct 9, 2018 · Oct 3, 2018 · Oct 3, 2018 · Oct 3, 2018
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -12,6 +12,7 @@
  *
  *= require font-awesome
  *= require bootstrap/dist/css/bootstrap
+ *= require bootstrap-vue/dist/bootstrap-vue
  *= require startbootstrap-sb-admin/css/sb-admin.css
  *= require datatables.net-bs4/css/dataTables.bootstrap4.css
  *= require codemirror/lib/codemirror

diff --git a/app/controllers/misc_controller.rb b/app/controllers/misc_controller.rb
@@ -4,6 +4,8 @@
 class MiscController < ApplicationController
   after_action :update!, only: [:update_fluentd_ui]
 
+  helper_method :env_items
+
   def show
     redirect_to misc_information_path
   end
@@ -75,4 +77,10 @@ def add_version_file_to(zip)
   def update!
     FluentdUiRestart.perform_later
   end
+
+  def env_items
+    @env.map do |key, value|
+      { key: key, value: value }
+    end
+  end
 end
diff --git a/app/controllers/plugins_controller.rb b/app/controllers/plugins_controller.rb
@@ -1,25 +1,36 @@
 class PluginsController < ApplicationController
+  helper_method :plugins_json
+
   def index
     redirect_to installed_plugins_path
   end
 
   def installed
-    @plugins = Plugin.installed.reject{|plugin| plugin.processing? }
+    @plugins = PluginDecorator.decorate_collection(Plugin.installed.reject{|plugin| plugin.processing? })
   end
 
   def recommended
     @plugins = PluginDecorator.decorate_collection(Plugin.recommended)
   end
 
   def updated
-    @plugins = Plugin.installed.reject{|plugin| plugin.latest_version? }
+    @plugins = PluginDecorator.decorate_collection(Plugin.installed.reject{|plugin| plugin.latest_version? })
   end
 
   def install
     params[:plugins].each do |gem_name|
       GemInstallerJob.perform_later(gem_name)
     end
-    redirect_to plugins_path
+    respond_to do |format|
+      format.html do
+        redirect_to plugins_path
+      end
+      format.json do
+        plugins = PluginDecorator.decorate_collection(Plugin.recommended.select {|item| params[:plugins].include?(item.gem_name)})
+        render json: plugins.map(&:to_hash).to_json
+      end
+    end
+
   end
 
   def uninstall
@@ -41,4 +52,10 @@ def bulk_upgrade
     end
     redirect_to plugins_path
   end
+
+  private
+
+  def plugins_json
+    JSON.pretty_generate(@plugins.map(&:to_hash))
+  end
 end
diff --git a/app/decorators/plugin_decorator.rb b/app/decorators/plugin_decorator.rb
@@ -10,4 +10,22 @@ def status
       I18n.t("terms.not_installed")
     end
   end
+
+  def to_hash
+    {
+      is_installed: installed?,
+      is_processing: processing?,
+      uninstall_button: "plugin-modal-#{gem_name}",
+      name: gem_name,
+      authors: authors,
+      summary: summary,
+      api_version: api_version,
+      category: category,
+      status: status,
+      installed_version: installed_version,
+      latest_version: latest_version,
+      is_latest_version: latest_version?,
+      rubygems_org_page: rubygems_org_page
+    }
+  end
 end
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -7,8 +7,6 @@
 // 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");
-
 import jQuery from "jquery/dist/jquery";
 
 window.$ = jQuery;
@@ -27,6 +25,10 @@ import "startbootstrap-sb-admin/js/sb-admin-datatables";
 
 import Vue from "vue/dist/vue.esm";
 import Vuex from "vuex/dist/vuex.esm";
+import BootstrapVue from "bootstrap-vue/dist/bootstrap-vue.esm";
+
+Vue.use(Vuex);
+Vue.use(BootstrapVue);
 
 Vue.filter("to_json", function (value) {
   return JSON.stringify(value);
@@ -37,6 +39,6 @@ window.Vuex = Vuex;
 
 import "../stylesheets/application.scss";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   $("[data-toggle=tooltip]").tooltip();
 });
diff --git a/app/javascript/packs/config_field.js b/app/javascript/packs/config_field.js
@@ -58,13 +58,6 @@ const ConfigField = {
     if (this.option.name === "time_format") {
       this.timeFormat = this.initialTimeFormat;
     }
-    this.$nextTick(() => {
-      console.log("config-field updated");
-      if ($("[data-toggle=tooltip]").tooltip) {
-        $("[data-toggle=tooltip]").tooltip("dispose");
-        $("[data-toggle=tooltip]").tooltip("enable");
-      }
-    });
   },
 
   methods: {
@@ -87,6 +80,9 @@ const ConfigField = {
       }
       this.$emit("change-parse-config", {});
     },
+    labelId: function(pluginType, option) {
+      return `label_${this.inputId(pluginType, option)}`;
+    },
     inputId: function(pluginType, option) {
       if (pluginType === "output") {
         return `setting_${option.name}`;

diff --git a/app/javascript/packs/filter_grep_setting.js b/app/javascript/packs/filter_grep_setting.js
@@ -4,7 +4,7 @@ import "lodash/lodash";
 
 import GrepContainer from "./grep_container";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#filter-grep-setting",
     components: {

diff --git a/app/javascript/packs/fluent_log.js b/app/javascript/packs/fluent_log.js
@@ -1,5 +1,5 @@
 "use strict";
-$(document).ready(()=> {
+window.addEventListener("load", ()=> {
   new Vue({
     el: "#fluent-log",
     data: {

diff --git a/app/javascript/packs/grep_pattern.js b/app/javascript/packs/grep_pattern.js
@@ -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}]`;
     }

diff --git a/app/javascript/packs/in_tail_parse.js b/app/javascript/packs/in_tail_parse.js
@@ -6,7 +6,7 @@ import "bootstrap/dist/js/bootstrap";
 import ParserPluginForm from "./parser_plugin_form";
 import store from "./store";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#in-tail-parse",
     store,
@@ -51,14 +51,6 @@ $(document).ready(() => {
       this.parseType = this.initialPluginName;
       this.preview();
     },
-    updated: function() {
-      this.$nextTick(() => {
-        if ($("[data-toggle=tooltip]").tooltip) {
-          $("[data-toggle=tooltip]").tooltip("dispose");
-          $("[data-toggle=tooltip]").tooltip("enable");
-        }
-      });
-    },
     methods: {
       onChangePluginName: function(name) {
         console.log("#in-tail-parse onChangePluginName", name);

diff --git a/app/javascript/packs/navigation.js b/app/javascript/packs/navigation.js
@@ -0,0 +1,62 @@
+const POLLING_INTERVAL = 3 * 1000;
+const POLLING_URL = "/polling/alerts";
+
+window.addEventListener("load", () => {
+  new Vue({
+    el: "#mainNav",
+    data: function() {
+      return {
+        alerts: []
+      };
+    },
+
+    computed: {
+      alertsCount: {
+        get: function() { return this.alerts.length; }
+      },
+      hasAlerts: {
+        get: function() { return this.alertsCount > 0; }
+      }
+    },
+
+    created: function(){
+      let timer;
+      let self = this;
+      let currentInterval = POLLING_INTERVAL;
+      let fetch = function(){
+        self.fetchAlertsData().then(function(alerts){
+          if(self.alerts.toString() == alerts.toString()) {
+            currentInterval *= 1.1;
+          } else {
+            currentInterval = POLLING_INTERVAL;
+          }
+          self.alerts = alerts;
+          timer = setTimeout(fetch, currentInterval);
+        })["catch"](function(xhr){
+          if(xhr.status === 401) {
+            // signed out
+          }
+          if(xhr.status === 0) {
+            // server unreachable (maybe down)
+          }
+        });
+      };
+      window.addEventListener("focus", function(_event){
+        currentInterval = POLLING_INTERVAL;
+        timer = setTimeout(fetch, currentInterval);
+      }, false);
+      window.addEventListener("blur", function(_event){
+        clearTimeout(timer);
+      }, false);
+      fetch();
+    },
+
+    methods: {
+      fetchAlertsData: function() {
+        return new Promise(function(resolve, reject) {
+          $.getJSON(POLLING_URL, resolve).fail(reject);
+        });
+      }
+    }
+  });
+});
diff --git a/app/javascript/packs/nested_settings.js b/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) {

diff --git a/app/javascript/packs/notification.js b/app/javascript/packs/notification.js
@@ -1,7 +1,7 @@
 const POLLING_INTERVAL = 3 * 1000;
 const POLLING_URL = "/polling/alerts";
 
-$(document).ready(()=> {
+window.addEventListener("load", ()=> {
   new Vue({
     el: "#vue-notification",
     data: {

diff --git a/app/javascript/packs/out_forward_setting.js b/app/javascript/packs/out_forward_setting.js
@@ -3,7 +3,7 @@
 import TransportConfig from "./transport_config";
 import OwnedPluginForm from "./owned_plugin_form";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#out-forward-setting",
     components: {

diff --git a/app/javascript/packs/out_s3_setting.js b/app/javascript/packs/out_s3_setting.js
@@ -3,7 +3,7 @@
 import OwnedPluginForm from "./owned_plugin_form";
 import AwsCredential from "./aws_credential";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#out-s3-setting",
     components: {

diff --git a/app/javascript/packs/owned_plugin_form.js b/app/javascript/packs/owned_plugin_form.js
@@ -43,15 +43,6 @@ const OwnedPluginForm = {
     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() {
       this.updateSection();

diff --git a/app/javascript/packs/parser_plugin_form.js b/app/javascript/packs/parser_plugin_form.js
@@ -51,15 +51,6 @@ const ParserPluginForm = {
     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(event) {
       store.dispatch("parserParams/updateType", event);

diff --git a/app/javascript/packs/settings.js b/app/javascript/packs/settings.js
@@ -3,7 +3,7 @@
 
 import "lodash/lodash";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   const SettingSection = {
     template: "#vue-setting-section",
     props: [

diff --git a/app/javascript/packs/transport_section.js b/app/javascript/packs/transport_section.js
@@ -4,7 +4,7 @@ import "lodash/lodash";
 
 import ConfigField from "./config_field";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#transport-section",
     components: {

diff --git a/app/javascript/packs/treeview.js b/app/javascript/packs/treeview.js
@@ -1,7 +1,7 @@
 /* global _ */
 "use strict";
 import "lodash/lodash";
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#treeview",
     props: {

diff --git a/app/models/plugin.rb b/app/models/plugin.rb
@@ -41,18 +41,18 @@ def upgrade!(new_version)
   end
 
   def installed?
-    self.class.installed.find do |plugin|
+    self.class.installed.any? do |plugin|
       plugin.gem_name == gem_name
     end
   end
 
   def processing?
-    !!WORKING.find{|data| data[:plugin].gem_name == gem_name}
+    WORKING.any?{|data| data[:plugin].gem_name == gem_name}
   end
 
   def installed_version
-    return unless inst = installed?
-    inst.version
+    return unless installed?
+    version
   end
 
   def latest_version?