Add Grok help

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

@@ -27,7 +27,9 @@
     </div>
     <div v-if="format == 'grok'">
       <pre v-if="highlightedLines">{{{ highlightedLines }}}</pre>
-      TODO: grok reference
+      <div class="well well-sm">
+        <%= raw t('fluentd.settings.grok_manual') %>
+      </div>
     </div>
   </div>
 

config/locales/translation_en.yml

@@ -105,6 +105,42 @@ en:
         recent_errors: "Recent %{count} Errors"
     settings:
       restart_from_first: Restart from first
+      grok_manual: |
+        <p>
+        Grok syntax, for example, <code>%{INT:foo}</code> pattern given then translate to <code>/(?&lt;foo&gt;(?:[+-]?(?:[0-9]+)))/</code> regexp.
+        </p>
+        <p>
+        Available key/value are <a href="http://grokdebug.herokuapp.com/patterns" target="_blank">here</a>.
+        </p>
+
+        <h4>Example</h4>
+
+        <p>
+        <code>Nov 29 17:02:55 MacBook-Pro-2.local UserEventAgent[239] : cannot find fw daemon port 1102</code> the log you have,<br />
+        <code>%{MONTH:month}%{SPACE}%{MONTHDAY:day} %{TIME:time} %{DATA} \[%{INT:pid}\]</code> for matching that, you will gain following result.
+        </p>
+
+        <table class="table">
+        <thead>
+        <tr>
+        <th>Key</th>
+        <th>Value</th>
+        </tr>
+        </thead>
+
+          <tr>
+          <th>month</th><td>Nov</td>
+          </tr>
+          <tr>
+          <th>day</th><td>29</td>
+          </tr>
+          <tr>
+          <th>time</th><td>17:02:55</td>
+          </tr>
+          <tr>
+          <th>pid</th><td>239</td>
+          </tr>
+        </table>
       in_tail_option_guide: |
         See <a target="_blank" href="http://docs.fluentd.org/articles/in_tail">in_tail Plugin</a> or 
         <a target="_blank" href="http://fluentular.herokuapp.com/">Fluentular</a> for more details.

config/locales/translation_ja.yml

@@ -108,6 +108,41 @@ ja:
       in_tail_option_guide: |
         <a target="_blank" href="http://docs.fluentd.org/ja/articles/in_tail">in_tailプラグインの解説ページ</a>や
         <a target="_blank" href="http://fluentular.herokuapp.com/">Fluentular</a>もご参照ください。
+      grok_manual: |
+        <p>
+        Grokの記法が使えます。例えば<code>%{INT:foo}</code>とすると、<code>/(?&lt;foo&gt;(?:[+-]?(?:[0-9]+)))/</code>という正規表現に変換されます。
+        </p>
+        <p>
+        使えるキー・値については<a href="http://grokdebug.herokuapp.com/patterns" target="_blank">リファレンス</a>をご確認ください。
+        </p>
+        <p>
+          <h4>例</h4>
+
+          <code>Nov 29 17:02:55 MacBook-Pro-2.local UserEventAgent[239] : cannot find fw daemon port 1102</code>というログに対し、<br />
+          <code>%{MONTH:month}%{SPACE}%{MONTHDAY:day} %{TIME:time} %{DATA} \[%{INT:pid}\]</code>というパターンを適用すると以下の結果が得られます。
+
+          <table class="table">
+          <thead>
+          <tr>
+          <th>キー名</th>
+          <th>値</th>
+          </tr>
+          </thead>
+
+            <tr>
+            <th>month</th><td>Nov</td>
+            </tr>
+            <tr>
+            <th>day</th><td>29</td>
+            </tr>
+            <tr>
+            <th>time</th><td>17:02:55</td>
+            </tr>
+            <tr>
+            <th>pid</th><td>239</td>
+            </tr>
+          </table>
+        </p>
       show:
         <<: *fluentd_common
       edit: