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

import LabelValue from '@/components/LabelValue';
import { useComputingResource } from '@/hooks/resource';
import { ModelDeploymentData } from '@/pages/ModelDeployment/types';
import { formatDate } from '@/utils/date';
import { Col, Row } from 'antd';
import ModelDeploymentStatusCell from '../ModelDeployStatusCell';

type BasicInfoProps = {
  info?: ModelDeploymentData;
};

function BasicInfo({ info }: BasicInfoProps) {
  const getResourceDescription = useComputingResource()[2];

  // 格式化环境变量
  const formatEnvText = () => {
    if (!info?.env) {
      return '--';
    }
    const env = info.env;
    return Object.entries(env)
      .map(([key, value]) => `${key}: ${value}`)
      .join('\n');
  };

  return (
    <div>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="服务名称：" value={info?.service_name}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="镜　　像：" value={info?.image}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue
            label="状　　态："
            value={ModelDeploymentStatusCell(info?.status)}
          ></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="模　　型：" value={info?.model?.show_value}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="创建人：" value={info?.created_by}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="挂载路径：" value={info?.model_path}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="API URL：" value={info?.url}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="副本数量：" value={info?.replicas}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="创建时间：" value={formatDate(info?.create_time)}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue label="更新时间：" value={formatDate(info?.update_time)}></LabelValue>
        </Col>
      </Row>
      <Row gutter={40} style={{ marginBottom: '20px' }}>
        <Col span={10}>
          <LabelValue label="环境变量：" value={formatEnvText()}></LabelValue>
        </Col>
        <Col span={10}>
          <LabelValue
            label="资源规格："
            value={info?.resource ? getResourceDescription(info.resource) : '--'}
          ></LabelValue>
        </Col>
      </Row>
      <Row gutter={40}>
        <Col span={18}>
          <LabelValue label="描　　述：" value={info?.description}></LabelValue>
        </Col>
      </Row>
    </div>
  );
}

export default BasicInfo;