forked from Gitlink/forgeplus-react
代码溯源轮询及iframe自适应
This commit is contained in:
何童崇
parent
8c3d227d02
commit
f37810e955
|
|
@ -1,58 +1,94 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import DataEmpty from './dataEmpty';
|
||||
import DetectionModal from './detectionModal';
|
||||
import { Table , Spin, message } from 'antd';
|
||||
import { Table, Spin, message } from 'antd';
|
||||
import axios from 'axios';
|
||||
|
||||
|
||||
function Data(props){
|
||||
const [ detectionVisible , setDetectionVisible ] = useState(false);
|
||||
const [ dataSource , setDataSource ] = useState(undefined);
|
||||
const [ page , setPage ] = useState(1);
|
||||
const [ spining , setSpining ] = useState(true);
|
||||
const [ relayCount , setRelayCount ] = useState(5);
|
||||
const [ repeatId , setRepeatId ] = useState(undefined);
|
||||
const [ repeatBranch , setRepeatBranch ] = useState(undefined);
|
||||
const [ lookResultUrl, setLookResultUrl] = useState(undefined);
|
||||
const [ openResultTaskId, setOpenResultTaskId] = useState(undefined);
|
||||
function Data(props) {
|
||||
const [detectionVisible, setDetectionVisible] = useState(false);
|
||||
const [dataSource, setDataSource] = useState(undefined);
|
||||
const [page, setPage] = useState(1);
|
||||
const [spining, setSpining] = useState(true);
|
||||
const [relayCount, setRelayCount] = useState(5);
|
||||
const [repeatId, setRepeatId] = useState(undefined);
|
||||
const [repeatBranch, setRepeatBranch] = useState(undefined);
|
||||
const [lookResultUrl, setLookResultUrl] = useState(undefined);
|
||||
const [openResultTaskId, setOpenResultTaskId] = useState(undefined);
|
||||
const [viewBase, setViewBase] = useState('https://cjntest.trustie.net/');
|
||||
|
||||
const { owner , projectsId } = props.match.params;
|
||||
const { current_user , isManager } = props;
|
||||
const { owner, projectsId } = props.match.params;
|
||||
const { current_user, isManager } = props;
|
||||
const limit = 15;
|
||||
|
||||
|
||||
function onDetectionOk(){
|
||||
function onDetectionOk() {
|
||||
props.showNotification("新建分析成功，可在“检测状态”处查看扫描检测进度");
|
||||
setDetectionVisible(false);
|
||||
setSpining(true);
|
||||
Init();
|
||||
}
|
||||
|
||||
function Init(){
|
||||
function Init() {
|
||||
const url = `/traces/${owner}/${projectsId}/task_results.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
page,limit
|
||||
axios.get(url, {
|
||||
params: {
|
||||
page, limit
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
setDataSource(result.data.data);
|
||||
setRelayCount(result.data.left_tasks_count);
|
||||
setLookResultUrl(result.data.view_base);
|
||||
}).then(result => {
|
||||
if (result) {
|
||||
|
||||
if (Array.isArray(result.data.data)) {
|
||||
setDataSource(result.data.data);
|
||||
setRelayCount(result.data.left_tasks_count);
|
||||
setLookResultUrl(result.data.view_base);
|
||||
setViewBase(result.data.view_base);
|
||||
for (const item of result.data.data) {
|
||||
if (item.detect_status === "detecting") {
|
||||
setTimeout(Init, 2000);
|
||||
break;
|
||||
} else if (item.detect_status === "waiting") {
|
||||
Init();
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
result && result.data.message && props.showNotification(result.data.message);
|
||||
}
|
||||
|
||||
setSpining(false);
|
||||
}
|
||||
}).catch(error=>{})
|
||||
}).catch(error => { })
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
useEffect(() => {
|
||||
setSpining(true);
|
||||
Init();
|
||||
},[])
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("message", iframeHeight, false);
|
||||
return () => {
|
||||
window.removeEventListener("message", iframeHeight, false);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function iframeHeight(e){
|
||||
console.log('iframeHeight');
|
||||
console.log(e.data);
|
||||
if (e && e.data && viewBase && e.origin && viewBase.indexOf(e.origin)>-1) {
|
||||
let myHeight = JSON.parse(e.data);
|
||||
if (document.querySelector("#htmlIframe")) {
|
||||
document.querySelector("#htmlIframe").height = myHeight.height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 重新扫描
|
||||
function repeatCheck(project_id,branch){
|
||||
if(relayCount <= 0){
|
||||
function repeatCheck(project_id, branch) {
|
||||
if (relayCount <= 0) {
|
||||
message.error("无可用检测次数");
|
||||
return;
|
||||
}
|
||||
|
|
@ -61,8 +97,8 @@ function Data(props){
|
|||
setDetectionVisible(true);
|
||||
}
|
||||
|
||||
function createCheck(){
|
||||
if(relayCount <= 0){
|
||||
function createCheck() {
|
||||
if (relayCount <= 0) {
|
||||
message.error("无可用检测次数");
|
||||
return;
|
||||
}
|
||||
|
|
@ -71,7 +107,7 @@ function Data(props){
|
|||
setDetectionVisible(true);
|
||||
}
|
||||
|
||||
function handleDownExcel(task_id){
|
||||
function handleDownExcel(task_id) {
|
||||
setSpining(true);
|
||||
const url = `/api/traces/${owner}/${projectsId}/task_pdf.json?task_id=${task_id}`;
|
||||
// window.open(`/api/traces/${owner}/${projectsId}/task_pdf.json?task_id=${task_id}`);
|
||||
|
|
@ -90,10 +126,10 @@ function Data(props){
|
|||
x.send();
|
||||
}
|
||||
|
||||
function lookResult(taskId){
|
||||
if(!openResultTaskId || (openResultTaskId && openResultTaskId !== taskId)){
|
||||
function lookResult(taskId) {
|
||||
if (!openResultTaskId || (openResultTaskId && openResultTaskId !== taskId)) {
|
||||
setOpenResultTaskId(taskId);
|
||||
}else{
|
||||
} else {
|
||||
setOpenResultTaskId(undefined);
|
||||
}
|
||||
}
|
||||
|
|
@ -111,12 +147,12 @@ function Data(props){
|
|||
console.error(err);
|
||||
}
|
||||
}
|
||||
return(
|
||||
return (
|
||||
<div>
|
||||
<DetectionModal
|
||||
visible={detectionVisible}
|
||||
onCancel={()=>setDetectionVisible(false)}
|
||||
onOk={onDetectionOk}
|
||||
<DetectionModal
|
||||
visible={detectionVisible}
|
||||
onCancel={() => setDetectionVisible(false)}
|
||||
onOk={onDetectionOk}
|
||||
owner={owner}
|
||||
projectsId={projectsId}
|
||||
relayCount={relayCount}
|
||||
|
|
@ -125,12 +161,12 @@ function Data(props){
|
|||
/>
|
||||
<div className="servertitle">
|
||||
<span className="systitle">重晴鸟代码溯源系统</span>
|
||||
{ isManager && <a className="btnhover" onClick={createCheck}>新建分析</a> }
|
||||
{isManager && <a className="btnhover" onClick={createCheck}>新建分析</a>}
|
||||
</div>
|
||||
<Spin spinning={spining}>
|
||||
<div style={{minHeight:"400px"}}>
|
||||
<div style={{ minHeight: "400px" }}>
|
||||
{
|
||||
dataSource && dataSource.length >0 &&
|
||||
dataSource && dataSource.length > 0 &&
|
||||
<div>
|
||||
<ul className="dataUl">
|
||||
<li className="dataUlhead">
|
||||
|
|
@ -138,26 +174,26 @@ function Data(props){
|
|||
<span>分支名称</span>
|
||||
<span>检测状态</span>
|
||||
<span>检测时间</span>
|
||||
{ isManager && <span>操作</span> }
|
||||
{isManager && <span>操作</span>}
|
||||
</li>
|
||||
{
|
||||
dataSource.map((e,key)=>{
|
||||
return(
|
||||
dataSource.map((e, key) => {
|
||||
return (
|
||||
<div key={key}>
|
||||
<li className="dataUlbody">
|
||||
<span>{key + 1 }</span>
|
||||
<span>{key + 1}</span>
|
||||
<span title={e.branch_tag}>{e.branch_tag}</span>
|
||||
<span>
|
||||
{
|
||||
e.detect_status === "fail" ?
|
||||
<span className="failure">失败</span>
|
||||
: e.detect_status==="detecting" ?
|
||||
<div className="running">
|
||||
<span className="percentline" style={{width:`${e.detect_process}%`}}></span>
|
||||
<span className="percentNum" style={{left:`${e.detect_process+5}%`}}>{e.detect_process}%</span>
|
||||
</div>
|
||||
:
|
||||
<span className="success">成功</span>
|
||||
<span className="failure">失败</span>
|
||||
: e.detect_status === "detecting" ?
|
||||
<div className="running">
|
||||
<span className="percentline" style={{ width: `${e.detect_process}%` }}></span>
|
||||
<span className="percentNum" style={{ left: `${e.detect_process + 5}%` }}>{e.detect_process}%</span>
|
||||
</div>
|
||||
: e.detect_status === "detected" ?
|
||||
<span className="success">成功</span> : <span className="success">等待中</span>
|
||||
}
|
||||
</span>
|
||||
<span>{e.detect_startdate}</span>
|
||||
|
|
@ -166,29 +202,29 @@ function Data(props){
|
|||
<span>
|
||||
<div className="operationBtns">
|
||||
{
|
||||
e.detect_status ==="detecting" ?
|
||||
<span>重新扫描</span>
|
||||
:
|
||||
<a onClick={()=>repeatCheck(e.project_id,e.branch_tag)}>重新扫描</a>
|
||||
e.detect_status === "detecting" ?
|
||||
<span>重新扫描</span>
|
||||
:
|
||||
<a onClick={() => repeatCheck(e.project_id, e.branch_tag)}>重新扫描</a>
|
||||
}
|
||||
{
|
||||
(e.detect_status ==="fail" || e.detect_status ==="detecting") ?
|
||||
<span>查看<i className="iconfont icon-sanjiaoxing-down"></i></span>
|
||||
:
|
||||
<a onClick={()=>{lookResult(e.task_id)}}>查看<i className={`iconfont ${openResultTaskId === e.task_id ? 'icon-sanjiaoxing-up' : 'icon-sanjiaoxing-down'}`}></i></a>
|
||||
(e.detect_status === "fail" || e.detect_status === "detecting") ?
|
||||
<span>查看<i className="iconfont icon-sanjiaoxing-down"></i></span>
|
||||
:
|
||||
<a onClick={() => { lookResult(e.task_id) }}>查看<i className={`iconfont ${openResultTaskId === e.task_id ? 'icon-sanjiaoxing-up' : 'icon-sanjiaoxing-down'}`}></i></a>
|
||||
}
|
||||
{
|
||||
(e.detect_status ==="fail" || e.detect_status ==="detecting") ?
|
||||
<span>下载报告</span>
|
||||
:
|
||||
<a onClick={()=>handleDownExcel(e.task_id)}>下载报告</a>
|
||||
(e.detect_status === "fail" || e.detect_status === "detecting") ?
|
||||
<span>下载报告</span>
|
||||
:
|
||||
<a onClick={() => handleDownExcel(e.task_id)}>下载报告</a>
|
||||
}
|
||||
</div>
|
||||
</span>
|
||||
}
|
||||
</li>
|
||||
{/* lookResultUrl+e.task_id */}
|
||||
{openResultTaskId && openResultTaskId === e.task_id && <iframe title={`htmlIframe_${key}`} src={lookResultUrl+e.task_id} id={`htmlIframe`} frameBorder="0" name={`htmlIframe_${key}`} width="100%" onLoad={iframeLoad} height={'auto'}></iframe>}
|
||||
{openResultTaskId && openResultTaskId === e.task_id && <iframe title={`htmlIframe_${key}`} src={lookResultUrl + e.task_id} id={`htmlIframe`} frameBorder="0" name={`htmlIframe_${key}`} width="100%" onLoad={iframeLoad} height={'auto'}></iframe>}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId, owner ,
|
|||
}
|
||||
<div>
|
||||
<span>检测类型</span>
|
||||
<p>快速-组件级</p>
|
||||
<p>深度-文件代码级</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>检测参数</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue