Skip to content

Commit

Permalink
File cart and monitoring added
Browse files Browse the repository at this point in the history
  • Loading branch information
@slanzi00
slanzi00 committed Sep 13, 2023
1 parent 37551f7 commit cdc4c6c
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 86 deletions.
156 changes: 86 additions & 70 deletions src/main/resources/templates/jetty-dir.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,39 +15,28 @@ <h3 th:text="${title}" class="font-weight-normal">Directory</h3>

<div class="page-header"></div>

<nav class="navbar">
<a class="navbar-brand"></a>
<form class="form-inline">
<input class="mr-sm-2 search form-control" id="searchInput" type="search" placeholder="Search"
aria-label="Search">
<script>
$(document).ready(() => {
$('#searchInput').on('input', function () {
var searchText = $(this).val().toLowerCase();
$('.jd-row').each(function () {
var rowData = $(this).text().toLowerCase();
if (rowData.indexOf(searchText) === -1) {
$(this).hide();
} else {
$(this).show();
}
});
});
});
</script>
<button type="button" class="btn btn-link"
style="text-decoration: none;right: 100px;border-right-width: 0px;padding-right: 0px;padding-left: 20px;"
data-toggle="modal" data-target="#exampleModal">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor"
class="bi bi-cart align-middle" viewBox="0 0 16 16" style="text-align: center;">
<path
d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
</svg>
<span class="position-relative start-100 badge cart-badge"
style="color: currentColor; top: -2px; right: 53%; font-size: 8px;">
</span>
</button>
</form>
<nav class="navbar navbar-expand-lg navbar-light bg-light p-2">
<div class="container-fluid">
<a class="navbar-brand"></a>

<ul class="navbar-nav d-flex flex-row">
<button class="btn btn-link position-relative sw-cart-modal-button float-right" data-bs-toggle="modal"
data-bs-target="#cartModal" style="text-decoration: none;" onclick="showCartTable()">
<i class="bi bi-cart icon-size"></i>
<span
class="position-relative translate-middle cart-badge border border-1 border-primary rounded-pill"></span>
</button>

<button class="btn btn-link position-relative sw-modal-button float-right" data-bs-toggle="modal"
data-bs-target="#cloudModal" style="text-decoration: none;" onclick="manageMonitoring()">
<i class="bi bi-cloud icon-size"></i>
</button>

<form class="d-flex">
<input class="form-control me-2" id="searchInput" type="search" placeholder="Search" aria-label="Search">
</form>
</ul>
</div>
</nav>

<table id="jetty-dir-table" class="table jetty-dir-table file-table" data-toggle="table" data-pagination="true"
Expand All @@ -68,31 +57,30 @@ <h3 th:text="${title}" class="font-weight-normal">Directory</h3>
<tr class="jd-row" th:each="r: ${resources}" scope="row">
<div value="${r.encodedName}"></div>
<td>
<svg th:if="${r.isDirectory}" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-folder2" viewBox="0 0 18 18">
<path
d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-9zM2.5 3a.5.5 0 0 0-.5.5V6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5zM14 7H2v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V7z" />
</svg>
<svg th:unless="${r.isDirectory}" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-file-text" viewBox="0 0 18 18">
<path
d="M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zM5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1H5z" />
<path
d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z" />
</svg>
<i th:if="${r.isDirectory}" class="bi bi-folder"></i>
<i th:unless="${r.isDirectory}" class="bi bi-file-text"></i>
&nbsp;
<a href="filename" th:href="${r.path}" th:text="${r.name}">fake</a>
<div th:if="${r.isRecallInProgress}" class="spinner-border float-right spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
<a href="filename"
th:if="${r.latency == T(org.italiangrid.storm.webdav.server.servlet.resource.FileLatency).online || r.isDirectory}"
th:href="${r.path}" th:text="${r.name}">fake</a>
<a th:unless="${r.latency == T(org.italiangrid.storm.webdav.server.servlet.resource.FileLatency).online || r.isDirectory}"
th:text="${r.name}">fake</a>
<div class="float-right">
<i th:if="${r.isRecallInProgress}" class="bi bi-arrow-clockwise"></i>
&nbsp;
<i th:if="${r.latency == T(org.italiangrid.storm.webdav.server.servlet.resource.FileLatency).nearline}"
class="bi bi-voicemail"></i>
</div>

</td>

<td th:text="${#dates.formatISO(r.lastModificationTime)}">
Last modification time
</td>
<td th:text="${r.sizeInBytes}">Size in bytes</td>
<td>
<button th:if="!${r.isDirectory}" class="btn btn-outline-primary btn-sm add-to-queue-button" th:onclick="$(this).attr('id', CryptoJS.SHA256([[${r.path}]]).toString(CryptoJS.enc.Hex));
<button
th:if="${r.latency == T(org.italiangrid.storm.webdav.server.servlet.resource.FileLatency).nearline && !r.isDirectory}"
class="btn btn-outline-primary btn-sm add-to-queue-button" th:onclick="$(this).attr('id', CryptoJS.SHA256([[${r.path}]]).toString(CryptoJS.enc.Hex));
addFileToCart({
name: [[${r.name}]],
path: [[${r.path}]],
Expand All @@ -108,48 +96,76 @@ <h3 th:text="${title}" class="font-weight-normal">Directory</h3>
</tbody>
</table>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal fade" id="cartModal" tabindex="-1" aria-labelledby="cartModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="bi bi-cart align-middle" viewBox="0 0 20 20" style="text-align: center;">
<path
d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
</svg> &nbsp; Selected files
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h1 class="modal-title fs-5" id="cartModalLabel"><i class="bi bi-cart"></i>
&nbsp; Selected files</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table table-bordered" data-toggle="true">
<thead>
<tr th:if="${!resources.empty}">
<th data-sortable="true" data-field="name" scope="col">Name</th>
<th data-sortable="true" data-field="size" scope="col">
Size (in bytes)
</th>
<th data-sortable="true" data-field="name" scope="col">Path</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="modal-table-body">
<tbody class="modal-cart-table-body">
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" style="text-decoration: none;" onclick="clearCart()">&times;
Remove all files</button>
<button type="button" class="btn btn-outline-success" onclick="makePost()">&#9655 Submit</button>
<button type="button" class="btn btn-outline-success"
onclick="makePost(); $('#cartModal').modal('hide');"><i class="bi bi-play"></i>
Submit</button>
</div>
</div>
</div>
</div>
<div class="post-result"></div>

<div class="modal modal-xl" id="cloudModal" tabindex="-1" aria-labelledby="cloudModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5 flex-row position-relative" id="cloudModalLabel"><i class="bi bi-cloud"></i>
StoRM Tape REST API -
Monitoring
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
style="margin-left: 729px;"></button>
</div>
<div class="modal-body">
<div class="row align-items-center">
<div class="col-4 h5" style="padding-left: 56px;"> Request ID</div>
<div class="col-3 h5" style="padding-left: 73px;"> Created</div>
<div class="col-3 h5" style="padding-left: 105px;"> Submitted</div>
</div>
<div class="accordion" id="accordionMonitoring">

</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" onclick="manageMonitoring()">
<i class="bi bi-arrow-clockwise"></i>
Refresh
</button>
</div>
</div>
</div>
</div>
<div>
<div class="d-flex justify-content-center p-3">
<a class="link-primary">online.files</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i
class="bi bi-voicemail"></i>&nbsp; <p class="figure-caption">file is on
tape</p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="bi bi-arrow-clockwise"></i>&nbsp; <p
class="figure-caption">recall in progress</p>
</div>
</div>
</section>

</body>

</html>
27 changes: 11 additions & 16 deletions src/main/resources/templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,14 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="/assets/css/storm-webdav.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/bootstrap-table.min.css" />

</head>

<body class="d-flex flex-column h-100">
<!-- Javascript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.js"></script>
<script th:inline="javascript" src="/assets/js/storm-webdav-mycart.js"></script>

<main class="flex-shrink-0" role="main">
<div class="container">
<header>
Expand Down Expand Up @@ -58,6 +46,13 @@ <h1 class="h3 mb-3 font-weight-normal text-center text-muted" th:text="${storm}"
</div>
</div>
</footer>
<!-- Javascript -->
<script src="/assets/js/jquery-3.7.0.js"></script>
<script src="/assets/js/popper.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-table.min.js"></script>
<script src="/assets/js/crypto-js.js"></script>
<script src="/assets/js/storm-webdav-mycart.js"></script>
</body>

</html>

0 comments on commit cdc4c6c

Please sign in to comment.