Skip to content

/logtrix

Permalink
Browse files

UI added

  • Loading branch information...
@kris-sigur
kris-sigur committed Apr 5, 2019
1 parent 76a9020 commit f1294db1c50fb8af1cfe8f030e9c08d12ad6574a
Unified Split
Showing with 339 additions and 0 deletions.
  1. +126 −0 resources/ui/index.html
  2. +213 −0 resources/ui/review.js
View file
126 resources/ui/index.html
@@ -0,0 +1,126 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<title>Crawl Log Summary Reviewer</title>
</head>
<body>
<h1>Crawl Log Summary Reviewer</h1>

<div class="container" id="file-picker">
<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();'>
</div>

<div id="reporter" style="display: none">
<ul class="nav nav-tabs mb-2">
<li class="nav-item">
<a class="nav-link active" href="#" onClick="show(this, 'overview-report')">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onClick="show(this, 'status-code-report')">Status Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onClick="show(this, 'mimetype-report')">Mimetypes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onClick="show(this, 'domain-report')">Domains</a>
</li>
</ul>

<div class="container" id="overview-report" style="display: none">
<div class="row">
<div class="col-2">URL Count</div><div class="col-10" id="totalCount"></div>
<div class="col-2">Bytes</div><div class="col-10" id="totalBytes"></div>
</div>

</div>

<div class="container-fluid" id="status-code-report" style="display: none">
<table id="status-code-table"
data-page-length='25'
class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>Code</th>
<th class="text-nowrap">Description</th>
<th>Count</th>
<th>Duplicates</th>
<th>Duplicates %</th>
<th>Bytes</th>
<th>Duplicate bytes</th>
<th>Duplicate bytes %</th>
<th>Avg. KB/sec</th>
<th>First Capture</th>
<th>Last Capture</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

<div class="container-fluid" id="mimetype-report" style="display: none">
<table id="mimetype-table"
data-page-length='25'
class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th class="text-nowrap">Mimetype</th>
<th>Count</th>
<th>Duplicates</th>
<th>Duplicates %</th>
<th>Bytes</th>
<th>Duplicate bytes</th>
<th>Duplicate bytes %</th>
<th>Avg. KB/sec</th>
<th>First Capture</th>
<th>Last Capture</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="container-fluid" id="domain-report" style="display: none">
<table id="domain-table"
data-page-length='25'
class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th class="text-nowrap">Domain</th>
<th>Count</th>
<th>Duplicates</th>
<th>Duplicates %</th>
<th>Bytes</th>
<th>Duplicate bytes</th>
<th>Duplicate bytes %</th>
<th>Avg. KB/sec</th>
<th>First Capture</th>
<th>Last Capture</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="review.js"></script>
</body>
</html>
View file
213 resources/ui/review.js
@@ -0,0 +1,213 @@
function show(parent, choice) {
$("#reporter > div").css("display", "none");
$("#"+choice).css("display","block");
$(".nav-link").removeClass("active");
$(parent).addClass("active");
}

function handleFileSelect() {
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser.');
return;
}

input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
}

function receivedText() {
let report = JSON.parse(fr.result);
$("#file-picker").css("display","none");
$("#reporter").css("display","block");
$("#overview-report").css("display","block");

$("#totalCount").text(report.totals.count.toLocaleString());
$("#totalBytes").text(report.totals.bytes.toLocaleString());

let codeData = [];

Object.keys(report.statusCodes).forEach(function(code) {
let codeValues = report.statusCodes[code];
let entry = {};
entry.code = code;
entry.description = codeValues.description==null ? '' : codeValues.description;
entry.count = codeValues.count;
entry.duplicate = codeValues.count-codeValues.uniqueCount;
entry.duppercent = (codeValues.count-codeValues.uniqueCount)*100/codeValues.count;
entry.bytes = codeValues.bytes;
entry.dupbytes = codeValues.bytes-codeValues.uniqueBytes;
entry.dupbytesperc = (codeValues.bytes-codeValues.uniqueBytes)*100/codeValues.bytes;
entry.rate = ((codeValues.bytes/8)/(codeValues.millis/1000))/1024;
entry.firstTime = codeValues.firstTime;
entry.lastTime = codeValues.lastTime;

codeData.push(entry);
});

console.log(codeData);

$('#status-code-table').DataTable({
data: codeData,
columns: [
{ data: 'code' },
{ data: 'description' },
{
data: 'count',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'duplicate',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'duppercent',
render: $.fn.dataTable.render.number( ',', '.', 2, '', '%' )
},
{
data: 'bytes',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'dupbytes',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'dupbytesperc',
render: $.fn.dataTable.render.number( ',', '.', 2, '', '%' )
},
{
data: 'rate',
render: $.fn.dataTable.render.number( ',', '.', 2)
},
{ data: 'firstTime' },
{ data: 'lastTime' },
]
});

let mimeData = [];

Object.keys(report.mimeTypes).forEach(function(type) {
let typeValues = report.mimeTypes[type];
let entry = {};
entry.type = type;
entry.count = typeValues.count;
entry.duplicate = typeValues.count-typeValues.uniqueCount;
entry.duppercent = (typeValues.count-typeValues.uniqueCount)*100/typeValues.count;
entry.bytes = typeValues.bytes;
entry.dupbytes = typeValues.bytes-typeValues.uniqueBytes;
entry.dupbytesperc = (typeValues.bytes-typeValues.uniqueBytes)*100/typeValues.bytes;
entry.rate = ((typeValues.bytes/8)/(typeValues.millis/1000))/1024;
entry.firstTime = typeValues.firstTime;
entry.lastTime = typeValues.lastTime;

mimeData.push(entry);
});

$('#mimetype-table').DataTable({
data: mimeData,
columns: [
{ data: 'type' },
{
data: 'count',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'duplicate',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'duppercent',
render: $.fn.dataTable.render.number( ',', '.', 2, '', '%' )
},
{
data: 'bytes',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'dupbytes',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'dupbytesperc',
render: $.fn.dataTable.render.number( ',', '.', 2, '', '%' )
},
{
data: 'rate',
render: $.fn.dataTable.render.number( ',', '.', 2)
},
{ data: 'firstTime' },
{ data: 'lastTime' },
]
});

let domainData = [];

Object.keys(report.registeredDomains).forEach(function(domain) {
let values = report.registeredDomains[domain];
let entry = {};
entry.domain = domain;
entry.count = values.count;
entry.duplicate = values.count-values.uniqueCount;
entry.duppercent = (values.count-values.uniqueCount)*100/values.count;
entry.bytes = values.bytes;
entry.dupbytes = values.bytes-values.uniqueBytes;
entry.dupbytesperc = (values.bytes-values.uniqueBytes)*100/values.bytes;
entry.rate = ((values.bytes/8)/(values.millis/1000))/1024;
entry.firstTime = values.firstTime;
entry.lastTime = values.lastTime;

domainData.push(entry);
});

$('#domain-table').DataTable({
data: domainData,
columns: [
{ data: 'domain' },
{
data: 'count',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'duplicate',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'duppercent',
render: $.fn.dataTable.render.number( ',', '.', 2, '', '%' )
},
{
data: 'bytes',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'dupbytes',
render: $.fn.dataTable.render.number( ',', '.', 0, '' )
},
{
data: 'dupbytesperc',
render: $.fn.dataTable.render.number( ',', '.', 2, '', '%' )
},
{
data: 'rate',
render: $.fn.dataTable.render.number( ',', '.', 2)
},
{ data: 'firstTime' },
{ data: 'lastTime' },
]
});

}

0 comments on commit f1294db

Please sign in to comment.
You can’t perform that action at this time.