mirror of
https://github.com/lukaszraczylo/traefik-llmgateway.git
synced 2026-10-17 05:37:43 +00:00
feat(webui): redesign the admin dashboard around admin tasks
A sidebar replaces the flat tabs with seven pages, and one filter bar sets the time range, comparison period and scope for all of them. - Home: spend against budget, forecast, request rate, error rate, open breakers, top users and models, recent events and warnings. - Spend: spend over time with comparison, budget burn-down, an attribution drill-down from group to user to model, pricing health and cost avoided by free models. - Consumers: a directory with last seen and limit bars, an access matrix, and a detail page per user. - Models: the catalog with billing prices, fleet latency and error rates, and provider health. - Reliability: error, timeout, failover, 429 and 402 trends, events, and latency per provider. - Config: the redacted config and a change helper that emits YAML or users.json snippets to paste into git. - MCP & Agents: callers per target. Page state lives in the URL hash, and old tab links map to the new pages. The replaced views are removed. admin_assets_gen.go is regenerated. Claude-Session: https://claude.ai/code/session_01V5jYJNxpDFdJkyyExpADrv
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { dayOrMonthClampNotice } from '@/lib/range'
|
||||
import type { HistoryWindow } from '@/types/api'
|
||||
|
||||
/**
|
||||
* ClampedRangeNotice (N3 fix, verify-redesign-final.md) is the ONE shared
|
||||
* "this view silently clamped your range" banner for every day/month-only
|
||||
* endpoint reached through lib/range.ts's dayOrMonthWindow:
|
||||
* - UserDetail.vue's "Models used" table (usermodel totals)
|
||||
* - AttributionDrilldown.vue's usermodel level (the Spend drilldown)
|
||||
* - TargetCallers.vue (targetcaller totals)
|
||||
* An hour-resolution global range (24h/48h) has no day/month equivalent
|
||||
* for any of these — dayOrMonthWindow silently substitutes a fixed
|
||||
* 7-day day-window instead, and this renders nothing (dayOrMonthClampNotice
|
||||
* returns null) unless that substitution actually happened, so a
|
||||
* day/month-window reader never sees a spurious banner.
|
||||
*
|
||||
* Distinct from ReliabilityPage.vue's own inline month-clamp Alert — a
|
||||
* DIFFERENT clamp (hour/day -> a fixed 30-day window, stores/
|
||||
* reliability.ts's hourOrDayWindow) that stays its own local computed,
|
||||
* not this component.
|
||||
*/
|
||||
const props = defineProps<{
|
||||
window: HistoryWindow
|
||||
span: number
|
||||
}>()
|
||||
|
||||
const note = computed<string | null>(() => dayOrMonthClampNotice(props.window, props.span))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Alert v-if="note" variant="warn">
|
||||
<AlertDescription>{{ note }}</AlertDescription>
|
||||
</Alert>
|
||||
</template>
|
||||
Reference in New Issue
Block a user