diff --git a/src/MHServerEmu.Auth/Data/Web/Dashboard/index.html b/src/MHServerEmu.Auth/Data/Web/Dashboard/index.html
index 094639ec..c77e8ba5 100644
--- a/src/MHServerEmu.Auth/Data/Web/Dashboard/index.html
+++ b/src/MHServerEmu.Auth/Data/Web/Dashboard/index.html
@@ -41,7 +41,7 @@
Region Report
-
+
diff --git a/src/MHServerEmu.Auth/Data/Web/Dashboard/script.js b/src/MHServerEmu.Auth/Data/Web/Dashboard/script.js
index 28438fb0..1861740f 100644
--- a/src/MHServerEmu.Auth/Data/Web/Dashboard/script.js
+++ b/src/MHServerEmu.Auth/Data/Web/Dashboard/script.js
@@ -4,6 +4,8 @@ if (dashboardConfig == null) {
}
}
+(function() {
+
const apiUtil = {
handleReadyStateChange(xhr, callback) {
if (xhr.readyState == 4 && xhr.status == 200) {
@@ -46,8 +48,11 @@ const htmlUtil = {
return child;
},
- createAndAppendTable(parent, tableData) {
- const table = this.createAndAppendChild(parent, "table");
+ createAndAppendTable(parent, tableData, useHeader = true) {
+ const tableContainer = this.createAndAppendChild(parent, "div");
+ tableContainer.className = "table-container";
+
+ const table = this.createAndAppendChild(tableContainer, "table");
for (let i = 0; i < tableData.length; i++) {
const rowData = tableData[i];
@@ -55,9 +60,12 @@ const htmlUtil = {
for (let j = 0; j < rowData.length; j++) {
const cellData = rowData[j];
- this.createAndAppendChild(row, "td", cellData);
+ const cellTag = useHeader && i == 0 ? "th": "td";
+ this.createAndAppendChild(row, cellTag, cellData);
}
}
+
+ return table;
}
}
@@ -195,7 +203,8 @@ const metricsTab = {
value.Median.toFixed(2),
value.Last.toFixed(2),
value.Min.toFixed(2),
- value.Max.toFixed(2)]);
+ value.Max.toFixed(2),
+ ]);
}
}
@@ -254,25 +263,31 @@ const regionReportTab = {
},
onDataReceived(data) {
- const list = document.getElementById("region-report-list");
- list.innerHTML = "";
+ const regionReportContainer = document.getElementById("region-report-container");
+ regionReportContainer.innerHTML = "";
+ const tableData = [["GameId", "RegionId", "Name", "DifficultyTier", "Uptime"]];
let gameId = 0;
- let gameSublist = null;
for (let i = 0; i < data.Regions.length; i++) {
const region = data.Regions[i];
- const regionText = `[0x${stringUtil.bigIntToHexString(region.RegionId)}] ${region.Name} (${region.DifficultyTier}) - ${region.Uptime}`;
+ let gameText = "";
if (gameId != region.GameId) {
- const gameText = `Game [0x${stringUtil.bigIntToHexString(region.GameId)}]`;
- htmlUtil.createAndAppendChild(list, "li", gameText);
- gameSublist = htmlUtil.createAndAppendChild(list, "ul");
gameId = region.GameId;
+ gameText = `0x${stringUtil.bigIntToHexString(gameId)}`;
}
- htmlUtil.createAndAppendChild(gameSublist, "li", regionText);
+ tableData.push([
+ gameText,
+ `0x${stringUtil.bigIntToHexString(region.RegionId)}`,
+ region.Name,
+ region.DifficultyTier,
+ region.Uptime,
+ ]);
}
+
+ htmlUtil.createAndAppendTable(regionReportContainer, tableData);
}
}
@@ -321,3 +336,5 @@ tabManager.initialize([
regionReportTab,
createAccountTab
]);
+
+})();
diff --git a/src/MHServerEmu.Auth/Data/Web/Dashboard/style.css b/src/MHServerEmu.Auth/Data/Web/Dashboard/style.css
index 316165d3..2f2dca39 100644
--- a/src/MHServerEmu.Auth/Data/Web/Dashboard/style.css
+++ b/src/MHServerEmu.Auth/Data/Web/Dashboard/style.css
@@ -14,6 +14,7 @@ div.content {
div.content p,
div.content li,
+div.content th,
div.content td {
font: 12px/1.385 Verdana;
}
@@ -30,13 +31,34 @@ div.content label {
color: #00aaff;
}
-div.content table {
+div.table-container {
overflow-x: auto;
display: block;
}
+div.content table {
+ width: 100%;
+ border: 1px solid #00717c;
+ border-collapse: collapse;
+ margin: 4px 0px;
+}
+
+div.content tr:nth-child(odd) {
+ background: #1c1c1c;
+}
+
+div.content tr:nth-child(even) {
+ background: #111111;
+}
+
+div.content th,
div.content td {
- padding: 4px;
+ padding: 8px;
+}
+
+div.content th {
+ font-weight: bold;
+ text-align: left;
}
div.content button,