arrow-admin
Version:
Arrow Admin Website
237 lines (216 loc) • 7.46 kB
JavaScript
/* jshint undef: true */
/* global History */
define(['jquery','loader','numeral', './appc_table', 'history','datatables','datatables-bootstrap'], function ($, Loader, numeral, AppcTable){
return function(){
$('body').addClass('collapsed');
return new Loader('logs', function(){
var loading,
table;
// listen for state change events
History.Adapter.bind(window,'statechange',function() {
var State = History.getState();
if (State.data && State.data.name) {
loadTimeline(State.data.name);
}
else {
loadTable();
}
});
if (window.location.search) {
loadTimeline(window.location.search.substring(1));
}
else {
loadTable();
}
function getStatusLabel(statusCode) {
return statusCode > 100 &&
statusCode < 400 ? 'success' :
statusCode >= 400 && statusCode < 500 ?
'warning' : 'danger';
}
function loadTable() {
History.pushState(null, null, null);
$('#log_detail').hide();
if ($('#appc_table').data('loaded')) {
$('#appc_table_wrapper').show();
$('#appc_table_new_footer').show();
}
else {
if (loading) { return; }
loading = true;
$.get('metadata/logs', function (data) {
createTable(data);
loading = false;
});
}
}
function loadTimeline(name) {
if (loading) { return; }
loading = true;
$('#appc_table_wrapper').hide();
$('#appc_table_new_footer').hide();
$('#request_log_timeline').html('');
$.get('metadata/timeline/'+name, function(logDetail){
var response = logDetail.response || logDetail.res || {};
var request = logDetail.request || logDetail.req || {};
var statusCode = response.status || response.statusCode;
var status = response.statusMessage;
var statusLabel = getStatusLabel(statusCode);
var statusHtml = (statusLabel && statusCode ? ('<span class="timeline-url-details label-'+statusLabel+'">'+statusCode+' '+status+'</span><span class="timeline-duration-details">'+numeral(logDetail.duration).format('0.00')+' ms</span>'):'');
var timeline = logDetail.timeline || {
timeline: []
};
$('#log_selected_component').html(logDetail.req_id);
var urlText = request.method+' '+logDetail.url;
var urlTitle = urlText;
if (urlText.length > 80) {
urlText = urlText.substring(0, 80) + '...';
}
$('#request_log_timeline').append('<li><span class="timeline-timestamp" style="width:auto" title="'+urlTitle+'">'+ urlText +'</span> '+statusHtml+'</li>');
createStep(request,logDetail.remote);
createPerformanceStep(numeral(timeline.beginServerDuration).format('0.00'));
for (var t=0;t<timeline.timeline.length;t++) {
var step = timeline.timeline[t];
createStep(step);
createPerformanceStep(numeral(step.duration).format('0.00'));
}
createStep(response);
createPerformanceStep(numeral(timeline.endServerDuration).format('0.00'));
$('#log_detail').show();
loading = false;
});
}
// CREATE A PERFORMANCE TIMELINE OBJECT
function createPerformanceStep(time){
$('#request_log_timeline').append('<li><div align="center" class="timeline-timestamp">'+time+' ms</div></li>');
}
function createStep(step, remoteAddr) {
// console.log('step',step);
var detail = step.detail,
type = step.type,
name = step.name,
sectionTitle,
i = Date.now() + type,
badgeClass = (type==='server')?'info':(type==='block')?'warning':(type==='api'||type==='action')?'success':(type==='connector')?'primary':'danger';
if (detail) {
var methodName = type!=='server' ? (step.method ? '.' + step.method + '()' : '') : '';
sectionTitle = '<span class="step-name">' + name + '</span> '+
'<span class="step-method">' + methodName + '</span> '+
'<span class="step-description">' + (step.description || '') + '</span>';
var tabBodyHTML = '';
var tabHTML = '';
var tabs = 0;
for (var e in detail) {
var content = detail[e];
if (tabs===0) {
tabHTML = '<ul class="nav nav-tabs" role="tablist" data-tabs="tabs" id="s'+i+'_tabs">';
}
if (content) {
if (typeof(content)==='object' && content.length===0) {
continue;
}
else {
if ($.isArray(content)) {
content = content.join('\n');
}
var active = (tabs===0)?'class="active"':'';
tabHTML+= '<li '+active+'><a class="s'+i+'" index="'+tabs+'" href="#" data-toggle="tab">'+e+'</a></li>';
var display = (tabs===0)?'block':'none';
tabBodyHTML+='<div class="s'+i+' tab_content '+tabs+'" style="display:'+display+'">'+
'<pre class="code">'+content+'</pre>'+
'</div>';
tabs++;
}
}
}
if (tabHTML) {
tabHTML +='</ul>';
}
// BUILD TAB HTML
$('#request_log_timeline').append('<li class="timeline-inverted">'+
'<div class="timeline-badge '+badgeClass + '"><span class="timeline_text">'+type+'</span></div>'+
'<div class="timeline-panel">'+
'<div class="timeline-heading">'+
'<h3>'+sectionTitle+'</h3>'+
(remoteAddr ? '<div class="timeline-remoteaddr">Remote Address:'+remoteAddr+'</div>' : '')+
'</div>'+
'<div class="timeline-body">'+
tabHTML + tabBodyHTML+
'</div>'+
'</div>'+
'</li>');
// ACTIVATE TAB
$('#s'+i+'_tabs').tab();
// ADD TAB CLICK LISTENER
$('#s'+i+'_tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// hide/show right tab content
var activeTab = $(this).attr('index');
$('.s'+i+'.tab_content').hide();
$('.s'+i + '.'+ activeTab).show();
});
}
else {
sectionTitle = '<span class="step-description">'+name+'</span>';
$('#request_log_timeline').append('<li class="timeline-inverted">'+
'<div class="timeline-badge '+badgeClass + '"><span class="timeline_text">'+type+'</span></div>'+
'<div class="timeline-panel">'+
'<div class="timeline-heading">'+
'<h3>'+sectionTitle+'</h3>'+
(remoteAddr ? '<div class="timeline-remoteaddr">Remote Address:'+remoteAddr+'</div>' : '')+
'</div>'+
'<div class="timeline-body">'+
'</div>'+
'</div>'+
'</li>');
}
return step;
}
// CREATE TABLE
function createTable(logData) {
if (table) {
table.destroy();
}
for (var i = 0; i < logData.length; i++) {
var log = logData[i];
log[3] = decodeURIComponent(log[3]);
}
table = AppcTable.createTable({
"data": logData,
"order": [4, 'desc'],
"columns": [
{"title": "Request ID"},
{"title": "Status", "className":"http-status"},
{"title": "Method"},
{"title": "URL"},
{"title": "Date"},
{"title": "Time"},
{"title": "Duration (ms)"}
],
'columnDefs': [
{ // Request ID, Date
"targets": [0, 4],
"visible": false,
"searchable": false
},
{ // Status
"targets": [1],
"createdCell": function (td, cellData) {
$(td).addClass(getStatusLabel(cellData));
}
}
],
'infiniteScrolling': true,
fnRowCallback: function( row, data, index, fullindex ) {
// Row click
$(row).on('click', function() {
var name = data[0];
History.pushState({name:name}, name, '?'+name);
});
}
}, $('#page-container'));
}
});
};
});