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

import React, { useState, useEffect } from "react";
import { Spin , Menu } from "antd";
import { FlexAJ, AlignCenter } from "../Component/layout";
import axios from "axios";

export default ({
  data,
  stepN,
  stageN,
  projectId,
  owner,
  opsId,
  rightSpin,
}) => {
  const [coders, setCoders] = useState(undefined);
  const [empty, setEmpty] = useState(false);
  const [spining, setSpining] = useState(true);
  const [stage, setStage] = useState(undefined);
  const [step, setStep] = useState(undefined);
  const [nav, setNav] = useState("0");

  useEffect(() => {
    setSpining(rightSpin);
  }, [rightSpin]);

  useEffect(() => {
    if (data) {
      let stages = data.stages;
      if (stages && stages.length > 0) {
        let pre = stageN
          ? stages.filter((item) => item.number === stageN)[0]
          : stages[0];
        setStage(pre);
        let p = pre && pre.steps;
        let sub = stepN
          ? p && p.length > 0 && p.filter((item) => item.id === stepN)[0]
          : p[0];

        setStep(sub);
        if (sub && sub.status !== "skipped") {
          getStep(pre.number, sub.number);
        }
        // 如果状态是skipped就不用去调用接口查询对应的out信息了
        if(sub.status === "skipped"){
          setCoders(undefined);
          setEmpty(true);
          setSpining(false);
        }
      } else {
        setSpining(false);
      }
    }
  }, [data, stageN, stepN]);

  function getStep(stageN, stepN) {
    if (stageN && stepN) {
      const url = `/${owner}/${projectId}/builds/${opsId}/logs/${stageN}/${stepN}.json`;
      axios.get(url).then((result) => {
        if (result) {
          setCoders(result.data);
          setSpining(false);
        }
      })
      .catch((error) => {
        console.log(error);
      });
    }
  }
  return (
    <Spin spinning={spining}>
      {/* <Menu className="devopsNav" onClick={(e)=>{setNav(e.key)}} selectedKeys={[nav]} mode="horizontal">
        <Menu.Item key={'0'} value="0">文件</Menu.Item>
        <Menu.Item key={'1'} value="1">命令行</Menu.Item>
      </Menu> */}
      {
        nav === "0" &&
        <div className="rightMainContent">
          {data && data.status !== "error" ? (
            <div>
              <FlexAJ className="items">
                <span>{step && step.name}</span>
                <AlignCenter>
                  {step && step.duration_time}
                  <i className="iconfont icon-sanjiaoxing-down"></i>
                </AlignCenter>
              </FlexAJ>
              <div>
                {coders && coders.length > 0 ? (
                  coders.map((item, key) => {
                    return (
                      <div className="opsDetailOut">
                        <span>{key + 1}</span>
                        <p>{item.out}</p>
                      </div>
                    );
                  })
                ) : empty ? (
                  <div className="opsDetailOut">
                    <span>1</span>
                    <p>
                      {stage && stage.name} – {step && step.name}: Skipped
                    </p>
                  </div>
                ) : (
                  ""
                )}
              </div>
            </div>
          ) : (
            <div style={{ color: "red" }}>error:{data && data.error}</div>
          )}
        </div>
      }
      
    </Spin>
  );
};