OpenGFW/web/frontend/src/views/DashboardView.vue

<script setup lang="ts">
import { ArrowRight, Ban, Clock, Cpu, ShieldCheck, TriangleAlert, Waves } from 'lucide-vue-next'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

import BarList from '@/components/BarList.vue'
import EventItem from '@/components/EventItem.vue'
import PageHeader from '@/components/PageHeader.vue'
import StatCard from '@/components/StatCard.vue'
import TrafficChart from '@/components/TrafficChart.vue'
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Skeleton,
  Tabs,
  TabsList,
  TabsTrigger,
} from '@/components/ui'
import { useLive } from '@/composables/useLive'
import { t } from '@/i18n'
import { compact, duration, percent } from '@/lib/format'

const router = useRouter()
const { metrics, events } = useLive()

const range = ref('short')
const buckets = computed(
  () => (range.value === 'short' ? metrics.value?.short : metrics.value?.long) ?? [],
)

const recent = computed(() => events.value.slice(0, 8))

const verdicts = computed(() => {
  const a = metrics.value?.actions
  if (!a) return []
  const total = a.allow + a.block + a.drop + a.modify || 1
  return [
    { key: 'allow', label: t('action.allow'), value: a.allow, color: 'bg-allow', total },
    { key: 'block', label: t('action.block'), value: a.block, color: 'bg-block', total },
    { key: 'drop', label: t('action.drop'), value: a.drop, color: 'bg-drop', total },
    { key: 'modify', label: t('action.modify'), value: a.modify, color: 'bg-modify', total },
  ].filter((v) => v.value > 0 || v.key === 'allow' || v.key === 'block')
})

const protocols = computed(() => {
  const s = metrics.value?.streams
  if (!s) return []
  const total = s.total || 1
  return [
    { key: 'tcp', label: t('dashboard.tcp'), value: s.tcp, color: 'bg-tcp', total },
    { key: 'udp', label: t('dashboard.udp'), value: s.udp, color: 'bg-udp', total },
  ]
})

const blockedTotal = computed(() => {
  const a = metrics.value?.actions
  return a ? a.block + a.drop : 0
})
</script>

<template>
  <div>
    <PageHeader :title="t('dashboard.title')" :description="t('dashboard.subtitle')" />

    <div v-if="!metrics" class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
      <Skeleton v-for="i in 6" :key="i" class="h-20" />
    </div>

    <template v-else>
      <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
        <StatCard
          :label="t('dashboard.streams')"
          :value="compact(metrics.streams.total)"
          :hint="`${compact(metrics.streams.tcp)} / ${compact(metrics.streams.udp)}`"
          :icon="Waves"
        />
        <StatCard
          :label="t('dashboard.blocked')"
          :value="compact(blockedTotal)"
          :hint="`${percent(blockedTotal, metrics.streams.total)}%`"
          :icon="Ban"
          tone="block"
        />
        <StatCard
          :label="t('dashboard.allowed')"
          :value="compact(metrics.actions.allow)"
          :icon="ShieldCheck"
          tone="allow"
        />
        <StatCard
          :label="t('dashboard.modified')"
          :value="compact(metrics.actions.modify)"
          :icon="Waves"
          tone="modify"
        />
        <StatCard
          :label="t('dashboard.uptime')"
          :value="duration(metrics.uptimeSeconds)"
          :icon="Clock"
        />
        <StatCard
          :label="metrics.errors > 0 ? t('dashboard.errors') : t('dashboard.workers')"
          :value="metrics.errors > 0 ? compact(metrics.errors) : String(metrics.workers)"
          :icon="metrics.errors > 0 ? TriangleAlert : Cpu"
          :tone="metrics.errors > 0 ? 'drop' : 'default'"
        />
      </div>

      <div class="mt-3 grid gap-3 lg:grid-cols-3">
        <Card class="lg:col-span-2">
          <CardHeader class="flex-row items-start justify-between gap-3">
            <div class="min-w-0">
              <CardTitle>{{ t('dashboard.traffic') }}</CardTitle>
              <CardDescription>{{ t('dashboard.trafficDesc') }}</CardDescription>
            </div>
            <Tabs v-model="range" class="shrink-0">
              <TabsList class="h-8">
                <TabsTrigger value="short" class="text-xs">{{ t('dashboard.range10m') }}</TabsTrigger>
                <TabsTrigger value="long" class="text-xs">{{ t('dashboard.range1h') }}</TabsTrigger>
              </TabsList>
            </Tabs>
          </CardHeader>
          <CardContent>
            <TrafficChart :buckets="buckets" />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{{ t('dashboard.verdicts') }}</CardTitle>
          </CardHeader>
          <CardContent class="flex flex-col gap-4">
            <div>
              <div class="bg-muted flex h-2 overflow-hidden rounded-full">
                <div
                  v-for="v in verdicts"
                  :key="v.key"
                  :class="v.color"
                  :style="{ width: `${(v.value / v.total) * 100}%` }"
                />
              </div>
              <div class="mt-2.5 flex flex-col gap-1.5">
                <div
                  v-for="v in verdicts"
                  :key="v.key"
                  class="flex items-center gap-2 text-xs sm:text-[13px]"
                >
                  <span :class="['size-2 rounded-full', v.color]" />
                  <span class="text-muted-foreground">{{ v.label }}</span>
                  <span class="ml-auto font-medium tabular-nums">{{ compact(v.value) }}</span>
                </div>
              </div>
            </div>

            <div>
              <p class="text-muted-foreground mb-2 text-xs font-medium">
                {{ t('dashboard.protocols') }}
              </p>
              <div class="bg-muted flex h-2 overflow-hidden rounded-full">
                <div
                  v-for="p in protocols"
                  :key="p.key"
                  :class="p.color"
                  :style="{ width: `${(p.value / p.total) * 100}%` }"
                />
              </div>
              <div class="mt-2.5 flex flex-col gap-1.5">
                <div
                  v-for="p in protocols"
                  :key="p.key"
                  class="flex items-center gap-2 text-xs sm:text-[13px]"
                >
                  <span :class="['size-2 rounded-full', p.color]" />
                  <span class="text-muted-foreground">{{ p.label }}</span>
                  <span class="ml-auto font-medium tabular-nums">{{ compact(p.value) }}</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <div class="mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle>{{ t('dashboard.topHosts') }}</CardTitle>
            <CardDescription>{{ t('dashboard.topHostsDesc') }}</CardDescription>
          </CardHeader>
          <CardContent>
            <BarList :items="metrics.topHosts" :empty="t('common.empty')" />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{{ t('dashboard.topBlocked') }}</CardTitle>
          </CardHeader>
          <CardContent>
            <BarList :items="metrics.topBlockedIPs" tone="block" :empty="t('common.empty')" />
          </CardContent>
        </Card>

        <Card class="md:col-span-2 xl:col-span-1">
          <CardHeader>
            <CardTitle>{{ t('dashboard.topRules') }}</CardTitle>
          </CardHeader>
          <CardContent>
            <BarList :items="metrics.topRules" tone="allow" :empty="t('common.empty')" />
          </CardContent>
        </Card>
      </div>

      <Card class="mt-3">
        <CardHeader class="flex-row items-center justify-between">
          <CardTitle>{{ t('dashboard.recent') }}</CardTitle>
          <Button variant="ghost" size="sm" @click="router.push('/events')">
            {{ t('dashboard.viewAll') }}
            <ArrowRight class="size-3.5" />
          </Button>
        </CardHeader>
        <CardContent class="px-1.5 sm:px-2.5">
          <div v-if="recent.length" class="flex flex-col">
            <EventItem
              v-for="event in recent"
              :key="event.seq"
              :event="event"
              @select="router.push('/events')"
            />
          </div>
          <p v-else class="text-muted-foreground py-6 text-center text-xs">
            {{ t('events.empty') }}
          </p>
        </CardContent>
      </Card>
    </template>
  </div>
</template>