Fix infinite loading if controllers not found

dashboard/src/components/events/useEvents.ts

@@ -4,11 +4,19 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import { KubeEvent } from "shared/types";
 
-export const useKubeEvents = (
-  resourceType: "NODE" | "POD" | "HPA",
-  ownerName?: string,
-  ownerType?: string
-) => {
+type UseKubeEventsProps = {
+  resourceType: "NODE" | "POD" | "HPA";
+  ownerName?: string;
+  ownerType?: string;
+  shouldWaitForOwner?: boolean;
+};
+
+export const useKubeEvents = ({
+  resourceType,
+  ownerName,
+  ownerType,
+  shouldWaitForOwner,
+}: UseKubeEventsProps) => {
   const { currentCluster, currentProject } = useContext(Context);
   const [hasPorterAgent, setHasPorterAgent] = useState(false);
 
@@ -42,6 +50,13 @@ export const useKubeEvents = (
   // Get events
   useEffect(() => {
     let isSubscribed = true;
+
+    if (shouldWaitForOwner && !ownerName?.length && !ownerType?.length) {
+      return () => {
+        isSubscribed = false;
+      };
+    }
+
     if (hasPorterAgent) {
       fetchData(true).then(() => {
         if (isSubscribed) {

dashboard/src/main/home/cluster-dashboard/dashboard/events/EventsTab.tsx

@@ -24,7 +24,7 @@ const EventsTab = () => {
     kubeEvents,
     loadMoreEvents,
     hasMore,
-  } = useKubeEvents(resourceType.value as any);
+  } = useKubeEvents({ resourceType: resourceType.value as any });
 
   if (isLoading) {
     return (

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -347,7 +347,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
   const renderTabContents = (currentTab: string) => {
     let { setSidebar } = props;
     let chart = currentChart;
-
+    console.log("CONTROLLERS", controllers);
     switch (currentTab) {
       case "metrics":
         return <MetricsSection currentChart={chart} />;

dashboard/src/main/home/cluster-dashboard/expanded-chart/events/EventsTab.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import EventCard from "components/events/EventCard";
 import Loading from "components/Loading";
@@ -6,7 +6,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import Dropdown from "components/Dropdown";
 import { useKubeEvents } from "components/events/useEvents";
 import { ChartType } from "shared/types";
-import _, { isObject } from "lodash";
+import _, { isEmpty, isObject } from "lodash";
 import SubEventsList from "components/events/SubEventsList";
 
 const availableResourceTypes = [
@@ -23,6 +23,8 @@ const EventsTab: React.FC<{
 
   const [selectedControllerKey, setSelectedControllerKey] = useState(null);
 
+  const [hasControllers, setHasControllers] = useState(null);
+
   const controllerOptions = useMemo(() => {
     if (typeof controllers !== "object") {
       return [];
@@ -50,15 +52,29 @@ const EventsTab: React.FC<{
     kubeEvents,
     loadMoreEvents,
     hasMore,
-  } = useKubeEvents(
-    resourceType.value as any,
-    selectedController?.metadata?.name,
-    selectedController?.kind
-  );
+  } = useKubeEvents({
+    resourceType: resourceType.value as any,
+    ownerName: selectedController?.metadata?.name,
+    ownerType: selectedController?.kind,
+    shouldWaitForOwner: true,
+  });
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout = null;
+    if (isEmpty(controllers)) {
+      timer = setTimeout(() => {
+        setHasControllers(false);
+      }, 10000);
+    }
 
-  const hasControllers = controllers && Object.keys(controllers)?.length;
+    return () => {
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+    };
+  }, [controllers]);
 
-  if (isLoading || !hasControllers) {
+  if (isLoading && hasControllers === null) {
     return (
       <Placeholder>
         <Loading />
@@ -66,6 +82,15 @@ const EventsTab: React.FC<{
     );
   }
 
+  if (!hasControllers) {
+    return (
+      <Placeholder>
+        <i className="material-icons">search</i>
+        No matching events were found.
+      </Placeholder>
+    );
+  }
+
   if (!hasPorterAgent) {
     return (
       <Placeholder>