refactor: alerts feed UI loading

keep-ui/.gitignore

@@ -43,3 +43,6 @@ jspm_packages
 
 app/topology/mock-topology-data.tsx
 .vercel
+
+# Sentry Config File
+.env.sentry-build-plugin

keep-ui/app/alerts/[id]/page.tsx

@@ -1,12 +1,12 @@
-import AlertsPage from "../alerts.client";
+import Alerts from "../alerts";
 
 type PageProps = {
   params: { id: string };
   searchParams: { [key: string]: string | string[] | undefined };
 };
 
 export default function Page({ params }: PageProps) {
-  return <AlertsPage presetName={params.id} />;
+  return <Alerts presetName={params.id} />;
 }
 
 export const metadata = {

keep-ui/app/alerts/alert-pagination.tsx

@@ -17,6 +17,7 @@ import Select from "react-select";
 import { AlertDto } from "./models";
 import { Table } from "@tanstack/react-table";
 import { useAlerts } from "utils/hooks/useAlerts";
+import { useMounted } from "@/shared/lib/hooks/useMounted";
 
 interface Props {
   presetName: string;
@@ -71,6 +72,7 @@ export default function AlertPagination({
 }: Props) {
   const { usePresetAlerts } = useAlerts();
   const { mutate, isLoading: isValidating } = usePresetAlerts(presetName);
+  const isMounted = useMounted();
 
   const pageIndex = table.getState().pagination.pageIndex;
   const pageCount = table.getPageCount();
@@ -142,8 +144,8 @@ export default function AlertPagination({
             icon={ArrowPathIcon}
             color="orange"
             size="xs"
-            disabled={isValidating}
-            loading={isValidating}
+            disabled={isValidating || !isMounted}
+            loading={isValidating || !isMounted}
             onClick={async () => await mutate()}
             title="Refresh"
           />

keep-ui/app/alerts/alert-table-facet.tsx

@@ -14,6 +14,8 @@ import {
 import { AlertDto, Severity } from "./models";
 import AlertSeverity from "./alert-severity";
 import clsx from "clsx";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
 
 interface FacetValue {
   label: string;
@@ -195,6 +197,7 @@ interface FacetProps {
   onSelect: (value: string, exclusive: boolean, isAllOnly: boolean) => void;
   facetKey: string;
   facetFilters: FacetFilters;
+  showSkeleton?: boolean;
 }
 
 const Facet: React.FC<FacetProps> = ({
@@ -203,6 +206,7 @@ const Facet: React.FC<FacetProps> = ({
   onSelect,
   facetKey,
   facetFilters,
+  showSkeleton = false,
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const [filter, setFilter] = useState("");
@@ -258,6 +262,10 @@ const Facet: React.FC<FacetProps> = ({
                   facetFilters={facetFilters}
                 />
               ))
+            ) : showSkeleton ? (
+              Array.from({ length: 3 }).map((_, index) => (
+                <Skeleton key={`skeleton-${index}`} />
+              ))
             ) : (
               <div className="px-2 py-1 text-sm text-gray-500 italic">
                 No matching values found
@@ -280,13 +288,15 @@ interface AlertFacetsProps {
     isAllOnly: boolean
   ) => void;
   className?: string;
+  showSkeleton?: boolean;
 }
 
 const AlertFacets: React.FC<AlertFacetsProps> = ({
   alerts,
   facetFilters,
   onSelect,
   className,
+  showSkeleton = false,
 }) => {
   const getFacetValues = (key: keyof AlertDto): FacetValue[] => {
     const valueMap = new Map<string, number>();
@@ -391,6 +401,7 @@ const AlertFacets: React.FC<AlertFacetsProps> = ({
             onSelect("severity", value, exclusive, isAllOnly)
           }
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
         <Facet
           facetKey="status"
@@ -400,6 +411,7 @@ const AlertFacets: React.FC<AlertFacetsProps> = ({
             onSelect("status", value, exclusive, isAllOnly)
           }
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
         <Facet
           facetKey="source"
@@ -409,6 +421,7 @@ const AlertFacets: React.FC<AlertFacetsProps> = ({
             onSelect("source", value, exclusive, isAllOnly)
           }
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
         <Facet
           facetKey="assignee"
@@ -418,6 +431,7 @@ const AlertFacets: React.FC<AlertFacetsProps> = ({
             onSelect("assignee", value, exclusive, isAllOnly)
           }
           facetFilters={facetFilters}
+          showSkeleton={showSkeleton}
         />
       </div>
     </div>

keep-ui/app/alerts/alert-table.tsx

@@ -1,8 +1,7 @@
-import { useEffect, useState } from "react";
-import { Table, Callout, Card, Icon } from "@tremor/react";
+import { useState } from "react";
+import { Table, Card } from "@tremor/react";
 import { AlertsTableBody } from "./alerts-table-body";
 import { AlertDto } from "./models";
-import { CircleStackIcon } from "@heroicons/react/24/outline";
 import {
   getCoreRowModel,
   useReactTable,
@@ -34,6 +33,7 @@ import AlertTabs from "./alert-tabs";
 import AlertSidebar from "./alert-sidebar";
 import AlertFacets from "./alert-table-facet";
 import { FacetFilters } from "./alert-table-facet";
+import { useMounted } from "@/shared/lib/hooks/useMounted";
 
 interface PresetTab {
   name: string;
@@ -273,10 +273,12 @@ export function AlertTable({
     return acc.concat(alertId);
   }, []);
 
+  const isMounted = useMounted();
+
   // show skeleton if no alerts are loaded
   let showSkeleton = table.getFilteredRowModel().rows.length === 0;
   // if showSkeleton and not loading, show empty state
-  let showEmptyState = !isAsyncLoading && showSkeleton;
+  let showEmptyState = !isAsyncLoading && showSkeleton && isMounted;
 
   const handleRowClick = (alert: AlertDto) => {
     // if presetName is alert-history, do not open sidebar
@@ -300,6 +302,7 @@ export function AlertTable({
           <AlertFacets
             className="sticky top-0"
             alerts={alerts}
+            showSkeleton={showSkeleton}
             facetFilters={facetFilters}
             onSelect={handleFacetSelect}
           />
@@ -328,16 +331,6 @@ export function AlertTable({
           </div>
           <Card className="flex-grow h-full flex flex-col p-0">
             <div className="flex-grow">
-              {isAsyncLoading && (
-                <Callout
-                  title="Getting your alerts..."
-                  icon={CircleStackIcon}
-                  color="gray"
-                  className="m-5"
-                >
-                  Alerts will show up in this table as they are added to Keep...
-                </Callout>
-              )}
               {/* For dynamic preset, add alert tabs*/}
               {!presetStatic && (
                 <AlertTabs

keep-ui/app/alerts/alerts-table-body.tsx

@@ -1,4 +1,4 @@
-import { TableBody, TableRow, TableCell, Card, Button } from "@tremor/react";
+import { TableBody, TableRow, TableCell } from "@tremor/react";
 import { AlertDto } from "./models";
 import "./alerts-table-body.css";
 import Skeleton from "react-loading-skeleton";
@@ -70,6 +70,24 @@ export function AlertsTableBody({
     onRowClick(alert);
   };
 
+  if (showSkeleton) {
+    return (
+      <TableBody>
+        {Array(20)
+          .fill("")
+          .map((index, rowIndex) => (
+            <TableRow key={`row-${index}-${rowIndex}`}>
+              {table.getAllColumns().map((c, cellIndex) => (
+                <TableCell key={`cell-${c.id}-${cellIndex}`}>
+                  <Skeleton />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+      </TableBody>
+    );
+  }
+
   return (
     <TableBody>
       {table.getRowModel().rows.map((row) => {

keep-ui/app/alerts/alerts.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useMemo, useState } from "react";
 import { Preset } from "./models";
 import { useAlerts } from "utils/hooks/useAlerts";
@@ -15,6 +17,7 @@ import { ViewAlertModal } from "./ViewAlertModal";
 import { useRouter, useSearchParams } from "next/navigation";
 import AlertChangeStatusModal from "./alert-change-status-modal";
 import { useAlertPolling } from "utils/hooks/usePusher";
+import { useMounted } from "@/shared/lib/hooks/useMounted";
 
 const defaultPresets: Preset[] = [
   {
@@ -25,7 +28,7 @@ const defaultPresets: Preset[] = [
     is_noisy: false,
     alerts_count: 0,
     should_do_noise_now: false,
-    tags: []
+    tags: [],
   },
   {
     id: "dismissed",
@@ -35,7 +38,7 @@ const defaultPresets: Preset[] = [
     is_noisy: false,
     alerts_count: 0,
     should_do_noise_now: false,
-    tags: []
+    tags: [],
   },
   {
     id: "groups",
@@ -45,7 +48,7 @@ const defaultPresets: Preset[] = [
     is_noisy: false,
     alerts_count: 0,
     should_do_noise_now: false,
-    tags: []
+    tags: [],
   },
   {
     id: "without-incident",
@@ -55,7 +58,7 @@ const defaultPresets: Preset[] = [
     is_noisy: false,
     alerts_count: 0,
     should_do_noise_now: false,
-    tags: []
+    tags: [],
   },
 ];
 
@@ -100,9 +103,14 @@ export default function Alerts({ presetName }: AlertsProps) {
   const { data: pollAlerts } = useAlertPolling();
   const {
     data: alerts = [],
-    isLoading: isAsyncLoading,
+    isLoading,
     mutate: mutateAlerts,
   } = usePresetAlerts(selectedPreset ? selectedPreset.name : "");
+
+  const isMounted = useMounted();
+
+  const isAsyncLoading = isLoading || !isMounted;
+
   useEffect(() => {
     const fingerprint = searchParams?.get("alertPayloadFingerprint");
     if (fingerprint) {
@@ -137,7 +145,6 @@ export default function Alerts({ presetName }: AlertsProps) {
         setChangeStatusAlert={setChangeStatusAlert}
         mutateAlerts={mutateAlerts}
       />
-
       {selectedPreset && (
         <AlertHistory alerts={alerts} presetName={selectedPreset.name} />
       )}

keep-ui/app/config-provider.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { createContext } from "react";
+
+// Create the context with undefined as initial value
+export const ConfigContext = createContext<any | undefined>(undefined);
+
+// Create a provider component
+export function ConfigProvider({
+  children,
+  config,
+}: {
+  children: React.ReactNode;
+  config: any;
+}) {
+  return (
+    <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
+  );
+}

keep-ui/app/error.tsx

@@ -11,6 +11,7 @@ import { Title, Subtitle } from "@tremor/react";
 import { Button, Text } from "@tremor/react";
 import { signOut } from "next-auth/react";
 import { KeepApiError } from "@/shared/lib/KeepApiError";
+import * as Sentry from "@sentry/nextjs";
 
 export default function ErrorComponent({
   error,
@@ -20,7 +21,7 @@ export default function ErrorComponent({
   reset: () => void;
 }) {
   useEffect(() => {
-    console.error(error);
+    Sentry.captureException(error);
   }, [error]);
 
   return (

keep-ui/app/global-error.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}