mirror of
https://github.com/lukaszraczylo/traefik-llmgateway.git
synced 2026-10-13 04:58:50 +00:00
lukaszraczylo
ee49467e64
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
39 lines
1.5 KiB
Vue
39 lines
1.5 KiB
Vue
<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>
|