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

package/es/components/common/teambition/flow-job-btn/link-with-qrcode/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Button } from '@teamix/ui';
+import { BaiscIconFont as Icon } from "../../icon-font";
+import QRCode from 'qrcode.react';
+var LinkWithQRCodeButton = function LinkWithQRCodeButton(props) {
+  return /*#__PURE__*/React.createElement(Button, {
+    key: props.id,
+    onClick: function onClick() {
+      return window.open(props.url);
+    },
+    text: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "link-line"
+  }), props.title);
+};
+var LinkWithQRCode = function LinkWithQRCode(props) {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(QRCode, {
+    value: props.url,
+    size: 80,
+    fgColor: "#000000"
+  }));
+};
+LinkWithQRCode.Card = LinkWithQRCode;
+LinkWithQRCode.Button = LinkWithQRCodeButton;
+export default LinkWithQRCode;

package/es/components/common/teambition/flow-job-btn/log-btn/AI.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import 'utils/md.style.css';
+import './ai.scss';
+interface IProps {
+    jobId: number;
+    stepIndex: number;
+}
+export default function AI({ jobId, stepIndex }: IProps): JSX.Element;
+export {};

package/es/components/common/teambition/flow-job-btn/log-btn/AI.js

@@ -0,0 +1,339 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import cls from 'classnames';
+import AIPanel, { AnswerState } from '@alife/yunxiao-ai-panel';
+// import AIPanel, {
+//   AnswerState,
+//   FeedbackType,
+// } from '/Users/liyan/glali/yunxiao-ai-panel@yunxiao-fe/src/index.tsx';
+import getUrlWithContextPath from "../../../../../utils/contextPathUtil";
+import YunxiaoIcon from '@alife/yunxiao-icon';
+import Md from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import styles from "./ai.module.scss";
+import "../../../../../utils/md.style.css";
+import track from "../../../../../utils/track";
+import { Message, Tag } from '@teamix/ui';
+import { once } from 'lodash-es';
+import intl from "../../../../../locale";
+import { Title } from '@alife/devops-ui';
+import AIFeedback from "./aiFeedback";
+import { generateUUID } from "../../../../../utils";
+import "./ai.scss";
+var trackCaseKey = 'flow-build-troubleshooting';
+export default function AI(_ref) {
+  var jobId = _ref.jobId,
+    stepIndex = _ref.stepIndex;
+  var _useState = useState(false),
+    AIPanelVisible = _useState[0],
+    setAIPanelVisible = _useState[1];
+  var _useState2 = useState({
+      question: '',
+      answer: ''
+    }),
+    content = _useState2[0],
+    setContent = _useState2[1];
+  var _useState3 = useState(false),
+    quotationExpanded = _useState3[0],
+    setQuotationExpanded = _useState3[1];
+  var _useState4 = useState(AnswerState.LOADING),
+    curState = _useState4[0],
+    setCurState = _useState4[1];
+  var _useState5 = useState(false),
+    error = _useState5[0],
+    setError = _useState5[1];
+  var _useState6 = useState(null),
+    uuid = _useState6[0],
+    setUuid = _useState6[1];
+  var div = document.querySelector('.pipeline-log-ai-panel .panel-content');
+  var eventSourceRef = useRef(null);
+  useEffect(function () {
+    track({
+      action: "aigc-available-" + trackCaseKey,
+      jobId: jobId,
+      stepIndex: stepIndex
+    });
+  }, []);
+  var getDiagnosis = function getDiagnosis() {
+    track({
+      action: "aigc-trigger-" + trackCaseKey,
+      jobId: jobId,
+      stepIndex: stepIndex
+    });
+    var uid = generateUUID();
+    setUuid(uid);
+    var eventSource = new EventSource(getUrlWithContextPath("/buildLogAIDiagnosis?jobId=" + jobId + "&stepIndex=" + stepIndex + "&diagnosis_uuid=" + uid), {
+      withCredentials: true
+    });
+    eventSourceRef.current = eventSource;
+    var questionReceived = false;
+    var successTrackOnce = once(function () {
+      // 只在收到的第一段回答发一次
+      track({
+        action: "aigc-res-success-" + trackCaseKey,
+        jobId: jobId,
+        stepIndex: stepIndex
+      });
+    });
+    eventSource.onmessage = function (event) {
+      //
+      var data = JSON.parse(event.data).text;
+      if (!questionReceived) {
+        // 问题
+        questionReceived = true;
+        setContent({
+          question: data,
+          answer: ''
+        });
+      } else {
+        // 回答
+        if (!(data !== null && data !== void 0 && data.trim())) {
+          setError(true);
+          return;
+        }
+        successTrackOnce();
+        setContent(function (prev) {
+          return _extends({}, prev, {
+            answer: data
+          });
+        });
+        curState !== AnswerState.GENERATING && setCurState(AnswerState.GENERATING);
+      }
+    };
+
+    // 服务端发完了，会关掉连接
+    eventSource.onerror = function () {
+      eventSource.close();
+      if (error) {
+        track({
+          action: "aigc-error-" + trackCaseKey,
+          jobId: jobId,
+          stepIndex: stepIndex
+        });
+        setCurState(AnswerState.ERROR);
+      } else {
+        track({
+          action: "aigc-complete-" + trackCaseKey,
+          jobId: jobId,
+          stepIndex: stepIndex
+        });
+        setCurState(AnswerState.SUCCESS);
+      }
+    };
+  };
+  useEffect(function () {
+    if (div) {
+      div.scrollTop = div.scrollHeight;
+    }
+  }, [content.answer, curState]);
+  var renderDiffP = function renderDiffP(content, i) {
+    var firstStr = content[0];
+    var diffCodes = ['-', '+'];
+    if (diffCodes.indexOf(firstStr) !== -1) {
+      var diffClassName = firstStr === diffCodes[0] ? 'remove' : 'add';
+      var newText = content.replace('\n', '');
+      return /*#__PURE__*/React.createElement("p", {
+        className: "md-diff-" + diffClassName,
+        key: newText + i
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "md-diff-line-number"
+      }, i + 1), newText);
+    } else {
+      return /*#__PURE__*/React.createElement("p", {
+        key: content + i
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "md-diff-line-number"
+      }, i + 1), content);
+    }
+  };
+  var renderMdP = function renderMdP(content) {
+    var splitP = content.split('\n');
+    return splitP.map(function (item, i) {
+      return renderDiffP(item, i);
+    });
+  };
+  var mdCpt = useMemo(function () {
+    return {
+      code: function code(_ref2) {
+        var className = _ref2.className,
+          children = _ref2.children;
+        if (className === 'language-diff') {
+          return /*#__PURE__*/React.createElement("code", {
+            className: "ai-md-codes " + className
+          }, /*#__PURE__*/React.createElement("div", {
+            className: "ai-md-codes-title"
+          }, "\u6D41\u6C34\u7EBFYAML"), renderMdP(children[0]));
+        }
+        return /*#__PURE__*/React.createElement("code", null, children[0]);
+      }
+    };
+  }, []);
+  var contentEl = /*#__PURE__*/React.createElement("div", {
+    className: styles.AiContent
+  }, content.question && /*#__PURE__*/React.createElement("div", {
+    className: cls(styles.question, quotationExpanded ? styles.expanded : styles.collapse)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls(styles.questionCode)
+  }, quotationExpanded ? /*#__PURE__*/React.createElement(React.Fragment, null, content.question, /*#__PURE__*/React.createElement("div", {
+    className: styles.scrollBottomHolder
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.textOverflow2Line
+  }, content.question.split('\n').slice(0, 2).join('\n')))), quotationExpanded && /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    onClick: function onClick() {
+      setQuotationExpanded(false);
+    },
+    type: "arrow-up-2-line"
+  }), !quotationExpanded && /*#__PURE__*/React.createElement(YunxiaoIcon, {
+    onClick: function onClick() {
+      setQuotationExpanded(true);
+    },
+    type: "arrow-down-2-line"
+  })), content.answer && /*#__PURE__*/React.createElement("div", {
+    className: 'markdown-body ai-diagnosis-build-markdown-body'
+  }, /*#__PURE__*/React.createElement(Md, {
+    key: content.answer,
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [rehypeRaw],
+    components: mdCpt
+  }, content.answer)), (!content.answer || content.question && AnswerState.LOADING === curState) && /*#__PURE__*/React.createElement("div", {
+    className: styles.tip
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.AI.Generating',
+    defaultMessage: '生成中...'
+  })), error && AnswerState.SUCCESS === curState && /*#__PURE__*/React.createElement("div", {
+    className: styles.tip
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.AI.SorryNoTroubleshootingSuggestionsAre',
+    defaultMessage: '抱歉，暂无排查建议，请稍后尝试重新生成'
+  })), content.answer && AnswerState.SUCCESS === curState && /*#__PURE__*/React.createElement(AIFeedback, {
+    uuid: uuid,
+    jobId: jobId,
+    stepIndex: stepIndex
+  }));
+  var triggerRef = useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: triggerRef,
+    className: styles.AITriggerBtn,
+    onClick: function onClick() {
+      if (!AIPanelVisible) {
+        setAIPanelVisible(true);
+        getDiagnosis();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "AIText-jon-btn " + styles.AIText
+  }, /*#__PURE__*/React.createElement("img", {
+    className: styles.AIImgIcon,
+    src: "https://img.alicdn.com/imgextra/i4/O1CN01s2W9gN1exCCFOxQav_!!6000000003937-55-tps-320-320.svg",
+    alt: ""
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 60
+    }
+  }, /*#__PURE__*/React.createElement(Title, {
+    trigger: intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.AI.IntelligentTroubleshooting',
+      defaultMessage: '智能排查'
+    }),
+    align: "t"
+  }, intl.get({
+    id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.AI.IntelligentTroubleshooting',
+    defaultMessage: '智能排查'
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: cls(styles.rectangle, styles.rectangleFast)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cls(styles.rectangle, styles.rectangleSlow)
+  })), /*#__PURE__*/React.createElement(AIPanel, {
+    target: triggerRef.current,
+    className: "pipeline-log-ai-panel",
+    align: "br tr",
+    offset: [0, -10],
+    state: curState,
+    visible: AIPanelVisible,
+    handle: ".panel-title",
+    onRequestClose: function onRequestClose() {
+      setAIPanelVisible(false);
+      setError(false);
+    },
+    textToCopy: content.answer,
+    onCopy: function onCopy() {
+      Message.success(intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.AI.Copied',
+        defaultMessage: '已复制'
+      }));
+    },
+    afterClose: function afterClose() {
+      var _eventSourceRef$curre, _eventSourceRef$curre2;
+      setCurState(AnswerState.LOADING);
+      (_eventSourceRef$curre = eventSourceRef.current) === null || _eventSourceRef$curre === void 0 ? void 0 : (_eventSourceRef$curre2 = _eventSourceRef$curre.close) === null || _eventSourceRef$curre2 === void 0 ? void 0 : _eventSourceRef$curre2.call(_eventSourceRef$curre);
+      setQuotationExpanded(false);
+      setContent({
+        question: '',
+        answer: ''
+      });
+    },
+    content: contentEl,
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "rectangle rectangle-purple"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "rectangle rectangle-blue"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "rectangle rectangle-large"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "rectangle rectangle-small"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.panelTitle
+    }, /*#__PURE__*/React.createElement("img", {
+      className: styles.AIImgIcon,
+      src: "https://img.alicdn.com/imgextra/i3/O1CN01Kl4yMa1HWPyaficWS_!!6000000000765-55-tps-20-20.svg",
+      alt: ""
+    }), /*#__PURE__*/React.createElement(Title, {
+      trigger: intl.get({
+        id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.AI.IntelligentTroubleshooting',
+        defaultMessage: '智能排查'
+      }),
+      align: "t"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.flow-job-btn.log-btn.AI.IntelligentTroubleshooting',
+      defaultMessage: '智能排查'
+    })), /*#__PURE__*/React.createElement(Tag, {
+      type: "primary"
+    }, "BETA")))
+    // onFeedback={(type) => {
+    //   const action =
+    //     type === FeedbackType.UP
+    //       ? `aigc-like-${trackCaseKey}`
+    //       : `aigc-dislike-${trackCaseKey}`;
+    //   track({
+    //     action,
+    //     jobId,
+    //     stepIndex,
+    //   });
+    // }}
+    ,
+    onStateBtnClick: function onStateBtnClick(prevState) {
+      if (prevState === AnswerState.GENERATING || prevState === AnswerState.LOADING) {
+        track({
+          action: "aigc-abort-" + trackCaseKey,
+          jobId: jobId,
+          stepIndex: stepIndex
+        });
+        eventSourceRef.current.close();
+        setCurState(AnswerState.ABORTED);
+      } else if (prevState === AnswerState.SUCCESS || prevState === AnswerState.ERROR || prevState === AnswerState.ABORTED) {
+        // 重新生成
+        setCurState(AnswerState.LOADING);
+        setContent(function (prev) {
+          // 保留 question 显示
+          return {
+            question: prev.question,
+            answer: ''
+          };
+        });
+        setQuotationExpanded(false);
+        getDiagnosis();
+      }
+    }
+  }));
+}

package/es/components/common/teambition/flow-job-btn/log-btn/ai.module.scss

@@ -0,0 +1,182 @@
+@mixin scrollBar {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: var(--color-line1-3, #cecece);
+  }
+}
+
+@mixin scrollBarTransparent {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: transparent;
+  }
+}
+
+.AiContent {
+  width: 100%;
+  .tip {
+    color: var(--color-text1-7, #8b8b8b);
+  }
+  .question {
+    position: relative;
+    margin: 0 0 16px 0;
+
+    border: 1px solid var(--color-brand3-2, #e9edf0);
+    border-radius: 4px;
+    background-color: #fff;
+
+    &.collapse {
+      padding-right: 36px;
+      i {
+        position: absolute;
+        right: 8px;
+        bottom: 50%;
+        transform: translateY(50%);
+        cursor: pointer;
+      }
+    }
+
+    &.expanded {
+      i {
+        position: absolute;
+        right: 10px;
+        bottom: 4px;
+        cursor: pointer;
+      }
+      .scrollBottomHolder {
+        height: 28px;
+        position: sticky;
+        bottom: 0;
+        background-image: linear-gradient(
+          transparent 0%,
+          white 60%,
+          white 100%
+        );
+      }
+    }
+
+    &.collapse .questionCode {
+      height: 54px;
+      .textOverflow2Line {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        word-break: break-all;
+      }
+    }
+
+    .questionCode {
+      max-height: 280px;
+      overflow: auto;
+      padding: 8px 12px;
+      // firefox 滚动元素兼容
+      padding-bottom: 0;
+
+      @include scrollBarTransparent();
+      &:hover {
+        @include scrollBar();
+      }
+
+      white-space: pre-wrap;
+      word-break: break-all;
+      font-family: Menlo, Courier, monospace;
+      color: var(--color-brand3-7, #62656f);
+    }
+  }
+}
+
+.AITriggerBtn {
+  position: absolute;
+  right: 32px;
+  bottom: 32px;
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  color: white;
+  background-color: #006ad4;
+  overflow: hidden;
+  font-size: 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 110px;
+
+  .AIText {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    z-index: 99;
+  }
+
+  .rectangle {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    left: 0;
+    // z-index: -1;
+  }
+
+
+  .rectangleFast {
+    background:radial-gradient(81% 81% at 112% 26%, #3C83FF 0%, #3C83FF 32%, rgba(60, 131, 255, 0) 100%);
+    animation-name: rotate-fast;
+    animation-duration: 3s;
+  }
+
+
+  .rectangleSlow {
+    background: radial-gradient(70% 70% at 3% 26%, #6F59FF 2%, rgba(111, 89, 255, 0.8) 50%, rgba(111, 89, 255, 0) 100%);
+    animation-name: rotate-slow;
+    animation-duration: 5s;
+  }
+
+  @keyframes rotate-fast {
+      from {
+          transform: rotate(0deg);
+      }
+      to {
+          transform: rotate(360deg);
+      }
+  }
+
+  @keyframes rotate-slow {
+      from {
+          transform: rotate(0deg);
+      }
+      to {
+          transform: rotate(360deg);
+      }
+  }
+}
+
+img.AIImgIcon {
+  margin-right: 10px;
+  height: 20px;
+  width: 20px;
+}
+
+.panelTitle {
+  display: flex;
+  align-items: center;
+  line-height: 18px;
+}
+
+:global {
+  .ai-diagnosis-build-markdown-body {
+    pre {
+      @include scrollBar();
+    }
+  }
+}

package/es/components/common/teambition/flow-job-btn/log-btn/ai.scss

@@ -0,0 +1,153 @@
+.yunxiao-ai-panel {
+  position: relative;
+  overflow: hidden;
+
+  .panel-content {
+    max-height: calc(100vh - 350px);
+
+    .markdown-body {
+      pre {
+        padding: 0;
+        background: #fff;
+        border: 1px solid #E9EDF0;
+        border-radius: 4px;
+        box-sizing: border-box;
+
+        p {
+          padding: 0 16px 0 0;
+        }
+      }
+    }
+  }
+
+  .ai-md-codes.language-diff {
+    // background: #fff;
+    display: inline-block;
+    // padding: 16px 0;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    .md-diff-add {
+      background: #D6F6DA;
+    }
+
+    .md-diff-remove {
+      background: #FFE8E6;
+    }
+
+    .ai-md-codes-title {
+      height: 32px;
+      line-height: 32px;
+      background: #F2F5F7;
+      padding-left: 16px;
+      color: #292929;
+      font-weight: 500;
+    }
+
+    .md-diff-line-number {
+      padding: 0 10px 0 0;
+      text-align: right;
+      display: inline-block;
+      min-width: 50px;
+      font-size: 12px;
+      color: #8B8B8B;
+    }
+  }
+
+  .next-tag-default.next-tag-level-primary {
+    background: #DDF1FF;
+    color: #006AD4;
+    margin-left: 7px;
+  }
+}
+
+
+@keyframes rotate-fast {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes opacity-loop {
+  0% {
+    transform: rotate(0deg);
+    opacity: 1; /* 开始时透明度为1 */
+  }
+  50% {
+    transform: rotate(180deg);
+    opacity: 0.2; /* 中间时透明度为0.2 */
+  }
+  100% {
+    transform: rotate(360deg);
+    opacity: 1; /* 结束时透明度回到1 */
+  }
+}
+
+.rectangle {
+  position: absolute;
+  top: -280px;
+  left: -80px;
+  width: 607px;
+  height: 509px;
+  /*     animation-timing-function: linear;
+animation-iteration-count: infinite; */
+  animation: opacity-loop 2s linear infinite;
+  z-index: -1;
+}
+
+.rectangle-purple {
+  background: radial-gradient(
+    27% 33% at 34% 42%,
+    rgba(111, 89, 255, 0.09) 0%,
+    rgba(111, 89, 255, 0.1) 40%,
+    rgba(111, 89, 255, 0) 100%
+  );
+  animation-name: opacity-loop;
+  animation-duration: 6s;
+}
+
+.rectangle-blue {
+  background: radial-gradient(
+    29% 34% at 67% 43%,
+    rgba(60, 131, 255, 0.12) 0%,
+    rgba(60, 131, 255, 0.1) 40%,
+    rgba(60, 131, 255, 0) 100%
+  );
+  animation-name: opacity-loop;
+  animation-duration: 9s;
+}
+
+.rectangle-large {
+  background: radial-gradient(
+    35% 42% at 45% 44%,
+    rgba(26, 64, 255, 0.11) 0%,
+    rgba(0, 34, 255, 0) 100%
+  );
+  animation-name: opacity-loop;
+  animation-duration: 12s;
+}
+
+.rectangle-small {
+  background: radial-gradient(
+    31% 37% at 34% 42%,
+    rgba(178, 89, 255, 0.12) 1%,
+    rgba(111, 89, 255, 0.03) 71%,
+    rgba(111, 89, 255, 0) 100%
+  );
+  animation-name: opacity-loop;
+  animation-duration: 3s;
+}

package/es/components/common/teambition/flow-job-btn/log-btn/aiFeedback.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './aiFeedback.scss';
+declare const AIFeedback: (props: any) => JSX.Element;
+export default AIFeedback;