Skip to content

Commit 8d3fc88

Browse files
author
Olivier Gintrand
committed
ui: hide tool/resource/prompt selectors when meta-server mode is enabled
Move the meta-server checkbox above the tool/resource/prompt selection sections in both the create and edit virtual server modals. When meta-server mode is enabled, the selectors are hidden and replaced with an info banner explaining that a meta-server dynamically exposes all items based on the user's access rights. Changes: - admin.html: move meta-server checkbox before tool selection in both create and edit modals; wrap tools/resources/prompts sections in togglable container divs; add info banner - servers.js: toggle items section and info banner when populating the edit modal based on server_type Signed-off-by: Olivier Gintrand <olivier.gintrand@forterro.com>
1 parent c5d0eaa commit 8d3fc88

2 files changed

Lines changed: 141 additions & 84 deletions

File tree

‎mcpgateway/admin_ui/servers.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -887,6 +887,24 @@ export const editServer = async function (serverId) {
887887
hideUnderlyingToolsCheckbox.checked = isMeta ? hideTools : true;
888888
}
889889

890+
// Toggle items section and info banner based on meta-server mode
891+
const editItemsSection = safeGetElement("edit-server-items-section");
892+
const editMetaInfoBanner = safeGetElement("edit-meta-info-banner");
893+
if (editItemsSection) {
894+
if (isMeta) {
895+
editItemsSection.classList.add("hidden");
896+
} else {
897+
editItemsSection.classList.remove("hidden");
898+
}
899+
}
900+
if (editMetaInfoBanner) {
901+
if (isMeta) {
902+
editMetaInfoBanner.classList.remove("hidden");
903+
} else {
904+
editMetaInfoBanner.classList.add("hidden");
905+
}
906+
}
907+
890908
// Store server data for modal population
891909
window.Admin.currentEditingServer = server;
892910

‎mcpgateway/templates/admin.html‎

Lines changed: 123 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -2966,6 +2966,65 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
29662966
></div>
29672967
</div>
29682968

2969+
<!-- Meta-Server Configuration Section (placed before tool selection) -->
2970+
<div class="mt-4 border-t border-gray-200 dark:border-gray-700 pt-4">
2971+
<div class="flex items-center mb-4">
2972+
<input
2973+
type="checkbox"
2974+
name="meta_server_enabled"
2975+
id="server-meta-enabled"
2976+
class="form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
2977+
onchange="document.getElementById('server-meta-config-section').classList.toggle('hidden', !this.checked); document.getElementById('create-server-items-section').classList.toggle('hidden', this.checked); document.getElementById('create-meta-info-banner').classList.toggle('hidden', !this.checked)"
2978+
/>
2979+
<label
2980+
for="server-meta-enabled"
2981+
class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-400"
2982+
>Enable as Meta-Server (Tool Router)</label
2983+
>
2984+
</div>
2985+
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
2986+
When enabled, this server exposes meta-tools (search, list, describe, execute) instead of individual underlying tools.
2987+
</p>
2988+
2989+
<!-- Meta-Server Configuration Fields (hidden by default) -->
2990+
<div id="server-meta-config-section" class="hidden space-y-4 pl-6 border-l-2 border-indigo-200 dark:border-indigo-800">
2991+
<div class="flex items-center">
2992+
<input
2993+
type="checkbox"
2994+
name="hide_underlying_tools"
2995+
id="server-hide-underlying-tools"
2996+
class="form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
2997+
checked
2998+
/>
2999+
<label
3000+
for="server-hide-underlying-tools"
3001+
class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-400"
3002+
>Hide underlying tools from tool listing</label
3003+
>
3004+
<p class="ml-2 text-xs text-gray-500 dark:text-gray-400">
3005+
Clients will only see the 6 meta-tools, not the individual backend tools.
3006+
</p>
3007+
</div>
3008+
</div>
3009+
</div>
3010+
3011+
<!-- Info banner shown when meta-server is enabled -->
3012+
<div id="create-meta-info-banner" class="hidden mt-4 p-4 bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-700 rounded-lg">
3013+
<div class="flex items-start gap-3">
3014+
<svg class="h-5 w-5 text-indigo-600 dark:text-indigo-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
3015+
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
3016+
</svg>
3017+
<div>
3018+
<p class="text-sm font-semibold text-indigo-800 dark:text-indigo-300">Meta-Server mode enabled</p>
3019+
<p class="text-xs text-indigo-700 dark:text-indigo-400 mt-1">
3020+
Tool, resource, and prompt selection is not needed. A meta-server dynamically exposes all items
3021+
the user has access to based on their team membership and visibility rules.
3022+
</p>
3023+
</div>
3024+
</div>
3025+
</div>
3026+
3027+
<div id="create-server-items-section">
29693028
<div
29703029
class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700"
29713030
>
@@ -3184,6 +3243,7 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
31843243
</div>
31853244
</div>
31863245
</div>
3246+
</div> <!-- end create-server-items-section -->
31873247
<!-- 🔻 Error Display Span -->
31883248
<span
31893249
id="serverFormError"
@@ -3367,48 +3427,6 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
33673427
</div>
33683428
</div>
33693429

3370-
<!-- Meta-Server Configuration Section -->
3371-
<div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
3372-
<div class="flex items-center mb-4">
3373-
<input
3374-
type="checkbox"
3375-
name="meta_server_enabled"
3376-
id="server-meta-enabled"
3377-
class="form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
3378-
onchange="document.getElementById('server-meta-config-section').classList.toggle('hidden', !this.checked)"
3379-
/>
3380-
<label
3381-
for="server-meta-enabled"
3382-
class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-400"
3383-
>Enable as Meta-Server (Tool Router)</label
3384-
>
3385-
</div>
3386-
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
3387-
When enabled, this server exposes meta-tools (search, list, describe, execute) instead of individual underlying tools.
3388-
</p>
3389-
3390-
<!-- Meta-Server Configuration Fields (hidden by default) -->
3391-
<div id="server-meta-config-section" class="hidden space-y-4 pl-6 border-l-2 border-indigo-200 dark:border-indigo-800">
3392-
<div class="flex items-center">
3393-
<input
3394-
type="checkbox"
3395-
name="hide_underlying_tools"
3396-
id="server-hide-underlying-tools"
3397-
class="form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
3398-
checked
3399-
/>
3400-
<label
3401-
for="server-hide-underlying-tools"
3402-
class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-400"
3403-
>Hide underlying tools from tool listing</label
3404-
>
3405-
<p class="ml-2 text-xs text-gray-500 dark:text-gray-400">
3406-
Clients will only see the 6 meta-tools, not the individual backend tools.
3407-
</p>
3408-
</div>
3409-
</div>
3410-
</div>
3411-
34123430
<div class="mt-6">
34133431
<button
34143432
type="submit"
@@ -11200,6 +11218,68 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
1120011218
aria-live="polite"
1120111219
></div>
1120211220
</div>
11221+
11222+
<!-- Meta-Server Configuration Section (placed before tool selection) -->
11223+
<div class="col-span-full mt-4 border-t border-gray-200 dark:border-gray-700 pt-4">
11224+
<div class="flex items-center mb-4">
11225+
<input
11226+
type="checkbox"
11227+
name="meta_server_enabled"
11228+
id="edit-server-meta-enabled"
11229+
class="form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
11230+
onchange="document.getElementById('edit-server-meta-config-section').classList.toggle('hidden', !this.checked); document.getElementById('edit-server-items-section').classList.toggle('hidden', this.checked); document.getElementById('edit-meta-info-banner').classList.toggle('hidden', !this.checked)"
11231+
/>
11232+
<label
11233+
for="edit-server-meta-enabled"
11234+
class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-400"
11235+
>Enable as Meta-Server (Tool Router)</label
11236+
>
11237+
</div>
11238+
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
11239+
When enabled, this server exposes meta-tools (search, list, describe, execute) instead of individual underlying tools.
11240+
</p>
11241+
11242+
<!-- Meta-Server Configuration Fields (hidden by default) -->
11243+
<div id="edit-server-meta-config-section" class="hidden space-y-4 pl-6 border-l-2 border-indigo-200 dark:border-indigo-800">
11244+
<div class="flex items-center">
11245+
<input
11246+
type="checkbox"
11247+
name="hide_underlying_tools"
11248+
id="edit-server-hide-underlying-tools"
11249+
class="form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
11250+
checked
11251+
/>
11252+
<label
11253+
for="edit-server-hide-underlying-tools"
11254+
class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-400"
11255+
>Hide underlying tools from tool listing</label
11256+
>
11257+
<p class="ml-2 text-xs text-gray-500 dark:text-gray-400">
11258+
Clients will only see the 6 meta-tools, not the individual backend tools.
11259+
</p>
11260+
</div>
11261+
</div>
11262+
</div>
11263+
11264+
<!-- Info banner shown when meta-server is enabled -->
11265+
<div id="edit-meta-info-banner" class="hidden col-span-full mt-4 p-4 bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-700 rounded-lg">
11266+
<div class="flex items-start gap-3">
11267+
<svg class="h-5 w-5 text-indigo-600 dark:text-indigo-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
11268+
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
11269+
</svg>
11270+
<div>
11271+
<p class="text-sm font-semibold text-indigo-800 dark:text-indigo-300">Meta-Server mode enabled</p>
11272+
<p class="text-xs text-indigo-700 dark:text-indigo-400 mt-1">
11273+
Tool, resource, and prompt selection is not needed. A meta-server dynamically exposes all items
11274+
the user has access to based on their team membership and visibility rules.
11275+
</p>
11276+
</div>
11277+
</div>
11278+
</div>
11279+
</div>
11280+
11281+
<div id="edit-server-items-section">
11282+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
1120311283
<div
1120411284
class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-600"
1120511285
>
@@ -11419,6 +11499,7 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
1141911499
</div>
1142011500
</div>
1142111501
</div>
11502+
</div> <!-- end edit-server-items-section -->
1142211503

1142311504
<!-- OAuth 2.0 Configuration Section (RFC 9728) -->
1142411505
<div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
@@ -11496,48 +11577,6 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
1149611577
</div>
1149711578
</div>
1149811579

11499-
<!-- Meta-Server Configuration Section -->
11500-
<div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
11501-
<div class="flex items-center mb-4">
11502-
<input
11503-
type="checkbox"
11504-
name="meta_server_enabled"
11505-
id="edit-server-meta-enabled"
11506-
class="form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
11507-
onchange="document.getElementById('edit-server-meta-config-section').classList.toggle('hidden', !this.checked)"
11508-
/>
11509-
<label
11510-
for="edit-server-meta-enabled"
11511-
class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-400"
11512-
>Enable as Meta-Server (Tool Router)</label
11513-
>
11514-
</div>
11515-
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
11516-
When enabled, this server exposes meta-tools (search, list, describe, execute) instead of individual underlying tools.
11517-
</p>
11518-
11519-
<!-- Meta-Server Configuration Fields (hidden by default) -->
11520-
<div id="edit-server-meta-config-section" class="hidden space-y-4 pl-6 border-l-2 border-indigo-200 dark:border-indigo-800">
11521-
<div class="flex items-center">
11522-
<input
11523-
type="checkbox"
11524-
name="hide_underlying_tools"
11525-
id="edit-server-hide-underlying-tools"
11526-
class="form-checkbox h-5 w-5 text-indigo-600 dark:bg-gray-800 dark:border-gray-600"
11527-
checked
11528-
/>
11529-
<label
11530-
for="edit-server-hide-underlying-tools"
11531-
class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-400"
11532-
>Hide underlying tools from tool listing</label
11533-
>
11534-
<p class="ml-2 text-xs text-gray-500 dark:text-gray-400">
11535-
Clients will only see the 6 meta-tools, not the individual backend tools.
11536-
</p>
11537-
</div>
11538-
</div>
11539-
</div>
11540-
1154111580
<div
1154211581
class="mt-6 flex justify-end space-x-3 bg-white dark:bg-gray-900 dark:text-gray-100"
1154311582
>

0 commit comments

Comments
 (0)