feat: display provider models

src/pages/dashboard/components/usage-inner/use-usage-data.tsx

@@ -1,5 +1,6 @@
 import { queryModelsList } from '@/pages/llmodels/apis';
 import { ListItem as ModelListItem } from '@/pages/llmodels/config/types';
+import useTargetSourceModels from '@/pages/model-routes/hooks/use-target-source-models';
 import { queryUsersList } from '@/pages/users/apis';
 import dayjs from 'dayjs';
 import _ from 'lodash';
@@ -93,6 +94,7 @@ export default function useUseageData<T>(config: {
     start_date: string;
     end_date: string;
     model_ids: number[];
+    provider_model_names: string[];
     user_ids: number[];
   }>({
     start_date: dayjs()
@@ -100,12 +102,15 @@ export default function useUseageData<T>(config: {
       .format('YYYY-MM-DD'),
     end_date: dayjs().format('YYYY-MM-DD'),
     model_ids: [],
-    user_ids: []
+    user_ids: [],
+    provider_model_names: []
   });
-
-  const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
+  const { sourceModels: modelList, fetchSourceModels } =
+    useTargetSourceModels();
+  const [models, setModelList] = useState<Global.BaseOption<string>[]>([]);
   const [userList, setUserList] = useState<Global.BaseOption<string>[]>([]);
   const [loading, setLoading] = useState(false);
+  const [selectedModels, setSelectedModels] = useState<string[][]>([]);
 
   const usageData = useMemo<{
     requestTokenData: RequestTokenData;
@@ -301,19 +306,36 @@ export default function useUseageData<T>(config: {
     });
     fetchUsageData({ ...query, user_ids: value });
   };
-  const handleModelsChange = (value: number[]) => {
+
+  const generateModelsValue = (value: string[][]) => {
+    const modelIds = [] as number[];
+    const providerModelNames = [] as string[];
+    value.forEach((item: Array<string | number>) => {
+      if (item[0] === 'deployments') {
+        modelIds.push(item[1] as number);
+      } else {
+        providerModelNames.push(`${item[0]}:${item[1]}`);
+      }
+    });
+    return {
+      model_ids: modelIds,
+      provider_model_names: providerModelNames
+    };
+  };
+  const handleModelsChange = (value: string[][]) => {
+    setSelectedModels(value);
     setQuery((pre) => {
       return {
         ...pre,
-        model_ids: value
+        ...generateModelsValue(value)
       };
     });
-    fetchUsageData({ ...query, model_ids: value });
+    fetchUsageData({ ...query, ...generateModelsValue(value) });
   };
 
   const init = () => {
     fetchUsageData(query);
-    fetchModelsList();
+    fetchSourceModels();
     fetchUsersList();
   };
 
@@ -325,6 +347,7 @@ export default function useUseageData<T>(config: {
     userList,
     modelList,
     query,
+    selectedModels,
     setQuery,
     init,
     setResult,