From 4c6e34ef035f393aa8adf2d6b87c9e3c2ea231cc Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Wed, 3 Oct 2018 13:16:05 +0900
Subject: [PATCH 01/29] Use window.addEventListener instead of
 `$(document).ready`

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/application.js         | 2 +-
 app/javascript/packs/filter_grep_setting.js | 2 +-
 app/javascript/packs/fluent_log.js          | 2 +-
 app/javascript/packs/in_tail_parse.js       | 2 +-
 app/javascript/packs/nested_settings.js     | 2 +-
 app/javascript/packs/notification.js        | 2 +-
 app/javascript/packs/out_forward_setting.js | 2 +-
 app/javascript/packs/out_s3_setting.js      | 2 +-
 app/javascript/packs/settings.js            | 2 +-
 app/javascript/packs/transport_section.js   | 2 +-
 app/javascript/packs/treeview.js            | 2 +-
 app/views/misc/information.html.haml        | 2 +-
 app/views/plugins/installed.html.haml       | 2 +-
 app/views/plugins/recommended.html.haml     | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 6df7d10dd..81734f085 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -37,6 +37,6 @@ window.Vuex = Vuex;
 
 import "../stylesheets/application.scss";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   $("[data-toggle=tooltip]").tooltip();
 });
diff --git a/app/javascript/packs/filter_grep_setting.js b/app/javascript/packs/filter_grep_setting.js
index 1498be120..3c9fb14c4 100644
--- 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
index d2b1ff5de..34c836c8e 100644
--- 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/in_tail_parse.js b/app/javascript/packs/in_tail_parse.js
index a9dbf2fbf..e826b9b9d 100644
--- 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,
diff --git a/app/javascript/packs/nested_settings.js b/app/javascript/packs/nested_settings.js
index 5a36b4dc2..4378aedfc 100644
--- 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
index 07955c7d1..c01a829b6 100644
--- 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
index fdc7ecc3d..b520f766b 100644
--- 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
index fa715822c..fda0e9ecb 100644
--- 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/settings.js b/app/javascript/packs/settings.js
index f6150b0ad..6482417a2 100644
--- 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
index f4c1bdf3b..808cc37e0 100644
--- 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
index e4b3134a7..6d065e132 100644
--- 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/views/misc/information.html.haml b/app/views/misc/information.html.haml
index aba14fa0f..10b7618a5 100644
--- a/app/views/misc/information.html.haml
+++ b/app/views/misc/information.html.haml
@@ -65,7 +65,7 @@
               %td= value
 
 :javascript
-  $(document).ready(function() {
+  window.addEventListener("load", () => {
     $('#env-table').dataTable({
       "autoWidth": false,
       "ordering": true,
diff --git a/app/views/plugins/installed.html.haml b/app/views/plugins/installed.html.haml
index 9fb1fe06a..e2a57f108 100644
--- a/app/views/plugins/installed.html.haml
+++ b/app/views/plugins/installed.html.haml
@@ -53,7 +53,7 @@
               = submit_tag t('plugins.common.install_latest_version'), class: "btn btn-primary"
 
 :javascript
-  $(document).ready(function() {
+  window.addEventListener("load", () => {
     $('#plugins-table').dataTable({
       "autoWidth": false,
       "ordering": true,
diff --git a/app/views/plugins/recommended.html.haml b/app/views/plugins/recommended.html.haml
index 102a5e92e..4cd0ce92c 100644
--- a/app/views/plugins/recommended.html.haml
+++ b/app/views/plugins/recommended.html.haml
@@ -29,7 +29,7 @@
 
 
 :javascript
-  $(document).ready(function() {
+  window.addEventListener("load", () => {
     $('#plugins-table').dataTable({
       "autoWidth": false,
       "ordering": true,

From 0c9fbaec5b0a15e2df7267571b07fbf153fef781 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Wed, 3 Oct 2018 13:25:18 +0900
Subject: [PATCH 02/29] Add bootstrap-vue

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/application.js |   1 +
 package.json                        |   1 +
 yarn.lock                           | 112 ++++++++++++++++++++++++++--
 3 files changed, 109 insertions(+), 5 deletions(-)

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 81734f085..3b3818de7 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -27,6 +27,7 @@ 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.filter("to_json", function (value) {
   return JSON.stringify(value);
diff --git a/package.json b/package.json
index 23b7409cd..344f61c0b 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   },
   "dependencies": {
     "@rails/webpacker": "3.5",
+    "bootstrap-vue": "^2.0.0-rc.11",
     "codemirror": "^5.37.0",
     "es6-promise": "^4.2.4",
     "jquery": "^3.3.1",
diff --git a/yarn.lock b/yarn.lock
index 975b47100..6f84888b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -123,6 +123,10 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
+ansi-escapes@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
+
 ansi-escapes@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
@@ -725,6 +729,14 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-polyfill@6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
+  dependencies:
+    babel-runtime "^6.22.0"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
 babel-polyfill@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
@@ -928,10 +940,25 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
+bootstrap-vue@^2.0.0-rc.11:
+  version "2.0.0-rc.11"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.11.tgz#47aaa6d2a8d390477de75e636d8ea652b1d03f59"
+  dependencies:
+    bootstrap "^4.1.1"
+    lodash.get "^4.4.2"
+    lodash.startcase "^4.4.0"
+    opencollective "^1.0.3"
+    popper.js "^1.12.9"
+    vue-functional-data-merge "^2.0.5"
+
 bootstrap@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
 
+bootstrap@^4.1.1:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -1181,7 +1208,7 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chalk@^1.1.1, chalk@^1.1.3:
+chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   dependencies:
@@ -1958,6 +1985,12 @@ encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
 
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  dependencies:
+    iconv-lite "~0.4.13"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@@ -2321,7 +2354,7 @@ extend@~3.0.0, extend@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
-external-editor@^2.1.0:
+external-editor@^2.0.1, external-editor@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
   dependencies:
@@ -2994,6 +3027,12 @@ iconv-lite@^0.4.17, iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@~0.4.13:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -3070,6 +3109,24 @@ ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
+inquirer@3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.0.6.tgz#e04aaa9d05b7a3cb9b0f407d04375f0447190347"
+  dependencies:
+    ansi-escapes "^1.1.0"
+    chalk "^1.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.0.1"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rx "^4.1.0"
+    string-width "^2.0.0"
+    strip-ansi "^3.0.0"
+    through "^2.3.6"
+
 inquirer@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
@@ -3346,7 +3403,7 @@ is-resolvable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
 
-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
@@ -3596,6 +3653,10 @@ lodash.clonedeep@^4.3.2:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -3604,6 +3665,10 @@ lodash.mergewith@^4.6.0:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
 
+lodash.startcase@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.startcase/-/lodash.startcase-4.4.0.tgz#9436e34ed26093ed7ffae1936144350915d9add8"
+
 lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
@@ -3819,7 +3884,7 @@ minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
-minimist@^1.1.3, minimist@^1.2.0:
+minimist@1.2.0, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
@@ -3954,6 +4019,13 @@ nice-try@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
 
+node-fetch@1.6.3:
+  version "1.6.3"
+  resolved "http://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -4187,6 +4259,24 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+opencollective@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/opencollective/-/opencollective-1.0.3.tgz#aee6372bc28144583690c3ca8daecfc120dd0ef1"
+  dependencies:
+    babel-polyfill "6.23.0"
+    chalk "1.1.3"
+    inquirer "3.0.6"
+    minimist "1.2.0"
+    node-fetch "1.6.3"
+    opn "4.0.2"
+
+opn@4.0.2:
+  version "4.0.2"
+  resolved "http://registry.npmjs.org/opn/-/opn-4.0.2.tgz#7abc22e644dff63b0a96d5ab7f2790c0f01abc95"
+  dependencies:
+    object-assign "^4.0.1"
+    pinkie-promise "^2.0.0"
+
 opn@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
@@ -4425,6 +4515,10 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
+popper.js@^1.12.9:
+  version "1.14.4"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
+
 popper.js@^1.14.3:
   version "1.14.3"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
@@ -5219,7 +5313,7 @@ regenerate@^1.2.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
 
-regenerator-runtime@^0.10.5:
+regenerator-runtime@^0.10.0, regenerator-runtime@^0.10.5:
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
@@ -5451,6 +5545,10 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+rx@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
+
 rxjs@^5.5.2:
   version "5.5.11"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.11.tgz#f733027ca43e3bec6b994473be4ab98ad43ced87"
@@ -6370,6 +6468,10 @@ vue-eslint-parser@^2.0.3:
     esquery "^1.0.0"
     lodash "^4.17.4"
 
+vue-functional-data-merge@^2.0.5:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-2.0.7.tgz#bdee655181eacdcb1f96ce95a4cc14e75313d1da"
+
 vue-hot-reload-api@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"

From db817c1b85ed9313997d8c7b1816e7855b2c2276 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Wed, 3 Oct 2018 16:07:59 +0900
Subject: [PATCH 03/29] Import CSS for bootstrap-vue

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/assets/stylesheets/application.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index ab49e874b..a49351aa3 100644
--- 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

From 14c24c5bc983b5f24ffae993874c9c7f59340219 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Wed, 3 Oct 2018 16:08:35 +0900
Subject: [PATCH 04/29] Use BootstrapVue

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/application.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 3b3818de7..f1a9c0c96 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -29,6 +29,9 @@ 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);
 });

From ea66cdc07ee1a53f999636e877ef3fd20b181ae6 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Wed, 3 Oct 2018 16:09:10 +0900
Subject: [PATCH 05/29] Use bootstrap-vue

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/sessions/new.html.haml | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/views/sessions/new.html.haml b/app/views/sessions/new.html.haml
index 3cf57d1c4..8503140be 100644
--- a/app/views/sessions/new.html.haml
+++ b/app/views/sessions/new.html.haml
@@ -1,7 +1,5 @@
-.card.card-login.mx-auto.mt-5
-  .card-header
-    = t('messages.please_sign_in')
-  .card-body
+#login-form
+  %b-card.card-login.mx-auto.mt-5{"header" => t('messages.please_sign_in')}
     = render partial: "shared/error"
     = form_for(:session, url: sessions_path) do |f|
       .form-group
@@ -10,3 +8,11 @@
         = f.password_field :password, placeholder: t('terms.password'), class: "form-control"
 
       = submit_tag t("terms.sign_in"), class: "btn btn-primary btn-block"
+
+:javascript
+  window.addEventListener("load", () => {
+    new Vue({
+      name: "LoginForm",
+      el: "#login-form"
+    })
+  });

From d1a1affae335b29bfc43eb2b7500c1797200c25b Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Wed, 3 Oct 2018 16:09:41 +0900
Subject: [PATCH 06/29] Use bootstrap-vue for misc/information

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/controllers/misc_controller.rb   |  8 +++
 app/views/misc/information.html.haml | 89 +++++++++++++++-------------
 2 files changed, 55 insertions(+), 42 deletions(-)

diff --git a/app/controllers/misc_controller.rb b/app/controllers/misc_controller.rb
index 2e3b24095..b8a556d9d 100644
--- 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/views/misc/information.html.haml b/app/views/misc/information.html.haml
index 10b7618a5..b77a86436 100644
--- a/app/views/misc/information.html.haml
+++ b/app/views/misc/information.html.haml
@@ -1,23 +1,23 @@
+- add_javascript_pack_tag("information")
 - page_title t('.page_title') do
   - link_to misc_download_info_path, class: "btn btn-primary float-right mt-3" do
     = icon('fa-download')
     = t('.download_system_information')
 
-- if FluentdUI.update_available? && !FluentdUI.td_agent_ui?
-  - # NOTE: td-agent-ui shouldn't have auto update feature
-  .row
-    .col-xl-12
-      %p
-        = link_to misc_update_fluentd_ui_path, class: "btn btn-primary btn-lg", method: :post do
-          = t('.update_fluentd_ui', version: FluentdUI.latest_version, title: fluentd_ui_title)
-        = t('.update_fluentd_ui_caution', brand: fluentd_ui_brand)
+#information
+  - if FluentdUI.update_available? && !FluentdUI.td_agent_ui?
+    - # NOTE: td-agent-ui shouldn't have auto update feature
+    .row
+      .col-xl-12
+        %p
+          = link_to misc_update_fluentd_ui_path, class: "btn btn-primary btn-lg", method: :post do
+            = t('.update_fluentd_ui', version: FluentdUI.latest_version, title: fluentd_ui_title)
+          = t('.update_fluentd_ui_caution', brand: fluentd_ui_brand)
 
-.row
-  .col-xl-6.col-sm-6.mb-3
-    .card.card-default
-      .card-header
-        %h4= t("terms.version")
-      .card-body
+  .row
+    .col-xl-6.col-sm-6.mb-3
+      %b-card{"header" => t("terms.version"),
+              "header-tags" => "h4"}
         %dl{class: "dl-horizontal"}
           %dt ruby
           %dd= RUBY_DESCRIPTION
@@ -27,11 +27,9 @@
           %dt fluentd-ui
           %dd= FluentdUI::VERSION
 
-  .col-xl-6.col-sm-6.mb-3
-    .card.card-default
-      .card-header
-        %h4= t('terms.installed_plugins')
-      .card-body
+    .col-xl-6.col-sm-6.mb-3
+      %b-card{"header" => t('terms.installed_plugins'),
+              "header-tags" => "h4"}
         - if @plugins.present?
           %table{class: "table table-hover", id: "plugins-table"}
             %thead
@@ -46,31 +44,38 @@
         - else
           = t "plugins.common.no_installed"
 
-.row
-  .col-xl-12.col-sm-12
-    .card.card-default
-      .card-header
-        %h4{"data-toggle" => "collapse", "href" => "#env-table"}
-          = icon('fa-caret-down')
-          = t('.env')
-      %table{class: "table table-hover collapse", id: "env-table"}
-        %thead
-          %tr
-            %th= t('.env_key')
-            %th= t('.env_value')
-        %tbody
-          - @env.each_pair do |key, value|
-            %tr
-              %td= key
-              %td= value
+  .row
+    .col-xl-12.col-sm-12
+      %b-card
+        %template{"slot" => "header"}
+          %h4{"v-b-toggle.env-table" => ""}
+            = icon('fa-caret-down')
+            = t('.env')
+        %b-collapse#env-table
+          %b-form-group(horizontal){"label" => "Filter"}
+            %b-input-group
+              %b-form-input{"v-model" => "filter"}
+              %b-input-group-append
+                %b-btn{ "v-bind:disabled" => "!filter", "v-on:click" => "filter = ''" }
+                  Clear
+          %b-table(stripped hover small){"v-bind:items" => "items",
+                                         "v-bind:fields" => "fields",
+                                         "v-bind:filter" => "filter"}
 
 :javascript
   window.addEventListener("load", () => {
-    $('#env-table').dataTable({
-      "autoWidth": false,
-      "ordering": true,
-      "paging": false,
-      "info": false,
-      "searching": false
+    new Vue({
+      name: "Information",
+      el: "#information",
+      data() {
+        return {
+          fields: {
+            key: { label: "#{t('.env_key')}", sortable: true },
+            value: { label: "#{t('.env_value')}" }
+          },
+          items: #{env_items.to_json.html_safe},
+          filter: null
+        };
+      }
     });
   });

From a2f72340a92ea0497feebfa1e4bddbbce34f2ec2 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Wed, 3 Oct 2018 16:12:01 +0900
Subject: [PATCH 07/29] Remove unused code

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/misc/information.html.haml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/views/misc/information.html.haml b/app/views/misc/information.html.haml
index b77a86436..d0d53864e 100644
--- a/app/views/misc/information.html.haml
+++ b/app/views/misc/information.html.haml
@@ -1,4 +1,3 @@
-- add_javascript_pack_tag("information")
 - page_title t('.page_title') do
   - link_to misc_download_info_path, class: "btn btn-primary float-right mt-3" do
     = icon('fa-download')

From 9f65e6758a0f042db5faac878ad3548043b707af Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Wed, 3 Oct 2018 16:15:40 +0900
Subject: [PATCH 08/29] Use proper label

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/misc/information.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/misc/information.html.haml b/app/views/misc/information.html.haml
index d0d53864e..ff48701fb 100644
--- a/app/views/misc/information.html.haml
+++ b/app/views/misc/information.html.haml
@@ -51,7 +51,7 @@
             = icon('fa-caret-down')
             = t('.env')
         %b-collapse#env-table
-          %b-form-group(horizontal){"label" => "Filter"}
+          %b-form-group.float-right(horizontal){"label" => t("terms.search")}
             %b-input-group
               %b-form-input{"v-model" => "filter"}
               %b-input-group-append

From 093a48415a5f1bfa45693ba5a69c2fcefbb1905d Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 14:06:44 +0900
Subject: [PATCH 09/29] Add label for clear

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 config/locales/translation_en.yml | 1 +
 config/locales/translation_ja.yml | 1 +
 2 files changed, 2 insertions(+)

diff --git a/config/locales/translation_en.yml b/config/locales/translation_en.yml
index 590632c34..c4eee2d8c 100644
--- a/config/locales/translation_en.yml
+++ b/config/locales/translation_en.yml
@@ -50,6 +50,7 @@ en:
     installing: "Installing: %{target}"
     uninstalling: "Uninstalling: %{target}"
     search: Search
+    clear: Clear
     changeme_password: '<a href="/user">Change the password</a> from default for your security'
     destroy_confirm_title: "%{target} Deletion"
     confirm_body: |
diff --git a/config/locales/translation_ja.yml b/config/locales/translation_ja.yml
index 0fc91a263..4d2a70fd3 100644
--- a/config/locales/translation_ja.yml
+++ b/config/locales/translation_ja.yml
@@ -50,6 +50,7 @@ ja:
     installing: "インストール中: %{target}"
     uninstalling: "アンインストール中: %{target}"
     search: 検索
+    clear: クリア
     changeme_password: 'パスワードを初期設定から<a href="/user">変更</a>してください'
     destroy_confirm_title: "%{target}を削除"
     confirm_body: |

From 6cd589c4c2d946bdba8de7b95933b288c667404b Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 14:07:18 +0900
Subject: [PATCH 10/29] Decorate plugins

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/controllers/plugins_controller.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/controllers/plugins_controller.rb b/app/controllers/plugins_controller.rb
index f77071659..59b05136e 100644
--- a/app/controllers/plugins_controller.rb
+++ b/app/controllers/plugins_controller.rb
@@ -4,7 +4,7 @@ def index
   end
 
   def installed
-    @plugins = Plugin.installed.reject{|plugin| plugin.processing? }
+    @plugins = PluginDecorator.decorate_collection(Plugin.installed.reject{|plugin| plugin.processing? })
   end
 
   def recommended
@@ -12,7 +12,7 @@ def 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

From 3bef15eae67a2d61f8ae383b57f06e4d9d05332e Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 14:07:44 +0900
Subject: [PATCH 11/29] Plugin#installed? and Plugin#processing? should return
 true/false

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/models/plugin.rb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/models/plugin.rb b/app/models/plugin.rb
index 4b866da31..99ab50b2d 100644
--- 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?

From eb7c2cade3ff366bf47cdb1232d90f4718434b2e Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 14:08:19 +0900
Subject: [PATCH 12/29] Add helper method plguins_json

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/controllers/plugins_controller.rb | 19 ++++++++++++++++++-
 app/decorators/plugin_decorator.rb    | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/app/controllers/plugins_controller.rb b/app/controllers/plugins_controller.rb
index 59b05136e..189b03568 100644
--- a/app/controllers/plugins_controller.rb
+++ b/app/controllers/plugins_controller.rb
@@ -1,4 +1,6 @@
 class PluginsController < ApplicationController
+  helper_method :plugins_json
+
   def index
     redirect_to installed_plugins_path
   end
@@ -19,7 +21,16 @@ 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
index 0ed1b654e..2768ac854 100644
--- 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

From cbd8c57f3156438294f171c31e8f91171bc06f1c Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 14:08:44 +0900
Subject: [PATCH 13/29] Use bootstrap-vue on /plugins/recommended

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/plugins/recommended.html.haml | 106 ++++++++++++------------
 1 file changed, 53 insertions(+), 53 deletions(-)

diff --git a/app/views/plugins/recommended.html.haml b/app/views/plugins/recommended.html.haml
index 4cd0ce92c..c0f9e7e36 100644
--- a/app/views/plugins/recommended.html.haml
+++ b/app/views/plugins/recommended.html.haml
@@ -1,61 +1,61 @@
 - page_title t('.page_title')
 
-%table{class: "table table-striped table-hover", id: "plugins-table"}
-  %thead
-    %tr
-      %th{scope: "col", width: "24"}
-      %th{scope: "col"}= t('plugins.common.name')
-      %th{scope: "col"}= t('plugins.common.api_version')
-      %th{scope: "col"}= t('plugins.common.category')
-      %th{scope: "col"}= t('plugins.common.status')
-      %th{scope: "col"}
-  %tbody
-    - @plugins.each do |plugin|
-      %tr
-        %td
-          - unless plugin.installed? || plugin.processing?
-            = link_to t("terms.install"), install_plugins_path, class: "js-install btn btn-primary", data: { url: install_plugins_path, name: plugin.gem_name}
-        %td
-          %label{for: "plugin_#{plugin.gem_name}"}
-            = plugin.gem_name
-        %td
-          = plugin.api_version
-        %td
-          = plugin.category
-        %td
-          = plugin.status
-        %td
-          = link_to t('plugins.view_on_rubygems_org'), plugin.rubygems_org_page, target: "_blank"
-
+#plugins-table
+  %b-form-group.float-right(horizontal){"label" => t("terms.search")}
+    %b-input-group
+      %b-form-input{"v-model" => "filter"}
+      %b-input-group-append
+        %b-btn{ "v-bind:disabled" => "!filter", "v-on:click" => "filter = ''" }
+          = t("terms.clear")
+  %b-table(stripped hover small){"v-bind:items" => "items",
+                                 "v-bind:fields" => "fields",
+                                 "v-bind:filter" => "filter"}
+    %template{"slot" => "is_installed", "slot-scope" => "row"}
+      %template{"v-if" => "row.item.is_installed || row.item.is_processing"}
+        &nbsp;
+      %template(v-else)
+        %b-button{"variant" => "primary",
+                  "data-url" => install_plugins_path,
+                  "v-bind:data-name" => "row.item.name",
+                  "v-on:click" => "installPlugin"}
+          = t("terms.install")
+    %template{"slot" => "rubygems_org_page", "slot-scope" => "row"}
+      %a{"target" => "_blank", "v-bind:href" => "row.item.rubygems_org_page"}
+        = t("plugins.view_on_rubygems_org")
 
 :javascript
   window.addEventListener("load", () => {
-    $('#plugins-table').dataTable({
-      "autoWidth": false,
-      "ordering": true,
-      "paging": false,
-      "info": false,
-      "searching": true,
-      "language": {
-        "search": "#{t("terms.search")} "
+    new Vue({
+      name: "RecommendedPlugins",
+      el: "#plugins-table",
+      data() {
+        return {
+          fields: {
+            is_installed: { label: "" },
+            name: { label: "#{t("plugins.common.name")}", sortable: true },
+            api_version: { label: "#{t("plugins.common.api_version")}", sortable: true },
+            category: { label: "#{t("plugins.common.category")}", sortable: true },
+            status: { label: "#{t("plugins.common.status")}", sortable: true },
+            rubygems_org_page: { label: "" }
+          },
+          items: #{plugins_json.html_safe},
+          filter: null
+        };
+      },
+      methods: {
+        installPlugin(event) {
+          $.ajax({
+            url: `${event.target.dataset.url}.json`,
+            data: {"plugins[]": event.target.dataset.name, "_method": "PATCH"},
+            method: "POST"
+          }).then((data) => {
+            console.log("installed", data);
+            let item = this.items.find(item => item.name === event.target.dataset.name);
+            item.is_processing = true;
+            item.status = "#{t("terms.processing")}";
+            this.update();
+          });
+        }
       }
     });
-    $('#plugins-table').on('click', '.js-install', function(ev){
-      ev.preventDefault();
-      var $anchor = $(ev.target);
-      var url = $anchor.attr('href');
-      $anchor.removeClass('js-install');
-      $anchor.attr("href", "#");
-      $anchor.css({color: "green"});
-      var name = $anchor.attr('data-name');
-      $.ajax({
-        url: url,
-        data: {"plugins[]": name, "_method": "PATCH"},
-        method: "POST"
-      }).done(function(){
-        $anchor.fadeOut();
-        var status = $anchor.parent().closest('tr').children()[3];
-        $(status).text("#{t("terms.processing")}");
-      });;
-    });
   });

From 947883c72d7dfc1911be3cac7807f3d2989d9524 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 14:30:41 +0900
Subject: [PATCH 14/29] Remove a garbage

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/decorators/plugin_decorator.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/decorators/plugin_decorator.rb b/app/decorators/plugin_decorator.rb
index 2768ac854..d3c1e99f7 100644
--- a/app/decorators/plugin_decorator.rb
+++ b/app/decorators/plugin_decorator.rb
@@ -15,7 +15,7 @@ def to_hash
     {
       is_installed: installed?,
       is_processing: processing?,
-      uninstall_button: "#plugin-modal-#{gem_name}",
+      uninstall_button: "plugin-modal-#{gem_name}",
       name: gem_name,
       authors: authors,
       summary: summary,

From 9e9a0f352f8bcd8ef5a3635ff2d6b6a14dd213ab Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 14:31:03 +0900
Subject: [PATCH 15/29] Use bootstrap-vue on /plugins/installed

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/plugins/installed.html.haml | 107 ++++++++++++--------------
 1 file changed, 48 insertions(+), 59 deletions(-)

diff --git a/app/views/plugins/installed.html.haml b/app/views/plugins/installed.html.haml
index e2a57f108..001304c4f 100644
--- a/app/views/plugins/installed.html.haml
+++ b/app/views/plugins/installed.html.haml
@@ -1,67 +1,56 @@
 - page_title t('.page_title')
 
-%table{class: "table table-striped table-hover", id: "plugins-table"}
-  %thead
-    %tr
-      %th{scope: "col"}
-      %th{scope: "col"}= t('plugins.common.name')
-      %th{scope: "col"}= t('plugins.common.authors')
-      %th{scope: "col"}= t('plugins.common.summary')
-      %th{scope: "col"}= t('plugins.common.installed_version')
-      %th{scope: "col"}= t('plugins.common.latest_version')
-      %th{scope: "col"}
-  %tbody
-    - @plugins.each do |plugin|
-      %tr
-        %td
-          %button{class: "btn btn-danger", data: {toggle: "modal", target:" #plugin-modal-#{plugin.gem_name}"}}
-            = t "terms.uninstall"
-          .modal.fade{id: "plugin-modal-#{plugin.gem_name}"}
-            .modal-dialog
-              .modal-content
-                .modal-header
-                  %button.close{"data-dismiss" => "modal"}
-                    = raw "&times;"
-                  %h4.modal-title
-                    = plugin.gem_name
-                .modal-body
-                  = t('terms.confirm_body', action: t('terms.uninstall'))
-                .modal-footer
-                  = form_tag(uninstall_plugins_path, method: :patch) do
-                    %button.btn.btn-secondary{"data-dismiss" => "modal"}
-                      Close
-                    = hidden_field_tag("plugins[]", plugin.gem_name)
-                    = submit_tag t('terms.uninstall'), class: "btn btn-danger"
-        %td
-          %label{for: "plugin_#{plugin.gem_name}"}
-            = plugin.gem_name
-        %td
-          = plugin.authors
-        %td
-          = plugin.summary
-        %td
-          = plugin.installed_version
-        %td
-          = plugin.latest_version
-        %td
-          - if plugin.latest_version?
-            = t('plugins.common.latest_version')
-          - else
-            = form_tag(upgrade_plugins_path, method: :patch) do
-              = hidden_field_tag("plugins[name]", plugin.gem_name)
-              = hidden_field_tag("plugins[version]", plugin.latest_version)
-              = submit_tag t('plugins.common.install_latest_version'), class: "btn btn-primary"
+#plugin-table
+  %b-form-group.float-right(horizontal){"label" => t("terms.search")}
+    %b-input-group
+      %b-form-input{"v-model" => "filter"}
+      %b-input-group-append
+        %b-btn{ "v-bind:disabled" => "!filter", "v-on:click" => "filter = ''" }
+          = t("terms.clear")
+  %b-table(stripped hover small){"v-bind:items" => "items",
+                                 "v-bind:fields" => "fields",
+                                 "v-bind:filter" => "filter"}
+    %template{"slot" => "uninstall_button", "slot-scope" => "row"}
+      %b-button{"variant" => "danger", "v-b-modal" => "row.item.uninstall_button"}
+        = t("terms.uninstall")
+      %b-modal{"v-bind:id" => "row.item.uninstall_button",
+               "v-bind:title" => "row.item.name"}
+        = t("terms.confirm_body", action: t("terms.uninstall"))
+        %template{"slot" => "modal-footer"}
+          = form_tag(uninstall_plugins_path, method: :patch) do
+            %b-button{"v-on:click" => "show=false"}
+              Close
+            %input{"type" => "hidden", "name" => "plugins[]", "v-bind:value" => "row.item.name"}
+            %b-button{"type" => "submit", "variant" => "danger"}
+              = t("terms.uninstall")
+    %template{"slot" => "is_latest_version", "slot-scope" => "row"}
+      %template{"v-if" => "row.value"}
+        = t("plugins.common.latest_version")
+      %template(v-else)
+        = form_tag(upgrade_plugins_path, method: :patch) do
+          %input{"type" => "hidden", "name" => "plugins[name]", "v-bind:value" => "row.item.name"}
+          %input{"type" => "hidden", "name" => "plugins[version]", "v-bind:value" => "row.item.latest_version"}
+          = submit_tag(t('plugins.common.install_latest_version'), class: "btn btn-primary")
 
 :javascript
   window.addEventListener("load", () => {
-    $('#plugins-table').dataTable({
-      "autoWidth": false,
-      "ordering": true,
-      "paging": false,
-      "info": false,
-      "searching": true,
-      "language": {
-        "search": "#{t("terms.search")} "
+    new Vue({
+      name: "InstalledPlugins",
+      el: "#plugin-table",
+      data() {
+        return {
+          fields: {
+            uninstall_button: { label: "" },
+            name: { label: "#{t("plugins.common.name")}", sortable: true },
+            authors: { label: "#{t("plugins.common.authors")}", sortable: true },
+            summary: { label: "#{t("plugins.common.summary")}", sortable: true  },
+            installed_version: { label: "#{t("plugins.common.installed_version")}", sortable: true },
+            latest_version: { label: "#{t("plugins.common.latest_version")}", sortable: true },
+            is_latest_version: { label: "" }
+          },
+          items: #{plugins_json.html_safe},
+          filter: null
+        }
       }
     });
   });

From e5f07f8878820f74fff7039684914d359d3448bb Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 14:34:55 +0900
Subject: [PATCH 16/29] Use small table

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/misc/information.html.haml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/misc/information.html.haml b/app/views/misc/information.html.haml
index ff48701fb..f0eae9918 100644
--- a/app/views/misc/information.html.haml
+++ b/app/views/misc/information.html.haml
@@ -30,7 +30,7 @@
       %b-card{"header" => t('terms.installed_plugins'),
               "header-tags" => "h4"}
         - if @plugins.present?
-          %table{class: "table table-hover", id: "plugins-table"}
+          %table{class: "table table-hover table-sm", id: "plugins-table"}
             %thead
               %tr
                 %th= t('plugins.common.name')

From e3f393ab21398f53ed020596e5fa72c4301075b6 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 15:41:10 +0900
Subject: [PATCH 17/29] Use b-collapse

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/shared/settings/_form.html.haml          | 4 ++--
 app/views/shared/vue/_owned_plugin_form.html.haml  | 4 ++--
 app/views/shared/vue/_parser_plugin_form.html.haml | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/views/shared/settings/_form.html.haml b/app/views/shared/settings/_form.html.haml
index 385bf4123..a4c4b1e15 100644
--- a/app/views/shared/settings/_form.html.haml
+++ b/app/views/shared/settings/_form.html.haml
@@ -44,10 +44,10 @@
 
     - if setting.advanced_options.present?
       .card.card-body.bg-light
-        %h4{"data-toggle" => "collapse", "href" => "#advanced-setting"}
+        %h4{"v-b-toggle" => "'advanced-setting'"}
           = icon('fa-caret-down')
           = t('terms.advanced_setting')
-        #advanced-setting.collapse
+        %b-collapse{"id" => "advanced-setting"}
           - setting.advanced_options.each do |key|
             = form.field(key)
 
diff --git a/app/views/shared/vue/_owned_plugin_form.html.haml b/app/views/shared/vue/_owned_plugin_form.html.haml
index 2bcaab6d2..0a818d0bc 100644
--- a/app/views/shared/vue/_owned_plugin_form.html.haml
+++ b/app/views/shared/vue/_owned_plugin_form.html.haml
@@ -21,10 +21,10 @@
                     "v-bind:option" => "option"}
       %template{"v-if" => '!_.isEmpty(advancedOptions)'}
         .card.card-body.bg-light
-          %h4{"data-toggle" => "collapse", "href" => "#owned-plugin-advanced-setting"}
+          %h4{"v-b-toggle" => "`${id}-advanced-setting`"}
             = icon('fa-caret-down')
             = t('terms.advanced_setting')
-          #owned-plugin-advanced-setting.collapse
+          %b-collapse{"v-bind:id" => "`${id}-advanced-setting`"}
             %config-field{"v-for" => "option in advancedOptions",
                           "v-bind:key" => "option.name",
                           "v-bind:plugin-type" => "pluginType",
diff --git a/app/views/shared/vue/_parser_plugin_form.html.haml b/app/views/shared/vue/_parser_plugin_form.html.haml
index f121ac9b2..73289c6b2 100644
--- a/app/views/shared/vue/_parser_plugin_form.html.haml
+++ b/app/views/shared/vue/_parser_plugin_form.html.haml
@@ -28,10 +28,10 @@
                         "v-on:change-parse-config" => "onChangeParseConfig"}
         %template{"v-if" => '!_.isEmpty(advancedOptions)'}
           .card.card-body.bg-light
-            %h4{"data-toggle" => "collapse", "href" => "#owned-plugin-advanced-setting"}
+            %h4{"v-b-toggle" => '"parser-section-advanced-setting"'}
               = icon('fa-caret-down')
               = t('terms.advanced_setting')
-            #owned-plugin-advanced-setting.collapse
+            %b-collapse{"id" => "parser-section-advanced-setting"}
               %config-field{"v-for" => "option in advancedOptions",
                             "v-bind:key" => "option.name",
                             "v-bind:plugin-type" => "pluginType",

From b715a0288ebdccf77d65ea73f970e07b8d8cbb2a Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 17:43:51 +0900
Subject: [PATCH 18/29] Use b-col and b-row

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 .../settings/source_and_output.html.haml      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/views/fluentd/settings/source_and_output.html.haml b/app/views/fluentd/settings/source_and_output.html.haml
index aab5e70fd..be3bf3134 100644
--- a/app/views/fluentd/settings/source_and_output.html.haml
+++ b/app/views/fluentd/settings/source_and_output.html.haml
@@ -43,18 +43,18 @@
   %h2
     = t('.current')
     .float-right
-      %button.btn.btn-outline-dark.btn-sm{"v-on:click" => "update", "v-if" => "!loading"}= icon('fa-refresh')
-      %button.btn.btn-outline-dark.btn-sm{"v-if" => "loading"}= icon('fa-spin fa-refresh')
-  .row
-    .col-xl-4.input
+      %b-btn{"variant" => "outline-dark", "size" => "sm", "v-if" => "loading"}= icon('fa-spin fa-refresh')
+      %b-btn{"variant" => "outline-dark", "size" => "sm", "v-on:click" => "update", "v-if" => "!loading"}= icon('fa-refresh')
+  %b-row
+    %b-col.input{"cols" => "4"}
       %h3= t('.in')
-    .col-xl-4.filter
+    %b-col.filter{"cols" => "4"}
       %h3= t('.filter')
-    .col-xl-4.output
+    %b-col.output{"cols" => "4"}
       %h3= t('.out')
 
-  .row{"v-for" => "(elements, label) in sections"}
-    .col-xl-4.input
+  %b-row{"v-for" => "(elements, label) in sections"}
+    %b-col.input{"cols" => "4"}
       %h5 {{ label }}
       %div{"v-if" => "loaded && !elements.sources || elements.sources.length == 0"}
         %p.empty= t('.setting_empty')
@@ -67,7 +67,7 @@
                        "v-bind:initial-type" => "source.type",
                        "v-bind:initial-name" => "source.name",
                        "v-bind:initial-arg" => "source.arg"}
-    .col-xl-4.filter
+    %b-col.filter{"cols" => "4"}
       %h5 {{ label }}
       %div{"v-if" => "loaded && !elements.filters || elements.filters.length == 0"}
         %p.empty= t('.setting_empty')
@@ -81,7 +81,7 @@
                        "v-bind:initial-name" => "filter.name",
                        "v-bind:initial-arg" => "filter.arg"}
 
-    .col-xl-4.output
+    %b-col.output{"cols" => "4"}
       %h5 {{ label }}
       %div{"v-if" => "loaded && !elements.matches || elements.matches.length == 0"}
         %p.empty= t('.setting_empty')

From 7feeeeb17a508fa6fbe9f426cf6c4849c5a031fe Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 17:44:10 +0900
Subject: [PATCH 19/29] Convert to Haml

But we cannot use b-collapse and v-b-toggle here.
Because `v-b-toggle="id"` does not reactive.

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/shared/vue/_setting.html.erb  | 25 -------------------------
 app/views/shared/vue/_setting.html.haml | 20 ++++++++++++++++++++
 2 files changed, 20 insertions(+), 25 deletions(-)
 delete mode 100644 app/views/shared/vue/_setting.html.erb
 create mode 100644 app/views/shared/vue/_setting.html.haml

diff --git a/app/views/shared/vue/_setting.html.erb b/app/views/shared/vue/_setting.html.erb
deleted file mode 100644
index 0ce8e9bcf..000000000
--- a/app/views/shared/vue/_setting.html.erb
+++ /dev/null
@@ -1,25 +0,0 @@
-<%- add_javascript_pack_tag('codemirror') %>
-
-<script type="text/x-template" id="vue-setting-section">
-
-<div class="card card-primary mb-3">
-  <div class="card-header" data-toggle="collapse" v-bind:href="'#'+id" v-bind:title="content">
-    <i class="fa fa-caret-down"></i>
-    {{ type }}
-    <span v-if="!_.isEmpty(arg) && (name == 'match' || name == 'filter')">({{ arg }})</span>
-  </div>
-  <div class="card-body collapse" v-bind:id="id">
-    <pre v-if="mode != 'edit'">{{ content }}</pre>
-    <p v-if="mode == 'edit'">
-      <textarea v-config-editor class="form-control" v-model.lazy="content" v-bind:disabled="processing"></textarea>
-    </p>
-    <p class="float-right">
-      <button v-if="mode != 'edit'" class="btn btn-secondary" v-on:click="onEdit"><%= t('terms.edit') %></button>
-      <button v-if="mode != 'edit'" class="btn btn-danger" v-on:click="onDelete"><%= t('terms.destroy') %></button>
-      <button v-if="mode == 'edit'" class="btn btn-secondary" v-on:click="onCancel"><%= t('terms.cancel') %></button>
-      <button v-if="mode == 'edit'" class="btn btn-primary" v-on:click="onSubmit"><%= t('terms.save') %></button>
-    </p>
-  </div>
-</div>
-
-</script>
diff --git a/app/views/shared/vue/_setting.html.haml b/app/views/shared/vue/_setting.html.haml
new file mode 100644
index 000000000..776a9340f
--- /dev/null
+++ b/app/views/shared/vue/_setting.html.haml
@@ -0,0 +1,20 @@
+- add_javascript_pack_tag('codemirror')
+
+%script{"type" => "text/x-template", "id" => "vue-setting-section"}
+  %b-card.mb-3(no-body){"variant" => "primary"}
+    %template{"slot" => "header"}
+      %div{"data-toggle" => "collapse", "v-bind:href" => "`#${id}`", "v-bind:title" => "content"}
+        = icon("fa-caret-down")
+        {{ type }}
+        %span{"v-if" => '!_.isEmpty(arg) && (name == "match" || name == "filter")'}
+          ({{ arg }})
+    %b-card-body.collapse{"v-bind:id" => "id"}
+      %pre{"v-if" => 'mode !== "edit"'}
+        {{ content }}
+      %p{"v-if" => 'mode === "edit"'}
+        %textarea.form-control(v-config-editor){"v-model.lazy" => "content", "v-bind:disabled" => "processing"}
+      %p.float-right
+        %b-button{"v-if" => 'mode !== "edit"', "variant" => "secondary", "v-on:click" => "onEdit"}=t("terms.edit")
+        %b-button{"v-if" => 'mode !== "edit"', "variant" => "danger", "v-on:click" => "onDelete"}=t("terms.destroy")
+        %b-button{"v-if" => 'mode === "edit"', "variant" => "secondary", "v-on:click" => "onCancel"}=t("terms.cancel")
+        %b-button{"v-if" => 'mode === "edit"', "variant" => "primary", "v-on:click" => "onSubmit"}=t("terms.save")

From e82e6b4bfd04489d0c97e6fffd3c385fd11ee2ac Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Thu, 4 Oct 2018 18:06:00 +0900
Subject: [PATCH 20/29] Use b-card

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/shared/settings/_form.html.haml     | 14 +++++++------
 .../shared/vue/_owned_plugin_form.html.haml   | 20 ++++++++++---------
 .../shared/vue/_parser_plugin_form.html.haml  | 20 ++++++++++---------
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/app/views/shared/settings/_form.html.haml b/app/views/shared/settings/_form.html.haml
index a4c4b1e15..837a1f2e3 100644
--- a/app/views/shared/settings/_form.html.haml
+++ b/app/views/shared/settings/_form.html.haml
@@ -43,12 +43,14 @@
                          "v-bind:plugin-label" => "'Format'"}
 
     - if setting.advanced_options.present?
-      .card.card-body.bg-light
-        %h4{"v-b-toggle" => "'advanced-setting'"}
-          = icon('fa-caret-down')
-          = t('terms.advanced_setting')
+      %b-card(no-body){"bg-variant" => "light"}
+        %template{"slot" => "header"}
+          %h4{"v-b-toggle" => "'advanced-setting'"}
+            = icon('fa-caret-down')
+            = t('terms.advanced_setting')
         %b-collapse{"id" => "advanced-setting"}
-          - setting.advanced_options.each do |key|
-            = form.field(key)
+          %b-card-body
+            - setting.advanced_options.each do |key|
+              = form.field(key)
 
     = form.submit t('fluentd.common.finish'), class: "btn btn-lg btn-primary float-right mt-3"
diff --git a/app/views/shared/vue/_owned_plugin_form.html.haml b/app/views/shared/vue/_owned_plugin_form.html.haml
index 0a818d0bc..bd3d80f2c 100644
--- a/app/views/shared/vue/_owned_plugin_form.html.haml
+++ b/app/views/shared/vue/_owned_plugin_form.html.haml
@@ -2,7 +2,7 @@
 
 %script{type: "text/x-template", id: "vue-owned-plugin-form"}
   .form-group.card.bg-light.mb-3{"v-bind:id" => "id"}
-    .card-body
+    %b-card{"bg-variant" => "light"}
       %label{"v-bind:for" => "selectId(pluginType)"}
         {{ pluginLabel }}
       %select{"v-bind:id" => "selectId(pluginType)",
@@ -20,12 +20,14 @@
                     "v-bind:plugin-type" => "pluginType",
                     "v-bind:option" => "option"}
       %template{"v-if" => '!_.isEmpty(advancedOptions)'}
-        .card.card-body.bg-light
-          %h4{"v-b-toggle" => "`${id}-advanced-setting`"}
-            = icon('fa-caret-down')
-            = t('terms.advanced_setting')
+        %b-card(no-body){"bg-variant" => "light"}
+          %template{"slot" => "header"}
+            %h4{"v-b-toggle" => "`${id}-advanced-setting`"}
+              = icon('fa-caret-down')
+              = t('terms.advanced_setting')
           %b-collapse{"v-bind:id" => "`${id}-advanced-setting`"}
-            %config-field{"v-for" => "option in advancedOptions",
-                          "v-bind:key" => "option.name",
-                          "v-bind:plugin-type" => "pluginType",
-                          "v-bind:option" => "option"}
+            %b-card-body
+              %config-field{"v-for" => "option in advancedOptions",
+                            "v-bind:key" => "option.name",
+                            "v-bind:plugin-type" => "pluginType",
+                            "v-bind:option" => "option"}
diff --git a/app/views/shared/vue/_parser_plugin_form.html.haml b/app/views/shared/vue/_parser_plugin_form.html.haml
index 73289c6b2..7153429fb 100644
--- a/app/views/shared/vue/_parser_plugin_form.html.haml
+++ b/app/views/shared/vue/_parser_plugin_form.html.haml
@@ -3,7 +3,7 @@
 
 %script{type: "text/x-template", id: "vue-parser-plugin-form"}
   .form-group.card.bg-light.mb-3{"v-bind:id" => "id"}
-    .card-body
+    %b-card{"bg-variant" => "light"}
       %label{"v-bind:for" => "selectId(pluginType)"}
         {{ pluginLabel }}
       %select{"v-bind:id" => "selectId(pluginType)",
@@ -27,12 +27,14 @@
                         "v-bind:initial-text-value" => "initialParams[option.name]",
                         "v-on:change-parse-config" => "onChangeParseConfig"}
         %template{"v-if" => '!_.isEmpty(advancedOptions)'}
-          .card.card-body.bg-light
-            %h4{"v-b-toggle" => '"parser-section-advanced-setting"'}
-              = icon('fa-caret-down')
-              = t('terms.advanced_setting')
+          %b-card(no-body){"bg-variant" => "light"}
+            %template{"slot" => "header"}
+              %h4{"v-b-toggle" => '"parser-section-advanced-setting"'}
+                = icon('fa-caret-down')
+                = t('terms.advanced_setting')
             %b-collapse{"id" => "parser-section-advanced-setting"}
-              %config-field{"v-for" => "option in advancedOptions",
-                            "v-bind:key" => "option.name",
-                            "v-bind:plugin-type" => "pluginType",
-                            "v-bind:option" => "option"}
+              %b-card-body
+                %config-field{"v-for" => "option in advancedOptions",
+                              "v-bind:key" => "option.name",
+                              "v-bind:plugin-type" => "pluginType",
+                              "v-bind:option" => "option"}

From a6523b583358be86c80bd75cc5afeae51afdf880 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 9 Oct 2018 12:50:03 +0900
Subject: [PATCH 21/29] Convert navigation to Haml format

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/navigation.js         | 62 ++++++++++++++++++++++
 app/views/layouts/application.html.erb     | 30 +----------
 app/views/shared/vue/_navigation.html.haml | 43 +++++++++++++++
 app/views/shared/vue/_sidemenu.html.haml   | 36 +++++++++++++
 4 files changed, 143 insertions(+), 28 deletions(-)
 create mode 100644 app/javascript/packs/navigation.js
 create mode 100644 app/views/shared/vue/_navigation.html.haml
 create mode 100644 app/views/shared/vue/_sidemenu.html.haml

diff --git a/app/javascript/packs/navigation.js b/app/javascript/packs/navigation.js
new file mode 100644
index 000000000..c48c73f8b
--- /dev/null
+++ 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/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 356c1d231..612734025 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -13,7 +13,7 @@
     <%= stylesheet_link_tag 'application', media: 'all'%>
     <%= stylesheet_pack_tag 'application', media: 'all'%>
     <%= javascript_pack_tag 'application' %>
-    <%= javascript_pack_tag 'notification' %>
+    <%= javascript_pack_tag 'navigation' %>
     <%= content_for(:additional_javascript_pack_tag) %>
     <%= csrf_meta_tags %>
     <%= javascript_tag do %>
@@ -21,33 +21,7 @@
     <% end %>
   </head>
   <body class="fixed-nav bg-light">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
-      <%= link_to fluentd_ui_logo, root_path, class: "navbar-brand fluentd-ui-logo" %>
-      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarResponsive">
-        <%= render partial: "shared/global_nav" %>
-        <ul class="navbar-nav ml-auto">
-          <%- if @fluentd %>
-            <li class="nav-item fluentd-note">
-              <%= @fluentd.note %>
-            </li>
-            <li class="nav-item fluentd-status">
-              <a class="nav-link" href="<%= daemon_path %>" data-toggle="tooltip" data-placement="bottom" title="fluentd <%= fluentd_status_message %>">
-                <%= fluentd_status_icon %>
-              </a>
-            </li>
-          <%- end %>
-
-          <%= render partial: "shared/vue/notification" %>
-
-          <li class="nav-item">
-            <%= link_to(icon("fa-fw fa-sign-out") + t("terms.sign_out"), sessions_path, method: :delete, class: "nav-link") %>
-          </li>
-        </ul>
-      </div>
-    </nav>
+    <%= render partial: "shared/vue/navigation" %>
 
     <div class="content-wrapper">
       <div class="container-fluid">
diff --git a/app/views/shared/vue/_navigation.html.haml b/app/views/shared/vue/_navigation.html.haml
new file mode 100644
index 000000000..baad4c6ad
--- /dev/null
+++ b/app/views/shared/vue/_navigation.html.haml
@@ -0,0 +1,43 @@
+%nav#mainNav.navbar.navbar-expand-lg.navbar-light.bg-light.fixed-top
+  = link_to fluentd_ui_logo, root_path, class: "navbar-brand fluentd-ui-logo"
+  %button{"type" => "button",
+          "class" => "navbar-toggler navbar-toggler-right",
+          "data-toggle" => "collapse",
+          "data-target" => "#navbarResponsive",
+          "aria-controls" => "navbarResponsive",
+          "aria-expanded" => "false",
+          "aria-label" => "Toggle navigation"}
+    %span.navbar-toggler-icon
+  #navbarResponsive.collapse.navbar-collapse
+    = render partial: "shared/vue/sidemenu"
+    %ul.navbar-nav.ml-auto
+      - if @fluentd
+        %li.nav-item.fluentd-note
+          = @fluentd.note
+        %li.nav-item.fluentd-status
+          %a.nav-link{"href" => daemon_path,
+                      "data-toggle" => "tooltip",
+                      "data-placement" => "bottom",
+                      "title" => "fluentd #{fluentd_status_message}"}
+            = fluentd_status_icon
+        %li.nav-item.dropdown
+          %a.nav-link.dropdown-toggle{"data-toggle" => "dropdown",
+                                      "aria-haspopup" => "true",
+                                      "aria-expanded" => "false",
+                                      "href" => "#"}
+            = icon("fa-bell fa-fw")
+            %span.badge{"v-if" => "hasAlerts"}
+              {{ alertsCount }}
+          %ul.dropdown-menu{"aria-labelledby" => "alertsDropdown"}
+            %li{"v-if" => "!hasAlerts"}
+              %a
+                .nothing.text.text-success
+                  = icon("fa-check")
+                  = t("terms.no-alert")
+            %li{"v-for" => "alert in alerts"}
+              %a
+                %div
+                  = icon("fa-cog fa-fw fa-la fa-spin")
+                  {{ alert }}
+        %li.nav-item
+          = link_to(icon("fa-fw fa-sign-out") + t("terms.sign_out"), sessions_path, method: :delete, class: "nav-link")
diff --git a/app/views/shared/vue/_sidemenu.html.haml b/app/views/shared/vue/_sidemenu.html.haml
new file mode 100644
index 000000000..c9c5fa5d2
--- /dev/null
+++ b/app/views/shared/vue/_sidemenu.html.haml
@@ -0,0 +1,36 @@
+%ul#side-menu.navbar-nav.navbar-sidenav
+  %li.nav-item
+    %a.section{"data-toggle" => "tooltip", "data-placement" => "right", "title" => "Fluuentd"}
+      = icon("fa-puzzle-piece fa-fw") + "fluentd"
+    %ul.sidenav-second-level
+      - if fluentd_exists?
+        %li= link_to_other(t('fluentd.show.page_title'), daemon_path)
+        %li= link_to_other(t('fluentd.settings.source_and_output.page_title'), source_and_output_daemon_setting_path)
+        %li= link_to_other(t('fluentd.settings.show.page_title'), daemon_setting_path)
+        %li= link_to_other(t('fluentd.common.log'), log_daemon_path)
+        %li= link_to_other(t('fluentd.errors.page_title'), errors_daemon_path)
+      - else
+        %li= link_to_other(t('terms.initial_setup'), daemon_path)
+
+  - if fluentd_exists?
+    %li.nav-item
+      %a.section{"data-toggle" => "tooltip", "data-placement" => "right", "title" => "Plugins"}
+        = icon("fa-cogs fa-fw") + t("terms.plugins")
+      %ul.sidenav-second-level
+        %li= link_to_other(t("plugins.installed.page_title"), installed_plugins_path)
+        %li= link_to_other(t("plugins.recommended.page_title"), recommended_plugins_path)
+        %li= link_to_other(t("plugins.updated.page_title"), updated_plugins_path)
+
+  %li.nav-item
+    %a.section{"data-toggle" => "tooltip", "data-placement" => "right", "title" => "Misc"}
+      = icon("fa-coffee fa-fw") + t("terms.misc")
+    %ul.sidenav-second-level
+      %li= link_to_other(t("misc.information.page_title"), misc_information_path)
+      %li= link_to_other t('users.show.page_title'), user_path
+
+  %li.nav-item
+    %a.section{"data-toggle" => "tooltip", "data-placement" => "right", "title" => "Language"}
+      = icon("fa-font") + t("terms.languages")
+    %ul.sidenav-second-level
+      - I18n.available_locales.each do |locale|
+        %li= link_to((locale == current_locale ? icon("fa-check") : "") + language_name(locale), "?lang=#{locale}")

From f159af01d3f3620a47150aef3f38775be2b24f69 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 9 Oct 2018 14:00:30 +0900
Subject: [PATCH 22/29] Display logout link

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/shared/vue/_navigation.html.haml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/shared/vue/_navigation.html.haml b/app/views/shared/vue/_navigation.html.haml
index baad4c6ad..64c54094a 100644
--- a/app/views/shared/vue/_navigation.html.haml
+++ b/app/views/shared/vue/_navigation.html.haml
@@ -39,5 +39,5 @@
                 %div
                   = icon("fa-cog fa-fw fa-la fa-spin")
                   {{ alert }}
-        %li.nav-item
-          = link_to(icon("fa-fw fa-sign-out") + t("terms.sign_out"), sessions_path, method: :delete, class: "nav-link")
+      %li.nav-item
+        = link_to(icon("fa-fw fa-sign-out") + t("terms.sign_out"), sessions_path, method: :delete, class: "nav-link")

From 1bc354000ccd591bc8ba3eacd3eb7209bac46574 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 9 Oct 2018 14:12:45 +0900
Subject: [PATCH 23/29] Use bootstrap-vue's tooltip component

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/shared/vue/_navigation.html.haml |  8 ++++----
 app/views/shared/vue/_sidemenu.html.haml   | 12 ++++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/views/shared/vue/_navigation.html.haml b/app/views/shared/vue/_navigation.html.haml
index 64c54094a..3fc97888b 100644
--- a/app/views/shared/vue/_navigation.html.haml
+++ b/app/views/shared/vue/_navigation.html.haml
@@ -15,10 +15,10 @@
         %li.nav-item.fluentd-note
           = @fluentd.note
         %li.nav-item.fluentd-status
-          %a.nav-link{"href" => daemon_path,
-                      "data-toggle" => "tooltip",
-                      "data-placement" => "bottom",
-                      "title" => "fluentd #{fluentd_status_message}"}
+          %b-tooltip{"target" => "fluentd-status-message",
+                     "placement" => "bottom",
+                     "title" => "fluentd #{fluentd_status_message}"}
+          %a.nav-link#fluentd-status-message{"href" => daemon_path}
             = fluentd_status_icon
         %li.nav-item.dropdown
           %a.nav-link.dropdown-toggle{"data-toggle" => "dropdown",
diff --git a/app/views/shared/vue/_sidemenu.html.haml b/app/views/shared/vue/_sidemenu.html.haml
index c9c5fa5d2..d52115db8 100644
--- a/app/views/shared/vue/_sidemenu.html.haml
+++ b/app/views/shared/vue/_sidemenu.html.haml
@@ -1,6 +1,7 @@
 %ul#side-menu.navbar-nav.navbar-sidenav
   %li.nav-item
-    %a.section{"data-toggle" => "tooltip", "data-placement" => "right", "title" => "Fluuentd"}
+    %b-tooltip{"target" => "side-menu-fluentd", "placement" => "right", "title" => "Fluentd"}
+    %a#side-menu-fluentd.section
       = icon("fa-puzzle-piece fa-fw") + "fluentd"
     %ul.sidenav-second-level
       - if fluentd_exists?
@@ -14,7 +15,8 @@
 
   - if fluentd_exists?
     %li.nav-item
-      %a.section{"data-toggle" => "tooltip", "data-placement" => "right", "title" => "Plugins"}
+      %b-tooltip{"target" => "side-menu-plugins", "placement" => "right", "title" => "Plugins"}
+      %a#side-menu-plugins.section
         = icon("fa-cogs fa-fw") + t("terms.plugins")
       %ul.sidenav-second-level
         %li= link_to_other(t("plugins.installed.page_title"), installed_plugins_path)
@@ -22,14 +24,16 @@
         %li= link_to_other(t("plugins.updated.page_title"), updated_plugins_path)
 
   %li.nav-item
-    %a.section{"data-toggle" => "tooltip", "data-placement" => "right", "title" => "Misc"}
+    %b-tooltip{"target" => "side-menu-misc", "placement" => "right", "title" => "Misc"}
+    %a#side-menu-misc.section
       = icon("fa-coffee fa-fw") + t("terms.misc")
     %ul.sidenav-second-level
       %li= link_to_other(t("misc.information.page_title"), misc_information_path)
       %li= link_to_other t('users.show.page_title'), user_path
 
   %li.nav-item
-    %a.section{"data-toggle" => "tooltip", "data-placement" => "right", "title" => "Language"}
+    %b-tooltip{"target" => "side-menu-language", "placement" => "right", "title" => "Language"}
+    %a#side-menu-language.section
       = icon("fa-font") + t("terms.languages")
     %ul.sidenav-second-level
       - I18n.available_locales.each do |locale|

From 3229e3e27044e1b7577b2b9cdad4a48416be9fdf Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 9 Oct 2018 14:14:12 +0900
Subject: [PATCH 24/29] Remove unused partial template

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/shared/_global_nav.html.erb       | 80 ---------------------
 app/views/shared/vue/_notification.html.erb | 27 -------
 2 files changed, 107 deletions(-)
 delete mode 100644 app/views/shared/_global_nav.html.erb
 delete mode 100644 app/views/shared/vue/_notification.html.erb

diff --git a/app/views/shared/_global_nav.html.erb b/app/views/shared/_global_nav.html.erb
deleted file mode 100644
index be3b492a9..000000000
--- a/app/views/shared/_global_nav.html.erb
+++ /dev/null
@@ -1,80 +0,0 @@
-<ul class="navbar-nav navbar-sidenav" id="side-menu">
-  <li class="nav-item">
-    <a class="section" data-toggle="tooltip" data-placement="right" title="Fluentd">
-      <%= icon("fa-puzzle-piece fa-fw") << "fluentd" %>
-    </a>
-    <ul class="sidenav-second-level">
-      <% if fluentd_exists? %>
-        <li>
-          <%= link_to_other t('fluentd.show.page_title'), daemon_path %>
-        </li>
-        <li>
-          <%= link_to_other t('fluentd.settings.source_and_output.page_title'), source_and_output_daemon_setting_path %>
-        </li>
-        <li>
-          <%= link_to_other t('fluentd.settings.show.page_title'), daemon_setting_path %>
-        </li>
-        <li>
-          <%= link_to_other t('fluentd.common.log'), log_daemon_path %>
-        </li>
-        <li>
-          <%= link_to_other t('fluentd.errors.page_title'), errors_daemon_path %>
-        </li>
-      <% else %>
-        <li>
-          <%= link_to_other t('terms.initial_setup'), daemon_path %>
-        </li>
-      <% end %>
-    </ul>
-  </li>
-
-  <% if fluentd_exists? %>
-  <li class="nav-item">
-    <a class="section" data-toggle="tooltip" data-placement="right" title="Plugins">
-      <%= icon("fa-cogs fa-fw") << t('terms.plugins') %>
-    </a>
-    <ul class="sidenav-second-level">
-      <li>
-        <%= link_to_other t("plugins.installed.page_title"), installed_plugins_path %>
-      </li>
-      <li>
-        <%= link_to_other t("plugins.recommended.page_title"), recommended_plugins_path %>
-      </li>
-      <li>
-        <%= link_to_other t("plugins.updated.page_title"), updated_plugins_path %>
-      </li>
-    </ul>
-  </li>
-  <% end %>
-
-  <li class="nav-item">
-    <a class="section" data-toggle="tooltip" data-placement="right" title="Misc">
-      <%= icon('fa-coffee fa-fw') << t('terms.misc') %>
-    </a>
-    <ul class="sidenav-second-level">
-      <li>
-        <%= link_to_other t("misc.information.page_title"), misc_information_path %>
-      </li>
-      <li>
-        <%= link_to_other t('users.show.page_title'), user_path %>
-      </li>
-      <!--
-      Not used for now (0.0.1 pre)
-      <li>
-        <%= link_to_other t('tutorials.index.page_title'), tutorials_path %>
-      </li>
-      -->
-    </ul>
-  </li>
-
-  <li class="nav-item">
-    <a class="section" data-toggle="tooltip" data-placement="right" title="Language">
-      <%= icon('fa-font') << t('terms.languages') %>
-    </a>
-    <ul class="sidenav-second-level">
-      <li>
-        <%= language_menu %>
-      </li>
-    </ul>
-  </li>
-</ul>
diff --git a/app/views/shared/vue/_notification.html.erb b/app/views/shared/vue/_notification.html.erb
deleted file mode 100644
index d3a475da8..000000000
--- a/app/views/shared/vue/_notification.html.erb
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- vue.js -->
-<li class="nav-item dropdown" id="vue-notification">
-  <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
-    <i class="fa fa-bell fa-fw"></i>
-    <span class="badge" v-if="hasAlerts">{{ alertsCount }}</span>
-  </a>
-  <ul class="dropdown-menu" aria-labelledby="alertsDropdown">
-    <li v-if="!hasAlerts">
-      <a>
-        <div class="nothing text text-success">
-          <%= icon "fa-check" %>
-          <%= t "terms.no_alert" %>
-        </div>
-      </a>
-    </li>
-    <li v-for="alert in alerts">
-      <a>
-        <div>
-          <%= icon("fa-cog fa-fw fa-lg fa-spin") %>
-          {{ alert }}
-        </div>
-      </a>
-    </li>
-  </ul>
-</li>
-<!-- /vue.js -->
-

From f318407750dcbafed76f13f7f175c664a1d39a16 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 9 Oct 2018 15:03:34 +0900
Subject: [PATCH 25/29] Remove unused data attributes

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/config_field.js       | 7 -------
 app/javascript/packs/in_tail_parse.js      | 8 --------
 app/javascript/packs/owned_plugin_form.js  | 9 ---------
 app/javascript/packs/parser_plugin_form.js | 9 ---------
 4 files changed, 33 deletions(-)

diff --git a/app/javascript/packs/config_field.js b/app/javascript/packs/config_field.js
index a0e6da64e..c18ba8db6 100644
--- 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: {
diff --git a/app/javascript/packs/in_tail_parse.js b/app/javascript/packs/in_tail_parse.js
index e826b9b9d..07771d434 100644
--- a/app/javascript/packs/in_tail_parse.js
+++ b/app/javascript/packs/in_tail_parse.js
@@ -51,14 +51,6 @@ window.addEventListener("load", () => {
       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/owned_plugin_form.js b/app/javascript/packs/owned_plugin_form.js
index 17a0efa7c..235cda084 100644
--- 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
index 70b700306..fa2250c9d 100644
--- 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);

From e1b3842e431d2c63d3a2a8c0fafe3039509e28b9 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 9 Oct 2018 15:04:15 +0900
Subject: [PATCH 26/29] Use bootstrap-vue's tooltip component

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/config_field.js           |  3 +++
 app/javascript/packs/grep_pattern.js           |  4 +++-
 app/views/shared/vue/_config_field.html.haml   | 18 ++++++------------
 app/views/shared/vue/_grep_pattern.html.haml   | 12 ++++++++----
 .../vue/_parser_multiline_form.html.haml       |  8 +++++---
 5 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/javascript/packs/config_field.js b/app/javascript/packs/config_field.js
index c18ba8db6..78bc81e1e 100644
--- a/app/javascript/packs/config_field.js
+++ b/app/javascript/packs/config_field.js
@@ -80,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/grep_pattern.js b/app/javascript/packs/grep_pattern.js
index 86e78a564..5e8c71517 100644
--- 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/views/shared/vue/_config_field.html.haml b/app/views/shared/vue/_config_field.html.haml
index 0c958c4cb..3af34a341 100644
--- a/app/views/shared/vue/_config_field.html.haml
+++ b/app/views/shared/vue/_config_field.html.haml
@@ -1,10 +1,8 @@
 %script{type: "text/x-template", id: "vue-config-field"}
   .form-group
     %template{"v-if" => 'option.type==="enum"'}
-      %label{"v-bind:for" => "inputId(pluginType, option)",
-             "data-toggle" => "tooltip",
-             "data-placement" => "right",
-             "v-bind:title" => "option.desc"}
+      %b-tooltip{"v-bind:target" => "labelId(pluginType, option)", "placement" => "right", "v-bind:title" => "option.desc"}
+      %label{"v-bind:id" => "labelId(pluginType, option)", "v-bind:for" => "inputId(pluginType, option)"}
         {{ option.name | humanize }}
       %select{"v-bind:id" => "inputId(pluginType, option)",
               "v-bind:name" => "inputName(pluginType, option)",
@@ -16,22 +14,18 @@
                 "v-bind:selected" => "option.default === item"}
           {{ item }}
     %template{"v-else-if" => 'option.type==="bool"'}
+      %b-tooltip{"v-bind:target" => "labelId(pluginType, option)", "placement" => "right", "v-bind:title" => "option.desc"}
       %input{"v-bind:id" => "inputId(pluginType, option)",
              "v-bind:name" => "inputName(pluginType, option)",
              "v-bind:checked" => "checked(option.default)",
              "v-model.lazy" => "checkboxValue",
              "v-on:change" => "onChange",
              "type" => "checkbox"}
-      %label{"v-bind:for" => "inputId(pluginType, option)",
-             "data-toggle" => "tooltip",
-             "data-placement" => "right",
-             "v-bind:title" => "option.desc"}
+      %label{"v-bind:id" => "labelId(pluginType, option)", "v-bind:for" => "inputId(pluginType, option)"}
         {{ option.name | humanize }}
     %template(v-else)
-      %label{"v-bind:for" => "inputId(pluginType, option)",
-             "data-toggle" => "tooltip",
-             "data-placement" => "right",
-             "v-bind:title" => "option.desc"}
+      %b-tooltip{"v-bind:target" => "labelId(pluginType, option)", "placement" => "right", "v-bind:title" => "option.desc"}
+      %label{"v-bind:id" => "labelId(pluginType, option)", "v-bind:for" => "inputId(pluginType, option)"}
         {{ option.name | humanize }}
       %input{"v-bind:id" => "inputId(pluginType, option)",
              "v-bind:name" => "inputName(pluginType, option)",
diff --git a/app/views/shared/vue/_grep_pattern.html.haml b/app/views/shared/vue/_grep_pattern.html.haml
index 86ff93ddc..46abc0823 100644
--- a/app/views/shared/vue/_grep_pattern.html.haml
+++ b/app/views/shared/vue/_grep_pattern.html.haml
@@ -7,16 +7,20 @@
     %label
       {{ grepType | humanize }}
     .form-group
-      %label{"data" => {"toggle" => "tooltip", "placement" => "right"},
-             "title" => "The field name to which the regular expression is applied."}
+      %b-tooltip{"v-bind:target" => 'labelId("key", index, subIndex)',
+                 "placement" => "right",
+                 "title" => "The field name to which the regular expression is applied."}
+      %label{"v-bind:id" => 'labelId("key", index, subIndex)'}
         Key
         %input.form-control{"v-bind:id" => 'inputId("key", index, subIndex)',
                             "v-bind:name" => 'inputName("key", index, subIndex)',
                             "v-model:lazy" => "key",
                             "type" => "text"}
     .form-group
-      %label{"data" => {"toggle" => "tooltip", "placement" => "right"},
-             "title" => "The regular expression"}
+      %b-tooltip{"v-bind:target" => 'labelId("pattern", index, subIndex)',
+                 "placement" => "right",
+                 "title" => "The regular expression"}
+      %label{"v-bind:id" => 'labelId("pattern", index, subIndex)'}
         Pattern
         %input.form-control{"v-bind:id" => 'inputId("pattern", index, subIndex)',
                             "v-bind:name" => 'inputName("pattern", index, subIndex)',
diff --git a/app/views/shared/vue/_parser_multiline_form.html.haml b/app/views/shared/vue/_parser_multiline_form.html.haml
index c7e12f392..902740997 100644
--- a/app/views/shared/vue/_parser_multiline_form.html.haml
+++ b/app/views/shared/vue/_parser_multiline_form.html.haml
@@ -1,8 +1,10 @@
 %script{type: "text/x-template", id: "vue-parser-multiline-form"}
   .form-group
-    %label{"for" => "setting_parse_0__format_firstline",
-           "data-toggle" => "tooltip",
-           "data-placement" => "right",
+    %b-tooltip{"target" => "label_setting_parse_0__format_firstline",
+               "placement" => "right",
+               "v-bind:title" => "formatFirstlineDesc"}
+    %label{"id" => "label_setting_parse_0__format_firstline",
+           "for" => "setting_parse_0__format_firstline",
            "v-bind:title" => "formatFirstlineDesc"}
       Format first line
     %input.form-control{"type" => "text",

From 9d2ec4ba235173e5fe26635a53bf6052e0d6bffc Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 9 Oct 2018 15:10:37 +0900
Subject: [PATCH 27/29] Remove debug print

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/javascript/packs/application.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index f1a9c0c96..0778d729e 100644
--- 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;

From f99f8ffdefe12787c20eb2bf946fbd9d45755e71 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 9 Oct 2018 16:24:37 +0900
Subject: [PATCH 28/29] Use bootstrap-vue's dropdown component

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 app/views/shared/vue/_navigation.html.haml | 33 +++++++++-------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/app/views/shared/vue/_navigation.html.haml b/app/views/shared/vue/_navigation.html.haml
index 3fc97888b..29b7ba4f8 100644
--- a/app/views/shared/vue/_navigation.html.haml
+++ b/app/views/shared/vue/_navigation.html.haml
@@ -20,24 +20,19 @@
                      "title" => "fluentd #{fluentd_status_message}"}
           %a.nav-link#fluentd-status-message{"href" => daemon_path}
             = fluentd_status_icon
-        %li.nav-item.dropdown
-          %a.nav-link.dropdown-toggle{"data-toggle" => "dropdown",
-                                      "aria-haspopup" => "true",
-                                      "aria-expanded" => "false",
-                                      "href" => "#"}
-            = icon("fa-bell fa-fw")
-            %span.badge{"v-if" => "hasAlerts"}
-              {{ alertsCount }}
-          %ul.dropdown-menu{"aria-labelledby" => "alertsDropdown"}
-            %li{"v-if" => "!hasAlerts"}
-              %a
-                .nothing.text.text-success
-                  = icon("fa-check")
-                  = t("terms.no-alert")
-            %li{"v-for" => "alert in alerts"}
-              %a
-                %div
-                  = icon("fa-cog fa-fw fa-la fa-spin")
-                  {{ alert }}
+        %li.nav-item
+          %b-dropdown(no-caret){"variant" => "light"}
+            %template{"slot" => "button-content"}
+              = icon("fa-bell fa-fw")
+              %span.badge{"v-if" => "hasAlerts"}
+                {{ alertsCount }}
+            %b-dropdown-item{"v-if" => "!hasAlerts"}
+              .nothing.text.text-success
+                = icon("fa-check")
+                = t("terms.no-alert")
+            %b-dropdown-item{"v-for" => "alert in alerts"}
+              = icon("fa-cog fa-fw fa-la fa-spin")
+              {{ alert }}
+
       %li.nav-item
         = link_to(icon("fa-fw fa-sign-out") + t("terms.sign_out"), sessions_path, method: :delete, class: "nav-link")

From 3cfff4a61192370e659feb126dd0745a7be85f84 Mon Sep 17 00:00:00 2001
From: Kenji Okimoto <okimoto@clear-code.com>
Date: Tue, 9 Oct 2018 16:46:49 +0900
Subject: [PATCH 29/29] Use bootstrap-vue components

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
---
 .../shared/vue/_transport_section.html.haml    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/views/shared/vue/_transport_section.html.haml b/app/views/shared/vue/_transport_section.html.haml
index c61877e2e..8a24f942b 100644
--- a/app/views/shared/vue/_transport_section.html.haml
+++ b/app/views/shared/vue/_transport_section.html.haml
@@ -20,11 +20,13 @@
       %template{"v-for" => "option in commonOptions"}
         %config-field{"v-bind:plugin-type" => "pluginType",
                       "v-bind:option" => "option"}
-      .card.card-body.bg-light
-        %h4{"data-toggle" => "collapse", "href" => "#transport-advanced-setting"}
-          = icon('fa-caret-down')
-          = t('terms.advanced_setting') + '(TLS)'
-        #transport-advanced-setting.collapse
-          %template{"v-for" => "option in advancedOptions"}
-            %config-field{"v-bind:plugin-type" => "pluginType",
-                          "v-bind:option" => "option"}
+      %b-card(no-body){"bg-variant" => "light"}
+        %template{"slot" => "header"}
+          %h4{"v-b-toggle" => "'transport-advanced-setting'"}
+            = icon('fa-caret-down')
+            = t('terms.advanced_setting') + '(TLS)'
+        %b-collapse{"id" => "transport-advanced-setting"}
+          %b-card-body
+            %template{"v-for" => "option in advancedOptions"}
+              %config-field{"v-bind:plugin-type" => "pluginType",
+                            "v-bind:option" => "option"}