Skip to content

Commit

Permalink
polish: a few improvements to alert-sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kiryous
Kiryous committed Nov 24, 2024
1 parent 3389e42 commit 8cc4a45
Show file tree
Hide file tree
Showing 10 changed files with 347 additions and 90 deletions.
50 changes: 50 additions & 0 deletions keep-ui/app/(keep)/alerts/alert-severity-border.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,38 @@ const getSeverityBgClassName = (severity?: Severity) => {
}
};

const getSeverityLabelClassName = (severity?: Severity) => {
switch (severity) {
case "critical":
return "bg-red-100";
case "high":
case "error":
return "bg-orange-100";
case "warning":
return "bg-yellow-100";
case "info":
return "bg-blue-100";
default:
return "bg-emerald-100";
}
};

const getSeverityTextClassName = (severity?: Severity) => {
switch (severity) {
case "critical":
return "text-red-500";
case "high":
case "error":
return "text-orange-500";
case "warning":
return "text-amber-900";
case "info":
return "text-blue-500";
default:
return "text-emerald-500";
}
};

export function AlertSeverityBorder({
severity,
}: {
Expand All @@ -40,3 +72,21 @@ export function AlertSeverityBorderIcon({ severity }: { severity: Severity }) {
/>
);
}

export function AlertSeverityLabel({ severity }: { severity: Severity }) {
return (
<span
className={clsx(
"flex items-center gap-1 text-sm font-medium py-0.5 px-2 overflow-hidden relative",
getSeverityLabelClassName(severity)
)}
>
<div
className={clsx("w-1 h-4 rounded-lg", getSeverityBgClassName(severity))}
/>
<span className={clsx("capitalize", getSeverityTextClassName(severity))}>
{severity}
</span>
</span>
);
}
117 changes: 74 additions & 43 deletions keep-ui/app/(keep)/alerts/alert-sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,20 @@ import { Fragment } from "react";
import Image from "next/image";
import { Dialog, Transition } from "@headlessui/react";
import { AlertDto } from "./models";
import { Button, Title, Card, Badge } from "@tremor/react";
import { Button, Title, Badge } from "@tremor/react";
import { IoMdClose } from "react-icons/io";
import AlertTimeline from "./alert-timeline";
import { useAlerts } from "utils/hooks/useAlerts";
import { TopologyMap } from "../topology/ui/map";
import { TopologySearchProvider } from "@/app/(keep)/topology/TopologySearchContext";
import {
AlertSeverityBorderIcon,
AlertSeverityLabel,
} from "./alert-severity-border";
import { FieldHeader } from "@/shared/ui/FieldHeader";
import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
import { Tooltip } from "@/shared/ui/Tooltip";
import { Link } from "@/components/ui";

type AlertSidebarProps = {
isOpen: boolean;
Expand Down Expand Up @@ -57,11 +65,14 @@ const AlertSidebar = ({ isOpen, toggle, alert }: AlertSidebarProps) => {
{/*Will add soon*/}
{/*<AlertMenu alert={alert} presetName="feed" isInSidebar={true} />*/}
{/*<Divider></Divider>*/}
<Dialog.Title className="text-3xl font-bold" as={Title}>
Alert Details
<Badge className="ml-4" color="orange">
Beta
</Badge>
<Dialog.Title
className="text-xl font-bold flex flex-col gap-2 items-start"
as={Title}
>
{alert?.severity && (
<AlertSeverityLabel severity={alert.severity} />
)}
{alert?.name ? alert.name : "Alert Details"}
</Dialog.Title>
</div>
<div>
Expand All @@ -72,43 +83,63 @@ const AlertSidebar = ({ isOpen, toggle, alert }: AlertSidebarProps) => {
</div>
{alert && (
<div className="space-y-4">
<Card>
<div className="mt-4 space-y-2">
<p>
<strong>Name:</strong> {alert.name}
</p>
<p>
<strong>Service:</strong> {alert.service}
</p>
<p>
<strong>Severity:</strong> {alert.severity}
</p>
<p>
<Image
src={`/icons/${alert.source![0]}-icon.png`}
alt={alert.source![0]}
width={24}
height={24}
className="inline-block w-6 h-6"
/>
</p>
<p>
<strong>Description:</strong> {alert.description}
</p>
<p>
<strong>Fingerprint:</strong> {alert.fingerprint}
</p>
</div>
</Card>
<Card className="flex-grow">
<AlertTimeline
key={auditData ? auditData.length : 1}
alert={alert}
auditData={auditData || []}
isLoading={isLoading}
onRefresh={handleRefresh}
/>
</Card>
<div className="space-y-2">
<p>
<FieldHeader>Name</FieldHeader>
{alert.name}
</p>
<p>
<FieldHeader>Service</FieldHeader>
<Badge size="sm" color="gray">
{alert.service}
</Badge>
</p>
<p>
<FieldHeader>Source</FieldHeader>
<Image
src={`/icons/${alert.source![0]}-icon.png`}
alt={alert.source![0]}
width={24}
height={24}
className="inline-block w-6 h-6"
/>
</p>
<p>
<FieldHeader>Description</FieldHeader>
{alert.description}
</p>
<p>
<FieldHeader className="flex items-center gap-1">
Fingerprint
<Tooltip
content={
<>
Fingerprints are unique identifiers associated with
alert instances in Keep. Every provider declares the
fields fingerprints are calculated upon.{" "}
<Link
href="https://docs.keephq.dev/providers/fingerprints#fingerprints"
className="text-white"
>
Docs
</Link>
</>
}
className="z-50"
>
<QuestionMarkCircleIcon className="w-4 h-4" />
</Tooltip>
</FieldHeader>
{alert.fingerprint}
</p>
</div>
<AlertTimeline
key={auditData ? auditData.length : 1}
alert={alert}
auditData={auditData || []}
isLoading={isLoading}
onRefresh={handleRefresh}
/>
<Title>Related Services</Title>
<TopologySearchProvider>
<TopologyMap
Expand Down
92 changes: 47 additions & 45 deletions keep-ui/app/(keep)/alerts/alert-timeline.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { Subtitle, Button } from "@tremor/react";
import { Subtitle, Button, Card, Title } from "@tremor/react";
import { Chrono } from "react-chrono";
import Image from "next/image";
import { ArrowPathIcon } from "@heroicons/react/24/outline";
Expand Down Expand Up @@ -71,9 +71,9 @@ const AlertTimeline: React.FC<AlertTimelineProps> = ({
));

return (
<div className="max-h-[500px] overflow-y-auto">
<div className="flex flex-col gap-4">
<div className="flex justify-between items-center">
<Subtitle>Timeline</Subtitle>
<Title>Timeline</Title>
<Button
icon={ArrowPathIcon}
color="orange"
Expand All @@ -84,48 +84,50 @@ const AlertTimeline: React.FC<AlertTimelineProps> = ({
title="Refresh"
/>
</div>
{isLoading ? (
<div className="flex justify-center items-center h-full">
<p>Loading...</p>
</div>
) : (
<div className="flex-grow">
<Chrono
items={
auditContent.map((entry) => ({
title: formatTimestamp(entry.timestamp),
})) || []
}
hideControls
disableToolbar
borderLessCards
slideShow={false}
mode="VERTICAL"
theme={{
primary: "orange",
secondary: "rgb(255 247 237)",
titleColor: "orange",
titleColorActive: "orange",
}}
fontSizes={{
title: ".75rem",
}}
cardWidth={400}
cardHeight="auto"
classNames={{
card: "hidden",
cardMedia: "hidden",
cardSubTitle: "hidden",
cardText: "hidden",
cardTitle: "hidden",
title: "mb-3",
contentDetails: "w-full !m-0",
}}
>
{content}
</Chrono>
</div>
)}
<Card className="max-h-[500px] overflow-y-auto p-0">
{isLoading ? (
<div className="flex justify-center items-center h-full">
<p>Loading...</p>
</div>
) : (
<div className="flex-grow">
<Chrono
items={
auditContent.map((entry) => ({
title: formatTimestamp(entry.timestamp),
})) || []
}
hideControls
disableToolbar
borderLessCards
slideShow={false}
mode="VERTICAL"
theme={{
primary: "orange",
secondary: "rgb(255 247 237)",
titleColor: "orange",
titleColorActive: "orange",
}}
fontSizes={{
title: ".75rem",
}}
cardWidth={400}
cardHeight="auto"
classNames={{
card: "hidden",
cardMedia: "hidden",
cardSubTitle: "hidden",
cardText: "hidden",
cardTitle: "hidden",
title: "mb-3",
contentDetails: "w-full !m-0",
}}
>
{content}
</Chrono>
</div>
)}
</Card>
</div>
);
};
Expand Down
34 changes: 34 additions & 0 deletions keep-ui/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions keep-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@heroicons/react": "^2.1.5",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-tooltip": "^1.1.4",
"@sentry/nextjs": "^8.38.0",
"@svgr/webpack": "^8.0.1",
"@tanstack/react-table": "^8.11.0",
Expand Down
14 changes: 12 additions & 2 deletions keep-ui/shared/ui/FieldHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
export const FieldHeader = ({ children }: { children: React.ReactNode }) => (
<h3 className="text-sm text-gray-500 font-semibold">{children}</h3>
import clsx from "clsx";

export const FieldHeader = ({
children,
className,
}: {
children: React.ReactNode;
className?: string;
}) => (
<h3 className={clsx("text-sm text-gray-500 font-semibold", className)}>
{children}
</h3>
);
Loading

0 comments on commit 8cc4a45

Please sign in to comment.