@devops-flow/devops-flow-pipeline-detail 0.0.37

package/es/components/PipelineGraph/PipelineDAG.d.ts

@@ -0,0 +1,53 @@
+import { NodeId } from './PipelineRunGraph';
+import { IJobComponent } from 'src/types/PipelineRun';
+export type StageID = string | number;
+export interface PayloadJob {
+    type: 'JOB';
+    stageId: StageID;
+    stageName: string;
+    job: IJobComponent;
+    switchManual: boolean;
+}
+export interface PayloadStagesConnector {
+    type: 'STAGE_CONNECTOR';
+    prevStageId: StageID;
+    nextStageId: StageID;
+}
+type DagNodePayload = PayloadJob | PayloadStagesConnector;
+export interface DagNode<T extends DagNodePayload = DagNodePayload> {
+    id: NodeId;
+    dependsOn: NodeId[];
+    payload: T;
+}
+export interface DagEdge {
+    from: NodeId;
+    to: NodeId;
+}
+export interface DagNodesByStage {
+    stageId: string | number;
+    nodes: Array<DagNode<PayloadJob>>;
+}
+/**
+ * 新版画法，按PD要求，不同 Stage 之间头尾 job 的连接不汇聚到一点，而是改为所有节点之间都两两直接相连。
+ * 1.老流水线(非PAC)运行页数据，2.用户YAML原依赖（模板图）, 3.PAC运行页老数据（2023.5前的）
+ * 3种都使用这个方法连接节点，转成新的。
+ * 之后PAC的新运行数据是后端连接过的，不过统一处理对其无影响。
+ */
+export declare function connectJobToJobInAllStages(dagNodesByStage: DagNodesByStage[]): any;
+/**
+ * 原版的画法，不同stage内的job不直接相连，统一汇聚到 stage connector 点。
+ * 这个方案PD不再采用了，后端新返回的数据也无法支持。
+ */
+export declare function getStagesConnectNodes(dagNodesByStage: DagNodesByStage[]): DagNode[];
+export declare class PipelineDAG {
+    private readonly nodes;
+    readonly edges: DagEdge[];
+    constructor(nodes: DagNode[]);
+    private getMaxDepths;
+    private getAllEdges;
+    getNodeMaxDepth(nodeId: number): number;
+    getNodesAtAllDepths(): NodeId[][];
+    getNodePre(nodeId: NodeId): NodeId[];
+    getNodeAfter(nodeId: NodeId): NodeId[];
+}
+export {};

package/es/components/PipelineGraph/PipelineDAG.js

@@ -0,0 +1,174 @@
+// eslint-disable-next-line import/no-cycle
+
+/**
+ * 新版画法，按PD要求，不同 Stage 之间头尾 job 的连接不汇聚到一点，而是改为所有节点之间都两两直接相连。
+ * 1.老流水线(非PAC)运行页数据，2.用户YAML原依赖（模板图）, 3.PAC运行页老数据（2023.5前的）
+ * 3种都使用这个方法连接节点，转成新的。
+ * 之后PAC的新运行数据是后端连接过的，不过统一处理对其无影响。
+ */
+export function connectJobToJobInAllStages(dagNodesByStage) {
+  var allNodes = dagNodesByStage.flatMap(function (stage, index) {
+    // 在每个 stage， 把前一个stage tail 结点都加到当前 stage heads 依赖中
+    var nodes = stage.nodes;
+    var prevStage = dagNodesByStage[index - 1];
+    if (prevStage) {
+      var dependsOns = prevStage.nodes.flatMap(function (v) {
+        return v.dependsOn;
+      });
+      var tailNodes = prevStage.nodes.filter(function (n) {
+        return !dependsOns.includes(n.id);
+      });
+
+      // 当前 stage 的heads，都依赖前一个 stage 所有的 tails
+      var headNodes = nodes.filter(function (n) {
+        return !n.dependsOn.length;
+      });
+      headNodes.forEach(function (node) {
+        node.dependsOn = tailNodes.map(function (v) {
+          return v.id;
+        });
+      });
+    }
+    return stage.nodes;
+  });
+  return allNodes;
+}
+
+/**
+ * 原版的画法，不同stage内的job不直接相连，统一汇聚到 stage connector 点。
+ * 这个方案PD不再采用了，后端新返回的数据也无法支持。
+ */
+
+export function getStagesConnectNodes(dagNodesByStage) {
+  var connectorNodes = [];
+  var allJobNodes = dagNodesByStage.flatMap(function (stage, index) {
+    var stageId = stage.stageId,
+      nodes = stage.nodes;
+    var isLast = index === dagNodesByStage.length - 1;
+    var prevStage = dagNodesByStage[index - 1];
+    var nextStage = dagNodesByStage[index + 1];
+    var stagesConnectorNode;
+
+    // 每个 stage 生成后面的连接点
+    if (!isLast) {
+      var stagesConnectorNodeId = "@StagesConnector-@" + stageId + "--@" + nextStage.stageId;
+      stagesConnectorNode = {
+        id: stagesConnectorNodeId,
+        payload: {
+          type: 'STAGE_CONNECTOR',
+          prevStageId: stageId,
+          nextStageId: nextStage.stageId
+        },
+        // 在下面修改
+        dependsOn: []
+      };
+      connectorNodes.push(stagesConnectorNode);
+    }
+    if (nextStage) {
+      // 找出没有被依赖的节点, 加入stagesConnectNode的依赖
+      var dependsOns = nodes.flatMap(function (v) {
+        return v.dependsOn;
+      });
+      var tailNodes = nodes.filter(function (n) {
+        return !dependsOns.includes(n.id);
+      });
+      stagesConnectorNode.dependsOn = tailNodes.map(function (n) {
+        return n.id;
+      });
+    }
+    if (prevStage) {
+      var prevConnector = connectorNodes[index - 1];
+      // 没有依赖的，都将 stageConnector 为依赖
+      var headNodes = nodes.filter(function (n) {
+        return !n.dependsOn.length;
+      });
+      headNodes.forEach(function (node) {
+        node.dependsOn = [prevConnector.id];
+      });
+    }
+    return nodes;
+  });
+  return [].concat(allJobNodes, connectorNodes);
+}
+export var PipelineDAG = /*#__PURE__*/function () {
+  function PipelineDAG(nodes) {
+    // 只需要依赖信息，不需要job信息
+    this.nodes = void 0;
+    this.edges = void 0;
+    var dagNodes = nodes.map(function (n) {
+      return {
+        id: n.id,
+        dependsOn: [].concat(n.dependsOn || [])
+      };
+    });
+    this.getMaxDepths(dagNodes);
+    this.nodes = dagNodes;
+    this.edges = this.getAllEdges();
+  }
+  var _proto = PipelineDAG.prototype;
+  _proto.getMaxDepths = function getMaxDepths(nodes) {
+    function getDepth(n) {
+      var _n$dependsOn;
+      if (n.maxDepth) {
+        return n.maxDepth;
+      }
+      if (!((_n$dependsOn = n.dependsOn) !== null && _n$dependsOn !== void 0 && _n$dependsOn.length)) {
+        n.maxDepth = 0;
+        return 0;
+      }
+      var dependNodes = nodes.filter(function (v) {
+        return n.dependsOn.includes(v.id);
+      });
+      var maxDepth = 1 + Math.max.apply(Math, dependNodes.map(function (n) {
+        return getDepth(n);
+      }));
+      n.maxDepth = maxDepth;
+      return maxDepth;
+    }
+    nodes.forEach(function (n) {
+      return getDepth(n);
+    });
+  };
+  _proto.getAllEdges = function getAllEdges() {
+    var edges = this.nodes.flatMap(function (node) {
+      return node.dependsOn.map(function (dep) {
+        return {
+          from: dep,
+          to: node.id
+        };
+      });
+    });
+    return edges;
+  };
+  _proto.getNodeMaxDepth = function getNodeMaxDepth(nodeId) {
+    return this.nodes.find(function (node) {
+      return node.id === nodeId;
+    }).maxDepth;
+  };
+  _proto.getNodesAtAllDepths = function getNodesAtAllDepths() {
+    var depth = [];
+    this.nodes.forEach(function (node) {
+      if (depth[node.maxDepth]) {
+        depth[node.maxDepth].push(node.id);
+      } else {
+        depth[node.maxDepth] = [node.id];
+      }
+    });
+    return depth;
+  };
+  _proto.getNodePre = function getNodePre(nodeId) {
+    return this.nodes.find(function (n) {
+      return n.id === nodeId;
+    }) && this.nodes.find(function (n) {
+      return n.id === nodeId;
+    }).dependsOn;
+  };
+  _proto.getNodeAfter = function getNodeAfter(nodeId) {
+    return this.nodes.filter(function (v) {
+      return v.dependsOn.includes(nodeId);
+    }).map(function (n) {
+      return n.id;
+    });
+  };
+  return PipelineDAG;
+}();

package/es/components/PipelineGraph/PipelineJobs.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 根据 graph 数据，渲染实际的 job, svg path 等画布元素
+ *
+ *
+ */
+export declare const PipelineJobs: any;
+export default PipelineJobs;

package/es/components/PipelineGraph/PipelineJobs.js

@@ -0,0 +1,310 @@
+// /* eslint-disable */
+import React, { useLayoutEffect, useCallback, useMemo, memo } from 'react';
+import { CanvasEntity } from "./PipelineCanvas";
+import { clog } from "../../utils/debug";
+import { PipelineRunGraph } from "./PipelineRunGraph";
+import FlowJobGraphNode from "../common/teambition/flow-job-new/FlowJobGraphNode";
+import styles from "./PipelineJobs.module.scss";
+import {
+// getStagesConnectNodes,
+
+connectJobToJobInAllStages } from "./PipelineDAG";
+import { transformOldPipelineRun } from "./transformOldPipelineRun";
+import { SOURCES_WIDTH } from "./sizes";
+/**
+ * 根据 graph 数据，渲染实际的 job, svg path 等画布元素
+ *
+ *
+ */
+export var PipelineJobs = /*#__PURE__*/React.memo(function (props) {
+  var _stageRects;
+  var onRefresh = props.onRefresh,
+    pipelineId = props.pipelineId,
+    instance = props.instance,
+    onOpenRuntimeMenu = props.onOpenRuntimeMenu,
+    graphRef = props.graphRef,
+    isAdmin = props.isAdmin;
+  var stages = instance.stages;
+  clog('-- <Board/>', 'render');
+
+  // 初始化 graph
+  /**  所有的节点，包括stage连接节点 */
+  var allNodes = useMemo(function () {
+    if (stages) {
+      var isNew = (instance === null || instance === void 0 ? void 0 : instance.pipelineType) === 'PIPELINEASCODE';
+      var jobsInAllStages;
+      if (!isNew) {
+        jobsInAllStages = transformOldPipelineRun(instance);
+      } else {
+        // todo 跨 stage 依赖
+        var stageIds = instance.stageGroup.flat();
+        jobsInAllStages = stageIds.map(function (stageId) {
+          var stageName = stages[stageId].name;
+          var jobsInThisStage = stages[stageId].components.map(function (job) {
+            var depsObj = JSON.parse(job.deps || '[]');
+            return {
+              id: job.jobSign,
+              dependsOn: depsObj,
+              payload: {
+                type: 'JOB',
+                stageId: stageId,
+                stageName: stageName,
+                job: job
+              }
+            };
+          });
+          return {
+            stageId: stageId,
+            nodes: jobsInThisStage
+          };
+        });
+      }
+      var _allNodes = connectJobToJobInAllStages(jobsInAllStages);
+      /**  所有的节点，包括stage连接节点 */
+      //  getStagesConnectNodes(jobsInAllStages);
+      if (!graphRef.current) {
+        var _stageIds = jobsInAllStages.map(function (v) {
+          return v.stageId;
+        });
+        var current = new PipelineRunGraph(_allNodes, _stageIds, {
+          originX: SOURCES_WIDTH + 32,
+          // padding32
+          originY: 0,
+          vGap: 24,
+          hGap: 56
+        });
+        graphRef.current = current;
+        clog('inited', graphRef.current);
+        clog('Board setPipeline Done');
+      }
+      return _allNodes;
+    }
+  }, [stages]);
+  var _React$useState = React.useState({}),
+    graphState = _React$useState[0],
+    setGraphState = _React$useState[1];
+  var _React$useState2 = React.useState(null),
+    activeItems = _React$useState2[0],
+    setActiveItems = _React$useState2[1];
+  useLayoutEffect(function () {
+    clog('Board *layoutEffect');
+    if (graphRef.current) {
+      var graph = graphRef.current.getGraph();
+      if (graph !== graphState) {
+        clog('>> setGraph', graph);
+        setGraphState(graph);
+        props.setRenderSign();
+        clog('<< setGraph end');
+      }
+    }
+  });
+  var onCardHover = useCallback(function (nodeId) {
+    var nodes = graphRef.current.getHighlightNodesAndEdgesById(nodeId);
+    setActiveItems(nodes);
+  }, []);
+  var onCardLeave = useCallback(function () {
+    setActiveItems(null);
+  }, []);
+  var resizeObserver = useMemo(function () {
+    return new window.ResizeObserver(function (entries) {
+      clog('observe', entries);
+      entries.forEach(function (rzoEntry) {
+        var id = rzoEntry.target.dataset.jobId;
+        var rect = rzoEntry.contentRect;
+        graphRef.current.setUIRectSize(id, function (draft) {
+          draft.height = Math.ceil(rect.height);
+          draft.width = Math.ceil(rect.width);
+          draft.preConnector = {
+            x: 0,
+            y: 30
+          };
+          draft.afterConnector = {
+            x: rect.width,
+            y: 30
+          };
+        });
+      });
+      var graph = graphRef.current.getGraph();
+      if (graph !== graphState) {
+        setGraphState(graph);
+      }
+      // clog(cptInsName, 'resizeObserver set');
+    });
+  }, []);
+  var stageRects;
+  try {
+    stageRects = graphRef.current.getStageRects();
+  } catch (e) {
+    //
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.PipelineJobs
+  }, stages && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
+    className: styles.normal,
+    opacity: activeItems ? 0.3 : 1
+    // todo svg size
+    ,
+    viewBox: '-10000 -10000 20000 20000'
+  }, (_stageRects = stageRects) === null || _stageRects === void 0 ? void 0 : _stageRects.map(function (stageRect, i, ary) {
+    var isLastStage = i === ary.length - 1;
+    // const stageBakground = <rect fill="var(--color-Brand3-2, #E9EDF0)" dbg-name="stageBackground" x={stageRect.outerRect.left} y={-10000} width={stageRect.outerRect.width} height="20000" />;
+    var stageBakground = null;
+    if (!isLastStage) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, stageBakground, /*#__PURE__*/React.createElement("path", {
+        style: {
+          // 保证 1px 的线在1x屏幕上像素精准
+          transform: window.devicePixelRatio === 1 ? 'translate(-0.5px, -0.5px)' : 'none'
+        },
+        key: i,
+        fill: "none",
+        stroke: "var(--color-Brand3-3, #DAE0E5)",
+        strokeDasharray: "7 3",
+        strokeWidth: 1,
+        d: "M" + stageRect.outerRect.right + ",-10000 V20000"
+      }));
+    } else {
+      return stageBakground;
+    }
+  }), (graphState === null || graphState === void 0 ? void 0 : graphState.edges) && Object.entries(graphState.edges).map(function (_ref) {
+    var id = _ref[0],
+      pathd = _ref[1];
+    return /*#__PURE__*/React.createElement("g", {
+      key: id,
+      style: {
+        // 保证 1px 的线在1x屏幕上像素精准
+        transform: window.devicePixelRatio === 1 ? 'translate(-0.5px, -0.5px)' : 'none'
+      }
+    }, /*#__PURE__*/React.createElement("path", {
+      id: id,
+      fill: "none",
+      stroke: "#f7f7f7",
+      strokeWidth: 1,
+      d: pathd
+    }), /*#__PURE__*/React.createElement("path", {
+      key: id,
+      id: id,
+      fill: "none",
+      stroke: "#cecece",
+      strokeWidth: 1,
+      d: pathd
+    }));
+  })), /*#__PURE__*/React.createElement("svg", {
+    // todo svg size
+    width: 5000,
+    height: 5000,
+    style: {
+      pointerEvents: 'none',
+      position: 'absolute',
+      top: 0,
+      left: 0
+    }
+  }, (graphState === null || graphState === void 0 ? void 0 : graphState.edges) && Object.entries(graphState.edges).map(function (_ref2) {
+    var _activeItems$edgeIds;
+    var id = _ref2[0],
+      pathd = _ref2[1];
+    var isActive = activeItems === null || activeItems === void 0 ? void 0 : (_activeItems$edgeIds = activeItems.edgeIds) === null || _activeItems$edgeIds === void 0 ? void 0 : _activeItems$edgeIds.includes(id);
+    return /*#__PURE__*/React.createElement("g", {
+      key: id,
+      style: {
+        opacity: isActive ? 1 : 0,
+        transition: isActive ? 'opacity 0.2s ease' : 'opacity 0.2s ease-in'
+      }
+    }, /*#__PURE__*/React.createElement("path", {
+      style: {
+        animation: 'none'
+      },
+      id: id,
+      fill: "none",
+      strokeWidth: 2,
+      stroke: "#f7f7f7",
+      d: pathd
+    }), /*#__PURE__*/React.createElement("path", {
+      style: {
+        animation: 'none'
+      },
+      key: id,
+      id: id,
+      fill: "none",
+      strokeWidth: 2,
+      stroke: "#90CDF5",
+      d: pathd
+    }));
+  })), allNodes === null || allNodes === void 0 ? void 0 : allNodes.map(function (node) {
+    if (node.payload.type === 'STAGE_CONNECTOR') {
+      var _graphState$rects;
+      var pos = (graphState === null || graphState === void 0 ? void 0 : (_graphState$rects = graphState.rects) === null || _graphState$rects === void 0 ? void 0 : _graphState$rects[node.id]) || {};
+      return /*#__PURE__*/React.createElement(CanvasEntity, {
+        x: pos.x,
+        y: pos.y
+      }, /*#__PURE__*/React.createElement(StageConnector, {
+        id: node.id,
+        graphRef: graphRef,
+        key: node.id
+      }));
+    } else {
+      var _graphState$rects2;
+      // 是 JOB
+
+      // const job = flowInstVo.stages[
+      //   node.payload.stageId
+      // ].components.find((job) => job.jobSign === node.id);
+      var job = node.payload.job;
+      var highlightStatus = function () {
+        if (!activeItems) return 'normal';
+        if (activeItems.nodeIds.includes(node.id)) return 'active';
+        return 'dimmed';
+      }();
+      var _pos = (graphState === null || graphState === void 0 ? void 0 : (_graphState$rects2 = graphState.rects) === null || _graphState$rects2 === void 0 ? void 0 : _graphState$rects2[node.id]) || {};
+      return /*#__PURE__*/React.createElement(CanvasEntity, {
+        x: _pos.x,
+        y: _pos.y
+      }, /*#__PURE__*/React.createElement(FlowJobGraphNode, {
+        onCardHover: onCardHover,
+        onCardLeave: onCardLeave,
+        graph: graphRef,
+        highlightStatus: highlightStatus,
+        key: node.id,
+        job: job,
+        isAdmin: isAdmin,
+        status: instance.status,
+        onOpenRuntimeMenu: onOpenRuntimeMenu,
+        resizeObserver: resizeObserver,
+        pipelineId: pipelineId,
+        onRefresh: onRefresh,
+        instance: instance,
+        switchManual: node.payload.switchManual
+      }));
+    }
+  })));
+});
+var StageConnector = /*#__PURE__*/memo(function (_ref3) {
+  var graphRef = _ref3.graphRef,
+    id = _ref3.id;
+  useLayoutEffect(function () {
+    graphRef.current.setUIRectSize(id, function (draft) {
+      draft.width = 1;
+      draft.height = 32;
+      // 和第一行卡片的连接点对齐
+      draft.preConnector = {
+        x: 0,
+        y: 30
+      };
+      draft.afterConnector = {
+        x: 1,
+        y: 30
+      };
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 8,
+      height: 8,
+      position: 'absolute',
+      top: 26,
+      left: -3.5,
+      borderRadius: '50%',
+      backgroundColor: 'var(--color-line1-2, #dbdbdb)'
+    }
+  });
+});
+export default PipelineJobs;

package/es/components/PipelineGraph/PipelineJobs.module.scss

@@ -0,0 +1,16 @@
+.PipelineJobs {
+  svg.normal {
+    background-color: transparent;
+    pointer-events: none;
+    position: absolute;
+    width: 20000px;
+    height: 20000px;
+    top: -10000px;
+    left: -10000px;
+    z-index: -1;
+    transition: opacity 0.2s ease-out;
+  }
+  path {
+    // transition: d 0.2s ease-out;
+  }
+}

package/es/components/PipelineGraph/PipelineRunGraph.d.ts

@@ -0,0 +1,68 @@
+import { DagNode, StageID } from './PipelineDAG';
+import { Rect } from './Rect';
+export type NodeId = number | string;
+type EdgeID = string;
+export interface Point2d {
+    x: number;
+    y: number;
+}
+interface RectSize {
+    width: number;
+    height: number;
+}
+interface UIRect extends RectSize {
+    preConnector: Point2d;
+    afterConnector: Point2d;
+}
+export interface Graph {
+    edges: Record<EdgeID, string>;
+    rects: Record<NodeId, Point2d>;
+    uiRects: Record<NodeId, UIRect>;
+}
+export interface RectWithPos extends Point2d, RectSize {
+    bottom: number;
+    right: number;
+}
+export interface StageRectItem {
+    stageId: string;
+    stageName: string;
+    innerRect: Rect;
+    outerRect: Rect;
+}
+export interface PipelineGraphConfigs {
+    vGap: number;
+    hGap: number;
+    originX: number;
+    originY: number;
+}
+/**
+ * 提供节点和连线数据，不渲染实际的 svg 元素
+ * 编辑/运行共用。潜在缩略图？
+ */
+export declare class PipelineRunGraph {
+    static readonly vGap = 10;
+    static readonly hGap = 48;
+    readonly graphConfigs: PipelineGraphConfigs;
+    private readonly pipelineDAG;
+    private readonly columnStacks;
+    private readonly stageIds;
+    readonly nodes: DagNode[];
+    private nodePositions;
+    uiRects: Record<NodeId, UIRect>;
+    private nodeEdges;
+    private graph;
+    constructor(nodes: DagNode[], stageIds: StageID[], graphConfigs?: Partial<PipelineGraphConfigs>);
+    private getNodesPosition;
+    private getEdgesSvgPath;
+    private getAdjacentPathSegment;
+    getGraph(): Graph;
+    getStageRects(): StageRectItem[];
+    private getColumnStack;
+    getHighlightNodesAndEdgesById(nodeId: NodeId): {
+        edgeIds: EdgeID[];
+        nodeIds: NodeId[];
+    };
+    private buildEdgeId;
+    setUIRectSize(nodeId: NodeId, mutate: (draft: UIRect) => void): void;
+}
+export {};