mirror of
https://github.com/Mintplex-Labs/vector-admin.git
synced 2026-07-19 21:23:38 -04:00
WIP header complete organization view
This commit is contained in:
shatfield4
@@ -37,60 +37,96 @@ const Statistics = ({ organization }: { organization: any }) => {
|
||||
}, [organization?.slug]);
|
||||
|
||||
return (
|
||||
<div className="col-span-12 rounded-md border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4 xl:gap-0">
|
||||
<div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark xl:border-b-0 xl:border-r xl:pb-0">
|
||||
{documents.status === 'loading' ? (
|
||||
<PreLoader />
|
||||
) : (
|
||||
<div className="flex flex-col items-center">
|
||||
<h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
|
||||
{nFormatter(documents.value)}
|
||||
</h4>
|
||||
<p className="text-sm font-medium">
|
||||
{pluralize('Document', documents.value)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
// <div className="col-span-12 rounded-md border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
|
||||
// <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4 xl:gap-0">
|
||||
// <div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark xl:border-b-0 xl:border-r xl:pb-0">
|
||||
// {documents.status === 'loading' ? (
|
||||
// <PreLoader />
|
||||
// ) : (
|
||||
// <div className="flex flex-col items-center">
|
||||
// <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
|
||||
// {nFormatter(documents.value)}
|
||||
// </h4>
|
||||
// <p className="text-sm font-medium">
|
||||
// {pluralize('Document', documents.value)}
|
||||
// </p>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
|
||||
<div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark xl:border-b-0 xl:border-r xl:pb-0">
|
||||
{vectors.status === 'loading' ? (
|
||||
<PreLoader />
|
||||
) : (
|
||||
<div className="flex flex-col items-center">
|
||||
<h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
|
||||
{nFormatter(vectors.value)}
|
||||
</h4>
|
||||
<p className="text-sm font-medium">
|
||||
{pluralize('Vector', vectors.value)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
// <div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark xl:border-b-0 xl:border-r xl:pb-0">
|
||||
// {vectors.status === 'loading' ? (
|
||||
// <PreLoader />
|
||||
// ) : (
|
||||
// <div className="flex flex-col items-center">
|
||||
// <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
|
||||
// {nFormatter(vectors.value)}
|
||||
// </h4>
|
||||
// <p className="text-sm font-medium">
|
||||
// {pluralize('Vector', vectors.value)}
|
||||
// </p>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
|
||||
<div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark sm:border-b-0 sm:pb-0 xl:border-r">
|
||||
{cache.status === 'loading' ? (
|
||||
<PreLoader />
|
||||
) : (
|
||||
<div className="flex flex-col items-center">
|
||||
<h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
|
||||
{humanFileSize(cache.value)}
|
||||
</h4>
|
||||
<p className="text-sm font-medium">Vector Cache (MB)</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
// <div className="flex items-center justify-center gap-2 border-b border-stroke pb-5 dark:border-strokedark sm:border-b-0 sm:pb-0 xl:border-r">
|
||||
// {cache.status === 'loading' ? (
|
||||
// <PreLoader />
|
||||
// ) : (
|
||||
// <div className="flex flex-col items-center">
|
||||
// <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
|
||||
// {humanFileSize(cache.value)}
|
||||
// </h4>
|
||||
// <p className="text-sm font-medium">Vector Cache (MB)</p>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="flex flex-col items-center">
|
||||
<h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
|
||||
{organization?.lastUpdated
|
||||
? moment(organization.lastUpdated).fromNow()
|
||||
: moment(organization.createdAt).fromNow()}
|
||||
</h4>
|
||||
<p className="text-sm font-medium">Last Modified</p>
|
||||
</div>
|
||||
// <div className="flex items-center justify-center gap-2">
|
||||
// <div className="flex flex-col items-center">
|
||||
// <h4 className="mb-0.5 text-xl font-bold text-black dark:text-white md:text-title-lg">
|
||||
// {organization?.lastUpdated
|
||||
// ? moment(organization.lastUpdated).fromNow()
|
||||
// : moment(organization.createdAt).fromNow()}
|
||||
// </h4>
|
||||
// <p className="text-sm font-medium">Last Modified</p>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
<div className="-mt-4 flex w-full items-center">
|
||||
<div className=" ml-4 flex items-center gap-x-6">
|
||||
<div className="flex items-center gap-x-1">
|
||||
<span className="font-['Plus Jakarta Sans'] text-sm font-bold uppercase leading-[18px] tracking-wide text-white">
|
||||
Documents
|
||||
</span>
|
||||
<span className="font-['JetBrains Mono'] text-sm font-bold uppercase leading-[18px] tracking-wide text-white">
|
||||
{' '}
|
||||
</span>
|
||||
<span className="font-['JetBrains Mono'] text-sm font-extrabold uppercase leading-[18px] tracking-wide text-white">
|
||||
({nFormatter(documents.value)})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-4 mr-48 w-full rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
|
||||
<div className="flex items-center justify-between whitespace-nowrap">
|
||||
<span className="font-jetbrains uppercase text-white">
|
||||
{pluralize('Vector', vectors.value)}:{' '}
|
||||
<span className=" font-jetbrainsbold">
|
||||
{nFormatter(vectors.value)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="font-jetbrains uppercase text-white">
|
||||
Vector Cache:{' '}
|
||||
<span className=" font-jetbrainsbold">
|
||||
{humanFileSize(cache.value)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="font-jetbrains uppercase text-white">
|
||||
Dimensions: <span className=" font-jetbrainsbold">{10}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,13 @@ import DocumentsList from './DocumentsList';
|
||||
import Organization from '../../models/organization';
|
||||
import ApiKeyCard from './ApiKey';
|
||||
import ConnectorCard from './Connector';
|
||||
import truncate from 'truncate';
|
||||
|
||||
import ChromaLogo from '../../images/vectordbs/chroma.png';
|
||||
import PineconeLogo from '../../images/vectordbs/pinecone-inverted.png';
|
||||
import qDrantLogo from '../../images/vectordbs/qdrant.png';
|
||||
import WeaviateLogo from '../../images/vectordbs/weaviate.png';
|
||||
import { GearSix } from '@phosphor-icons/react';
|
||||
|
||||
export default function Dashboard() {
|
||||
const { slug } = useParams();
|
||||
@@ -97,18 +104,25 @@ export default function Dashboard() {
|
||||
workspaces={workspaces}
|
||||
hasMoreWorkspaces={hasMoreWorkspaces}
|
||||
loadMoreWorkspaces={fetchWorkspaces}
|
||||
headerExtendedItems={
|
||||
<OrganizationHeader
|
||||
organization={organization}
|
||||
workspace={workspaces?.[0]}
|
||||
connector={connector}
|
||||
deleteWorkspace={() => {}}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{!!organization && (
|
||||
<div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5">
|
||||
<ConnectorCard
|
||||
{/* <ConnectorCard
|
||||
knownConnector={connector}
|
||||
organization={organization}
|
||||
workspaces={workspaces}
|
||||
/>
|
||||
<ApiKeyCard organization={organization} />
|
||||
<ApiKeyCard organization={organization} /> */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Statistics organization={organization} />
|
||||
<div className="mt-4 grid grid-cols-12 gap-4 md:mt-6 md:gap-6 2xl:mt-7.5 2xl:gap-7.5">
|
||||
<div className="col-span-12 xl:col-span-8">
|
||||
@@ -128,3 +142,70 @@ export default function Dashboard() {
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function OrganizationHeader({
|
||||
organization,
|
||||
workspace,
|
||||
connector,
|
||||
deleteWorkspace,
|
||||
}: any) {
|
||||
let logo;
|
||||
switch (connector?.type) {
|
||||
case 'chroma':
|
||||
logo = ChromaLogo;
|
||||
break;
|
||||
case 'qdrant':
|
||||
logo = qDrantLogo;
|
||||
break;
|
||||
case 'weaviate':
|
||||
logo = WeaviateLogo;
|
||||
break;
|
||||
default:
|
||||
logo = PineconeLogo;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" mr-10 w-full rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<span className="text-lg font-medium text-white">
|
||||
{truncate(organization?.name, 20)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-x-3">
|
||||
<button
|
||||
onClick={() =>
|
||||
window.document?.getElementById('edit-connector-modal')?.showModal()
|
||||
}
|
||||
className="flex h-11 w-11 items-center justify-center rounded-lg border-2 border-white border-opacity-20 transition-all duration-300 hover:bg-opacity-5"
|
||||
>
|
||||
<img
|
||||
src={logo}
|
||||
alt="Connector logo"
|
||||
className="h-full p-1 grayscale"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
document?.getElementById('sync-connector-modal')?.showModal()
|
||||
}
|
||||
className="inline-flex h-11 w-[74px] flex-col items-center justify-center gap-2.5 rounded-lg bg-white bg-opacity-10 px-5 py-2.5 transition-all duration-300 hover:bg-opacity-5"
|
||||
>
|
||||
<div className="h-[25.53px] w-11 text-center font-['Satoshi'] text-base font-bold text-white">
|
||||
Sync
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
window.document?.getElementById('edit-connector-modal')?.showModal()
|
||||
}
|
||||
className="flex h-11 w-11 items-center justify-center rounded-lg border-2 border-white border-opacity-20 text-white transition-all duration-300 hover:bg-opacity-5"
|
||||
>
|
||||
<GearSix size={28} />
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -169,7 +169,7 @@ function DocumentViewHeader({ organization, workspace, document }: any) {
|
||||
return (
|
||||
<>
|
||||
<div className=" mr-10 w-full rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div className="flex items-center gap-x-2 text-lg">
|
||||
<a
|
||||
href={paths.organization(organization)}
|
||||
className="text-sky-400 hover:cursor-pointer hover:underline"
|
||||
@@ -188,7 +188,9 @@ function DocumentViewHeader({ organization, workspace, document }: any) {
|
||||
<div className="text-sky-400" style={{ transform: 'rotate(270deg)' }}>
|
||||
<CaretDown weight="bold" />
|
||||
</div>
|
||||
<span className="text-white">{truncate(document?.name, 30)}</span>
|
||||
<span className="text-lg font-medium text-white">
|
||||
{truncate(document?.name, 30)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-x-3">
|
||||
|
||||
@@ -801,7 +801,7 @@ function WorkspaceViewHeader({
|
||||
return (
|
||||
<>
|
||||
<div className=" mr-10 w-full rounded-xl border-2 border-white/20 px-5 py-2 text-sky-400">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div className="flex items-center gap-x-2 text-lg">
|
||||
<a
|
||||
href={paths.organization(organization)}
|
||||
className="text-sky-400 hover:cursor-pointer hover:underline"
|
||||
@@ -811,7 +811,9 @@ function WorkspaceViewHeader({
|
||||
<div className="text-sky-400" style={{ transform: 'rotate(270deg)' }}>
|
||||
<CaretDown weight="bold" />
|
||||
</div>
|
||||
<span className="text-white">{truncate(workspace?.name, 20)}</span>
|
||||
<span className="text-lg font-medium text-white">
|
||||
{truncate(workspace?.name, 20)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-x-3">
|
||||
|
||||
Reference in New Issue
Block a user