@oceanbase/ui 0.2.0

package/lib/SideTip/index.less

@@ -0,0 +1,177 @@
+@import '../variable.less';
+
+@prefix: ob-sidetip;
+
+.@{prefix}-container {
+  position: fixed;
+  z-index: 0;
+  font-size: 14px;
+  cursor: pointer;
+  inset-inline-end: 24px;
+  inset-block-end: 24px;
+
+  &.@{prefix}-container-dragged {
+    cursor: grab;
+  }
+
+  &.@{prefix}-container-hide {
+    transition: all 0.3s;
+  }
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+
+  &.@{prefix}-container-hide-not-dragged:hover {
+    inset-inline-end: 0 !important;
+  }
+
+  .@{prefix}-hide {
+    position: absolute;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 20px;
+    transform: scale(0);
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.18s ease-out 0.18s;
+    inset-block-start: 0;
+    inset-inline-end: -22px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.35);
+    }
+
+    .@{prefix}-hide-icon {
+      width: 6px;
+      height: 2px;
+      background: #fff;
+      border-radius: 4px;
+    }
+
+    &.@{prefix}-hide-hovered {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .@{prefix}-button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    background-color: #fff;
+    border-radius: 50%;
+    box-shadow: @boxShadowSecondary;
+    cursor: pointer;
+    transition: background-color 0.2s ease 0.1s, opacity 0.2s ease 0s, transform 0.2s ease 0.1s;
+    user-select: none;
+
+    &.@{prefix}-button-primary {
+      background-color: #1677ff;
+    }
+
+    &.@{prefix}-button-small {
+      width: 40px;
+      height: 40px;
+    }
+
+    &.@{prefix}-button-disabled {
+      background-color: @colorTextQuaternary;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .@{prefix}-button-loading {
+      position: absolute;
+      width: 56px;
+      height: 56px;
+      color: #1677ff;
+      font-size: 56px;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+
+      &.@{prefix}-button-loading-primary {
+        color: #fff;
+      }
+
+      &.@{prefix}-button-loading-small {
+        width: 40px;
+        height: 40px;
+        font-size: 40px;
+      }
+    }
+
+    .@{prefix}-button-close {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      color: @colorTextSecondary;
+      font-size: 24px;
+      transform: translateY(-50%) scale(0.4) rotate(-45deg);
+      opacity: 0;
+      transition: all 0.3s linear;
+      user-select: none;
+      inset-block-start: 50%;
+
+      &.@{prefix}-button-close-primary {
+        color: #fff;
+      }
+
+      &.@{prefix}-button-close-show {
+        transform: translateY(-50%);
+        opacity: 1;
+      }
+
+      &.@{prefix}-button-close-small {
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        line-height: 16px;
+      }
+    }
+
+    .@{prefix}-button-icon {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      color: @colorTextSecondary;
+      font-size: 24px;
+      line-height: 24px;
+      transform: translateY(-50%);
+      opacity: 1;
+      transition: all 0.3s linear;
+      user-select: none;
+      inset-block-start: 50%;
+
+      &.@{prefix}-button-icon-open {
+        transform: translateY(-50%) scale(0.4) rotate(45deg);
+        opacity: 0;
+      }
+
+      &.@{prefix}-button-icon-disabled {
+        color: @colorTextQuaternary;
+      }
+
+      &.@{prefix}-button-icon-primary {
+        color: #fff;
+      }
+
+      &.@{prefix}-button-icon-small {
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        line-height: 16px;
+      }
+    }
+  }
+}

package/lib/SideTip/locale/en-US.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/SideTip/locale/en-US.ts
+var en_US_exports = {};
+__export(en_US_exports, {
+  default: () => en_US_default
+});
+module.exports = __toCommonJS(en_US_exports);
+var en_US_default = {};

package/lib/SideTip/locale/zh-CN.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/SideTip/locale/zh-CN.ts
+var zh_CN_exports = {};
+__export(zh_CN_exports, {
+  default: () => zh_CN_default
+});
+module.exports = __toCommonJS(zh_CN_exports);
+var zh_CN_default = {};

package/lib/SideTip/locale/zh-TW.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/SideTip/locale/zh-TW.ts
+var zh_TW_exports = {};
+__export(zh_TW_exports, {
+  default: () => zh_TW_default
+});
+module.exports = __toCommonJS(zh_TW_exports);
+var zh_TW_default = {};

package/lib/SideTip/utils.js

@@ -0,0 +1,112 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/SideTip/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  getClientHeight: () => getClientHeight,
+  getClientWidth: () => getClientWidth,
+  getScrollBarSize: () => getScrollBarSize,
+  getScrollOffsets: () => getScrollOffsets,
+  isFixedElem: () => isFixedElem
+});
+module.exports = __toCommonJS(utils_exports);
+var getScrollOffsets = (dom) => {
+  if (window.pageXOffset != null) {
+    return {
+      x: window.pageXOffset,
+      y: window.pageYOffset
+    };
+  }
+  if (dom) {
+    return {
+      x: dom.scrollLeft,
+      y: dom.scrollTop
+    };
+  }
+  const { document: document2 } = window;
+  if (document2.compatMode === "CSS1Compat") {
+    return {
+      x: document2.documentElement.scrollLeft,
+      y: document2.documentElement.scrollTop
+    };
+  }
+  return {
+    x: document2.body.scrollLeft,
+    y: document2.body.scrollTop
+  };
+};
+var getClientHeight = (dom) => {
+  if (dom) {
+    return dom.clientHeight;
+  }
+  return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+};
+var getClientWidth = (dom) => {
+  if (dom) {
+    return dom.clientWidth;
+  }
+  if (window.innerWidth) {
+    return window.innerWidth;
+  }
+  return document.body.clientWidth;
+};
+var cached;
+var getScrollBarSize = (fresh, dom = document.body) => {
+  if (window.innerWidth > dom.offsetWidth) {
+    if (fresh || cached === void 0) {
+      const inner = document.createElement("div");
+      inner.style.width = "100%";
+      inner.style.height = "200px";
+      const outer = document.createElement("div");
+      const outerStyle = outer.style;
+      outerStyle.position = "absolute";
+      outerStyle.top = "0";
+      outerStyle.left = "0";
+      outerStyle.pointerEvents = "none";
+      outerStyle.visibility = "hidden";
+      outerStyle.width = "200px";
+      outerStyle.height = "150px";
+      outerStyle.overflow = "hidden";
+      outer.appendChild(inner);
+      dom.appendChild(outer);
+      const widthContained = inner.offsetWidth;
+      outer.style.overflow = "scroll";
+      let widthScroll = inner.offsetWidth;
+      if (widthContained === widthScroll) {
+        widthScroll = outer.clientWidth;
+      }
+      dom.removeChild(outer);
+      cached = widthContained - widthScroll;
+    }
+    return cached;
+  }
+  return 0;
+};
+var isFixedElem = (element) => {
+  const style = element && window.getComputedStyle(element);
+  return style && style.position === "fixed";
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getClientHeight,
+  getClientWidth,
+  getScrollBarSize,
+  getScrollOffsets,
+  isFixedElem
+});

package/lib/TaskGraph/Graph.d.ts

@@ -0,0 +1,24 @@
+import type { GraphData } from '@antv/g6/lib/types';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import './graph.less';
+export interface TaskGraphLocale {
+    successful: string;
+    running: string;
+    failed: string;
+    pending: string;
+    taskId: string;
+    log: string;
+    parameter: string;
+    stop: string;
+    retry: string;
+    skip: string;
+}
+export interface TaskGraphProps extends LocaleWrapperProps {
+    data: GraphData;
+    onMenuClick: (key: string, subTask: any, onSuccess: () => void) => void;
+    onLogAdd: (subTask: any) => void;
+    assetsPath?: string;
+    locale?: TaskGraphLocale;
+}
+declare const _default: any;
+export default _default;

package/lib/TaskGraph/Graph.js

@@ -0,0 +1,259 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/TaskGraph/Graph.tsx
+var Graph_exports = {};
+__export(Graph_exports, {
+  default: () => Graph_default
+});
+module.exports = __toCommonJS(Graph_exports);
+var import_g6 = __toESM(require("@antv/g6"));
+var import_util = require("@oceanbase/util");
+var import_design = require("@oceanbase/design");
+var import_lodash = require("lodash");
+var import_react = __toESM(require("react"));
+var import_design2 = require("@oceanbase/design");
+var import_GraphToolbar = __toESM(require("../GraphToolbar"));
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_util2 = require("../_util");
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_register = __toESM(require("./register"));
+var import_graph = require("./graph.less");
+var { Text } = import_design.Typography;
+var prefix = (0, import_util2.getPrefix)("task-graph-item");
+var TaskGraph = class extends import_react.default.PureComponent {
+  constructor(props) {
+    super(props);
+    this.main = null;
+    this.menu = null;
+    this.drawGraph = () => {
+      const { data } = this.props;
+      if (this.graph && this.graph.changeData) {
+        this.graph.changeData(data);
+      } else {
+        const splitPane = document.getElementsByClassName("SplitPane") && document.getElementsByClassName("SplitPane")[0];
+        const width = this.main && this.main.scrollWidth || 1200;
+        const height = (this.main && this.main.scrollHeight || splitPane.scrollHeight || 500) - 65;
+        const graph = new import_g6.default.Graph({
+          container: "container",
+          width,
+          height,
+          minZoom: 0.2,
+          maxZoom: 2,
+          layout: {
+            type: "dagre",
+            nodesep: 90,
+            ranksep: 40,
+            controlPoints: false
+          },
+          defaultNode: {
+            type: "subTaskNode",
+            anchorPoints: [
+              [0.5, 0],
+              [0.5, 1]
+            ]
+          },
+          defaultEdge: {
+            type: "subTaskEdge"
+          },
+          nodeStateStyles: {
+            hover: {
+              lineWidth: 2,
+              stroke: import_design2.token.colorPrimary,
+              fill: "#e6f7ff"
+            }
+          },
+          modes: {
+            default: ["drag-canvas", "zoom-canvas", "click-select"]
+          }
+        });
+        const canvas = graph.get("canvas");
+        canvas.set("localRefresh", false);
+        graph.data(data);
+        graph.render();
+        graph.fitView();
+        canvas.on("moreGroup:click", (e) => {
+          const subTaskNode = e.currentTarget && e.currentTarget.getParent();
+          const model = subTaskNode && subTaskNode.get("item") && subTaskNode.get("item").getModel();
+          this.setState(
+            {
+              currentSubTask: model
+            },
+            () => {
+              if (!this.menu) {
+                this.menu = document.getElementById("menu");
+              }
+              this.menu.style.left = `${e.x}px`;
+              this.menu.style.top = `${e.y - height - 5}px`;
+            }
+          );
+        });
+        graph.on("node:mouseleave", () => {
+          if (!this.menu) {
+            this.menu = document.getElementById("menu");
+          }
+          this.menu.style.left = "-1500px";
+        });
+        this.graph = graph;
+        this.forceUpdate();
+      }
+    };
+    this.handleMenuClick = ({ key }) => {
+      const { onMenuClick } = this.props;
+      const { currentSubTask } = this.state;
+      const onSuccess = () => {
+        this.setState({
+          currentSubTask: null
+        });
+      };
+      if (key === "log") {
+        this.log();
+      }
+      if (onMenuClick) {
+        onMenuClick(key, currentSubTask, onSuccess);
+      }
+      if (this.menu) {
+        this.menu.style.left = "-1500px";
+      }
+    };
+    this.log = () => {
+      const { onLogAdd } = this.props;
+      const { currentSubTask } = this.state;
+      if (onLogAdd) {
+        onLogAdd(currentSubTask);
+      }
+    };
+    const { locale } = props;
+    this.state = {
+      currentSubTask: null,
+      statusList: [
+        {
+          label: locale.successful,
+          value: "SUCCESSFUL",
+          color: "#9adc78",
+          operations: ["taskId", "log", "parameter"]
+        },
+        {
+          label: locale.running,
+          value: "RUNNING",
+          color: "#80c3fc",
+          operations: ["taskId", "log", "parameter", "stop"]
+        },
+        {
+          label: locale.failed,
+          value: "FAILED",
+          color: "#fca4a2",
+          operations: ["taskId", "log", "parameter", "retry", "skip"]
+        },
+        {
+          label: locale.pending,
+          value: "PENDING",
+          color: "#cccccc",
+          operations: ["taskId", "parameter"]
+        }
+      ]
+    };
+  }
+  componentDidMount() {
+    const { assetsPath = "/assets" } = this.props;
+    const { statusList } = this.state;
+    (0, import_register.default)(statusList, assetsPath);
+    this.menu = document.getElementById("menu");
+    this.drawGraph();
+  }
+  componentDidUpdate(prevProps) {
+    const { data } = this.props;
+    if (!(0, import_lodash.isEqual)(data, prevProps.data)) {
+      this.drawGraph();
+    }
+  }
+  render() {
+    const { locale } = this.props;
+    const { statusList, currentSubTask } = this.state;
+    const operations = (0, import_util.findByValue)(statusList, currentSubTask && currentSubTask.status).operations || [];
+    const menus = [
+      {
+        label: locale.taskId,
+        value: "taskId"
+      },
+      {
+        label: locale.log,
+        value: "log"
+      },
+      {
+        label: locale.parameter,
+        value: "parameter"
+      },
+      {
+        label: locale.stop,
+        value: "stop"
+      },
+      {
+        label: locale.retry,
+        value: "retry"
+      },
+      {
+        label: locale.skip,
+        value: "skip"
+      }
+    ];
+    const filterMenus = menus.filter((item) => operations.includes(item.value));
+    const menu = /* @__PURE__ */ import_react.default.createElement(import_design.Menu, { id: "menu", onClick: this.handleMenuClick, style: { left: -1500 } }, filterMenus.map(
+      (item) => item.value === "taskId" ? /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${prefix}-task-id-wrapper`,
+          style: filterMenus.length > 1 ? { borderBottom: "1px solid #e8e8e8" } : {}
+        },
+        /* @__PURE__ */ import_react.default.createElement(Text, { copyable: true }, `ID: ${currentSubTask && currentSubTask.id}`)
+      ) : /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: item.value }, item.label)
+    ));
+    return /* @__PURE__ */ import_react.default.createElement("div", null, this.graph && /* @__PURE__ */ import_react.default.createElement(import_GraphToolbar.default, { mode: "fixed", graph: this.graph }), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        id: "container",
+        ref: (node) => {
+          this.main = node;
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_design.Dropdown,
+      {
+        visible: true,
+        open: true,
+        overlay: menu,
+        overlayClassName: `${prefix}-menu`
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", null)
+    ));
+  }
+};
+var Graph_default = (0, import_LocaleWrapper.default)({
+  componentName: "TaskGraph",
+  defaultLocale: import_zh_CN.default
+})(TaskGraph);

package/lib/TaskGraph/graph.less

@@ -0,0 +1,23 @@
+@import '../variable.less';
+
+@prefix: ob-task-graph-item;
+
+.@{prefix}-menu {
+  // 设置 fixed，避免下拉菜单占据空间导致底部出现白色方块
+  position: fixed;
+
+  .@{prefix}-task-id-wrapper {
+    padding: 5px 12px;
+
+    .@{prefixCls}-typography {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: @colorTextTertiary;
+
+      .@{prefixCls}-typography-copy {
+        color: @colorTextTertiary;
+      }
+    }
+  }
+}

package/lib/TaskGraph/index.d.ts

@@ -0,0 +1,16 @@
+import type { GraphData } from '@antv/g6/lib/types';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import type { TaskGraphLocale } from './Graph';
+import './index.less';
+export interface TaskGraphProps extends LocaleWrapperProps {
+    data: GraphData;
+    logLoading?: boolean;
+    subTaskLog: string;
+    onMenuClick: (key: string, subTask: any, onSuccess: () => void) => void;
+    onTabsChange?: (targetKey: string) => void;
+    onTabsEdit?: (targetKey: string, action: 'add' | 'remove') => void;
+    assetsPath?: string;
+    locale?: TaskGraphLocale;
+}
+declare const _default: any;
+export default _default;