78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
import { Tabs } from 'antd';
|
|
import React from 'react';
|
|
import { GroupOption } from '../config';
|
|
import { UsageFilterItem } from '../config/types';
|
|
import ApiKeysTable from '../tables/apikeys-table';
|
|
import ModelsTable from '../tables/models-table';
|
|
import UsersTable from '../tables/users-table';
|
|
|
|
type FilterOptionType = Omit<UsageFilterItem, 'label' | 'deleted'>;
|
|
type GroupOptionType = GroupOption<UsageFilterItem>;
|
|
|
|
const BreakdownTabs: React.FC<{
|
|
dateRange: {
|
|
start_date: string;
|
|
end_date: string;
|
|
};
|
|
scope: string;
|
|
filters: {
|
|
models?: FilterOptionType[];
|
|
users?: FilterOptionType[];
|
|
api_keys?: FilterOptionType[];
|
|
};
|
|
}> = ({ filters, dateRange, scope }) => {
|
|
const items = [
|
|
{
|
|
key: 'models',
|
|
label: 'Models',
|
|
forceRender: true,
|
|
children: (
|
|
<ModelsTable
|
|
key="models"
|
|
models={filters.models || []}
|
|
dateRange={dateRange}
|
|
scope={scope}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
key: 'users',
|
|
label: 'Users',
|
|
forceRender: true,
|
|
children: (
|
|
<UsersTable
|
|
key="users"
|
|
users={filters.users || []}
|
|
dateRange={dateRange}
|
|
scope={scope}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
key: 'api_keys',
|
|
label: 'API Keys',
|
|
forceRender: true,
|
|
children: (
|
|
<ApiKeysTable
|
|
key="api_keys"
|
|
apiKeys={filters.api_keys || []}
|
|
dateRange={dateRange}
|
|
scope={scope}
|
|
/>
|
|
)
|
|
}
|
|
].filter((item) => {
|
|
if (item.key === 'users') {
|
|
return scope === 'all';
|
|
}
|
|
return true;
|
|
});
|
|
|
|
return (
|
|
<div style={{ marginTop: 16 }}>
|
|
<Tabs defaultActiveKey="models" items={items} />
|
|
</div>
|
|
);
|
|
};
|
|
export default BreakdownTabs;
|