@cloudtower/eagle 0.27.70 → 0.27.71-alpha.0

package/dist/esm/UIKitProvider/index.js

@@ -1,6 +1,6 @@
 import { parrotI18n } from '@cloudtower/parrot';
-import { antdKit } from '../core/antd.js';
 import _message from '../core/message/index.js';
+import { antdKit } from '../legacy-antd.js';
 import { ConfigProvider } from 'antd';
 import enUS from 'antd/lib/locale/en_US';
 import zhCN from 'antd/lib/locale/zh_CN';
@@ -27,6 +27,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const kitContext = createContext(antdKit);
+const MessageContext = createContext(_message);
 const UIKitProvider = (props) => {
   const {
     children,
@@ -35,14 +36,16 @@ const UIKitProvider = (props) => {
     lng = "en-US",
     getPopupContainer
   } = props;
-  const _kit = useMemo(() => {
+  const batchMessage = useMemo(() => {
     if ((message == null ? void 0 : message.batch) != null) {
-      return __spreadProps(__spreadValues({}, kit), {
-        message: createBatchMessageMethods(_message, message.batch)
-      });
+      return createBatchMessageMethods(_message, message.batch);
     }
-    return kit;
-  }, [kit, message == null ? void 0 : message.batch]);
+  }, [message == null ? void 0 : message.batch]);
+  const _kit = useMemo(() => {
+    return __spreadProps(__spreadValues({}, kit), {
+      message: batchMessage != null ? batchMessage : _message
+    });
+  }, [batchMessage, kit]);
   useEffect(() => {
     _message.config({
       maxCount: message == null ? void 0 : message.maxCount
@@ -53,7 +56,7 @@ const UIKitProvider = (props) => {
       parrotI18n.changeLanguage(lng);
     }
   }, [lng]);
-  return /* @__PURE__ */ React__default.createElement(kitContext.Provider, { value: _kit }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(kitContext.Provider, { value: _kit }, /* @__PURE__ */ React__default.createElement(MessageContext.Provider, { value: batchMessage != null ? batchMessage : _message }, /* @__PURE__ */ React__default.createElement(
     ConfigProvider,
     {
       autoInsertSpaceInButton: false,
@@ -61,11 +64,14 @@ const UIKitProvider = (props) => {
       getPopupContainer
     },
     children
-  ));
+  )));
 };
 var UIKitProvider$1 = UIKitProvider;
 const useUIKit = () => {
   return useContext(kitContext);
 };
+const useMessage = () => {
+  return useContext(MessageContext);
+};
 
-export { UIKitProvider$1 as default, kitContext, useUIKit };
+export { MessageContext, UIKitProvider$1 as default, kitContext, useMessage, useUIKit };

package/dist/esm/antd.js

@@ -0,0 +1,16 @@
+import { DatePicker, List, Menu, Skeleton, Tabs, Timeline, Typography, Upload, Select, Modal } from 'antd';
+export { Badge as AntdBadge, Button as AntdButton, Checkbox as AntdCheckbox, Collapse as AntdCollapse, Divider as AntdDivider, Drawer as AntdDrawer, Empty as AntdEmpty, Input as AntdInput, message as AntdMessage, Select as AntdSelect, Steps as AntdSteps, Switch as AntdSwitch, Table as AntdTable, TimePicker as AntdTimePicker, Tooltip as AntdTooltip, TreeSelect as AntdTreeSelect, AutoComplete, Col, DatePicker, Dropdown, Layout, List, Menu, Popover, Row, Skeleton, Tabs, Timeline, Tree, Typography, Upload } from 'antd';
+
+const DatePickerRangePicker = DatePicker.RangePicker;
+const ListItem = List.Item;
+const MenuItemGroup = Menu.ItemGroup;
+const SkeletonButton = Skeleton.Button;
+const TabsTabPane = Tabs.TabPane;
+const TimelineItem = Timeline.Item;
+const TypographyText = Typography.Text;
+const UploadDragger = Upload.Dragger;
+const AntdOption = Select.Option;
+const AntdSelectOptGroup = Select.OptGroup;
+const AntdModal = Modal;
+
+export { AntdModal, AntdOption, AntdSelectOptGroup, DatePickerRangePicker, ListItem, MenuItemGroup, SkeletonButton, TabsTabPane, TimelineItem, TypographyText, UploadDragger };

package/dist/esm/core/ButtonGroup/index.js

@@ -101,5 +101,6 @@ const ButtonGroup = React__default.forwardRef((props, ref) => {
     }, title || children));
   }));
 });
+var ButtonGroup$1 = ButtonGroup;
 
-export { ButtonStyle, ButtonGroup as default };
+export { ButtonStyle, ButtonGroup$1 as default };

package/dist/esm/core/Cascader/index.js

@@ -1,6 +1,8 @@
 import { HierarchyTriangleRight16PrimaryIcon } from '@cloudtower/icons-react';
 import { CascaderLargeDropdown, CascaderSmallDropdown, CascaderDropdown, CascaderInputStyle } from './cascader.style.js';
+export { CascaderDefaultHeader, CascaderDefaultHeaderContainer, CascaderDefaultHeaderSearch, CascaderDefaultOptionLabel, CascaderNotData, DoubleRowOptionStyleWrapper } from './cascader.style.js';
 import { PresetCascaderRender, NotDataContent, defaultTagRender } from './cascader.widget.js';
+export { CascaderDoubleRowOption, CascaderOptionWithCount, PresetCascaderHeader } from './cascader.widget.js';
 import Icon from '../Icon/index.js';
 import { Antd5PrefixCls } from '../../utils/constants.js';
 import { Cascader as Cascader$1 } from 'antd5';
@@ -69,4 +71,4 @@ const Cascader = (props) => {
   );
 };
 
-export { Cascader };
+export { Cascader, CascaderDropdown, CascaderInputStyle, CascaderLargeDropdown, CascaderSmallDropdown, NotDataContent, PresetCascaderRender, defaultTagRender };

package/dist/esm/core/DonutChart/index.js

@@ -8,6 +8,14 @@ import { Typo } from '../Typo/index.js';
 import OverflowTooltip from '../../coreX/OverflowTooltip/index.js';
 import { Color } from '../../styles/token/color.js';
 
+var DonutChartColor = /* @__PURE__ */(DonutChartColor2 => {
+  DonutChartColor2["RED"] = "red";
+  DonutChartColor2["GREEN"] = "green";
+  DonutChartColor2["YeLLOW"] = "yellow";
+  DonutChartColor2["BLUE"] = "blue";
+  DonutChartColor2["PURPLE"] = "purple";
+  return DonutChartColor2;
+})(DonutChartColor || {});
 const DonutChartWrapper = /*#__PURE__*/styled('div')({
   name: "DonutChartWrapper",
   class: "E_d1bw7c5z",
@@ -158,4 +166,4 @@ const DonutChart = ({
 };
 var DonutChart$1 = DonutChart;
 
-export { DonutChart$1 as default, formatChartData, formatCollapse };
+export { DonutChartColor, DonutChart$1 as default, formatChartData, formatCollapse };

package/dist/esm/core/Error/index.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const Error = ({ error }) => /* @__PURE__ */ React__default.createElement("div", { className: "error" }, String(error));
+var Error$1 = Error;
+
+export { Error$1 as default };

package/dist/esm/core/ErrorBoundary/index.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { withTranslation } from 'react-i18next';
+
+class ErrorBoundary extends React__default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ React__default.createElement("div", { title: String(this.state.error) }, this.props.t("components.unknow_error"));
+    }
+    return this.props.children;
+  }
+}
+var ErrorBoundary$1 = withTranslation()(ErrorBoundary);
+
+export { ErrorBoundary$1 as default };

package/dist/esm/core/Metric/MetricActions.js

@@ -0,0 +1,12 @@
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import React__default from 'react';
+
+const MetricActions = (props) => {
+  const { info, dropdown } = props;
+  const { current, max } = info;
+  const { t } = useParrotTranslation();
+  return /* @__PURE__ */ React__default.createElement("div", { className: "metric-extra" }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("span", { className: "info-item" }, t("metric.max"), "\uFF1A", max), /* @__PURE__ */ React__default.createElement("span", { className: "info-item" }, t("metric.current"), "\uFF1A", current)), dropdown);
+};
+var MetricActions$1 = MetricActions;
+
+export { MetricActions$1 as default };

package/dist/esm/core/Metric/MetricLegend.js

@@ -0,0 +1,62 @@
+import { DoubleRightOutlined } from '@ant-design/icons';
+import { ColorBlockStyle, LegendStyle, ExtraResource, LegendItemStyle } from './styled.js';
+import { ExtraOverflow } from '../Overflow/index.js';
+import Truncate from '../Truncate/index.js';
+import { Dropdown, Menu } from 'antd';
+import cs from 'classnames';
+import React__default from 'react';
+
+const ColorBlock = ({ background }) => /* @__PURE__ */ React__default.createElement("div", { className: cs(ColorBlockStyle, "color-block"), style: { background } });
+const MetricLegend = (props) => {
+  const { deselected, onClick, legends } = props;
+  return /* @__PURE__ */ React__default.createElement(
+    ExtraOverflow,
+    {
+      className: LegendStyle,
+      extraEl: (end) => /* @__PURE__ */ React__default.createElement(
+        Dropdown,
+        {
+          overlayClassName: ExtraResource,
+          overlay: /* @__PURE__ */ React__default.createElement(Menu, null, legends.slice(end).map((legend, idx) => {
+            return /* @__PURE__ */ React__default.createElement(
+              Menu.Item,
+              {
+                className: cs(
+                  LegendItemStyle,
+                  deselected.includes(legend.id) && "deselected"
+                ),
+                key: legend.id,
+                onClick: () => onClick(legend.id)
+              },
+              /* @__PURE__ */ React__default.createElement(ColorBlock, { background: legend.color }),
+              /* @__PURE__ */ React__default.createElement("span", null, legend.name)
+            );
+          }))
+        },
+        /* @__PURE__ */ React__default.createElement(DoubleRightOutlined, { rotate: 90 })
+      ),
+      els: legends.map((legend) => {
+        return /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: cs(
+              LegendItemStyle,
+              deselected.includes(legend.id) && "deselected"
+            ),
+            key: legend.id,
+            onClick: () => onClick(legend.id)
+          },
+          /* @__PURE__ */ React__default.createElement(ColorBlock, { background: legend.color }),
+          /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(Truncate, { text: legend.name, len: 50, backLen: 20 }))
+        );
+      })
+    }
+  );
+};
+const LegendComponent = (props) => {
+  const { name, color } = props;
+  return /* @__PURE__ */ React__default.createElement("div", { className: cs(LegendItemStyle, "legend-component") }, /* @__PURE__ */ React__default.createElement(ColorBlock, { background: color }), /* @__PURE__ */ React__default.createElement("span", null, name));
+};
+var MetricLegend$1 = MetricLegend;
+
+export { ColorBlock, LegendComponent, MetricLegend$1 as default };

package/dist/esm/core/Metric/Pointer.js

@@ -0,0 +1,38 @@
+import { useKitSelector } from '../KitStoreProvider/index.js';
+import _ from 'lodash';
+import React__default from 'react';
+
+const Pointer = ({ uuid = "", metricWidth }) => {
+  const pointers = useKitSelector(
+    (state) => _.get(state, "chart.pointers")
+  );
+  if (!(pointers == null ? void 0 : pointers[uuid])) {
+    return null;
+  }
+  const { left = 0, text } = pointers[uuid];
+  let dis = -99999999;
+  const threshold = 50;
+  if (metricWidth) {
+    if (left <= threshold) {
+      dis = threshold;
+    } else if (left >= metricWidth - threshold) {
+      dis = metricWidth - threshold;
+    } else {
+      dis = left;
+    }
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: {
+        transform: `translate(${dis}px)`,
+        position: "absolute",
+        whiteSpace: "nowrap"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "pointer-wrapper" }, text)
+  );
+};
+var Pointer$1 = Pointer;
+
+export { Pointer$1 as default };

package/dist/esm/core/Metric/RenderChart.js

@@ -0,0 +1,195 @@
+import { useKitDispatch } from '../KitStoreProvider/index.js';
+import { convertDataStruct } from './metric.js';
+import MetricActions from './MetricActions.js';
+import MetricLegend from './MetricLegend.js';
+import { MetricLegendTabStyle } from './styled.js';
+import TooltipFormatter from './TooltipFormatter.js';
+import { GraphType } from './type.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import cs from 'classnames';
+import dayjs from 'dayjs';
+import React__default, { useState, useMemo, useCallback } from 'react';
+import { ResponsiveContainer, AreaChart, XAxis, YAxis, Tooltip, Area } from 'recharts';
+import { ChartActions } from '../../store/chart.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const RenderChart = (props) => {
+  const {
+    metricName,
+    showLegend,
+    syncId,
+    showXAxis,
+    yAxisAlign,
+    height,
+    type,
+    mode = "legend",
+    dropdown,
+    onLabelsChange,
+    metric,
+    yAxisProps,
+    xAxisProps,
+    actionsProps,
+    tooltipProps
+  } = props;
+  const { t } = useParrotTranslation();
+  const dispatch = useKitDispatch();
+  const [deselected, setDeselected] = useState([]);
+  const streams = useMemo(() => metric.sample_streams, [metric]);
+  const legends = useMemo(() => {
+    return metric.sample_streams.map((stream) => stream.legend);
+  }, [metric.sample_streams]);
+  const areaChartData = useMemo(
+    () => convertDataStruct(streams.map((stream) => stream.points)),
+    [streams]
+  );
+  const onLegendClick = useCallback(
+    (id) => {
+      setDeselected((prev) => {
+        const include = prev.includes(id);
+        const newDeselected = include ? prev.filter((r) => r !== id) : [...prev, id];
+        onLabelsChange == null ? void 0 : onLabelsChange(newDeselected);
+        return newDeselected.length >= streams.length ? prev : newDeselected;
+      });
+    },
+    [onLabelsChange, streams]
+  );
+  const hidePointer = useCallback(() => {
+    dispatch({
+      type: ChartActions.SET_POINTER,
+      payload: { visible: false, uuid: syncId }
+    });
+  }, [dispatch, syncId]);
+  const handleMouseMove = useCallback(
+    (e) => {
+      var _a;
+      if (e.isTooltipActive) {
+        const { chartX, activePayload } = e;
+        if (!((_a = activePayload == null ? void 0 : activePayload[0]) == null ? void 0 : _a.payload)) {
+          return;
+        }
+        dispatch({
+          type: ChartActions.SET_POINTER,
+          payload: {
+            uuid: syncId,
+            visible: true,
+            left: chartX,
+            text: dayjs(Number(activePayload[0].payload.t)).format(
+              "MM-DD HH:mm:ss"
+            ),
+            value: activePayload[0].payload.v
+          }
+        });
+      }
+    },
+    [dispatch, syncId]
+  );
+  if (!(streams == null ? void 0 : streams.length) || streams.every((stream) => {
+    var _a;
+    return !((_a = stream.points) == null ? void 0 : _a.length);
+  })) {
+    return /* @__PURE__ */ React__default.createElement("div", { className: MetricLegendTabStyle }, /* @__PURE__ */ React__default.createElement("div", { className: "name-toolbar" }, /* @__PURE__ */ React__default.createElement(
+      MetricLegend,
+      {
+        streams,
+        metricName,
+        deselected,
+        onClick: onLegendClick,
+        legends
+      }
+    )), /* @__PURE__ */ React__default.createElement("div", { className: cs("content", mode === "single" && "single-content") }, t("metric.empty")));
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "metric-toolbar" }, showLegend && /* @__PURE__ */ React__default.createElement(
+    MetricLegend,
+    {
+      streams,
+      metricName,
+      deselected,
+      onClick: onLegendClick,
+      legends
+    }
+  ), (actionsProps == null ? void 0 : actionsProps.show) && /* @__PURE__ */ React__default.createElement(MetricActions, __spreadValues({ dropdown }, actionsProps))), /* @__PURE__ */ React__default.createElement(ResponsiveContainer, { height }, /* @__PURE__ */ React__default.createElement(
+    AreaChart,
+    {
+      style: { backgroundColor: "white" },
+      margin: showLegend ? { top: 10, left: 10, right: 10, bottom: 0 } : { top: 20, left: 10, right: 10, bottom: 5 },
+      data: areaChartData,
+      syncId,
+      onMouseLeave: hidePointer,
+      onMouseMove: handleMouseMove
+    },
+    /* @__PURE__ */ React__default.createElement(
+      XAxis,
+      __spreadValues({
+        hide: !showXAxis,
+        dataKey: "t",
+        axisLine: false,
+        tickLine: false,
+        type: "number"
+      }, xAxisProps)
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      YAxis,
+      __spreadValues({
+        width: 200,
+        mirror: true,
+        allowDataOverflow: true,
+        axisLine: false,
+        tickLine: false,
+        orientation: yAxisAlign
+      }, yAxisProps)
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Tooltip,
+      __spreadValues({
+        content: tooltipProps.format && /* @__PURE__ */ React__default.createElement(
+          TooltipFormatter,
+          {
+            deselected,
+            legends,
+            format: tooltipProps.format
+          }
+        )
+      }, tooltipProps)
+    ),
+    streams.map((item, index) => {
+      if (deselected.includes(item.legend.id)) {
+        return null;
+      }
+      return /* @__PURE__ */ React__default.createElement(
+        Area,
+        {
+          key: index,
+          dataKey: `v${index}`,
+          stackId: type === GraphType.Stack ? "stack" : void 0,
+          stroke: item.legend.stroke ? `${item.legend.color}1A` : item.legend.color,
+          fill: item.legend.fill,
+          isAnimationActive: false,
+          activeDot: {
+            stroke: item.legend.color,
+            r: 4,
+            strokeWidth: 2,
+            fill: "white"
+          }
+        }
+      );
+    })
+  )));
+};
+var RenderChart$1 = RenderChart;
+
+export { RenderChart$1 as default };

package/dist/esm/core/Metric/TooltipFormatter.js

@@ -0,0 +1,39 @@
+import { ColorBlock } from './MetricLegend.js';
+import { TooltipWrapper, TooltipColumn } from './styled.js';
+import React__default from 'react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const TooltipFormatter = (props) => {
+  const { active, payload, deselected, legends, format } = props;
+  if (!active || !(payload == null ? void 0 : payload.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(TooltipWrapper, null, payload.map((item, index) => {
+    return __spreadProps(__spreadValues({}, item), {
+      legend: legends[index]
+    });
+  }).sort((a, b) => b.value - a.value).map((item) => {
+    return deselected.includes(item.legend.id) ? null : /* @__PURE__ */ React__default.createElement(TooltipColumn, { key: item.legend.id }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(ColorBlock, { background: item.legend.color }), item.legend.name), /* @__PURE__ */ React__default.createElement("div", { className: "column-value" }, format(item)));
+  }));
+};
+var TooltipFormatter$1 = TooltipFormatter;
+
+export { TooltipFormatter$1 as default };

package/dist/esm/core/Metric/index.js

@@ -0,0 +1,52 @@
+import { parrotI18n } from '@cloudtower/parrot';
+import ErrorBoundary from '../ErrorBoundary/index.js';
+import Pointer from './Pointer.js';
+import RenderChart from './RenderChart.js';
+import { MetricWrapper } from './styled.js';
+import cs from 'classnames';
+import React__default, { useState, useRef, useEffect } from 'react';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const Metric = (props) => {
+  const {
+    height = 154,
+    showPointer = true,
+    showLegend = true,
+    showXaxis = false,
+    chartProps
+  } = props;
+  const [width, setWidth] = useState();
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    setWidth((_a = wrapperRef.current) == null ? void 0 : _a.offsetWidth);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { i18n: parrotI18n }, /* @__PURE__ */ React__default.createElement(
+    MetricWrapper,
+    {
+      className: cs("metric-wrapper", !showXaxis && "hidden-xaxis"),
+      ref: wrapperRef,
+      style: { height: showLegend ? height + 30 : height }
+    },
+    /* @__PURE__ */ React__default.createElement(RenderChart, __spreadValues({}, chartProps)),
+    showPointer && /* @__PURE__ */ React__default.createElement(Pointer, { uuid: chartProps.syncId, metricWidth: width })
+  ));
+};
+var Metric$1 = Metric;
+
+export { Pointer, RenderChart, Metric$1 as default };