114 lines
3.3 KiB
JavaScript
114 lines
3.3 KiB
JavaScript
// Copyright 2021 99cloud
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import React, { Component } from 'react';
|
|
import { Card, Select } from 'antd';
|
|
import VisibleObserver from 'components/VisibleObserver';
|
|
import PropTypes from 'prop-types';
|
|
import { observer } from 'mobx-react';
|
|
import isEqual from 'react-fast-compare';
|
|
import FetchPrometheusStore from './store/FetchPrometheusStore';
|
|
import style from './style.less';
|
|
|
|
@observer
|
|
class BaseFetch extends Component {
|
|
static propTypes = {
|
|
constructorParams: PropTypes.shape({
|
|
requestType: PropTypes.oneOf(['current', 'range']).isRequired,
|
|
metricKey: PropTypes.string.isRequired,
|
|
formatDataFn: PropTypes.func.isRequired,
|
|
typeKey: PropTypes.string,
|
|
deviceKey: PropTypes.string,
|
|
}).isRequired,
|
|
params: PropTypes.object,
|
|
currentRange: PropTypes.array.isRequired,
|
|
interval: PropTypes.number.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
extra: PropTypes.func,
|
|
renderContent: PropTypes.func.isRequired,
|
|
visibleHeight: PropTypes.number,
|
|
};
|
|
|
|
static defaultProps = {
|
|
// src/pages/monitor/containers/PhysicalNode/index.less:91
|
|
// 为了不在视区范围内的时候，仍然撑开元素。防止出现在视区的时候挤开下面的元素。（由下往上翻）
|
|
visibleHeight: 100,
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
const { constructorParams } = this.props;
|
|
|
|
this.store = new FetchPrometheusStore(constructorParams);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getData();
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
if (!isEqual(prevProps, this.props)) {
|
|
this.getData();
|
|
}
|
|
}
|
|
|
|
getData() {
|
|
const { params, currentRange, interval } = this.props;
|
|
this.store.fetchData({ params, currentRange, interval });
|
|
}
|
|
|
|
renderExtra() {
|
|
const { extra } = this.props;
|
|
return (
|
|
<>
|
|
{this.store.device && this.store.devices.length !== 0 && (
|
|
<Select
|
|
defaultValue={this.store.device}
|
|
style={{ width: 150, marginRight: 16 }}
|
|
options={this.store.devices.map((i) => ({
|
|
label: i,
|
|
value: i,
|
|
}))}
|
|
onChange={(e) => this.store.handleDeviceChange.call(this.store, e)}
|
|
/>
|
|
)}
|
|
{extra && extra(this.store)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const { isLoading } = this.store;
|
|
const { visibleHeight } = this.props;
|
|
return (
|
|
<Card
|
|
className={style.remove_extra_padding}
|
|
bodyStyle={{
|
|
// padding 24
|
|
minHeight: visibleHeight + 48,
|
|
}}
|
|
title={this.props.title}
|
|
extra={this.renderExtra()}
|
|
loading={isLoading}
|
|
>
|
|
<VisibleObserver style={{ width: '100%', height: visibleHeight }}>
|
|
{(visible) => (visible ? this.props.renderContent(this.store) : null)}
|
|
</VisibleObserver>
|
|
</Card>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default BaseFetch;
|