Skip to content

Commit cc61b9e

Browse files
crivetimihaiMohanLakshmaiah
crivetimihai
and
MohanLakshmaiah
authored
UI Improvements and minor bug fixes (#965)
Signed-off-by: Mohan Lakshmaiah <[email protected]> Co-authored-by: Mohan Lakshmaiah <[email protected]>
1 parent a8a1e13 commit cc61b9e

File tree

2 files changed

+56
-28
lines changed

2 files changed

+56
-28
lines changed

‎mcpgateway/static/admin.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3489,7 +3489,7 @@ async function viewServer(serverId) {
34893489

34903490
const fields = [
34913491
{ label: "Server ID", value: server.id },
3492-
{ label: "URL", value: server.url || "N/A" },
3492+
{ label: "URL", value: getCatalogUrl(server) || "N/A" },
34933493
{ label: "Type", value: "Virtual Server" },
34943494
];
34953495

@@ -8791,6 +8791,24 @@ function showConfigSelectionModal(serverId, serverName) {
87918791

87928792
openModal("config-selection-modal");
87938793
}
8794+
/**
8795+
* Build MCP_SERVER_CATALOG_URL for a given server
8796+
* @param {Object} server
8797+
* @returns {string}
8798+
*/
8799+
function getCatalogUrl(server) {
8800+
const currentHost = window.location.hostname;
8801+
const currentPort =
8802+
window.location.port ||
8803+
(window.location.protocol === "https:" ? "443" : "80");
8804+
const protocol = window.location.protocol;
8805+
8806+
const baseUrl = `${protocol}//${currentHost}${
8807+
currentPort !== "80" && currentPort !== "443" ? ":" + currentPort : ""
8808+
}`;
8809+
8810+
return `${baseUrl}/servers/${server.id}`;
8811+
}
87948812

87958813
/**
87968814
* Generate and show configuration for selected type

‎mcpgateway/templates/admin.html‎

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -475,7 +475,7 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">
475475
>
476476
<select
477477
id="log-level-filter"
478-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
478+
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
479479
>
480480
<option value="">All Levels</option>
481481
<option value="debug">Debug</option>
@@ -493,7 +493,7 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">
493493
>
494494
<select
495495
id="log-entity-filter"
496-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
496+
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
497497
>
498498
<option value="">All Types</option>
499499
<option value="tool">Tool</option>
@@ -512,7 +512,7 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">
512512
type="text"
513513
id="log-search"
514514
placeholder="Search logs..."
515-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
515+
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
516516
/>
517517
</div>
518518
</div>
@@ -555,7 +555,7 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">
555555
<!-- Log Stats -->
556556
<div
557557
id="log-stats"
558-
class="mb-4 p-3 bg-gray-100 dark:bg-gray-700 rounded"
558+
class="mb-4 p-3 bg-gray-100 dark:bg-gray-700 rounded text-gray-700 dark:text-gray-300"
559559
>
560560
<span class="text-sm text-gray-600 dark:text-gray-300"
561561
>Loading stats...</span
@@ -1330,7 +1330,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">
13301330
{% endif %}
13311331
</td>
13321332
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
1333-
<div class="grid grid-cols-2 gap-1 max-w-48">
1333+
<div class="grid grid-cols-2 gap-x-2 gap-y-1 max-w-48">
13341334
<!-- Row 1: View | Edit -->
13351335
<button
13361336
onclick="viewServer('{{ server.id }}')"
@@ -1357,6 +1357,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">
13571357
</button>
13581358

13591359
<!-- Row 3: Deactivate/Activate | Delete -->
1360+
<div class="col-span-2 flex flex-col space-y-1">
13601361
{% if server.isActive %}
13611362
<form
13621363
method="POST"
@@ -1404,6 +1405,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">
14041405
Delete
14051406
</button>
14061407
</form>
1408+
</div>
14071409
</div>
14081410
</td>
14091411
</tr>
@@ -1878,7 +1880,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Tools</h2>
18781880
Status
18791881
</th>
18801882
<th
1881-
class="px-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-32"
1883+
class="px-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-48"
18821884
>
18831885
Actions
18841886
</th>
@@ -1925,11 +1927,11 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Tools</h2>
19251927
{% set clean_desc = (tool.description or "") | replace('\n',
19261928
' ') | replace('\r', ' ') %} {% set refactor_desc =
19271929
clean_desc | striptags | trim | escape %} {% if
1928-
refactor_desc | length is greaterthan 120 %} {{
1929-
refactor_desc[:120] }}... {% else %} {{ refactor_desc }} {%
1930+
refactor_desc | length is greaterthan 220 %} {{
1931+
refactor_desc[:400] }}... {% else %} {{ refactor_desc }} {%
19301932
endif %}
19311933
</td>
1932-
<td class="px-2 py-4 whitespace-nowrap">
1934+
<td class="px-2 py-4 whitespace-normal break-words">
19331935
{% if tool.annotations %} {% if tool.annotations.title %}
19341936
<span
19351937
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-1 mb-1"
@@ -2074,7 +2076,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Tools</h2>
20742076
<td
20752077
class="px-2 py-4 whitespace-nowrap text-sm font-medium w-32"
20762078
>
2077-
<div class="grid grid-cols-2 gap-1 max-w-32">
2079+
<div class="grid grid-cols-2 gap-x-2 gap-y-0 max-w-48">
20782080
<!-- Row 1: Test -->
20792081
<button
20802082
onclick="testTool('{{ tool.id }}')"
@@ -2101,6 +2103,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Tools</h2>
21012103
</button>
21022104

21032105
<!-- Row 3: Deactivate/Activate | Delete -->
2106+
<div class="col-span-2 flex flex-col space-y-1">
21042107
{% if tool.enabled %}
21052108
<form
21062109
method="POST"
@@ -2148,6 +2151,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Tools</h2>
21482151
Delete
21492152
</button>
21502153
</form>
2154+
</div>
21512155
</div>
21522156
</td>
21532157
</tr>
@@ -2987,7 +2991,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Resources</h2>
29872991
</span>
29882992
</td>
29892993
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
2990-
<div class="grid grid-cols-2 gap-1 max-w-48">
2994+
<div class="grid grid-cols-2 gap-x-2 gap-y-1 max-w-48">
29912995
<!-- Row 1: View | Edit -->
29922996
<button
29932997
onclick="viewResource('{{ resource.uri }}')"
@@ -3005,6 +3009,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Resources</h2>
30053009
</button>
30063010

30073011
<!-- Row 2: Deactivate/Activate | Delete -->
3012+
<div class="col-span-2 flex flex-col space-y-1">
30083013
{% if resource.isActive %}
30093014
<form
30103015
method="POST"
@@ -3052,6 +3057,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Resources</h2>
30523057
Delete
30533058
</button>
30543059
</form>
3060+
</div>
30553061
</div>
30563062
</td>
30573063
</tr>
@@ -3280,12 +3286,12 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Prompts</h2>
32803286
{{ prompt.name }}
32813287
</td>
32823288
<td
3283-
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"
3289+
class="px-6 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300"
32843290
>
32853291
{{ prompt.description }}
32863292
</td>
32873293
<td
3288-
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"
3294+
class="px-6 py-4 whitespace-normal text-sm text-gray-500 dark:text-gray-300"
32893295
>
32903296
{% for arg in prompt.arguments %}{{ arg.name }}{% if not
32913297
loop.last %}, {% endif %}{% endfor %}
@@ -3343,7 +3349,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Prompts</h2>
33433349
</span>
33443350
</td>
33453351
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
3346-
<div class="grid grid-cols-2 gap-1 max-w-48">
3352+
<div class="grid grid-cols-2 gap-x-6 gap-y-0 max-w-48">
33473353
<!-- Row 1: Test -->
33483354
<button
33493355
onclick="testPrompt('{{ prompt.name }}')"
@@ -3370,6 +3376,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Prompts</h2>
33703376
</button>
33713377

33723378
<!-- Row 3: Deactivate/Activate | Delete -->
3379+
<div class="col-span-2 flex flex-col space-y-1">
33733380
{% if prompt.isActive %}
33743381
<form
33753382
method="POST"
@@ -3417,6 +3424,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">MCP Prompts</h2>
34173424
Delete
34183425
</button>
34193426
</form>
3427+
</div>
34203428
</div>
34213429
</td>
34223430
</tr>
@@ -3762,7 +3770,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">
37623770
{% endif %}
37633771
</td>
37643772
<td class="px-3 py-4 whitespace-nowrap text-sm font-medium">
3765-
<div class="grid grid-cols-2 gap-1 max-w-48">
3773+
<div class="grid grid-cols-2 gap-x-2 gap-y-1 max-w-48">
37663774
<!-- Row 1: Test -->
37673775
<button
37683776
onclick="testGateway('{{ gateway.url }}')"
@@ -3824,6 +3832,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">
38243832
{% endif %}
38253833

38263834
<!-- Row 4: Deactivate/Activate | Delete -->
3835+
<div class="col-span-2 flex flex-col space-y-1">
38273836
{% if gateway.enabled %}
38283837
<form
38293838
method="POST"
@@ -3871,6 +3880,7 @@ <h2 class="text-2xl font-bold dark:text-gray-200">
38713880
Delete
38723881
</button>
38733882
</form>
3883+
</div>
38743884
</div>
38753885

38763886
<!-- Debug: Show gateway data for troubleshooting -->
@@ -4470,7 +4480,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
44704480
type="email"
44714481
name="email"
44724482
required
4473-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
4483+
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm bg-gray-300 dark:bg-gray-700 dark:border-gray-600"
44744484
placeholder="[email protected]"
44754485
/>
44764486
</div>
@@ -4484,7 +4494,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
44844494
type="text"
44854495
name="full_name"
44864496
required
4487-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
4497+
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm bg-gray-200 dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
44884498
placeholder="John Smith"
44894499
/>
44904500
</div>
@@ -4585,7 +4595,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
45854595
name="name"
45864596
required
45874597
maxlength="255"
4588-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
4598+
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
45894599
placeholder="Production API Access"
45904600
/>
45914601
</div>
@@ -4601,7 +4611,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
46014611
min="1"
46024612
max="365"
46034613
value="30"
4604-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
4614+
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
46054615
placeholder="30"
46064616
/>
46074617
</div>
@@ -4615,7 +4625,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
46154625
<textarea
46164626
name="description"
46174627
rows="2"
4618-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
4628+
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
46194629
placeholder="Brief description of token usage"
46204630
></textarea>
46214631
</div>
@@ -4637,7 +4647,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
46374647
<input
46384648
type="text"
46394649
name="server_id"
4640-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
4650+
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
46414651
placeholder="server-abc-123"
46424652
/>
46434653
</div>
@@ -4650,7 +4660,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
46504660
<input
46514661
type="text"
46524662
name="ip_restrictions"
4653-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
4663+
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
46544664
placeholder="192.168.1.0/24"
46554665
/>
46564666
</div>
@@ -4664,7 +4674,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
46644674
<input
46654675
type="text"
46664676
name="permissions"
4667-
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:border-gray-600"
4677+
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 dark:border-gray-600 text-gray-700 dark:text-gray-300"
46684678
placeholder="tools.read, resources.read, tools.execute"
46694679
/>
46704680
</div>
@@ -5077,17 +5087,17 @@ <h2 class="text-2xl font-bold dark:text-gray-200">
50775087
{% for root in roots %}
50785088
<tr>
50795089
<td
5080-
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100"
5090+
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300"
50815091
>
5082-
{{ root.id }}
5092+
{{ loop.index }}
50835093
</td>
50845094
<td
5085-
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100s"
5095+
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300"
50865096
>
50875097
{{ root.uri }}
50885098
</td>
50895099
<td
5090-
class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-500"
5100+
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400"
50915101
>
50925102
{{ root.name }}
50935103
</td>

0 commit comments

Comments
 (0)