export default function ClusterStackEvents()

in frontend/src/old-pages/Clusters/StackEvents.tsx [55:151]
92 lines of code
9 McCabe index (conditional complexity)

export default function ClusterStackEvents() {
  const {t} = useTranslation()
  const clusterName: ClusterName = useState(['app', 'clusters', 'selected'])
  const events: StackEvents = useState([
    'clusters',
    'index',
    clusterName,
    'stackevents',
    'events',
  ])
  const columns = useState(['app', 'clusters', 'stackevents', 'columns']) || [
    'timestamp',
    'logicalId',
    'status',
    'statusReason',
  ]
  const pageSize =
    useState(['app', 'clusters', 'stackevents', 'pageSize']) || 100
  const defaultRegion = useState(['aws', 'region'])
  const region: Region = useState(['app', 'selectedRegion']) || defaultRegion
  let [searchParams, setSearchParams] = useSearchParams()

  const clusterPath = ['clusters', 'index', clusterName]
  const cluster = useState(clusterPath)
  let cfnHref = `${consoleDomain(
    region,
  )}/cloudformation/home?region=${region}#/stacks?filteringStatus=active&filteringText=${clusterName}`
  if (cluster)
    cfnHref = `${consoleDomain(
      region,
    )}/cloudformation/home?region=${region}#/stacks/events?filteringStatus=active&filteringText=${clusterName}&viewNested=true&hideStacks=false&stackId=${encodeURIComponent(
      cluster.cloudformationStackArn,
    )}`

  React.useEffect(() => {
    const clusterName: ClusterName = getState(['app', 'clusters', 'selected'])
    const clusterPath = ['clusters', 'index', clusterName]
    const cluster = getState(clusterPath)
    const headNode = getState([...clusterPath, 'headNode'])
    GetClusterStackEvents(clusterName)
    DescribeCluster(clusterName)

    let timerId: ReturnType<typeof setInterval> | undefined = setInterval(
      () => {
        if (cluster.clusterStatus !== ClusterStatus.CreateInProgress) {
          clearInterval(timerId)
          timerId = undefined
        } else {
          if (!headNode) DescribeCluster(clusterName)
          GetClusterStackEvents(clusterName)
        }
      },
      5000,
    )
    return () => {
      timerId && clearInterval(timerId)
    }
  }, [])

  const refreshStackEvents = () => {
    clearState(['clusters', 'index', clusterName, 'stackevents'])
    GetClusterStackEvents(clusterName)
  }

  const {
    items,
    actions,
    filteredItemsCount,
    collectionProps,
    filterProps,
    paginationProps,
  } = useCollection(events || [], {
    filtering: {
      empty: <EmptyState title="No logs" subtitle="No logs to display." />,
      noMatch: (
        <EmptyState
          title="No matches"
          subtitle="No logs match the filters."
          action={
            <Button onClick={() => actions.setFiltering('')}>
              Clear filter
            </Button>
          }
        />
      ),
    },
    pagination: {pageSize: pageSize},
    sorting: {
      defaultState: {
        sortingColumn: {
          sortingField: 'timestamp',
        },
        isDescending: true,
      },
    },
    selection: {},
  })