Move in_tail_format.js under app/javascript/packs

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

app/assets/javascripts/vue/in_tail_format.js

@@ -1,177 +0,0 @@
-(function(){
-  "use strict";
-  var maxFormatCount = 20;
-
-  $(function(){
-    if($('#in_tail_format').length === 0) return;
-
-    var FormatBundle = Vue.component('format-bundle', {
-      inherit: true,
-      template: "#format-bundle",
-      computed: {
-        options: {
-          get: function(){
-            return this.formatOptions[this.format];
-          },
-        },
-        selectableFormats: {
-          get: function() {
-            return Object.keys(this.formatOptions);
-          }
-        }
-      }
-    });
-
-    new Vue({
-      el: "#in_tail_format",
-      paramAttributes: ["formatOptionsJson", "initialSelected", "targetFile", "paramsJson"],
-      data: {
-        previewProcessing: false,
-        format: "",
-        highlightedLines: null,
-      },
-
-      computed: {
-        useTextArea: function() {
-          return this.format === "multiline";
-        }
-      },
-
-      compiled: function(){
-        this.$watch('params.setting.formats', function(formats){
-          _.range(1, maxFormatCount + 1).forEach(function(i) {params.setting["format" + String(i)] = "";});
-
-          _.compact(formats.split("\n")).forEach(function(formatLine, index) {
-            params.setting["format" + String(index + 1)] = formatLine;
-          });
-        }),
-        this.$watch('params.setting.regexp', function(){
-          this.preview();
-        });
-        this.$watch('format', function(){
-          this.preview();
-        });
-        this.$set("formatOptions", JSON.parse(this.formatOptionsJson));
-        this.format = this.initialSelected;
-
-        // initialize params
-        // NOTE: if `params.setting.foo` is undefined, Vue can't binding with v-model="params.setting.foo"
-        var params = JSON.parse(this.paramsJson);
-        if(!params.setting) {
-          params.setting = {};
-        }
-
-        var formats = _.chain(_.range(1, maxFormatCount + 1)).map(function(i) {return params.setting["format" + String(i)];}).compact().value();
-        params.setting.formats = formats.join("\n");
-
-        _.each(this.formatOptions, function(options){
-          _.each(options, function(key){
-            if(!params.setting.hasOwnProperty(key)){
-              params.setting[key] = "";
-            }
-          });
-        });
-        this.$set('params', params);
-        this.$emit("data-loaded");
-      },
-
-      methods: {
-        onKeyup: function(ev){
-          var el = ev.target;
-          if(el.name.match(/\[format/)){
-            this.preview();
-          }
-        },
-        updateHighlightedLines: function() {
-          if(!this.regexpMatches) {
-            this.highlightedLines = null;
-            return;
-          }
-
-          var $container = jQuery('<div>');
-          _.each(this.regexpMatches, function(match){
-            var colors = [
-              "#ff9", "#cff", "#fcf", "#dfd"
-            ];
-            var whole = match.whole;
-            var html = "";
-            var matches = [];
-
-            var lastPos = 0;
-            _.each(match.matches, function(match) {
-              var matched = match.matched;
-              if(!matched) return;
-              if(matched.length === 0) return; // Ignore empty matched with "foobar".match(/foo(.*?)bar/)[1] #=> ""
-
-              // rotated highlight color
-              var currentColor = colors.shift();
-              colors.push(currentColor);
-
-              // create highlighted range HTML
-              var $highlighted = jQuery('<span>').text(matched);
-              $highlighted.attr({
-                "class": "regexp-preview",
-                "data-toggle": "tooltip",
-                "data-placement": "top",
-                "title": match.key,
-                'style': 'background-color:' + currentColor
-              });
-              var highlightedHtml = $highlighted.wrap('<div>').parent().html();
-
-              var pos = {
-                "start": match.pos[0],
-                "end": match.pos[1]
-              };
-              if(pos.start > 0) {
-                html += _.escape(whole.substring(lastPos, pos.start));
-              }
-              html += highlightedHtml;
-              lastPos = pos.end;
-            });
-            html += whole.substring(lastPos);
-
-            $container.append(html);
-            $container.append("<br />");
-          });
-
-          this.highlightedLines = $container.html();
-          setTimeout(function(){
-            $('#in_tail_format').tooltip({
-              selector: "[data-toggle=tooltip]",
-              container: "body"
-            })
-          },0);
-        },
-
-        preview: function(){
-          if(this.previewAjax) {
-            this.previewAjax.abort();
-          }
-          var self = this;
-          new Promise(function(resolve, reject) {
-            self.previewAjax = $.ajax({
-              method: "POST",
-              url: "/api/regexp_preview",
-              data: {
-                regexp: self.params.setting.regexp,
-                time_format: self.params.setting.time_format,
-                format: _.isEmpty(self.format) ? "regexp" : self.format,
-                params: self.params.setting,
-                file: self.targetFile
-              }
-            }).done(resolve).fail(reject);
-          }).then(function(result){
-            self.params = _.merge(self.params, result.params);
-            self.regexpMatches = result.matches;
-            self.updateHighlightedLines();
-          })["catch"](function(error){
-            if(error.stack) {
-              console.error(error.stack);
-            }
-          });
-        },
-      }
-    });
-  });
-})();
-

app/javascript/packs/in_tail_format.js

@@ -0,0 +1,192 @@
+'use strict'
+import 'lodash/lodash'
+
+window.addEventListener('load', () => {
+  const maxFormatCount = 20;
+
+  var FormatBundle = Vue.component('format-bundle', {
+    template: "#format-bundle",
+    props: ["format", "formatOptions", "params"],
+    computed: {
+      options: {
+        get: function(){
+          return this.formatOptions[this.format];
+        },
+      },
+      selectableFormats: {
+        get: function() {
+          return Object.keys(this.formatOptions);
+        }
+      },
+      useTextArea: function() {
+        return this.format === "multiline";
+      }
+    },
+    methods: {
+      onKeyup: function(ev) {
+        var el = ev.target;
+        if(el.name.match(/\[format/)){
+          this.$emit('update-preview', null);
+        }
+      }
+    }
+  });
+
+  new Vue({
+    el: "#in_tail_format",
+    props: ["formatOptionsJson", "initialSelected", "targetFile", "paramsJson"],
+    data: {
+      previewProcessing: false,
+      format: "",
+      highlightedLines: null,
+    },
+    components: { 'format-bundle': FormatBundle },
+
+    computed: {
+      useTextArea: function() {
+        return this.format === "multiline";
+      }
+    },
+
+    beforeMount: function() {
+      this.formatOptions = JSON.parse(this.$el.attributes.formatOptionsJson.nodeValue);
+      this.format = this.$el.attributes.initialSelected.nodeValue;
+
+      // initialize params
+      // NOTE: if `params.setting.foo` is undefined, Vue can't binding with v-model="params.setting.foo"
+      var params = JSON.parse(this.$el.attributes.paramsJson.nodeValue);
+      if(!params.setting) {
+        params.setting = {};
+      }
+
+      var formats = _.chain(_.range(1, maxFormatCount + 1)).map(function(i) {return params.setting["format" + String(i)];}).compact().value();
+      params.setting.formats = formats.join("\n");
+
+      _.each(this.formatOptions, function(options){
+        _.each(options, function(key){
+          if(!params.setting.hasOwnProperty(key)){
+            params.setting[key] = "";
+          }
+        });
+      });
+      this.params = params;
+    },
+    mounted: function(){
+      this.$watch('params.setting.formats', (formats)=> {
+        _.range(1, maxFormatCount + 1).forEach(()=> {params.setting["format" + String(i)] = "";});
+
+        _.compact(formats.split("\n")).forEach((formatLine, index)=> {
+          params.setting["format" + String(index + 1)] = formatLine;
+        });
+      }),
+      this.$watch('params.setting.regexp', ()=> {
+        this.preview();
+      });
+      this.$watch('format', ()=> {
+        this.preview();
+      });
+
+      this.$emit("data-loaded");
+    },
+
+    methods: {
+      onKeyup: function(ev){
+        var el = ev.target;
+        if(el.name.match(/\[format/)){
+          this.preview();
+        }
+      },
+      updatePreview: function() {
+        this.preview();
+      },
+      updateHighlightedLines: function() {
+        if(!this.regexpMatches) {
+          this.highlightedLines = null;
+          return;
+        }
+
+        var $container = jQuery('<div>');
+        _.each(this.regexpMatches, function(match){
+          var colors = [
+            "#ff9", "#cff", "#fcf", "#dfd"
+          ];
+          var whole = match.whole;
+          var html = "";
+          var matches = [];
+
+          var lastPos = 0;
+          _.each(match.matches, function(match) {
+            var matched = match.matched;
+            if(!matched) return;
+            if(matched.length === 0) return; // Ignore empty matched with "foobar".match(/foo(.*?)bar/)[1] #=> ""
+
+            // rotated highlight color
+            var currentColor = colors.shift();
+            colors.push(currentColor);
+
+            // create highlighted range HTML
+            var $highlighted = jQuery('<span>').text(matched);
+            $highlighted.attr({
+              "class": "regexp-preview",
+              "data-toggle": "tooltip",
+              "data-placement": "top",
+              "title": match.key,
+              'style': 'background-color:' + currentColor
+            });
+            var highlightedHtml = $highlighted.wrap('<div>').parent().html();
+
+            var pos = {
+              "start": match.pos[0],
+              "end": match.pos[1]
+            };
+            if(pos.start > 0) {
+              html += _.escape(whole.substring(lastPos, pos.start));
+            }
+            html += highlightedHtml;
+            lastPos = pos.end;
+          });
+          html += whole.substring(lastPos);
+
+          $container.append(html);
+          $container.append("<br />");
+        });
+
+        this.highlightedLines = $container.html();
+        setTimeout(function(){
+          $('#in_tail_format').tooltip({
+            selector: "[data-toggle=tooltip]",
+            container: "body"
+          })
+        },0);
+      },
+
+      preview: function(){
+        if(this.previewAjax) {
+          this.previewAjax.abort();
+        }
+        var self = this;
+        new Promise(function(resolve, reject) {
+          self.previewAjax = $.ajax({
+            method: "POST",
+            url: "/api/regexp_preview",
+            data: {
+              regexp: self.params.setting.regexp,
+              time_format: self.params.setting.time_format,
+              format: _.isEmpty(self.format) ? "regexp" : self.format,
+              params: self.params.setting,
+              file: self.targetFile
+            }
+          }).done(resolve).fail(reject);
+        }).then(function(result){
+          self.params = _.merge(self.params, result.params);
+          self.regexpMatches = result.matches;
+          self.updateHighlightedLines();
+        })["catch"](function(error){
+          if(error.stack) {
+            console.error(error.stack);
+          }
+        });
+      },
+    }
+  });
+});

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

@@ -1,27 +1,31 @@
-<script type="text/template" id="format-bundle">
+<%- add_javascript_pack_tag("in_tail_format") %>
+
+<script type="text/x-template" id="format-bundle">
+  <div>
     <div class="form-inline form-group">
       <label for="in_tail_setting_format">format</label>
       <select id="in_tail_setting_format" name="setting[format]" v-model="format" class="form-control">
-        <option v-repeat="selectableFormats" value="{{ $value }}" v-attr="selected: format==$value">{{ $value }}</option>
+        <option v-for="selectableFormat in selectableFormats" v-bind:value="selectableFormat" v-bind:selected="format==selectableFormat" v-if="selectableFormats">{{ selectableFormat }}</option>
       </select>
     </div>
-    <div class="form-inline form-group" v-repeat="options">
+    <div class="form-inline form-group" v-for="option in options">
-      <label for="in_tail_setting_{{ $value }}" v-if="!useTextArea">{{ $value }} </label>
+      <label v-bind:for="'in_tail_setting_' + option" v-if="!useTextArea">{{ option }} </label>
-      <input id="in_tail_setting_{{ $value }}" type="{{ useTextArea ? 'hidden' : 'text' }}" name="setting[{{ $value }}]" v-model="params.setting[$value]" v-on="keyup: onKeyup" size="100%" class="form-control" />
+      <input v-bind:id="'in_tail_setting_' + option" v-bind:type="useTextArea ? 'hidden' : 'text'" v-bind:name="'setting[' + option + ']'" v-model="params.setting[option]" v-on:keyup="onKeyup" size="100%" class="form-control" />
     </div>
 
     <div v-if="useTextArea">
       <div class="form-inline form-group">
         <label for="in_tail_setting_format_firstline">format_firstline</label>
-        <input id="in_tail_setting_format_firstline" type="text" name="setting[format_firstline]" v-model="params.setting['format_firstline']" v-on="keyup: onKeyup" size="100%" class="form-control" />
+        <input id="in_tail_setting_format_firstline" type="text" name="setting[format_firstline]" v-model="params.setting['format_firstline']" v-on:keyup="onKeyup" size="100%" class="form-control" />
       </div>
 
       <div class="form-group">
        <p class="alert alert-warning"><%= t("fluentd.settings.in_tail.notice_for_multiline_limit") %></p>
         <label for="in_tail_setting_formats">formats</label>
-        <textarea id="in_tail_setting_formats" type="text" name="setting[formats]" v-model="params.setting['formats']" v-on="keyup: onKeyup" rows='20' size='100%' class="form-control"></textarea>
+        <textarea id="in_tail_setting_formats" type="text" name="setting[formats]" v-model="params.setting['formats']" v-on:keyup="onKeyup" rows='20' size='100%' class="form-control"></textarea>
       </div>
     </div>
+  </div>
 </script>
 
 <div id="in_tail_format"
@@ -31,9 +35,13 @@
   paramsJson="<%= params.to_json %>"
   >
 
-  <div v-component="format-bundle" wait-for="data-loaded"></div>
+  <format-bundle
+    v-bind:format-options="formatOptions"
+    v-bind:format="format"
+    v-bind:params="params"
+    v-on:update-preview="updatePreview"></format-bundle>
 
-  <pre>{{{ highlightedLines }}}</pre>
+  <pre>{{ highlightedLines }}</pre>
 
   <div class="well well-sm">
     <%= raw t('fluentd.settings.in_tail_option_guide') %>