fluentd log tail url to be HTML attr for prepare log tail display on fluentd#show

app/assets/javascripts/fluent_log.js

@@ -6,6 +6,7 @@
 
     new Vue({
       el: "#fluent-log",
+      paramAttributes: ["logUrl"],
       data: {
         "logs": [],
       },
@@ -18,7 +19,7 @@
         fetchLogs: function() {
           var self = this;
           new Promise(function(resolve, reject) {
-            $.getJSON("/tutorials/log_tail", resolve).fail(reject);
+            $.getJSON(self.logUrl, resolve).fail(reject);
           }).then(function(logs){
             self.logs = logs;
           });

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

@@ -0,0 +1,10 @@
+<!-- vue.js -->
+<div id="fluent-log" logUrl="/tutorials/log_tail">
+  <pre>
+<button class="btn btn-primary" v-on="click: fetchLogs"><%= t "terms.reload_log" %></button>
+
+<span v-repeat="logs">{{ $value }}
+</span></pre>
+</div>
+<!-- /vue.js -->
+

app/views/tutorials/chapter1.html.erb

@@ -23,15 +23,7 @@
 </div>
 <!-- /vue.js -->
 
-<!-- vue.js -->
+<%= render partial: "shared/vue/fluent_log", locals: { fluentd: @fluentd } %>
-<div id="fluent-log">
-  <pre>
-<button class="btn btn-primary" v-on="click: fetchLogs"><%= t ".reload_log" %></button>
-
-<span v-repeat="logs">{{ $value }}
-</span></pre>
-</div>
-<!-- /vue.js -->
 
 <p class="clearfix">
   <%= link_to t('tutorials.chapter2.page_title') << " >>", tutorials_chapter2_path, class: "pull-right" %>

config/locales/translation_en.yml

@@ -31,6 +31,7 @@ en:
     destroy_confirm_title: "%{target} Deletion"
     destroy_confirm_body: |
       Really delete?
+    reload_log: Reload fluend log
 
   plugins:
     common: &plugin_common
@@ -117,7 +118,6 @@ en:
     chapter1:
       <<: *tutorials_common
       page_title: "Chapter 1 | Try to send data"
-      reload_log: Reload fluend log
       description: You can send an arbitrary JSON data via HTTP. URL path will be tag name.
       send: Send
     chapter2:

config/locales/translation_ja.yml

@@ -31,6 +31,7 @@ ja:
     destroy_confirm_title: "%{target}を削除"
     destroy_confirm_body: |
       削除しますか？
+    reload_log: fluentdのログを更新
 
   plugins:
     common: &plugin_common
@@ -117,7 +118,6 @@ ja:
     chapter1:
       <<: *tutorials_common
       page_title: "Chapter 1 | データを渡してみる"
-      reload_log: fluentdのログを更新
       description: fluentdに任意のデータをJSONで送ることができます。URLのパスがタグの名前になります。
       learn_more: |
         他にもin_tail, in_syslogなどのinputプラグインがあります。