Skip to content

Commit 7dd3808

Browse files
yaojp123yaojiping
yaojp123
and
yaojiping
authored
fix: optimize UI without clusters (#8)
Co-authored-by: yaojiping <[email protected]>
1 parent 46a5976 commit 7dd3808

File tree

14 files changed

+168
-126
lines changed

14 files changed

+168
-126
lines changed

‎web/config/router.config.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,14 @@ export default [
100100
path: "/data",
101101
name: "data",
102102
icon: "database",
103-
authority: ["data"],
103+
authority: [
104+
"data.index:all",
105+
"data.index:read",
106+
"data.alias:all",
107+
"data.alias:read",
108+
"data.view:all",
109+
"data.view:read",
110+
],
104111
routes: [
105112
{
106113
path: "/data/index",

‎web/src/components/GlobalHeader/RightContent.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,7 @@ export default class GlobalHeaderRight extends PureComponent {
333333
topLeft: false,
334334
}}> */}
335335
{this.props.clusterList.length > 0 &&
336-
this.props.selectedCluster.id != "" && (
336+
this.props.selectedCluster?.id && (
337337
<ConsoleUI
338338
selectedCluster={this.props.selectedCluster}
339339
clusterList={this.props.clusterList}

‎web/src/components/Overview/Monitor/index.jsx

+79-72
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useMemo, useEffect, useCallback } from "react";
2-
import { Card, Tabs, Breadcrumb, Button, BackTop } from "antd";
2+
import { Card, Tabs, Breadcrumb, Button, BackTop, Empty } from "antd";
33
import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
44
import { formatter } from "@/utils/format";
55
import moment from "moment";
@@ -117,81 +117,88 @@ const Monitor = (props) => {
117117
<BreadcrumbList data={breadcrumbList} />
118118

119119
<Card bodyStyle={{ padding: 15 }}>
120-
<div style={{ marginBottom: 5 }}>
121-
<div style={{ display: 'flex', gap: 8 }}>
122-
<div style={{ flexGrow: 0 }}>
123-
<DatePicker
124-
locale={getLocale()}
125-
start={state.timeRange.min}
126-
end={state.timeRange.max}
127-
onRangeChange={({ start, end }) => {
128-
handleTimeChange({ start, end })
129-
}}
130-
{...refresh}
131-
onRefreshChange={setRefresh}
132-
onRefresh={handleTimeChange}
133-
showTimeSetting={true}
134-
showTimeInterval={true}
135-
timeInterval={state.timeInterval}
136-
showTimeout={true}
137-
timeout={state.timeout}
138-
onTimeSettingChange={(timeSetting) => {
139-
localStorage.setItem(TIMEOUT_CACHE_KEY, timeSetting.timeout)
140-
setState({
141-
...state,
142-
timeInterval: timeSetting.timeInterval,
143-
timeout: timeSetting.timeout
144-
});
120+
{
121+
selectedCluster ? (
122+
<>
123+
<div style={{ marginBottom: 5 }}>
124+
<div style={{ display: 'flex', gap: 8 }}>
125+
<div style={{ flexGrow: 0 }}>
126+
<DatePicker
127+
locale={getLocale()}
128+
start={state.timeRange.min}
129+
end={state.timeRange.max}
130+
onRangeChange={({ start, end }) => {
131+
handleTimeChange({ start, end })
132+
}}
133+
{...refresh}
134+
onRefreshChange={setRefresh}
135+
onRefresh={handleTimeChange}
136+
showTimeSetting={true}
137+
showTimeInterval={true}
138+
timeInterval={state.timeInterval}
139+
showTimeout={true}
140+
timeout={state.timeout}
141+
onTimeSettingChange={(timeSetting) => {
142+
localStorage.setItem(TIMEOUT_CACHE_KEY, timeSetting.timeout)
143+
setState({
144+
...state,
145+
timeInterval: timeSetting.timeInterval,
146+
timeout: timeSetting.timeout
147+
});
148+
}}
149+
timeZone={timeZone}
150+
onTimeZoneChange={setTimeZone}
151+
recentlyUsedRangesKey={'monitor'}
152+
/>
153+
</div>
154+
</div>
155+
</div>
156+
157+
<Tabs
158+
activeKey={param?.tab || panes[0]?.key}
159+
onChange={(key) => {
160+
setParam({ ...param, tab: key });
145161
}}
146-
timeZone={timeZone}
147-
onTimeZoneChange={setTimeZone}
148-
recentlyUsedRangesKey={'monitor'}
149-
/>
150-
</div>
151-
</div>
152-
</div>
153-
154-
<Tabs
155-
activeKey={param?.tab || panes[0]?.key}
156-
onChange={(key) => {
157-
setParam({ ...param, tab: key });
158-
}}
159-
tabBarGutter={10}
160-
destroyInactiveTabPane
161-
animated={false}
162-
>
163-
{panes.map((pane) => (
164-
<TabPane tab={pane.title} key={pane.key}>
165-
<StatisticBar
166-
setSpinning={setSpinning}
167-
onInfoChange={onInfoChange}
168-
{...state}
169-
{...extraParams}
170-
/>
171-
<div style={{ marginTop: 15 }}>
172-
{checkPaneParams({
173-
...state,
174-
...extraParams,
175-
}) ? (
176-
typeof pane.component == "string" ? (
177-
pane.component
178-
) : (
179-
<pane.component
180-
selectedCluster={selectedCluster}
181-
isAgent={isAgent}
182-
{...state}
183-
handleTimeChange={handleTimeChange}
162+
tabBarGutter={10}
163+
destroyInactiveTabPane
164+
animated={false}
165+
>
166+
{panes.map((pane) => (
167+
<TabPane tab={pane.title} key={pane.key}>
168+
<StatisticBar
184169
setSpinning={setSpinning}
170+
onInfoChange={onInfoChange}
171+
{...state}
185172
{...extraParams}
186-
bucketSize={state.timeInterval}
187-
timeout={state.timeout}
188173
/>
189-
)
190-
) : null}
191-
</div>
192-
</TabPane>
193-
))}
194-
</Tabs>
174+
<div style={{ marginTop: 15 }}>
175+
{checkPaneParams({
176+
...state,
177+
...extraParams,
178+
}) ? (
179+
typeof pane.component == "string" ? (
180+
pane.component
181+
) : (
182+
<pane.component
183+
selectedCluster={selectedCluster}
184+
isAgent={isAgent}
185+
{...state}
186+
handleTimeChange={handleTimeChange}
187+
setSpinning={setSpinning}
188+
{...extraParams}
189+
bucketSize={state.timeInterval}
190+
timeout={state.timeout}
191+
/>
192+
)
193+
) : null}
194+
</div>
195+
</TabPane>
196+
))}
197+
</Tabs>
198+
</>
199+
) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
200+
}
201+
195202
</Card>
196203

197204
<BackTop />

‎web/src/lib/hooks/use_async.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from "react";
22

3-
export default function useAsync(callback, dependencies = []) {
3+
export default function useAsync(callback, dependencies = [], runInInit = true) {
44
const loadingRef = React.useRef(false);
55
const [loading, setLoading] = React.useState(true);
66
const [error, setError] = React.useState();
@@ -24,8 +24,10 @@ export default function useAsync(callback, dependencies = []) {
2424
}, dependencies);
2525

2626
React.useEffect(() => {
27-
callbackMemoized();
28-
}, [callbackMemoized]);
27+
if (runInInit) {
28+
callbackMemoized();
29+
}
30+
}, [callbackMemoized, runInInit]);
2931

3032
return { run: callbackMemoized, loading, error, value };
3133
}

‎web/src/lib/hooks/use_fetch.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ const DEFAULT_OPTIONS = {
55
headers: { "Content-Type": "application/json" },
66
};
77

8-
export default function useFetch(url, options = {}, dependencies = []) {
8+
export default function useFetch(url, options = {}, dependencies = [], runInInit = true) {
9+
const { returnRawResponse, noticeable, ...rest } = options
910
return useAsync(() => {
10-
return request(url, { ...DEFAULT_OPTIONS, ...options });
11-
}, dependencies);
11+
return request(url, { ...DEFAULT_OPTIONS, ...rest }, returnRawResponse, noticeable);
12+
}, dependencies, runInInit);
1213
}

‎web/src/pages/Cluster/Metrics.js

+10-13
Original file line numberDiff line numberDiff line change
@@ -189,13 +189,10 @@ class ClusterMonitor extends PureComponent {
189189
};
190190

191191
componentDidUpdate(prevProps, prevState, snapshot) {
192-
// console.log(this.props.selectedCluster)
193-
// console.log(this.state.clusterID)
194-
195-
if (this.props.selectedCluster.id !== this.state.clusterID) {
192+
if (this.props.selectedCluster?.id !== this.state.clusterID) {
196193
console.log("cluster changed");
197194

198-
this.setState({ clusterID: this.props.selectedCluster.id }, () => {
195+
this.setState({ clusterID: this.props.selectedCluster?.id }, () => {
199196
//TODO 处理 cancel 事件，先把当前还在执行中的请求结束，避免更新完成之后，被晚到的之前的请求给覆盖了。
200197
this.fetchData();
201198
});
@@ -225,10 +222,10 @@ class ClusterMonitor extends PureComponent {
225222
},
226223
});
227224
} else if (
228-
this.props.selectedCluster.id !== undefined &&
229-
this.props.selectedCluster.id !== null
225+
this.props.selectedCluster?.id !== undefined &&
226+
this.props.selectedCluster?.id !== null
230227
) {
231-
this.setState({ clusterID: this.props.selectedCluster.id }, () => {});
228+
this.setState({ clusterID: this.props.selectedCluster?.id }, () => {});
232229
} else {
233230
//alert("cluster ID is not set");
234231
return;
@@ -537,7 +534,7 @@ class ClusterMonitor extends PureComponent {
537534
})}
538535
>
539536
<ClusterMetric
540-
clusterID={this.props.selectedCluster.id}
537+
clusterID={this.props.selectedCluster?.id}
541538
timezone={timezone}
542539
timeRange={this.state.timeRange}
543540
handleTimeChange={this.handleTimeChange}
@@ -550,7 +547,7 @@ class ClusterMonitor extends PureComponent {
550547
})}
551548
>
552549
<NodeMetric
553-
clusterID={this.props.selectedCluster.id}
550+
clusterID={this.props.selectedCluster?.id}
554551
timezone={timezone}
555552
timeRange={this.state.timeRange}
556553
handleTimeChange={this.handleTimeChange}
@@ -565,7 +562,7 @@ class ClusterMonitor extends PureComponent {
565562
})}
566563
>
567564
<IndexMetric
568-
clusterID={this.props.selectedCluster.id}
565+
clusterID={this.props.selectedCluster?.id}
569566
timezone={timezone}
570567
timeRange={this.state.timeRange}
571568
handleTimeChange={this.handleTimeChange}
@@ -580,7 +577,7 @@ class ClusterMonitor extends PureComponent {
580577
})}
581578
>
582579
<QueueMetric
583-
clusterID={this.props.selectedCluster.id}
580+
clusterID={this.props.selectedCluster?.id}
584581
timezone={timezone}
585582
timeRange={this.state.timeRange}
586583
handleTimeChange={this.handleTimeChange}
@@ -595,7 +592,7 @@ class ClusterMonitor extends PureComponent {
595592
})}
596593
>
597594
<StorageMetric
598-
clusterID={this.props.selectedCluster.id}
595+
clusterID={this.props.selectedCluster?.id}
599596
timezone={timezone}
600597
timeRange={this.state.timeRange}
601598
/>

‎web/src/pages/Cluster/components/overview/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,13 @@ const Index = (props) => {
4949
}, [state.timeRange]);
5050

5151
const [selectedClusterID] = React.useMemo(() => {
52-
let selectedClusterID = props.selectedCluster.id;
52+
let selectedClusterID = props.selectedCluster?.id;
5353
if (selectedClusterID && selectedClusterID != state.clusterID) {
5454
setState({ ...state, clusterID: selectedClusterID });
5555
}
5656

5757
return [selectedClusterID];
58-
}, [props.selectedCluster.id]);
58+
}, [props.selectedCluster?.id]);
5959

6060
const handleTimeChange = ({ start, end }) => {
6161
const bounds = calculateBounds({

0 commit comments

Comments
 (0)