<!DOCTYPE html>
<html>

	<head>
		<title>Metadata Store Manager</title>
		<link rel="stylesheet" href="common/css/bootstrap.cerulean.min.css" />
		<link rel="stylesheet" href="common/css/fontawesome-all.min.css" />
	</head>
	
	<style>
		td {
			vertical-align: middle !important;
		}
	</style>
	
	<body ng-app="mdstoreManagerApp" ng-controller="mdstoreManagerController">
		<div class="container-fluid">
			<div class="row">	
				<div class="col">
					<h1>Metadata Store Manager</h1>
			
					<hr />
					<a href="./apidoc" target="_blank">API documentation</a>
					<hr />
					<a href="javascript:void(0)" data-toggle="modal" data-target="#newMdstoreModal">create a new mdstore</a>
					<hr />
					
					<p ng-show="mdstores.length > 0">
						<input type="text" class="form-control form-control-sm" ng-model="mdstoreFilter" placeholder="Filter..."/>
						<br/>
						<span class="text-muted"><b>Number of mdstores:</b> {{(mdstores | filter:mdstoreFilter).length}}</span>
					</p>
					<hr ng-show="mdstores.length > 0" />
					<p>
						<button class="btn btn-sm btn-primary" ng-click="reload()"><i class="fas fa-redo"></i> refresh</button>
					</p>
					<div class="card mt-4" ng-repeat="md in mdstores | filter:mdstoreFilter">
						<div class="card-header text-white bg-primary small"><span class="badge badge-info mr-2">mdstore {{$index+1}}</span> {{md.id}}</div>
												
						<table class="table table-striped table-sm small">
							<tr>
								<th class="col-xs-4">Format / Layout / Interpretation</th>
								<td class="col-xs-8">{{md.format}} / {{md.layout}} / {{md.interpretation}}</td>
							</tr><tr>
								<th class="col-xs-4">Datasource</th>
								<td class="col-xs-8">
									<span ng-if="md.datasourceName">
										{{md.datasourceName}}<br />
										<small>
											<b>id: </b>{{md.datasourceId}}
											<b>api: </b>{{md.apiId}}
										</small>
									</span>
								</td>
							</tr><tr>
								<th class="col-xs-4">Creation Date</th>
								<td class="col-xs-8" title="{{md.creationDate}}">{{md.creationDate | date:"fullDate"}}</td>
							</tr><tr>
								<th class="col-xs-4">Last Update</th>
								<td class="col-xs-8" title="{{md.lastUpdate}}">{{md.lastUpdate | date:"fullDate"}}</td>
							</tr><tr>
								<th class="col-xs-4">Size</th>
								<td class="col-xs-8">{{md.size}}</td>
							</tr><tr>
								<th class="col-xs-4">HDFS Path</th>
								<td class="col-xs-8">{{md.hdfsPath}}</td>
							</tr><tr>
								<th class="col-xs-4">Versions</th>
								<td class="col-xs-8">
									<a href="javascript:void(0)" ng-click="listVersions(md.id, md.currentVersion)" data-toggle="modal" data-target="#versionsModal" title="Current: {{md.currentVersion}}">{{md.numberOfVersions}} version(s)</a> /
									<a href="javascript:void(0)" ng-click="prepareVersion(md.id, md.currentVersion)" data-toggle="modal" data-target="#versionsModal">prepare new</a>
								</td>
							</tr>
						</table>
						<div class="card-footer">
							<button class="btn btn-sm btn-danger" ng-click="deleteMdstore(md.id)">delete</button>
							
							<div class="float-right">
								<a href="./mdrecords/{{md.id}}/50" class="btn btn-sm btn-primary" target="_blank">inspect</a>
								<button class="btn btn-sm btn-outline-warning dropdown-toggle" disabled="disabled" ng-show="zeppelinTemplates.length == 0">zeppelin <span class="caret"></span></button>
								<div class="btn-group" ng-show="zeppelinTemplates.length > 0">
									<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/{{md.id}}/{{t}}" target="_blank" ng-repeat="t in zeppelinTemplates">{{t}}</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		
		<br/><br/><br/><br/>
		
		<!-- Modals -->
		
		<div class="modal fade" tabindex="-1" id="newMdstoreModal">
			<div class="modal-dialog modal-lg">
	 			<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">New Mdstore</h4>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label>Format</label>
								<input type="text" class="form-control" placeholder="oai_dc" ng-model="newMdFormat" />
							</div>
							<div class="form-group">
								<label>Layout</label>
								<input type="text" class="form-control" placeholder="store" ng-model="newMdLayout" />
							</div>
							<div class="form-group">
								<label>Interpretation</label>
								<input type="text" class="form-control" placeholder="native" ng-model="newMdInterpretation" />
							</div>
							<div class="form-group">
								<label>Datasource Name</label>
								<input type="text" class="form-control" placeholder="" ng-model="newMdDsName" />
							</div>
							<div class="form-group">
								<label>Datasource ID</label>
								<input type="text" class="form-control" placeholder="" ng-model="newMdDsId" />
							</div>
							<div class="form-group">
								<label>Datasource API</label>
								<input type="text" class="form-control" placeholder="" ng-model="newMdApiId" />
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="newMdstore(newMdFormat, newMdLayout, newMdInterpretation, newMdDsName, newMdDsId, newMdApiId)">Submit</button>
					</div>
				</div>
			</div>
		</div>
		

		<div class="modal fade" tabindex="-1" id="versionsModal">
			<div class="modal-dialog modal-xl">
	 			<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">Versions</h4>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<div class="checkbox text-right">
							<label>
								<input type="checkbox" ng-model="forceVersionDelete" /> Force delete 
							</label>
						</div>
						<table class="table table-condensed small">
							<thead>
								<tr>
									<th>ID</th>
									<th class="text-center">Read Count</th>
									<th class="text-center">Last Update</th>
									<th class="text-right">Size</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="v in versions">
									<td>
										<i class="fas fa-pen" ng-if="v.writing" title="writing..."></i> <span ng-class="{'text-success': v.current}">{{v.id}}</span><br />
										<span class="small"><b>Path:</b> {{v.hdfsPath}}</span><br/>
										<a class="btn btn-sm btn-info" href="./mdrecords/{{v.id}}/50" target="_blank">inspect</a>
										<button class="btn btn-sm btn-primary" ng-show="v.writing" ng-click="commitVersion(v.id)">commit</button>
										<button class="btn btn-sm btn-warning" ng-show="v.writing" ng-click="abortVersion(v.id)">abort</button>
										<button class="btn btn-sm btn-danger" ng-disabled="v.current" ng-click="deleteVersion(v.id, forceVersionDelete)">delete</button>
									</td>
									<td class="text-center">
										{{v.readCount}}
										<button class="btn btn-sm btn-warning" ng-click="resetReading(v.id)" ng-disabled="v.readCount == 0">reset</button>	
									</td>
									<td class="text-center" title="{{v.lastUpdate}}">{{v.lastUpdate | date:"MMM dd, yyyy 'at' HH:mm"}}</td>
									<td class="text-right">{{v.size}}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
					</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="mdstoremanager.js"></script>
</html>