floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add loading to monitor statistic (#11) 

Co-authored-by: yaojiping <yaojiping@infini.ltd>
This commit is contained in:
yaojp123 2024-12-07 14:04:42 +08:00 committed by GitHub
parent e5dbe3123a
commit 8b176ab8ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 89 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/common/src/DatePicker/index.jsx
View File

@ -202,7 +202,7 @@ const DatePicker = (props) => {
const [reloadLoading, setReloadLoading] = useState(false)
const onRefreshClick = () => {
setReloadLoading(true)
onRefresh && onRefresh({ start, end });
onRefresh && onRefresh({ start, end, refresh: true });
setTimeout(()=>{
setReloadLoading(false)
}, 1000)

1
web/src/components/Overview/Detail/Metrics/MetricLineList.jsx
View File

@ -24,6 +24,7 @@ export default (props) => {
queryParams={queryParams}
timeout={timeout}
className={styles.lineWrapper}
height={150}
formatMetric={(metric) => {
if (!metric) return metric;
let units = "";

29
web/src/components/Overview/Monitor/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useMemo, useEffect, useCallback } from "react";
import { Card, Tabs, Breadcrumb, Button, BackTop, Empty } from "antd";
import { Card, Tabs, Breadcrumb, Button, BackTop, Empty, Spin } from "antd";
import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
import { formatter } from "@/utils/format";
import moment from "moment";
@ -66,6 +66,7 @@ const Monitor = (props) => {
timeInterval: formatTimeInterval(param?.timeInterval),
timeout: formatTimeout(param?.timeout) || localStorage.getItem(TIMEOUT_CACHE_KEY) || '120s',
param: param,
refresh: true
})
);
@ -76,7 +77,7 @@ const Monitor = (props) => {
setParam({ ...param, timeRange: state.timeRange, timeInterval: state.timeInterval, timeout: state.timeout });
}, [state.timeRange, state.timeInterval, state.timeout]);
const handleTimeChange = useCallback(({ start, end, timeInterval, timeout }) => {
const handleTimeChange = useCallback(({ start, end, timeInterval, timeout, refresh }) => {
const bounds = calculateBounds({
from: start,
to: end,
@ -93,9 +94,9 @@ const Monitor = (props) => {
timeFormatter: formatter.dates(intDay),
},
timeInterval: timeInterval || state.timeInterval,
timeout: timeout || state.timeout
timeout: timeout || state.timeout,
refresh
});
setSpinning(true);
}, [state])
const onInfoChange = (info) => {
@ -112,6 +113,12 @@ const Monitor = (props) => {
return monitor_configs?.node_stats?.enabled === false && monitor_configs?.index_stats?.enabled === false
}, [JSON.stringify(selectedCluster?.monitor_configs)])
console.log("spinning")
console.log(spinning)
console.log("state.refresh")
console.log(state.refresh)
return (
<div>
<BreadcrumbList data={breadcrumbList} />
@ -165,12 +172,14 @@ const Monitor = (props) => {
>
{panes.map((pane) => (
<TabPane tab={pane.title} key={pane.key}>
<StatisticBar
setSpinning={setSpinning}
onInfoChange={onInfoChange}
{...state}
{...extraParams}
/>
<Spin spinning={spinning && !!state.refresh}>
<StatisticBar
setSpinning={setSpinning}
onInfoChange={onInfoChange}
{...state}
{...extraParams}
/>
</Spin>
<div style={{ marginTop: 15 }}>
{checkPaneParams({
...state,

2
web/src/lib/hooks/use_fetch.js
View File

@ -6,7 +6,7 @@ const DEFAULT_OPTIONS = {
};
export default function useFetch(url, options = {}, dependencies = [], runInInit = true) {
const { returnRawResponse, noticeable, ...rest } = options
const { returnRawResponse, noticeable, ...rest } = options || {}
return useAsync(() => {
return request(url, { ...DEFAULT_OPTIONS, ...rest }, returnRawResponse, noticeable);
}, dependencies, runInInit);

53
web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
View File

@ -8,17 +8,27 @@ import QueueMetric from "../../components/queue_metric";
import { ESPrefix } from "@/services/common";
import { SearchEngines } from "@/lib/search_engines";
const timezone = "local";
export default ({
selectedCluster,
clusterID,
timeRange,
handleTimeChange,
timezone,
bucketSize,
timeout,
refresh,
}) => {
const tabProps = {
clusterID,
timeRange,
handleTimeChange,
timezone,
bucketSize,
timeout,
refresh
}
const isVersionGTE6 = useMemo(() => {
if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
const main = selectedCluster?.version?.split('.')[0]
@ -56,12 +66,8 @@ export default ({
})}
>
<ClusterMetric
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}
{...tabProps}
fetchUrl={`${ESPrefix}/${clusterID}/cluster_metrics`}
bucketSize={bucketSize}
timeout={timeout}
metrics={[
'cluster_health',
'index_throughput',
@ -84,14 +90,9 @@ export default ({
})}
>
<NodeMetric
clusterID={clusterID}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}
{...tabProps}
param={param}
setParam={setParam}
bucketSize={bucketSize}
timeout={timeout}
metrics={[
[
"operations",
@ -231,14 +232,9 @@ export default ({
})}
>
<IndexMetric
clusterID={clusterID}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}
{...tabProps}
param={param}
setParam={setParam}
bucketSize={bucketSize}
timeout={timeout}
metrics={[
[
"operations",
@ -314,14 +310,9 @@ export default ({
})}
>
<QueueMetric
clusterID={clusterID}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}
{...tabProps}
param={param}
setParam={setParam}
bucketSize={bucketSize}
timeout={timeout}
metrics={[
isVersionGTE6 ? [
"thread_pool_write",
@ -397,18 +388,6 @@ export default ({
].filter((item) => !!item)}
/>
</Tabs.TabPane>
{/* <Tabs.TabPane
key="storage"
tab={formatMessage({
id: "cluster.monitor.queue.storage",
})}
>
<StorageMetric
clusterID={clusterID}
timezone={timezone}
timeRange={timeRange}
/>
</Tabs.TabPane> */}
</Tabs>
);
}

5
web/src/pages/Platform/Overview/Cluster/Monitor/overview.jsx
View File

@ -1,20 +1,21 @@
import ClusterMetric from "../../components/cluster_metric";
import { ESPrefix } from "@/services/common";
const timezone = "local";
export default ({
clusterID,
timeRange,
handleTimeChange,
bucketSize,
timeout,
timezone,
refresh
}) => {
return (
<ClusterMetric
timezone={timezone}
timeRange={timeRange}
timeout={timeout}
refresh={refresh}
handleTimeChange={handleTimeChange}
overview={1}
fetchUrl={`${ESPrefix}/${clusterID}/cluster_metrics`}

7
web/src/pages/Platform/Overview/Indices/Monitor/advanced.jsx
View File

@ -2,8 +2,6 @@ import { useState } from "react";
import StatisticBar from "./statistic_bar";
import IndexMetric from "../../components/index_metric";
const timezone = "local";
export default ({
clusterID,
indexName,
@ -11,7 +9,9 @@ export default ({
handleTimeChange,
shardID,
bucketSize,
timeout
timezone,
timeout,
refresh,
}) => {
const [param, setParam] = useState({
show_top: false,
@ -28,6 +28,7 @@ export default ({
shardID={shardID}
bucketSize={bucketSize}
timeout={timeout}
refresh={refresh}
metrics={[
[
"operations",

7
web/src/pages/Platform/Overview/Indices/Monitor/overview.jsx
View File

@ -2,8 +2,6 @@ import { ESPrefix } from "@/services/common";
import StatisticBar from "./statistic_bar";
import ClusterMetric from "../../components/cluster_metric";
const timezone = "local";
export default ({
isAgent,
clusterID,
@ -12,7 +10,9 @@ export default ({
handleTimeChange,
shardID,
bucketSize,
timeout
timezone,
timeout,
refresh
}) => {
let url = `${ESPrefix}/${clusterID}/index/${indexName}/metrics`;
if(shardID){
@ -27,6 +27,7 @@ export default ({
fetchUrl={url}
bucketSize={bucketSize}
timeout={timeout}
refresh={refresh}
metrics={[
"index_health",
"index_throughput",

28
web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
View File

@ -5,18 +5,28 @@ import QueueMetric from "../../components/queue_metric";
import { formatMessage } from "umi/locale";
import { SearchEngines } from "@/lib/search_engines";
const timezone = "local";
export default ({
selectedCluster,
clusterID,
nodeID,
timeRange,
handleTimeChange,
timezone,
bucketSize,
timeout,
refresh,
}) => {
const tabProps = {
clusterID,
timeRange,
handleTimeChange,
timezone,
bucketSize,
timeout,
refresh
}
const isVersionGTE6 = useMemo(() => {
if ([SearchEngines.Easysearch, SearchEngines.Opensearch].includes(selectedCluster?.distribution)) return true;
const main = selectedCluster?.version?.split('.')[0]
@ -59,14 +69,9 @@ export default ({
})}
>
<NodeMetric
clusterID={clusterID}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}
{...tabProps}
param={param}
setParam={setParam}
bucketSize={bucketSize}
timeout={timeout}
metrics={[
[
"operations",
@ -206,14 +211,9 @@ export default ({
})}
>
<QueueMetric
clusterID={clusterID}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}
{...tabProps}
param={param}
setParam={setParam}
bucketSize={bucketSize}
timeout={timeout}
metrics={[
isVersionGTE6 ? [
"thread_pool_write",

5
web/src/pages/Platform/Overview/Node/Monitor/overview.jsx
View File

@ -3,8 +3,6 @@ import StatisticBar from "./statistic_bar";
import ClusterMetric from "../../components/cluster_metric";
import { useMemo } from "react";
const timezone = "local";
export default ({
isAgent,
clusterID,
@ -12,7 +10,9 @@ export default ({
timeRange,
handleTimeChange,
bucketSize,
timezone,
timeout,
refresh
}) => {
return (
@ -20,6 +20,7 @@ export default ({
timezone={timezone}
timeRange={timeRange}
timeout={timeout}
refresh={refresh}
handleTimeChange={handleTimeChange}
overview={1}
fetchUrl={`${ESPrefix}/${clusterID}/node/${nodeID}/metrics`}

19
web/src/pages/Platform/Overview/components/MetricChart.jsx
View File

@ -27,6 +27,7 @@ export default (props) => {
timezone,
timeRange,
timeout,
refresh,
handleTimeChange,
fetchUrl,
metricKey,
@ -82,9 +83,9 @@ export default (props) => {
}
useEffect(() => {
observerRef.current.deps = cloneDeep([queryParams, fetchUrl, metricKey])
fetchData(queryParams, fetchUrl, metricKey)
}, [JSON.stringify(queryParams), fetchUrl, metricKey])
observerRef.current.deps = cloneDeep([queryParams, fetchUrl, metricKey, refresh])
fetchData(queryParams, fetchUrl, metricKey, refresh)
}, [JSON.stringify(queryParams), fetchUrl, metricKey, refresh])
useEffect(() => {
const observer = new IntersectionObserver(
@ -144,7 +145,6 @@ export default (props) => {
};
const renderChart = () => {
if (loading) return <div style={{ height }}></div>
if (error) {
return (
<div style={{ height, padding: 10 }}>
@ -155,7 +155,14 @@ export default (props) => {
const axis = metric?.axis || [];
const lines = metric?.lines || [];
if (lines.every((item) => !item.data || item.data.length === 0)) {
return <Empty style={{ height, margin: 0, paddingTop: 64 }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
return (
<div style={{ height, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Empty style={{ margin: 0}} image={Empty.PRESENTED_IMAGE_SIMPLE} />
</div>
)
}
if (customRenderChart) {
return customRenderChart(metric)
}
return (
<Chart
@ -314,7 +321,7 @@ export default (props) => {
</span>
}
</div>
{customRenderChart ? customRenderChart(metric) : renderChart()}
{renderChart()}
</Spin>
</div>
);

3
web/src/pages/Platform/Overview/components/cluster_metric.jsx
View File

@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
export default (props) => {
const { fetchUrl, overview, metrics = [], renderExtra, timeRange, timeout, timezone, bucketSize, handleTimeChange } = props
const { fetchUrl, overview, metrics = [], renderExtra, timeRange, timeout, timezone, refresh, bucketSize, handleTimeChange } = props
if (!fetchUrl || metrics.length === 0) {
return null;
@ -36,6 +36,7 @@ export default (props) => {
timezone={timezone}
timeRange={timeRange}
timeout={timeout}
refresh={refresh}
handleTimeChange={handleTimeChange}
fetchUrl={fetchUrl}
metricKey={metricKey}

4
web/src/pages/Platform/Overview/components/index_metric.jsx
View File

@ -23,7 +23,8 @@ export default (props) => {
shardID,
bucketSize,
metrics = [],
timeout
timeout,
refresh,
} = props
if (!clusterID || metrics.length == 0) {
@ -130,6 +131,7 @@ export default (props) => {
queryParams={queryParams}
className={"metric-item"}
timeout={timeout}
refresh={refresh}
/>
))
}

2
web/src/pages/Platform/Overview/components/node_metric.jsx
View File

@ -21,6 +21,7 @@ export default (props) => {
setParam,
bucketSize,
timeout,
refresh,
metrics = []
} = props
@ -153,6 +154,7 @@ export default (props) => {
queryParams={queryParams}
className={"metric-item"}
timeout={timeout}
refresh={refresh}
/>
))
}

4
web/src/pages/Platform/Overview/components/queue_metric.jsx
View File

@ -21,7 +21,8 @@ export default (props) => {
setParam,
bucketSize,
metrics = [],
timeout
timeout,
refresh
} = props
if (!clusterID || metrics.length == 0) {
@ -153,6 +154,7 @@ export default (props) => {
queryParams={queryParams}
className={"metric-item"}
timeout={timeout}
refresh={refresh}
/>
))
}