feat: 开发环境添加代码配置

react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx

@@ -3,6 +3,7 @@
  * @Date: 2024-04-16 13:58:08
  * @Description: 创建开发环境
  */
+import CodeSelect from '@/components/CodeSelect';
 import KFIcon from '@/components/KFIcon';
 import KFRadio, { type KFRadioItem } from '@/components/KFRadio';
 import PageTitle from '@/components/PageTitle';
@@ -187,6 +188,14 @@ function EditorCreate() {
               </Col>
             </Row>
 
+            <Row gutter={8}>
+              <Col span={10}>
+                <Form.Item label="代码配置" name="code_config">
+                  <CodeSelect placeholder="请选择代码配置" canInput={false} size="large" />
+                </Form.Item>
+              </Col>
+            </Row>
+
             <Form.Item wrapperCol={{ offset: 0, span: 16 }}>
               <Button type="primary" htmlType="submit">
                 确定

react-ui/src/pages/DevelopmentEnvironment/List/index.tsx

@@ -17,6 +17,12 @@ import {
 } from '@/services/developmentEnvironment';
 import themes from '@/styles/theme.less';
 import { parseJsonText } from '@/utils';
+import {
+  formatCodeConfig,
+  formatDataset,
+  formatModel,
+  type SelectedCodeConfig,
+} from '@/utils/format';
 import { openAntdModal } from '@/utils/modal';
 import { to } from '@/utils/promise';
 import SessionStorage from '@/utils/sessionStorage';
@@ -49,6 +55,7 @@ export type EditorData = {
   dataset?: string | DatasetData;
   model?: string | ModelData;
   image?: string;
+  code_config?: string | SelectedCodeConfig;
 };
 
 function EditorList() {
@@ -78,6 +85,8 @@ function EditorList() {
         item.dataset = typeof item.dataset === 'string' ? parseJsonText(item.dataset) : null;
         item.model = typeof item.model === 'string' ? parseJsonText(item.model) : null;
         item.image = typeof item.image === 'string' ? parseJsonText(item.image) : null;
+        item.code_config =
+          typeof item.code_config === 'string' ? parseJsonText(item.code_config) : null;
       });
       setTableData(content);
       setTotal(totalElements);
@@ -159,13 +168,54 @@ function EditorList() {
   };
 
   // 跳转编辑器页面
-  const gotoEditorPage = (e: React.MouseEvent, record: EditorData) => {
+  const gotoEditorPage = (record: EditorData, e: React.MouseEvent) => {
     e.stopPropagation();
-    SessionStorage.setItem(SessionStorage.editorUrlKey, record.url);
-    navigate(`/developmentEnvironment/editor`);
+
     setCacheState({
       pagination,
     });
+
+    SessionStorage.setItem(SessionStorage.editorUrlKey, record.url);
+    navigate(`/developmentEnvironment/editor`);
+  };
+
+  // 去数据集
+  const gotoDataset = (record: EditorData, e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    const dataset = record.dataset as DatasetData;
+    const link = formatDataset(dataset)?.link;
+    if (link) {
+      setCacheState({
+        pagination,
+      });
+      navigate(link);
+    }
+  };
+
+  // 去模型
+  const gotoModel = (record: EditorData, e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    const model = record.model as ModelData;
+    const link = formatModel(model)?.link;
+    if (link) {
+      setCacheState({
+        pagination,
+      });
+      navigate(link);
+    }
+  };
+
+  // 打开代码配置仓库
+  const gotoCodeConfig = (record: EditorData, e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    const codeConfig = record.code_config as SelectedCodeConfig;
+    const url = formatCodeConfig(codeConfig)?.url;
+    if (url) {
+      window.open(url, '_blank');
+    }
   };
 
   // 分页切换
@@ -185,11 +235,11 @@ function EditorList() {
       title: '编辑器名称',
       dataIndex: 'name',
       key: 'name',
-      width: '16%',
+      width: '12%',
       render: (text, record, index) =>
         record.url && record.status === DevEditorStatus.Running
           ? tableCellRender<EditorData>(true, TableCellValueType.Link, {
-              onClick: (record, e) => gotoEditorPage(e, record),
+              onClick: gotoEditorPage,
             })(text, record, index)
           : tableCellRender<EditorData>(true, TableCellValueType.Text)(text, record, index),
     },
@@ -197,14 +247,14 @@ function EditorList() {
       title: '计算资源',
       dataIndex: 'computing_resource',
       key: 'computing_resource',
-      width: '12%',
+      width: '11%',
       render: tableCellRender(),
     },
     {
       title: '资源规格',
       dataIndex: 'computing_resource_id',
       key: 'computing_resource_id',
-      width: '12%',
+      width: '11%',
       render: tableCellRender(true, TableCellValueType.Custom, {
         format: getResourceDescription,
       }),
@@ -213,42 +263,55 @@ function EditorList() {
       title: '数据集',
       dataIndex: ['dataset', 'showValue'],
       key: 'dataset',
-      width: '12%',
-      render: tableCellRender(true),
+      width: '11%',
+      render: tableCellRender(true, TableCellValueType.Link, {
+        onClick: gotoDataset,
+      }),
     },
     {
       title: '模型',
       dataIndex: ['model', 'showValue'],
       key: 'model',
-      width: '12%',
-      render: tableCellRender(true),
+      width: '11%',
+      render: tableCellRender(true, TableCellValueType.Link, {
+        onClick: gotoModel,
+      }),
+    },
+    {
+      title: '代码配置',
+      dataIndex: ['code_config', 'showValue'],
+      key: 'code_config',
+      width: '11%',
+      render: tableCellRender(true, TableCellValueType.Link, {
+        onClick: gotoCodeConfig,
+      }),
     },
     {
       title: '镜像',
       dataIndex: ['image', 'showValue'],
       key: 'image',
-      width: '12%',
+      width: '11%',
       render: tableCellRender(true),
     },
     {
       title: '创建者',
       dataIndex: 'update_by',
       key: 'update_by',
-      width: '12%',
+      width: '11%',
       render: tableCellRender(true),
     },
     {
       title: '创建时间',
       dataIndex: 'create_time',
       key: 'create_time',
-      width: '12%',
+      width: '11%',
       render: tableCellRender(true, TableCellValueType.Date),
     },
     {
       title: '状态',
       dataIndex: 'status',
       key: 'status',
-      width: 80,
+      width: 100,
       render: EditorStatusCell,
     },
     {

react-ui/src/utils/format.ts

@@ -12,7 +12,7 @@ import { getGitUrl } from '@/utils';
 // 格式化日期
 export { formatDate } from '@/utils/date';
 
-type SelectedCodeConfig = {
+export type SelectedCodeConfig = {
   code_path: string;
   branch: string;
   showValue?: string; // 前端使用的
@@ -194,7 +194,6 @@ export const formatEnum = (options: EnumOptions[]): FormatEnumFunc => {
   };
 };
 
-
 /**
  * 格式化数字
  *
@@ -202,10 +201,10 @@ export const formatEnum = (options: EnumOptions[]): FormatEnumFunc => {
  * @param toFixed - 保留几位小数
  * @return 格式化的数字，如果不是数字，返回 '--'
  */
-export const formatNumber = (value?: number | null, toFixed?: number) : number | string => {
-  if (typeof value !== "number") {
-    return '--'
+export const formatNumber = (value?: number | null, toFixed?: number): number | string => {
+  if (typeof value !== 'number') {
+    return '--';
   }
 
-  return toFixed ? Number(value).toFixed(toFixed) : value
-}
+  return toFixed ? Number(value).toFixed(toFixed) : value;
+};

react-ui/src/utils/table.tsx

@@ -155,7 +155,7 @@ function renderCell<T>(
   record: T,
   options?: TableCellValueOptions<T>,
 ) {
-  return type === TableCellValueType.Link
+  return type === TableCellValueType.Link && text
     ? renderLink(text, ellipsis, record, options)
     : renderText(text, ellipsis, options);
 }