All files / publisher/pages/Models ModelsTable.tsx

85.71% Statements 6/7
0% Branches 0/10
50% Functions 1/2
85.71% Lines 6/7

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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115                            28x 28x   28x                                                                   28x                                                                                     28x   28x                                    
import { Link, useParams } from "react-router-dom";
import { useAtomValue } from "jotai";
import { format } from "date-fns";
import { MainTable, TablePagination } from "@canonical/react-components";
 
import { maskString, sortByDateDescending } from "../../utils";
 
import { filteredModelsListState } from "../../state/modelsState";
 
import { useSortTableData } from "../../hooks";
 
import type { Model as ModelType } from "../../types/shared";
 
function ModelsTable(): React.JSX.Element {
  const { id } = useParams();
  const modelsList = useAtomValue<Array<ModelType>>(filteredModelsListState);
 
  const headers = [
    {
      content: `Name (${modelsList.length})`,
      sortKey: "name",
    },
    {
      content: "API key",
      className: "u-align--right",
    },
    {
      content: "Policy revision",
      className: "u-align--right",
      style: {
        width: "150px",
      },
    },
    {
      content: "Last updated",
      className: "u-align--right",
      sortKey: "modified-at",
      style: {
        width: "120px",
      },
    },
    {
      content: "Created date",
      className: "u-align--right",
      sortKey: "created-at",
      style: {
        width: "120px",
      },
    },
  ];
 
  const rows = modelsList.sort(sortByDateDescending).map((model: ModelType) => {
    return {
      columns: [
        {
          content: (
            <Link to={`/admin/${id}/models/${model.name}`}>{model.name}</Link>
          ),
          className: "u-truncate",
        },
        {
          content: maskString(model["api-key"]) || "-",
          className: "u-align--right",
        },
        {
          content:
            model["policy-revision"] !== undefined
              ? model["policy-revision"]
              : "-",
          className: "u-align--right",
        },
        {
          content:
            model["modified-at"] && model["modified-at"] !== null
              ? format(new Date(model["modified-at"]), "dd/MM/yyyy")
              : "-",
          className: "u-align--right",
        },
        {
          content:
            model["created-at"] !== null
              ? format(new Date(model["created-at"]), "dd/MM/yyyy")
              : "-",
          className: "u-align--right",
        },
      ],
      sortData: {
        name: model.name,
        "modified-at": model["modified-at"],
        "created-at": model["created-at"],
      },
    };
  });
 
  const { rows: sortedRows, updateSort } = useSortTableData({ rows });
 
  return (
    <TablePagination
      data={sortedRows}
      pageLimits={[25, 50, 100, 200]}
      position="below"
    >
      <MainTable
        data-testid="models-table"
        sortable
        onUpdateSort={updateSort}
        emptyStateMsg="No models match this filter"
        headers={headers}
      />
    </TablePagination>
  );
}
 
export default ModelsTable;