chore(ui): better empty states in incident view (#1979)

keep-ui/app/incidents/[id]/incident-timeline.tsx

@@ -8,6 +8,8 @@ import { useIncidentAlerts } from "utils/hooks/useIncidents";
 import { IncidentDto } from "../models";
 import Image from "next/image";
 import AlertSeverity from "app/alerts/alert-severity";
+import { EmptyStateCard } from "@/components/ui/EmptyStateCard";
+import { useRouter } from "next/navigation";
 
 const severityColors = {
   critical: "bg-red-300",
@@ -237,6 +239,20 @@ const AlertBar: React.FC<AlertBarProps> = ({
   );
 };
 
+const IncidentTimelineNoAlerts: React.FC = () => {
+  const router = useRouter();
+  return (
+    <div className="h-80">
+      <EmptyStateCard
+        title="Timeline not available"
+        description="No alerts found for this incident. Go to the alerts feed and assign alerts to view the timeline."
+        buttonText="Assign alerts to this incident"
+        onClick={() => router.push("/alerts/feed")}
+      />
+    </div>
+  );
+};
+
 export default function IncidentTimeline({
   incident,
 }: {
@@ -313,7 +329,8 @@ export default function IncidentTimeline({
     return {};
   }, [auditEvents, alerts]);
 
-  if (auditEventsLoading || !auditEvents || alertsLoading) return <>No Data</>;
+  if (auditEventsLoading || !auditEvents || alertsLoading)
+    return <IncidentTimelineNoAlerts />;
 
   const {
     startTime,

keep-ui/app/incidents/[id]/incident.tsx

@@ -19,6 +19,7 @@ import { useRouter } from "next/navigation";
 import IncidentTimeline from "./incident-timeline";
 import { CiBellOn, CiViewTimeline } from "react-icons/ci";
 import { IoIosGitNetwork } from "react-icons/io";
+import { EmptyStateCard } from "@/components/ui/EmptyStateCard";
 
 interface Props {
   incidentId: string;
@@ -72,7 +73,16 @@ export default function IncidentView({ incidentId }: Props) {
                   <TabPanel>
                     <IncidentTimeline incident={incident} />
                   </TabPanel>
-                  <TabPanel>Coming Soon...</TabPanel>
+                  <TabPanel>
+                    <div className="h-80">
+                      <EmptyStateCard
+                        title="Coming Soon..."
+                        description="Topology view of the incident is coming soon."
+                        buttonText="Go to Topology"
+                        onClick={() => router.push("/topology")}
+                      />
+                    </div>
+                  </TabPanel>
                 </TabPanels>
               </TabGroup>
             </div>

keep-ui/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

keep-ui/package.json

@@ -273,7 +273,7 @@
     "postcss-nested": "^6.0.1",
     "postcss-selector-parser": "^6.0.12",
     "postcss-value-parser": "^4.2.0",
-    "posthog-js": "^1.161.6",
+    "posthog-js": "^1.163.0",
     "posthog-node": "^3.1.1",
     "preact-render-to-string": "^5.2.6",
     "prelude-ls": "^1.2.1",