Testing a feature coverage component

remotesynth · remotesynth · commit 76ee973869c7 · 2025-06-16T16:54:06.000-04:00
The dynamic import is now working but the table structure and data isn't set up
diff --git a/src/components/feature-coverage/FeatureCoverage.tsx b/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>
+  );
+} 
diff --git a/src/content/docs/aws/services/bedrock.mdx b/src/content/docs/aws/services/bedrock.mdx
@@ -5,11 +5,13 @@ description: Use foundation models running on your device with 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]({{< ref "coverage_bedrock" >}}), 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
 
@@ -37,16 +39,17 @@ This way you avoid long wait times when switching between models on demand with
 
 You can view all available foundation models using the [`ListFoundationModels`](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_ListFoundationModels.html) API.
 This will show you which models are available on AWS Bedrock.
-{{< callout "note">}}
+
+:::note
 The actual model that will be used for emulation will differ from the ones defined in this list.
 You can define the used model with `DEFAULT_BEDROCK_MODEL`
-{{< / callout >}}
+:::
 
 Run the following command:
 
-{{< command >}}
-$ awslocal bedrock list-foundation-models
-{{< / command >}}
+```bash
+awslocal bedrock list-foundation-models
+```
 
 ### Invoke a model
 
@@ -56,15 +59,15 @@ However, the actual model will be defined by the `DEFAULT_BEDROCK_MODEL` environ
 
 Run the following command:
 
-{{< command >}}
-$ awslocal bedrock-runtime invoke-model \
+```bash
+awslocal bedrock-runtime invoke-model \
     --model-id "meta.llama3-8b-instruct-v1:0" \
     --body '{
         "prompt": "<|begin_of_text|><|start_header_id|>user<|end_header_id|>\nSay Hello!\n<|eot_id|>\n<|start_header_id|>assistant<|end_header_id|>",
         "max_gen_len": 2,
         "temperature": 0.9
     }' --cli-binary-format raw-in-base64-out outfile.txt
-{{< / command >}}
+```
 
 The output will be available in the `outfile.txt`.
 
@@ -75,8 +78,8 @@ You can specify both system prompts and user messages.
 
 Run the following command:
 
-{{< command >}}
-$ awslocal bedrock-runtime converse \
+```bash
+awslocal bedrock-runtime converse \
     --model-id "meta.llama3-8b-instruct-v1:0" \
     --messages '[{
         "role": "user",
@@ -87,38 +90,38 @@ $ awslocal bedrock-runtime converse \
     --system '[{
         "text": "You'\''re a chatbot that can only say '\''Hello!'\''"
     }]'
-{{< / command >}}
+```
 
 ### Model Invocation Batch Processing
 
 Bedrock offers the feature to handle large batches of model invocation requests defined in S3 buckets using the [`CreateModelInvocationJob`](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_CreateModelInvocationJob.html) API.
 
 First, you need to create a `JSONL` file that contains all your prompts:
 
-{{< command >}}
-$ cat batch_input.jsonl
+```bash
+cat batch_input.jsonl
 {"prompt": "Tell me a quick fact about Vienna.", "max_tokens": 50, "temperature": 0.5}
 {"prompt": "Tell me a quick fact about Zurich.", "max_tokens": 50, "temperature": 0.5}
 {"prompt": "Tell me a quick fact about Las Vegas.", "max_tokens": 50, "temperature": 0.5}
-{{< / command >}}
+```
 
 Then, you need to define buckets for the input as well as the output and upload the file in the input bucket:
 
-{{< command >}}
-$ awslocal s3 mb s3://in-bucket
+```bash
+awslocal s3 mb s3://in-bucket
 make_bucket: in-bucket
 
-$ awslocal s3 cp batch_input.jsonl s3://in-bucket
+awslocal s3 cp batch_input.jsonl s3://in-bucket
 upload: ./batch_input.jsonl to s3://in-bucket/batch_input.jsonl
 
-$ awslocal s3 mb s3://out-bucket
+awslocal s3 mb s3://out-bucket
 make_bucket: out-bucket
-{{< / command >}}
+```
 
 Afterwards you can run the invocation job like this:
 
-{{< command >}}
-$ awslocal bedrock create-model-invocation-job \
+```bash
+awslocal bedrock create-model-invocation-job \
   --job-name "my-batch-job" \
   --model-id "mistral.mistral-small-2402-v1:0" \
   --role-arn "arn:aws:iam::123456789012:role/MyBatchInferenceRole" \
@@ -127,7 +130,7 @@ $ awslocal bedrock create-model-invocation-job \
 {
     "jobArn": "arn:aws:bedrock:us-east-1:000000000000:model-invocation-job/12345678"
 }
-{{< / command >}}
+```
 
 The results will be at the S3 URL `s3://out-bucket/12345678/batch_input.jsonl.out`
 
@@ -140,33 +143,33 @@ LocalStack will pull the model from Ollama and use it for emulation.
 
 For example, to use the Mistral model, set the environment variable while starting LocalStack:
 
-{{< command >}}
-$ DEFAULT_BEDROCK_MODEL=mistral localstack start
-{{< / command >}}
+```bash
+DEFAULT_BEDROCK_MODEL=mistral localstack start
+```
 
 You can also define models directly in the request, by setting the `model-id` parameter to `ollama.<ollama-model-id>`.
 For example, if you want to access `deepseek-r1`, you can do it like this:
 
-{{< command >}}
-$ awslocal bedrock-runtime converse \
+```bash
+awslocal bedrock-runtime converse \
     --model-id "ollama.deepseek-r1" \
     --messages '[{
         "role": "user",
         "content": [{
             "text": "Say Hello!"
         }]
     }]'
-{{< / command >}}
+```
 
 ## Troubleshooting
 
 Users of Docker Desktop on macOS or Windows might run into the issue of Bedrock becoming unresponsive after some usage.
 A common reason for that is insufficient storage or memory space in the Docker Desktop VM.
 To resolve this issue you can increase those amounts directly in Docker Desktop or clean up unused artifacts with the Docker CLI like this
 
-{{< command >}}
-$ docker system prune
-{{< / command >}}
+```bash
+docker system prune
+```
 
 You could also try to use a model with lower requirements.
 To achieve that you can search for models in the [Ollama Models library](https://ollama.com/search) with a low parameter count or smaller size.
@@ -176,3 +179,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 />
