Handle events overview when event definition is missing (#25548)

* Handle case where event definition is missing

* add cl entry

Author: ryan-carroll-graylog

changelog/unreleased/pr-25548.toml

@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Show event definition ID instead of throwing errors in the Events Overview widget when the event definition has been deleted"
+
+pulls = ["25548"]
+issues = ["graylog-plugin-enterprise#13756"]

graylog2-web-interface/src/components/events/events/hooks/useEventDefinition.tsx

@@ -19,21 +19,20 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import fetch from 'logic/rest/FetchProvider';
 import { qualifyUrl } from 'util/URLUtils';
 import type { EventDefinition } from 'components/event-definitions/event-definitions-types';
-import { defaultOnError } from 'util/conditional/onError';
 
 export const fetchEventDefinitionDetails = async (eventDefinitionId: string): Promise<EventDefinition> =>
   fetch('GET', qualifyUrl(`/events/definitions/${eventDefinitionId}`));
 
 const useEventDefinition = (eventDefId: string, enabled = true) => {
-  const { data, isFetching, isInitialLoading } = useQuery({
+  const { data, isFetching, isInitialLoading, isError } = useQuery({
     queryKey: ['get-event-definition-details', eventDefId],
-    queryFn: () => defaultOnError(fetchEventDefinitionDetails(eventDefId), 'Loading archives failed with status'),
+    queryFn: () => fetchEventDefinitionDetails(eventDefId),
     retry: 0,
     placeholderData: keepPreviousData,
     enabled: !!eventDefId && enabled,
   });
 
-  return { data, isFetching, isInitialLoading };
+  return { data, isFetching, isInitialLoading, isError };
 };
 
 export default useEventDefinition;

graylog2-web-interface/src/views/components/widgets/events/EventsList/EventDetails.test.tsx

@@ -52,7 +52,7 @@ describe('EventDetails', () => {
     );
 
     asMock(useCurrentUser).mockReturnValue(adminUser);
-    asMock(useEventDefinition).mockReturnValue({ data: undefined, isFetching: false, isInitialLoading: false });
+    asMock(useEventDefinition).mockReturnValue({ data: undefined, isFetching: false, isInitialLoading: false, isError: false });
 
     asMock(useEventById).mockImplementation(() => ({
       data: mockEventData.event,
@@ -86,6 +86,7 @@ describe('EventDetails', () => {
       data: mockEventDefinitionTwoAggregations,
       isFetching: false,
       isInitialLoading: false,
+      isError: false,
     });
 
     renderEventDetails();

graylog2-web-interface/src/views/components/widgets/events/filters/EventDefinitionName.tsx

@@ -30,26 +30,22 @@ type Props = {
 const EventDefinitionName = ({ eventDefinitionId, displayAsLink = true }: Props) => {
   const currentUser = useCurrentUser();
   const canViewDefinition = isPermitted(currentUser.permissions, `eventdefinitions:read:${eventDefinitionId}`);
-  const { data: eventDefinition, isFetching } = useEventDefinition(eventDefinitionId, canViewDefinition);
+  const { data: eventDefinition, isFetching, isError } = useEventDefinition(eventDefinitionId, canViewDefinition);
   const title = eventDefinition?.title ?? eventDefinitionId;
 
   if (isFetching) {
     return <Spinner />;
   }
 
-  if (!displayAsLink || !canViewDefinition) {
+  if (!displayAsLink || !canViewDefinition || !eventDefinition || isError) {
     return <>{title}</>;
   }
 
-  if (eventDefinition) {
-    return (
-      <Link to={Routes.ALERTS.DEFINITIONS.show(eventDefinition.id)} target="_blank">
-        {title}
-      </Link>
-    );
-  }
-
-  return null;
+  return (
+    <Link to={Routes.ALERTS.DEFINITIONS.show(eventDefinition.id)} target="_blank">
+      {title}
+    </Link>
+  );
 };
 
 export default EventDefinitionName;