innov
/
nightingale1
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

fix: Graph typescript error

This commit is contained in:
jsers 2020-06-17 11:07:58 +08:00
parent b45a968a9a
commit fc023fd833
10 changed files with 30 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/Graph/Graph/Title.tsx
View File

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

15
web/src/components/Graph/Graph/index.tsx
View File

@ -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

12
web/src/components/Graph/GraphConfig/GraphConfigForm.tsx
View File

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

12
web/src/components/Graph/GraphConfig/GraphConfigInner.tsx
View File

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

10
web/src/components/Graph/util/getTooltipsContent.tsx
View File

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

2
web/src/components/Graph/util/hasDtag.tsx
View File

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

2
web/src/components/Layout/utils.tsx
View File

@ -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 (

4
web/src/pages/Monitor/Dashboard/Graphs.tsx
View File

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

2
web/src/pages/Monitor/Dashboard/MetricSelect.tsx
View File

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

11
web/src/pages/Monitor/Dashboard/index.tsx
View File

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