Skip to content

Commit 408649e

Browse files
crivetimihaicrivetimihai
authored
Merge pull request #161 from Abdzsam/DarkModeUI
Dark Mode UI
2 parents 688a2da + cfda392 commit 408649e

File tree

3 files changed

+334
-323
lines changed

3 files changed

+334
-323
lines changed

‎mcpgateway/static/admin.js

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -390,16 +390,16 @@ function showTab(tabName) {
390390
panel.classList.add("hidden");
391391
});
392392
document.querySelectorAll(".tab-link").forEach((link) => {
393-
link.classList.remove("border-indigo-500", "text-indigo-600");
394-
link.classList.add("border-transparent", "text-gray-500");
393+
link.classList.remove("border-indigo-500", "text-indigo-600", "dark:text-indigo-500", "dark:border-indigo-400");
394+
link.classList.add("border-transparent", "text-gray-500", "dark:text-gray-400");
395395
});
396396
document.getElementById(`${tabName}-panel`).classList.remove("hidden");
397397
document
398398
.querySelector(`[href="#${tabName}"]`)
399-
.classList.add("border-indigo-500", "text-indigo-600");
399+
.classList.add("border-indigo-500", "text-indigo-600", "dark:text-indigo-500", "dark:border-indigo-400");
400400
document
401401
.querySelector(`[href="#${tabName}"]`)
402-
.classList.remove("border-transparent", "text-gray-500");
402+
.classList.remove("border-transparent", "text-gray-500", "dark:text-gray-400");
403403

404404
if (tabName === "metrics") {
405405
loadAggregatedMetrics();
@@ -1328,64 +1328,64 @@ async function loadAggregatedMetrics() {
13281328

13291329
// Build an aggregated metrics table
13301330
const tableHTML = `
1331-
<table class="min-w-full bg-white border">
1331+
<table class="min-w-full bg-white border dark:bg-gray-900">
13321332
<thead>
13331333
<tr>
1334-
<th class="py-2 px-4 border">Entity</th>
1335-
<th class="py-2 px-4 border">Total</th>
1336-
<th class="py-2 px-4 border">Successful</th>
1337-
<th class="py-2 px-4 border">Failed</th>
1338-
<th class="py-2 px-4 border">Failure Rate</th>
1339-
<th class="py-2 px-4 border">Min RT</th>
1340-
<th class="py-2 px-4 border">Max RT</th>
1341-
<th class="py-2 px-4 border">Avg RT</th>
1342-
<th class="py-2 px-4 border">Last Exec</th>
1334+
<th class="py-2 px-4 border dark:text-gray-200">Entity</th>
1335+
<th class="py-2 px-4 border dark:text-gray-200">Total</th>
1336+
<th class="py-2 px-4 border dark:text-gray-200">Successful</th>
1337+
<th class="py-2 px-4 border dark:text-gray-200">Failed</th>
1338+
<th class="py-2 px-4 border dark:text-gray-200">Failure Rate</th>
1339+
<th class="py-2 px-4 border dark:text-gray-200">Min RT</th>
1340+
<th class="py-2 px-4 border dark:text-gray-200">Max RT</th>
1341+
<th class="py-2 px-4 border dark:text-gray-200">Avg RT</th>
1342+
<th class="py-2 px-4 border dark:text-gray-200">Last Exec</th>
13431343
</tr>
13441344
</thead>
13451345
<tbody>
13461346
<tr>
1347-
<td class="py-2 px-4 border font-semibold">Tools</td>
1348-
<td class="py-2 px-4 border">${toolsTotal}</td>
1349-
<td class="py-2 px-4 border">${toolsSuccess}</td>
1350-
<td class="py-2 px-4 border">${toolsFailed}</td>
1351-
<td class="py-2 px-4 border">${toolsFailureRate}</td>
1352-
<td class="py-2 px-4 border">${toolsMin}</td>
1353-
<td class="py-2 px-4 border">${toolsMax}</td>
1354-
<td class="py-2 px-4 border">${toolsAvg}</td>
1355-
<td class="py-2 px-4 border">${toolsLast}</td>
1347+
<td class="py-2 px-4 border font-semibold dark:text-gray-200">Tools</td>
1348+
<td class="py-2 px-4 border dark:text-gray-300">${toolsTotal}</td>
1349+
<td class="py-2 px-4 border dark:text-gray-300">${toolsSuccess}</td>
1350+
<td class="py-2 px-4 border dark:text-gray-300">${toolsFailed}</td>
1351+
<td class="py-2 px-4 border dark:text-gray-300">${toolsFailureRate}</td>
1352+
<td class="py-2 px-4 border dark:text-gray-300">${toolsMin}</td>
1353+
<td class="py-2 px-4 border dark:text-gray-300">${toolsMax}</td>
1354+
<td class="py-2 px-4 border dark:text-gray-300">${toolsAvg}</td>
1355+
<td class="py-2 px-4 border dark:text-gray-300">${toolsLast}</td>
13561356
</tr>
13571357
<tr>
1358-
<td class="py-2 px-4 border font-semibold">Resources</td>
1359-
<td class="py-2 px-4 border">${resourcesTotal}</td>
1360-
<td class="py-2 px-4 border">${resourcesSuccess}</td>
1361-
<td class="py-2 px-4 border">${resourcesFailed}</td>
1362-
<td class="py-2 px-4 border">${resourcesFailureRate}</td>
1363-
<td class="py-2 px-4 border">${resourcesMin}</td>
1364-
<td class="py-2 px-4 border">${resourcesMax}</td>
1365-
<td class="py-2 px-4 border">${resourcesAvg}</td>
1366-
<td class="py-2 px-4 border">${resourcesLast}</td>
1358+
<td class="py-2 px-4 border font-semibold dark:text-gray-200">Resources</td>
1359+
<td class="py-2 px-4 border dark:text-gray-300">${resourcesTotal}</td>
1360+
<td class="py-2 px-4 border dark:text-gray-300">${resourcesSuccess}</td>
1361+
<td class="py-2 px-4 border dark:text-gray-300">${resourcesFailed}</td>
1362+
<td class="py-2 px-4 border dark:text-gray-300">${resourcesFailureRate}</td>
1363+
<td class="py-2 px-4 border dark:text-gray-300">${resourcesMin}</td>
1364+
<td class="py-2 px-4 border dark:text-gray-300">${resourcesMax}</td>
1365+
<td class="py-2 px-4 border dark:text-gray-300">${resourcesAvg}</td>
1366+
<td class="py-2 px-4 border dark:text-gray-300">${resourcesLast}</td>
13671367
</tr>
13681368
<tr>
1369-
<td class="py-2 px-4 border font-semibold">Servers</td>
1370-
<td class="py-2 px-4 border">${serversTotal}</td>
1371-
<td class="py-2 px-4 border">${serversSuccess}</td>
1372-
<td class="py-2 px-4 border">${serversFailed}</td>
1373-
<td class="py-2 px-4 border">${serversFailureRate}</td>
1374-
<td class="py-2 px-4 border">${serversMin}</td>
1375-
<td class="py-2 px-4 border">${serversMax}</td>
1376-
<td class="py-2 px-4 border">${serversAvg}</td>
1377-
<td class="py-2 px-4 border">${serversLast}</td>
1369+
<td class="py-2 px-4 border font-semibold dark:text-gray-200">Servers</td>
1370+
<td class="py-2 px-4 border dark:text-gray-300">${serversTotal}</td>
1371+
<td class="py-2 px-4 border dark:text-gray-300">${serversSuccess}</td>
1372+
<td class="py-2 px-4 border dark:text-gray-300">${serversFailed}</td>
1373+
<td class="py-2 px-4 border dark:text-gray-300">${serversFailureRate}</td>
1374+
<td class="py-2 px-4 border dark:text-gray-300">${serversMin}</td>
1375+
<td class="py-2 px-4 border dark:text-gray-300">${serversMax}</td>
1376+
<td class="py-2 px-4 border dark:text-gray-300">${serversAvg}</td>
1377+
<td class="py-2 px-4 border dark:text-gray-300">${serversLast}</td>
13781378
</tr>
13791379
<tr>
1380-
<td class="py-2 px-4 border font-semibold">Prompts</td>
1381-
<td class="py-2 px-4 border">${promptsTotal}</td>
1382-
<td class="py-2 px-4 border">${promptsSuccess}</td>
1383-
<td class="py-2 px-4 border">${promptsFailed}</td>
1384-
<td class="py-2 px-4 border">${promptsFailureRate}</td>
1385-
<td class="py-2 px-4 border">${promptsMin}</td>
1386-
<td class="py-2 px-4 border">${promptsMax}</td>
1387-
<td class="py-2 px-4 border">${promptsAvg}</td>
1388-
<td class="py-2 px-4 border">${promptsLast}</td>
1380+
<td class="py-2 px-4 border font-semibold dark:text-gray-200">Prompts</td>
1381+
<td class="py-2 px-4 border dark:text-gray-300">${promptsTotal}</td>
1382+
<td class="py-2 px-4 border dark:text-gray-300">${promptsSuccess}</td>
1383+
<td class="py-2 px-4 border dark:text-gray-300">${promptsFailed}</td>
1384+
<td class="py-2 px-4 border dark:text-gray-300">${promptsFailureRate}</td>
1385+
<td class="py-2 px-4 border dark:text-gray-300">${promptsMin}</td>
1386+
<td class="py-2 px-4 border dark:text-gray-300">${promptsMax}</td>
1387+
<td class="py-2 px-4 border dark:text-gray-300">${promptsAvg}</td>
1388+
<td class="py-2 px-4 border dark:text-gray-300">${promptsLast}</td>
13891389
</tr>
13901390
</tbody>
13911391
</table>
@@ -1455,9 +1455,9 @@ async function loadTopTools() {
14551455
let html = `<table class="min-w-full border">
14561456
<thead>
14571457
<tr>
1458-
<th class="py-1 px-2 border">ID</th>
1459-
<th class="py-1 px-2 border">Name</th>
1460-
<th class="py-1 px-2 border">Executions</th>
1458+
<th class="py-1 px-2 border dark:text-gray-300">ID</th>
1459+
<th class="py-1 px-2 border dark:text-gray-300">Name</th>
1460+
<th class="py-1 px-2 border dark:text-gray-300">Executions</th>
14611461
</tr>
14621462
</thead>
14631463
<tbody>`;
@@ -1491,10 +1491,10 @@ async function loadTopResources() {
14911491
let html = `<table class="min-w-full border">
14921492
<thead>
14931493
<tr>
1494-
<th class="py-1 px-2 border">ID</th>
1495-
<th class="py-1 px-2 border">URI</th>
1496-
<th class="py-1 px-2 border">Name</th>
1497-
<th class="py-1 px-2 border">Executions</th>
1494+
<th class="py-1 px-2 border dark:text-gray-300">ID</th>
1495+
<th class="py-1 px-2 border dark:text-gray-300">URI</th>
1496+
<th class="py-1 px-2 border dark:text-gray-300">Name</th>
1497+
<th class="py-1 px-2 border dark:text-gray-300">Executions</th>
14981498
</tr>
14991499
</thead>
15001500
<tbody>`;
@@ -1529,9 +1529,9 @@ async function loadTopServers() {
15291529
let html = `<table class="min-w-full border">
15301530
<thead>
15311531
<tr>
1532-
<th class="py-1 px-2 border">ID</th>
1533-
<th class="py-1 px-2 border">Name</th>
1534-
<th class="py-1 px-2 border">Executions</th>
1532+
<th class="py-1 px-2 border dark:text-gray-300">ID</th>
1533+
<th class="py-1 px-2 border dark:text-gray-300">Name</th>
1534+
<th class="py-1 px-2 border dark:text-gray-300">Executions</th>
15351535
</tr>
15361536
</thead>
15371537
<tbody>`;
@@ -1565,9 +1565,9 @@ async function loadTopPrompts() {
15651565
let html = `<table class="min-w-full border">
15661566
<thead>
15671567
<tr>
1568-
<th class="py-1 px-2 border">ID</th>
1569-
<th class="py-1 px-2 border">Name</th>
1570-
<th class="py-1 px-2 border">Executions</th>
1568+
<th class="py-1 px-2 border dark:text-gray-300">ID</th>
1569+
<th class="py-1 px-2 border dark:text-gray-300">Name</th>
1570+
<th class="py-1 px-2 border dark:text-gray-300">Executions</th>
15711571
</tr>
15721572
</thead>
15731573
<tbody>`;

0 commit comments

Comments
 (0)