ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2024-12-30 14:08:21 +08:00
parent 298866cf00
commit 5e85c51bc4
2 changed files with 334 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/src/pages/Deploy/External/index.tsx vendored
View File

@ -1,10 +1,10 @@
import React, { useState } from 'react'; import React, {useState} from 'react';
import { Card, Table, Button, Space, Modal, Form, Input, message, Select, InputNumber, Switch, Tag, Tooltip } from 'antd'; import {Card, Table, Button, Space, Modal, Form, Input, message, Select, InputNumber, Switch, Tag, Tooltip} from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SyncOutlined, CheckCircleOutlined, CloseCircleOutlined, LinkOutlined, MinusCircleOutlined } from '@ant-design/icons'; import {PlusOutlined, EditOutlined, DeleteOutlined, SyncOutlined, CheckCircleOutlined, CloseCircleOutlined, LinkOutlined, MinusCircleOutlined} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table'; import type {ColumnsType} from 'antd/es/table';
import { useTableData } from '@/hooks/useTableData'; import {useTableData} from '@/hooks/useTableData';
import * as service from './service'; import * as service from './service';
import { SystemType, AuthType, SyncStatus, ExternalSystemResponse, ExternalSystemRequest, ExternalSystemQuery } from './types'; import {SystemType, AuthType, SyncStatus, ExternalSystemResponse, ExternalSystemRequest, ExternalSystemQuery} from './types';
const ExternalPage: React.FC = () => { const ExternalPage: React.FC = () => {
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -144,27 +144,6 @@ const ExternalPage: React.FC = () => {
return authTypeMap[authType]; return authTypeMap[authType];
} }
}, },
{
title: '同步状态',
dataIndex: 'syncStatus',
width: 120,
render: (status: SyncStatus, record) => {
const statusConfig = {
[SyncStatus.SUCCESS]: { icon: <CheckCircleOutlined />, color: 'success', text: '成功' },
[SyncStatus.FAILED]: { icon: <CloseCircleOutlined />, color: 'error', text: '失败' },
[SyncStatus.RUNNING]: { icon: <SyncOutlined spin />, color: 'processing', text: '同步中' },
NONE: { icon: <MinusCircleOutlined />, color: 'default', text: '未同步' }
};
const config = statusConfig[status] || statusConfig.NONE;
return (
<Tooltip title={record.lastSyncTime || '未同步'}>
<Tag icon={config.icon} color={config.color}>
{config.text}
</Tag>
</Tooltip>
);
}
},
{ {
title: '最后连接时间', title: '最后连接时间',
dataIndex: 'lastConnectTime', dataIndex: 'lastConnectTime',
@ -192,14 +171,14 @@ const ExternalPage: React.FC = () => {
<Space> <Space>
<Button <Button
type="link" type="link"
icon={<EditOutlined />} icon={<EditOutlined/>}
onClick={() => handleEdit(record)} onClick={() => handleEdit(record)}
> >
编辑 编辑
</Button> </Button>
<Button <Button
type="link" type="link"
icon={<LinkOutlined />} icon={<LinkOutlined/>}
onClick={() => handleTestConnection(record.id)} onClick={() => handleTestConnection(record.id)}
> >
测试连接 测试连接
@ -207,7 +186,7 @@ const ExternalPage: React.FC = () => {
<Button <Button
type="link" type="link"
danger danger
icon={<DeleteOutlined />} icon={<DeleteOutlined/>}
onClick={() => handleDelete(record.id)} onClick={() => handleDelete(record.id)}
> >
删除 删除
@ -220,10 +199,10 @@ const ExternalPage: React.FC = () => {
return ( return (
<div> <div>
<Card> <Card>
<div style={{ marginBottom: 16 }}> <div style={{marginBottom: 16}}>
<Button <Button
type="primary" type="primary"
icon={<PlusOutlined />} icon={<PlusOutlined/>}
onClick={handleAdd} onClick={handleAdd}
> >
新增系统 新增系统
@ -253,15 +232,15 @@ const ExternalPage: React.FC = () => {
<Form.Item <Form.Item
name="name" name="name"
label="系统名称" label="系统名称"
rules={[{ required: true, message: '请输入系统名称' }]} rules={[{required: true, message: '请输入系统名称'}]}
> >
<Input placeholder="请输入系统名称" /> <Input placeholder="请输入系统名称"/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="type" name="type"
label="系统类型" label="系统类型"
rules={[{ required: true, message: '请选择系统类型' }]} rules={[{required: true, message: '请选择系统类型'}]}
> >
<Select> <Select>
<Select.Option value={SystemType.JENKINS}>Jenkins</Select.Option> <Select.Option value={SystemType.JENKINS}>Jenkins</Select.Option>
@ -274,17 +253,17 @@ const ExternalPage: React.FC = () => {
name="url" name="url"
label="系统地址" label="系统地址"
rules={[ rules={[
{ required: true, message: '请输入系统地址' }, {required: true, message: '请输入系统地址'},
{ type: 'url', message: '请输入有效的URL' } {type: 'url', message: '请输入有效的URL'}
]} ]}
> >
<Input placeholder="请输入系统地址" /> <Input placeholder="请输入系统地址"/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="authType" name="authType"
label="认证方式" label="认证方式"
rules={[{ required: true, message: '请选择认证方式' }]} rules={[{required: true, message: '请选择认证方式'}]}
> >
<Select> <Select>
<Select.Option value={AuthType.BASIC}>用户名密码</Select.Option> <Select.Option value={AuthType.BASIC}>用户名密码</Select.Option>
@ -297,7 +276,7 @@ const ExternalPage: React.FC = () => {
noStyle noStyle
shouldUpdate={(prevValues, currentValues) => prevValues.authType !== currentValues.authType} shouldUpdate={(prevValues, currentValues) => prevValues.authType !== currentValues.authType}
> >
{({ getFieldValue }) => { {({getFieldValue}) => {
const authType = getFieldValue('authType'); const authType = getFieldValue('authType');
if (authType === AuthType.BASIC) { if (authType === AuthType.BASIC) {
return ( return (
@ -305,16 +284,16 @@ const ExternalPage: React.FC = () => {
<Form.Item <Form.Item
name="username" name="username"
label="用户名" label="用户名"
rules={[{ required: true, message: '请输入用户名' }]} rules={[{required: true, message: '请输入用户名'}]}
> >
<Input placeholder="请输入用户名" /> <Input placeholder="请输入用户名"/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="password" name="password"
label="密码" label="密码"
rules={[{ required: !editingSystem, message: '请输入密码' }]} rules={[{required: !editingSystem, message: '请输入密码'}]}
> >
<Input.Password placeholder={editingSystem ? '不修改请留空' : '请输入密码'} /> <Input.Password placeholder={editingSystem ? '不修改请留空' : '请输入密码'}/>
</Form.Item> </Form.Item>
</> </>
); );
@ -324,9 +303,9 @@ const ExternalPage: React.FC = () => {
<Form.Item <Form.Item
name="token" name="token"
label="访问令牌" label="访问令牌"
rules={[{ required: !editingSystem, message: '请输入访问令牌' }]} rules={[{required: !editingSystem, message: '请输入访问令牌'}]}
> >
<Input.Password placeholder={editingSystem ? '不修改请留空' : '请输入访问令牌'} /> <Input.Password placeholder={editingSystem ? '不修改请留空' : '请输入访问令牌'}/>
</Form.Item> </Form.Item>
); );
} }
@ -337,16 +316,16 @@ const ExternalPage: React.FC = () => {
<Form.Item <Form.Item
name="sort" name="sort"
label="显示排序" label="显示排序"
rules={[{ required: true, message: '请输入显示排序' }]} rules={[{required: true, message: '请输入显示排序'}]}
> >
<InputNumber style={{ width: '100%' }} min={0} placeholder="请输入显示排序" /> <InputNumber style={{width: '100%'}} min={0} placeholder="请输入显示排序"/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="remark" name="remark"
label="备注" label="备注"
> >
<Input.TextArea rows={4} placeholder="请输入备注" /> <Input.TextArea rows={4} placeholder="请输入备注"/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
@ -354,7 +333,7 @@ const ExternalPage: React.FC = () => {
label="是否禁用" label="是否禁用"
valuePropName="checked" valuePropName="checked"
> >
<Switch checkedChildren="否" unCheckedChildren="是" /> <Switch checkedChildren="否" unCheckedChildren="是"/>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

5
frontend/src/pages/Deploy/External/types.ts vendored
View File

@ -1,5 +1,4 @@
import { BaseResponse } from '@/types/base/response'; import {BaseQuery, BaseResponse} from "@/types/base";
import {BaseQuery} from "@/types/base";
// 系统类型枚举 // 系统类型枚举
export enum SystemType { export enum SystemType {
@ -41,8 +40,6 @@ export interface ExternalSystemResponse extends BaseResponse {
username?: string; username?: string;
password?: string; password?: string;
token?: string; token?: string;
syncStatus: SyncStatus;
lastSyncTime?: string;
lastConnectTime?: string; lastConnectTime?: string;
config?: string; config?: string;
} }