Add endpoint monitor index page

This commit is contained in:
lucheng
2024-05-06 15:06:43 +08:00
parent 3ce4729ef1
commit c0d3fba2f2
3 changed files with 85 additions and 1 deletions

View File

@@ -1,7 +1,7 @@
port: 6123 port: 6123
ip: 192.168.123.254/24 ip: 192.168.123.254/24
bridge: br0 bridge: br0
log-level: debug log-level: info
web: web:
enable: true enable: true
port: 8000 port: 8000

View File

@@ -45,8 +45,12 @@ func (svc *webServe) Serve() {
gin.DefaultWriter = io.Discard gin.DefaultWriter = io.Discard
router := gin.Default() router := gin.Default()
router.LoadHTMLFiles("./static/index.html")
router.GET("/endpoints", listEpEntries) router.GET("/endpoints", listEpEntries)
router.GET("/", func(c *gin.Context) {
c.HTML(http.StatusOK, "index.html", nil)
})
router.Run(fmt.Sprintf(":%d", svc.port)) router.Run(fmt.Sprintf(":%d", svc.port))
} }

80
static/index.html Normal file
View File

@@ -0,0 +1,80 @@
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
padding: 10px;
}
</style>
</head>
<body onload="convert();">
<h3> VirtualLan Endpoints: </h3>
<div id="container"></div>
<script>
setInterval(convert, 5000)
// Function to convert JSON data to HTML table
function convert() {
// Sample JSON data
let jsonData = []
fetch("/endpoints")
.then(res => res.json())
.then(out =>
{
jsonData = out
// Get the container element where the table will be inserted
let container = document.getElementById("container");
// Create the table element
if (document.contains(document.getElementById("table"))) {
document.getElementById("table").remove();
}
let table = document.createElement("table");
table.setAttribute("id", "table")
// Get the keys (column names) of the first object in the JSON data
if (jsonData) {
let cols = Object.keys(jsonData[0]);
// Create the header element
let thead = document.createElement("thead");
let tr = document.createElement("tr");
// Loop through the column names and create header cells
cols.forEach((item) => {
let th = document.createElement("th");
th.innerText = item; // Set the column name as the text of the header cell
tr.appendChild(th); // Append the header cell to the header row
});
thead.appendChild(tr); // Append the header row to the header
table.append(tr) // Append the header to the table
// Loop through the JSON data and create table rows
jsonData.forEach((item) => {
let tr = document.createElement("tr");
// Get the values of the current object in the JSON data
let vals = Object.values(item);
// Loop through the values and create table cells
vals.forEach((elem) => {
let td = document.createElement("td");
td.innerText = elem; // Set the value as the text of the table cell
tr.appendChild(td); // Append the table cell to the table row
});
table.appendChild(tr); // Append the table row to the table
});
container.appendChild(table) // Append the table to the container element
}
})
.catch(err => { throw err });
}
</script>
</body>
</html>