@oceanbase/ui
Version:
The UI library based on OceanBase Design
271 lines (269 loc) • 12.5 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { findByValue } from '@oceanbase/util';
import { Dropdown, Menu, Typography } from '@oceanbase/design';
import { isEqual } from 'lodash';
import React from 'react';
import { token } from '@oceanbase/design';
import GraphToolbar from "../GraphToolbar";
import LocaleWrapper from "../locale/LocaleWrapper";
import { getPrefix } from "../_util";
import zhCN from "./locale/zh-CN";
import "./graph.less";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Text = Typography.Text;
var prefix = getPrefix('task-graph-item');
var TaskGraph = /*#__PURE__*/function (_React$PureComponent) {
_inherits(TaskGraph, _React$PureComponent);
var _super = _createSuper(TaskGraph);
function TaskGraph(props) {
var _this;
_classCallCheck(this, TaskGraph);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "main", null);
_defineProperty(_assertThisInitialized(_this), "menu", null);
_defineProperty(_assertThisInitialized(_this), "graph", void 0);
_defineProperty(_assertThisInitialized(_this), "drawGraph", function () {
var data = _this.props.data;
if (_this.graph && _this.graph.changeData) {
_this.graph.changeData(data);
} else {
var splitPane = document.getElementsByClassName('SplitPane') && document.getElementsByClassName('SplitPane')[0];
var width = _this.main && _this.main.scrollWidth || 1200;
// 高度优先级: 元素本身的高度 => 分隔面板的高度 => 500
// 还需要减去下方的 log 条的最小高度 56px
var height = (_this.main && _this.main.scrollHeight || splitPane.scrollHeight || 500) - 65;
import('@antv/g6').then(function (G6) {
var graph = new G6.Graph({
container: 'container',
width: width,
height: 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: token.colorPrimary,
fill: '#e6f7ff'
}
},
modes: {
default: ['drag-canvas', 'zoom-canvas', 'click-select']
}
});
var canvas = graph.get('canvas');
// 关闭局部渲染，避免渲染出现拖影
canvas.set('localRefresh', false);
graph.data(data);
graph.render();
graph.fitView();
// 监听 moreGroup 的 click 事件
canvas.on('moreGroup:click', function (e) {
var subTaskNode = e.currentTarget && e.currentTarget.getParent();
var model = subTaskNode && subTaskNode.get('item') && subTaskNode.get('item').getModel();
_this.setState({
currentSubTask: model
}, function () {
if (!_this.menu) {
_this.menu = document.getElementById('menu');
}
_this.menu.style.left = "".concat(e.x, "px");
// y 坐标减去高度，并再往上 5px
_this.menu.style.top = "".concat(e.y - height - 5, "px");
});
});
// 监听节点的 mouseleave 事件
graph.on('node:mouseleave', function () {
if (!_this.menu) {
_this.menu = document.getElementById('menu');
}
_this.menu.style.left = '-1500px';
});
_this.graph = graph;
// 强制更新一次视图，否则 this.graph 不会更新
_this.forceUpdate();
});
}
});
_defineProperty(_assertThisInitialized(_this), "handleMenuClick", function (_ref) {
var key = _ref.key;
var onMenuClick = _this.props.onMenuClick;
var currentSubTask = _this.state.currentSubTask;
// 成功的回调
var onSuccess = function onSuccess() {
_this.setState({
currentSubTask: null
});
};
if (key === 'log') {
_this.log();
}
if (onMenuClick) {
onMenuClick(key, currentSubTask, onSuccess);
}
if (_this.menu) {
_this.menu.style.left = '-1500px';
}
});
_defineProperty(_assertThisInitialized(_this), "log", function () {
var onLogAdd = _this.props.onLogAdd;
var currentSubTask = _this.state.currentSubTask;
if (onLogAdd) {
onLogAdd(currentSubTask);
}
});
var locale = props.locale;
_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']
}]
};
return _this;
}
_createClass(TaskGraph, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
var _this$props$assetsPat = this.props.assetsPath,
assetsPath = _this$props$assetsPat === void 0 ? '/assets' : _this$props$assetsPat;
var statusList = this.state.statusList;
import("./register").then(function (register) {
register.default(statusList, assetsPath);
_this2.menu = document.getElementById('menu');
_this2.drawGraph();
});
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var data = this.props.data;
if (!isEqual(data, prevProps.data)) {
this.drawGraph();
}
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var locale = this.props.locale;
var _this$state = this.state,
statusList = _this$state.statusList,
currentSubTask = _this$state.currentSubTask;
var operations = findByValue(statusList, currentSubTask && currentSubTask.status).operations || [];
var 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'
}];
var filterMenus = menus.filter(function (item) {
return operations.includes(item.value);
});
var menu = /*#__PURE__*/_jsx(Menu, {
id: "menu",
onClick: this.handleMenuClick,
style: {
left: -1500
},
children: filterMenus.map(function (item) {
return item.value === 'taskId' ? /*#__PURE__*/_jsx("div", {
className: "".concat(prefix, "-task-id-wrapper")
// 下拉菜单数 > 1 时才有下边框
,
style: filterMenus.length > 1 ? {
borderBottom: '1px solid #e8e8e8'
} : {},
children: /*#__PURE__*/_jsx(Text, {
copyable: true,
children: "ID: ".concat(currentSubTask && currentSubTask.id)
})
}) : /*#__PURE__*/_jsx(Menu.Item, {
children: item.label
}, item.value);
})
});
return /*#__PURE__*/_jsxs("div", {
children: [this.graph && /*#__PURE__*/_jsx(GraphToolbar, {
mode: "fixed",
graph: this.graph
}), /*#__PURE__*/_jsx("div", {
id: "container",
ref: function ref(node) {
_this3.main = node;
}
}), /*#__PURE__*/_jsx(Dropdown, {
visible: true
// Support for antd 5.0
,
open: true,
overlay: menu,
overlayClassName: "".concat(prefix, "-menu"),
children: /*#__PURE__*/_jsx("span", {})
})]
});
}
}]);
return TaskGraph;
}(React.PureComponent);
export default LocaleWrapper({
componentName: 'TaskGraph',
defaultLocale: zhCN
})(TaskGraph);