kafka-manager 2.0

kafka-manager-console/src/component/chart/bar-chart.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Spin, notification } from 'component/antd';
+import echarts, { EChartOption } from 'echarts/lib/echarts';
+
+// 引入柱状图
+import 'echarts/lib/chart/bar';
+
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+
+interface IChartProps {
+  getChartData: any;
+  customerNode?: React.ReactNode;
+}
+
+export class BarChartComponet extends React.Component<IChartProps> {
+  public id: HTMLDivElement = null;
+  public chart: echarts.ECharts;
+
+  public state = {
+    loading: false,
+    noData: false,
+  };
+
+  public componentDidMount() {
+    this.chart = echarts.init(this.id);
+    this.getChartData();
+    window.addEventListener('resize', this.resize);
+  }
+
+  public componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  public resize = () => {
+    this.chart.resize();
+  }
+
+  public isHasData = (data: EChartOption) => {
+    const noData = !(data.series && data.series.length);
+    this.setState({ noData });
+    return !noData;
+  }
+
+  public getChartData = () => {
+    const { getChartData } = this.props;
+    if (!getChartData) {
+      return notification.error({ message: '图表信息有误' });
+    }
+
+    this.setState({ loading: true });
+    const chartOptions = getChartData();
+
+    if ((typeof chartOptions.then) === 'function') {
+      return chartOptions.then((data: EChartOption) => {
+        this.setState({ loading: false });
+
+        if (this.isHasData(data)) {
+          this.changeChartOptions(data);
+        }
+      });
+    }
+
+    if (this.isHasData(chartOptions)) {
+      this.changeChartOptions(chartOptions);
+      this.setState({ loading: false });
+    }
+  }
+
+  public changeChartOptions(options: any) {
+    this.chart.setOption(options, true);
+  }
+
+  public handleRefreshChart() {
+    this.getChartData();
+  }
+
+  public render() {
+    return (
+      <>
+        <Spin spinning={this.state.loading} className="chart-content">
+          {this.state.noData ? <div className="nothing-style">暂无数据</div> : null}
+          <div className={this.state.noData ? 'chart-no-data' : 'chart'} ref={(id) => this.id = id} />
+        </Spin>
+      </>
+    );
+  }
+}

kafka-manager-console/src/component/chart/date-picker-chart.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { DatePicker, notification, Spin } from 'component/antd';
+import moment, { Moment } from 'moment';
+import { timeStampStr } from 'constants/strategy';
+import { disabledDate } from 'lib/utils';
+import echarts from 'echarts';
+
+// 引入柱状图和折线图
+import 'echarts/lib/chart/bar';
+import 'echarts/lib/chart/line';
+
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+import './index.less';
+
+const { RangePicker } = DatePicker;
+
+interface IChartProps {
+  getChartData: (startTime: moment.Moment, endTime: moment.Moment) => any;
+  customerNode?: React.ReactNode;
+}
+
+export class ChartWithDatePicker extends React.Component<IChartProps> {
+  public state = {
+    startTime: moment().subtract(1, 'hour'),
+    endTime: moment(),
+    loading: false,
+    noData: false,
+  };
+
+  public id: HTMLDivElement = null;
+  public chart: echarts.ECharts;
+
+  public getData = () => {
+    const { startTime, endTime } = this.state;
+    const { getChartData } = this.props;
+    this.setState({ loading: true });
+    getChartData(startTime, endTime).then((data: any) => {
+      this.setState({ loading: false });
+      this.changeChartOptions(data);
+    });
+  }
+
+  public componentDidMount() {
+    this.chart = echarts.init(this.id);
+    this.getData();
+    window.addEventListener('resize', this.resize);
+  }
+
+  public componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  public resize = () => {
+    this.chart.resize();
+  }
+
+  public changeChartOptions(options: any) {
+    const noData = options.series.length ? false : true;
+    this.setState({ noData });
+    this.chart.setOption(options, true);
+  }
+
+  public handleTimeChange = (dates: Moment[]) => {
+    this.setState({
+      startTime: dates[0],
+      endTime: dates[1],
+    });
+    const { getChartData } = this.props;
+    this.setState({ loading: true });
+    getChartData(dates[0], dates[1]).then((data: any) => {
+      this.setState({ loading: false });
+      this.changeChartOptions(data);
+    });
+  }
+
+  public render() {
+    const { customerNode } = this.props;
+    return (
+      <div className="status-box" style={{minWidth: '930px'}}>
+        <div className="status-graph">
+          <div className="k-toolbar">
+            {customerNode}
+          </div>
+          <ul className="k-toolbar">
+            <li>
+              <RangePicker
+                ranges={{
+                  今日: [moment().startOf('date'), moment()],
+                  近一天: [moment().subtract(1, 'day'), moment()],
+                  近一周: [moment().subtract(7, 'day'), moment()],
+                }}
+                disabledDate={disabledDate}
+                defaultValue={[moment().subtract(1, 'hour'), moment()]}
+                format={timeStampStr}
+                onChange={this.handleTimeChange}
+              />
+            </li>
+          </ul>
+        </div>
+        <Spin spinning={this.state.loading} className="chart-content">
+          {this.state.noData ? <div className="nothing-style">暂无数据</div> : null}
+          <div className={this.state.noData ? 'chart-no-data' : 'chart'} ref={(id) => this.id = id} />
+        </Spin>
+      </div>
+    );
+  }
+}

kafka-manager-console/src/component/chart/doughnut-chart.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Spin } from 'component/antd';
+import echarts from 'echarts/lib/echarts';
+// 引入饼状图
+import 'echarts/lib/chart/pie';
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+
+interface IPieProps {
+  getChartData: any;
+}
+
+export class DoughnutChart extends React.Component<IPieProps> {
+  public id: HTMLDivElement = null;
+  public chart: echarts.ECharts;
+
+  public state = {
+    loading: true,
+    isNoData: false,
+  };
+
+  public getChartData = () => {
+    const { getChartData } = this.props;
+
+    this.setState({ loading: true });
+    const options = getChartData();
+    if (!options || !options.series || !options.series.length) {
+      this.setState({
+        isNoData: true,
+        loading: false,
+      });
+      return;
+    }
+
+    this.changeChartOptions(options);
+  }
+
+  public changeChartOptions(options: any) {
+    this.chart.setOption(options, true);
+    this.setState({ loading: false });
+  }
+
+  public componentDidMount() {
+    this.chart = echarts.init(this.id);
+    this.getChartData();
+  }
+
+  public render() {
+    return (
+      <>
+        <Spin spinning={this.state.loading} className="chart-content">
+          {this.state.isNoData ? <div className="nothing-style">暂无数据</div> : null}
+          <div className="doughnut-chart" ref={(id) => this.id = id} />
+        </Spin>
+      </>
+    );
+  }
+}

kafka-manager-console/src/component/chart/index.less

@@ -0,0 +1,80 @@
+.status-box{
+  float: left;
+  margin: 0 5px;
+  width: 100%;
+  .status-graph {
+    position: relative;
+    height: 48px;
+    width: 100%;
+    background: rgba(255, 255, 255, 255);
+    display: flex;
+    justify-content: space-between;
+    line-height: 48px;
+    font-family: PingFangSC-Regular;
+    color: rgba(0, 0, 0, 0.85);
+    padding: 0 5px;
+    margin: -15px 0;
+    .k-toolbar {
+      &>span.label {
+        padding: 10px;
+        font-size: 12px;
+      }
+
+      li {
+        float: left;
+        vertical-align: middle;
+        line-height: 48px;
+        margin-right: 20px;
+
+        &>span.label {
+          padding-right: 10px;
+        }
+      }
+
+      .title-toolbar {
+        float: right;
+        right: 30px;
+
+        span:first-child {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .graph-none{
+    display: none;
+  }
+}
+.nothing-style {
+  height: 300px;
+  line-height: 300px;
+  text-align: center;
+}
+
+.chart {
+  height: 400px;
+  padding: 10px 20px;
+}
+.doughnut-chart {
+  width: 500px;
+  height: 350px;
+}
+
+.chart-no-data {
+  height: 0px;
+  display: none;
+}
+
+.ant-spin-nested-loading {
+  margin: 0 auto;
+}
+
+.no-footer {
+  .ant-modal-confirm-btns {
+    display: none;
+  }
+}
+
+.no-data-info {
+  text-align: center;
+}

kafka-manager-console/src/component/chart/index.tsx

@@ -0,0 +1,4 @@
+export * from './bar-chart';
+export * from './date-picker-chart';
+export * from './doughnut-chart';
+export * from './line-chart';

kafka-manager-console/src/component/chart/line-chart.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import echarts, { EChartOption } from 'echarts/lib/echarts';
+import 'echarts/lib/chart/pie';
+import 'echarts/lib/chart/line';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/axis';
+import './index.less';
+
+export interface IEchartsProps {
+  width?: number;
+  height?: number;
+  options?: EChartOption;
+}
+
+export const hasData = (options: EChartOption) => {
+  if (options && options.series && options.series.length) return true;
+  return false;
+};
+
+export default class LineChart extends React.Component<IEchartsProps> {
+  public id = null as HTMLDivElement;
+
+  public myChart = null as echarts.ECharts;
+
+  public componentDidMount() {
+    const { options } = this.props;
+    this.myChart = echarts.init(this.id);
+    this.myChart.setOption(options);
+    window.addEventListener('resize', this.resize);
+  }
+
+  public componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  public componentDidUpdate() {
+    this.refresh();
+  }
+
+  public refresh = () => {
+    const { options } = this.props;
+    this.myChart.setOption(options);
+  }
+
+  public resize = () => {
+    this.myChart.resize();
+  }
+
+  public render() {
+    const { height, width } = this.props;
+    return <div ref={id => this.id = id} style={{width: `${width}px`, height: `${height}px`}} />;
+  }
+}