@oceanbase/ui 0.2.0

package/lib/TaskGraph/index.js

@@ -0,0 +1,163 @@
+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/index.tsx
+var TaskGraph_exports = {};
+__export(TaskGraph_exports, {
+  default: () => TaskGraph_default
+});
+module.exports = __toCommonJS(TaskGraph_exports);
+var import_icons = require("@ant-design/icons");
+var import_design = require("@oceanbase/design");
+var import_lodash = require("lodash");
+var import_react = __toESM(require("react"));
+var import_react_split_pane = __toESM(require("react-split-pane"));
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_util = require("../_util");
+var import_Graph = __toESM(require("./Graph"));
+var import_index = require("./index.less");
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var { TabPane } = import_design.Tabs;
+var MIN_SIZE = 56;
+var DEFAULT_SIZE = 240;
+var prefix = (0, import_util.getPrefix)("task-graph");
+var TaskGraph = ({
+  logLoading = false,
+  subTaskLog,
+  onTabsChange = import_lodash.noop,
+  onTabsEdit = import_lodash.noop,
+  ...restProps
+}) => {
+  const [size, setSize] = (0, import_react.useState)(DEFAULT_SIZE);
+  const [activeKey, setActiveKey] = (0, import_react.useState)(void 0);
+  const [panes, setPanes] = (0, import_react.useState)([]);
+  const [collapsed, setCollapsed] = (0, import_react.useState)(true);
+  function handleEditLogWindow(targetKey, action) {
+    if (action === "remove") {
+      let lastIndex = -1;
+      panes.forEach((item, i) => {
+        if (`${item.id}` === targetKey) {
+          lastIndex = i - 1;
+        }
+      });
+      const newPanes = panes.filter((item) => `${item.id}` !== targetKey);
+      if (newPanes.length > 0 && activeKey === targetKey) {
+        if (lastIndex >= 0) {
+          setActiveKey(`${newPanes[lastIndex].id}`);
+        } else {
+          setActiveKey(`${newPanes[0].id}`);
+        }
+      }
+      setPanes(newPanes);
+      if (newPanes.length === 0) {
+        setActiveKey("");
+        setCollapsed(true);
+      }
+    }
+    if (onTabsEdit) {
+      onTabsEdit(targetKey, action);
+    }
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_react_split_pane.default,
+    {
+      split: "horizontal",
+      primary: "second",
+      minSize: collapsed ? MIN_SIZE : 160,
+      maxSize: 480,
+      size: collapsed ? MIN_SIZE : size,
+      onChange: (value) => {
+        setSize(value);
+        if (value === MIN_SIZE) {
+          setCollapsed(true);
+        } else if (value > MIN_SIZE && collapsed) {
+          setCollapsed(false);
+        }
+      },
+      className: `${prefix}-split-pane`
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "absolute", width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_Graph.default,
+      {
+        onLogAdd: (subTask) => {
+          const isExisted = (0, import_lodash.find)(panes, (item) => item.id === subTask.id);
+          if (!isExisted) {
+            setPanes([...panes, subTask]);
+          }
+          setCollapsed(false);
+          if (size === MIN_SIZE) {
+            setSize(DEFAULT_SIZE);
+          }
+          setActiveKey(subTask && `${subTask.id}`);
+        },
+        ...restProps
+      }
+    )),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-tabs-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+      import_design.Tabs,
+      {
+        type: "editable-card",
+        hideAdd: true,
+        activeKey,
+        onChange: (key) => {
+          setActiveKey(key);
+          if (onTabsChange) {
+            onTabsChange(key);
+          }
+        },
+        onEdit: handleEditLogWindow,
+        tabBarExtraContent: collapsed ? /* @__PURE__ */ import_react.default.createElement(
+          import_icons.UpOutlined,
+          {
+            onClick: () => {
+              setCollapsed(!collapsed);
+              if (size === MIN_SIZE) {
+                setSize(DEFAULT_SIZE);
+              }
+            }
+          }
+        ) : /* @__PURE__ */ import_react.default.createElement(
+          import_icons.DownOutlined,
+          {
+            onClick: () => {
+              setCollapsed(!collapsed);
+              if (size === MIN_SIZE) {
+                setSize(DEFAULT_SIZE);
+              }
+            }
+          }
+        )
+      },
+      panes.map((item) => /* @__PURE__ */ import_react.default.createElement(TabPane, { key: `${item.id}`, tab: `${item.name} (ID: ${item.id})` }, logLoading && item.status !== "RUNNING" ? /* @__PURE__ */ import_react.default.createElement(import_design.Spin, null) : subTaskLog, /* @__PURE__ */ import_react.default.createElement(import_design.Spin, { spinning: item.status === "RUNNING" })))
+    ))
+  );
+};
+var TaskGraph_default = (0, import_LocaleWrapper.default)({
+  componentName: "TaskGraph",
+  defaultLocale: import_zh_CN.default
+})(TaskGraph);

package/lib/TaskGraph/index.less

@@ -0,0 +1,117 @@
+@import '../variable.less';
+
+@prefix: ob-task-graph;
+
+.container {
+  position: relative;
+  padding-bottom: 0 !important;
+
+  .@{prefixCls}-page-header {
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+
+  .tech-page-container-header-inner {
+    background-color: #fafbff;
+
+    .@{prefixCls}-page-header-heading .@{prefixCls}-page-header-heading-title {
+      font-size: 16px;
+    }
+  }
+
+  .@{prefix}-split-pane {
+    top: auto !important;
+    height: calc(100% - 36px) !important;
+    min-height: calc(100% - 36px) !important;
+    margin: -24px;
+
+    .@{prefix}-tabs-wrapper {
+      width: 100%;
+    }
+
+    .@{prefixCls}-tabs {
+      height: 100%;
+
+      .@{prefixCls}-tabs-nav-container {
+        height: 32px;
+        padding-top: 4px;
+      }
+
+      .@{prefixCls}-tabs-bar {
+        margin-bottom: 0;
+        background-color: #fff;
+        border-bottom: none;
+      }
+
+      .@{prefixCls}-tabs-tab {
+        min-width: 120px;
+        height: 28px;
+        margin: 0;
+        padding: 0;
+        font-size: 12px;
+        line-height: 28px;
+        background-color: #fff;
+        border: none;
+        border-bottom: 1px solid #e8e8e8;
+        border-radius: 0;
+        transition: none;
+
+        &:hover {
+          color: @colorTextSecondary;
+        }
+
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 20px;
+          margin-top: 4px;
+          padding: 0 8px;
+          border-left: 1px solid #e8e8e8;
+        }
+      }
+
+      .@{prefixCls}-tabs-tab:last-child {
+        div {
+          border-left: none;
+        }
+      }
+
+      .@{prefixCls}-tabs-tab-active {
+        color: @colorText;
+        font-weight: normal;
+        background-color: #f7f8fc;
+        border-bottom: none;
+        border-left: none;
+        border-radius: 2px;
+
+        div {
+          border-left: none;
+        }
+
+        & + .@{prefixCls}-tabs-tab {
+          div {
+            border-left: none;
+          }
+        }
+      }
+
+      .@{prefixCls}-tabs-extra-content {
+        margin-right: 16px;
+        line-height: 32px;
+      }
+
+      .@{prefixCls}-tabs-content {
+        // TODO: 需要减去 64px，否则部分结尾的日志看不到，原因待排查
+        height: calc(100% - 64px);
+        padding: 16px;
+        overflow: scroll;
+        color: @colorTextSecondary;
+        line-height: 22px;
+        white-space: pre-wrap;
+        word-break: break-all;
+        background-color: #f7f8fc;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+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/TaskGraph/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 = {
+  successful: "Successful",
+  running: "Running",
+  failed: "Failed",
+  pending: "Pending",
+  taskId: "Task ID",
+  log: "View Log",
+  parameter: "View parameter",
+  stop: "Stop",
+  retry: "Retry",
+  skip: "Skip"
+};

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

@@ -0,0 +1,36 @@
+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/TaskGraph/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 = {
+  successful: "已完成",
+  running: "任务执行中",
+  failed: "任务失败",
+  pending: "未开始执行",
+  taskId: "任务 ID",
+  log: "查看日志",
+  parameter: "查看参数",
+  stop: "终止运行",
+  retry: "重新运行",
+  skip: "设置为成功"
+};

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

@@ -0,0 +1,36 @@
+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/TaskGraph/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 = {
+  successful: "已完成",
+  running: "任務執行中",
+  failed: "任務失敗",
+  pending: "未開始執行",
+  taskId: "任務 ID",
+  log: "查看日誌",
+  parameter: "查看參數",
+  stop: "終止運行",
+  retry: "重新運行",
+  skip: "設定為成功"
+};

package/lib/TaskGraph/register.d.ts

@@ -0,0 +1,7 @@
+export interface StatusItem {
+    label: string;
+    value: string;
+    color: string;
+    operations: string[];
+}
+export default function (statusList: StatusItem[], assetsPath: string): void;

package/lib/TaskGraph/register.js

@@ -0,0 +1,205 @@
+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/register.ts
+var register_exports = {};
+__export(register_exports, {
+  default: () => register_default
+});
+module.exports = __toCommonJS(register_exports);
+var import_g6 = __toESM(require("@antv/g6"));
+var import_design = require("@oceanbase/design");
+var import_util = require("@oceanbase/util");
+var import_lodash = require("lodash");
+var calcStrLen = (str) => {
+  let len = 0;
+  for (let i = 0; i < str.length; i++) {
+    if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
+      len++;
+    } else {
+      len += 2;
+    }
+  }
+  return len;
+};
+var fittingString = (str, maxWidth, fontSize) => {
+  const fontWidth = fontSize * 1.3;
+  maxWidth *= 2;
+  const width = calcStrLen(str) * fontWidth;
+  const ellipsis = "…";
+  if (width > maxWidth) {
+    const actualLen = Math.floor((maxWidth - 10) / fontWidth);
+    const result = str.substring(0, actualLen) + ellipsis;
+    return result;
+  }
+  return str;
+};
+function register_default(statusList, assetsPath) {
+  import_g6.default.registerNode(
+    "subTaskNode",
+    {
+      drawShape(cfg, group) {
+        const defaultNodeWidth = 200;
+        let nodeWidth = defaultNodeWidth;
+        let offsetX = 0;
+        if (cfg.name) {
+          const ellipsisName = fittingString(cfg.name, 180, 12);
+          const nameShape = group.addShape("text", {
+            attrs: {
+              // 使用裁剪后的 name
+              text: ellipsisName,
+              x: -30,
+              y: -5,
+              fill: import_design.token.colorText,
+              fontSize: 14,
+              fontFamily: "SFProText-Medium"
+            }
+          });
+          const nameBBox = nameShape.getBBox();
+          nodeWidth = nameBBox.width + 100;
+          if (nodeWidth > 280) {
+            nodeWidth = 280;
+          } else if (nodeWidth < 200) {
+            nodeWidth = 200;
+          }
+          offsetX = -(nodeWidth - defaultNodeWidth) / 2;
+          nameShape.translate(offsetX, 0);
+        }
+        const rect = group.addShape("rect", {
+          name: "rect",
+          attrs: {
+            x: -nodeWidth / 2,
+            y: -34,
+            width: nodeWidth,
+            height: 62,
+            radius: 30,
+            fill: "#fff",
+            lineWidth: 3,
+            shadowColor: "#e1e3e6",
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowOffsetY: 10
+          }
+        });
+        group.addShape("image", {
+          name: "statusImage",
+          attrs: {
+            x: -89 + offsetX,
+            y: -23,
+            width: 42,
+            height: 42,
+            // 任务状态图标的命名需要与状态名保持一致
+            img: `${assetsPath}/task_${(0, import_lodash.toLower)(cfg.status)}.svg`
+          }
+        });
+        group.addShape("text", {
+          name: "statusName",
+          attrs: {
+            text: (0, import_util.findByValue)(statusList, cfg.status).label,
+            x: -30 + offsetX,
+            y: 15,
+            fill: import_design.token.colorTextTertiary,
+            fontSize: 12,
+            fontFamily: "PingFangSC-Regular"
+          }
+        });
+        const moreGroup = group.addGroup({
+          name: "moreGroup"
+        });
+        moreGroup.addShape("image", {
+          attrs: {
+            // 右边距为 34
+            x: nodeWidth / 2 - 34 - 16,
+            y: 8,
+            width: 16,
+            height: 2.5,
+            cursor: "pointer",
+            img: `${assetsPath}/icon_ellipsis.svg`
+          }
+        });
+        moreGroup.addShape("rect", {
+          attrs: {
+            x: nodeWidth / 2 - 34 - 16,
+            y: 0,
+            width: 16,
+            height: 16,
+            cursor: "pointer",
+            fill: "transparent"
+          }
+        });
+        rect.toBack();
+        return rect;
+      },
+      update(cfg, node) {
+        const group = node.get("group");
+        const statusImage = group.findAllByName("statusImage") && group.findAllByName("statusImage")[0];
+        const statusName = group.findAllByName("statusName") && group.findAllByName("statusName")[0];
+        if (statusImage) {
+          statusImage.attr("img", `${assetsPath}/task_${(0, import_lodash.toLower)(cfg.status)}.svg`);
+        }
+        if (statusName) {
+          statusName.attr("text", (0, import_util.findByValue)(statusList, cfg.status).label);
+        }
+      }
+    },
+    "single-node"
+  );
+  import_g6.default.registerEdge(
+    "subTaskEdge",
+    {
+      curvePosition: [9 / 10, 1 / 10],
+      getShapeStyle(cfg) {
+        const targetNodeModel = cfg.targetNode && cfg.targetNode.get("model") || {};
+        const { status } = targetNodeModel;
+        const { startPoint, endPoint } = cfg;
+        const controlPoints = this.getControlPoints(cfg);
+        let points = [startPoint];
+        if (controlPoints) {
+          points = points.concat(controlPoints);
+        }
+        points.push(endPoint);
+        const path = this.getPath(points, cfg);
+        const statusColor = (0, import_util.findByValue)(statusList, status).color;
+        const style = {
+          ...import_g6.default.Global.defaultEdge.style,
+          path,
+          // 自定义结束箭头，箭头的边长为 10，夹角为 60 度
+          endArrow: {
+            path: `M${10 * Math.cos(Math.PI / 6)},${10 * Math.sin(Math.PI / 6)} L0,0 L${10 * Math.cos(Math.PI / 6)},-${10 * Math.sin(Math.PI / 6)}`,
+            fill: statusColor
+          },
+          lineWidth: 2,
+          stroke: statusColor,
+          ...cfg.style
+        };
+        return style;
+      }
+    },
+    "cubic-vertical"
+  );
+}

package/lib/TreeSearch/index.d.ts

@@ -0,0 +1,38 @@
+import type { DataNode } from 'antd/es/tree';
+import React from 'react';
+export interface Node {
+    originTitle?: string;
+    value?: string;
+    title?: string;
+    icon?: React.ReactNode;
+    children?: Node[];
+}
+export interface TreeNode extends Node {
+    originTitle: string;
+    key: string;
+    children?: TreeNode[];
+}
+export interface TreeSearchRef {
+    reset: () => void;
+    checkAll: () => void;
+    invertSelect: () => void;
+}
+interface IProps {
+    treeData: Node[];
+    titleRender?: (nodeData: DataNode) => React.ReactNode;
+    checkable?: boolean;
+    onChange?: (nodes: Node[]) => void;
+    width?: number | string;
+    height?: number;
+    /**
+     * 是否默认展开所有节点
+     */
+    defaultExpandAll?: boolean;
+    /** onChange 时只关注叶子节点的变化 */
+    followLeaf?: boolean;
+    /** 异步请求节点数据的回调函数 */
+    loadData?: (data: unknown) => Promise<void>;
+    searchStyle?: {};
+}
+declare const _default: React.ForwardRefExoticComponent<IProps & React.RefAttributes<TreeSearchRef>>;
+export default _default;