kafka-manager 2.0

kafka-manager-console/src/container/common-curve/config.ts

@@ -0,0 +1,85 @@
+import { EChartOption } from 'echarts/lib/echarts';
+import moment from 'moment';
+
+export interface ILineData {
+  value: number;
+  timeStamp: number;
+}
+export interface ICurve {
+  title?: string;
+  path: string;
+  colors: string[];
+  parser?: (option: ICurve, data: ILineData) => EChartOption;
+  message?: string;
+  unit?: string;
+  api?: any;
+}
+
+export const LEGEND_HEIGHT = 18;
+export const defaultLegendPadding = 10;
+export const GRID_HEIGHT = 192;
+export const EXPAND_GRID_HEIGHT = 250;
+export const TITLE_HEIGHT = 40;
+export const UNIT_HEIGHT = 20;
+export const LEGEND_PADDING = 10;
+export const OPERATOR_TITLE_HEIGHT = 92;
+
+export const baseLineLegend = {
+  itemWidth: 12,
+  itemHeight: 2,
+  icon: 'rect',
+  textStyle: {
+    lineHeight: LEGEND_HEIGHT,
+  },
+};
+
+export const baseLineGrid = {
+  left: '0',
+  right: '2%',
+  top: TITLE_HEIGHT + UNIT_HEIGHT,
+  height: GRID_HEIGHT,
+  containLabel: true,
+};
+
+export const baseAxisStyle = {
+  nameTextStyle: {
+    color: '#A0A4AA',
+  },
+  axisLine: {
+    lineStyle: {
+      color: '#A0A4AA',
+    },
+  },
+  splitline: {
+    lineStyle: {
+      color: '#A0A4AA',
+    },
+  },
+};
+
+export const noAxis = {
+  axisLine: {
+    lineStyle: {
+      color: '#A0A4AA',
+    },
+    show: false,
+  },
+  axisTick: {
+    show: false,
+  },
+};
+
+export const getHight = (options: EChartOption) => {
+  let grid = options ? options.grid as EChartOption.Grid : null;
+  if (!options || !grid) grid = baseLineGrid;
+  return Number(grid.height) + getLegendHight(options) + Number(grid.top) + LEGEND_PADDING + UNIT_HEIGHT;
+};
+
+export const getLegendHight = (options: EChartOption) => {
+  if (!options) return 0;
+  if (options.legend.show === false) return 0;
+  const legendHight = options.legend.textStyle.lineHeight + defaultLegendPadding;
+  if (options.legend.orient !== 'vertical') return legendHight;
+  const legendLength = options.series.length;
+  return legendHight * legendLength;
+};

kafka-manager-console/src/container/common-curve/index.less

@@ -0,0 +1,27 @@
+
+.common-chart-wrapper {
+  position: relative;
+}
+.charts-op {
+  position: absolute;
+  font-size: 18px;
+  top: 0;
+  right: 30px;
+  i {
+    cursor: pointer;
+    font-size: 14px;
+  }
+  i:hover {
+    color: #F27E49;
+  }
+  .ml-17 {
+    margin-left: 10px;
+  }
+}
+.charts-title {
+  position: absolute;
+  color: #000000;
+  font-family: PingFangSC-Medium;
+  top: 0;
+  left: 0;
+}

kafka-manager-console/src/container/common-curve/index.tsx

@@ -0,0 +1,118 @@
+import { EChartOption } from 'echarts';
+import { observer } from 'mobx-react';
+import React from 'react';
+import { curveInfo } from 'store/curve-info';
+import { fullScreen } from 'store/full-screen';
+import { getHight, EXPAND_GRID_HEIGHT, ICurve } from './config';
+import './index.less';
+import { Spin, Icon } from 'component/antd';
+import LineChart, { hasData } from 'component/chart/line-chart';
+
+export interface ICommonCurveProps {
+  options: ICurve;
+  parser?: (option: ICurve, data: any[]) => EChartOption;
+}
+
+@observer
+export class CommonCurve extends React.Component<ICommonCurveProps> {
+
+  public componentDidMount() {
+    this.refresh(false);
+  }
+
+  public componentWillUnmount() {
+    const { path } = this.props.options;
+    curveInfo.setCurveData(path, null);
+  }
+
+  public refresh = (refresh?: boolean) => {
+    curveInfo.getCommonCurveData(this.props.options, this.props.parser, refresh);
+  }
+
+  public expand = () => {
+    const curveOption = this.getCurveData();
+    const options = Object.assign({}, curveOption, {
+      grid: {
+        ...curveOption.grid,
+        height: EXPAND_GRID_HEIGHT,
+      },
+    });
+    const loading = this.getLoading();
+    fullScreen.show(this.renderCurve(options, loading, true));
+  }
+
+  public renderOpBtns = (options: EChartOption, expand = false) => {
+    const data = hasData(options);
+    return (
+      <div className="charts-op" key="op">
+        {!expand ? <Icon type="reload" onClick={() => this.refresh(true)} key="refresh" /> : null}
+        {data ? this.renderExpand(expand) : null}
+      </div>
+    );
+  }
+
+  public renderExpand = (expand = false) => {
+    if (expand) return <Icon type="close" onClick={fullScreen.close} key="close" />;
+    return <Icon type="fullscreen" className="ml-17" onClick={this.expand} key="full-screen" />;
+  }
+
+  public renderTitle = () => {
+    const { title } = this.props.options;
+    return (
+      <div className="charts-title" key="title">{title}</div>
+    );
+  }
+
+  public getCurveData = () => {
+    const { path } = this.props.options;
+    return curveInfo.curveData[path];
+  }
+
+  public getLoading = () => {
+    const { path } = this.props.options;
+    return curveInfo.curveLoading[path] || false;
+  }
+
+  public renderOthers = () => null as JSX.Element;
+
+  public renderNoData = (height?: number) => {
+    const style = { height: `${height}px`, lineHeight: `${height}px` };
+    return <div className="no-data-info" style={{ ...style }} key="noData">暂无数据</div>;
+  }
+
+  public renderLoading = (height?: number) => {
+    const style = { height: `${height}px`, lineHeight: `${height}px` };
+    return <div className="no-data-info" style={{ ...style }} key="loading"><Spin /></div>;
+  }
+
+  public renderEchart = (options: EChartOption, loading = false) => {
+    const height = getHight(options);
+    const data = hasData(options);
+
+    if (loading) return this.renderLoading(height);
+    if (!data) return this.renderNoData(height);
+    return <LineChart height={height} options={options} key="chart" />;
+  }
+
+  public renderCurve = (options: EChartOption, loading: boolean, expand = false) => {
+    const data = hasData(options);
+    return (
+      <div className="common-chart-wrapper" >
+        {this.renderTitle()}
+        {this.renderEchart(options, loading)}
+        {this.renderOpBtns(options, expand)}
+        {data ? this.renderOthers() : null}
+      </div>
+    );
+  }
+
+  public render() {
+    const options = this.getCurveData();
+    const loading = this.getLoading();
+    return (
+      <>
+        {this.renderCurve(options, loading)}
+      </>
+    );
+  }
+}