src/views/bin/log.pug
extends ../layout.pug
mixin method (method)
- var mapping = { GET: 'success', POST: 'primary', PUT: 'info', PATCH: 'warning' , DELETE: 'danger' }
- var className = mapping[method] ? mapping[method] : 'default'
span(class=`label-${className}`).label= method
block content
div(data-page="bin/log").container
div.btn-group.pull-right.hidden-xs
a(href= '/bin/view/' + req.params.uuid + req.params[0]).btn.btn-primary View Details
h3 Bin History: #[code= req.params.uuid + req.params[0]]
div.visible-xs
a(href= '/bin/view' + req.params.uuid + req.params[0]).btn.btn-block.btn-primary View Details
hr
div.alert.alert-warning.visible-xs
strong Warning
span Best viewed on a desktop screen, with minimum #[code 800px] width.
table.table.table-hover
thead
tr
th(width='10%') Method
th(width='30%') Path
th(width='10%') Size
th(width='20%') Date
th(width='15%') IP
th(width='15%').text-right Actions
tbody
for entry, id in data.raw.log.entries
tr(data-id= id)
td.method
+method(entry.request.method)
td= entry.request.url.slice(entry.request.url.indexOf('/bin/'))
td #{entry.request.bodySize / 1000} KB
td.date= new Intl.DateTimeFormat('en-US', { weekday: 'short', hour: 'numeric', month:'short', year: 'numeric' }).format(new Date(entry.startedDateTime))
td.ip= entry.clientIPAddress
td.action.text-right
div.btn-group.btn-group-sm
a.btn.btn-default(href=`#entry-${id}`): i.fa.fa-link
button.btn.btn-default(data-id= id): i.fa.fa-chevron-down
tr.data(id=`entry-${id}`)
td(colspan= 6)
div.row
div.col-sm-6
h4 Request Details #[small in #[a(href="https://ahmadnassri.github.io/har-resources/" target="_blank") HAR] format]
div#preview
pre: code= JSON.stringify(entry.request, null, 2)
div.col-sm-6
h4 Request Body
div#preview
pre: code= entry.request.postData && entry.request.postData.text ? entry.request.postData.text : 'No body was sent'
block scripts
script.
$(function() {
$('tr[data-id] td, button[data-id]').on('click', function (e) {
var id = $(this).data('id')
if (e.target.tagName === 'TD') {
id = $(this).parent().data('id')
}
// clear state
history.pushState('', document.title, window.location.pathname);
$('#entry-' + id + ' td').toggle();
})
// highlight the code
$('pre code').each(function (i, block) {
hljs.highlightBlock(block);
});
});