Use bootstrap-vue for misc/information

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>

app/controllers/misc_controller.rb

@@ -4,6 +4,8 @@ require "zip"
 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 @@ class MiscController < ApplicationController
   def update!
     FluentdUiRestart.perform_later
   end
+
+  def env_items
+    @env.map do |key, value|
+      { key: key, value: value }
+    end
+  end
 end

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
+        };
+      }
     });
   });