All files / components/Jobs JobsTable.js

100% Statements 12/12
100% Branches 4/4
100% Functions 4/4
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72            25x   25x         114x 114x                 114x 114x 2x           112x 112x 112x                                       25x                 25x                  
import React from "react";
import OurTable, { DateColumn } from "main/components/OurTable";
import { Link } from "react-router-dom";
import Plaintext from "../Utils/Plaintext";
 
export default function JobsTable({ jobs }) {
  const testid = "JobsTable";
 
  const columns = [
    {
      header: "id",
      accessorKey: "id", // accessor is the "key" in the data
    },
    DateColumn("Created", (cell) => cell.row.original.createdAt),
    DateColumn("Updated", (cell) => cell.row.original.updatedAt),
    {
      header: "Status",
      accessorKey: "status",
    },
    {
      header: "Log",
      accessorKey: "log",
      cell: ({ cell }) => {
        const log = cell.row.original.log;
        if (!log) {
          return (
            <div data-testid={`JobsTable-cell-row-${cell.row.index}-col-Log`}>
              No logs available
            </div>
          );
        }
        const logLines = log.split("\n");
        const truncatedLog = logLines.slice(0, 10).join("\n");
        return (
          <div data-testid={`JobsTable-cell-row-${cell.row.index}-col-Log`}>
            {logLines.length > 10 ? (
              <>
                <Plaintext text={truncatedLog} />
                <span>...</span>
                <br />
                <Link to={`/admin/jobs/logs/${cell.row.original.id}`}>
                  See entire log
                </Link>
              </>
            ) : (
              <pre>{log}</pre>
            )}
          </div>
        );
      },
    },
  ];
 
  const sortByIdDescending = {
    sorting: [
      {
        id: "id",
        desc: true, // sort by name in descending order by default
      },
    ],
  };
 
  return (
    <OurTable
      data={jobs}
      columns={columns}
      testid={testid}
      initialState={sortByIdDescending}
    />
  );
}