<!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 mdId() {
			return /*[[${mdId}]]*/ '';
		}	
			
		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>

					<hr />
					<div ng-show="zeppelinTemplates.length > 0">
						<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>
						<hr />
					</div>
					
					<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">
							<span ng-show="rec.id">{{rec.id}}</span>
							<span ng-hide="rec.id">the record is unreadable</span>
						</div>
						<div class="card-body" ng-hide="rec.id">Invalid record format</div>
						<table class="table table-condensed table-striped small" ng-show="rec.id">
							<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" ng-show="rec.id">
							<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.mdId = mdId();
			$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>
