fix: Graph typescript error

5 years ago · fc023fd833
parent b45a968a9a
commit fc023fd833
10 changed files with 30 additions and 42 deletions
--- a/web/src/components/Graph/Graph/Title.tsx
+++ b/web/src/components/Graph/Graph/Title.tsx
@ -14,7 +14,7 @@ export default class Title extends Component<Props> {

  render() {
    const { title, selectedMetric } = this.props;
-    const styleObj = {
+    const styleObj: React.CSSProperties = {
      width: '100%',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
--- a/web/src/components/Graph/Graph/index.tsx
+++ b/web/src/components/Graph/Graph/index.tsx
@ -15,11 +15,11 @@ import GraphConfigInner from '../GraphConfig/GraphConfigInner';
 import { GraphDataInterface, SerieInterface, GraphDataChangeFunc, CounterInterface, ChartOptionsInterface } from '../interface';

 interface Props {
-  useDragHandle: boolean,
+  useDragHandle?: boolean,
  data: GraphDataInterface, // 图表数据配置
  height: number, // 图表高度
  graphConfigInnerVisible: boolean, // 内置图表配置栏是否显示
-  extraRender: () => void, // 图表右侧工具栏扩展
+  extraRender: (graph: any) => void, // 图表右侧工具栏扩展
  extraMoreList: React.ReactNode, // 图表右侧工具栏更多选项扩展
  metricMap: any, // 指标信息表，用于设置图表名称
  onChange: GraphDataChangeFunc, // 图表配置修改回调
@ -116,10 +116,6 @@ export default class Graph extends Component<Props, State> {
    if (this.chart) this.chart.destroy();
  }

-  static setOptions = (options: any) => {
-    window.OdinGraphOptions = options;
-  };
-
  getGraphConfig(graphConfig: GraphDataInterface) {
    return {
      ...config.graphDefaultConfig,
@ -328,7 +324,7 @@ export default class Graph extends Component<Props, State> {
  }

  render() {
-    const { spinning, errorText, isOrigin } = this.state;
+    const { spinning, errorText } = this.state;
    const { height, onChange, extraRender, data } = this.props;
    const graphConfig = this.getGraphConfig(data);

@ -360,15 +356,12 @@ export default class Graph extends Component<Props, State> {
          </div>
          <Title
            title={data.title}
-            selectedNs={_.reduce(graphConfig.metrics, (result, metricObj) => _.concat(result, metricObj.selectedNs), [])}
-            selectedMetric={_.reduce(graphConfig.metrics, (result, metricObj) => _.concat(result, metricObj.selectedMetric), [])}
-            metricMap={this.props.metricMap}
+            selectedMetric={_.get(graphConfig.metrics, '[0].selectedMetric')}
          />
        </div>
        {
          this.props.graphConfigInnerVisible
            ? <GraphConfigInner
-              isOrigin={isOrigin}
              data={graphConfig}
              onChange={onChange}
            /> : null
--- a/web/src/components/Graph/GraphConfig/GraphConfigForm.tsx
+++ b/web/src/components/Graph/GraphConfig/GraphConfigForm.tsx
@ -160,7 +160,7 @@ export default class GraphConfigForm extends Component<Props, State> {

  async fetchEndpoints(metricObj: MetricInterface) {
    try {
-      const endpoints = await services.fetchEndPoints(metricObj.selectedNid, this.context.habitsId);
+      const endpoints = await services.fetchEndPoints(metricObj.selectedNid as any);
      let selectedEndpoint = metricObj.selectedEndpoint || ['=all'];
      if (!hasDtag(selectedEndpoint)) {
        selectedEndpoint = _.intersection(endpoints, metricObj.selectedEndpoint);
@ -214,8 +214,8 @@ export default class GraphConfigForm extends Component<Props, State> {
    }
  }

-  handleCommonFieldChange = (changedObj) => {
-    const newChangedObj = {};
+  handleCommonFieldChange = (changedObj: any) => {
+    const newChangedObj: any = {};
    _.each(changedObj, (val, key) => {
      newChangedObj[key] = {
        $set: val,
@ -359,7 +359,7 @@ export default class GraphConfigForm extends Component<Props, State> {
    }
  }

-  handleTagkvChange = async (currentMetric: string, tagk: string, tagv: string) => {
+  handleTagkvChange = async (currentMetric: string, tagk: string, tagv: string[]) => {
    const { metrics } = this.state.graphConfig;
    const currentMetricObj = _.cloneDeep(_.find(metrics, { selectedMetric: currentMetric }));
    const currentMetricObjIndex = _.findIndex(metrics, { selectedMetric: currentMetric });
@ -504,7 +504,7 @@ export default class GraphConfigForm extends Component<Props, State> {
    }));
  }

-  handleDateChange = (key: string, d: moment.Moment) => {
+  handleDateChange = (key: string, d: moment.Moment | null) => {
    const val = moment.isMoment(d) ? d.format('x') : null;
    this.setState(update(this.state, {
      graphConfig: {
@ -860,7 +860,7 @@ export default class GraphConfigForm extends Component<Props, State> {
              relativeTimeComparison={graphConfig.relativeTimeComparison}
              comparisonOptions={graphConfig.comparisonOptions}
              graphConfig={graphConfig}
-              onChange={(values) => {
+              onChange={(values: any) => {
                this.handleCommonFieldChange({
                  start: values.start,
                  end: values.end,
--- a/web/src/components/Graph/GraphConfig/GraphConfigInner.tsx
+++ b/web/src/components/Graph/GraphConfig/GraphConfigInner.tsx
@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, WrappedComponentProps, FormattedMessage } from 'react-intl';
 import update from 'react-addons-update';
 import _ from 'lodash';
 import moment from 'moment';
@ -17,7 +17,7 @@ interface Props {

 const { Option } = Select;

-export default class GraphConfigInner extends Component<Props> {
+class GraphConfigInner extends Component<Props & WrappedComponentProps> {
  refresh = () => {
    // TODO 如果用户选择的是 "自定义" 时间，然后再点击 "刷新" 按钮，这时候 end 就会被强制更新到 now 了，这块有待考虑下怎么处理
    const { data, onChange } = this.props;
@ -48,7 +48,7 @@ export default class GraphConfigInner extends Component<Props> {
    });
  }

-  dateChange(key: string, d: moment.Moment) {
+  dateChange(key: string, d: moment.Moment | null) {
    const { data, onChange } = this.props;
    let { start, end } = data;

@ -209,12 +209,12 @@ export default class GraphConfigInner extends Component<Props> {
          <Select
            size="small"
            style={{ width: 70 }}
-            value={<FormattedMessage id={timeLabel} />}
+            value={this.props.intl.formatMessage({ id: timeLabel })}
            onChange={this.timeOptionChange}
          >
            {
              _.map(config.time, (o) => {
-                return <Option key={o.value} value={o.value}><FormattedMessage id={o.label} /></Option>;
+                return <Option key={o.value} value={o.value}>{this.props.intl.formatMessage({ id: o.label })}</Option>;
              })
            }
          </Select>
@ -329,3 +329,5 @@ export default class GraphConfigInner extends Component<Props> {
    );
  }
 }
+
+export default injectIntl(GraphConfigInner);
--- a/web/src/components/Graph/util/getTooltipsContent.tsx
+++ b/web/src/components/Graph/util/getTooltipsContent.tsx
@ -8,11 +8,11 @@ interface ActiveTooltipData {
  chartWidth: number,
  isComparison: boolean,
  points: PointInterface[],
-  originalPoints: PointInterface[],
-  sharedSortDirection: 'desc' | 'asc',
+  originalPoints?: PointInterface[],
+  sharedSortDirection?: 'desc' | 'asc',
  comparison: string[],
-  relativeTimeComparison: boolean,
-  timezoneOffset: string | number,
+  relativeTimeComparison?: boolean,
+  timezoneOffset?: string | number,
 }

 const fmt = 'YYYY-MM-DD HH:mm:ss';
@ -38,7 +38,7 @@ export default function getTooltipsContent(activeTooltipData: ActiveTooltipData)
  return `<div style="table-layout: fixed;max-width: ${chartWidth}px;word-wrap: break-word;white-space: normal;">${tooltipContent}</div>`;
 }

-function singlePoint(pointData = {}, activeTooltipData) {
+function singlePoint(pointData: any = {}, activeTooltipData: any) {
  const { color, filledNull, serieOptions = {}, timestamp } = pointData;
  const { comparison: comparisons, isComparison } = activeTooltipData;
  const { tags } = serieOptions;
--- a/web/src/components/Graph/util/hasDtag.tsx
+++ b/web/src/components/Graph/util/hasDtag.tsx
@ -6,7 +6,7 @@ const DtagKws = ['=all', '=+', '=-'];
 /**
 * 是否包含动态tag
 */
-export default function hasDtag(data: TagkvInterface[] = []) {
+export default function hasDtag(data: (TagkvInterface | string)[] = []) {
  return _.some(data, (item) => {
    if (_.isObject(item) && _.isArray(item.tagv)) {
      return _.some(item.tagv, (subItem) => {
--- a/web/src/components/Layout/utils.tsx
+++ b/web/src/components/Layout/utils.tsx
@ -107,7 +107,7 @@ export function normalizeTreeData(data: TreeNode[]) {
  return treeData;
 }

-export function renderTreeNodes(nodes: TreeNode[]) {
+export function renderTreeNodes(nodes?: TreeNode[]) {
  return _.map(nodes, (node) => {
    if (_.isArray(node.children)) {
      return (
--- a/web/src/pages/Monitor/Dashboard/Graphs.tsx
+++ b/web/src/pages/Monitor/Dashboard/Graphs.tsx
@ -16,10 +16,6 @@ interface Props {
  onGraphConfigSubmit: (type: UpdateType, data: GraphData, id: GraphId) => void,
 }

-Graph.setOptions({
-  apiPrefix: '',
-});
-
 export default class Graphs extends Component<Props> {
  graphConfigForm: any;
  static defaultProps = {
--- a/web/src/pages/Monitor/Dashboard/MetricSelect.tsx
+++ b/web/src/pages/Monitor/Dashboard/MetricSelect.tsx
@ -9,7 +9,7 @@ import { prefixCls, metricMap, metricsMeta } from './config';
 import { filterMetrics, matchMetrics } from './utils';

 interface Props {
-  nid: number,
+  nid?: number,
  hosts: Hosts,
  selectedHosts: Hosts,
  metrics: string[],
--- a/web/src/pages/Monitor/Dashboard/index.tsx
+++ b/web/src/pages/Monitor/Dashboard/index.tsx
@ -120,7 +120,7 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
        const res = await request(`${api.endpoint}?limit=1000`);
        hosts = _.map(res.list, 'ident');
      } else {
-        hosts = await services.fetchEndPoints(nid, this.context.habitsId);
+        hosts = await services.fetchEndPoints(nid);
      }
      this.setState({ hostsLoading: false });
    } catch (e) {
@ -178,7 +178,7 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
    }
  }

-  handleGraphConfigSubmit = (type: UpdateType, data: GraphData, id: GraphId) => {
+  handleGraphConfigSubmit = (type: UpdateType, data: GraphData, id?: GraphId) => {
    const { graphs } = this.state;
    const graphsClone = _.cloneDeep(graphs);
    const ldata = _.cloneDeep(data) || {};
@ -204,7 +204,7 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
          }],
        }),
      });
-    } else if (type === 'update') {
+    } else if (type === 'update' && id) {
      this.handleUpdateGraph('update', id, {
        ...ldata,
      });
@ -330,14 +330,12 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
              </Col>
              <Col span={12}>
                <MetricSelect
-                  ref={(ref) => { this.metricSelect = ref; }}
                  nid={_.get(selectedTreeNode, 'id')}
                  loading={metricsLoading}
                  hosts={hosts}
                  selectedHosts={selectedHosts}
                  metrics={metrics}
                  graphs={graphs}
-                  globalOptions={globalOptions}
                  onSelect={(data) => {
                    this.handleGraphConfigSubmit('unshift', data);
                  }}
@ -351,10 +349,9 @@ class MonitorDashboard extends Component<Props & WrappedComponentProps, State> {
                  onChange={(obj) => {
                    this.setState({
                      globalOptions: {
-                        // eslint-disable-next-line react/no-access-state-in-setstate
                        ...this.state.globalOptions,
                        ...obj,
-                      },
+                      } as any,
                    }, () => {
                      this.handleBatchUpdateGraphs(obj);
                    });