export default function ClusterInstances()

in frontend/src/old-pages/Clusters/Instances.tsx [97:168]
68 lines of code
6 McCabe index (conditional complexity)

export default function ClusterInstances() {
  let defaultRegion = useState(['aws', 'region']) || ''
  const region: Region = useState(['app', 'selectedRegion']) || defaultRegion
  const {t} = useTranslation()

  const clusterName: ClusterName = useState(['app', 'clusters', 'selected'])
  const instances: Instance[] | null = useState([
    'clusters',
    'index',
    clusterName,
    'instances',
  ])
  const [selectedInstanceId, setSelectedInstanceId] =
    React.useState<Instance['instanceId']>()
  const selectedInstances: Instance[] = instances
    ? instances.filter(instance => instance.instanceId === selectedInstanceId)
    : []

  const onSelectionChangeCallback = React.useCallback(({detail}) => {
    setSelectedInstanceId(detail.selectedItems[0].instanceId)
  }, [])

  React.useEffect(() => {
    const tick = () => {
      const clusterName = getState(['app', 'clusters', 'selected'])
      clusterName && GetClusterInstances(clusterName)
    }
    tick()
    const timerId = setInterval(tick, 10000)
    return () => {
      clearInterval(timerId)
    }
  }, [])

  const {
    items,
    actions,
    filteredItemsCount,
    collectionProps,
    filterProps,
    paginationProps,
  } = useCollection(
    instances || [],
    extendCollectionsOptions({
      filtering: {
        empty: (
          <EmptyState
            title={t('cluster.instances.filtering.empty.title')}
            subtitle={t('cluster.instances.filtering.empty.subtitle')}
          />
        ),
        noMatch: (
          <EmptyState
            title={t('cluster.instances.filtering.noMatch.title')}
            subtitle={t('cluster.instances.filtering.noMatch.subtitle')}
            action={
              <Button onClick={() => actions.setFiltering('')}>
                {t('cluster.instances.filtering.clearFilter')}
              </Button>
            }
          />
        ),
      },
      sorting: {
        defaultState: {
          sortingColumn: {
            sortingField: 'instanceId',
          },
        },
      },
      selection: {},
    }),