@kernel-sig/console 0.1.0

package/frontend/src/pages/dashboard/DashboardPage.tsx

@@ -0,0 +1,657 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import { Tooltip } from 'antd'
+
+import { analyticsApi } from '@/api/analytics'
+import { attentionQueueApi, SEVERITY_META, SEVERITY_ORDER } from '@/api/attention'
+import { GATE_STAGE_META } from '@/api/pulls'
+import { sigApi } from '@/api/sig'
+import { useCurrentRepository } from '@/hooks/use-current-repository'
+import { Badge, TONE_COLOR } from '@/components/ui/badge'
+import { GateBadge } from '@/components/GateBadge'
+import { Card, CardBody, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { EmptyState } from '@/components/ui/empty-state'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useCurrentUser } from '@/hooks/use-current-user'
+import { cn, formatNumber } from '@/lib/utils'
+
+export function DashboardPage() {
+  const { user } = useCurrentUser()
+
+  const { repository, isLoading: reposLoading } = useCurrentRepository()
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['analytics', repository?.id],
+    queryFn: () => analyticsApi.summary(repository!.id),
+    enabled: Boolean(repository),
+  })
+
+  if (reposLoading) return <Skeleton className="h-64 w-full" />
+
+  if (!repository) {
+    return (
+      <div className="mx-auto max-w-3xl">
+        <EmptyState
+          title="尚未纳管仓库"
+          description="请先在「设置 → 仓库与同步」中配置 AtomGit 凭据并纳管仓库，随后此处会展示协作指标。"
+        />
+      </div>
+    )
+  }
+
+  if (isLoading || !data) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-56 w-full" />
+      </div>
+    )
+  }
+
+  const { overview, waiting, intervals, quality } = data
+  const openPulls = overview.pulls.open || 1
+
+  return (
+    <div className="space-y-5">
+      <header className="flex flex-wrap items-end justify-between gap-3">
+        <div>
+          <h1 className="text-base font-semibold tracking-tight">总览</h1>
+          <p className="mt-0.5 text-sm text-[var(--color-text-secondary)]">
+            {user ? `${user.display_name}，` : ''}
+            {repository.display_name ?? `${repository.owner}/${repository.name}`} 的协作现状
+          </p>
+        </div>
+        <Link
+          to="/pulls"
+          search={{ state: 'open' }}
+          className="text-sm text-[var(--color-accent)] hover:underline"
+        >
+          查看全部 PR →
+        </Link>
+      </header>
+
+      {/* 最需要被看见的一组数字：可执行的待办 + 积压风险 */}
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <MetricCard
+          label="可合入"
+          value={overview.pulls.ready_to_merge}
+          hint="CLA / CI / LGTM 均已就绪"
+          tone="success"
+          to="/pulls"
+          search={{ state: 'open', stage: ['ready_to_merge'] }}
+        />
+        <MetricCard
+          label="阻塞中"
+          value={overview.pulls.blocked}
+          hint="CI 失败 / CLA 未通过 / 被否决"
+          tone="danger"
+          to="/pulls"
+          search={{ state: 'open', stage: ['ci_failed', 'cla_denied', 'rejected'] }}
+        />
+        <MetricCard
+          label="待评审"
+          value={waiting.pending_review_count}
+          hint={`中位等待 ${waiting.median_waiting_days} 天`}
+          tone="warning"
+          to="/pulls"
+          search={{ state: 'open', stage: ['review_pending'] }}
+        />
+        <MetricCard
+          label="超 30 天未评审"
+          value={waiting.over_30_days}
+          hint={`最长已等 ${Math.round(waiting.max_waiting_days)} 天`}
+          tone="danger"
+          to="/pulls"
+          // 与后端 waiting_time_stats 同口径：待评审且创建超过 30 天
+          search={{ state: 'open', stage: ['review_pending'], waiting_days_gte: 30 }}
+        />
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <div className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>门禁阶段分布</CardTitle>
+              <CardDescription>定位瓶颈环节：PR 卡在哪一步</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-2.5">
+              {data.stages.map((item) => (
+                <StageBar key={item.stage} stage={item.stage} count={item.count} total={openPulls} />
+              ))}
+            </CardContent>
+          </Card>
+
+          <AttentionCard repositoryId={repository.id} />
+        </div>
+
+        <div className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>流转效率</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <StatRow label="已合并 PR" value={formatNumber(intervals.merged_count)} />
+              <StatRow
+                label="合并周期中位数"
+                value={`${intervals.median_merge_days} 天`}
+                hint="从创建到合入"
+              />
+              <StatRow label="合并周期平均" value={`${intervals.avg_merge_days} 天`} />
+              <StatRow
+                label="最近 7 天合并"
+                value={formatNumber(overview.pulls.merged_last_7d)}
+              />
+              <StatRow
+                label="最近 7 天新增"
+                value={formatNumber(overview.pulls.created_last_7d)}
+              />
+            </CardContent>
+          </Card>
+
+          {/* 与「关注队列」划清界限：那边是**由规则判定出来的待办**，
+              这边是**仓库的当前存量**。原先这张卡叫「需要关注」并重复列出
+              合并冲突，与队列里的同一条规则撞名又撞数据，读的人自然要问
+              "这两个到底有什么不一样"。 */}
+          <Card>
+            <CardHeader>
+              <CardTitle>仓库概况</CardTitle>
+              <CardDescription>未关闭对象的存量与库内检查项</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <StatRow
+                label="未关闭 PR"
+                value={formatNumber(overview.pulls.open)}
+                hint="含全部门禁阶段"
+              />
+              <StatRow label="未关闭 Issue" value={formatNumber(overview.issues.open)} />
+              <StatRow label="草稿 PR" value={formatNumber(quality.drafts)} />
+              <StatRow
+                label="二进制文件"
+                value={formatNumber(quality.binary_files)}
+                hint="内核仓库禁止提交"
+                tone={quality.binary_files > 0 ? 'danger' : undefined}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      <VersionAndMeeting />
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>评审人工作量</CardTitle>
+            <CardDescription>
+              取自评论中的 /lgtm 指令 —— openEuler 的评审人身份记录在评论里，不在标签里
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {data.reviewers.length === 0 ? (
+              <p className="text-sm text-[var(--color-text-muted)]">
+                暂无评审事件。需先同步 PR 详情以拉取评论。
+              </p>
+            ) : (
+              <ul className="space-y-2">
+                {data.reviewers.slice(0, 8).map((reviewer) => (
+                  <li key={reviewer.actor_login} className="flex items-center gap-3">
+                    <span className="w-36 truncate text-sm">{reviewer.actor_login}</span>
+                    <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--color-surface-2)]">
+                      <div
+                        className="h-full rounded-full bg-[var(--color-accent)]"
+                        style={{
+                          width: `${Math.max(6, (reviewer.total / data.reviewers[0].total) * 100)}%`,
+                        }}
+                      />
+                    </div>
+                    <span className="w-10 text-right font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
+                      {reviewer.total}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </CardContent>
+        </Card>
+
+        <div className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>目标分支分布</CardTitle>
+              <CardDescription>未关闭 PR 按目标分支</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {data.branches.slice(0, 6).map((item) => (
+                <div key={item.branch} className="flex items-center gap-3 text-sm">
+                  <code className="w-44 truncate text-xs text-[var(--color-text-secondary)]">
+                    {item.branch}
+                  </code>
+                  <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--color-surface-2)]">
+                    <div
+                      className="h-full rounded-full bg-[var(--color-info)]"
+                      style={{
+                        width: `${Math.max(4, (item.count / data.branches[0].count) * 100)}%`,
+                      }}
+                    />
+                  </div>
+                  <span className="w-10 text-right font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
+                    {item.count}
+                  </span>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>活跃作者</CardTitle>
+              <CardDescription>已排除自动化账号</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {data.authors.slice(0, 6).map((item) => (
+                <div key={item.author} className="flex items-center justify-between gap-3 text-sm">
+                  <span
+                    className={cn(
+                      'truncate',
+                      item.is_bot && 'text-[var(--color-text-muted)]',
+                    )}
+                  >
+                    {item.author}
+                  </span>
+                  <span className="font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
+                    {item.count}
+                  </span>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 关注队列摘要。
+ *
+ * 仪表盘上最该被看见的不是总量，而是"有多少组必须动手"。
+ * 用的口径与队列页同源（/attention/summary）—— 各自算一遍的话，
+ * 关掉一条规则后两个页面会显示两个不同的数字，而且从界面上看不出谁对。
+ */
+function AttentionCard({ repositoryId }: { repositoryId: string }) {
+  const { data } = useQuery({
+    queryKey: ['attention-summary', repositoryId],
+    queryFn: () => attentionQueueApi.summary(repositoryId),
+  })
+
+  if (!data || data.total === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>关注队列</CardTitle>
+          <CardDescription>由规则自动检出的待办</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-[var(--color-text-muted)]">
+            当前没有待办。关注项由定时任务重算，仓库刚纳管时请先完成一次同步。
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-baseline justify-between gap-3">
+          <div>
+            <CardTitle>关注队列</CardTitle>
+            <CardDescription>{formatNumber(data.total)} 个对象收敛为 {data.group_count} 组</CardDescription>
+          </div>
+          <Link
+            to="/attention"
+            className="shrink-0 text-xs text-[var(--color-accent)] hover:underline"
+          >
+            逐组处理 →
+          </Link>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-2.5">
+        <div className="flex flex-wrap gap-1.5">
+          {SEVERITY_ORDER.map((severity) => {
+            const count = data.by_severity[severity] ?? 0
+            if (count === 0) return null
+            return (
+              <span
+                key={severity}
+                className="inline-flex items-center gap-1.5 rounded-full border border-[var(--color-border-subtle)] px-2 py-0.5 text-2xs"
+              >
+                {SEVERITY_META[severity].label}
+                <span className="font-mono tabular-nums">{formatNumber(count)}</span>
+              </span>
+            )
+          })}
+        </div>
+
+        <ul className="space-y-1">
+          {data.top.map((group) => (
+            <li key={group.rule}>
+              <Link
+                to="/attention"
+                className="-mx-1.5 flex items-center gap-3 rounded-[var(--radius-control)] px-1.5 py-1 text-sm hover:bg-[var(--color-surface-2)]"
+              >
+                <Badge tone={(SEVERITY_META[group.severity]?.tone ?? 'neutral') as never}>
+                  {SEVERITY_META[group.severity]?.label}
+                </Badge>
+                <span className="min-w-0 flex-1 truncate">{group.label}</span>
+                {group.oldest_days !== null && (
+                  <span className="shrink-0 font-mono text-2xs tabular-nums text-[var(--color-text-muted)]">
+                    最久 {group.oldest_days} 天
+                  </span>
+                )}
+                <span className="shrink-0 font-mono text-sm tabular-nums">
+                  {formatNumber(group.count)}
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}
+
+function MetricCard({
+  label,
+  value,
+  hint,
+  tone,
+  to,
+  search,
+}: {
+  label: string
+  value: number
+  hint?: string
+  tone?: 'success' | 'warning' | 'danger'
+  to?: '/pulls' | '/issues'
+  /** 目标是列表页时带上筛选条件：点进去看到的就该是这张卡片数的那批。 */
+  search?: { state?: string; stage?: string[]; kind?: string[]; waiting_days_gte?: number }
+}) {
+  const toneClass = {
+    success: 'text-[var(--color-success)]',
+    warning: 'text-[var(--color-warning)]',
+    danger: 'text-[var(--color-danger)]',
+  }[tone ?? 'success']
+
+  const content = (
+    <Card className="h-full transition-[border-color,box-shadow] duration-150 hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-card-hover)]">
+      <CardBody>
+        <div className="text-xs text-[var(--color-text-muted)]">{label}</div>
+        <div className={cn('mt-1 font-mono text-2xl tabular-nums', toneClass)}>
+          {formatNumber(value)}
+        </div>
+        {hint && (
+          <div className="mt-1 text-2xs text-[var(--color-text-muted)]">{hint}</div>
+        )}
+      </CardBody>
+    </Card>
+  )
+
+  if (!to) return content
+  if (to === '/pulls') {
+    return (
+      <Link to="/pulls" search={search ?? {}} className="block">
+        {content}
+      </Link>
+    )
+  }
+  return (
+    <Link to="/issues" className="block">
+      {content}
+    </Link>
+  )
+}
+
+/**
+ * 门禁阶段一行。
+ *
+ * 整行是链接：看到"CI 失败 83"却点不进去，就得自己去列表页重新选一遍筛选 ——
+ * 那正是这个平台要消掉的那一步。
+ *
+ * 条形用该阶段的语义色而不是统一的灰色：这张卡存在的意义是"一眼看出卡在哪"，
+ * 十行灰条要看数字才能分辨，等于把图表退化成了表格。
+ */
+function StageBar({
+  stage,
+  count,
+  total,
+}: {
+  stage: keyof typeof GATE_STAGE_META
+  count: number
+  total: number
+}) {
+  const meta = GATE_STAGE_META[stage]
+  const percent = Math.max(1.5, (count / total) * 100)
+
+  return (
+    <Link
+      to="/pulls"
+      search={{ state: 'open', stage: [stage] }}
+      title={`查看处于「${meta.label}」的 PR`}
+      className="-mx-1.5 flex items-center gap-3 rounded-[var(--radius-control)] px-1.5 py-1 text-sm transition-colors duration-150 hover:bg-[var(--color-surface-2)]"
+    >
+      <span className="w-24 shrink-0">
+        <GateBadge stage={stage} />
+      </span>
+      <div className="h-2 flex-1 overflow-hidden rounded-full bg-[var(--color-surface-2)]">
+        <div
+          className="h-full rounded-full"
+          style={{ width: `${percent}%`, backgroundColor: TONE_COLOR[meta.tone] }}
+        />
+      </div>
+      <span className="w-12 text-right font-mono text-xs tabular-nums text-[var(--color-text-secondary)]">
+        {count}
+      </span>
+      <span className="w-10 text-right font-mono text-2xs tabular-nums text-[var(--color-text-muted)]">
+        {Math.round((count / total) * 100)}%
+      </span>
+    </Link>
+  )
+}
+
+function StatRow({
+  label,
+  value,
+  hint,
+  tone,
+}: {
+  label: string
+  value: string
+  hint?: string
+  tone?: 'warning' | 'danger'
+}) {
+  return (
+    <div className="flex items-baseline justify-between gap-3">
+      <div>
+        <div className="text-sm text-[var(--color-text-secondary)]">{label}</div>
+        {hint && <div className="text-2xs text-[var(--color-text-muted)]">{hint}</div>}
+      </div>
+      <div
+        className={cn(
+          'font-mono text-base tabular-nums',
+          tone === 'danger' && 'text-[var(--color-danger)]',
+          tone === 'warning' && 'text-[var(--color-warning)]',
+        )}
+      >
+        {value}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 版本动态与下次例会。
+ *
+ * 放在仪表盘上而不是只留在各自的页面里：维护者每天打开的是总览，
+ * 而"哪个版本刚合入过、下一次例会在什么时候、该谁主持"属于开屏就该看到的
+ * 东西 —— 要再点两次才能看到的信息，实际使用中不会被看到。
+ */
+function VersionAndMeeting() {
+  const { repository } = useCurrentRepository()
+
+  const { data: branches } = useQuery({
+    queryKey: ['branches', repository?.id],
+    queryFn: () => sigApi.branches(repository!.id),
+    enabled: Boolean(repository),
+  })
+
+  const { data: meetings } = useQuery({
+    queryKey: ['meetings'],
+    queryFn: () => sigApi.meetings(undefined, 10),
+  })
+
+  const upcoming = meetings?.find((item) => item.status === 'scheduled')
+  const recent = meetings?.find((item) => item.status === 'done')
+  const active = (branches ?? []).filter((item) => item.kind === 'olk' || item.kind === 'lts')
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[2fr_1fr]">
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap items-baseline justify-between gap-2">
+            <CardTitle>版本动态</CardTitle>
+            <Link
+              to="/branches"
+              className="text-xs text-[var(--color-accent)] hover:underline"
+            >
+              全部版本与分支 →
+            </Link>
+          </div>
+          <CardDescription>各版本当前 tag、合入量与近 30 天进度</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2.5">
+          {active.length === 0 ? (
+            <p className="text-sm text-[var(--color-text-muted)]">暂无分支数据。</p>
+          ) : (
+            active.slice(0, 6).map((item) => (
+              <div key={item.name} className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+                <Tooltip title={item.name}>
+                  <Link
+                    to="/branches/$branch"
+                    params={{ branch: item.name }}
+                    className="w-52 shrink-0 truncate font-mono text-xs hover:text-[var(--color-accent)]"
+                  >
+                    {item.name}
+                  </Link>
+                </Tooltip>
+                <span className="w-32 shrink-0 font-mono text-2xs text-[var(--color-text-muted)]">
+                  {item.latest_tag ?? '—'}
+                </span>
+                <Link
+                  to="/pulls"
+                  search={{ branch: [item.name] }}
+                  className="shrink-0 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-accent)]"
+                  title="查看该分支的待处理 PR"
+                >
+                  待处理 {item.open_count}
+                </Link>
+                <span className="shrink-0 text-xs text-[var(--color-text-secondary)]">
+                  已合入 {formatNumber(item.merged_count)}
+                </span>
+                <span className="ml-auto shrink-0 font-mono text-xs tabular-nums text-[var(--color-success)]">
+                  近 30 天 +{item.merged_recent}
+                </span>
+              </div>
+            ))
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap items-baseline justify-between gap-2">
+            <CardTitle>SIG 例会</CardTitle>
+            <Link
+              to="/meetings"
+              className="text-xs text-[var(--color-accent)] hover:underline"
+            >
+              全部例会 →
+            </Link>
+          </div>
+          <CardDescription>双周例会，数据来自 Etherpad 纪要</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {upcoming ? (
+            <div className="rounded-[var(--radius-control)] border border-[var(--color-border-subtle)] p-3">
+              <div className="flex flex-wrap items-center gap-2">
+                <Badge tone="info">下次</Badge>
+                <span className="font-mono text-sm tabular-nums">{upcoming.held_on}</span>
+                {upcoming.start_time && (
+                  <span className="text-xs text-[var(--color-text-muted)]">
+                    {upcoming.start_time}
+                  </span>
+                )}
+              </div>
+              <p className="mt-1 text-xs text-[var(--color-text-secondary)]">
+                主持 {upcoming.host ?? '—'}
+                {upcoming.next_host && ` · 下次轮值 ${upcoming.next_host}`}
+              </p>
+              <p className="mt-0.5 text-xs text-[var(--color-text-muted)]">
+                已列入 {upcoming.agenda_count} 个议题
+              </p>
+              <div className="mt-2 flex flex-wrap gap-3">
+                <Link
+                  to="/meetings/$meetingId"
+                  params={{ meetingId: upcoming.id }}
+                  className="text-xs text-[var(--color-accent)] hover:underline"
+                >
+                  议题详情 →
+                </Link>
+                {upcoming.meeting_url && (
+                  <a
+                    href={upcoming.meeting_url}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    className="text-xs text-[var(--color-accent)] hover:underline"
+                  >
+                    会议链接 ↗
+                  </a>
+                )}
+              </div>
+            </div>
+          ) : (
+            <p className="text-sm text-[var(--color-text-muted)]">暂无待召开的例会。</p>
+          )}
+
+          {recent && (
+            <div>
+              <p className="mb-1 text-xs text-[var(--color-text-muted)]">
+                上次例会 · {recent.held_on}
+              </p>
+              <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+                <span className="text-[var(--color-text-secondary)]">
+                  主持 {recent.host ?? '—'}
+                </span>
+                <span className="text-[var(--color-text-secondary)]">
+                  议题 {recent.agenda_count}
+                </span>
+                {recent.report_count > 0 && (
+                  <span className="text-[var(--color-text-secondary)]">
+                    版本报告 {recent.report_count}
+                  </span>
+                )}
+                <Link
+                  to="/meetings/$meetingId"
+                  params={{ meetingId: recent.id }}
+                  className="text-[var(--color-accent)] hover:underline"
+                >
+                  查看 →
+                </Link>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}