Testing a feature coverage component

The dynamic import is now working but the table structure and data isn't set up

Author: remotesynth

src/components/feature-coverage/FeatureCoverage.tsx

@@ -0,0 +1,185 @@
+import React from "react";
+const jsonData = import.meta.glob('/src/data/coverage/*.json');
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "@/components/ui/table";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender,
+  getFilteredRowModel,
+  getPaginationRowModel,
+} from "@tanstack/react-table";
+import type { SortingState, ColumnDef, ColumnFiltersState } from "@tanstack/react-table";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "full_name",
+    header: () => "Service",
+    cell: ({ row }) => (
+      <a href={`/aws/${row.original.service}`}>{row.original.full_name}</a>
+    ),
+    enableColumnFilter: true,
+    filterFn: (row, columnId, filterValue) => {
+      return row.original.full_name
+        .toLowerCase()
+        .includes((filterValue ?? "").toLowerCase());
+    },
+    meta: { className: "w-1/3" },
+  },
+  {
+    accessorKey: "support",
+    header: () => "Supported",
+    cell: ({ row }) =>
+      row.original.support === "supported" ||
+      row.original.support === "supported with limitations"
+        ? "✔️"
+        : "",
+    meta: { className: "w-1/6" },
+    enableSorting: true,
+    sortingFn: (rowA, rowB) => {
+      // Sort supported to the top
+      const a = rowA.original.support;
+      const b = rowB.original.support;
+      if (a === b) return 0;
+      if (a === "supported") return -1;
+      if (b === "supported") return 1;
+      if (a === "supported with limitations") return -1;
+      if (b === "supported with limitations") return 1;
+      return a.localeCompare(b);
+    },
+  },
+  {
+    accessorKey: "test_suite",
+    header: () => "Persistence Test Suite",
+    cell: ({ row }) => (row.original.test_suite ? "✔️" : ""),
+    meta: { className: "w-1/6" },
+    enableSorting: true,
+  },
+  {
+    accessorKey: "limitations",
+    header: () => "Limitations",
+    cell: ({ row }) => row.original.limitations,
+    enableSorting: false,
+    meta: { className: "whitespace-normal" },
+  },
+];
+
+export default function PersistenceCoverage({service}: {service: string}) {
+  const data = jsonData[`/src/data/coverage/${service}.json`];
+  const coverage = Object.values(data);
+  const [sorting, setSorting] = React.useState<SortingState>([
+    { id: "full_name", desc: false },
+  ]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+
+  const table = useReactTable({
+    data: coverage,
+    columns,
+    state: { sorting, columnFilters },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    debugTable: false,
+    initialState: { pagination: { pageSize: 10 } },
+  });
+
+  return (
+    <div className="w-full">
+        <h2 id="api-coverage">API Coverage</h2>
+      <div style={{ marginBottom: 12, marginTop: 12 }}>
+        <input
+          type="text"
+          placeholder="Filter by service name..."
+          value={
+            table.getColumn("full_name")?.getFilterValue() as string || ""
+          }
+          onChange={e =>
+            table.getColumn("full_name")?.setFilterValue(e.target.value)
+          }
+          className="border rounded px-2 py-1 w-full max-w-xs"
+        />
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const canSort = header.column.getCanSort();
+                  const meta = header.column.columnDef.meta as { className?: string } | undefined;
+                  return (
+                    <TableHead
+                      key={header.id}
+                      onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
+                      className={
+                        (meta?.className || "") +
+                        (canSort ? " cursor-pointer select-none" : "")
+                      }
+                    >
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                      {canSort && (
+                        <span>
+                          {header.column.getIsSorted() === "asc"
+                            ? " ▲"
+                            : header.column.getIsSorted() === "desc"
+                            ? " ▼"
+                            : ""}
+                        </span>
+                      )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id}>
+                {row.getVisibleCells().map((cell) => {
+                  const meta = cell.column.columnDef.meta as { className?: string } | undefined;
+                  return (
+                    <TableCell
+                      key={cell.id}
+                      className={meta?.className || undefined}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-between mt-4">
+        <button
+          className="px-3 py-1 border rounded disabled:opacity-50"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </button>
+        <span>
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+        </span>
+        <button
+          className="px-3 py-1 border rounded disabled:opacity-50"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+} 

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

@@ -4,12 +4,14 @@ description: Get started with Bedrock on LocalStack
 tags: ["Ultimate"]
 ---
 
+import FeatureCoverage from "../../../../components/feature-coverage/FeatureCoverage";
+
 ## Introduction
 
 Bedrock is a fully managed service provided by Amazon Web Services (AWS) that makes foundation models from various LLM providers accessible via an API.
 
 LocalStack allows you to use the Bedrock APIs to test and develop AI-powered applications in your local environment.
-The supported APIs are available on our [API Coverage Page](), which provides information on the extent of Bedrock's integration with LocalStack.
+The supported APIs are available on our [API Coverage section](#api-coverage), which provides information on the extent of Bedrock's integration with LocalStack.
 
 ## Getting started
 
@@ -176,3 +178,5 @@ To achieve that you can search for models in the [Ollama Models library](https:/
 * At this point, we have only tested text-based models in LocalStack.
 Other models available with Ollama might also work, but are not officially supported by the Bedrock implementation.
 * Currently, GPU models are not supported by the LocalStack Bedrock implementation.
+
+<FeatureCoverage service="bedrock" client:load />