chore: access, endpoints to route targets

src/pages/model-routes/hooks/use-access-control.ts

@@ -0,0 +1,49 @@
+import { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
+import { useState } from 'react';
+import { RouteItem as ListItem } from '../config/types';
+
+const useAccessControl = () => {
+  const [openModalStatus, setOpenModalStatus] = useState<{
+    open: boolean;
+    action: PageActionType;
+    currentData?: ListItem;
+    title: string;
+  }>({
+    open: false,
+    action: PageAction.CREATE,
+    currentData: undefined,
+    title: ''
+  });
+
+  const openModal = (
+    action: PageActionType,
+    title: string,
+    currentData?: ListItem
+  ) => {
+    setOpenModalStatus({
+      open: true,
+      action,
+      currentData,
+      title: title
+    });
+  };
+
+  const closeModal = () => {
+    setOpenModalStatus({
+      open: false,
+      action: PageAction.CREATE,
+      currentData: undefined,
+      title: ''
+    });
+  };
+
+  return {
+    openAccessControlModalStatus: openModalStatus,
+    setOpenAccessControlModalStatus: setOpenModalStatus,
+    openAccessControlModal: openModal,
+    closeAccessControlModal: closeModal
+  };
+};
+
+export default useAccessControl;

src/pages/model-routes/hooks/use-create-route.ts

@@ -0,0 +1,49 @@
+import { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
+import { useState } from 'react';
+import { RouteItem as ListItem } from '../config/types';
+
+const useCreateRoute = (options?: { refresh: () => void }) => {
+  const [openModalStatus, setOpenModalStatus] = useState<{
+    open: boolean;
+    action: PageActionType;
+    currentData?: ListItem;
+    title: string;
+  }>({
+    open: false,
+    action: PageAction.CREATE,
+    currentData: undefined,
+    title: ''
+  });
+
+  const openModal = (
+    action: PageActionType,
+    title: string,
+    currentData?: ListItem
+  ) => {
+    setOpenModalStatus({
+      open: true,
+      action,
+      currentData,
+      title: title
+    });
+  };
+
+  const closeModal = () => {
+    setOpenModalStatus({
+      open: false,
+      action: PageAction.CREATE,
+      currentData: undefined,
+      title: ''
+    });
+  };
+
+  return {
+    openRouteModalStatus: openModalStatus,
+    setOpenRouteModalStatus: setOpenModalStatus,
+    openRouteModal: openModal,
+    closeRouteModal: closeModal
+  };
+};
+
+export default useCreateRoute;

src/pages/model-routes/hooks/use-edit-targets.ts

@@ -0,0 +1,37 @@
+import { queryRouteTargets } from '../apis';
+import { RouteTarget } from '../config/types';
+
+const useEditTargets = () => {
+  const generateTargetData = (targetList: RouteTarget[]) => {
+    const fallbackTarget =
+      targetList?.filter(
+        (ep) => ep.fallback_status_codes && ep.fallback_status_codes?.length > 0
+      )?.[0] || null;
+
+    const targets = targetList?.filter(
+      (ep) =>
+        !ep.fallback_status_codes || ep.fallback_status_codes?.length === 0
+    );
+
+    return {
+      targets: targets,
+      fallbackTarget: fallbackTarget
+    };
+  };
+
+  const fetchTargets = async (accessId: number) => {
+    try {
+      const res = await queryRouteTargets({ id: accessId });
+      return res.items || [];
+    } catch (error) {
+      return [];
+    }
+  };
+
+  return {
+    generateTargetData,
+    fetchTargets
+  };
+};
+
+export default useEditTargets;

src/pages/model-routes/hooks/use-routes-columns.tsx

@@ -0,0 +1,71 @@
+// columns.ts
+import AutoTooltip from '@/components/auto-tooltip';
+import DropdownButtons from '@/components/drop-down-buttons';
+import { SealColumnProps } from '@/components/seal-table/types';
+import { tableSorter } from '@/config/settings';
+import ModelTag from '@/pages/_components/model-tag';
+import { useIntl } from '@umijs/max';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import { rowActionList } from '../config';
+import { RouteItem } from '../config/types';
+
+const useAccessColumns = (
+  handleSelect: (val: string, record: RouteItem) => void,
+  onCellClick?: (record: RouteItem, dataIndex: string) => void
+): SealColumnProps[] => {
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        sorter: tableSorter(1),
+        span: 5,
+        render: (text: string, record: RouteItem) => (
+          <span className="flex-center" style={{ maxWidth: '100%' }}>
+            <AutoTooltip ghost title={text}>
+              <span className="m-r-5">{text}</span>
+            </AutoTooltip>
+            <ModelTag categoryKey={record.categories?.[0]}></ModelTag>
+          </span>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'routes.table.routeTargets' }),
+        dataIndex: 'targets',
+        span: 10,
+        render: (value: number, record: RouteItem) => (
+          <span>
+            {record.ready_targets} / {value}
+          </span>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.createTime' }),
+        dataIndex: 'created_at',
+        sorter: tableSorter(6),
+        span: 5,
+        render: (value: string) => (
+          <AutoTooltip ghost minWidth={20}>
+            {dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        dataIndex: 'operations',
+        span: 4,
+        render: (value: string, record: RouteItem) => (
+          <DropdownButtons
+            items={rowActionList}
+            onSelect={(val) => handleSelect(val, record)}
+          ></DropdownButtons>
+        )
+      }
+    ];
+  }, [handleSelect, onCellClick]);
+};
+
+export default useAccessColumns;

src/pages/model-routes/hooks/use-target-source-models.tsx

@@ -0,0 +1,91 @@
+import { queryModelsList } from '@/pages/llmodels/apis';
+import { ListItem as ModelListItem } from '@/pages/llmodels/config/types';
+import { queryMaasProviders } from '@/pages/maas-provider/apis';
+import { MaasProviderItem } from '@/pages/maas-provider/config/types';
+import { useIntl } from '@umijs/max';
+import { useState } from 'react';
+
+type EmptyObject = Record<never, never>;
+type CascaderOption<T extends object = EmptyObject> = {
+  label: string;
+  value: string | number;
+  parent?: boolean;
+  disabled?: boolean;
+  index?: number;
+  children?: CascaderOption<T>[];
+} & Partial<T>;
+
+const useTargetSourceModels = () => {
+  const intl = useIntl();
+  const [sourceModels, setSourceModels] = useState<CascaderOption[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const fetchSourceModels = async (params?: any) => {
+    setLoading(true);
+    try {
+      const [models, providers] = await Promise.all([
+        queryModelsList({ page: -1, ...params }),
+        queryMaasProviders({ page: -1, ...params })
+      ]);
+
+      const modelsList = [
+        {
+          label: (
+            <span>
+              {intl.formatMessage({ id: 'menu.models.deployment' })}
+              <span
+                style={{
+                  color: 'var(--ant-color-text-tertiary)',
+                  marginLeft: 4
+                }}
+              >
+                [GPUStack]
+              </span>
+            </span>
+          ),
+          value: 'deployments',
+          parent: true,
+          children: models.items?.map?.((model: ModelListItem) => ({
+            label: model.name,
+            value: model.id,
+            data: {
+              model_id: model.id
+            },
+            source: 'deployment'
+          }))
+        }
+      ].filter((group) => group.children && group.children.length > 0);
+
+      const providerOptions: CascaderOption[] = providers.items
+        ?.map?.((provider: MaasProviderItem) => ({
+          label: provider.name,
+          value: provider.id,
+          parent: true,
+          children: provider.models?.map?.((model) => ({
+            label: model.name,
+            value: model.name,
+            data: {
+              provider_model_name: model.name,
+              provider_id: provider.id
+            },
+            source: 'providerModel'
+          }))
+        }))
+        .filter((group) => group.children && group.children.length > 0);
+
+      setSourceModels([...modelsList, ...providerOptions]);
+    } catch (error) {
+      setSourceModels([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    sourceModels,
+    loading,
+    fetchSourceModels
+  };
+};
+
+export default useTargetSourceModels;