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

package/es/components/dashboardNav/index.scss

@@ -0,0 +1,305 @@
+$PREFIX: pipeline-sidebar;
+
+@mixin empty_item {
+  max-height: 32px;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+  margin-left: 47px;
+  align-items: center;
+  line-height: 32px;
+  color: var(--color-brand3-5, rgba(177,184,191,1));
+  > * {
+    flex-shrink: 0;
+  }
+  .search-name {
+    display: inline-block;
+    max-width: 50px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+@include block($PREFIX) {
+  @include element(group) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    overflow: hidden;
+    height: 32px;
+
+    &_title {
+      flex: 1;
+      color: var(--color-text1-3, #575757);
+      word-break: keep-all;
+    }
+
+    &_btns {
+      min-width: max-content;
+      .teamix-iconsearch {
+        .next-input input {
+          margin-left: 8px;
+        }
+        span.next-input-inner.next-after {
+          display: none;
+        }
+      }
+      .#{$PREFIX}-search-group {
+        .next-input-group.next-search-left {
+          background-color: var(--color-white, #fff);
+          border-color: transparent;
+        }
+        transform: translateY(-1px);
+        button.teamix-iconsearch-icon {
+          width: 24px !important;
+          height: 24px;
+        }
+      }
+      .create-group-btn {
+        width: 20px;
+        margin-left: 6px;
+        margin-top: -3px;
+      }
+      .teamix-iconsearch-fold {
+        width: 0 !important;
+      }
+    }
+
+    &-container {
+      width: 200px;
+      padding: 8px;
+      min-height: 124px;
+      .tb-common-sidebar-main-group {
+        margin-top: 0;
+      }
+      .pipeline-sidebar__group {
+        margin-bottom: 8px;
+        &_title {
+          color: var(--color-fill1-6, #8b8b8b);
+        }
+        &_btns {
+          .pipeline-sidebar-search-group-balloon button,
+          .create-group-btn {
+            .teamix-icon svg {
+              fill: var(--color-fill1-6, #8b8b8b);
+            }
+            &:hover {
+              .teamix-icon svg {
+                fill: var(--color-brand1-6, #1b9aee);
+              }
+            }
+          }
+        }
+      }
+      .#{$PREFIX}-search-group-balloon {
+        .next-input-group.next-search-left {
+          background-color: var(--color-brand3-1, rgba(242,245,247,1));
+          border-color: transparent;
+        }
+      }
+    }
+    &-list-container {
+      max-height: 300px;
+      overflow: hidden auto;
+      margin-right: -8px;
+      padding-right: 8px;
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background: var(--color-line1-3, #cecece);
+      }
+      .empty-group-item:first-child {
+        display: flex;
+      }
+      .empty-group-item {
+        display: none;
+        @include empty_item();
+        margin-left: 24px;
+        font-size: 13px;
+        margin-top: 10px;
+        .create-group-btn {
+          &[disabled] {
+            transform: translateY(-1px);
+          }
+          font-size: 13px;
+        }
+      }
+      .is-group-item {
+        width: 100%;
+        margin: 8px 0 0;
+        .tb-common-sidebar-main-item-jsx {
+          margin-left: 8px;
+        }
+      }
+    }
+
+    @include element(item) {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &__ops {
+        position: relative;
+        .next-rating-grade-low {
+          .next-rating-overlay {
+            width: 4px !important;
+          }
+        }
+      }
+
+      @include element(text) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &:hover &__ops--more {
+        position: static;
+        visibility: visible;
+      }
+
+      &:hover,
+      &.active {
+        font-family: PingFangSC-Medium;
+      }
+
+      &:hover &__ops {
+        display: flex;
+        position: relative;
+        visibility: visible;
+      }
+
+      @include element(ops) {
+        align-items: center;
+
+        &.not-star {
+          position: absolute;
+          visibility: hidden;
+          transition: none;
+          right: 0;
+        }
+
+        @include modifier_1(more) {
+          display: inline-block;
+          position: absolute;
+          visibility: hidden;
+          transition: none;
+          left: calc(-100% - 8px);
+          justify-content: center;
+        }
+      }
+
+      @include element(popup) {
+        width: 180px;
+        background: var(--color-white, #fff);
+        cursor: pointer;
+      }
+    }
+  }
+  &-delete-group-item {
+    color: #e24e40;
+    &:hover .next-menu-item-inner {
+      color: #e24e40;
+    }
+  }
+}
+
+body.withAnnouncement {
+  .#{$PREFIX}-group-container-scroll {
+    max-height: calc(100vh - 448px);
+  }
+}
+.#{$PREFIX}-group-container-scroll {
+  div.is-group-item:first-child {
+    .tb-common-sidebar-main-item-jsx {
+      margin-left: 46px;
+    }
+  }
+  max-height: calc(100vh - 412px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin-right: -16px;
+  margin-bottom: -8px;
+  background: /* Shadow covers */
+    linear-gradient(var(--color-fill1-2, #f7f7f7) 30%, rgba(255,255,255,0)),
+    linear-gradient(rgba(255,255,255,0), var(--color-fill1-2, #f7f7f7) 70%) 0 100%,
+    /* Shadows */
+    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  /* Opera doesn't support this in the shorthand */
+  background-attachment: local, local, scroll, scroll;
+}
+.tb-common-sidebar {
+  .tb-common-sidebar-main-group {
+    .is-group-parent {
+      min-width: 32px;
+      max-width: 100%;
+      margin-bottom: 8px;
+      cursor: unset;
+      &:hover {
+        background-color: unset;
+        .tb-common-sidebar-main-item-name {
+          font-weight: 400;
+        }
+      }
+    }
+    .tb-common-sidebar-main-item {
+      &.searching,
+      &.creating {
+        .tb-common-sidebar-main-item-name {
+          margin-left: 38px;
+        }
+      }
+      &.searching:hover {
+        background-color: unset;
+      }
+    }
+  }
+  &[data-stick="false"] {
+    .empty-group-item {
+      display: none;
+    }
+  }
+  &[data-mini="true"] {
+    .pipeline-sidebar__group_btns {
+      width: 0;
+    }
+    .#{$PREFIX}-group-container-scroll {
+      display: none;
+    }
+    .tb-common-sidebar-main-item.is-group-parent {
+      &.group-item-active {
+        background-color: var(--color-brand1-2, #c5e8ff);
+        .tb-common-sidebar-main-item-icon {
+          color: var(--color-brand1-6, #1b9aee);
+        }
+      }
+    }
+  }
+  .empty-group-item {
+    @include empty_item();
+    .create-group-btn {
+      &[disabled] {
+        span {
+          height: 17px;
+        }
+      }
+    }
+  }
+  .system-pipelines-menu {
+    .tips-icon {
+      margin-left: 8px;
+      cursor: pointer;
+      color: var(--color-text1-7, #8b8b8b);
+    }
+  }
+  .tb-common-sidebar-extra-item-name {
+    width: 170px;
+  }
+}

package/es/components/dashboardNav/util.d.ts

@@ -0,0 +1 @@
+export declare function updateAdvance(source: any[], val: any, toggle: any, fn: any): () => void;

package/es/components/dashboardNav/util.js

@@ -0,0 +1,21 @@
+// eslint-disable-next-line import/prefer-default-export
+export function updateAdvance(source, val, toggle, fn) {
+  if (source === void 0) {
+    source = [];
+  }
+  var result = [].concat(source);
+  if (toggle) {
+    result.splice(result.indexOf(val), 1);
+  } else {
+    result.push(val);
+  }
+  fn([].concat(result));
+  return function () {
+    if (toggle) {
+      result.push(val);
+    } else {
+      result.splice(result.indexOf(val), 1);
+    }
+    fn([].concat(result));
+  };
+}

package/es/components/detailMain/build/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const Build: ({ loading: parentLoading, onBuildNumberChange, isStatusBarHidden, noPadding, onPipelineStatusChanged, ...props }: {
+    [x: string]: any;
+    loading: any;
+    onBuildNumberChange: any;
+    isStatusBarHidden?: boolean;
+    noPadding?: boolean;
+    onPipelineStatusChanged: any;
+}) => JSX.Element;
+export default Build;

package/es/components/detailMain/build/index.js

@@ -0,0 +1,134 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["loading", "onBuildNumberChange", "isStatusBarHidden", "noPadding", "onPipelineStatusChanged"];
+import React, { useState, useEffect } from "react";
+import exceed from "../../../utils/apimap";
+import { Loading, Result } from "@teamix/ui";
+import permissionUtil from "../../../utils/permissionUtil";
+import intl from "../../../locale";
+import Loadable from "../../../utils/loadable";
+var PipelineInstance = Loadable({
+  loader: function loader() {
+    return import("../../common/teambition/pipeline-instance");
+  }
+});
+var NewPipelineInstance = Loadable({
+  loader: function loader() {
+    return import("../../common/teambition/pipeline-instance-new");
+  }
+});
+var PERMISSION_PIPELINE_EXECUTE = "tb.flow.pipeline.run";
+var PERMISSION_PIPELINE_EDIT = "tb.flow.pipeline.edit";
+var Build = function Build(_ref) {
+  var parentLoading = _ref.loading,
+    onBuildNumberChange = _ref.onBuildNumberChange,
+    _ref$isStatusBarHidde = _ref.isStatusBarHidden,
+    isStatusBarHidden = _ref$isStatusBarHidde === void 0 ? false : _ref$isStatusBarHidde,
+    _ref$noPadding = _ref.noPadding,
+    noPadding = _ref$noPadding === void 0 ? false : _ref$noPadding,
+    onPipelineStatusChanged = _ref.onPipelineStatusChanged,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(false),
+    canExecutePipeline = _useState[0],
+    setCanExecutePipeline = _useState[1];
+  var _useState2 = useState(false),
+    canEditPipeline = _useState2[0],
+    setCanEditPipeline = _useState2[1];
+  var _useState3 = useState(),
+    isLatestInstance = _useState3[0],
+    setIsLatestInstance = _useState3[1];
+  var _useState4 = useState(),
+    errorCode = _useState4[0],
+    setErrorCode = _useState4[1];
+  var pipelineId = props.pipelineId,
+    buildNumber = props.buildNumber,
+    newInstance = props.newInstance,
+    type = props.type;
+  var _useState5 = useState(),
+    instance = _useState5[0],
+    setInstance = _useState5[1];
+  var _useState6 = useState(true),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var checkPipelinePermission = function checkPipelinePermission() {
+    permissionUtil.checkPermissionList([PERMISSION_PIPELINE_EXECUTE, PERMISSION_PIPELINE_EDIT], props.pipelineId, "pipeline", window.AK_GLOBAL.currentUser.workid).then(function (data) {
+      setCanExecutePipeline(data[PERMISSION_PIPELINE_EXECUTE]);
+      setCanEditPipeline(data[PERMISSION_PIPELINE_EDIT]);
+    });
+  };
+  var checkIsLatestPiepline = function checkIsLatestPiepline() {
+    exceed.fetch({
+      api: "Pipeline.get.instance.latest",
+      params: {
+        pipelineId: pipelineId
+      }
+    }).then(function (res) {
+      var latestInstNumber = res.object.instNumber;
+      var isLatest = Number(buildNumber) === Number(latestInstNumber);
+      onBuildNumberChange === null || onBuildNumberChange === void 0 ? void 0 : onBuildNumberChange(Number(buildNumber), isLatest);
+    });
+  };
+  useEffect(function () {
+    checkIsLatestPiepline();
+    return function () {
+      return onBuildNumberChange === null || onBuildNumberChange === void 0 ? void 0 : onBuildNumberChange(undefined, false);
+    };
+  }, []);
+  useEffect(function () {
+    checkPipelinePermission();
+    exceed.fetch({
+      api: "Pipeline.get.instance.by.number",
+      params: {
+        pipelineId: pipelineId,
+        buildNumber: buildNumber
+      }
+    }).then(function (res) {
+      setLoading(false);
+      if (res.successful && res.object) {
+        setInstance(res.object);
+      } else {
+        // 无权限的情况
+        setErrorCode(res.errorCode);
+      }
+    })["catch"](function () {
+      setLoading(false);
+      setInstance({});
+    });
+  }, []);
+  if (parentLoading || !instance && !errorCode || loading) {
+    return /*#__PURE__*/React.createElement(Loading, {
+      className: "tb-loading",
+      visible: loading
+    });
+  }
+
+  // 无权限的情况
+  if (errorCode === "403") {
+    return /*#__PURE__*/React.createElement(Result, {
+      img: "403",
+      title: intl.get({
+        id: "rdc-tb-cd-assets.detailMain.build.NoPermission",
+        defaultMessage: "无权限"
+      })
+      // codeup
+      ,
+      desc: intl.get({
+        id: "rdc-tb-cd-assets.detailMain.build.YouDoNotHaveThe",
+        defaultMessage: "没有流水线查看权限，请联系管理员添加你为库成员之后重试"
+      })
+    });
+  }
+  var Component = newInstance ? NewPipelineInstance : PipelineInstance;
+  return /*#__PURE__*/React.createElement(Component, {
+    key: pipelineId + (instance === null || instance === void 0 ? void 0 : instance.id),
+    pipelineId: pipelineId,
+    loading: loading,
+    instance: instance,
+    disabled: !canExecutePipeline,
+    isAdmin: canEditPipeline,
+    isSystemPipeline: !!type,
+    isStatusBarHidden: isStatusBarHidden,
+    noPadding: noPadding,
+    onPipelineStatusChanged: onPipelineStatusChanged
+  });
+};
+export default Build;

package/es/components/detailMain/current/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './index.scss';
+declare const Current: ({ loading: parentLoading, onBuildNumberChange, ...props }: {
+    [x: string]: any;
+    loading: any;
+    onBuildNumberChange: any;
+}) => JSX.Element;
+export default Current;

package/es/components/detailMain/current/index.js

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["loading", "onBuildNumberChange"];
+import React, { useEffect, useState } from 'react';
+import { Loading } from '@teamix/ui';
+import exceed from "../../../utils/apimap";
+import Loadable from "../../../utils/loadable";
+import permissionUtil from "../../../utils/permissionUtil";
+import intl from "../../../locale";
+import "./index.scss";
+var PipelineInstance = Loadable({
+  loader: function loader() {
+    return import("../../common/teambition/pipeline-instance-new");
+  }
+});
+var RunPipelineButton = Loadable({
+  loader: function loader() {
+    return import("../../common/teambition/run-pipeline-btn");
+  }
+});
+var MessagePage = Loadable({
+  loader: function loader() {
+    return import("../../common/teambition/message-page");
+  }
+});
+var PERMISSION_PIPELINE_EXECUTE = 'tb.flow.pipeline.run';
+var PERMISSION_PIPELINE_EDIT = 'tb.flow.pipeline.edit';
+var Current = function Current(_ref) {
+  var parentLoading = _ref.loading,
+    onBuildNumberChange = _ref.onBuildNumberChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var pipelineId = props.pipelineId,
+    type = props.type;
+  var _useState = useState({}),
+    instance = _useState[0],
+    setInstance = _useState[1];
+  var _useState2 = useState(true),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(false),
+    canExecutePipeline = _useState3[0],
+    setCanExecutePipeline = _useState3[1];
+  var _useState4 = useState(false),
+    canEditPipeline = _useState4[0],
+    setCanEditPipeline = _useState4[1];
+  var checkPipelinePermission = function checkPipelinePermission() {
+    permissionUtil.checkPermissionList([PERMISSION_PIPELINE_EXECUTE, PERMISSION_PIPELINE_EDIT], props.pipelineId, 'pipeline', window.AK_GLOBAL.currentUser.workid).then(function (data) {
+      setCanExecutePipeline(data[PERMISSION_PIPELINE_EXECUTE]);
+      setCanEditPipeline(data[PERMISSION_PIPELINE_EDIT]);
+    });
+  };
+  var getLatestPiepline = function getLatestPiepline() {
+    exceed.fetch({
+      api: 'Pipeline.get.instance.latest',
+      params: {
+        pipelineId: pipelineId
+      }
+    }).then(function (res) {
+      setLoading(false);
+      if (res.successful) {
+        var _res$object;
+        setInstance(res.object || {});
+        // 通知 appstack
+        onBuildNumberChange === null || onBuildNumberChange === void 0 ? void 0 : onBuildNumberChange((_res$object = res.object) === null || _res$object === void 0 ? void 0 : _res$object.instNumber, true);
+      }
+    })["catch"](function () {
+      setLoading(false);
+    });
+  };
+  useEffect(function () {
+    return function () {
+      return onBuildNumberChange === null || onBuildNumberChange === void 0 ? void 0 : onBuildNumberChange(undefined, false);
+    };
+  }, []);
+  useEffect(function () {
+    checkPipelinePermission();
+    getLatestPiepline();
+  }, [pipelineId]);
+  var flowInstVo = instance.flowInstVo;
+  if (parentLoading || loading) {
+    return /*#__PURE__*/React.createElement(Loading, {
+      inline: false,
+      style: {
+        marginTop: (innerHeight - 95) / 2 + "px",
+        transform: 'translateY(-50%)',
+        height: 48
+      }
+    });
+  }
+  if (!flowInstVo) {
+    return /*#__PURE__*/React.createElement(MessagePage, {
+      title: intl.get({
+        id: 'rdc-tb-cd-assets.detailMain.current.TheCurrentPipelineIsNot',
+        defaultMessage: '当前流水线尚未运行'
+      }),
+      message: intl.get({
+        id: 'rdc-tb-cd-assets.detailMain.current.TryRunningThePipeline',
+        defaultMessage: '请尝试运行流水线'
+      }),
+      logo: "none",
+      extra: canExecutePipeline && !type && /*#__PURE__*/React.createElement(RunPipelineButton, _extends({}, props, {
+        id: pipelineId,
+        tipsAlign: "b",
+        text: intl.get({
+          id: 'rdc-tb-cd-assets.detailMain.current.RunNow',
+          defaultMessage: '立即运行'
+        }),
+        disabled: !canExecutePipeline || type,
+        notJump: true,
+        onRunPost: function onRunPost() {
+          return getLatestPiepline();
+        },
+        onRunPipeline: props.onRunPipeline
+      }))
+    });
+  }
+  return /*#__PURE__*/React.createElement(PipelineInstance, {
+    pipelineId: pipelineId,
+    loading: loading,
+    instance: instance,
+    disabled: !canExecutePipeline,
+    isAdmin: canEditPipeline,
+    onRefresh: function onRefresh() {
+      return getLatestPiepline();
+    },
+    isSystemPipeline: !!type
+  });
+};
+export default Current;

package/es/components/detailMain/deployments/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './index.scss';
+declare const Deployments: ({ loading: parentLoading, newLayout, ...props }: {
+    [x: string]: any;
+    loading: any;
+    newLayout: any;
+}) => JSX.Element;
+export default Deployments;