ci4sManagement-cloud/react-ui/src/utils/format.ts

import { BasicInfoLink } from '@/components/BasicInfo/types';
import { ResourceSelectorResponse } from '@/components/ResourceSelectorModal';
import { ResourceInfoTabKeys } from '@/pages/Dataset/components/ResourceInfo';
import {
  DataSource,
  DatasetData,
  ModelData,
  ProjectDependency,
  TrainTask,
} from '@/pages/Dataset/config';
import { getGitUrl } from '@/utils';
// 格式化日期
export { formatDate } from '@/utils/date';

type SelectedCodeConfig = {
  code_path: string;
  branch: string;
  showValue?: string; // 前端使用的
  show_value?: string; // 后端使用的
};

/**
 * 格式化数据集数组
 *
 * @param datasets - 数据集数组
 * @return 基本信息链接对象数组
 */
export const formatDatasets = (datasets?: DatasetData[]): BasicInfoLink[] | undefined => {
  if (!datasets || datasets.length === 0) {
    return undefined;
  }
  return datasets.map((item) => ({
    value: item.name,
    link: `/dataset/dataset/info/${item.id}?tab=${ResourceInfoTabKeys.Introduction}&version=${item.version}&name=${item.name}&owner=${item.owner}&identifier=${item.identifier}`,
  }));
};

/**
 * 格式化数据集
 *
 * @param dataset - 数据集
 * @return 基本信息链接对象
 */
export const formatDataset = (dataset?: DatasetData): BasicInfoLink | undefined => {
  if (!dataset) {
    return undefined;
  }
  return {
    value: dataset.name,
    link: `/dataset/dataset/info/${dataset.id}?tab=${ResourceInfoTabKeys.Introduction}&version=${dataset.version}&name=${dataset.name}&owner=${dataset.owner}&identifier=${dataset.identifier}`,
  };
};

/**
 * 格式化模型
 *
 * @param model - 模型
 * @return 基本信息链接对象
 */
export const formatModel = (model: ModelData): BasicInfoLink | undefined => {
  if (!model) {
    return undefined;
  }
  return {
    value: model.name,
    link: `/dataset/model/info/${model.id}?tab=${ResourceInfoTabKeys.Introduction}&version=${model.version}&name=${model.name}&owner=${model.owner}&identifier=${model.identifier}`,
  };
};

/**
 * 格式化镜像
 *
 * @param mirror - 选择的镜像
 * @return 镜像地址
 */
export const formatMirror = (mirror: ResourceSelectorResponse): string | undefined => {
  if (!mirror) {
    return undefined;
  }
  return mirror.path;
};

/**
 * 格式化代码配置
 *
 * @param project - 代码配置或者选择的代码配置
 * @return 基本信息链接对象
 */
export const formatCodeConfig = (
  project?: ProjectDependency | SelectedCodeConfig,
): BasicInfoLink | undefined => {
  if (!project) {
    return undefined;
  }
  // 创建表单，CodeSelect 组件返回，目前有流水线、模型部署、超参数自动寻优创建时选择了代码配置
  if ('code_path' in project) {
    const { showValue, show_value, code_path, branch } = project;
    return {
      value: showValue || show_value,
      url: getGitUrl(code_path, branch),
    };
  } else {
    // 数据集和模型的代码配置
    const { url, branch, name } = project;
    return {
      value: name,
      url: getGitUrl(url, branch),
    };
  }
};

/**
 * 格式化训练任务（实验实例）
 *
 * @param task - 训练任务
 * @return 基本信息链接对象
 */
export const formatTrainTask = (task?: TrainTask) => {
  if (!task) {
    return undefined;
  }
  return {
    value: task.name,
    url: `/pipeline/experiment/instance/${task.workflow_id}/${task.ins_id}`,
  };
};

/**
 * 格式化数据来源
 *
 * @param source - 数据来源枚举值
 * @return 数据来源中文名称
 */
export const formatSource = (source?: string): string | undefined => {
  if (source === DataSource.Create) {
    return '用户上传';
  } else if (source === DataSource.HandExport) {
    return '手动导入';
  } else if (source === DataSource.AutoExport) {
    return '实验自动导入';
  } else if (source === DataSource.LabelStudioExport) {
    return '数据标注导入';
  }
  return source;
};

/**
 * 格式化字符串数组，以逗号分隔
 *
 * @param value - 字符串数组
 * @return 字符串，以逗号分隔
 */
export const formatList = (value: string[] | null | undefined): string => {
  if (
    value === undefined ||
    value === null ||
    Array.isArray(value) === false ||
    value.length === 0
  ) {
    return '--';
  }
  return value.join(',');
};

/**
 * 格式化布尔值
 *
 * @param value - 布尔值
 * @return true 为 "是"，false 为 "否"
 */
export const formatBoolean = (value: boolean): string => {
  return value ? '是' : '否';
};

type FormatEnumFunc = (value: string | number) => React.ReactNode;

/**
 * 格式化枚举
 *
 * @param options - 枚举选项数组
 * @return 一个函数，参数是枚举值，从选项数组中找到对应的项，然后返回该项的 label
 */
export const formatEnum = (
  options: { value?: string | number | null; label?: React.ReactNode }[],
): FormatEnumFunc => {
  return (value: string | number) => {
    const option = options.find((item) => item.value === value);
    return option && option.label ? option.label : '--';
  };
};