mirrors/fluentd-ui
1
0
Fork 0
mirror of https://github.com/fluent/fluentd-ui.git synced 2026-05-05 02:46:11 +02:00
Code Issues Projects Releases Wiki Activity

Move fluent_log.js under app/javascript/packs

Browse Source 
Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>
This commit is contained in:
Kenji Okimoto 2018-05-17 09:58:54 +09:00
parent c417e71647
commit dea13ddb16
No known key found for this signature in database
GPG Key ID: F9E3E329A5C5E4A1
3 changed files with 62 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/assets/javascripts/vue/fluent_log.js
View File

@ -1,64 +0,0 @@
(function(){
"use strict";
$(function(){
if($('#fluent-log').length === 0) return;
new Vue({
el: "#fluent-log",
paramAttributes: ["logUrl", "initialAutoReload"],
data: {
"autoFetch": false,
"logs": [],
"limit": 30,
"processing": false
},
compiled: function(){
this.fetchLogs();
var self = this;
var timer;
this.$watch("autoFetch", function(newValue){
if(newValue === true) {
timer = setInterval(function(){
self.fetchLogs();
var $log = $(".log", self.$el);
$log.scrollTop($log.innerHeight());
}, 1000);
} else {
clearInterval(timer);
}
});
if(this.initialAutoReload) {
this.autoFetch = true;
}
},
computed: {
isPresentedLogs: function(){
return this.logs.length > 0;
}
},
methods: {
fetchLogs: function() {
if(this.processing) return;
this.processing = true;
var self = this;
new Promise(function(resolve, reject) {
$.getJSON(self.logUrl + "?limit=" + self.limit, resolve).fail(reject);
}).then(function(logs){
self.logs = logs;
setTimeout(function(){
self.processing = false;
}, 256); // delay to reduce flicking loading icon
})["catch"](function(error){
self.processing = false;
});
}
}
});
});
})();

58
app/javascript/packs/fluent_log.js Normal file
View File

@ -0,0 +1,58 @@
'use strict';
$(document).ready(()=> {
new Vue({
el: "#fluent-log",
paramAttributes: ["logUrl", "initialAutoReload"],
data: {
"autoFetch": false,
"logs": [],
"limit": 30,
"processing": false
},
compiled: function(){
this.fetchLogs();
var self = this;
var timer;
this.$watch("autoFetch", function(newValue){
if(newValue === true) {
timer = setInterval(function(){
self.fetchLogs();
var $log = $(".log", self.$el);
$log.scrollTop($log.innerHeight());
}, 1000);
} else {
clearInterval(timer);
}
});
if(this.initialAutoReload) {
this.autoFetch = true;
}
},
computed: {
isPresentedLogs: function(){
return this.logs.length > 0;
}
},
methods: {
fetchLogs: function() {
if(this.processing) return;
this.processing = true;
var self = this;
new Promise(function(resolve, reject) {
$.getJSON(self.logUrl + "?limit=" + self.limit, resolve).fail(reject);
}).then(function(logs){
self.logs = logs;
setTimeout(function(){
self.processing = false;
}, 256); // delay to reduce flicking loading icon
})["catch"](function(error){
self.processing = false;
});
}
}
});
});

8
app/views/shared/vue/_fluent_log.html.erb
View File

@ -1,11 +1,12 @@
<%- add_javascript_pack_tag("fluent_log") %>
<!-- vue.js -->
<% auto_reload ||= true %>
<div id="fluent-log" logUrl="<%= log_tail_daemon_agent_path(fluentd) %>" initialAutoReload="<%= auto_reload ? "true" : "" %>">
<div class="bottom-margin form-inline">
<button class="btn btn-primary" v-on="click: fetchLogs">
<button class="btn btn-primary" v-on:click="fetchLogs">
<%= t "terms.reload_log" %>
</button>
<input type="text" v-model="limit" size="4" v-on="keyup: fetchLogs | key enter" class="form-control"/>
<input type="text" v-model="limit" size="4" v-on:keyup="fetchLogs | key enter" class="form-control"/>
<%= t('terms.lines') %>
<label>
<input type="checkbox" v-model="autoFetch" /> <%= t "terms.auto_reload", seconds: 1 %>
@ -14,7 +15,7 @@
</div>
<pre v-if="isPresentedLogs"><!-- be careful indent -->
<div class="log"><span v-repeat="logs">{{ $value }}
<div class="log"><span v-for="log in logs">{{ log }}
</span></div></pre>
<div v-if="!isPresentedLogs && !processing">
@ -22,4 +23,3 @@
</div>
</div>
<!-- /vue.js -->