mirror of
https://gitee.com/milvus-io/milvus.git
synced 2026-01-05 10:22:41 +08:00
112 lines
4.1 KiB
HTML
112 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Milvus WebUI - Collections</title>
|
|
<meta name="description" content="Milvus Management WebUI">
|
|
<link href="./static/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="./static/css/style.css" rel="stylesheet">
|
|
<script src="./static/js/jquery.min.js"></script>
|
|
<script src="./static/js/bootstrap.min.js"></script>
|
|
<script src="./static/js/bootstrap.bundle.min.js"></script>
|
|
<script src="./static/js/render.js"></script>
|
|
<script src="./static/js/common.js"></script>
|
|
<script src="./static/js/mockdata.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div id="header"></div>
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h2>
|
|
Database
|
|
</h2>
|
|
<table id="database" class="table table-hover">
|
|
</table>
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<p id="db_totalCount"></p>
|
|
<p id="dbPaginationControls"></p>
|
|
</div>
|
|
|
|
<h2>
|
|
Collection
|
|
</h2>
|
|
|
|
<!-- Navigation Tabs -->
|
|
<ul class="nav nav-tabs" id="componentTabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="coll-base-stats-tab" data-toggle="tab" href="#coll-base-stats" role="tab" aria-controls="coll-base-stats" aria-selected="true">Base </a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="coll-request-tab" data-toggle="tab" href="#coll-request-metrics" role="tab" aria-controls="coll-request-metrics" aria-selected="false">Requests</a>
|
|
</li>
|
|
|
|
<!-- Search Input -->
|
|
<li class="nav-item ml-auto">
|
|
<input type="text" class="form-control" placeholder="Search database..." id="databaseSearch" oninput="searchCollections()">
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="componentTabsContent">
|
|
<div class="tab-pane fade show active" id="coll-base-stats" role="tabpanel" aria-labelledby="coll-base-stats-tab">
|
|
<table id="collectionList" class="table table-hover"></table>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="coll-request-metrics" role="tabpanel" aria-labelledby="coll-request-tab">
|
|
<table id="collectionRequests" class="table table-hover mt-3"></table>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<p id="collection_totalCount"></p>
|
|
<p id="collectionPaginationControls"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2"></div>
|
|
</div>
|
|
<div id="footer"></div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
$('#header').load("header.html");
|
|
$('#footer').load("footer.html");
|
|
});
|
|
|
|
function searchCollections() {
|
|
const searchTerm = document.getElementById('databaseSearch').value;
|
|
let dbName = 'default';
|
|
if (searchTerm !== '') {
|
|
dbName = searchTerm;
|
|
}
|
|
fetchCollections(dbName);
|
|
}
|
|
searchCollections()
|
|
|
|
// TODO - Implement the following functions and support search with db name
|
|
// fetchData(MILVUS_URI + "/_collection/metrics", collectionRequest)
|
|
// .then(data => {
|
|
// collectionRequestsData = data;
|
|
// renderCollectionRequests(startPage, paginationSize);
|
|
// })
|
|
// .catch(error => {
|
|
// handleError(error);
|
|
// });
|
|
|
|
fetchData(MILVUS_URI + "/databases", databases)
|
|
.then(data => {
|
|
databaseData = data;
|
|
renderDatabases(startPage, paginationSize)
|
|
})
|
|
.catch(error => {
|
|
handleError(error);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |