export function SpanDetailTable()

in dashboards-observability/public/components/trace_analytics/components/traces/span_detail_table.tsx [31:132]
96 lines of code
11 McCabe index (conditional complexity)

export function SpanDetailTable(props: SpanDetailTableProps) {
  const [tableParams, setTableParams] = useState({
    size: 10,
    page: 0,
    sortingColumns: [] as Array<{
      id: string;
      direction: 'asc' | 'desc';
    }>,
  });
  const [items, setItems] = useState<any>([]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    const spanSearchParams: SpanSearchParams = {
      from: tableParams.page * tableParams.size,
      size: tableParams.size,
      sortingColumns: tableParams.sortingColumns.map(({ id, direction }) => ({ [id]: direction })),
    };
    handleSpansRequest(props.http, setItems, setTotal, spanSearchParams, props.DSL);
  }, [tableParams, props.DSL]);

  useEffect(() => {
    if (props.setTotal) props.setTotal(total);
  }, [total]);

  const columns: EuiDataGridColumn[] = [
    {
      id: 'spanId',
      display: 'Span ID',
    },
    {
      id: 'parentSpanId',
      display: 'Parent span ID',
    },
    {
      id: 'traceId',
      display: 'Trace ID',
    },
    {
      id: 'traceGroup',
      display: 'Trace group',
    },
    {
      id: 'serviceName',
      display: 'Service',
    },
    {
      id: 'name',
      display: 'Operation',
    },
    {
      id: 'durationInNanos',
      display: 'Duration',
    },
    {
      id: 'startTime',
      display: 'Start time',
    },
    {
      id: 'endTime',
      display: 'End time',
    },
    {
      id: 'status.code',
      display: 'Errors',
    },
  ];

  const [visibleColumns, setVisibleColumns] = useState(() =>
    columns
      .filter(({ id }) => props.hiddenColumns.findIndex((column) => column === id) === -1)
      .map(({ id }) => id)
  );

  const renderCellValue = useMemo(() => {
    return ({ rowIndex, columnId }) => {
      let adjustedRowIndex = rowIndex - tableParams.page * tableParams.size;
      if (!items.hasOwnProperty(adjustedRowIndex)) return '-';
      const value = items[adjustedRowIndex][columnId];
      if (value == null || value === '') return '-';
      switch (columnId) {
        case 'spanId':
          return <EuiLink onClick={() => props.openFlyout(value)}>{value}</EuiLink>;
        case 'durationInNanos':
          return `${_.round(nanoToMilliSec(Math.max(0, value)), 2)} ms`;
        case 'startTime':
        case 'endTime':
          return moment(value).format(TRACE_ANALYTICS_DATE_FORMAT);
        case 'status.code':
          return value === 2 ? (
            <EuiText color="danger" size="s">
              Yes
            </EuiText>
          ) : (
            'No'
          );

        default:
          return value;
      }
    };
  }, [items, tableParams.page, tableParams.size]);