Skip to content

Commit a2301aa

Browse files
ChrisPC-39Sebastian
ChrisPC-39
and
Sebastian
authored
Add search for associated tools (#652)
* Add search bar for tools list when creating new virtual server Signed-off-by: Sebastian <[email protected]> * Run make format-web Signed-off-by: Sebastian <[email protected]> * Fix make lint-web Signed-off-by: Sebastian <[email protected]> --------- Signed-off-by: Sebastian <[email protected]> Co-authored-by: Sebastian <[email protected]>
1 parent f5b3e21 commit a2301aa

File tree

3 files changed

+128
-77
lines changed

3 files changed

+128
-77
lines changed

‎mcpgateway/static/admin.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,11 @@
3838
border-radius: 0.5rem; /* Increased rounded corners */
3939
padding: 0.75rem 1rem; /* More padding */
4040
pointer-events: none;
41-
transition: transform 0.2s ease, opacity 0.3s ease; /* Added smooth transition */
4241
opacity: 0;
4342
transform: scale(0.8); /* Tooltip starts slightly smaller */
43+
transition:
44+
transform 0.2s ease,
45+
opacity 0.3s ease; /* Added smooth transition */
4446
}
4547

4648
.tooltip.show {
@@ -62,7 +64,6 @@
6264
display: none;
6365
}
6466

65-
6667
/* .hidden {
6768
display: none;
6869
} */

‎mcpgateway/templates/admin.html

Lines changed: 67 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -401,20 +401,28 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
401401
class="mt-1 block w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-900 dark:placeholder-gray-300 dark:text-gray-300"
402402
/>
403403
</div>
404-
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
404+
<div
405+
class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700"
406+
>
405407
<label
406408
class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2"
407409
for="associatedTools"
408410
>
409411
Associated Tools
410412
</label>
413+
<input
414+
type="text"
415+
id="searchTools"
416+
placeholder="Search for tools..."
417+
class="mb-4 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm p-2 dark:bg-gray-900 dark:text-gray-300"
418+
/>
411419
<div
412420
id="associatedTools"
413421
class="max-h-60 overflow-y-auto rounded-md border border-gray-300 dark:border-gray-700 shadow-sm p-3 bg-gray-50 dark:bg-gray-900"
414422
>
415423
{% for tool in tools %}
416424
<label
417-
class="flex items-center space-x-3 text-gray-700 dark:text-gray-300 mb-2 cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900 rounded-md p-1"
425+
class="flex items-center space-x-3 text-gray-700 dark:text-gray-300 mb-2 cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900 rounded-md p-1 tool-item"
418426
>
419427
<input
420428
type="checkbox"
@@ -425,26 +433,32 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
425433
<span class="select-none">{{ tool.name }}</span>
426434
</label>
427435
{% endfor %}
436+
<p
437+
id="noToolsMessage"
438+
class="text-gray-700 dark:text-gray-300"
439+
style="display: none"
440+
>
441+
No tool found containing "<span id="searchQuery"></span>"
442+
</p>
428443
</div>
429444
<div class="flex justify-end mt-3 gap-2">
430-
431445
<button
432-
type="button"
433-
id="selectAllToolsBtn"
434-
class="px-3 py-1 text-sm font-semibold text-green-600 border border-green-600 rounded-md hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-offset-1"
435-
aria-label="Select all tools"
436-
>
437-
Select All
438-
</button>
446+
type="button"
447+
id="selectAllToolsBtn"
448+
class="px-3 py-1 text-sm font-semibold text-green-600 border border-green-600 rounded-md hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-offset-1"
449+
aria-label="Select all tools"
450+
>
451+
Select All
452+
</button>
439453

440-
<button
441-
type="button"
442-
id="clearAllToolsBtn"
443-
class="px-3 py-1 text-sm font-semibold text-red-600 border border-red-600 rounded-md hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-300 focus:ring-offset-1"
444-
aria-label="Clear all selected tools"
445-
>
446-
Clear All
447-
</button>
454+
<button
455+
type="button"
456+
id="clearAllToolsBtn"
457+
class="px-3 py-1 text-sm font-semibold text-red-600 border border-red-600 rounded-md hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-300 focus:ring-offset-1"
458+
aria-label="Clear all selected tools"
459+
>
460+
Clear All
461+
</button>
448462
</div>
449463

450464
<!-- Selected pills -->
@@ -1464,7 +1478,8 @@ <h3 class="text-lg font-bold mb-4 dark:text-gray-200">
14641478
<form
14651479
method="POST"
14661480
action="{{ root_path }}/admin/prompts"
1467-
id="add-prompt-form">
1481+
id="add-prompt-form"
1482+
>
14681483
<div class="grid grid-cols-1 gap-6">
14691484
<div>
14701485
<label
@@ -2710,7 +2725,6 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
27102725
name="template"
27112726
id="edit-prompt-template"
27122727
class="mt-1 block w-full h-48 rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
2713-
27142728
></textarea>
27152729
</div>
27162730
<div>
@@ -3178,7 +3192,9 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
31783192
/>
31793193
</div>
31803194

3181-
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-600">
3195+
<div
3196+
class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-600"
3197+
>
31823198
<label
31833199
for="edit-server-tools"
31843200
class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2"
@@ -3309,6 +3325,36 @@ <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
33093325
window.ROOT_PATH = {{ root_path | tojson }};
33103326
window.GATEWAY_TOOL_NAME_SEPARATOR = {{ gateway_tool_name_separator | tojson }};
33113327
window.MAX_NAME_LENGTH = {{ max_name_length | tojson }};
3328+
3329+
// Add search functionality for filtering tools
3330+
document.addEventListener('DOMContentLoaded', function() {
3331+
const searchBox = document.getElementById('searchTools');
3332+
const toolItems = document.querySelectorAll('#associatedTools .tool-item');
3333+
const noToolsMessage = document.getElementById('noToolsMessage');
3334+
const searchQuerySpan = document.getElementById('searchQuery');
3335+
3336+
searchBox.addEventListener('input', function() {
3337+
const filter = this.value.toLowerCase();
3338+
let hasVisibleItems = false;
3339+
3340+
toolItems.forEach(function(toolItem) {
3341+
const toolName = toolItem.querySelector('span').textContent.toLowerCase();
3342+
if (toolName.includes(filter)) {
3343+
toolItem.style.display = '';
3344+
hasVisibleItems = true;
3345+
} else {
3346+
toolItem.style.display = 'none';
3347+
}
3348+
});
3349+
3350+
if (hasVisibleItems) {
3351+
noToolsMessage.style.display = 'none';
3352+
} else {
3353+
searchQuerySpan.textContent = filter;
3354+
noToolsMessage.style.display = 'block';
3355+
}
3356+
});
3357+
});
33123358
</script>
33133359
</body>
33143360
</html>

‎mcpgateway/templates/version_info_partial.html

Lines changed: 58 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -181,78 +181,82 @@ <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
181181
</div>
182182
<!-- Redis Status -->
183183
<div
184-
class="border rounded-lg p-4
185-
{% if payload.settings.cache_type == 'redis' and payload.redis.reachable %}
186-
border-green-200 bg-green-50 dark:border-green-700 dark:bg-green-900/20
187-
{% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %}
188-
border-red-200 bg-red-50 dark:border-red-700 dark:bg-red-900/20
189-
{% else %}
190-
border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/20
191-
{% endif %}"
184+
class="border rounded-lg p-4 {% if payload.settings.cache_type == 'redis' and payload.redis.reachable %} border-green-200 bg-green-50 dark:border-green-700 dark:bg-green-900/20 {% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %} border-red-200 bg-red-50 dark:border-red-700 dark:bg-red-900/20 {% else %} border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/20 {% endif %}"
192185
>
193186
<div class="flex items-center justify-between">
194187
<div>
195-
<h4 class="font-medium
196-
{% if payload.settings.cache_type == 'redis' and payload.redis.reachable %}
197-
text-green-800 dark:text-green-300
198-
{% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %}
199-
text-red-800 dark:text-red-300
200-
{% else %}
201-
text-gray-800 dark:text-gray-300
202-
{% endif %}">
188+
<h4
189+
class="font-medium {% if payload.settings.cache_type == 'redis' and payload.redis.reachable %} text-green-800 dark:text-green-300 {% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %} text-red-800 dark:text-red-300 {% else %} text-gray-800 dark:text-gray-300 {% endif %}"
190+
>
203191
Cache
204192
</h4>
205-
<p class="text-sm
206-
{% if payload.settings.cache_type == 'redis' and payload.redis.reachable %}
207-
text-green-600 dark:text-green-400
208-
{% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %}
209-
text-red-600 dark:text-red-400
210-
{% else %}
211-
text-gray-600 dark:text-gray-400
212-
{% endif %}">
193+
<p
194+
class="text-sm {% if payload.settings.cache_type == 'redis' and payload.redis.reachable %} text-green-600 dark:text-green-400 {% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %} text-red-600 dark:text-red-400 {% else %} text-gray-600 dark:text-gray-400 {% endif %}"
195+
>
213196
{{ payload.settings.cache_type | capitalize }} Cache
214197
</p>
215198
</div>
216199
<div class="flex items-center">
217-
{% if payload.settings.cache_type == 'redis' and payload.redis.reachable %}
218-
<svg class="h-8 w-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
219-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
220-
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
221-
</svg>
222-
{% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %}
223-
<svg class="h-8 w-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
224-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
225-
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
226-
</svg>
200+
{% if payload.settings.cache_type == 'redis' and
201+
payload.redis.reachable %}
202+
<svg
203+
class="h-8 w-8 text-green-500"
204+
fill="none"
205+
stroke="currentColor"
206+
viewBox="0 0 24 24"
207+
>
208+
<path
209+
stroke-linecap="round"
210+
stroke-linejoin="round"
211+
stroke-width="2"
212+
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
213+
/>
214+
</svg>
215+
{% elif payload.settings.cache_type == 'redis' and not
216+
payload.redis.reachable %}
217+
<svg
218+
class="h-8 w-8 text-red-500"
219+
fill="none"
220+
stroke="currentColor"
221+
viewBox="0 0 24 24"
222+
>
223+
<path
224+
stroke-linecap="round"
225+
stroke-linejoin="round"
226+
stroke-width="2"
227+
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
228+
/>
229+
</svg>
227230
{% else %}
228-
<svg class="h-8 w-8 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
229-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
230-
d="M12 9v2m0 4h.01M12 4a8 8 0 100 16 8 8 0 000-16z"/>
231-
</svg>
231+
<svg
232+
class="h-8 w-8 text-gray-500"
233+
fill="none"
234+
stroke="currentColor"
235+
viewBox="0 0 24 24"
236+
>
237+
<path
238+
stroke-linecap="round"
239+
stroke-linejoin="round"
240+
stroke-width="2"
241+
d="M12 9v2m0 4h.01M12 4a8 8 0 100 16 8 8 0 000-16z"
242+
/>
243+
</svg>
232244
{% endif %}
233245
</div>
234246
</div>
235247

236248
<div class="mt-2">
237-
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
238-
{% if payload.settings.cache_type == 'redis' and payload.redis.reachable %}
239-
bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-200
240-
{% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %}
241-
bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-200
242-
{% else %}
243-
bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200
244-
{% endif %}">
245-
{% if payload.settings.cache_type == 'redis' and payload.redis.reachable %}
246-
✅ Connected
247-
{% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %}
248-
❌ Connection Failed
249-
{% else %}
250-
⚙️ Redis Not Configured
251-
{% endif %}
249+
<span
250+
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if payload.settings.cache_type == 'redis' and payload.redis.reachable %} bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-200 {% elif payload.settings.cache_type == 'redis' and not payload.redis.reachable %} bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-200 {% else %} bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200 {% endif %}"
251+
>
252+
{% if payload.settings.cache_type == 'redis' and
253+
payload.redis.reachable %} ✅ Connected {% elif
254+
payload.settings.cache_type == 'redis' and not
255+
payload.redis.reachable %} ❌ Connection Failed {% else %} ⚙️ Redis
256+
Not Configured {% endif %}
252257
</span>
253258
</div>
254259
</div>
255-
256260
</div>
257261
</div>
258262

0 commit comments

Comments
 (0)