forgeplus-react/src/forge/DevOps/opsDetail.jsx

import React, { useEffect, useState, useRef, useContext } from "react";
import "./ops.scss";
import { FlexAJ, AlignCenter } from "../Component/layout";
import { Tags } from "../Component/OpsStatus";
import SplitPane from "react-split-pane";
import LeftPanel from "./OpsDetailLeftpanel";
import RightPanel from "./OpsDetailRightpanel";
import axios from "axios";
import { Spin } from "antd";
import { Link } from "react-router-dom";

export default (props) => {
  const [data, setData] = useState(undefined);
  const [stageN, setStageN] = useState(undefined);
  const [stepN, setStepN] = useState(undefined);
  const [rightSpin, setRightSpin] = useState(false);
  const [spinning, setSpinning] = useState(true);

  let projectId = props.match.params.projectId;
  let owner = props.match.params.owner;
  let opsId = props.match.params.opsId;

  useEffect(() => {
    if (opsId && projectId) {
      Init();
    }
  }, [opsId]);

  function Init() {
    const url = `/${owner}/${projectId}/builds/${opsId}.json`;
    axios.get(url).then((result) => {
      if (result && result.data) {
        setSpinning(false);
        setData(result.data);
      }
    })
    .catch((error) => {
      console.log(error);
      setSpinning(false);
    });
  }

  // 重新构建
  function repeatSet(e,type,number) {
    if(type==="repeat"){
      // 重新构建
      const url = `/${owner}/${projectId}/builds/${number}/restart.json`;
      axios.post(url).then((result) => {
        if (result && result.data) {
          props.showNotification("工作流正在重新构建！");
          props.history.push(`/projects/${owner}/${projectId}/devops/${result.data.number}/detail`);
        }
      })
      .catch((error) => {
        console.log(error);
      });
    }else{
      // 撤销构建
      const url = `/${owner}/${projectId}/builds/${number}/stop.json`;
      axios.delete(url).then((result) => {
        if (result) {
          props.showNotification("撤销构建成功！");
          Init();
        }
      })
      .catch((error) => {
        console.log(error);
      });
    }
  }

  function chooseSteps(pre,sub){
    if(pre && sub){
      setStepN(sub);
      setStageN(pre);
      setRightSpin(true);
    }
  }
  return (
    <Spin spinning={spinning}>
      <div className="opsDetailPanel">
        <FlexAJ className="opsInfos">
          <AlignCenter>
            <span>#{data && data.number}</span>
            <span className="ml10">{data && data.message}</span>
            {Tags(`${data && data.status}`)}
          </AlignCenter>
          <Link
            style={{ color: "#ddd" }}
            to={`/projects/${owner}/${projectId}/devops/list`}
          >
            <i className="iconfont icon-yiguanbi font-15 mr5"></i>退出
          </Link>
        </FlexAJ>
        <div className="opsSection">
          <SplitPane
            className="outer-split-pane"
            split="vertical"
            minSize={468}
            maxSize={-350}
            defaultSize="40%"
          >
            <section className="leftSection">
              <LeftPanel data={data} repeatSet={repeatSet} chooseSteps={chooseSteps} />
            </section>
            <section className="rightSection">
              <RightPanel data={data} rightSpin={rightSpin} stepN={stepN} stageN={stageN} owner={owner} projectId={projectId} opsId={opsId} />
            </section>
          </SplitPane>
        </div>
      </div>
    </Spin>
  );
};