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; |