mirror of
https://github.com/LittleQuartZ/addmon.git
synced 2026-02-07 02:45:28 +07:00
refactor: rename app crate and binary names to addmon for consistency
This commit is contained in:
parent
d19a7bdaa0
commit
cb30287fbd
5 changed files with 127 additions and 62 deletions
|
|
@ -2,7 +2,7 @@
|
|||
"$schema": "https://schema.tauri.app/config/2",
|
||||
"productName": "addmon",
|
||||
"version": "0.1.0",
|
||||
"identifier": "com.tauri.dev",
|
||||
"identifier": "com.littlequartz.addmon",
|
||||
"build": {
|
||||
"frontendDist": "../dist",
|
||||
"devUrl": "http://localhost:3001",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import * as React from "react";
|
||||
import { format } from "date-fns";
|
||||
import { Plus, Link, Link2Off } from "lucide-react";
|
||||
import { Link, Link2Off, Plus } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Incident, ProcessedAlert } from "@/lib/types/alerts";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
|
|
@ -15,6 +13,8 @@ import {
|
|||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { Incident, ProcessedAlert } from "@/lib/types/alerts";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface IncidentManagerProps {
|
||||
incidents: Incident[];
|
||||
|
|
@ -199,7 +199,7 @@ export function IncidentManager({
|
|||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="pt-0 pb-3 text-[10px] text-muted-foreground">
|
||||
<CardFooter className="pt-3 pb-3 text-[10px] text-muted-foreground">
|
||||
<div className="flex items-center gap-1.5 w-full">
|
||||
<div
|
||||
className={cn(
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import type { KpiMetrics } from "@/lib/types/alerts";
|
||||
import { KPI_THRESHOLDS } from "@/lib/types/alerts";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface KpiDashboardProps {
|
||||
|
|
@ -11,11 +12,11 @@ interface KpiDashboardProps {
|
|||
export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card className="rounded-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Error Coverage
|
||||
Alert Coverage Ratio
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
|
@ -26,17 +27,7 @@ export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
|
|||
<Card className="rounded-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Total Downtime
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-7 w-20 rounded-none" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Invalid Alerts
|
||||
False Positive Rate
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
|
@ -44,6 +35,23 @@ export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
|
|||
<Skeleton className="mt-1 h-4 w-32 rounded-none" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Uptime Ratio</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-7 w-20 rounded-none" />
|
||||
<Skeleton className="mt-1 h-4 w-32 rounded-none" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Verdict</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Skeleton className="h-7 w-20 rounded-none" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -58,29 +66,35 @@ export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
|
|||
);
|
||||
}
|
||||
|
||||
const coverageColor =
|
||||
kpis.errorCoverageRatio > 80
|
||||
? "text-green-500"
|
||||
: kpis.errorCoverageRatio > 50
|
||||
? "text-yellow-500"
|
||||
: "text-destructive";
|
||||
const alertCoverageRatio = kpis.errorCoverageRatio;
|
||||
const falsePositiveRate = kpis.invalidAlertRatio;
|
||||
const MONTHS_MS = 30 * 24 * 60 * 60 * 1000 * 3; // 3 months
|
||||
const uptimeRatio = ((MONTHS_MS - kpis.overallDowntimeMs) / MONTHS_MS) * 100;
|
||||
|
||||
const invalidColor =
|
||||
kpis.invalidAlertRatio < 10
|
||||
? "text-green-500"
|
||||
: kpis.invalidAlertRatio < 25
|
||||
? "text-yellow-500"
|
||||
: "text-destructive";
|
||||
const coveragePassed =
|
||||
alertCoverageRatio >= KPI_THRESHOLDS.alertCoverageRatio;
|
||||
const fpPassed = falsePositiveRate <= KPI_THRESHOLDS.falsePositiveRate;
|
||||
const uptimePassed = uptimeRatio >= KPI_THRESHOLDS.uptimeRatio;
|
||||
const isEffective = coveragePassed && fpPassed && uptimePassed;
|
||||
|
||||
const coverageColor = coveragePassed ? "text-green-500" : "text-destructive";
|
||||
const fpColor = fpPassed ? "text-green-500" : "text-destructive";
|
||||
const uptimeColor = uptimePassed ? "text-green-500" : "text-destructive";
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card className="rounded-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Error Coverage</CardTitle>
|
||||
<CardTitle className="text-sm font-medium">
|
||||
Alert Coverage Ratio
|
||||
</CardTitle>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
≥{KPI_THRESHOLDS.alertCoverageRatio}%
|
||||
</span>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className={cn("text-2xl font-bold", coverageColor)}>
|
||||
{kpis.errorCoverageRatio.toFixed(1)}%
|
||||
{alertCoverageRatio.toFixed(1)}%
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{kpis.coveredIncidents} of {kpis.totalIncidents} incidents
|
||||
|
|
@ -90,28 +104,64 @@ export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
|
|||
|
||||
<Card className="rounded-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Downtime</CardTitle>
|
||||
<CardTitle className="text-sm font-medium">
|
||||
False Positive Rate
|
||||
</CardTitle>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
≤{KPI_THRESHOLDS.falsePositiveRate}%
|
||||
</span>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{kpis.overallDowntimeFormatted}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="rounded-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Invalid Alerts</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className={cn("text-2xl font-bold", invalidColor)}>
|
||||
{kpis.invalidAlertRatio.toFixed(1)}%
|
||||
<div className={cn("text-2xl font-bold", fpColor)}>
|
||||
{falsePositiveRate.toFixed(1)}%
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{kpis.invalidAlerts} of {kpis.totalFiringAlerts} alerts
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="rounded-none">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Uptime Ratio</CardTitle>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
≥{KPI_THRESHOLDS.uptimeRatio}%
|
||||
</span>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className={cn("text-2xl font-bold", uptimeColor)}>
|
||||
{uptimeRatio.toFixed(2)}%
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Downtime: {kpis.overallDowntimeFormatted}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className={cn(
|
||||
"rounded-none border-2",
|
||||
isEffective ? "border-green-500/50" : "border-destructive/50",
|
||||
)}
|
||||
>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Verdict</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className={cn(
|
||||
"text-xl font-bold",
|
||||
isEffective ? "text-green-500" : "text-destructive",
|
||||
)}
|
||||
>
|
||||
{isEffective ? "EFFECTIVE" : "NOT EFFECTIVE"}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{[coveragePassed, fpPassed, uptimePassed].filter(Boolean).length}/3
|
||||
KPIs passed
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,19 @@ export interface KpiMetrics {
|
|||
invalidAlerts: number;
|
||||
}
|
||||
|
||||
export const KPI_THRESHOLDS = {
|
||||
alertCoverageRatio: 99,
|
||||
falsePositiveRate: 20,
|
||||
uptimeRatio: 99.9,
|
||||
} as const;
|
||||
|
||||
export interface EffectivenessVerdict {
|
||||
isEffective: boolean;
|
||||
alertCoveragePassed: boolean;
|
||||
falsePositivePassed: boolean;
|
||||
uptimePassed: boolean;
|
||||
}
|
||||
|
||||
export interface MonitorState {
|
||||
alerts: ProcessedAlert[];
|
||||
incidents: Incident[];
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
|
|||
import { ArrowDownWideNarrow, FileUp, Filter, Search } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { ModeToggle } from "@/components/mode-toggle";
|
||||
import { AlertList } from "@/components/monitor/alert-list";
|
||||
import { IncidentManager } from "@/components/monitor/incident-manager";
|
||||
import { KpiDashboard } from "@/components/monitor/kpi-dashboard";
|
||||
|
|
@ -249,9 +250,10 @@ function MonitorPage() {
|
|||
onChange={handleFileInputChange}
|
||||
className="hidden"
|
||||
/>
|
||||
<header className="flex shrink-0 items-center justify-between border-b px-4 py-3">
|
||||
<h1 className="text-sm font-semibold">Alert Monitor</h1>
|
||||
<Button onClick={handleLoadFile} disabled={isLoading} size="sm">
|
||||
<header className="flex shrink-0 items-center border-b px-4 py-3">
|
||||
<h1 className="text-sm font-semibold mr-auto">Alert Monitor</h1>
|
||||
<ModeToggle />
|
||||
<Button className="ml-2" onClick={handleLoadFile} disabled={isLoading}>
|
||||
<FileUp className="mr-2 size-4" />
|
||||
{isLoading ? "Loading..." : "Load Alerts JSON"}
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue