export default function ClusterAccounting()

in frontend/src/old-pages/Clusters/Accounting.tsx [369:471]
99 lines of code
13 McCabe index (conditional complexity)

export default function ClusterAccounting() {
  const {t} = useTranslation()
  const clusterName = useState(['app', 'clusters', 'selected'])
  //const accounting = useState(['clusters', 'index', clusterName, 'accounting']);
  //const errors = useState(['clusters', 'index', clusterName, 'accounting', 'errors']) || [];

  const pending = useState(['app', 'clusters', 'accounting', 'pending'])
  //const startTime = useState(['app', 'clusters', 'accounting', 'startTime']) || '';
  //const endTime = useState(['app', 'clusters', 'accounting', 'endTime']) || '';
  const nodes = useState(['app', 'clusters', 'accounting', 'nodes']) || []
  const user = useState(['app', 'clusters', 'accounting', 'user']) || ''
  const jobName = useState(['app', 'clusters', 'accounting', 'jobName']) || []
  const jobs: AccountingJobSummary[] = useState([
    'clusters',
    'index',
    clusterName,
    'accounting',
    'jobs',
  ]) || []

  React.useEffect(() => {
    refreshAccounting({}, null, true)
  }, [])

  const setDateRange = (val: any) => {
    if (!val) {
      clearState(['app', 'clusters', 'accounting', 'startTime'])
      clearState(['app', 'clusters', 'accounting', 'endTime'])
    } else {
      if (val.type === 'relative') {
        if (val.unit === 'month') {
          setState(
            ['app', 'clusters', 'accounting', 'startTime'],
            `now-${val.amount * 4}weeks`,
          )
          setState(['app', 'clusters', 'accounting', 'endTime'], 'now')
        } else if (val.unit === 'year') {
          setState(
            ['app', 'clusters', 'accounting', 'startTime'],
            `now-${val.amount * 52}weeks`,
          )
          setState(['app', 'clusters', 'accounting', 'endTime'], 'now')
        } else {
          setState(
            ['app', 'clusters', 'accounting', 'startTime'],
            `now-${val.amount}${val.unit}s`,
          )
          setState(['app', 'clusters', 'accounting', 'endTime'], 'now')
        }
      } else {
        const start = new Date(val.startDate)
        const end = new Date(val.endDate)
        setState(
          ['app', 'clusters', 'accounting', 'startTime'],
          start.toISOString().substring(0, 19),
        )
        setState(
          ['app', 'clusters', 'accounting', 'endTime'],
          end.toISOString().substring(0, 19),
        )
      }
    }
    refreshAccounting({}, null, true)
  }

  const {
    items,
    actions,
    filteredItemsCount,
    collectionProps,
    filterProps,
    paginationProps,
  } = useCollection(
    jobs || [],
    extendCollectionsOptions({
      filtering: {
        empty: (
          <EmptyState
            title={t('cluster.accounting.filter.empty.title')}
            subtitle={t('cluster.accounting.filter.empty.subtitle')}
          />
        ),
        noMatch: (
          <EmptyState
            title="No matches"
            subtitle="No jobs match the filters."
            action={
              <Button onClick={() => actions.setFiltering('')}>
                Clear filter
              </Button>
            }
          />
        ),
      },
      sorting: {
        defaultState: {
          sortingColumn: {
            sortingField: 'job_id',
          },
        },
      },
      selection: {},
    }),