arrow-admin
Version:
Arrow Admin Website
254 lines (232 loc) • 8.18 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'));
if (logData.length > 0) {
$('#appc_table_new_header .pull-right').html('<button id="clear-all-logs" class="btn btn-danger">Clear Logs</button>');
$('#clear-all-logs').click(function (evt) {
evt.preventDefault();
if (window.confirm('Are you sure?')) {
$.ajax({
url: 'metadata/logs',
method: 'DELETE',
success: function () {
location.reload();
}
});
}
return false;
});
}
}
});
};
});