200 lines
4.8 KiB
HTML
200 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Metadata Inspector</title>
|
|
<link rel="stylesheet" href="../../css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="../../css/bootstrap-theme.min.css" />
|
|
<script src="../../js/jquery-1.12.3.min.js"></script>
|
|
<script src="../../js/bootstrap.min.js"></script>
|
|
<script src="../../js/angular.min.js"></script>
|
|
<script src="../../js/spin.js"></script>
|
|
</head>
|
|
|
|
<style>
|
|
td {
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
pre {
|
|
border: 0 !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.overlaydiv {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10000;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.grayRectangle {
|
|
position: absolute;
|
|
background-color: black;
|
|
opacity:0.6;
|
|
top: 30%;
|
|
left: 40%;
|
|
width: 20%;
|
|
height: 20%;
|
|
z-index: 100;
|
|
border-radius: 15px;
|
|
}
|
|
</style>
|
|
|
|
<script th:inline="javascript">
|
|
/*<![CDATA[*/
|
|
|
|
function versionId() {
|
|
return /*[[${versionId}]]*/ '';
|
|
}
|
|
|
|
function limit() {
|
|
return /*[[${limit}]]*/ 100;
|
|
}
|
|
|
|
/*]]>*/
|
|
</script>
|
|
|
|
<body ng-app="mdInspectorApp" ng-controller="mdInspectorController">
|
|
|
|
<div id="spinnerdiv" class="overlaydiv">
|
|
<span class="grayRectangle"><!--The spinner is added on loading here--></span>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<h1>Metadata Inspector</h1>
|
|
|
|
<br />
|
|
|
|
<table class="table table-condensed small">
|
|
<tr>
|
|
<th rowspan="3" class="col-xs-1">MdStore</th>
|
|
<th class="col-xs-2">ID</th>
|
|
<td class="col-xs-9"><span th:text="${mdId}" /></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>Format / Layout / Interpretation</th>
|
|
<td><span th:text="${format} + ' / ' + ${layout} + ' / ' + ${interpretation}" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Related Datasource</th>
|
|
<td><span th:text="${dsName}" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th rowspan="4">Version</th>
|
|
<th>ID</th>
|
|
<td>
|
|
<span th:if="${status} == 'current'" class="label label-success">current</span>
|
|
<span th:if="${status} == 'writing'" class="label label-warning">writing</span>
|
|
<span th:if="${status} == 'expired'" class="label label-danger">expired</span>
|
|
<span th:text="${versionId}" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Hdfs Path</th>
|
|
<td><span th:text="${path}" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Last Update</th>
|
|
<td><span th:text="${lastUpdate}" /></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Size</th>
|
|
<td><span th:text="${size}" /></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<hr />
|
|
<p ng-show="records.length > 0" class="text-primary text-center">
|
|
The display is limited to the first {{limit}} records
|
|
</p>
|
|
|
|
<br />
|
|
|
|
<div class="panel panel-primary" ng-repeat="rec in records | filter:recordsFilter">
|
|
<div class="panel-heading small">{{rec.id}}</div>
|
|
<table class="table table-condensed table-striped small">
|
|
<tr>
|
|
<th class="col-xs-4">Original Id</th>
|
|
<td class="col-xs-8">{{rec.originalId}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Collected on</th>
|
|
<td>{{rec.dateOfCollection | date:'medium'}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Transformed on</th>
|
|
<td>{{rec.dateOfTransformation | date:'medium'}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Provenance</th>
|
|
<td>{{rec.provenance}}</td>
|
|
</tr>
|
|
</table>
|
|
<div class="panel-body">
|
|
<span class="label label-success pull-right">{{rec.encoding}}</span>
|
|
<br />
|
|
<pre class="small">{{rec.body}}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<script lang="javascript">
|
|
// Spinner show/hide methods ~ Andrea Mannocci
|
|
var spinnerOpts = {
|
|
lines: 15,
|
|
length: 16,
|
|
width: 5,
|
|
radius: 25,
|
|
color: '#eeeeee',
|
|
className: 'spinner',
|
|
top: '40%'
|
|
};
|
|
|
|
var spinnerTarget = document.getElementById('spinnerdiv');
|
|
|
|
var spinner;
|
|
|
|
function showSpinner() {
|
|
spinner = new Spinner(spinnerOpts).spin(spinnerTarget);
|
|
spinnerTarget.style.visibility = 'visible';
|
|
}
|
|
|
|
function hideSpinner() {
|
|
spinnerTarget.style.visibility = 'hidden';
|
|
spinner.stop();
|
|
}
|
|
|
|
var app = angular.module('mdInspectorApp', []);
|
|
|
|
app.controller('mdInspectorController', function($scope, $http) {
|
|
$scope.records = [];
|
|
$scope.versionId = versionId();
|
|
$scope.limit = limit();
|
|
|
|
$scope.reload = function() {
|
|
showSpinner();
|
|
$http.get('../../mdstores/version/' + $scope.versionId + '/parquet/content/' + $scope.limit + '/?' + $.now()).success(function(data) {
|
|
hideSpinner();
|
|
$scope.records = data;
|
|
}).error(function(err) {
|
|
hideSpinner();
|
|
alert('ERROR: ' + err.message);
|
|
});
|
|
};
|
|
|
|
$scope.reload();
|
|
|
|
});
|
|
</script>
|
|
|
|
</html>
|