fix: Graph typescript error

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',

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

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,

web/src/components/Graph/GraphConfig/GraphConfigInner.tsx

 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);

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;

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) => {

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 (

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 = {

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[],

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);
                     });