226 lines
6.0 KiB
HTML
226 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Metadata Inspector</title>
|
|
<link rel="stylesheet" href="../../common/css/bootstrap.cerulean.min.css" />
|
|
</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">
|
|
<h1>Metadata Inspector</h1>
|
|
|
|
<br />
|
|
<div class="btn-group">
|
|
<button class="btn btn-sm btn-warning dropdown-toggle" data-toggle="dropdown">zeppelin <span class="caret"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<a class="dropdown-item small" href="./zeppelin/{{mdId}}/{{t}}" target="_blank" ng-repeat="t in zeppelinTemplates">{{t}}</a>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
|
|
<table class="table table-condensed table-sm 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="card mt-4" ng-repeat="rec in records | filter:recordsFilter">
|
|
<div class="card-header text-white bg-primary small">{{rec.id}}</div>
|
|
<table class="table table-condensed table-striped small">
|
|
<tr>
|
|
<th class="col-xs-3">Original Id</th>
|
|
<td class="col-xs-9">{{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 class="small">
|
|
<span ng-show="rec.provenance.datasourceName"><b>Datasource Name</b>: {{rec.provenance.datasourceName}}<br /></span>
|
|
<span ng-show="rec.provenance.datasourceId"><b>Datasource ID</b>: {{rec.provenance.datasourceId}}<br /></span>
|
|
<span ng-show="rec.provenance.nsPrefix"><b>Prefix</b>: {{rec.provenance.nsPrefix}}<br /></span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="card-body">
|
|
<span class="badge badge-success float-right">{{rec.encoding}}</span>
|
|
<br />
|
|
<pre class="small">{{rec.body}}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<script src="../../common/js/jquery.min.js"></script>
|
|
<script src="../../common/js/popper.min.js"></script>
|
|
<script src="../../common/js/bootstrap.min.js"></script>
|
|
<script src="../../common/js/angular.min.js"></script>
|
|
<script src="../../common/js/spin.js"></script>
|
|
|
|
<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.zeppelinTemplates = [];
|
|
|
|
$scope.reload = function() {
|
|
showSpinner();
|
|
$http.get('../../mdstores/version/' + $scope.versionId + '/parquet/content/' + $scope.limit + '/?' + $.now()).then(function(res) {
|
|
hideSpinner();
|
|
$scope.records = res.data;
|
|
|
|
angular.forEach($scope.records, function(map) {
|
|
map.provenance = JSON.parse(map.provenance);
|
|
});
|
|
}, function(res) {
|
|
hideSpinner();
|
|
alert('ERROR: ' + res.data.message);
|
|
});
|
|
};
|
|
|
|
$scope.obtainZeppelinTemplates = function() {
|
|
$http.get('../../zeppelin/templates?' + $.now()).then(function successCallback(res) {
|
|
$scope.zeppelinTemplates = res.data;
|
|
}, function errorCallback(res) {
|
|
alert('ERROR: ' + res.data.message);
|
|
});
|
|
};
|
|
|
|
$scope.reload();
|
|
$scope.obtainZeppelinTemplates();
|
|
});
|
|
</script>
|
|
|
|
</html>
|