Skip to content

Commit 8be25d4

Browse files
crivetimihaicrivetimihai
committed
Add version and help / descriptions to UI
Signed-off-by: Mihai Criveti <crivetimihai@gmail.com>
1 parent 9325311 commit 8be25d4

File tree

1 file changed

+62
-37
lines changed

1 file changed

+62
-37
lines changed

‎mcpgateway/templates/admin.html‎

Lines changed: 62 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h1 class="text-3xl font-bold text-gray-800">
3030
MCP Context Forge - Gateway Administration
3131
</h1>
3232
<p class="text-gray-600">
33-
Manage tools, resources, prompts, servers, and federated gateways
33+
Manage tools, resources, prompts, servers, and federated gateways (remote MCP servers).
3434
</p>
3535
</header>
3636

@@ -43,35 +43,35 @@ <h1 class="text-3xl font-bold text-gray-800">
4343
id="tab-catalog"
4444
class="tab-link border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
4545
>
46-
Servers Catalog
46+
Virtual Servers Catalog
4747
</a>
4848
<a
4949
href="#tools"
5050
id="tab-tools"
5151
class="tab-link border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
5252
>
53-
Tools
53+
Global Tools
5454
</a>
5555
<a
5656
href="#resources"
5757
id="tab-resources"
5858
class="tab-link border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
5959
>
60-
Resources
60+
Global Resources
6161
</a>
6262
<a
6363
href="#prompts"
6464
id="tab-prompts"
6565
class="tab-link border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
6666
>
67-
Prompts
67+
Global Prompts
6868
</a>
6969
<a
7070
href="#gateways"
7171
id="tab-gateways"
7272
class="tab-link border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
7373
>
74-
Gateways
74+
Gateways/MCP Servers
7575
</a>
7676
<a
7777
href="#roots"
@@ -87,6 +87,14 @@ <h1 class="text-3xl font-bold text-gray-800">
8787
>
8888
Metrics
8989
</a>
90+
<!-- New Version tab (opens separate /version page) -->
91+
<a
92+
href="{{ root_path }}/version"
93+
target="_blank"
94+
class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
95+
>
96+
Version
97+
</a>
9098
</nav>
9199
</div>
92100
</div>
@@ -95,6 +103,8 @@ <h1 class="text-3xl font-bold text-gray-800">
95103
<div id="catalog-panel" class="tab-panel">
96104
<div class="flex justify-between items-center mb-4">
97105
<h2 class="text-2xl font-bold">MCP Servers Catalog</h2>
106+
<p class="text-sm text-gray-600 mt-1">Virtual Servers let you combine Tools, Resources, and Prompts from the global Tools catalog into a reusable configuration.</p>
107+
98108
<div class="flex items-center">
99109
<input
100110
type="checkbox"
@@ -356,6 +366,7 @@ <h3 class="text-lg font-bold mb-4">Add New Server</h3>
356366
<div id="tools-panel" class="tab-panel hidden">
357367
<div class="flex justify-between items-center mb-4">
358368
<h2 class="text-2xl font-bold">Registered Tools</h2>
369+
<p class="text-sm text-gray-600 mt-1">This is the global catalog of Tools available. Create a Virtual Server using one of these tools.</p>
359370
<div class="flex items-center">
360371
<input
361372
type="checkbox"
@@ -737,6 +748,7 @@ <h3 class="text-lg font-bold mb-4">Add New Tool</h3>
737748
<div id="resources-panel" class="tab-panel hidden">
738749
<div class="flex justify-between items-center mb-4">
739750
<h2 class="text-2xl font-bold">Available Resources</h2>
751+
<p class="text-sm text-gray-600 mt-1">Resources are reusable data assets—like text, code, or media—that Tools and Prompts can reference by URI.</p>
740752
<div class="flex items-center">
741753
<input
742754
type="checkbox"
@@ -967,6 +979,7 @@ <h3 class="text-lg font-bold mb-4">Add New Resource</h3>
967979
<div id="prompts-panel" class="tab-panel hidden">
968980
<div class="flex justify-between items-center mb-4">
969981
<h2 class="text-2xl font-bold">Available Prompts</h2>
982+
<p class="text-sm text-gray-600 mt-1">Prompts define reusable message templates with parameters, useful for driving LLM interactions or Tool input.</p>
970983
<div class="flex items-center">
971984
<input
972985
type="checkbox"
@@ -1173,7 +1186,8 @@ <h3 class="text-lg font-bold mb-4">Add New Prompt</h3>
11731186
<!-- Gateways Panel -->
11741187
<div id="gateways-panel" class="tab-panel hidden">
11751188
<div class="flex justify-between items-center mb-4">
1176-
<h2 class="text-2xl font-bold">Federated Gateways</h2>
1189+
<h2 class="text-2xl font-bold">Federated Gateways (MCP)</h2>
1190+
<p class="text-sm text-gray-600 mt-1">Gateways are where you register external MCP servers to federate their tools/resources/prompts into your environment.</p>
11771191
<div class="flex items-center">
11781192
<input
11791193
type="checkbox"
@@ -1440,45 +1454,59 @@ <h3 class="text-lg font-bold mb-4">Add New Gateway</h3>
14401454

14411455
<!-- Roots Panel -->
14421456
<div id="roots-panel" class="tab-panel hidden">
1457+
<!-- List of roots ------------------------------------------------------->
14431458
<div class="bg-white shadow rounded-lg p-6 mb-8">
1444-
<h2 class="text-2xl font-bold mb-4">Root Directories</h2>
1459+
<!-- Consistent header -->
1460+
<div class="flex justify-between items-center mb-4">
1461+
<h2 class="text-2xl font-bold">Root Directories</h2>
1462+
<div class="flex items-center">
1463+
<input
1464+
type="checkbox"
1465+
id="show-inactive-roots"
1466+
class="mr-2"
1467+
onchange="toggleInactiveItems('roots')"
1468+
/>
1469+
<label
1470+
for="show-inactive-roots"
1471+
class="text-sm font-medium text-gray-700"
1472+
>
1473+
Show Inactive
1474+
</label>
1475+
</div>
1476+
</div>
1477+
1478+
<!-- Description -->
1479+
<p class="text-sm text-gray-600 mb-4">
1480+
Roots define the base folders accessible for file-based Resources.
1481+
They enable MCP servers to browse local content.
1482+
</p>
1483+
1484+
<!-- Roots table -->
14451485
<div class="overflow-x-auto">
14461486
<table class="min-w-full divide-y divide-gray-200">
14471487
<thead class="bg-gray-50">
14481488
<tr>
1449-
<th
1450-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
1451-
>
1489+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
14521490
ID
14531491
</th>
1454-
<th
1455-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
1456-
>
1492+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
14571493
URI
14581494
</th>
1459-
<th
1460-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
1461-
>
1495+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
14621496
Name
14631497
</th>
1464-
<th
1465-
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
1466-
>
1498+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
14671499
Actions
14681500
</th>
14691501
</tr>
14701502
</thead>
14711503
<tbody class="bg-white divide-y divide-gray-200">
14721504
{% for root in roots %}
14731505
<tr>
1474-
<td
1475-
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
1476-
>
1506+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
14771507
{{ root.id }}
14781508
</td>
1479-
<td
1480-
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
1481-
>
1509+
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
14821510
{{ root.uri }}
14831511
</td>
14841512
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@@ -1491,10 +1519,7 @@ <h2 class="text-2xl font-bold mb-4">Root Directories</h2>
14911519
class="inline"
14921520
onsubmit="return confirm('Are you sure you want to delete this root?');"
14931521
>
1494-
<button
1495-
type="submit"
1496-
class="text-red-600 hover:text-red-900"
1497-
>
1522+
<button type="submit" class="text-red-600 hover:text-red-900">
14981523
Delete
14991524
</button>
15001525
</form>
@@ -1506,14 +1531,13 @@ <h2 class="text-2xl font-bold mb-4">Root Directories</h2>
15061531
</div>
15071532
</div>
15081533

1534+
<!-- Add new root -------------------------------------------------------->
15091535
<div class="bg-white shadow rounded-lg p-6">
15101536
<h3 class="text-lg font-bold mb-4">Add New Root</h3>
15111537
<form method="POST" action="{{ root_path }}/admin/roots" id="add-root-form">
15121538
<div class="grid grid-cols-1 gap-6">
15131539
<div>
1514-
<label class="block text-sm font-medium text-gray-700"
1515-
>URI</label
1516-
>
1540+
<label class="block text-sm font-medium text-gray-700">URI</label>
15171541
<input
15181542
type="text"
15191543
name="uri"
@@ -1523,9 +1547,7 @@ <h3 class="text-lg font-bold mb-4">Add New Root</h3>
15231547
/>
15241548
</div>
15251549
<div>
1526-
<label class="block text-sm font-medium text-gray-700"
1527-
>Name</label
1528-
>
1550+
<label class="block text-sm font-medium text-gray-700">Name</label>
15291551
<input
15301552
type="text"
15311553
name="name"
@@ -1545,12 +1567,14 @@ <h3 class="text-lg font-bold mb-4">Add New Root</h3>
15451567
</form>
15461568
</div>
15471569
</div>
1548-
</div>
1570+
1571+
15491572

15501573
<!-- Metrics Panel -->
15511574
<div id="metrics-panel" class="tab-panel hidden">
15521575
<div class="bg-white shadow rounded-lg p-6">
15531576
<h2 class="text-2xl font-bold mb-4">Aggregated Metrics</h2>
1577+
<p class="text-sm text-gray-600 mt-1">Metrics provide visibility into Tool, Resource, Prompt, and Server usage across your Gateway—helpful for debugging and optimization.</p>
15541578

15551579
<!-- Refresh button (also auto-refreshes when the tab is selected) -->
15561580
<button
@@ -1599,6 +1623,7 @@ <h2 class="text-2xl font-bold mb-4">Aggregated Metrics</h2>
15991623
</div>
16001624
</div>
16011625

1626+
16021627
<!-- Modals -->
16031628
<!-- Tool Detail Modal -->
16041629
<div id="tool-modal" class="fixed z-10 inset-0 overflow-y-auto hidden">

0 commit comments

Comments
 (0)