ci4sManagement-cloud/react-ui/src/pages/ModelDeployment/info.tsx

/*
 * @Author: 赵伟
 * @Date: 2024-04-16 13:58:08
 * @Description: 镜像详情
 */
import KFIcon from '@/components/KFIcon';
import PageTitle from '@/components/PageTitle';
import SubAreaTitle from '@/components/SubAreaTitle';
import { getMirrorInfoReq } from '@/services/mirror';
import { formatDate } from '@/utils/date';
import { to } from '@/utils/promise';
import { useNavigate, useParams } from '@umijs/max';
import { Col, Row, Tabs, type TabsProps } from 'antd';
import { useEffect, useState } from 'react';
import styles from './info.less';

type MirrorInfoData = {
  name?: string;
  description?: string;
  version_count?: string;
  create_time?: string;
};

type MirrorVersionData = {
  id: number;
  version: string;
  url: string;
  status: string;
  file_size: string;
  create_time: string;
};

const tabItems = [
  {
    key: '1',
    label: '预测',
    icon: <KFIcon type="icon-yuce" />,
  },
  {
    key: '2',
    label: '调用指南',
    icon: <KFIcon type="icon-tiaoyongzhinan" />,
  },
  {
    key: '3',
    label: '服务日志',
    icon: <KFIcon type="icon-fuwurizhi" />,
  },
];

function ModelDeploymentInfo() {
  const navigate = useNavigate();
  const urlParams = useParams();

  const [mirrorInfo, setMirrorInfo] = useState<MirrorInfoData>({});

  const [activeTab, setActiveTab] = useState<string>('1');
  useEffect(() => {
    getMirrorInfo();
  }, []);

  // 获取镜像详情
  const getMirrorInfo = async () => {
    const id = Number(urlParams.id);
    const [res] = await to(getMirrorInfoReq(id));
    if (res && res.data) {
      const { name = '', description = '', version_count = '', create_time: time } = res.data;
      const create_time = formatDate(time);
      setMirrorInfo({
        name,
        description,
        version_count,
        create_time,
      });
    }
  };

  // 切换 Tab，重置数据
  const hanleTabChange: TabsProps['onChange'] = (value) => {
    setActiveTab(value);
  };

  return (
    <div className={styles['model-deployment-info']}>
      <PageTitle title="服务详情"></PageTitle>
      <div className={styles['model-deployment-info__content']}>
        <div>
          <SubAreaTitle
            title="基本信息"
            image={require('@/assets/img/mirror-basic.png')}
            style={{ marginBottom: '26px' }}
          ></SubAreaTitle>
          <div className={styles['model-deployment-info__basic']}>
            <Row gutter={40} style={{ marginBottom: '20px' }}>
              <Col span={10}>
                <div className={styles['model-deployment-info__basic__item']}>
                  <div className={styles['label']}>服务名称：</div>
                  <div className={styles['value']}>{mirrorInfo.name}</div>
                </div>
              </Col>
              <Col span={10}>
                <div className={styles['model-deployment-info__basic__item']}>
                  <div className={styles['label']}>镜像：</div>
                  <div className={styles['value']}>{mirrorInfo.version_count ?? '--'}</div>
                </div>
              </Col>
            </Row>
            <Row gutter={40} style={{ marginBottom: '20px' }}>
              <Col span={10}>
                <div className={styles['model-deployment-info__basic__item']}>
                  <div className={styles['label']}>状态：</div>
                  <div className={styles['value']}>{mirrorInfo.name}</div>
                </div>
              </Col>
              <Col span={10}>
                <div className={styles['model-deployment-info__basic__item']}>
                  <div className={styles['label']}>模型：</div>
                  <div className={styles['value']}>{mirrorInfo.version_count ?? '--'}</div>
                </div>
              </Col>
            </Row>
            <Row gutter={40} style={{ marginBottom: '20px' }}>
              <Col span={10}>
                <div className={styles['model-deployment-info__basic__item']}>
                  <div className={styles['label']}>环境变量：</div>
                  <div className={styles['value']}>{mirrorInfo.name}</div>
                </div>
              </Col>
            </Row>
            <Row gutter={40}>
              <Col span={24}>
                <div className={styles['model-deployment-info__basic__item']}>
                  <div className={styles['label']}>描述：</div>
                  <div className={styles['value']}>{mirrorInfo.description}</div>
                </div>
              </Col>
            </Row>
          </div>
          <div>
            <Tabs activeKey={activeTab} items={tabItems} onChange={hanleTabChange} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default ModelDeploymentInfo;