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