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:
asp_ly 2024-12-28 21:40:07 +08:00
parent 244989c3ee
commit 7c8b7dfe2f
5 changed files with 296 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,7 @@ const ExternalPage: React.FC = () => {
refresh
} = useTableData<ExternalSystemResponse, ExternalSystemQuery, ExternalSystemRequest, ExternalSystemRequest>({
service: {
list: service.getExternalSystems,
list: service.getExternalSystemsPage,
create: service.createExternalSystem,
update: service.updateExternalSystem,
delete: service.deleteExternalSystem

3
frontend/src/pages/Deploy/External/service.ts vendored
View File

@ -5,6 +5,9 @@ import type { ExternalSystemResponse, ExternalSystemRequest, ExternalSystemQuery
const BASE_URL = '/api/v1/external-system';
// 获取三方系统列表
export const getExternalSystemsPage = (params: ExternalSystemQuery) =>
request.get<Page<ExternalSystemResponse>>(`${BASE_URL}/page`, { params });
export const getExternalSystems = (params: ExternalSystemQuery) =>
request.get<Page<ExternalSystemResponse>>(`${BASE_URL}/page`, { params });

482
frontend/src/pages/Deploy/JenkinsManager/List/index.tsx
View File

@ -1,22 +1,11 @@
import React, { useState, useEffect } from 'react';
import { PageContainer } from '@/components/ui/page-container';
import { Plus, Pencil, Trash2, Loader2 } from 'lucide-react';
import {
Table,
TableHeader,
TableBody,
TableHead,
TableRow,
TableCell,
} from "@/components/ui/table";
import { RefreshCw, ChevronRight } from 'lucide-react';
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
@ -26,71 +15,54 @@ import {
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { useToast } from "@/components/ui/use-toast";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { searchFormSchema, type SearchFormValues } from "./schema";
import { DataTablePagination } from "@/components/ui/pagination";
import type { JenkinsManagerResponse, JenkinsManagerQuery } from './types';
import { getJenkinsManagerPage, deleteJenkinsManager } from './service';
import JenkinsManagerModal from './components/JenkinsManagerModal';
interface Column {
accessorKey?: keyof JenkinsManagerResponse;
id?: string;
header: string;
size: number;
cell?: (props: { row: { original: JenkinsManagerResponse } }) => React.ReactNode;
}
import { Separator } from "@/components/ui/separator";
import type { JenkinsInstance, JenkinsView, SyncType } from './types';
import { getJenkinsInstances, getJenkinsViews, syncJenkinsData } from './service';
import { SyncStatus } from '@/pages/Deploy/External/types';
const JenkinsManagerList: React.FC = () => {
const [modalVisible, setModalVisible] = useState(false);
const [currentRecord, setCurrentRecord] = useState<JenkinsManagerResponse>();
const [list, setList] = useState<JenkinsManagerResponse[]>([]);
const [jenkinsList, setJenkinsList] = useState<JenkinsInstance[]>([]);
const [currentJenkinsId, setCurrentJenkinsId] = useState<string>();
const [currentJenkins, setCurrentJenkins] = useState<JenkinsInstance>();
const [views, setViews] = useState<JenkinsView[]>([]);
const [loading, setLoading] = useState(false);
const [pagination, setPagination] = useState({
pageNum: 1,
pageSize: 10,
totalElements: 0,
const [syncing, setSyncing] = useState<Record<SyncType, boolean>>({
views: false,
jobs: false,
builds: false
});
const { toast } = useToast();
const form = useForm<SearchFormValues>({
resolver: zodResolver(searchFormSchema),
defaultValues: {
name: "",
enabled: undefined,
}
});
const loadData = async (params?: JenkinsManagerQuery) => {
setLoading(true);
// 获取 Jenkins 实例列表
const loadJenkinsList = async () => {
try {
const queryParams: JenkinsManagerQuery = {
...params,
pageNum: pagination.pageNum,
pageSize: pagination.pageSize,
};
const data = await getJenkinsManagerPage(queryParams);
setList(data.content || []);
setPagination({
...pagination,
totalElements: data.totalElements,
});
const data = await getJenkinsInstances();
setJenkinsList(data);
// 如果没有选中的实例，默认选择第一个
if (!currentJenkinsId && data.length > 0) {
setCurrentJenkinsId(String(data[0].id));
setCurrentJenkins(data[0]);
}
} catch (error) {
toast({
variant: "destructive",
title: "获取列表失败",
title: "获取 Jenkins 实例列表失败",
duration: 3000,
});
}
};
// 获取视图列表
const loadViews = async () => {
if (!currentJenkinsId) return;
setLoading(true);
try {
const data = await getJenkinsViews(currentJenkinsId);
setViews(data);
} catch (error) {
toast({
variant: "destructive",
title: "获取视图列表失败",
duration: 3000,
});
} finally {
@ -98,261 +70,199 @@ const JenkinsManagerList: React.FC = () => {
}
};
const handlePageChange = (page: number) => {
setPagination({
...pagination,
pageNum: page,
});
// 切换 Jenkins 实例
const handleJenkinsChange = (id: string) => {
setCurrentJenkinsId(id);
const jenkins = jenkinsList.find(j => String(j.id) === id);
setCurrentJenkins(jenkins);
setViews([]);
};
useEffect(() => {
loadData(form.getValues());
}, [pagination.pageNum, pagination.pageSize]);
const handleDelete = async (id: number) => {
// 同步数据
const handleSync = async (type: SyncType) => {
if (!currentJenkinsId) return;
setSyncing(prev => ({ ...prev, [type]: true }));
try {
await deleteJenkinsManager(id);
await syncJenkinsData(currentJenkinsId, type);
await loadJenkinsList();
if (type === 'views') {
await loadViews();
}
toast({
title: "删除成功",
title: "同步成功",
duration: 3000,
});
loadData(form.getValues());
} catch (error) {
toast({
variant: "destructive",
title: "删除失败",
title: "同步失败",
duration: 3000,
});
} finally {
setSyncing(prev => ({ ...prev, [type]: false }));
}
};
const handleAdd = () => {
setCurrentRecord(undefined);
setModalVisible(true);
useEffect(() => {
loadJenkinsList();
}, []);
useEffect(() => {
if (currentJenkinsId) {
loadViews();
}
}, [currentJenkinsId]);
const formatTime = (time: string | null) => {
if (!time) return 'Never';
return time;
};
const handleEdit = (record: JenkinsManagerResponse) => {
setCurrentRecord(record);
setModalVisible(true);
// 模拟统计数据
const mockStats = {
views: 5,
jobs: 20,
builds: 100
};
const handleModalClose = () => {
setModalVisible(false);
setCurrentRecord(undefined);
};
const handleSuccess = () => {
setModalVisible(false);
setCurrentRecord(undefined);
loadData(form.getValues());
};
const handleReset = () => {
form.reset({
name: "",
enabled: undefined,
});
loadData();
};
const columns: Column[] = [
{
accessorKey: 'name',
header: '名称',
size: 180,
},
{
accessorKey: 'description',
header: '描述',
size: 200,
},
{
accessorKey: 'enabled',
header: '状态',
size: 100,
cell: ({row}) => (
<Badge variant={row.original.enabled ? "outline" : "secondary"}>
{row.original.enabled ? '启用' : '禁用'}
</Badge>
),
},
{
accessorKey: 'sort',
header: '排序',
size: 80,
},
{
accessorKey: 'createTime',
header: '创建时间',
size: 180,
},
{
id: 'actions',
header: '操作',
size: 180,
cell: ({row}) => (
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="sm"
onClick={() => handleEdit(row.original)}
>
<Pencil className="mr-2 h-4 w-4" />
编辑
</Button>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button
variant="ghost"
size="sm"
className="text-destructive"
>
<Trash2 className="mr-2 h-4 w-4" />
删除
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>确定要删除吗？</AlertDialogTitle>
<AlertDialogDescription>
删除后将无法恢复，请谨慎操作
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>取消</AlertDialogCancel>
<AlertDialogAction
onClick={() => handleDelete(row.original.id)}
>
确定
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
),
},
];
return (
<PageContainer>
<div className="flex items-center justify-between">
<h2 className="text-3xl font-bold tracking-tight">Jenkins管理</h2>
<div className="flex items-center gap-4">
<Button onClick={handleAdd}>
<Plus className="mr-2 h-4 w-4" />
新建
</Button>
</div>
</div>
<Card>
<div className="p-6">
<div className="flex items-center gap-4">
<Input
placeholder="名称"
{...form.register('name')}
className="max-w-[200px]"
/>
<div className="flex items-center justify-between mb-6">
<h2 className="text-3xl font-bold tracking-tight">Jenkins Management</h2>
<Select
value={form.getValues('enabled')?.toString()}
onValueChange={(value) => form.setValue('enabled', value === 'true')}
value={currentJenkinsId}
onValueChange={handleJenkinsChange}
>
<SelectTrigger className="max-w-[200px]">
<SelectValue placeholder="状态"/>
<SelectTrigger className="w-[300px]">
<SelectValue placeholder="Select a Jenkins instance"/>
</SelectTrigger>
<SelectContent>
<SelectItem value="true">启用</SelectItem>
<SelectItem value="false">禁用</SelectItem>
{jenkinsList.map(jenkins => (
<SelectItem key={jenkins.id} value={String(jenkins.id)}>
<div className="flex items-center gap-2">
<Badge variant={jenkins.syncStatus === SyncStatus.SUCCESS ? "outline" : "secondary"}>
{jenkins.name}
</Badge>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
<Button variant="outline" onClick={handleReset}>
重置
</Button>
<Button onClick={() => loadData(form.getValues())}>
搜索
</Button>
</div>
</div>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>列表</CardTitle>
</CardHeader>
<CardContent>
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
{columns.map((column) => (
<TableHead
key={column.accessorKey || column.id}
style={{width: column.size}}
>
{column.header}
</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{loading ? (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
<div className="flex justify-center items-center">
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
加载中...
{currentJenkins && (
<Card className="mb-6">
<CardContent className="pt-6">
<div className="space-y-4">
<div>
<h3 className="text-lg font-semibold">{currentJenkins.name}</h3>
<p className="text-sm text-muted-foreground">{currentJenkins.url}</p>
</div>
</TableCell>
</TableRow>
) : list.length === 0 ? (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
<div className="grid grid-cols-3 gap-4">
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Views</span>
<span className="text-2xl font-bold">{mockStats.views}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Last sync: {formatTime(currentJenkins.lastSyncTime)}</span>
<Button
variant="ghost"
size="sm"
onClick={() => handleSync('views')}
disabled={syncing.views}
>
暂无数据
</TableCell>
</TableRow>
) : (
list.map((item) => (
<TableRow key={item.id}>
{columns.map((column) => (
<TableCell
key={column.accessorKey || column.id}
<RefreshCw className={`h-4 w-4 ${syncing.views ? 'animate-spin' : ''}`} />
<span className="ml-2">Sync Views</span>
</Button>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Jobs</span>
<span className="text-2xl font-bold">{mockStats.jobs}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Last sync: {formatTime(currentJenkins.lastSyncTime)}</span>
<Button
variant="ghost"
size="sm"
onClick={() => handleSync('jobs')}
disabled={syncing.jobs}
>
{column.cell
? column.cell({row: {original: item}})
: item[column.accessorKey!]}
</TableCell>
))}
</TableRow>
))
)}
</TableBody>
</Table>
<div className="flex justify-end border-t border-border bg-muted/40">
<DataTablePagination
pageIndex={pagination.pageNum}
pageSize={pagination.pageSize}
pageCount={Math.ceil(pagination.totalElements / pagination.pageSize)}
onPageChange={handlePageChange}
/>
<RefreshCw className={`h-4 w-4 ${syncing.jobs ? 'animate-spin' : ''}`} />
<span className="ml-2">Sync Jobs</span>
</Button>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Builds</span>
<span className="text-2xl font-bold">{mockStats.builds}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Last sync: {formatTime(currentJenkins.lastSyncTime)}</span>
<Button
variant="ghost"
size="sm"
onClick={() => handleSync('builds')}
disabled={syncing.builds}
>
<RefreshCw className={`h-4 w-4 ${syncing.builds ? 'animate-spin' : ''}`} />
<span className="ml-2">Sync Builds</span>
</Button>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
{modalVisible && (
<JenkinsManagerModal
open={modalVisible}
onCancel={handleModalClose}
onSuccess={handleSuccess}
initialValues={currentRecord}
/>
)}
<Card>
<CardContent className="pt-6">
<h3 className="text-lg font-semibold mb-4">Views</h3>
<div className="space-y-4">
{loading ? (
<div className="flex items-center justify-center py-8">
<RefreshCw className="h-6 w-6 animate-spin" />
</div>
) : views.map((view, index) => (
<div key={view.id}>
{index > 0 && <Separator className="my-4" />}
<div className="space-y-4">
<div className="flex items-center justify-between">
<h4 className="text-base font-medium">{view.name}</h4>
<Button variant="ghost" size="sm">
<ChevronRight className="h-4 w-4" />
</Button>
</div>
{view.jobs.length > 0 && (
<div className="space-y-2">
{view.jobs.map(job => (
<div key={job.id} className="flex items-center justify-between text-sm">
<span>{job.name}</span>
{job.lastBuild && (
<div className="flex items-center gap-2">
<Badge variant={job.lastBuild.result === 'SUCCESS' ? 'outline' : 'destructive'}>
#{job.lastBuild.number} - {job.lastBuild.result}
</Badge>
<span className="text-muted-foreground">{job.lastBuild.timestamp}</span>
</div>
)}
</div>
))}
</div>
)}
</div>
</div>
))}
</div>
</CardContent>
</Card>
</PageContainer>
);
};

87
frontend/src/pages/Deploy/JenkinsManager/List/service.ts
View File

@ -1,33 +1,66 @@
import request from '@/utils/request';
import type { Page } from '@/types/base';
import type { JenkinsManagerResponse, JenkinsManagerQuery, JenkinsManagerRequest } from './types';
import type { JenkinsInstance, JenkinsView, SyncType } from './types';
import { getExternalSystems } from '@/pages/Deploy/External/service';
import { SystemType } from '@/pages/Deploy/External/types';
const BASE_URL = '/api/v1/jenkins-manager';
// 创建
export const createJenkinsManager = (data: JenkinsManagerRequest) =>
request.post<void>(BASE_URL, data);
// 获取 Jenkins 实例列表
export const getJenkinsInstances = () =>
getExternalSystems({
type: SystemType.JENKINS,
enabled: true
}).then(response => response.content);
// 更新
export const updateJenkinsManager = (id: number, data: JenkinsManagerRequest) =>
request.put<void>(`${BASE_URL}/${id}`, data);
// 获取 Jenkins 视图列表
export const getJenkinsViews = (jenkinsId: string) =>
// 模拟数据
Promise.resolve<JenkinsView[]>([
{
id: '1',
name: 'All',
url: 'https://jenkins.prod.example.com/view/all',
jobs: []
},
{
id: '2',
name: 'Frontend',
url: 'https://jenkins.prod.example.com/view/frontend',
jobs: [
{
id: '1',
name: 'Build Frontend',
url: 'https://jenkins.prod.example.com/job/build-frontend',
lastBuild: {
id: '42',
number: 42,
result: 'SUCCESS',
timestamp: '2024/12/28 20:28:43',
url: 'https://jenkins.prod.example.com/job/build-frontend/42'
}
},
{
id: '2',
name: 'Test Backend',
url: 'https://jenkins.prod.example.com/job/test-backend',
lastBuild: {
id: '41',
number: 41,
result: 'FAILURE',
timestamp: '2024/12/28 19:28:43',
url: 'https://jenkins.prod.example.com/job/test-backend/41'
}
}
]
},
{
id: '3',
name: 'Backend',
url: 'https://jenkins.prod.example.com/view/backend',
jobs: []
}
]);
// 删除
export const deleteJenkinsManager = (id: number) =>
request.delete<void>(`${BASE_URL}/${id}`);
// 获取详情
export const getJenkinsManager = (id: number) =>
request.get<JenkinsManagerResponse>(`${BASE_URL}/${id}`);
// 分页查询列表
export const getJenkinsManagerPage = (params?: JenkinsManagerQuery) =>
request.get<Page<JenkinsManagerResponse>>(`${BASE_URL}/page`, { params });
// 获取所有列表
export const getJenkinsManagerList = () =>
request.get<JenkinsManagerResponse[]>(BASE_URL);
// 条件查询列表
export const getJenkinsManagerListByCondition = (params?: JenkinsManagerQuery) =>
request.get<JenkinsManagerResponse[]>(`${BASE_URL}/list`, { params });
// 同步 Jenkins 数据
export const syncJenkinsData = (jenkinsId: string, type: SyncType) =>
request.post<void>(`${BASE_URL}/${jenkinsId}/sync/${type}`);

44
frontend/src/pages/Deploy/JenkinsManager/List/types.ts
View File

@ -1,23 +1,33 @@
import type { BaseResponse, BaseQuery } from '@/types/base';
import type { BaseResponse } from '@/types/base';
import type { ExternalSystemResponse } from '@/pages/Deploy/External/types';
export interface JenkinsManagerResponse extends BaseResponse {
// 使用外部系统响应作为 Jenkins 实例
export type JenkinsInstance = ExternalSystemResponse;
// Jenkins 视图类型
export interface JenkinsView {
id: string;
name: string;
description?: string;
enabled: boolean;
sort: number;
// TODO: 添加其他字段
url: string;
jobs: JenkinsJob[];
}
export interface JenkinsManagerQuery extends BaseQuery {
name?: string;
enabled?: boolean;
// TODO: 添加其他查询字段
}
export interface JenkinsManagerRequest {
// Jenkins Job 类型
export interface JenkinsJob {
id: string;
name: string;
description?: string;
enabled: boolean;
sort: number;
// TODO: 添加其他请求字段
url: string;
lastBuild?: JenkinsBuild;
}
// Jenkins 构建类型
export interface JenkinsBuild {
id: string;
number: number;
result: 'SUCCESS' | 'FAILURE' | 'RUNNING' | 'ABORTED';
timestamp: string;
url: string;
}
// 同步类型
export type SyncType = 'views' | 'jobs' | 'builds';