fluentd-ui 1.1.0 → 1.2.0

data/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"}
+         
+      %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
-  $(document).ready(function() {
-    $('#plugins-table').dataTable({
-      "autoWidth": false,
-      "ordering": true,
-      "paging": false,
-      "info": false,
-      "searching": true,
-      "language": {
-        "search": "#{t("terms.search")} "
+  window.addEventListener("load", () => {
+    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")}");
-      });;
-    });
   });

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

data/app/views/shared/settings/_form.html.haml

@@ -1,5 +1,6 @@
 = render "shared/setting_errors"
 = render "shared/vue/owned_plugin_form"
+= render "shared/vue/parser_plugin_form"
 
 = javascript_pack_tag("plugin_setting")
 
@@ -26,12 +27,12 @@
                          "v-bind:plugin-label" => "'Storage'"}
 
     - if setting.have_parse_section?
-      %owned-plugin-form{"v-bind:id" => "'parse-section'",
-                         "v-bind:options-json" => "'#{Fluent::Plugin::PARSER_REGISTRY.map.keys.to_json}'",
-                         "v-bind:initial-plugin-name" => "'#{setting.parse_type}'",
-                         "v-bind:initial-params-json" => "'#{setting.class.initial_params[:parse]["0"].to_json}'",
-                         "v-bind:plugin-type" => "'parse'",
-                         "v-bind:plugin-label" => "'Parse'"}
+      %parser-plugin-form{"v-bind:id" => "'parse-section'",
+                          "v-bind:options-json" => "'#{Fluent::Plugin::PARSER_REGISTRY.map.keys.to_json}'",
+                          "v-bind:initial-plugin-name" => "'#{setting.parse_type}'",
+                          "v-bind:initial-params-json" => "'#{setting.class.initial_params[:parse]["0"].to_json}'",
+                          "v-bind:plugin-type" => "'parse'",
+                          "v-bind:plugin-label" => "'Parse'"}
 
     - if setting.have_format_section?
       %owned-plugin-form{"v-bind:id" => "'format-section'",
@@ -42,12 +43,14 @@
                          "v-bind:plugin-label" => "'Format'"}
 
     - if setting.advanced_options.present?
-      .card.card-body.bg-light
-        %h4{"data-toggle" => "collapse", "href" => "#advanced-setting"}
-          = icon('fa-caret-down')
-          = t('terms.advanced_setting')
-        #advanced-setting.collapse
-          - setting.advanced_options.each do |key|
-            = form.field(key)
+      %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"}
+          %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"

data/app/views/shared/vue/_aws_credential.html.haml

@@ -1,10 +1,8 @@
 = render "shared/vue/config_field"
 
 %script{type: "text/x-template", id: "vue-aws-credential"}
-  .form-group.card.bg-light.mb-3
-    .card-body
-      %label{"for" => "aws-credential"}
-        AWS credential
+  .form-group.mb-3
+    %b-card{"header" => "AWS credential", "bg-variant" => "light"}
       %select{"id" => "aws-credential",
               "class" => "form-control mb-3",
               "v-model" => "credentialType",

data/app/views/shared/vue/_config_field.html.haml

@@ -1,49 +1,35 @@
 %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)",
+              "v-model.lazy" => "selectedValue",
+              "v-on:change" => "onChange",
               "class" => "form-control"}
         %option{"v-for" => "item in option.list",
                 "v-bind:value" => "item",
                 "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 }}
-      %template{"v-if" => 'option.name === "expression"'}
-        %input{"v-bind:id" => "inputId(pluginType, option)",
-               "v-bind:name" => "inputName(pluginType, option)",
-               "v-model.lazy" => "expression",
-               "type" => "text",
-               "class" => "form-control"}
-      %template{"v-else-if" => 'option.name === "time_format"'}
-        %input{"v-bind:id" => "inputId(pluginType, option)",
-               "v-bind:name" => "inputName(pluginType, option)",
-               "v-model.lazy" => "timeFormat",
-               "type" => "text",
-               "class" => "form-control"}
-      %template(v-else)
-        %input{"v-bind:id" => "inputId(pluginType, option)",
-               "v-bind:name" => "inputName(pluginType, option)",
-               "v-model.lazy" => "textValue",
-               "type" => "text",
-               "class" => "form-control"}
+      %input{"v-bind:id" => "inputId(pluginType, option)",
+             "v-bind:name" => "inputName(pluginType, option)",
+             "v-model.lazy" => "textValue",
+             "v-on:change" => "onChange",
+             "type" => "text",
+             "class" => "form-control"}

data/app/views/shared/vue/_grep_container.html.haml

@@ -1,10 +1,10 @@
 = render "shared/vue/grep_pattern"
 %script{type: "text/x-template", id: "vue-grep-container"}
-  .form-group.card
-    .card-header
-      %a.btn.btn-xs{"v-on:click" => "add", "v-if" => "index == 0"}
+  %b-card.form-group
+    %template{"slot" => "header"}
+      %b-button{"v-on:click" => "add", "size" => "sm", "variant" => "light", "v-if" => "index === 0"}
         = icon("fa-plus")
-      %a.btn.btn-xs{"v-on:click" => "remove", "v-if" => "index != 0"}
+      %b-button{"v-on:click" => "remove", "size" => "sm", "variant" => "light", "v-if" => "index !== 0"}
         = icon("fa-minus")
       %label
         {{ containerType | humanize }}
@@ -20,13 +20,12 @@
                "v-bind:name" => "inputName(index)",
                "v-model" => "grepType"}
         Exclude
-    .card-body
-      .row
-        %template{"v-for" => "(enabled, i) in patterns"}
-          %grep-pattern.col-xl-3{"v-if" => "enabled",
-                                 "v-bind:container-type" => "containerType",
-                                 "v-bind:grep-type" => "grepType",
-                                 "v-bind:index" => "index",
-                                 "v-bind:subIndex" => "i",
-                                 "v-on:add-grep-pattern" => "addGrepPattern",
-                                 "v-on:remove-grep-pattern" => "removeGrepPattern"}
+    .row
+      %template{"v-for" => "(enabled, i) in patterns"}
+        %grep-pattern.col-xl-3{"v-if" => "enabled",
+                               "v-bind:container-type" => "containerType",
+                               "v-bind:grep-type" => "grepType",
+                               "v-bind:index" => "index",
+                               "v-bind:subIndex" => "i",
+                               "v-on:add-grep-pattern" => "addGrepPattern",
+                               "v-on:remove-grep-pattern" => "removeGrepPattern"}

data/app/views/shared/vue/_grep_pattern.html.haml

@@ -1,22 +1,26 @@
 %script{type: "text/x-template", id: "vue-grep-pattern"}
   %div
-    %a.btn.btn-xs{"v-on:click" => "add", "v-if" => "subIndex == 0"}
+    %b-button{"v-on:click" => "add", "size" => "sm", "variant" => "light", "v-if" => "subIndex === 0"}
       = icon("fa-plus")
-    %a.btn.btn-xs{"v-on:click" => "remove", "v-if" => "subIndex != 0"}
+    %b-button{"v-on:click" => "remove", "size" => "sm", "variant" => "light", "v-if" => "subIndex !== 0"}
       = icon("fa-minus")
     %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)',

data/app/views/shared/vue/_in_tail_parse.html.haml

@@ -1,20 +1,20 @@
 - add_javascript_pack_tag("in_tail_parse")
 
-= render "shared/vue/owned_plugin_form"
+= render "shared/vue/parser_plugin_form"
 
 #in-tail-parse{"path" => setting.path}
-  %owned-plugin-form{"v-bind:id" => "'parse-section'",
-                     "v-bind:options-json" => "'#{Fluent::Plugin::PARSER_REGISTRY.map.keys.to_json}'",
-                     "v-bind:initial-plugin-name" => "'#{setting.parse_type || setting.guess_parse_type}'",
-                     "v-bind:plugin-type" => "'parse'",
-                     "v-bind:plugin-label" => "'Parse'",
-                     "v-on:change-parse-config" => "onChangeParseConfig",
-                     "v-on:change-plugin-name" => "onChangePluginName",
-                     "v-on:change-formats" => "onChangeFormats"}
+  %parser-plugin-form{"v-bind:id" => "'parse-section'",
+                      "v-bind:options-json" => "'#{Fluent::Plugin::PARSER_REGISTRY.map.keys.to_json}'",
+                      "v-bind:initial-plugin-name" => "'#{setting.parse_type || setting.guess_parse_type}'",
+                      "v-bind:plugin-type" => "'parse'",
+                      "v-bind:plugin-label" => "'Parse'",
+                      "v-on:change-parse-config" => "onChangeParseConfig",
+                      "v-on:change-plugin-name" => "onChangePluginName",
+                      "v-on:change-formats" => "onChangeFormats"}
 
-  .card.mb-3
-    %pre{"class" => "card-body", "v-html" => "highlightedLines"}
+  %b-card.mb-3
+    %pre{"v-html" => "highlightedLines"}
 
-  .card.md-3
-    %p.card-body.pb-0
+  %b-card.mb-3
+    %p.pb-0.mb-0
       =raw(t("fluentd.settings.in_tail_option_guide"))

data/app/views/shared/vue/_navigation.html.haml

@@ -0,0 +1,38 @@
+%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
+          %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
+          %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")

data/app/views/shared/vue/_owned_plugin_form.html.haml

@@ -1,9 +1,8 @@
-= render "shared/vue/parser_multiline_form"
 = render "shared/vue/config_field"
 
 %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)",
@@ -15,14 +14,20 @@
                 "v-bind:value" => "option",
                 "v-bind:selected" => "pluginName===option"}
           {{ option }}
-      %parser-multiline-form{"v-if" => 'pluginName==="multiline"',
-                             "v-bind:plugin-type" => "pluginType",
-                             "v-bind:common-options" => "commonOptions",
-                             "v-on:change-formats" => "onChangeFormats"}
-      %template(v-else){"v-for" => "option in commonOptions"}
-        %config-field{"v-bind:plugin-type" => "pluginType",
-                      "v-bind:option" => "option",
-                      "v-bind:initial-expression" => "expression",
-                      "v-bind:initial-time-format" => "timeFormat",
-                      "v-bind:initial-text-value" => "initialParams[option.name]",
-                      "v-on:change-parse-config" => "onChangeParseConfig"}
+
+      %config-field{"v-for" => "option in commonOptions",
+                    "v-bind:key" => "option.name",
+                    "v-bind:plugin-type" => "pluginType",
+                    "v-bind:option" => "option"}
+      %template{"v-if" => '!_.isEmpty(advancedOptions)'}
+        %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`"}
+            %b-card-body
+              %config-field{"v-for" => "option in advancedOptions",
+                            "v-bind:key" => "option.name",
+                            "v-bind:plugin-type" => "pluginType",
+                            "v-bind:option" => "option"}