forked from Gitlink/forgeplus-react
209 lines
9.2 KiB
JavaScript
209 lines
9.2 KiB
JavaScript
import React, { Fragment, useEffect, useState } from 'react';
|
||
import { Spin, message, Button, Form, Input, Select, Descriptions, Alert } from 'antd';
|
||
import axios from 'axios';
|
||
import SelectBranch from '../../../forge/Branch/Select';
|
||
import './index.scss';
|
||
|
||
function Pages(props) {
|
||
const {current_user, history, form, projectDetail, defaultBranch, isManager, mygetHelmetapi:{site_page_deploy_domain}} = props;
|
||
const { owner , projectsId } = props.match.params;
|
||
const {id_card_verify} = current_user;
|
||
const { getFieldDecorator, validateFieldsAndScroll } = form;
|
||
const [reload, setReload] = useState(undefined);
|
||
const [loading, setLoading] = useState(false);
|
||
const [pageInfo, setPageInfo] = useState(undefined);
|
||
const [tag, setTag] = useState(undefined);
|
||
const [branch, setBranch ] = useState(null);
|
||
const [building, setBuilding] = useState(false);
|
||
const [isBuild, setIsBuild] = useState(false);
|
||
const [result, setResult] = useState(undefined);
|
||
|
||
useEffect(()=>{
|
||
// 更新网页标题
|
||
if(projectDetail){
|
||
const { author, name} = projectDetail;
|
||
document.title = `个人建站-${author.name}/${name}`;
|
||
}
|
||
}, [projectDetail])
|
||
|
||
useEffect(()=>{
|
||
if(id_card_verify){
|
||
setLoading(true);
|
||
// 获取站点列表
|
||
axios.get(`/site_pages/x.json`, {params:{owner, repo: projectsId}}).then(res=>{
|
||
if(res && res.status === 200){
|
||
setPageInfo(res.data.data);
|
||
if(res.data.data){
|
||
const {last_build_info} = res.data.data;
|
||
last_build_info && last_build_info.length && setResult(last_build_info);
|
||
}
|
||
}
|
||
setLoading(false);
|
||
})
|
||
}
|
||
}, [id_card_verify, reload])
|
||
|
||
// 基于仓库创建站点
|
||
function submit(e) {
|
||
e.preventDefault();
|
||
validateFieldsAndScroll((err, values) => {
|
||
if (!err) {
|
||
axios.post(`/site_pages.json`,{
|
||
...values,
|
||
owner,
|
||
repo: projectsId
|
||
}).then(res=>{
|
||
if(res && res.status === 200){
|
||
setReload(Math.random());
|
||
message.success("创建成功");
|
||
}
|
||
})
|
||
}
|
||
});
|
||
}
|
||
|
||
// 部署
|
||
function startBuild(){
|
||
setBuilding(true);
|
||
axios.post(`/site_pages/${pageInfo.id}/build.json`,{
|
||
owner,
|
||
repo: projectsId,
|
||
branch: branch || defaultBranch
|
||
}).then(res=>{
|
||
if(res && res.data && res.data.status === 0){
|
||
setResult(res.data.data);
|
||
}else{
|
||
message.error((res && res.data && res.data.message) || "部署失败，请稍后重试");
|
||
}
|
||
setReload(Math.random());
|
||
setIsBuild(false);
|
||
setBuilding(false);
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div className='mb100'>
|
||
<div className="servertitle">
|
||
<span className="systitle">个人建站服务{!pageInfo && !loading && id_card_verify && isManager && ' - 新建站点'}</span>
|
||
</div>
|
||
{/* 未通过实名认证 */}
|
||
{!id_card_verify && <Fragment>
|
||
<div className="tipsBox font-15 mt30">您尚未通过实名认证，无法使用此服务，如需使用，请先进行实名认证。</div>
|
||
<Button type="primary" className="mt20" onClick={()=>{history.push(`/settings/verification`)}}>前往验证</Button>
|
||
</Fragment>}
|
||
{id_card_verify && isManager && <Spin spinning={loading}>
|
||
{/* 未开通 */}
|
||
{!pageInfo ? <Form
|
||
form={form}
|
||
name="register"
|
||
className="mt30"
|
||
scrollToFirstError
|
||
layout="horizontal"
|
||
labelCol={{ span: 2 }}
|
||
wrapperCol={{ span: 14 }}
|
||
onSubmit={submit}
|
||
>
|
||
<Form.Item name="站点名称" label="站点名称">
|
||
{getFieldDecorator("site_name", {
|
||
rules: [{ required: true, message: "请输入站点名称" },
|
||
{type: 'string', max: 50, min: 1, message: "长度1-50"}],
|
||
})(<Input placeholder="请输入站点名称" />)}
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="站点标识"
|
||
label="站点标识"
|
||
className="Create-Form-biaoshi"
|
||
>
|
||
{getFieldDecorator("identifier", {
|
||
rules: [{ required: true, message: "请输入站点标识" },
|
||
{pattern: /^[a-zA-Z0-9]{2,100}$/, message: '长度2-100，只能包含数字和字母'}],
|
||
})(
|
||
<Input
|
||
onChange={(e) => {
|
||
setTag(e.target.value);
|
||
}}
|
||
placeholder="请输入站点标识"
|
||
/>
|
||
)}
|
||
<span style={{wordBreak: 'break-all'}}>
|
||
http://{current_user.login}.{site_page_deploy_domain}/{tag}
|
||
</span>
|
||
</Form.Item>
|
||
<Form.Item name="建站工具" label="建站工具">
|
||
{getFieldDecorator("language_frame", {initialValue: 0})(
|
||
<Select style={{ width: 100 }}>
|
||
<Select.Option value={0}>hugo</Select.Option>
|
||
<Select.Option value={1}>jekyll</Select.Option>
|
||
<Select.Option value={2}>hexo</Select.Option>
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item style={{marginLeft: '100px'}} className="mt40">
|
||
<Button type="primary" htmlType="submit" className="mr20">
|
||
创建站点
|
||
</Button>
|
||
<Button
|
||
onClick={() => {
|
||
history.push(`/${owner}/${projectsId}/service`);
|
||
}}
|
||
>
|
||
取消
|
||
</Button>
|
||
</Form.Item>
|
||
</Form> : pageInfo.state ? <div className='mt30'>
|
||
{/* 已开通 */}
|
||
<Descriptions title="站点信息">
|
||
<Descriptions.Item label="站点名称">
|
||
<span onClick={()=>{pageInfo.last_build_at && window.open(pageInfo.url)}} className= {pageInfo.last_build_at && 'theme-btn'}>{pageInfo.site_name}</span>
|
||
<span className={`pageStateBox ml20 font-12 ${pageInfo.build_state ? "public" : "private"}`}>{pageInfo.build_state === null ? '未部署' : pageInfo.build_state ? "已部署" : "部署失败"}</span>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="网站地址" span={2}><span onClick={()=>{pageInfo.last_build_at && window.open(pageInfo.url)}} className= {pageInfo.last_build_at && 'theme-btn'}>{pageInfo.url}</span></Descriptions.Item>
|
||
<Descriptions.Item label="建站工具">{pageInfo.language_frame}</Descriptions.Item>
|
||
<Descriptions.Item label="建站时间">{pageInfo.created_at}</Descriptions.Item>
|
||
{pageInfo.last_build_at && <Descriptions.Item label="上次部署时间">{pageInfo.last_build_at}</Descriptions.Item>}
|
||
</Descriptions>
|
||
{!isBuild && <Button type='primary' style={{width: '135px', height: '34px'}} className='mt20' onClick={()=>{setIsBuild(true)}}>去部署</Button>}
|
||
{isBuild && <div>
|
||
<div className='mt20 ant-descriptions-title'>部署</div>
|
||
<div style={{display: 'inline-flex'}}>
|
||
<span>部署分支：</span>
|
||
<SelectBranch
|
||
repo_id={projectDetail && projectDetail.repo_id}
|
||
projectsId={projectsId}
|
||
branch={branch || defaultBranch}
|
||
changeBranch={(params)=>{setBranch(params)}}
|
||
owner={owner}
|
||
history={props.history}
|
||
tagflag={false}
|
||
branchList={projectDetail && projectDetail.branches && projectDetail.branches.list}
|
||
></SelectBranch>
|
||
<span className='color-grey-6 ml30'>选择您要部署的分支</span>
|
||
</div>
|
||
<div className='mt20'>
|
||
<Button type='primary' loading={building} onClick={startBuild}>确定</Button>
|
||
<Button type='primary' ghost onClick={()=>{setIsBuild(false)}} className='ml30'>取消</Button>
|
||
</div>
|
||
</div>}
|
||
</div> : <div className='mt30'>
|
||
{/* 站点权限被关闭 */}
|
||
{pageInfo && <Alert type="error" message={`您的个人站点 ${pageInfo.site_name} 已被关闭，关闭原因为：${pageInfo.state_description}`}></Alert>}
|
||
</div>}
|
||
{result && <div className='mt30'>
|
||
<div className='mt20 ant-descriptions-title'>部署结果</div>
|
||
<div className='buildResult'>{result.map(item=> <p>{item}</p>)}</div>
|
||
</div>}
|
||
</Spin>}
|
||
{!isManager && <div className='mt30'>
|
||
{/* 非管理员权限 */}
|
||
{pageInfo && pageInfo.state && <Descriptions title="站点信息">
|
||
<Descriptions.Item label="站点名称"><span onClick={()=>{pageInfo.last_build_at && window.open(pageInfo.url)}} className= {pageInfo.last_build_at && 'theme-btn'}>{pageInfo.site_name}</span></Descriptions.Item>
|
||
<Descriptions.Item label="网站地址" span={2}><span onClick={()=>{pageInfo.last_build_at && window.open(pageInfo.url)}} className= {pageInfo.last_build_at && 'theme-btn'}>{pageInfo.url}</span></Descriptions.Item>
|
||
<Descriptions.Item label="建站工具">{pageInfo.language_frame}</Descriptions.Item>
|
||
<Descriptions.Item label="建站时间">{pageInfo.created_at}</Descriptions.Item>
|
||
{pageInfo.last_build_at && <Descriptions.Item label="上次部署时间">{pageInfo.last_build_at}</Descriptions.Item>}
|
||
</Descriptions>}
|
||
</div>}
|
||
</div>
|
||
)
|
||
}
|
||
export default Form.create()(Pages); |