Skip to content

Commit ada8ef5

Browse files
remotesynthremotesynth
authored
Feaure coverage (#10)
* Testing a feature coverage component The dynamic import is now working but the table structure and data isn't set up * Functional table It works! Sorting and filtering * Removed test suite stuff
1 parent d3e34af commit ada8ef5

File tree

2 files changed

+178
-1
lines changed

2 files changed

+178
-1
lines changed

‎src/components/feature-coverage/FeatureCoverage.tsx‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import React from "react";
2+
const jsonData = import.meta.glob('/src/data/coverage/*.json');
3+
import {
4+
Table,
5+
TableHeader,
6+
TableBody,
7+
TableRow,
8+
TableHead,
9+
TableCell,
10+
} from "@/components/ui/table";
11+
import {
12+
useReactTable,
13+
getCoreRowModel,
14+
getSortedRowModel,
15+
flexRender,
16+
getFilteredRowModel,
17+
getPaginationRowModel,
18+
} from "@tanstack/react-table";
19+
import type { SortingState, ColumnDef, ColumnFiltersState } from "@tanstack/react-table";
20+
21+
const columns: ColumnDef<any>[] = [
22+
{
23+
id: "operation",
24+
accessorFn: (row) => (
25+
Object.keys(row)[0]
26+
),
27+
header: () => "Operation",
28+
enableColumnFilter: true,
29+
filterFn: (row, columnId, filterValue) => {
30+
let operation = Object.keys(row.original)[0];
31+
return operation
32+
.toLowerCase()
33+
.includes((filterValue ?? "").toLowerCase());
34+
},
35+
meta: { className: "w-1/3" },
36+
},
37+
{
38+
id: "implemented",
39+
accessorFn: row => row[Object.keys(row)[0]].implemented,
40+
header: () => "Implemented",
41+
cell: ({ getValue }) => (getValue() ? "✔️" : ""),
42+
meta: { className: "w-1/6" },
43+
enableSorting: true,
44+
},
45+
{
46+
id: "image",
47+
accessorFn: row => row[Object.keys(row)[0]].availability,
48+
header: () => "Image",
49+
meta: { className: "w-1/6" },
50+
enableSorting: false,
51+
},
52+
];
53+
54+
export default function PersistenceCoverage({service}: {service: string}) {
55+
const [coverage, setCoverage] = React.useState<any[]>([]);
56+
const [sorting, setSorting] = React.useState<SortingState>([
57+
{ id: "operation", desc: false },
58+
]);
59+
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
60+
61+
React.useEffect(() => {
62+
const loadData = async () => {
63+
const moduleData = await jsonData[`/src/data/coverage/${service}.json`]() as { default: Record<string, any> };
64+
setCoverage(moduleData.default.operations);
65+
};
66+
loadData();
67+
}, [service]);
68+
69+
const table = useReactTable({
70+
data: coverage,
71+
columns,
72+
state: { sorting, columnFilters },
73+
onSortingChange: setSorting,
74+
onColumnFiltersChange: setColumnFilters,
75+
getCoreRowModel: getCoreRowModel(),
76+
getSortedRowModel: getSortedRowModel(),
77+
getFilteredRowModel: getFilteredRowModel(),
78+
getPaginationRowModel: getPaginationRowModel(),
79+
debugTable: false,
80+
initialState: { pagination: { pageSize: 10 } },
81+
});
82+
83+
return (
84+
<div className="w-full">
85+
<div style={{ marginBottom: 12, marginTop: 12 }}>
86+
<input
87+
type="text"
88+
placeholder="Filter by operation name..."
89+
value={
90+
table.getColumn("operation")?.getFilterValue() as string || ""
91+
}
92+
onChange={e =>
93+
table.getColumn("operation")?.setFilterValue(e.target.value)
94+
}
95+
className="border rounded px-2 py-1 w-full max-w-xs"
96+
/>
97+
</div>
98+
<div className="rounded-md border">
99+
<Table>
100+
<TableHeader>
101+
{table.getHeaderGroups().map((headerGroup) => (
102+
<TableRow key={headerGroup.id}>
103+
{headerGroup.headers.map((header) => {
104+
const canSort = header.column.getCanSort();
105+
const meta = header.column.columnDef.meta as { className?: string } | undefined;
106+
return (
107+
<TableHead
108+
key={header.id}
109+
onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
110+
className={
111+
(meta?.className || "") +
112+
(canSort ? " cursor-pointer select-none" : "")
113+
}
114+
>
115+
{flexRender(header.column.columnDef.header, header.getContext())}
116+
{canSort && (
117+
<span>
118+
{header.column.getIsSorted() === "asc"
119+
? " ▲"
120+
: header.column.getIsSorted() === "desc"
121+
? " ▼"
122+
: ""}
123+
</span>
124+
)}
125+
</TableHead>
126+
);
127+
})}
128+
</TableRow>
129+
))}
130+
</TableHeader>
131+
<TableBody>
132+
{table.getRowModel().rows.map((row) => (
133+
<TableRow key={row.id}>
134+
{row.getVisibleCells().map((cell) => {
135+
const meta = cell.column.columnDef.meta as { className?: string } | undefined;
136+
return (
137+
<TableCell
138+
key={cell.id}
139+
className={meta?.className || undefined}
140+
>
141+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
142+
</TableCell>
143+
);
144+
})}
145+
</TableRow>
146+
))}
147+
</TableBody>
148+
</Table>
149+
</div>
150+
<div className="flex items-center justify-between mt-4">
151+
<button
152+
className="px-3 py-1 border rounded disabled:opacity-50"
153+
onClick={() => table.previousPage()}
154+
disabled={!table.getCanPreviousPage()}
155+
>
156+
Previous
157+
</button>
158+
<span>
159+
Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
160+
</span>
161+
<button
162+
className="px-3 py-1 border rounded disabled:opacity-50"
163+
onClick={() => table.nextPage()}
164+
disabled={!table.getCanNextPage()}
165+
>
166+
Next
167+
</button>
168+
</div>
169+
</div>
170+
);
171+
}

src/content/docs/aws/services/bedrock.md renamed to src/content/docs/aws/services/bedrock.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ description: Get started with Bedrock on LocalStack
44
tags: ["Ultimate"]
55
---
66

7+
import FeatureCoverage from "../../../../components/feature-coverage/FeatureCoverage";
8+
79
## Introduction
810

911
Bedrock is a fully managed service provided by Amazon Web Services (AWS) that makes foundation models from various LLM providers accessible via an API.
1012

1113
LocalStack allows you to use the Bedrock APIs to test and develop AI-powered applications in your local environment.
12-
The supported APIs are available on our [API Coverage Page](), which provides information on the extent of Bedrock's integration with LocalStack.
14+
The supported APIs are available on our [API Coverage section](#api-coverage), which provides information on the extent of Bedrock's integration with LocalStack.
1315

1416
## Getting started
1517

@@ -176,3 +178,7 @@ To achieve that you can search for models in the [Ollama Models library](https:/
176178
* At this point, we have only tested text-based models in LocalStack.
177179
Other models available with Ollama might also work, but are not officially supported by the Bedrock implementation.
178180
* Currently, GPU models are not supported by the LocalStack Bedrock implementation.
181+
182+
## API Coverage
183+
184+
<FeatureCoverage service="bedrock" client:load />

0 commit comments

Comments
 (0)