wehub-resource-sync
49 lines
1.5 KiB
React
49 lines
1.5 KiB
React
import React from "react";
|
|
import { Box, Text } from "ink";
|
|
import { HeaderSwr } from "../../tui-components/HeaderSwr.jsx";
|
|
import { DataTable } from "../../tui-components/DataTable.jsx";
|
|
import { StatusBadge } from "../../tui-components/StatusBadge.jsx";
|
|
|
|
const SCHEMA = [
|
|
{ key: "name", header: "Provider", width: 16 },
|
|
{ key: "status", header: "Status", width: 12, formatter: (v) => v },
|
|
{ key: "accounts", header: "Accounts", width: 10 },
|
|
{ key: "models", header: "Models", width: 8 },
|
|
];
|
|
|
|
export default function Providers({ baseUrl, apiKey }) {
|
|
const fetcher = React.useCallback(async () => {
|
|
const res = await fetch(`${baseUrl}/api/providers`, {
|
|
headers: apiKey ? { Authorization: `Bearer ${apiKey}` } : {},
|
|
});
|
|
return res.ok ? res.json() : [];
|
|
}, [baseUrl, apiKey]);
|
|
|
|
return (
|
|
<Box flexDirection="column">
|
|
<HeaderSwr
|
|
fetcher={fetcher}
|
|
interval={10000}
|
|
render={(data) => {
|
|
const rows = Array.isArray(data) ? data : (data?.providers ?? []);
|
|
return (
|
|
<DataTable
|
|
rows={rows.map((p) => ({
|
|
name: p.name ?? p.id,
|
|
status: p.status ?? "unknown",
|
|
accounts: p.accountCount ?? 0,
|
|
models: p.modelCount ?? 0,
|
|
}))}
|
|
schema={SCHEMA}
|
|
selectable
|
|
/>
|
|
);
|
|
}}
|
|
/>
|
|
<Box marginTop={1}>
|
|
<Text dimColor>[↑↓] select [Enter] details [t] test [r] refresh</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|