feat: usage

src/pages/usage/services/use-query-breakdown-list.ts

@@ -0,0 +1,93 @@
+import {
+  apiKeysTableDataAtom,
+  modelsTableDataAtom,
+  usersTableDataAtom
+} from '@/atoms/usage';
+import { useQueryDataList } from '@/hooks/use-query-data-list';
+import { useSetAtom } from 'jotai';
+import React from 'react';
+import { queryUsageBreakdownList } from '../apis';
+import { FilterOptionType, BreakdownItem as ListItem } from '../config/types';
+
+export const useQueryBreakdownList = (options?: {
+  getLabel?: (item: ListItem) => string;
+  getValue?: (item: ListItem) => any;
+  key: 'modelsTableData' | 'usersTableData' | 'apiKeysTableData' | string;
+}) => {
+  const setApiKeysTableData = useSetAtom(apiKeysTableDataAtom);
+  const setModelsTableData = useSetAtom(modelsTableDataAtom);
+  const setUsersTableData = useSetAtom(usersTableDataAtom);
+  const { key = 'usageBreakdownList' } = options || {};
+  const [dataSource, setDataSource] = React.useState<{
+    loadend: boolean;
+    dataList: ListItem[];
+    total: number;
+  }>({
+    total: 0,
+    loadend: false,
+    dataList: []
+  });
+  const { dataList, loading, fetchData, cancelRequest } = useQueryDataList<
+    ListItem,
+    Global.SearchParams & {
+      filters: {
+        models?: FilterOptionType[];
+        users?: FilterOptionType[];
+        api_keys?: FilterOptionType[];
+      };
+    },
+    Global.PageResponse<ListItem>
+  >({
+    key: key,
+    responseType: 'object',
+    fetchList: queryUsageBreakdownList
+  });
+
+  const fetchListData = async (
+    params: Global.SearchParams & {
+      filters: {
+        models?: FilterOptionType[];
+        users?: FilterOptionType[];
+        api_keys?: FilterOptionType[];
+      };
+    }
+  ) => {
+    const res = await fetchData(params);
+    setDataSource({
+      dataList: res.items || [],
+      loadend: true,
+      total: res.pagination?.total || 0
+    });
+    if (key === 'apiKeysTableData') {
+      setApiKeysTableData({
+        dataList: res.items || [],
+        loadend: true,
+        total: res.pagination?.total || 0
+      });
+    }
+    if (key === 'modelsTableData') {
+      setModelsTableData({
+        dataList: res.items || [],
+        loadend: true,
+        total: res.pagination?.total || 0
+      });
+    }
+    if (key === 'usersTableData') {
+      setUsersTableData({
+        dataList: res.items || [],
+        loadend: true,
+        total: res.pagination?.total || 0
+      });
+    }
+  };
+
+  return {
+    dataList,
+    dataSource,
+    loading,
+    fetchData: fetchListData,
+    cancelRequest
+  };
+};
+
+export default useQueryBreakdownList;

src/pages/usage/services/use-query-meta-data.ts

@@ -0,0 +1,56 @@
+import { useQueryData } from '@/hooks/use-query-data-list';
+import { useState } from 'react';
+import { queryUsageMetaData } from '../apis';
+import { UsageFilterItem, UsageMeta } from '../config/types';
+
+type OptionType = UsageFilterItem & {
+  value: string;
+};
+
+export default function useQueryUsageMetaData() {
+  const { detailData, loading, cancelRequest, fetchData } =
+    useQueryData<UsageMeta>({
+      fetchDetail: queryUsageMetaData,
+      key: 'usageMetaData'
+    });
+
+  const [result, setResult] = useState<{
+    models: OptionType[];
+    users: OptionType[];
+    api_keys: OptionType[];
+  }>({
+    models: [],
+    users: [],
+    api_keys: []
+  });
+
+  const queryMetaData = async () => {
+    const res = await fetchData({});
+
+    const data = {
+      models:
+        res?.filters?.models?.map((item) => ({
+          value: item.label,
+          ...item
+        })) || [],
+      users:
+        res?.filters?.users?.map((item) => ({
+          value: item.label,
+          ...item
+        })) || [],
+      api_keys:
+        res?.filters?.api_keys?.map((item) => ({
+          value: item.label,
+          ...item
+        })) || []
+    };
+    setResult(data);
+  };
+
+  return {
+    detailData: result,
+    loading,
+    cancelRequest,
+    fetchData: queryMetaData
+  };
+}

src/pages/usage/services/use-query-timeseries-data.ts

@@ -0,0 +1,17 @@
+import { useQueryData } from '@/hooks/use-query-data-list';
+import { queryUsageTimeSeriesData } from '../apis';
+import { TimeSeriesData } from '../config/types';
+
+export default function useQueryTimeSeriesData() {
+  const { detailData, loading, cancelRequest, fetchData } =
+    useQueryData<TimeSeriesData>({
+      fetchDetail: queryUsageTimeSeriesData,
+      key: 'timeSeriesData'
+    });
+  return {
+    detailData,
+    loading,
+    cancelRequest,
+    fetchData
+  };
+}