mirror of
https://github.com/fluent/fluentd-ui.git
synced 2025-08-12 09:17:05 +02:00
Move in_tail_format.js under app/javascript/packs
Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
This commit is contained in:
Kenji Okimoto
parent
038742e621
commit
1b0229f095
@ -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);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
192
app/javascript/packs/in_tail_format.js
Normal file
192
app/javascript/packs/in_tail_format.js
Normal file
@ -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);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -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">
|
||||
<label for="in_tail_setting_{{ $value }}" v-if="!useTextArea">{{ $value }} </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" />
|
||||
<div class="form-inline form-group" v-for="option in options">
|
||||
<label v-bind:for="'in_tail_setting_' + option" v-if="!useTextArea">{{ option }} </label>
|
||||
<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') %>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user