mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-07-29 15:23:51 +00:00
feat: Adding UI support for Vector Stores
Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
This commit is contained in:
parent
51d9fd4808
commit
466e234591
4 changed files with 133 additions and 7 deletions
16
llama_stack/ui/app/logs/vector-stores/layout.tsx
Normal file
16
llama_stack/ui/app/logs/vector-stores/layout.tsx
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import LogsLayout from "@/components/layout/logs-layout";
|
||||||
|
|
||||||
|
export default function VectorStoresLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<LogsLayout sectionLabel="Vector Stores" basePath="/logs/vector-stores">
|
||||||
|
{children}
|
||||||
|
</LogsLayout>
|
||||||
|
);
|
||||||
|
}
|
105
llama_stack/ui/app/logs/vector-stores/page.tsx
Normal file
105
llama_stack/ui/app/logs/vector-stores/page.tsx
Normal file
|
@ -0,0 +1,105 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useAuthClient } from "@/hooks/use-auth-client";
|
||||||
|
import type {
|
||||||
|
ListVectorStoresResponse,
|
||||||
|
VectorStore,
|
||||||
|
} from "llama-stack-client/resources/vector-stores/vector-stores";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCaption,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
|
||||||
|
export default function VectorStoresPage() {
|
||||||
|
const client = useAuthClient();
|
||||||
|
const router = useRouter();
|
||||||
|
const [stores, setStores] = useState<VectorStore[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchStores() {
|
||||||
|
try {
|
||||||
|
const response = await client.vectorStores.list();
|
||||||
|
const res = response as ListVectorStoresResponse;
|
||||||
|
setStores(res.data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(
|
||||||
|
err instanceof Error
|
||||||
|
? err.message
|
||||||
|
: "Failed to load vector stores.",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fetchStores();
|
||||||
|
}, [client]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Skeleton className="h-8 w-full" />
|
||||||
|
<Skeleton className="h-4 w-full" />
|
||||||
|
<Skeleton className="h-4 w-full" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return <div className="text-destructive">Error: {error}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table>
|
||||||
|
<TableCaption>A list of your vector stores.</TableCaption>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>ID</TableHead>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>Created</TableHead>
|
||||||
|
<TableHead>Completed</TableHead>
|
||||||
|
<TableHead>Cancelled</TableHead>
|
||||||
|
<TableHead>Failed</TableHead>
|
||||||
|
<TableHead>In Progress</TableHead>
|
||||||
|
<TableHead>Total</TableHead>
|
||||||
|
<TableHead>Usage Bytes</TableHead>
|
||||||
|
<TableHead>Provider ID</TableHead>
|
||||||
|
<TableHead>Provider Vector DB ID</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{stores.map((store) => {
|
||||||
|
const fileCounts = store.file_counts;
|
||||||
|
const metadata = store.metadata || {};
|
||||||
|
const providerId = metadata.provider_id ?? "";
|
||||||
|
const providerDbId = metadata.provider_vector_db_id ?? "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TableRow key={store.id} className="hover:bg-muted/50">
|
||||||
|
<TableCell>{store.id}</TableCell>
|
||||||
|
<TableCell>{store.name}</TableCell>
|
||||||
|
<TableCell>{new Date(store.created_at * 1000).toLocaleString()}</TableCell>
|
||||||
|
<TableCell>{fileCounts.completed}</TableCell>
|
||||||
|
<TableCell>{fileCounts.cancelled}</TableCell>
|
||||||
|
<TableCell>{fileCounts.failed}</TableCell>
|
||||||
|
<TableCell>{fileCounts.in_progress}</TableCell>
|
||||||
|
<TableCell>{fileCounts.total}</TableCell>
|
||||||
|
<TableCell>{store.usage_bytes}</TableCell>
|
||||||
|
<TableCell>{providerId}</TableCell>
|
||||||
|
<TableCell>{providerDbId}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { MessageSquareText, MessagesSquare, MoveUpRight } from "lucide-react";
|
import { MessageSquareText, MessagesSquare, MoveUpRight, Database } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
@ -28,6 +28,11 @@ const logItems = [
|
||||||
url: "/logs/responses",
|
url: "/logs/responses",
|
||||||
icon: MessagesSquare,
|
icon: MessagesSquare,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Vector Stores",
|
||||||
|
url: "/logs/vector-stores",
|
||||||
|
icon: Database,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "Documentation",
|
title: "Documentation",
|
||||||
url: "https://llama-stack.readthedocs.io/en/latest/references/api_reference/index.html",
|
url: "https://llama-stack.readthedocs.io/en/latest/references/api_reference/index.html",
|
||||||
|
|
12
llama_stack/ui/package-lock.json
generated
12
llama_stack/ui/package-lock.json
generated
|
@ -3962,9 +3962,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
|
"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
|
||||||
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
|
"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -4887,9 +4887,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/brace-expansion": {
|
"node_modules/brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.12",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
|
||||||
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
|
"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue