134 lines
3.6 KiB
JavaScript
134 lines
3.6 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, { useState, useEffect } from 'react';
|
|
import { Button, Spin } from 'antd';
|
|
import { SyncOutlined } from '@ant-design/icons';
|
|
|
|
import {
|
|
defaultOneHourAgo,
|
|
getRange,
|
|
} from 'components/PrometheusChart/utils/utils';
|
|
import Charts from './Charts';
|
|
import useIntervals from './hooks/useIntervals';
|
|
import useRangeSelect from './hooks/useRangeSelect';
|
|
import useNodeSelect from './hooks/useNodeSelect';
|
|
import styles from '../style.less';
|
|
import { defaultGetNodes } from '../utils/fetchNodes';
|
|
import BaseContentContext from './context';
|
|
|
|
const BaseContent = (props) => {
|
|
const {
|
|
renderTimeRangeSelect,
|
|
chartConfig,
|
|
renderNodeSelect,
|
|
fetchNodesFunc,
|
|
defaultNode,
|
|
children,
|
|
} = props;
|
|
|
|
const [node, Nodes, setNode, setNodes] = useNodeSelect(defaultNode);
|
|
|
|
const [range, Selector, groupIndex, setRange] = useRangeSelect(
|
|
defaultOneHourAgo()
|
|
);
|
|
|
|
const [interval, Intervals] = useIntervals(range);
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const [isFetchingNodes, setIsFetchingNodes] = useState(true);
|
|
|
|
const handleRefresh = async (refresh = false) => {
|
|
setIsLoading(true);
|
|
if (renderNodeSelect) {
|
|
setIsFetchingNodes(true);
|
|
const ret = await fetchNodesFunc();
|
|
setNodes(ret);
|
|
if (!node) {
|
|
setNode(ret[0]);
|
|
}
|
|
// 非自选时间段刷新时间
|
|
if (refresh && groupIndex !== 4) {
|
|
setRange(getRange(groupIndex));
|
|
}
|
|
setIsFetchingNodes(false);
|
|
setIsLoading(false);
|
|
} else {
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 300);
|
|
}
|
|
};
|
|
|
|
const passedContextValue = {
|
|
interval,
|
|
range,
|
|
node,
|
|
};
|
|
|
|
useEffect(() => {
|
|
handleRefresh();
|
|
}, [interval, range]);
|
|
|
|
useEffect(() => {
|
|
setIsLoading(true);
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
}, 300);
|
|
}, [node]);
|
|
|
|
return (
|
|
<div className={styles['base-content-container']}>
|
|
<BaseContentContext.Provider value={passedContextValue}>
|
|
{(renderTimeRangeSelect || renderNodeSelect) && (
|
|
<Button
|
|
type="default"
|
|
icon={<SyncOutlined />}
|
|
onClick={() => handleRefresh(true)}
|
|
className={styles.refresh}
|
|
/>
|
|
)}
|
|
{renderTimeRangeSelect && (
|
|
<div className={styles.header}>
|
|
<Selector />
|
|
<Intervals />
|
|
</div>
|
|
)}
|
|
{renderNodeSelect && (isFetchingNodes ? <Spin /> : <Nodes />)}
|
|
{(renderNodeSelect && isFetchingNodes) ||
|
|
(isLoading &&
|
|
chartConfig?.chartCardList?.length !== 0 &&
|
|
chartConfig?.topCardList?.length !== 0) ? null : (
|
|
<Charts {...chartConfig} />
|
|
)}
|
|
{(renderNodeSelect && isFetchingNodes) || isLoading ? (
|
|
<Spin />
|
|
) : (
|
|
children
|
|
)}
|
|
</BaseContentContext.Provider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
BaseContent.defaultProps = {
|
|
renderNodeSelect: true,
|
|
renderTimeRangeSelect: true,
|
|
fetchNodesFunc: defaultGetNodes,
|
|
defaultNode: undefined,
|
|
};
|
|
|
|
export default BaseContent;
|