Apply bootstrap4 style

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

app/views/fluentd/settings/histories/show.html.haml

@@ -1,7 +1,7 @@
 - page_title t('.page_title', label: @fluentd.label)
 
-%p.pull-right
-  = link_to configtest_daemon_setting_history_path(id: @backup_file.file_id), method: "post", class: "btn btn-default" do
+%p.float-right
+  = link_to configtest_daemon_setting_history_path(id: @backup_file.file_id), method: "post", class: "btn btn-secondary" do
     = icon('fa-legal')
     = t("terms.configtest")
   = link_to reuse_daemon_setting_history_path(id: @backup_file.file_id), method: 'post', class: "btn btn-primary" do
@@ -10,22 +10,22 @@
 
 - if @backup_file.note.content.present?
   .row
-    .col-xs-12
+    .col-xl-12
       %p= @backup_file.note.content
 
 .row
-  .col-xs-12
+  .col-xl-12
     %h2
       ="#{t('.target_config')}(#{params[:id]})"
     %pre
       = preserve do
         = @backup_file.content
 
-  .col-xs-12.diff
+  .col-xl-12.diff
     %h2
       Diff:
     %div
       = t(".diff_description", file_name: params[:id] )
-      .pull-right
+      .float-right
         = link_to t(".show_current"), daemon_setting_path(@fluentd)
     = preserve render "/shared/settings/diff"

app/views/fluentd/settings/running_backup/show.html.haml

@@ -1,8 +1,8 @@
 - page_title t('.page_title', label: @fluentd.label)
 
 - if @backup_file.content
-  %p.pull-right
-    = link_to configtest_daemon_setting_running_backup_path, method: 'post', class: "btn btn-default" do
+  %p.float-right
+    = link_to configtest_daemon_setting_running_backup_path, method: 'post', class: "btn btn-secondary" do
       = icon('fa-legal')
       = t("terms.configtest")
     = link_to reuse_daemon_setting_running_backup_path, method: 'post', class: "btn btn-primary" do
@@ -10,7 +10,7 @@
       = t("terms.reuse")
 
 .row
-  .col-xs-12
+  .col-xl-12
     - if @backup_file.content
       %h2
         = t('.page_title')
@@ -21,7 +21,7 @@
       %p
         =t('fluentd.common.never_started_yet', brand: fluentd_ui_brand)
   - if @backup_file.content
-    .col-xs-12.diff
+    .col-xl-12.diff
       %h2
         Diff:
       %div

app/views/fluentd/settings/show.html.haml

@@ -1,23 +1,23 @@
 - page_title t('.page_title') do
-  - link_to edit_daemon_setting_path(@fluentd), class: "btn btn-primary pull-right" do
+  - link_to edit_daemon_setting_path(@fluentd), class: "btn btn-primary float-right" do
     = icon('fa-pencil')
     = t("terms.edit")
 
 .row
-  .col-xs-12
+  .col-xl-12
     %pre
       = preserve do
         = @config
 
 .row
-  .col-xs-12
+  .col-xl-12
     %h3= link_to(t('fluentd.settings.running_backup.title'), daemon_setting_running_backup_path)
     %p
       %label= t('terms.backup_time')
       = @running_backedup_file.ctime.try(:strftime, I18n.t('time.formats.default')) || t('fluentd.common.never_started_yet', brand: fluentd_ui_brand)
 
 .row
-  .col-xs-12
+  .col-xl-12
     %h3= t('fluentd.settings.history')
     = render '/fluentd/settings/histories/list'
     .link= link_to t('.link_to_histories'), daemon_setting_histories_path

app/views/fluentd/settings/source_and_output.html.haml

@@ -1,27 +1,27 @@
 - page_title t('.page_title')
 
 .row.fluentd-setting-inout
-  .col-xs-4
-    .panel.panel-default
-      .panel-heading
+  .col-xl-4
+    .card.card-primary
+      .card-header
         %h4= t('.in')
-      .panel-body
+      .card-body
         - %w|tail syslog monitor_agent http forward|.each do |type|
           %p
             = link_to(send("daemon_setting_in_#{type}_path", @fluentd)) do
               = icon('fa-file-text-o fa-lg')
               = t("fluentd.common.setup_in_#{type}")
-  .col-xs-1.arrow-right
+  .col-xl-1.arrow-right
     = icon "fa-arrow-circle-right"
-  .col-xs-2
+  .col-xl-2
     = image_tag "/fluentd-logo.png", style: "max-width: 100%"
-  .col-xs-1.arrow-right
+  .col-xl-1.arrow-right
     = icon "fa-arrow-circle-right"
-  .col-xs-4
-    .panel.panel-default
-      .panel-heading
+  .col-xl-4
+    .card.card-primary
+      .card-header
         %h4= t('.out')
-      .panel-body
+      .card-body
         - %w|stdout td s3 mongo elasticsearch forward|.each do |type|
           %p
             = link_to(send("daemon_setting_out_#{type}_path", @fluentd)) do
@@ -33,16 +33,16 @@
 #vue-setting.current-settings
   %h2
     = t('.current')
-    .pull-right
+    .float-right
       %button.btn.btn-default.btn-sm{"v-on" => "click: update", "v-if" => "!loading"}= icon('fa-refresh')
       %button.btn.btn-default.btn-sm{"v-if" => "loading"}= icon('fa-spin fa-refresh')
   .row
-    .col-xs-6.input
+    .col-xl-6.input
       %h3= t('.in')
       %div{"v-if" => "loaded && sections.sources.length == 0"}
         %p.empty= t('.setting_empty')
       %div{"v-repeat" => "sections.sources", "v-component" => "section"}
-    .col-xs-6.output
+    .col-xl-6.output
       %h3= t('.out')
       %div{"v-if" => "loaded && sections.matches.length == 0"}
         %p.empty= t('.setting_empty')

app/views/shared/vue/_setting.html.erb

@@ -1,12 +1,12 @@
 <script type="text/template" id="vue-setting-section">
 
-<div class='panel panel-default'>
-  <div class='panel-heading' data-toggle='collapse' href='#{{ id }}' title='{{ content }}'>
+<div class='card card-primary'>
+  <div class='card-header' data-toggle='collapse' href='#{{ id }}' title='{{ content }}'>
     {{ type }}
     <span v-if="name == 'match'">({{ arg }})</span>
     <i class="fa fa-caret-down"></i>
   </div>
-  <div class='panel-body collapse' id='{{ id }}'>
+  <div class='card-body collapse' id='{{ id }}'>
     <pre v-if="mode != 'edit'">{{ content }}</pre>
     <p v-if="mode == 'edit'">
       <textarea v-config-editor class="form-control" v-model="editContent" v-attr="disabled: processing"></textarea>