gflow 0.4.18

A lightweight, single-node job scheduler written in Rust.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

import { Activity, CheckCircle2, Cpu, Timer } from "lucide-react"

import type { DashboardData } from "@/hooks/useDashboard"
import { cn } from "@/lib/utils"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

const metricTone = {
  emerald:
    "border-emerald-200 bg-emerald-50/80 text-emerald-950 dark:border-emerald-950 dark:bg-emerald-950/25 dark:text-emerald-100",
  sky: "border-sky-200 bg-sky-50/80 text-sky-950 dark:border-sky-950 dark:bg-sky-950/25 dark:text-sky-100",
  amber:
    "border-amber-200 bg-amber-50/80 text-amber-950 dark:border-amber-950 dark:bg-amber-950/25 dark:text-amber-100",
  zinc: "border-zinc-200 bg-zinc-50/80 text-zinc-950 dark:border-zinc-800 dark:bg-zinc-900/60 dark:text-zinc-100",
} as const

type MetricTone = keyof typeof metricTone

export function Overview({ data }: { data: DashboardData }) {
  const available = data.info.gpus?.filter((gpu) => gpu.available).length ?? 0
  const total = data.info.gpus?.length ?? 0
  const busy = Math.max(total - available, 0)
  const completed = data.stats.completed_jobs
  const problemJobs =
    data.stats.failed_jobs + data.stats.cancelled_jobs + data.stats.timeout_jobs

  return (
    <section className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
      <MetricCard
        icon={Activity}
        label="Running"
        value={data.stats.running_jobs}
        detail={`${data.stats.queued_jobs} queued for scheduling`}
        tone="emerald"
      />
      <MetricCard
        icon={CheckCircle2}
        label="Success"
        value={`${data.stats.success_rate.toFixed(1)}%`}
        detail={`${completed} completed · ${problemJobs} need review`}
        tone="sky"
      />
      <MetricCard
        icon={Cpu}
        label="GPU Slots"
        value={`${available}/${total}`}
        detail={`${busy} busy · ${data.stats.peak_gpu_usage} peak request`}
        tone="amber"
      />
      <MetricCard
        icon={Timer}
        label="GPU Hours"
        value={data.stats.total_gpu_hours.toFixed(1)}
        detail={`${data.stats.jobs_with_gpus} GPU jobs`}
        tone="zinc"
      />
    </section>
  )
}

function MetricCard({
  icon: Icon,
  label,
  value,
  detail,
  tone,
}: {
  icon: typeof Activity
  label: string
  value: string | number
  detail: string
  tone: MetricTone
}) {
  return (
    <Card className={cn("rounded-lg border shadow-sm", metricTone[tone])}>
      <CardHeader className="gap-3">
        <div className="flex items-center justify-between gap-3">
          <CardDescription className="font-medium text-current/70">
            {label}
          </CardDescription>
          <span className="grid size-8 place-items-center rounded-lg bg-background/80 ring-1 ring-current/10">
            <Icon className="size-4" />
          </span>
        </div>
        <CardTitle className="font-mono text-3xl leading-none">{value}</CardTitle>
      </CardHeader>
      <CardContent className="text-sm text-current/65">{detail}</CardContent>
    </Card>
  )
}