@oceanbase/ui 1.0.0-alpha.0 → 1.0.0-alpha.10

package/lib/TaskGraph/index.js

@@ -1,164 +0,0 @@
-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("@oceanbase/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) {
-    var _a, _b;
-    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(`${(_a = newPanes == null ? void 0 : newPanes[lastIndex]) == null ? void 0 : _a.id}`);
-        } else {
-          setActiveKey(`${(_b = newPanes == null ? void 0 : newPanes[0]) == null ? void 0 : _b.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

@@ -1,117 +0,0 @@
-@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.d.ts

@@ -1,13 +0,0 @@
-declare const _default: {
-    successful: string;
-    running: string;
-    failed: string;
-    pending: string;
-    taskId: string;
-    log: string;
-    parameter: string;
-    stop: string;
-    retry: string;
-    skip: string;
-};
-export default _default;

package/lib/TaskGraph/locale/zh-CN.d.ts

@@ -1,13 +0,0 @@
-declare const _default: {
-    successful: string;
-    running: string;
-    failed: string;
-    pending: string;
-    taskId: string;
-    log: string;
-    parameter: string;
-    stop: string;
-    retry: string;
-    skip: string;
-};
-export default _default;

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

@@ -1,36 +0,0 @@
-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.d.ts

@@ -1,13 +0,0 @@
-declare const _default: {
-    successful: string;
-    running: string;
-    failed: string;
-    pending: string;
-    taskId: string;
-    log: string;
-    parameter: string;
-    stop: string;
-    retry: string;
-    skip: string;
-};
-export default _default;

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

@@ -1,36 +0,0 @@
-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

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

package/lib/TaskGraph/register.js

@@ -1,205 +0,0 @@
-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"
-  );
-}