服务‘

2022-05-16 09:42:01 +08:00 · 2022-05-16 09:42:01 +08:00 · 281e1b27f8
parent 31ac62a72d
commit 281e1b27f8
3 changed files with 168 additions and 55 deletions
--- a/src/forge/Server/data.jsx
+++ b/src/forge/Server/data.jsx
@ -2,22 +2,30 @@ import React, { useEffect, useState } from 'react';
 import DataEmpty from './dataEmpty';
 import AgreementModal from './agreementModal';
 import DetectionModal from './detectionModal';
-import { Table } from 'antd';
+import { Table , Spin, message } from 'antd';
 import axios from 'axios';

-const source=[
-  {name:"maste2988989898984qwerrfccdr",status:"failure",time:"2022-05-11 17:21"},
-  {name:"maste2988989898984qwerrfccdr",status:"success",time:"2022-05-11 17:21"},
-  {name:"maste2988989898984qwerrfccdr",status:"50",time:"2022-05-11 17:21"},
-  {name:"maste2988989898984qwerrfccdr",status:"80",time:"2022-05-11 17:21"}
-]
+
 function Data(props){
  const [ visible , setVisible ] =  useState(false);
  const [ detectionVisible , setDetectionVisible ] =  useState(false);
-  const [ dataSource , setDataSource ] = useState(source);
+  const [ dataSource , setDataSource ] = useState(undefined);
  const [ page , setPage ] = useState(1);
-  const limit = 15;
+  const [ spining , setSpining ] = useState(true);
+  const [ has_trace_user , setHas_trace_user ] = useState(false);
+  const [ relayCount , setRelayCount ] = useState(5);
+  const [ repeatId , setRepeatId ] = useState(undefined);
+  const [ repeatBranch , setRepeatBranch ] = useState(undefined);
+
  const { owner , projectsId } = props.match.params;
+  const { current_user } = props;
+  const limit = 15;
+
+  useEffect(()=>{
+    if(current_user){
+      setHas_trace_user(has_trace_user);
+    }
+  },[current_user])

  function onOk(){
    setVisible(false);
@ -25,10 +33,13 @@ function Data(props){
  }

  function onDetectionOk(){
+    props.showNotification("扫描成功！");
    setDetectionVisible(false);
+    setSpining(true);
+    Init();
  }

-  useEffect(()=>{
+  function Init(){
    const url = `/traces/${owner}/${projectsId}/task_results.json`;
    axios.get(url,{
      params:{
@ -36,9 +47,17 @@ function Data(props){
      }
    }).then(result=>{
      if(result){
-
+        setDataSource(result.data.data);
+        let count = result.data.data && result.data.data.length;
+        setRelayCount(relayCount-count);
+        setSpining(false);
      }
    }).catch(error=>{})
+  }
+
+  useEffect(()=>{
+    setSpining(true);
+    Init();
  },[])

  const columns=[
@ -52,32 +71,35 @@ function Data(props){
    },
    {
      title:"分支名称",
-      dataIndex:"name",
-      key:"name",
+      dataIndex:"branch_tag",
+      key:"branch_tag",
      width:"30%",
      align:"left",
      ellipsis:true
    },
    {
      title:"检测状态",
-      dataIndex:"status",
-      key:"status",
+      dataIndex:"detect_status",
+      key:"detect_status",
      align:"left",
      render: (k,e,e1) => {
        return (
-          k === "failure" ?
+          k === "fail" ?
          <span className="failure">失败</span>
-          : k==="success" ?
-          <span className="success">成功</span>
+          : k==="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>
          :
-          <div className="running"><span style={{width:`${k}%`}}>{k}%</span></div>
+          <span className="success">成功</span>
        )
      }
    },
    {
      title:"检测时间",
-      dataIndex:"time",
-      key:"time",
+      dataIndex:"detect_startdate",
+      key:"detect_startdate",
      align:"left",
    },
    {
@ -89,15 +111,60 @@ function Data(props){
      render: (k,e,e1) => {
        return(
          <div className="operationBtns">
-            <a>重新扫描</a>
-            <a>查看<i className="iconfont icon-sanjiaoxing-down"></i></a>
-            <a>下载报告</a>
+            <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>查看<i className="iconfont icon-sanjiaoxing-down"></i></a>
+            }
+            {
+              (e.detect_status ==="fail" || e.detect_status ==="detecting") ?
+              <span>下载报告</span>
+              :
+              <a onClick={()=>downloadFunc(e.task_id)}>下载报告</a>
+            }
          </div>
        )
      }
    }
  ]

+  // 下载报告
+  function downloadFunc(task_id){
+    setSpining(true);
+    const url = `/traces/${owner}/${projectsId}/task_pdf.json?task_id=${task_id}`;
+    axios.get(url).then(result=>{
+      setSpining(false);
+    }).catch(error=>{})
+  }
+
+  // 重新扫描
+  function repeatCheck(project_id,branch){
+    if(relayCount <= 0){
+      message.error("无可用检测次数");
+      return;
+    }
+    setRepeatId(project_id);
+    setRepeatBranch(branch);
+    setDetectionVisible(true);
+  }
+
+  // 新建分析：判断是否签订过协议，签订过就弹出检测弹框
+  function createCheck(){
+    if(relayCount <= 0){
+      message.error("无可用检测次数");
+      return;
+    }
+    setRepeatBranch(undefined);
+    setRepeatId(undefined);
+    if(has_trace_user){
+      setVisible(true);
+    }else{
+      setDetectionVisible(true);
+    }
+  }
+
  return(
    <div>
      <AgreementModal visible={visible} onCancel={()=>setVisible(false)} onOk={onOk}/>
@ -107,15 +174,28 @@ function Data(props){
        onOk={onDetectionOk} 
        owner={owner}
        projectsId={projectsId}
+        relayCount={relayCount}
+        repeatId={repeatId}
+        repeatBranch={repeatBranch}
      />
      <div className="servertitle">
        <span className="systitle">重晴鸟代码溯源系统</span>
-        <a className="btnhover" onClick={()=>setVisible(true)}>新建分析</a>
+        <a className="btnhover" onClick={createCheck}>新建分析</a>
      </div>
-      <div>
-        <Table className="dataTable" columns={columns} dataSource={dataSource} pagination={false}/>
-      </div>
-      <DataEmpty />
+      <Spin spinning={spining}>
+        <div style={{minHeight:"400px"}}>
+          {
+            dataSource && dataSource.length >0 &&
+            <div>
+              <Table className="dataTable" columns={columns} dataSource={dataSource} pagination={false}/>
+            </div>
+          }
+          {
+            dataSource === null || (dataSource && dataSource.length === 0) &&
+            <DataEmpty />
+          }
+        </div>
+      </Spin>
    </div>
  )
 }
--- a/src/forge/Server/detectionModal.jsx
+++ b/src/forge/Server/detectionModal.jsx
@ -2,13 +2,12 @@ import React, { useState , forwardRef, useEffect } from 'react';
 import { Modal , Form , Select } from 'antd';
 import axios from 'axios';

-function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
+function DetectionModal({form , visible , onCancel , onOk , projectsId, owner , relayCount , repeatId , repeatBranch }){
  const { getFieldDecorator, validateFields , setFieldsValue } = form;
  const [ check , setCheck ] =  useState(false);
  const [ branch , setBranch ] = useState("");
  const [ branchList , setBranchList ] = useState([]);

-
  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 18 },
@ -40,7 +39,32 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
      if(!error){
        setCheck(true);
        setBranch(values.branch);
-        // onOk();
+        if(repeatId){
+          // 重新扫描
+          const url = `/traces/${owner}/${projectsId}/reload_task.json`;
+          axios.get(url,{
+            params:{
+              project_id:repeatId,
+              branch_name:repeatBranch
+            }
+          }).then(result=>{
+            if(result){
+              onOk();
+            }
+            setCheck(false);
+          }).catch(error=>{})
+        }else{
+          // 新建分析
+          const url = `/traces/${owner}/${projectsId}/tasks.json`;
+          axios.post(url,{
+            branch_name:values.branch
+          }).then(result=>{
+            if(result){
+              onOk();
+            }
+            setCheck(false);
+          }).catch(error=>{})
+        }
      }
    })
  }
@ -54,7 +78,7 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
      footer={
        <div className="agreeBtn">
          <a onClick={onCancelFunc}>取消</a>
-          { !check && <a className={"agree btnhover"} onClick={onOkFunc}>开始检测</a> }
+          { !check && relayCount !== 0 && <a className={"agree btnhover"} onClick={onOkFunc}>开始检测</a> }
        </div>
      }
    >
@ -73,18 +97,18 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
            check ? 
            <p className="lastTimes">正在开启检测，请等待...</p>
            :
-            <p className="lastTimes">剩余扫描次数<span>5</span></p>
+            <p className="lastTimes">剩余扫描次数<span>{relayCount}</span></p>
          }
        </div>
        <div className="formDiv">
          <Form {...layout}>
            {
-              !check &&
+              !check && !repeatBranch && 
              <Form.Item label="检测分支" colon={false} labelAlign={"left"}>
                {getFieldDecorator("branch",{
                  rules:[{required:true,message:"请选择要检测的分支"}]
                })(
-                  <Select placeholder="请选择仓库分支" style={{width:"360px"}}>
+                  <Select placeholder="请选择仓库分支" showSearch style={{width:"360px"}}>
                    {
                      branchList && branchList.length >0 ?
                      branchList.map((i,k)=>{
@ -101,10 +125,10 @@ function DetectionModal({form , visible , onCancel , onOk , projectsId,owner }){
            }
            <div className="checkInfos">
              {
-                check && branch && 
+                (check && branch) || repeatBranch && 
                <div>
                  <span>检测分支</span>
-                  <p>{branch}</p>
+                  <p>{branch || repeatBranch}</p>
                </div>
              }
              <div>
--- a/src/forge/Server/index.scss
+++ b/src/forge/Server/index.scss
@ -229,7 +229,7 @@
    height: 22px;
    background-color: rgba(75, 75, 75, 0.1);
    border-radius:26px;
-    span{
+    span.percentline{
      position: absolute;
      left: 0px;
      top:0px;
@ -241,32 +241,41 @@
      color: rgba(51, 51, 51, 1);
    }
  }
+  .percentNum{
+    position: absolute;
+    height: 24px;
+    line-height: 24px;
+  }
  .operationBtns{
    display: flex;
    align-items: center;
    justify-content: center;
-    a{
+    a,span{
      margin:0px 14px;
      position: relative;
      color: rgba(70, 106, 255, 1);
      display: flex;
      align-items: center;
      height: 26px;
-      i{
-        width: 13px;
-      }
-      &::before{
-        position: absolute;
-        content: "";
-        width: 1px;
-        height: 12px;
-        top:7px;
-        background-color: rgba(213, 213, 213, 1);
-        left: -14px;
-      }
-      &:first-child::before{
-        display: none;
-      }
+    }
+    span{
+      color: rgba(197, 204, 225, 1)!important;
+      cursor: default;
+    }
+    a > i,span>i{
+      width: 13px;
+    }
+    a::before,span::before{
+      position: absolute;
+      content: "";
+      width: 1px;
+      height: 12px;
+      top:7px;
+      background-color: rgba(213, 213, 213, 1);
+      left: -14px;
+    }
+    a:first-child::before,span:first-child::before{
+      display: none;
    }
  }
 }