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

import React, { useState, useEffect } from "react";
import { Spin } 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);
  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}>
      <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>
  );
};