+ setVisible(false)}
+ onSuccess={onSuccess}
+ title="删除Webhook"
+ content="您确定要删除此Webhook吗？"
+ subTitle={`删除后未来事件将不会推送至此Webhook地址：${url}`}
+ />
+
+
+ Webhooks
+
+
+
+
+ )
+}
+export default Index;
\ No newline at end of file
diff --git a/src/forge/Settings/Webhooks/Index.scss b/src/forge/Settings/Webhooks/Index.scss
new file mode 100644
index 000000000..6c166a730
--- /dev/null
+++ b/src/forge/Settings/Webhooks/Index.scss
@@ -0,0 +1,171 @@
+.hookpanel{
+ &>p{
+ padding:20px 25px 0px 20px;
+ }
+ .ant-list{
+ .ant-list-item{
+ padding:15px 20px;
+ &:last-child{
+ border-bottom: 1px solid #e8e8e8;
+ }
+ .webName{
+ flex:1;
+ margin-right: 15px;
+ word-break: break-all;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+}
+.newPanel{
+ .ant-form .ant-form-item-label label{
+ font-size: 16px;
+ }
+ .has-success .ant-form-explain{
+ font-size: 12px;
+ color: #999;
+ line-height: 20px;
+ margin-top: 5px;
+ word-break: break-all;
+ }
+ .ant-form{
+ .ant-row{
+ padding:0px 194px 0px 20px;
+ &.topLine{
+ border-top: 1px solid #EEEEEE;
+ padding-top:20px;
+ margin-top: 25px;
+ }
+ &.bottomLine{
+ border-bottom: 1px solid #EEEEEE;
+ padding-bottom:20px;
+ margin-bottom: 25px;
+ .ant-checkbox + span{
+ font-size: 16px;
+ }
+ }
+ }
+ }
+ .eventCb{
+ padding:0px 194px 0px 45px;
+ .ant-checkbox-group{
+ width: 100%;
+ }
+ .colSpan{
+ display: flex;
+ flex-wrap: wrap;
+ &>span{
+ width: 50%;
+ margin:0px;
+ display: block;
+ &>span{
+ display: block;
+ padding-left: 24px;
+ margin-bottom: 20px;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ .ant-form-item-children{
+ display: block;
+ }
+ .ant-checkbox + span{
+ color: #333;
+ &>span{
+ color: #333333;
+ height: 20px;
+ line-height: 20px;
+ padding-left: 24px;
+ font-size: 12px;
+ display: block;
+ }
+ }
+}
+.deschead{
+ background: #FAFCFF;
+ border-radius: 4px 4px 0px 0px;
+ border: 1px solid rgba(42, 97, 255, 0.23);
+ height: 50px;
+ padding:0px 20px;
+ margin-top: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.deschead.mg{
+ margin:20px!important;
+ padding:0px 12px;
+}
+.historyColl{
+ .ant-collapse-header{
+ background-color: #fff;
+ }
+ .panelHeader{
+ display: flex;
+ span{
+ width: 20%;
+ color: #333;
+ font-weight: 400;
+ }
+ .time{
+ text-align: right;
+ }
+ .name{
+ flex:1;
+ }
+ }
+ .ant-collapse-content-box{
+ background-color: #fff;
+ }
+}
+.contentMenu{
+ li{
+ font-weight: 500;
+ }
+ margin-left:14px;
+}
+.contentPanel{
+ .retitle{
+ font-size: 16px;
+ font-weight: 600;
+ color: #333333;
+ margin:20px 0px 10px!important;
+ }
+ .con{
+ background: #EEEEEE;
+ border-radius: 4px;
+ padding:15px;
+ max-height: 400px;
+ overflow: auto;
+ p{
+ font-size: 13px;
+ color:#333;
+ line-height: 28px;
+ &>span:first-child{
+ font-weight: 500;
+ }
+ }
+ }
+ .conEditor{
+ .overflow-guard{
+ border-radius: 4px;
+ }
+ .margin-view-overlays{
+ background-color: #eee;
+ &>div{
+ background-color: #eee;
+ }
+ }
+ .lines-content{
+ background-color: #eee;
+ }
+ .view-lines{
+ &>div{
+ background-color: #eee;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/forge/Settings/Webhooks/New.jsx b/src/forge/Settings/Webhooks/New.jsx
new file mode 100644
index 000000000..7a2b0b312
--- /dev/null
+++ b/src/forge/Settings/Webhooks/New.jsx
@@ -0,0 +1,336 @@
+import React , { forwardRef, useEffect, useState } from 'react';
+import { Form , Input , Button , Select , Radio , Checkbox } from 'antd';
+import { Banner } from '../../Component/layout';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import PushHistory from './sub/PushHistory';
+import DeleteBox from '../../Component/DeleteModal/Index';
+import './Index.scss';
+
+// ,"issue_assign","issue_label","issue_milestone","issue_comment","issue_only","fork",
+//"pull_request_milestone","pull_request_sync","pull_request_comment","repository","pull_request_label"
+const eventArray = [
+ "create","delete","push","pull_request_assign","pull_request_review","pull_request_only"
+]
+function New({ form , match , showNotification , history }) {
+ const [ httpValue , setHttpValue ] = useState("POST");
+ const [ posthttpValue , setPostHttpValue ] = useState("json");
+ const [ condition , setCondition ] = useState("push");
+ const [ event , setEvent ] = useState(["push"]);
+ const [ visible , setVisible ] = useState(false);
+ const [ data , setData ] = useState(undefined);
+ const [ eventFlag , setEventFlag ] = useState(false);
+
+ const { getFieldDecorator, validateFields , setFieldsValue } = form;
+ const { id , owner , projectsId } = match.params;
+
+ function compareArray(params) {
+ if(params && params.length > 0){
+ if(params.length === 1 && params[0] === "push"){
+ setEvent(['push']);
+ return "push";
+ }else if(params.length === eventArray.length){
+ setEvent(eventArray);
+ return "all";
+ }else{
+ setEvent([]);
+ return "forevent";
+ }
+ }
+ }
+
+ useEffect(()=>{
+ if(id){
+ Init();
+ }else{
+ let e = compareArray(event);
+ setCondition(e);
+ setFieldsValue({
+ url:"",
+ secret:"",
+ http_method:httpValue,
+ content_type:posthttpValue,
+ eventCondition:condition,
+ event:event,
+ branch_filter:"*",
+ active:true
+ })
+ }
+ },[id])
+
+ function Init() {
+ const url = `/${owner}/${projectsId}/webhooks/${id}/edit.json`;
+ axios.get(url).then(result=>{
+ if(result){
+ let e = compareArray(result.data.events);
+ setFieldsValue({
+ ...result.data,
+ eventCondition:e,
+ active:result.data.is_active
+ })
+ setData(result.data);
+ setHttpValue(result.data.http_method);
+ setCondition(e);
+ setEvent(result.data.events);
+ }
+ }).catch(error=>{})
+ }
+
+ function changeHTTP(value) {
+ setHttpValue(value);
+ }
+
+ function changeCondition(e) {
+ setCondition(e.target.value);
+ if(e.target.value === "push"){
+ setEvent(["push"])
+ }else if(e.target.value === "all"){
+ setEvent(eventArray)
+ }else{
+ setEvent([])
+ }
+ }
+
+ function submit() {
+ validateFields((error,values)=>{
+ if(!error){
+ if(values.eventCondition === "forevent" && event.length === 0){
+ setEventFlag(true);
+ return;
+ }
+ let e = values.eventCondition === "push" ? ['push'] : values.eventCondition === "all" ? eventArray : event;
+
+ if(id){
+ // 编辑
+ const url = `/${owner}/${projectsId}/webhooks/${id}.json`;
+ axios.patch(url,{
+ webhook:{
+ ...values,
+ events:e
+ }
+ }).then(result=>{
+ if(result){
+ showNotification("webhook更新成功！");
+ history.push(`/projects/${owner}/${projectsId}/setting/webhooks`);
+ }
+ }).catch(error=>{})
+ }else{
+ // 保存
+ const url = `/${owner}/${projectsId}/webhooks.json`;
+ axios.post(url,{
+ webhook:{
+ ...values,
+ events:e
+ }
+ }).then(result=>{
+ if(result && result.data && result.data.id){
+ showNotification("webhook新建成功！");
+ history.push(`/projects/${owner}/${projectsId}/setting/webhooks`);
+ }
+ }).catch(error=>{})
+ }
+
+ }
+ })
+ }
+
+ function checkAddr(rule, value, callback) {
+ let reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
+ if(!value){
+ callback();
+ }
+ if (!reg.test(value)){
+ callback("请输入有效的URL");
+ }
+ callback();
+ }
+
+ function deleteFunc() {
+ if(id){
+ setVisible(true);
+ }
+ }
+
+ function onSuccess() {
+ if(id){
+ const url = `/${owner}/${projectsId}/webhooks/${id}.json`;
+ axios.delete(url).then(result=>{
+ if(result){
+ showNotification("webhook删除成功！");
+ history.push(`/projects/${owner}/${projectsId}/setting/webhooks`);
+ }
+ }).catch(error=>{})
+ }
+ }
+
+ const radioStyle = {
+ display: 'block',
+ height: '30px',
+ lineHeight: '30px',
+ };
+
+ return(
+
+
+ 每当特定事件（如push代码，合并请求被编辑）发生时，我们将通过webhook给您提供的远程URL发送post请求。您可以在我们的webhooks指南中了解更多信息
+ { + data && data.length> 0 && +-
+ {data.map((i,k)=>{
+ return(
+
+ {setPage(e)}} pageSize={limit}/>
+
+ }
+
+ setVisible(false)}
+ onSuccess={onSuccess}
+ title="删除Webhook"
+ content="您确定要删除此Webhook吗？"
+ subTitle={`删除后未来事件将不会推送至此Webhook地址：${data && data.url}`}
+ />
+
+ Webhooks
+
+ {id ? "更新" : "添加"}Webhook
+
+ }
+
+ )
+}
+export default Form.create()(forwardRef(New));
\ No newline at end of file
diff --git a/src/forge/Settings/Webhooks/images/fault.png b/src/forge/Settings/Webhooks/images/fault.png
new file mode 100755
index 000000000..b2b35295f
Binary files /dev/null and b/src/forge/Settings/Webhooks/images/fault.png differ
diff --git a/src/forge/Settings/Webhooks/images/icon.png b/src/forge/Settings/Webhooks/images/icon.png
new file mode 100644
index 000000000..ae30823fa
Binary files /dev/null and b/src/forge/Settings/Webhooks/images/icon.png differ
diff --git a/src/forge/Settings/Webhooks/sub/PushHistory.jsx b/src/forge/Settings/Webhooks/sub/PushHistory.jsx
new file mode 100644
index 000000000..b9c6a462b
--- /dev/null
+++ b/src/forge/Settings/Webhooks/sub/PushHistory.jsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Collapse , Tooltip , Spin } from 'antd';
+import axios from 'axios';
+import Content from './historyContent';
+import Fault from '../images/fault.png';
+const { Panel } = Collapse;
+
+function PushHistory({id,owner,projectsId,showNotification}) {
+ const [ list , setList ] = useState(undefined);
+ const [ isSpin , setIsSpin ] = useState(false);
+
+ useEffect(()=>{
+ if(id && owner && projectsId){
+ Init();
+ }
+ },[id,owner,projectsId])
+
+ function Init() {
+ const url = `/${owner}/${projectsId}/webhooks/${id}/tasks.json`;
+ axios.get(url,{
+ params:{page:1,limit:10}
+ }).then(result=>{
+ if(result && result.data){
+ setList(result.data.tasks);
+ setIsSpin(false);
+ }
+ }).catch(error=>{})
+ }
+
+ function testFunc() {
+ setIsSpin(true);
+ const url = `/${owner}/${projectsId}/webhooks/${id}/test.json`;
+ axios.post(url).then(result=>{
+ if(result && result.data){
+ // Init();
+ showNotification("测试推送已经加入到队列，请耐心等待数秒再刷新推送记录!");
+ setIsSpin(false);
+ }
+ }).catch(error=>{setIsSpin(false);})
+ }
+
+ return(
+
+
+ { id && 当webhook被触发时，我们将向以下URL发送通知，包括已选择事件的详细信息。更多信息可查阅webhooks指南。
+ +
+
+ {
+ list.map((i,k)=>{
+ return(
+
+ {
+ i.is_succeed ?
+ 响应成功，类型：{i.response_content && i.response_content.status}}>
+
+
+ :
+ 
+ }
+ {i.uuid}
+ {/* {i.type} */}
+ {i.delivered_time}
+
+ }>
+
+ 最近推送历史
+
+ 刷新
+
+
+
+ {
+ list && list.length>0 &&
+
+
+ )
+}
+export default HistoryContent;
\ No newline at end of file
diff --git a/src/forge/css/index.scss b/src/forge/css/index.scss
index e8e8e85f4..00e46b6f8 100644
--- a/src/forge/css/index.scss
+++ b/src/forge/css/index.scss
@@ -257,4 +257,17 @@ form{
.group-setting-switch{
border: 1px solid #DDDDDD !important;
background-color: #fff !important;
+}
+.ant-btn.ant-btn-background-ghost{
+ border-color: #D0D0D0;
+}
+.ant-btn.ant-btn-background-ghost.ant-btn-primary:hover{
+ background-color: #1890ff!important;
+ border-color: #1890ff;
+ color: #fff;
+}
+.ant-btn.ant-btn-background-ghost.ant-btn-danger:hover{
+ background-color: #DF0002!important;
+ border-color: #DF0002;
+ color: #fff;
}
\ No newline at end of file
+
+
+
+ {
+ key === "request" ?
+
+
+ {
+ requestHeader && requestHeader.length > 0 &&
+
+ :
+
+
+ }
+ {
+ payload_content &&
+ 标题
+
+ {
+ requestHeader.map((i,k)=>{
+ return(
+
+ {i.name}: {i.value}
+ ) + }) + } +
+
+ }
+ 有效载荷
+
+
+
+ {
+ (!responseHeader && ((response_content && !response_content.body) || !response_content))?
+
+ }
+
+
+ }
+ {
+ response_content && response_content.body &&
+ 标题
+
+ {
+ responseHeader.map((i,k)=>{
+ return(
+
+ {i.name}: {i.value}
+ ) + }) + } +
+
+ }
+ 响应体
+ { + isJSON(response_content.body) ? +
+
+ :
+
+
+
+ }
+