Tweak regexp preview

This commit is contained in:
uu59 2014-06-26 11:07:59 +09:00
parent bf455797b1
commit 8672f66e35
2 changed files with 14 additions and 9 deletions

View File

@ -6,24 +6,27 @@
new Vue({
el: "#in_tail_format",
paramAttributes: ["formatOptions", "initialSelected", "targetFile"],
paramAttributes: ["formatOptions", "initialSelected", "targetFile", "paramsJson"],
data: {
// v-model: format
regexp: "",
grok_str: "",
previewProcessing: false
previewProcessing: false,
highlightedLines: null
},
created: function(){
this.formatOptions = JSON.parse(this.formatOptions);
this.formats = Object.keys(this.formatOptions);
this.format = this.initialSelected;
this.params = JSON.parse(this.paramsJson);
this.grok_str = this.params.setting.grok_str;
this.regexp = this.params.setting.regexp;
this.$watch('regexp', function(ev){
this.previewRegexp();
});
this.$watch('grok_str', function(ev){
this.generateRegexp();
});
var updateGrokPreview = _.debounce(_.bind(this.generateRegexp, this), 256);
this.$watch('grok_str', updateGrokPreview);
},
computed: {
@ -38,7 +41,7 @@
updateHighlightedLines: function() {
if(!this.regexpMatches) {
this.highlightedLines = "";
this.highlightedLines = null;
return;
}
@ -88,6 +91,7 @@
},
previewRegexp: function(){
if(!this.regexp) return;
var self = this;
this.previewProcessing = true;
new Promise(function(resolve, reject) {

View File

@ -2,6 +2,7 @@
formatOptions="<%= formats.to_json %>"
initialSelected="<%= initialSelected %>"
targetFile="<%= file %>"
paramsJson="<%= params.to_json %>"
>
<div class="form-group">
<label>
@ -22,10 +23,10 @@
<div class="form-group" v-repeat="options">
<label>{{ $value }} </label>
<input type="text" name="setting[{{ $value }}]" v-model="{{ $value }}" size="100%" />
<span v-if="format == 'grok' && previewProcessing"><%= icon('fa-spin fa-refresh fa-lg') %></span>
</div>
<div v-if="format == 'grok'">
<span v-if="previewProcessing"><%= icon('fa-spin fa-spinner') %>previewProcessing</span>
<pre>{{{ highlightedLines }}}</pre>
<pre v-if="highlightedLines">{{{ highlightedLines }}}</pre>
TODO: grok reference
</div>
</div>