111 lines
3.7 KiB
JavaScript
111 lines
3.7 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Banner, FlexAJ } from '../../Component/layout';
|
||
import DeleteBox from '../../Component/DeleteModal/Index';
|
||
import './Index.scss';
|
||
import { Button, List, Pagination } from 'antd';
|
||
import { Link } from 'react-router-dom';
|
||
import axios from 'axios';
|
||
|
||
const limit = 15;
|
||
function Index(props) {
|
||
const [data, setData] = useState(undefined);
|
||
const [page, setPage] = useState(1);
|
||
const [total, setTotal] = useState(1);
|
||
const [deleteId, setDeleteId] = useState(undefined);
|
||
const [visible, setVisible] = useState(false);
|
||
const [url, setUrl] = useState(undefined);
|
||
|
||
const { owner, projectsId } = props.match.params;
|
||
|
||
useEffect(() => {
|
||
if (owner && projectsId) {
|
||
getData();
|
||
}
|
||
}, [owner, projectsId, page])
|
||
|
||
function getData() {
|
||
const url = `/${owner}/${projectsId}/webhooks.json`;
|
||
axios.get(url, {
|
||
params: { page, limit }
|
||
}).then(result => {
|
||
if (result && result.data) {
|
||
setData(result.data.webhooks);
|
||
setTotal(result.data.total_count);
|
||
}
|
||
}).catch(error => { })
|
||
}
|
||
|
||
function deleteFunc(id, url) {
|
||
setDeleteId(id);
|
||
setUrl(url);
|
||
setVisible(true);
|
||
}
|
||
|
||
function onSuccess() {
|
||
if (deleteId) {
|
||
const url = `/${owner}/${projectsId}/webhooks/${deleteId}.json`;
|
||
axios.delete(url).then(result => {
|
||
if (result) {
|
||
props.showNotification("webhook删除成功！");
|
||
if (page > 1 && data.length === 1) {
|
||
setPage(page - 1);
|
||
} else {
|
||
getData();
|
||
}
|
||
setVisible(false);
|
||
}
|
||
}).catch(error => { })
|
||
}
|
||
}
|
||
|
||
function addFunc() {
|
||
if (total >= 50) {
|
||
return props.showNotification("webhooks数量已到上限！请删除暂不使用的webhooks以进行添加操作");
|
||
}
|
||
props.history.push(`/projects/${owner}/${projectsId}/setting/webhooks/new`)
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<DeleteBox
|
||
visible={visible}
|
||
onCancel={() => setVisible(false)}
|
||
onSuccess={onSuccess}
|
||
title="删除Webhook"
|
||
content="您确定要删除此Webhook吗？"
|
||
subTitle={`删除后未来事件将不会推送至此Webhook地址：${url}`}
|
||
/>
|
||
<Banner>
|
||
<span>Webhooks(网络钩子)</span>
|
||
<Button type="primary" size="large" onClick={addFunc}>添加Webhook</Button>
|
||
</Banner>
|
||
<div className="hookpanel">
|
||
<p className="color-grey-3">每当特定事件（如push代码，合并请求被编辑）发生时，我们将通过webhook给您提供的远程URL发送post请求。您可以在我们的<a className="color-blue hoverLine" target="_blank" href="https://forum.trustie.net/forums/3408/detail">webhooks指南</a>中了解更多信息</p>
|
||
{
|
||
data && data.length > 0 &&
|
||
<List>
|
||
{data.map((i, k) => {
|
||
return (
|
||
<List.Item key={k}>
|
||
<i className="iconfont icon-a-xuanzhongwebhookicon color-grey-d mr12 font-17"></i>
|
||
<Link to={`/${owner}/${projectsId}/settings/webhooks/${i.id}`} className="webName">{i.url}</Link>
|
||
<span>
|
||
<Button ghost type={"primary"} onClick={() => { props.history.push(`/projects/${owner}/${projectsId}/settings/webhooks/${i.id}`) }}>编辑</Button>
|
||
<Button ghost className="ml20" type="danger" onClick={() => { deleteFunc(i.id, i.url) }}>删除</Button>
|
||
</span>
|
||
</List.Item>
|
||
)
|
||
})}
|
||
</List>
|
||
}
|
||
{
|
||
total > limit &&
|
||
<div className="edu-txt-center mt20 mb20">
|
||
<Pagination current={page} total={total} onChange={e => { setPage(e) }} pageSize={limit} />
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
export default Index; |