Browse Source

feat: 修改代码配置

pull/273/head
zhaowei 6 months ago
parent
commit
de3d98b1e1
5 changed files with 43 additions and 128 deletions
  1. +14
    -6
      react-ui/mock/components.ts
  2. +9
    -51
      react-ui/src/components/CodeSelect/index.tsx
  3. +4
    -8
      react-ui/src/pages/DevelopmentEnvironment/List/index.tsx
  4. +7
    -48
      react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx
  5. +9
    -15
      react-ui/src/utils/format.ts

+ 14
- 6
react-ui/mock/components.ts View File

@@ -133,12 +133,20 @@ export default defineMock({
condition: '',
value: {
id: 21,
name: '原子掺杂识别',
code_path: 'http://172.20.32.235:30202/fanshuai/material-atom-predict.git',
branch: 'optimize',
username: null,
password: null,
ssh_private_key: null,
code_repo_name: '原子掺杂识别',
code_repo_vis: 1,
is_public: true,
git_url: 'https://gitlink.org.cn/somunslotus/material-atom-predict.git',
git_branch: 'master',
verify_mode: null,
git_user_name: null,
git_password: null,
ssh_key: null,
create_by: 'admin',
create_time: '2025-03-12T16:46:08.000+08:00',
update_by: 'admin',
update_time: '2025-03-14T14:59:19.000+08:00',
state: 1,
},
rulers: {},
showValue: '原子掺杂识别',


+ 9
- 51
react-ui/src/components/CodeSelect/index.tsx View File

@@ -4,7 +4,7 @@
* @Description: 流水线选择代码配置表单
*/

import CodeSelectorModal from '@/components/CodeSelectorModal';
import CodeSelectorModal, { CodeConfigData } from '@/components/CodeSelectorModal';
import KFIcon from '@/components/KFIcon';
import { openAntdModal } from '@/utils/modal';
import { Button } from 'antd';
@@ -18,19 +18,9 @@ export {
type ParameterInputValue,
} from '../ParameterInput';

export type CodeSelectProps = ParameterInputProps;

// 服务的需要的代码配置数据格式
export type ServerCodeData = {
id: number;
name: string;
code_path: string;
branch: string;
username: string;
password: string;
ssh_private_key: string;
is_public: boolean;
};
export interface CodeSelectProps extends ParameterInputProps {
value?: CodeConfigData;
}

/** 代码配置选择表单组件 */
function CodeSelect({
@@ -44,50 +34,18 @@ function CodeSelect({
}: CodeSelectProps) {
// 选择代码配置
const selectResource = () => {
const codeData = value as ServerCodeData;
const defaultSelected =
value && typeof value === 'object'
? {
id: codeData.id,
code_repo_name: codeData.name,
git_url: codeData.code_path,
git_branch: codeData.branch,
git_user_name: codeData.username,
git_password: codeData.password,
ssh_key: codeData.ssh_private_key,
is_public: codeData.is_public,
}
: undefined;
const defaultSelected: CodeConfigData | undefined =
value && typeof value === 'object' ? value : undefined;
const { close } = openAntdModal(CodeSelectorModal, {
defaultSelected: defaultSelected,
onOk: (res) => {
if (res) {
const {
id,
code_repo_name,
git_url,
git_branch,
git_user_name,
git_password,
ssh_key,
is_public,
} = res;
const jsonObj = {
id,
name: code_repo_name,
code_path: git_url,
branch: git_branch,
username: git_user_name,
password: git_password,
ssh_private_key: ssh_key,
is_public,
};
const jsonObjStr = JSON.stringify(jsonObj);
const { code_repo_name } = res;
onChange?.({
value: jsonObjStr,
...res,
value: code_repo_name,
showValue: code_repo_name,
fromSelect: true,
...jsonObj,
});
} else {
onChange?.(undefined);


+ 4
- 8
react-ui/src/pages/DevelopmentEnvironment/List/index.tsx View File

@@ -4,6 +4,7 @@
* @Description: 开发环境列表
*/

import { CodeConfigData } from '@/components/CodeSelectorModal';
import KFIcon from '@/components/KFIcon';
import { DevEditorStatus } from '@/enums';
import { useCacheState } from '@/hooks/useCacheState';
@@ -17,12 +18,7 @@ import {
} from '@/services/developmentEnvironment';
import themes from '@/styles/theme.less';
import { parseJsonText } from '@/utils';
import {
formatCodeConfig,
formatDataset,
formatModel,
type SelectedCodeConfig,
} from '@/utils/format';
import { formatCodeConfig, formatDataset, formatModel } from '@/utils/format';
import { openAntdModal } from '@/utils/modal';
import { to } from '@/utils/promise';
import SessionStorage from '@/utils/sessionStorage';
@@ -55,7 +51,7 @@ export type EditorData = {
dataset?: string | DatasetData;
model?: string | ModelData;
image?: string;
code_config?: string | SelectedCodeConfig;
code_config?: string | CodeConfigData;
};

function EditorList() {
@@ -211,7 +207,7 @@ function EditorList() {
const gotoCodeConfig = (record: EditorData, e: React.MouseEvent) => {
e.stopPropagation();

const codeConfig = record.code_config as SelectedCodeConfig;
const codeConfig = record.code_config as CodeConfigData;
const url = formatCodeConfig(codeConfig)?.url;
if (url) {
window.open(url, '_blank');


+ 7
- 48
react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx View File

@@ -1,5 +1,4 @@
import { type ServerCodeData } from '@/components/CodeSelect';
import CodeSelectorModal from '@/components/CodeSelectorModal';
import CodeSelectorModal, { CodeConfigData } from '@/components/CodeSelectorModal';
import KFIcon from '@/components/KFIcon';
import ParameterInput, { requiredValidator } from '@/components/ParameterInput';
import ParameterSelect, { type ParameterSelectDataType } from '@/components/ParameterSelect';
@@ -16,7 +15,6 @@ import {
PipelineNodeModelParameter,
PipelineNodeModelSerialize,
} from '@/types';
import { parseJsonText } from '@/utils';
import { openAntdModal } from '@/utils/modal';
import { to } from '@/utils/promise';
import { removeFormListItem } from '@/utils/ui';
@@ -157,47 +155,15 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete
formItemName: NamePath,
item: PipelineNodeModelParameter | Pick<PipelineNodeModelParameter, 'item_type'>,
) => {
const jsonValue = form.getFieldValue(formItemName)?.value;
const fieldValue = parseJsonText(jsonValue) as ServerCodeData;
const defaultSelected = fieldValue
? {
id: fieldValue.id,
code_repo_name: fieldValue.name,
git_url: fieldValue.code_path,
git_branch: fieldValue.branch,
git_user_name: fieldValue.username,
git_password: fieldValue.password,
ssh_key: fieldValue.ssh_private_key,
is_public: fieldValue.is_public,
}
: undefined;
const defaultSelected = form.getFieldValue(formItemName)?.value as CodeConfigData;
const { close } = openAntdModal(CodeSelectorModal, {
defaultSelected,
onOk: (res) => {
if (res) {
const {
id,
code_repo_name,
git_url,
git_branch,
git_user_name,
git_password,
ssh_key,
is_public,
} = res;
const value = JSON.stringify({
id,
name: code_repo_name,
code_path: git_url,
branch: git_branch,
username: git_user_name,
password: git_password,
ssh_private_key: ssh_key,
is_public,
});
const { code_repo_name } = res;
form.setFieldValue(formItemName, {
...item,
value,
value: res,
showValue: code_repo_name,
fromSelect: true,
});
@@ -249,19 +215,12 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete
checkedKeys: [`${image_id}-${id}`],
});
} else {
const { activeTab, id, name, version, path, identifier, owner } = res;
const value = {
id,
name,
version,
path,
identifier,
owner,
};
const { activeTab, ...rest } = res;
const { id, name, version } = rest;
const showValue = `${name}:${version}`;
form.setFieldValue(formItemName, {
...item,
value,
value: rest,
showValue,
fromSelect: true,
activeTab,


+ 9
- 15
react-ui/src/utils/format.ts View File

@@ -1,4 +1,5 @@
import { BasicInfoLink } from '@/components/BasicInfo/types';
import { CodeConfigData } from '@/components/CodeSelectorModal';
import { ResourceSelectorResponse } from '@/components/ResourceSelectorModal';
import { ResourceInfoTabKeys } from '@/pages/Dataset/components/ResourceInfo';
import {
@@ -12,13 +13,6 @@ import { getGitUrl } from '@/utils';
// 格式化日期
export { formatDate } from '@/utils/date';

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

/**
* 格式化数据集数组
*
@@ -77,7 +71,7 @@ export const formatMirror = (mirror: ResourceSelectorResponse): string | undefin
if (!mirror) {
return undefined;
}
return mirror.path;
return mirror.url;
};

/**
@@ -87,20 +81,20 @@ export const formatMirror = (mirror: ResourceSelectorResponse): string | undefin
* @return 基本信息链接对象
*/
export const formatCodeConfig = (
project?: ProjectDependency | SelectedCodeConfig,
project?: ProjectDependency | CodeConfigData,
): BasicInfoLink | undefined => {
if (!project) {
return undefined;
}
// 创建表单,CodeSelect 组件返回,目前有流水线、模型部署、超参数自动寻优创建时选择了代码配置
if ('code_path' in project) {
const { showValue, show_value, code_path, branch } = project;
// 创建表单,CodeSelect 组件返回,目前有流水线、超参数自动寻优、主动学习、开发环境创建时选择了代码配置
if ('code_repo_name' in project) {
const { code_repo_name, git_url, git_branch } = project;
return {
value: showValue || show_value,
url: getGitUrl(code_path, branch),
value: code_repo_name,
url: getGitUrl(git_url, git_branch),
};
} else {
// 数据集和模型的代码配置
// 数据集和模型详情的代码配置
const { url, branch, name } = project;
return {
value: name,


Loading…
Cancel
Save