Auto fill-in time_format after selected format

app/assets/javascripts/vue/in_tail_format.js

@@ -10,6 +10,7 @@
       data: {
         regexp: "",
         grok_str: "",
+        time_format: "",
         previewProcessing: false,
         highlightedLines: null
       },
@@ -100,12 +101,33 @@
               container: "body"
             })
           },0);
+        },
 
+        preview: function(){
+          var self = this;
+          new Promise(function(resolve, reject) {
+            $.ajax({
+              method: "POST",
+              url: "/api/regexp_preview",
+              data: {
+                regexp: self.regexp,
+                format: self.formatType == "regexp" ? "regexp" : self.format,
+                time_format: self.time_format,
+                file: self.targetFile
+              }
+            }).done(resolve).fail(reject);
+          }).then(function(result){
+            self.time_format = result.time_format;
+            self.regexpMatches = result.matches;
+            self.updateHighlightedLines();
+          })["catch"](function(error){
+            console.error(error.stack);
+          });
         },
 
         generateRegexp: function() {
+          // for grok
           var self = this;
-          this.previewProcessing = true;
           new Promise(function(resolve, reject) {
             $.ajax({
               method: "POST",
@@ -120,28 +142,6 @@
             console.error(e);
           });
         },
-
-        preview: function(){
-          var self = this;
-          this.previewProcessing = true;
-          new Promise(function(resolve, reject) {
-            $.ajax({
-              method: "POST",
-              url: "/api/regexp_preview",
-              data: {
-                regexp: self.regexp,
-                format: self.format,
-                file: self.targetFile
-              }
-            }).done(resolve).fail(reject);
-          }).then(function(matches){
-            self.regexpMatches = matches;
-            self.updateHighlightedLines();
-            self.previewProcessing = false;
-          })["catch"](function(error){
-            console.error(error.stack);
-          });
-        }
       }
     });
   });

app/controllers/api_controller.rb

@@ -19,9 +19,13 @@ class ApiController < ApplicationController
   end
 
   def regexp_preview
-    preview = RegexpPreview.new(params[:file], params[:format], regexp: params[:regexp])
+    preview = RegexpPreview.new(params[:file], params[:format], regexp: params[:regexp], time_format: params[:time_format])
     matches = preview.matches
-    render json: matches.compact
+    render json: {
+      regexp: preview.regexp.try(:source),
+      time_format: preview.time_format,
+      matches: matches.compact,
+    }
   end
 
   def grok_to_regexp

app/models/fluentd/setting.rb

@@ -17,6 +17,7 @@ class Fluentd
           :csv => [:keys, :time_key],
           :ltsv => [:delimiter, :time_key],
           :json => [:time_key],
+          :regexp => [:time_format],
           # TODO: Grok could generate Regexp including \d, \s, etc. fluentd config parser raise error with them for escape sequence check.
           #       TBD How to handle Grok/Regexp later, just comment out for hide
           # :grok => [:grok_str],

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

@@ -39,6 +39,10 @@
       <input type="hidden" name="setting[format]" value="regexp" />
       <input type="text" name="setting[regexp]" v-model="regexp" size="100%" />
     </div>
+    <div class="form-group">
+      <label>time_format</label>
+      <input type="text" name="setting[time_format]" v-model="time_format" size="100%" />
+    </div>
   </div>
 
   <pre>{{{ highlightedLines }}}</pre>

lib/regexp_preview.rb

@@ -12,13 +12,14 @@ class RegexpPreview
     case format
     when "regexp"
       @regexp = Regexp.new(options[:regexp])
+      @time_format = options[:time_format]
     when "ltsv", "json", "csv", "tsv"
     else
       definition = Fluent::TextParser::TEMPLATE_REGISTRY.lookup(format).call
       raise "Unknown format '#{format}'" unless definition
       definition.configure({}) # NOTE: SyslogParser define @regexp in configure method so call it to grab Regexp object
       @regexp = definition.patterns["format"]
-      @time_format = options[:time_format] || definition.patterns["format"]
+      @time_format = definition.patterns["time_format"]
     end
   end