Skip to content
GitLab
Commit 24a93d3f authored by vehnem's avatar vehnem
Browse files

cards: download & logs ui of charts and tables

parent a2e960ac
Hide whitespace changes
Inline Side-by-side
dashboard/src/main/webapp/index.html
View file @ 24a93d3f
......@@ -42,11 +42,13 @@
<div class="row">
<div class="col-md-8">
<h2 class="text-light pl-5 pt-1">DASHBOARD</h2>
</div>
<div class="col-md-2">
<!-- <div class="disclaimer bg-danger">
<h2 class="text-light text-center pt">Disclaimer</h2>
</div> -->
</div>
<div class="col-md-3">
<!-- rest of top-nav -->
</div>
<div class="col-md-1">
<div class="col-md-2">
</div>
</div>
</div>
......@@ -54,8 +56,14 @@
</div>
</div>
</div>
</nav>
</nav>
<!-- disclaimer-modal-->
<div class="modal">
</div>
<!-- end of disclaimer-modal -->
<!-- content -->
<div id="content">
......@@ -78,22 +86,30 @@
first of each month.
</p>
</div>
<!-- <div class="col-sm-5 p-3" id="placeholder"></div> -->
<div class="col-sm-5 p-3" id="placeholder">
<h2 class="text-info">TODO</h2>
<ul>
<li>rerelease</li>
<li>link to databus</li>
<li>other download chart</li>
</ul>
</div>
<!-- end of grid -->
</div>
</div>
</div>
</div>
</section>
<!-- end of disclaimer -->
<!-- end of disclaimer -->
<!-- total-stats -->
<section id="total">
<div class="container-fluid">
<div class=row>
<div class="col-lg-10 ml-auto">
<div class="row px-5 mt-3">
<div class="col-sm-12 p-3">
<h1>Aggregated Release Stats</h1>
<div class="row px-5">
<div class="col-sm-12 pb-3">
<h1 class="text-dark">Aggregated Release Stats</h1>
</div>
<!-- grid -->
<div class="col-sm-4 p-3">
......@@ -143,7 +159,7 @@
<div class="row px-5">
<div class="col-sm-12 myHR mt-5"></div>
<div class="col-sm-12 p-3 mt-4">
<h1 class="text-dark">Release $DATE (latest)</h1>
<h1 class="text-dark" id="version-text">Release $DATE (latest)</h1>
</div>
</div>
</div>
......@@ -171,17 +187,26 @@
</div>
<h6>Generic</h6>
<div class="progress">
<div class="progress-bar progress-bar-striped font-weight-bold bg-info" style="width: 67%;">67%
<div class="progress-bar progress-bar-striped font-weight-bold bg-info" style="width: 67%;">
67%
</div>
</div>
<h6>Wikidata</h6>
<div class="progress">
<div class="progress-bar progress-bar-striped font-weight-bold bg-warning" style="width: 33%;">33%
<div class="progress-bar progress-bar-striped font-weight-bold bg-warning" style="width: 33%;">
33%
</div>
</div>
</div>
<h6>Text</h6>
<div class="progress">
<div class="progress-bar progress-bar-striped font-weight-bold bg-danger" style="width: 10%;">
Step 0/7
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end of grid -->
</div>
</div>
</div>
......@@ -202,10 +227,18 @@
<div class="col-sm-6 p-3">
<div class="card">
<div class="card-body">
<h4>Medawiki Dump Download Completeness</h4>
<p>
Checks whether the input of MARVIN was downloaded correctly from dumps.wikimedia.org
</p>
<h4>Medawiki Dump Download Completeness</h4>
<div class="row">
<div id="mappings-downloads" class="col-sm-8" style="height: 250px;">
Download Chart
</div>
<div class="col-sm-4">
<h6 class="text-danger">Missing files </h6>
<p>
<strong>TODO</strong> List of missing languages
</p>
</div>
</div>
</div>
</div>
</div>
......@@ -213,9 +246,15 @@
<div class="card">
<div class="card-body">
<h4>Downloadable Log Files</h4>
<p>
n/a - not loaded, unzipped - in progress, zipped - done (but success unclear)
</p>
<table id="mappings-logs" data-pagination="true"
data-page-size="4" class="table">
<thead>
<th data-field="state">State</th>
<th data-field="filename">Log File</th>
<th data-field="description">Description</th>
</thead>
</table>
</div>
</div>
</div>
......@@ -223,9 +262,9 @@
<div class="card">
<div class="card-body">
<h4>Completeness Check on Databus</h4>
<p>
<div id="">
Integration Query results
</p>
</div>
</div>
</div>
</div>
......@@ -333,15 +372,8 @@
</section>
<!-- end of wikidata -->
</div>
<!-- end of content -->
<script>
/* anchor scroll offset */
window.addEventListener("hashchange", function () {
this.console.log("#")
window.scrollTo(window.scrollX, window.scrollY - 80);
});
</script>
<!-- end of content -->
<!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script> -->
......@@ -352,5 +384,7 @@
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="js/dashboard.js"></script>
</body>
\ No newline at end of file
dashboard/src/main/webapp/js/dashboard.js
View file @ 24a93d3f
/* anchor scroll */
/* anchor scroll offset */
window.addEventListener("hashchange", function () {
this.console.log("#")
window.scrollTo(window.scrollX, window.scrollY + 100);
window.scrollTo(window.scrollX, window.scrollY - 80);
});
// var [publisher, group, version] = window.location.pathname.split("/").slice(1,4)
var [publisher, group, version] = window.location.pathname.split("/").slice(1,4)
var showTotalStats = publisher ? false : true
/** TOTAL **/
// TODO
document.getElementById("groupVersion").innerHTML = showTotalStats ? "Total Statistics" : group+"/"+version
/** RELASE **/
/* version */
const urlParams = new URLSearchParams(window.location.search)
var version = urlParams.get('version')
version = version ? version : getLatestVersion()
document.getElementById("version-text").innerHTML = "Release: " + (version ? version : "2020.X.X") +" (todo fetch)"
/* overall */
/** mappings **/
/* mappings-download */
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['State', 'Number'],
['Finished', 30],
['Waiting', 9],
['Mssing', 1]
]);
var options = {
colors:['#28a745','#17a2b8','#dc3545'],
pieHole: 0.5,
pieSliceText: 'value',
};
var chart = new google.visualization.PieChart(document.getElementById('mappings-downloads'));
chart.draw(data, options);
}
/* mappings logs */
// n/a - not loaded,
// unzipped - in progress,
// zipped - done (but success unclear)
var $table = $('#mappings-logs')
$(function() {
var data = [
{
'filename': '<a href="#">preprocess.log</a>',
'description': 'preprocessing (todo explain)',
'state' : '<span class="text-warning">RUN</span>'
},
{
'filename': '<a href="#">extraction.mappings.log</a>',
'description': 'process of DIEF',
'state' : '<span class="text-success">DONE</span>'
},
{
'filename': '<a href="#">dump.log</a>',
'description': 'download of latest dumps',
'state' : '<span class="text-success">DONE</span>'
},
{
'filename': '<a href="#">ontology.log</a>',
'description': 'download of latest ontology',
'state' : '<span class="text-success">DONE</span>'
},
{
'filename': '<a href="#">mappings.log</a>',
'description': 'download of latest mappings',
'state' : '<span class="text-success">DONE</span>'
},
{
'filename': 'deploy.log',
'description': 'deploy on databus',
'state' : '<span class="text-danger">WAIT</span>'
}
]
$table.bootstrapTable({data: data})
})
/* mappings completness */
/* generic */
/* wikidata */
/** FUNCTIONS **/
/* get latest version from api or from date*/
function getLatestVersion() {
// TODO
return "2020.05.01"
}
dashboard/src/main/webapp/stylesheets/style.css
View file @ 24a93d3f
/*
colors:
dbpedia.org nav: #2B4253
databus.dbpedia.org bg: #4b6584
dbpedia.org navbar: #2B4253
databus.dbpedia.org background: #4b6584
*/
.nav-top {
background-color: #2B4253;
}
......@@ -43,9 +44,18 @@ colors:
}
}
/* nav release version */
/* Disclaimer button */
.disclaimer {
margin-top: 0.3vh;
font-weight: bold;
color: white;
border-radius: 20px;
width: auto;
height: auto;
text-align: center;
}
/* nav release version */
.pagination-info {
display: none;
......@@ -73,15 +83,9 @@ colors:
font-weight: lighter;
}
/* <div class="container-fluid">
<div class="row">
<!-- sidebar -->
<div class="col-lg-3 sidebar">
<a href="#" class="navbar-band text-white d-block mx-auto text-center">Dashboard</a>
</div>
<!-- end of sidebar -->
<div class="col-lg-9">
</div>
</div>
</div> */
\ No newline at end of file
/* chats */
#mappings-downloads {
width: 100%;
height: 100%;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment