mirrors/fluentd-ui
1
0
Fork 0
mirror of https://github.com/fluent/fluentd-ui.git synced 2025-08-19 21:41:11 +02:00
Code Issues Projects Releases Wiki Activity

Tweak regexp preview

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/javascripts/vue/in_tail_format.js
View File

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

5
app/views/shared/vue/_in_tail_format.html.erb
View File

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