feat: enhance dashboard and monitoring components with new analytics skeletons

Added the AnalyticsDashboardSkeleton component to improve loading states in the dashboard and monitoring pages. Refactored the dashboard to utilize the new skeleton for initial loading, replacing the previous SectionCardsSkeleton. Updated the overview queries to increase job limit from 10 to 100 for better data handling. Enhanced the network and operations components to incorporate new analytics cards, streamlining the user experience and improving data presentation.

apps/web/src/routes/_auth/monitoring.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, useSearch } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { Activity, AlertTriangle, Bird, Database, Gauge, HeartPulse, Info, ListTodo, RefreshCw } from 'lucide-react'
+import { Activity, AlertTriangle, Bird, Database, HeartPulse, Info, ListTodo, RefreshCw } from 'lucide-react'
 
 import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
 import { Badge } from '@evobgp/ui/components/badge'
@@ -9,11 +9,14 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evob
 import { Separator } from '@evobgp/ui/components/separator'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
 
+import {
+  DashboardOperationsFlowCard,
+  MonitoringHealthCard,
+} from '@/components/analytics'
 import { MonitoringReadyGrid } from '@/components/monitoring/monitoring-ready-grid'
 import { PageHeader } from '@/components/page-header'
 import { QueryState } from '@/components/query-state'
-import { SectionCards, type SectionCardItem } from '@/components/section-cards'
-import { SectionCardsSkeleton } from '@/components/skeletons'
+import { AnalyticsDashboardSkeleton } from '@/components/skeletons'
 
 import {
   monitoringHealthQueryOptions,
@@ -24,6 +27,7 @@ import {
 } from '@/queries/monitoring'
 import { networkBirdQueryOptions } from '@/queries/network'
 import { operationsJobsQueryOptions } from '@/queries/operations'
+import { overviewModulesQueryOptions } from '@/queries/overview'
 
 export const Route = createFileRoute('/_auth/monitoring')({
   component: MonitoringComponent,
@@ -42,53 +46,25 @@ function MonitoringComponent() {
   const versionQ = useQuery(monitoringVersionQueryOptions())
   const birdQ = useQuery(networkBirdQueryOptions())
   const jobsQ = useQuery(operationsJobsQueryOptions())
+  const modulesQ = useQuery(overviewModulesQueryOptions())
 
   const refreshing =
     healthQ.isFetching ||
     readyQ.isFetching ||
     versionQ.isFetching ||
     birdQ.isFetching ||
-    jobsQ.isFetching
+    jobsQ.isFetching ||
+    modulesQ.isFetching
 
   const jobs = jobsQ.data?.items ?? []
-  const running = jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+  const modules = modulesQ.data?.items ?? []
   const failed = jobs.filter((j) =>
     ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
   ).length
 
   const versionText = formatVersion(versionQ.data)
-
-  const items: SectionCardItem[] = [
-    {
-      label: 'Общий статус',
-      value: overallStatusLabel({ health: healthQ.data, ready: readyQ.data, jobsFailed: failed }),
-      icon: <Gauge className="size-4" />,
-      hint: overallHint({ health: healthQ.data, jobsFailed: failed }),
-    },
-    {
-      label: 'BGP сессии',
-      value: birdQ.data
-        ? `${birdQ.data.bgp_established}/${birdQ.data.bgp_sessions_total}`
-        : '—',
-      icon: <Bird className="size-4" />,
-      hint: birdQ.data?.birdc_configured
-        ? 'Established / total на API-хосте'
-        : 'birdc не настроен',
-    },
-    {
-      label: 'Задачи',
-      value: running,
-      icon: <Activity className="size-4" />,
-      hint: `активных из ${jobs.length}`,
-      variant: failed > 0 ? 'warning' : 'default',
-    },
-    {
-      label: 'Версия',
-      value: versionText,
-      icon: <Gauge className="size-4" />,
-      hint: versionQ.data?.git_sha ?? versionQ.data?.build_time ?? 'GET /v1/version',
-    },
-  ]
+  const analyticsLoading =
+    (healthQ.isLoading || readyQ.isLoading || jobsQ.isLoading) && jobs.length === 0
 
   function refetchAll() {
     void healthQ.refetch()
@@ -96,6 +72,7 @@ function MonitoringComponent() {
     void versionQ.refetch()
     void birdQ.refetch()
     void jobsQ.refetch()
+    void modulesQ.refetch()
   }
 
   const failedJobs = jobs
@@ -123,7 +100,29 @@ function MonitoringComponent() {
         </TabsList>
 
         <TabsContent value="system" className="mt-4 flex flex-col gap-6">
-          {refreshing ? <SectionCardsSkeleton count={4} /> : <SectionCards items={items} />}
+          {analyticsLoading ? (
+            <AnalyticsDashboardSkeleton />
+          ) : (
+            <div className="grid gap-4 lg:grid-cols-2">
+              <MonitoringHealthCard
+                healthOk={healthQ.data?.ok ?? false}
+                ready={readyQ.data}
+                loading={healthQ.isLoading || readyQ.isLoading}
+              />
+              <DashboardOperationsFlowCard jobs={jobs} modules={modules} loading={jobsQ.isLoading} />
+            </div>
+          )}
+
+          <Alert className="border-muted bg-muted/30">
+            <Info className="size-4" />
+            <AlertTitle className="text-sm">
+              Версия API: {versionText}
+              {versionQ.data?.git_sha ? ` · ${versionQ.data.git_sha.slice(0, 8)}` : ''}
+            </AlertTitle>
+            <AlertDescription className="text-xs">
+              {overallHint({ health: healthQ.data, jobsFailed: failed })}
+            </AlertDescription>
+          </Alert>
 
           <div className="grid gap-4 lg:grid-cols-2">
             <Card>
@@ -179,7 +178,7 @@ function MonitoringComponent() {
               </CardHeader>
               <CardContent className="space-y-4">
                 <div className="flex flex-wrap gap-4 text-sm">
-                  <Metric label="Активных" value={running} />
+                  <Metric label="Активных" value={jobs.filter((j) => j.status === 'running' || j.status === 'queued').length} />
                   <Metric
                     label="С ошибками"
                     value={failed}
@@ -322,13 +321,6 @@ interface OverallInput {
   jobsFailed: number
 }
 
-function overallStatusLabel(input: OverallInput): string {
-  if (!input.health?.ok) return 'Ошибка'
-  if (input.jobsFailed > 0) return 'Внимание'
-  if (input.ready?.status && input.ready.status !== 'ok') return 'Внимание'
-  return 'В норме'
-}
-
 function overallHint(input: OverallInput): string {
   if (!input.health?.ok) return 'API недоступен или возвращает ошибку'
   if (input.jobsFailed > 0) return `Есть провальные задачи (${input.jobsFailed})`