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";
import CodeSSH from './ssh/Index';

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);
        setNav("0");
        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 (
    <React.Fragment>
      {/* <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" &&
        <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>
      }
      {
        nav === "1" && <CodeSSH />
      }
    </React.Fragment>
  );
};