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 116 | 19x 19x 19x 19x | import { ReactNode, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useRecoilValue } from "recoil";
import { format } from "date-fns";
import { MainTable } from "@canonical/react-components";
import AppPagination from "../AppPagination";
import { maskString } from "../../utils";
import { filteredModelsListState } from "../../selectors";
import type { Model as ModelType } from "../../types/shared";
function ModelsTable(): ReactNode {
const { id } = useParams();
const modelsList = useRecoilValue<Array<ModelType>>(filteredModelsListState);
const [itemsToShow, setItemsToShow] = useState<Array<ModelType>>(modelsList);
return (
<>
<div className="u-flex-grow">
<MainTable
data-testid="models-table"
sortable
emptyStateMsg="No models match this filter"
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",
},
},
]}
rows={itemsToShow.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"],
},
};
})}
/>
</div>
<AppPagination
keyword="model"
items={modelsList}
setItemsToShow={setItemsToShow}
/>
</>
);
}
export default ModelsTable;
|