mirror of
https://github.com/lukaszraczylo/traefik-llmgateway.git
synced 2026-10-16 05:37:28 +00:00
feat(webui): MCP & Agents admin tab
New 'MCP & Agents' tab (after Charts) fed by GET /admin/api/targets: two Card panels, each a sortable DataTable (reusing DataTable/ SortHeaderButton — no hand-rolled table markup) listing configured MCP servers and agents with name, url (muted, truncated with a title tooltip), access (Badge per allowed group, muted 'All groups' when unrestricted — the same idiom UsageView's own group Access block already uses), and req/min, req/day, req/month. - types/api.ts: AdminTargetCountersView/AdminTargetView/ AdminTargetsResponse matching admin.go's JSON exactly. - stores/dashboard.ts: targets fetched in the SAME Promise.all/5s poll as overview and usage — one store, one timer, not a third. - lib/target-columns.ts: shared ColumnDef set both DataTables use. - components/TargetsView.vue: SearchInput + useSearchQuery name filter (inline matching, mirroring ProvidersView's own single-field aliasMatches — not every filter needs a lib/*-search.ts module).
This commit is contained in:
+6
-1
@@ -5,6 +5,7 @@ import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
|
||||
|
||||
import AuthGate from '@/components/AuthGate.vue'
|
||||
import ProvidersView from '@/components/ProvidersView.vue'
|
||||
import TargetsView from '@/components/TargetsView.vue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import UsageView from '@/components/UsageView.vue'
|
||||
@@ -28,7 +29,7 @@ const dashboard = useDashboardStore()
|
||||
// fetches from, GET /admin/api/overview, and the store's own `overview`
|
||||
// field (AdminOverviewResponse) keep their original names unchanged — the
|
||||
// rename is UI-only, not an API surface change.
|
||||
const activeView = ref<'providers' | 'usage' | 'charts'>('providers')
|
||||
const activeView = ref<'providers' | 'usage' | 'charts' | 'targets'>('providers')
|
||||
|
||||
const statusText = computed<string>(() => {
|
||||
if (dashboard.error) return `refresh failed: ${dashboard.error}`
|
||||
@@ -72,6 +73,7 @@ onMounted(() => {
|
||||
<TabsTrigger value="providers">Providers</TabsTrigger>
|
||||
<TabsTrigger value="usage">Usage</TabsTrigger>
|
||||
<TabsTrigger value="charts">Charts</TabsTrigger>
|
||||
<TabsTrigger value="targets">MCP & Agents</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="providers">
|
||||
<ProvidersView />
|
||||
@@ -82,6 +84,9 @@ onMounted(() => {
|
||||
<TabsContent value="charts">
|
||||
<ChartsView />
|
||||
</TabsContent>
|
||||
<TabsContent value="targets">
|
||||
<TargetsView />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user