Display tooltip and guide for parser_multiline

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

app/javascript/packs/parser_multiline_form.js

@@ -1,14 +1,17 @@
 'use strict'
+import 'lodash/lodash'
 const ParserMultilineForm = {
   template: "#vue-parser-multiline-form",
   props: [
-    "pluginType"
+    "pluginType",
+    "commonOptions"
   ],
 
   data: function() {
     return {
       formatFirstline: "",
-      formats: ""
+      formats: "",
+      formatFirstlineDesc: ""
     }
   },
 
@@ -26,6 +29,12 @@ const ParserMultilineForm = {
         "format_firstline": this.formatFirstline,
         "formats": this.formats
       })
+    },
+    "commonOptions": function(newValue, oldValue) {
+      const option = _.find(newValue, (o) => {
+        return o.name === "format_firstline"
+      })
+      this.formatFirstlineDesc = option.desc
     }
   },
 

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

@@ -16,6 +16,7 @@
           {{ option }}
       %parser-multiline-form{"v-if" => 'pluginName==="multiline"',
                              "v-bind:plugin-type" => "pluginType",
+                             "v-bind:common-options" => "commonOptions",
                              "v-on:change-formats" => "onChangeFormats"}
       .form-group(v-else){"v-for" => "option in commonOptions"}
         %template{"v-if" => 'option.type==="enum"'}

app/views/shared/vue/_parser_multiline_form.html.haml

@@ -1,6 +1,9 @@
 %script{type: "text/x-template", id: "vue-parser-multiline-form"}
   .form-group
-    %label{"for" => "setting_parse_0__format_firstline"}
+    %label{"for" => "setting_parse_0__format_firstline",
+           "data-toggle" => "tooltip",
+           "data-placement" => "right",
+           "v-bind:title" => "formatFirstlineDesc"}
       Format first line
     %input.form-control{"type" => "text",
                         "id" => "setting_parse_0__format_firstline",
@@ -8,6 +11,8 @@
                         "v-model.lazy" => "formatFirstline"}
     %label.mt-3{"v-bind:for" => "textareaId(pluginType)"}
       Formats
+    %p.alert.alert-warning
+      = t("fluentd.settings.in_tail.notice_for_multiline_limit")
     %textarea.form-control{"v-bind:id" => "textareaId(pluginType)",
                            "v-bind:name" => "textareaName(pluginType)",
                            "v-model.lazy" => "formats",