export function LogMessagesTable()

in frontend/src/old-pages/Logs/LogMessagesTable.tsx [35:147]
95 lines of code
2 McCabe index (conditional complexity)

export function LogMessagesTable({clusterName, logStreamName}: Props) {
  const {t} = useTranslation()
  const canFetchMessages = !!logStreamName
  const {
    data = [],
    isLoading,
    isFetching,
    refetch,
  } = useQuery(
    ['CLUSTER_LOG_EVENTS', clusterName, logStreamName],
    () => ListClusterLogEvents(clusterName, logStreamName!),
    {enabled: canFetchMessages},
  )

  const columnDefinitions: TableProps.ColumnDefinition<LogEvent>[] = useMemo(
    () => [
      {
        id: 'timestamp',
        header: t('clusterLogs.logEvents.columns.timestamp'),
        cell: item => <DateView date={item.timestamp} />,
        sortingField: 'timestamp',
      },
      {
        id: 'message',
        header: t('clusterLogs.logEvents.columns.message'),
        cell: item => item.message,
        sortingField: 'message',
      },
    ],
    [t],
  )

  const {
    items,
    filteredItemsCount,
    collectionProps,
    filterProps,
    paginationProps,
  } = useCollection(
    data,
    extendCollectionsOptions({
      filtering: {
        empty: (
          <EmptyState
            title={t('clusterLogs.logEvents.filtering.empty.title')}
            subtitle={t('clusterLogs.logEvents.filtering.empty.subtitle')}
          />
        ),
        noMatch: (
          <EmptyState
            title={t('clusterLogs.logEvents.filtering.noMatch.title')}
            subtitle={t('clusterLogs.logEvents.filtering.noMatch.subtitle')}
          />
        ),
      },
      sorting: {
        defaultState: {
          sortingColumn: {
            sortingField: 'timestamp',
          },
          isDescending: true,
        },
      },
      selection: {},
    }),
  )

  const messagesCountText =
    data.length > 0 ? `(${data.length}+)` : `(${data.length})`

  const onRefreshClick = useCallback(() => {
    refetch()
  }, [refetch])

  return (
    <Table
      {...collectionProps}
      loading={isLoading}
      loadingText={t('clusterLogs.logEvents.loadingText')}
      columnDefinitions={columnDefinitions}
      items={items}
      trackBy="message"
      header={
        <Header
          counter={messagesCountText}
          actions={
            <Button
              disabled={!canFetchMessages}
              onClick={onRefreshClick}
              loading={isFetching}
            >
              {t('clusterLogs.logEvents.actions.refresh')}
            </Button>
          }
        >
          {t('clusterLogs.logEvents.title')}
        </Header>
      }
      pagination={<Pagination {...paginationProps} />}
      filter={
        <TextFilter
          {...filterProps}
          countText={t('clusterLogs.logEvents.filtering.countText', {
            filteredItemsCount,
          })}
          filteringPlaceholder={t(
            'clusterLogs.logEvents.filtering.filteringPlaceholder',
          )}
        />
      }
    />
  )
}