113 lines
3.7 KiB
JavaScript
113 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 >= 20){
|
||
return props.showNotification("webhooks数量已到上限！请删除暂不使用的webhooks以进行添加操作");
|
||
}
|
||
props.history.push(`/${owner}/${projectsId}/settings/webhooks/new`)
|
||
}
|
||
|
||
return(
|
||
<div>
|
||
<DeleteBox
|
||
visible={visible}
|
||
onCancel={()=>setVisible(false)}
|
||
onSuccess={onSuccess}
|
||
title="删除Webhook"
|
||
content="您确定要删除此Webhook吗？"
|
||
subTitle={`删除后未来事件将不会推送至此Webhook地址：${url}`}
|
||
/>
|
||
<Banner>
|
||
<FlexAJ>
|
||
<span>Webhooks</span>
|
||
<Button type="primary" size="large" onClick={addFunc}>添加Webhook</Button>
|
||
</FlexAJ>
|
||
</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(`/${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; |