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

import React, { useEffect, useState } from "react";
import { FlexAJ, Blueline, AlignCenter } from "../Component/layout";
import styled from "styled-components";
import { Menu, Popconfirm } from "antd";
import { TagsLine } from "../Component/OpsStatus";
import { Time } from "../Utils/Time";
import { truncateCommitId } from "../common/util";
import { getImageUrl } from 'educoder';

const SubMenu = Menu.SubMenu;
const Img = styled.img`
   {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
  }
`;
export default ({ data, repeatSet , chooseSteps }) => {
  const [tamp, setTamp] = useState(undefined);
  const [sha, setSha] = useState(undefined);
  useEffect(() => {
    if (data && data.started) {
      let t = parseInt(data.started) * 1000;
      let time = Time(t);
      setTamp(time);
    }
    if (data && data.after) {
      setSha(truncateCommitId(data.after));
    }
  }, [data]);

  function renderStatusBtn() {
    let status = data && data.status;
    let number = data && data.number;
    if (status === "failure" || status === "error" || status === "success") {
      return "";
    }else if(status === "killed"){
      return(
        <Popconfirm
          title="确认重新构建？"
          onConfirm={(e) => repeatSet(e,'repeat',number)}
          onCancel={(e)=>{e.stopPropagation()}}
          cancelText="取消"
          okText="确定"
        >
          <Blueline onClick={(e)=>{e.stopPropagation()}}>重新构建</Blueline>
        </Popconfirm>
      );
    } else {
      return (
        <Popconfirm
          title="确认撤销构建？"
          onConfirm={(e) => repeatSet(e,'cancel',number)}
          onCancel={(e)=>{e.stopPropagation()}}
          cancelText="取消"
          okText="确定"
        >
          <Blueline onClick={(e)=>{e.stopPropagation()}}>撤销构建</Blueline>
        </Popconfirm>
      );
    }
  }

  function clickSub(e,stageN,stepN){
    chooseSteps(stageN,stepN);
  }

  return (
    <div>
      <FlexAJ className="leftheader">
        <AlignCenter>
          <Img src={getImageUrl(`/${data && data.author && data.author.image_url}`)} />
          {data && data.started &&
            <span className="nest">
              开始时间：<span> {data.started}</span>
            </span>
          }
          {
            data && data.duration_time &&
            <span className="nest">
              运行时间：<span>{data.duration_time}</span>
            </span>
          }
        </AlignCenter>
        {renderStatusBtn()}
      </FlexAJ>
      <div className="leftMainContent">
        <AlignCenter className="contentBranch">
          <i className="iconfont icon-fenzhi1"></i>
          <span>分支：</span>
          <span className="branchname">{data && data.branch_target}</span>
          <span className="branchsha">{data && truncateCommitId(data.build_after_sha)}</span>
        </AlignCenter>
      </div>
      <Menu mode="inline" className="leftMenu" defaultOpenKeys={[`0`]} defaultSelectedKeys={[`0`]}>
        {data && data.stages ? data.stages.map((item, key) => {
            return item.steps && item.steps.length > 0 ?
              <SubMenu
                title={
                  <div>
                    <i className="iconfont icon-gongzuoliu font-14 mr4"></i>
                    <span>{item.name}</span>
                  </div>
                }
                key={`${key}`}
              >
                {item.steps.map((i, k) => {
                  return (
                    <Menu.Item key={`${k}`} onClick={(e)=>clickSub(e,item.number,i.id)}>
                      <FlexAJ>
                        <span>
                          {i.name} {i.status ? TagsLine(i.status) : ""}
                        </span>
                        <span>{i.duration_time}</span>
                      </FlexAJ>
                    </Menu.Item>
                  );
                })}
              </SubMenu>
            : "";
          })
        : ""}
      </Menu>
    </div>
  );
};