ci4sManagement-cloud/react-ui/src/pages/ModelDeployment/VersionInfo/index.tsx

/*
 * @Author: 赵伟
 * @Date: 2024-04-16 13:58:08
 * @Description: 服务版本详情
 */
import IframePage from '@/components/IFramePage';
import KFIcon from '@/components/KFIcon';
import PageTitle from '@/components/PageTitle';
import { ServiceRunStatus } from '@/enums';
import { getServiceVersionInfoReq } from '@/services/modelDeployment';
import { to } from '@/utils/promise';
import { useParams } from '@umijs/max';
import { Tabs } from 'antd';
import { useEffect, useState } from 'react';
import ServerLog from '../components/ServerLog';
import VersionBasicInfo from '../components/VersionBasicInfo';
import { ServiceVersionData } from '../types';
import styles from './index.less';

export enum ModelDeploymentTabKey {
  Basic = 'Basic', // 基本信息
  Predict = 'Predict', // 预测
  Guide = 'Guide', // 调用指南
  Log = 'Log', // 服务日志
}

function ServiceVersionInfo() {
  const [versionInfo, setVersionInfo] = useState<ServiceVersionData | undefined>(undefined);
  const params = useParams();
  const id = params.id;

  useEffect(() => {
    // 获取服务版本详情
    const getServiceVersionInfo = async () => {
      const [res] = await to(getServiceVersionInfoReq(id));
      if (res && res.data) {
        setVersionInfo(res.data);
      }
    };

    if (id) {
      getServiceVersionInfo();
    }
  }, [id]);

  const tabItems = [
    {
      key: ModelDeploymentTabKey.Basic,
      label: '基本信息',
      icon: <KFIcon type="icon-jibenxinxi" />,
      children: <VersionBasicInfo info={versionInfo} />,
    },
  ];

  if (versionInfo?.run_state === ServiceRunStatus.Running) {
    if (versionInfo?.page_path) {
      tabItems.push({
        key: ModelDeploymentTabKey.Predict,
        label: '预测',
        icon: <KFIcon type="icon-yuce" />,
        children: <IframePage url={versionInfo?.page_path} showLoading={false}></IframePage>,
      });
    }

    if (versionInfo?.doc_path) {
      tabItems.push({
        key: ModelDeploymentTabKey.Guide,
        label: '调用指南',
        icon: <KFIcon type="icon-tiaoyongzhinan" />,
        children: <IframePage url={versionInfo?.doc_path}></IframePage>,
      });
    }
  }

  tabItems.push({
    key: ModelDeploymentTabKey.Log,
    label: '服务日志',
    icon: <KFIcon type="icon-fuwurizhi" />,
    children: <ServerLog info={versionInfo}></ServerLog>,
  });

  return (
    <div className={styles['service-version-info']}>
      <PageTitle title="服务版本详情"></PageTitle>
      <div className={styles['service-version-info__content']}>
        <div className={styles['service-version-info__content__tabs']}>
          <Tabs items={tabItems} />
        </div>
      </div>
    </div>
  );
}

export default ServiceVersionInfo;