export default function Events()

in webui/src/pages/monitoring/events/index.tsx [15:111]
85 lines of code
7 McCabe index (conditional complexity)

export default function Events() {
  const [eventData, setEventData] = useState<EventData[]>([]);

  const [nodes, setNodes] = useState<NodeInfo[]>([]);
  const [namespaces, setNamespaces] = useState<string[]>([]);
  const [pods, setPods] = useState<PodInfo[]>([]);
  const [timeRange, setTimeRange] = useState<Dayjs[]>([]);
  const [filteredTypes, setFilteredTypes] = useState<string[]>([]);
  const [filteredNodes, setFilteredNodes] = useState<string[]>([]);
  const [filteredNamespaces, setFilteredNamespaces] = useState<string[]>([]);
  const [filteredPods, setFilteredPods] = useState<string[]>([]);

  const [isLive, setIsLive] = useState(false);
  const [isLoading, setIsLoading] = useState(true);


  const [controller, setController] = useState<AbortController | null>(null);
  const refreshEventList = (setLoading: boolean) => {
    if (setLoading) setIsLoading(true);
    if (controller) controller.abort()
    const newController = new AbortController();
    const { signal } = newController;
    setController(newController);

    const start = timeRange[0], end = timeRange[1];
    eventService.getRangeEvent(start?.unix(), end?.unix(), filteredTypes, filteredNodes, filteredNamespaces, filteredPods, 100, signal).then((res) => {
      setEventData(res || [])
      if (setLoading) setIsLoading(false);
    }).catch((res) => {
      Message.error(`Error fetching events: ${getErrorMessage(res)}`)
    });
  };

  const refreshResourceList = () => {
    k8sService.listNodes().then((res) => {
      setNodes(res)
    }).catch((res) => {
      Message.error(`Error fetching node info: ${getErrorMessage(res)}`)
    }
    );
    k8sService.listNamespace().then((res) => {
      setNamespaces(res)
    }).catch((res) => {
      Message.error(`Error fetching namespace info: ${getErrorMessage(res)}`)
    }
    );
    k8sService.listPods().then((res) => {
      setPods(res)
    }).catch((res) => {
      Message.error(`Error fetching pod info: ${getErrorMessage(res)}`)
    }
    );
  }

  useEffect(() => {
    refreshEventList(true);
  }, [timeRange, filteredTypes, filteredNodes, filteredNamespaces, filteredPods])

  useEffect(() => {
    refreshResourceList();
  }, [])

  useEffect(() => {
    if (isLive) {
      const t = setInterval(() => {
        refreshEventList(false);
      }, 2000);
      return () => {
        clearInterval(t);
      }
    }
    return () => { }
  }, [isLive])

  const podNames = useMemo(() => {
    return filteredNamespaces?.length ?
      pods.filter((i) => {
        return filteredNamespaces.includes(i.namespace)
      }).map(i => i.name) : pods.map(i => i.name);
  }, [pods, filteredNamespaces])

  const nodeNames = useMemo(() => nodes.map(i => i.name), [nodes])
  const eventTypes = useMemo(() => {
    return eventData.map((i) => i.type).filter((i, index) => eventData.findIndex((j) => j.type === i) === index)
  }, [eventData])

  return (
    <div>
      <PageHeader
        title='Events'
        breadcrumbs={[{ name: 'Console' }, { name: 'Monitoring' }, { name: 'Events' }]}
      />
      <Card contentHeight="auto">
        <Card.Content>
          <Box direction="row" className={styles.box}>
            <span className={styles.title}>Time Range</span>
            <DatePicker2.RangePicker showTime disabled={isLive} onChange={v => setTimeRange(v)} />