alessia.bardi
/
dnet-hadoop
forked from D-Net/dnet-hadoop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui

This commit is contained in:
Michele Artini 2019-03-25 11:54:18 +01:00
parent 6f813fbc8e
commit b1200b6f46
2 changed files with 119 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
dhp-applications/dhp-mdstore-manager-app/src/main/resources/static/index.html
View File

@ -11,6 +11,12 @@
<script src="./js/mdstoremanager.js"></script> <script src="./js/mdstoremanager.js"></script>
</head> </head>
<style>
td {
vertical-align: middle !important;
}
</style>
<body ng-app="mdstoreManagerApp" ng-controller="mdstoreManagerController"> <body ng-app="mdstoreManagerApp" ng-controller="mdstoreManagerController">
<div class="row"> <div class="row">
@ -18,22 +24,34 @@
<h1>Metadata Store Manager</h1> <h1>Metadata Store Manager</h1>
<hr /> <hr />
<div>
<a href="/doc" target="_blank">API documentation</a>
</div>
<table class="table table-striped"> <hr />
<table class="table table-striped small">
<thead> <thead>
<tr> <tr>
<th class="col-xs-3">ID</th> <th class="col-xs-4">ID</th>
<th class="col-xs-2">Format / Layout / Interpretation</th> <th class="col-xs-2">Format / Layout / Interpretation</th>
<th class="col-xs-3">Datasource</th> <th class="col-xs-3">Datasource</th>
<th class="col-xs-1 text-center">Last Update</th> <th class="col-xs-1 text-center">Last Update</th>
<th class="col-xs-1 text-right">Size</th> <th class="col-xs-1 text-right">Size</th>
<th class="col-xs-1 text-right">Versions</th> <th class="col-xs-1 text-right">Versions</th>
<th class="col-xs-1 text-right">Operations</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr>
<td colspan="6">
<a href="javascript:void(0)" data-toggle="modal" data-target="#newMdstoreModal">create a new mdstore</a>
</td>
</tr>
<tr ng-repeat="md in mdstores"> <tr ng-repeat="md in mdstores">
<td>{{md.id}}</td> <td><button class="btn btn-xs btn-danger" ng-click="deleteMdstore(md.id)">delete</button> {{md.id}}</td>
<td>{{md.format}} / {{md.layout}} / {{md.interpretation}}</td> <td>{{md.format}} / {{md.layout}} / {{md.interpretation}}</td>
<td> <td>
<span ng-if="md.datasourceName"> <span ng-if="md.datasourceName">
@ -47,17 +65,59 @@
<td class="text-center" title="{{md.lastUpdate}}">{{md.lastUpdate | date:"MMM dd, yyyy 'at' HH:mm"}}</td> <td class="text-center" title="{{md.lastUpdate}}">{{md.lastUpdate | date:"MMM dd, yyyy 'at' HH:mm"}}</td>
<td class="text-right">{{md.size}}</td> <td class="text-right">{{md.size}}</td>
<td class="text-right"> <td class="text-right">
<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="listVersions(md.id, md.currentVersion)" data-toggle="modal" data-target="#versionsModal" title="Current: {{md.currentVersion}}">{{md.numberOfVersions}} version(s)</a> /
</td> <a href="javascript:void(0)" ng-click="prepareVersion(md.id, md.currentVersion)" data-toggle="modal" data-target="#versionsModal">new</a>
<td class="text-right">
<button class="btn btn-sm btn-primary" ng-click="prepareVersion(md.id, md.currentVersion)" data-toggle="modal" data-target="#versionsModal">new version</button>
<button class="btn btn-sm btn-danger" ng-click="deleteMdstore(md.id)">delete</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="modal fade" tabindex="-1" id="newMdstoreModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">New Mdstore</h4>
</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-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn 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 fade" tabindex="-1" id="versionsModal">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
@ -72,30 +132,28 @@
<input type="checkbox" ng-model="forceVersionDelete" /> Force delete <input type="checkbox" ng-model="forceVersionDelete" /> Force delete
</label> </label>
</div> </div>
<small> <table class="table table-condensed small">
<table class="table table-condensed"> <thead>
<thead> <tr>
<tr> <th>ID</th>
<th>ID</th> <th class="text-center">Read Count</th>
<th class="text-center">Read Count</th> <th class="text-center">Last Update</th>
<th class="text-center">Last Update</th> <th class="text-right">Size</th>
<th class="text-right">Size</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr ng-repeat="v in versions">
<tr ng-repeat="v in versions"> <td ng-class="{'text-success': v.current}"><span class="glyphicon glyphicon-pencil" ng-if="v.writing" title="writing..."></span> {{v.id}}</td>
<td ng-class="{'text-success': v.current}"><span class="glyphicon glyphicon-pencil" ng-if="v.writing" title="writing..."></span> {{v.id}}</td> <td class="text-center">{{v.readCount}}</td>
<td class="text-center">{{v.readCount}}</td> <td class="text-center" title="{{v.lastUpdate}}">{{v.lastUpdate | date:"MMM dd, yyyy 'at' HH:mm"}}</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>
<td class="text-right">{{v.size}}</td> <td class="text-right">
<td class="text-right"> <button class="btn btn-sm btn-primary" ng-if="v.writing" ng-click="commitVersion(v.id)">commit</button>
<button class="btn btn-sm btn-primary" ng-if="v.writing" ng-click="commitVersion(v.id)">commit</button> <button class="btn btn-sm btn-danger" ng-disabled="v.current" ng-click="deleteVersion(v.id, forceVersionDelete)">delete</button>
<button class="btn btn-sm btn-danger" ng-disabled="v.current" ng-click="deleteVersion(v.id, forceVersionDelete)">delete</button> </td>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</small>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

43
dhp-applications/dhp-mdstore-manager-app/src/main/resources/static/js/mdstoremanager.js
View File

@ -6,29 +6,30 @@ app.controller('mdstoreManagerController', function($scope, $http) {
$scope.forceVersionDelete = false; $scope.forceVersionDelete = false;
$scope.reload = function() { $scope.reload = function() {
$http.get('/mdstores/').success(function(data) { $http.get('/mdstores/?' + $.now()).success(function(data) {
$scope.mdstores = data; $scope.mdstores = data;
}).error(function() { }).error(function() {
alert("error"); alert("error");
}); });
}; };
$scope.listVersions = function(mdId, current) { $scope.newMdstore = function(format, layout, interpretation, dsName, dsId, apiId) {
$scope.versions = []; var url = '/mdstores/new/' + encodeURIComponent(format) + '/' + encodeURIComponent(layout) + '/' + encodeURIComponent(interpretation);
$http.get('/mdstores/mdstore/' + mdId + '/versions').success(function(data) { if (dsName || dsId || apiId) {
angular.forEach(data, function(value, key) { url += '?dsName=' + encodeURIComponent(dsName) + '&dsId=' + encodeURIComponent(dsId) + '&apiId=' + encodeURIComponent(apiId);
value.current = (value.id == current); }
}); $http.put(url).success(function(data) {
$scope.versions = data;
$scope.reload();
}).error(function() { }).error(function() {
alert("error"); alert("error");
}); });
}; };
$scope.deleteMdstore = function(mdId) { $scope.deleteMdstore = function(mdId) {
if (confirm("Are you sure ?")) { if (confirm("Are you sure ?")) {
$http.delete('/mdstores/mdstore/' + mdId).success(function(data) { $http.delete('/mdstores/mdstore/' + mdId).success(function(data) {
$scope.reload(); $scope.reload, 500;
}).error(function() { }).error(function() {
alert("error"); alert("error");
}); });
@ -37,19 +38,18 @@ app.controller('mdstoreManagerController', function($scope, $http) {
$scope.prepareVersion = function(mdId, currentVersion) { $scope.prepareVersion = function(mdId, currentVersion) {
$scope.versions = []; $scope.versions = [];
$http.get('/mdstores/mdstore/' + mdId + '/newVersion').success(function(data) { $http.get('/mdstores/mdstore/' + mdId + '/newVersion?' + $.now()).success(function(data) {
$scope.reload(); $scope.reload();
$scope.listVersions(mdId, currentVersion); $scope.listVersions(mdId, currentVersion);
}).error(function() { }).error(function() {
alert("error"); alert("error");
}); });
}; };
$scope.commitVersion = function(versionId) { $scope.commitVersion = function(versionId) {
var size = parseInt(prompt("New Size", "0")); var size = parseInt(prompt("New Size", "0"));
if (size >= 0) { if (size >= 0) {
$http.get("/mdstores/version/" + versionId + "/commit/" + size).success(function(data) { $http.get("/mdstores/version/" + versionId + "/commit/" + size + '?' + $.now()).success(function(data) {
angular.forEach($scope.versions, function(value, key) { angular.forEach($scope.versions, function(value, key) {
if (value.id == versionId) { if (value.id == versionId) {
value.current = true; value.current = true;
@ -65,6 +65,18 @@ app.controller('mdstoreManagerController', function($scope, $http) {
} }
}; };
$scope.listVersions = function(mdId, current) {
$scope.versions = [];
$http.get('/mdstores/mdstore/' + mdId + '/versions?' + $.now()).success(function(data) {
angular.forEach(data, function(value, key) {
value.current = (value.id == current);
});
$scope.versions = data;
}).error(function() {
alert("error");
});
};
$scope.deleteVersion = function(versionId, force) { $scope.deleteVersion = function(versionId, force) {
if (confirm("Are you sure ?")) { if (confirm("Are you sure ?")) {
var url = '/mdstores/version/' + versionId; var url = '/mdstores/version/' + versionId;
@ -78,6 +90,7 @@ app.controller('mdstoreManagerController', function($scope, $http) {
} }
}); });
$scope.versions = nv; $scope.versions = nv;
$scope.reload();
}).error(function() { }).error(function() {
alert("error"); alert("error");
}); });