@oceanbase/design 0.1.2 → 0.2.0

package/lib/TaskGraph/Graph.js

@@ -1,259 +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/Graph.tsx
-var Graph_exports = {};
-__export(Graph_exports, {
-  default: () => Graph_default
-});
-module.exports = __toCommonJS(Graph_exports);
-var import_react = __toESM(require("react"));
-var import_antd = require("antd");
-var import_lodash = require("lodash");
-var import_util = require("@oceanbase/util");
-var import_g6 = __toESM(require("@antv/g6"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_GraphToolbar = __toESM(require("../GraphToolbar"));
-var import_register = __toESM(require("./register"));
-var import_util2 = require("../_util");
-var import_StaticFunction = require("../StaticFunction");
-var import_graph = require("./graph.less");
-var { Text } = import_antd.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_StaticFunction.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_antd.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_antd.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_antd.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

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

@@ -1,17 +0,0 @@
-import React from 'react';
-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: React.ForwardRefExoticComponent<TaskGraphProps & React.RefAttributes<React.ComponentType<TaskGraphProps>>> & import("hoist-non-react-statics").NonReactStatics<React.ComponentType<TaskGraphProps>, {}>;
-export default _default;

package/lib/TaskGraph/index.js

@@ -1,163 +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_react = __toESM(require("react"));
-var import_antd = require("antd");
-var import_lodash = require("lodash");
-var import_icons = require("@ant-design/icons");
-var import_react_split_pane = __toESM(require("react-split-pane"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_Graph = __toESM(require("./Graph"));
-var import_util = require("../_util");
-var import_index = require("./index.less");
-var { TabPane } = import_antd.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_antd.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_antd.Spin, null) : subTaskLog, /* @__PURE__ */ import_react.default.createElement(import_antd.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/en-US.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/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.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;