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

fix: optimize UI without clusters (#8) 

Co-authored-by: yaojiping <yaojiping@infini.ltd>
This commit is contained in:
yaojp123 2024-12-06 15:28:55 +08:00 committed by GitHub
parent 46a5976bf3
commit 7dd3808942
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 169 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/config/router.config.js
View File

@ -100,7 +100,14 @@ export default [
path: "/data", path: "/data",
name: "data", name: "data",
icon: "database", icon: "database",
authority: ["data"], authority: [
"data.index:all",
"data.index:read",
"data.alias:all",
"data.alias:read",
"data.view:all",
"data.view:read",
],
routes: [ routes: [
{ {
path: "/data/index", path: "/data/index",

2
web/src/components/GlobalHeader/RightContent.js
View File

@ -333,7 +333,7 @@ export default class GlobalHeaderRight extends PureComponent {
topLeft: false, topLeft: false,
}}> */} }}> */}
{this.props.clusterList.length > 0 && {this.props.clusterList.length > 0 &&
this.props.selectedCluster.id != "" && ( this.props.selectedCluster?.id && (
<ConsoleUI <ConsoleUI
selectedCluster={this.props.selectedCluster} selectedCluster={this.props.selectedCluster}
clusterList={this.props.clusterList} clusterList={this.props.clusterList}

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

@ -1,5 +1,5 @@
import React, { useState, useMemo, useEffect, useCallback } from "react"; import React, { useState, useMemo, useEffect, useCallback } from "react";
import { Card, Tabs, Breadcrumb, Button, BackTop } from "antd"; import { Card, Tabs, Breadcrumb, Button, BackTop, Empty } from "antd";
import { calculateBounds } from "@/components/vendor/data/common/query/timefilter"; import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
import { formatter } from "@/utils/format"; import { formatter } from "@/utils/format";
import moment from "moment"; import moment from "moment";
@ -117,81 +117,88 @@ const Monitor = (props) => {
<BreadcrumbList data={breadcrumbList} /> <BreadcrumbList data={breadcrumbList} />
<Card bodyStyle={{ padding: 15 }}> <Card bodyStyle={{ padding: 15 }}>
<div style={{ marginBottom: 5 }}> {
<div style={{ display: 'flex', gap: 8 }}> selectedCluster ? (
<div style={{ flexGrow: 0 }}> <>
<DatePicker <div style={{ marginBottom: 5 }}>
locale={getLocale()} <div style={{ display: 'flex', gap: 8 }}>
start={state.timeRange.min} <div style={{ flexGrow: 0 }}>
end={state.timeRange.max} <DatePicker
onRangeChange={({ start, end }) => { locale={getLocale()}
handleTimeChange({ start, end }) start={state.timeRange.min}
}} end={state.timeRange.max}
{...refresh} onRangeChange={({ start, end }) => {
onRefreshChange={setRefresh} handleTimeChange({ start, end })
onRefresh={handleTimeChange} }}
showTimeSetting={true} {...refresh}
showTimeInterval={true} onRefreshChange={setRefresh}
timeInterval={state.timeInterval} onRefresh={handleTimeChange}
showTimeout={true} showTimeSetting={true}
timeout={state.timeout} showTimeInterval={true}
onTimeSettingChange={(timeSetting) => { timeInterval={state.timeInterval}
localStorage.setItem(TIMEOUT_CACHE_KEY, timeSetting.timeout) showTimeout={true}
setState({
...state,
timeInterval: timeSetting.timeInterval,
timeout: timeSetting.timeout
});
}}
timeZone={timeZone}
onTimeZoneChange={setTimeZone}
recentlyUsedRangesKey={'monitor'}
/>
</div>
</div>
</div>
<Tabs
activeKey={param?.tab || panes[0]?.key}
onChange={(key) => {
setParam({ ...param, tab: key });
}}
tabBarGutter={10}
destroyInactiveTabPane
animated={false}
>
{panes.map((pane) => (
<TabPane tab={pane.title} key={pane.key}>
<StatisticBar
setSpinning={setSpinning}
onInfoChange={onInfoChange}
{...state}
{...extraParams}
/>
<div style={{ marginTop: 15 }}>
{checkPaneParams({
...state,
...extraParams,
}) ? (
typeof pane.component == "string" ? (
pane.component
) : (
<pane.component
selectedCluster={selectedCluster}
isAgent={isAgent}
{...state}
handleTimeChange={handleTimeChange}
setSpinning={setSpinning}
{...extraParams}
bucketSize={state.timeInterval}
timeout={state.timeout} timeout={state.timeout}
onTimeSettingChange={(timeSetting) => {
localStorage.setItem(TIMEOUT_CACHE_KEY, timeSetting.timeout)
setState({
...state,
timeInterval: timeSetting.timeInterval,
timeout: timeSetting.timeout
});
}}
timeZone={timeZone}
onTimeZoneChange={setTimeZone}
recentlyUsedRangesKey={'monitor'}
/> />
) </div>
) : null} </div>
</div> </div>
</TabPane>
))} <Tabs
</Tabs> activeKey={param?.tab || panes[0]?.key}
onChange={(key) => {
setParam({ ...param, tab: key });
}}
tabBarGutter={10}
destroyInactiveTabPane
animated={false}
>
{panes.map((pane) => (
<TabPane tab={pane.title} key={pane.key}>
<StatisticBar
setSpinning={setSpinning}
onInfoChange={onInfoChange}
{...state}
{...extraParams}
/>
<div style={{ marginTop: 15 }}>
{checkPaneParams({
...state,
...extraParams,
}) ? (
typeof pane.component == "string" ? (
pane.component
) : (
<pane.component
selectedCluster={selectedCluster}
isAgent={isAgent}
{...state}
handleTimeChange={handleTimeChange}
setSpinning={setSpinning}
{...extraParams}
bucketSize={state.timeInterval}
timeout={state.timeout}
/>
)
) : null}
</div>
</TabPane>
))}
</Tabs>
</>
) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
}
</Card> </Card>
<BackTop /> <BackTop />

8
web/src/lib/hooks/use_async.js
View File

@ -1,6 +1,6 @@
import * as React from "react"; import * as React from "react";
export default function useAsync(callback, dependencies = []) { export default function useAsync(callback, dependencies = [], runInInit = true) {
const loadingRef = React.useRef(false); const loadingRef = React.useRef(false);
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(); const [error, setError] = React.useState();
@ -24,8 +24,10 @@ export default function useAsync(callback, dependencies = []) {
}, dependencies); }, dependencies);
React.useEffect(() => { React.useEffect(() => {
callbackMemoized(); if (runInInit) {
}, [callbackMemoized]); callbackMemoized();
}
}, [callbackMemoized, runInInit]);
return { run: callbackMemoized, loading, error, value }; return { run: callbackMemoized, loading, error, value };
} }

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

@ -5,8 +5,9 @@ const DEFAULT_OPTIONS = {
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
}; };
export default function useFetch(url, options = {}, dependencies = []) { export default function useFetch(url, options = {}, dependencies = [], runInInit = true) {
const { returnRawResponse, noticeable, ...rest } = options
return useAsync(() => { return useAsync(() => {
return request(url, { ...DEFAULT_OPTIONS, ...options }); return request(url, { ...DEFAULT_OPTIONS, ...rest }, returnRawResponse, noticeable);
}, dependencies); }, dependencies, runInInit);
} }

23
web/src/pages/Cluster/Metrics.js
View File

@ -189,13 +189,10 @@ class ClusterMonitor extends PureComponent {
}; };
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
// console.log(this.props.selectedCluster) if (this.props.selectedCluster?.id !== this.state.clusterID) {
// console.log(this.state.clusterID)
if (this.props.selectedCluster.id !== this.state.clusterID) {
console.log("cluster changed"); console.log("cluster changed");
this.setState({ clusterID: this.props.selectedCluster.id }, () => { this.setState({ clusterID: this.props.selectedCluster?.id }, () => {
//TODO 处理 cancel 事件，先把当前还在执行中的请求结束，避免更新完成之后，被晚到的之前的请求给覆盖了。 //TODO 处理 cancel 事件，先把当前还在执行中的请求结束，避免更新完成之后，被晚到的之前的请求给覆盖了。
this.fetchData(); this.fetchData();
}); });
@ -225,10 +222,10 @@ class ClusterMonitor extends PureComponent {
}, },
}); });
} else if ( } else if (
this.props.selectedCluster.id !== undefined && this.props.selectedCluster?.id !== undefined &&
this.props.selectedCluster.id !== null this.props.selectedCluster?.id !== null
) { ) {
this.setState({ clusterID: this.props.selectedCluster.id }, () => {}); this.setState({ clusterID: this.props.selectedCluster?.id }, () => {});
} else { } else {
//alert("cluster ID is not set"); //alert("cluster ID is not set");
return; return;
@ -537,7 +534,7 @@ class ClusterMonitor extends PureComponent {
})} })}
> >
<ClusterMetric <ClusterMetric
clusterID={this.props.selectedCluster.id} clusterID={this.props.selectedCluster?.id}
timezone={timezone} timezone={timezone}
timeRange={this.state.timeRange} timeRange={this.state.timeRange}
handleTimeChange={this.handleTimeChange} handleTimeChange={this.handleTimeChange}
@ -550,7 +547,7 @@ class ClusterMonitor extends PureComponent {
})} })}
> >
<NodeMetric <NodeMetric
clusterID={this.props.selectedCluster.id} clusterID={this.props.selectedCluster?.id}
timezone={timezone} timezone={timezone}
timeRange={this.state.timeRange} timeRange={this.state.timeRange}
handleTimeChange={this.handleTimeChange} handleTimeChange={this.handleTimeChange}
@ -565,7 +562,7 @@ class ClusterMonitor extends PureComponent {
})} })}
> >
<IndexMetric <IndexMetric
clusterID={this.props.selectedCluster.id} clusterID={this.props.selectedCluster?.id}
timezone={timezone} timezone={timezone}
timeRange={this.state.timeRange} timeRange={this.state.timeRange}
handleTimeChange={this.handleTimeChange} handleTimeChange={this.handleTimeChange}
@ -580,7 +577,7 @@ class ClusterMonitor extends PureComponent {
})} })}
> >
<QueueMetric <QueueMetric
clusterID={this.props.selectedCluster.id} clusterID={this.props.selectedCluster?.id}
timezone={timezone} timezone={timezone}
timeRange={this.state.timeRange} timeRange={this.state.timeRange}
handleTimeChange={this.handleTimeChange} handleTimeChange={this.handleTimeChange}
@ -595,7 +592,7 @@ class ClusterMonitor extends PureComponent {
})} })}
> >
<StorageMetric <StorageMetric
clusterID={this.props.selectedCluster.id} clusterID={this.props.selectedCluster?.id}
timezone={timezone} timezone={timezone}
timeRange={this.state.timeRange} timeRange={this.state.timeRange}
/> />

4
web/src/pages/Cluster/components/overview/index.jsx
View File

@ -49,13 +49,13 @@ const Index = (props) => {
}, [state.timeRange]); }, [state.timeRange]);
const [selectedClusterID] = React.useMemo(() => { const [selectedClusterID] = React.useMemo(() => {
let selectedClusterID = props.selectedCluster.id; let selectedClusterID = props.selectedCluster?.id;
if (selectedClusterID && selectedClusterID != state.clusterID) { if (selectedClusterID && selectedClusterID != state.clusterID) {
setState({ ...state, clusterID: selectedClusterID }); setState({ ...state, clusterID: selectedClusterID });
} }
return [selectedClusterID]; return [selectedClusterID];
}, [props.selectedCluster.id]); }, [props.selectedCluster?.id]);
const handleTimeChange = ({ start, end }) => { const handleTimeChange = ({ start, end }) => {
const bounds = calculateBounds({ const bounds = calculateBounds({

40
web/src/pages/DataManagement/Discover.jsx
View File

@ -213,7 +213,7 @@ const Discover = (props) => {
const IP = await services.indexPatternService.get( const IP = await services.indexPatternService.get(
id, id,
typ, typ,
props.selectedCluster.id props.selectedCluster?.id
); );
subscriptions.unsubscribe(); subscriptions.unsubscribe();
props.changeIndexPattern(IP); props.changeIndexPattern(IP);
@ -247,7 +247,7 @@ const Discover = (props) => {
const IP = await services.indexPatternService.get( const IP = await services.indexPatternService.get(
indexPattern.id, indexPattern.id,
indexPattern.type, indexPattern.type,
props.selectedCluster.id props.selectedCluster?.id
); );
subscriptions.unsubscribe(); subscriptions.unsubscribe();
IP.timeFieldName = timeField; IP.timeFieldName = timeField;
@ -286,7 +286,7 @@ const Discover = (props) => {
async (_payload) => { async (_payload) => {
if (mode === "insight" && indexPattern.timeFieldName) { if (mode === "insight" && indexPattern.timeFieldName) {
visRef?.current?.refreshMeta( visRef?.current?.refreshMeta(
props.selectedCluster.id, props.selectedCluster?.id,
indexPattern.title, indexPattern.title,
indexPattern.timeFieldName, indexPattern.timeFieldName,
getFilters() getFilters()
@ -356,7 +356,7 @@ const Discover = (props) => {
const res = await fetchESRequest( const res = await fetchESRequest(
params, params,
props.selectedCluster.id, props.selectedCluster?.id,
{ {
searchTimeout: localStorage.getItem('search_time_out') || '60s', searchTimeout: localStorage.getItem('search_time_out') || '60s',
ignoreTimeout: true ignoreTimeout: true
@ -404,7 +404,7 @@ const Discover = (props) => {
const IP = await services.indexPatternService.get( const IP = await services.indexPatternService.get(
record.index_pattern, record.index_pattern,
"index", "index",
props.selectedCluster.id props.selectedCluster?.id
); );
IP.timeFieldName = record.time_field; IP.timeFieldName = record.time_field;
subscriptions.unsubscribe(); subscriptions.unsubscribe();
@ -702,7 +702,7 @@ const Discover = (props) => {
async ({ _index, _id, _type, _source, is_new }) => { async ({ _index, _id, _type, _source, is_new }) => {
const { http } = getContext(); const { http } = getContext();
const res = await http.put( const res = await http.put(
`/elasticsearch/${props.selectedCluster.id}/doc/${_index}/${_id}`, `/elasticsearch/${props.selectedCluster?.id}/doc/${_index}/${_id}`,
{ {
prependBasePath: false, prependBasePath: false,
query: { query: {
@ -729,7 +729,7 @@ const Discover = (props) => {
async ({ _index, _id, _type }) => { async ({ _index, _id, _type }) => {
const { http } = getContext(); const { http } = getContext();
const res = await http.delete( const res = await http.delete(
`/elasticsearch/${props.selectedCluster.id}/doc/${_index}/${_id}`, `/elasticsearch/${props.selectedCluster?.id}/doc/${_index}/${_id}`,
{ {
prependBasePath: false, prependBasePath: false,
query: { query: {
@ -850,7 +850,7 @@ const Discover = (props) => {
} }
} }
const res = await getDataTips({ const res = await getDataTips({
clusterId: props.selectedCluster.id, clusterId: props.selectedCluster?.id,
indexPattern: indexPattern.title, indexPattern: indexPattern.title,
timeField: indexPattern.timeFieldName, timeField: indexPattern.timeFieldName,
filter, filter,
@ -980,7 +980,7 @@ const Discover = (props) => {
} }
} }
const res = await fetchESRequest(params, props.selectedCluster.id); const res = await fetchESRequest(params, props.selectedCluster?.id);
if (afterFuc) { if (afterFuc) {
const buckets = sampleRecords === 'all' const buckets = sampleRecords === 'all'
? res?.aggregations?.['top5']?.buckets ? res?.aggregations?.['top5']?.buckets
@ -994,11 +994,11 @@ const Discover = (props) => {
useEffect(() => { useEffect(() => {
if (indexPattern?.type === "view") { if (indexPattern?.type === "view") {
fetchViewDefaultLayout(props.selectedCluster.id, indexPattern?.id); fetchViewDefaultLayout(props.selectedCluster?.id, indexPattern?.id);
} else { } else {
setViewLayout(); setViewLayout();
} }
}, [indexPattern, props.selectedCluster.id]); }, [indexPattern, props.selectedCluster?.id]);
useEffect(() => { useEffect(() => {
setMode(viewLayout ? "layout" : "table"); setMode(viewLayout ? "layout" : "table");
@ -1091,7 +1091,7 @@ const Discover = (props) => {
ref={insightBarRef} ref={insightBarRef}
loading={resultState === "loading"} loading={resultState === "loading"}
queries={{ queries={{
clusterId: props.selectedCluster.id, clusterId: props.selectedCluster?.id,
indexPattern: indexPattern, indexPattern: indexPattern,
query: { query: {
language: "kuery", language: "kuery",
@ -1194,7 +1194,7 @@ const Discover = (props) => {
<Visualization <Visualization
ref={visRef} ref={visRef}
indexPattern={indexPattern.title} indexPattern={indexPattern.title}
clusterId={props.selectedCluster.id} clusterId={props.selectedCluster?.id}
timeField={indexPattern.timeFieldName} timeField={indexPattern.timeFieldName}
getFilters={getSearchFilters} getFilters={getSearchFilters}
getBucketSize={getBucketSize} getBucketSize={getBucketSize}
@ -1205,7 +1205,7 @@ const Discover = (props) => {
) : mode === "layout" ? ( ) : mode === "layout" ? (
<Layout <Layout
ref={layoutRef} ref={layoutRef}
clusterId={props.selectedCluster.id} clusterId={props.selectedCluster?.id}
indexPattern={indexPattern} indexPattern={indexPattern}
timeRange={timefilter?.getTime()} timeRange={timefilter?.getTime()}
query={getSearchFilters()} query={getSearchFilters()}
@ -1354,7 +1354,7 @@ const Discover = (props) => {
}; };
const DiscoverUI = (props) => { const DiscoverUI = (props) => {
if (!props.selectedCluster.id) { if (!props.selectedCluster?.id) {
return null; return null;
} }
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -1369,7 +1369,7 @@ const DiscoverUI = (props) => {
useMemo(() => { useMemo(() => {
const { http } = getContext(); const { http } = getContext();
http.getServerBasePath = () => { http.getServerBasePath = () => {
return `${ESPrefix}/` + props.selectedCluster.id; return `${ESPrefix}/` + props.selectedCluster?.id;
}; };
}, [props.selectedCluster]); }, [props.selectedCluster]);
@ -1432,7 +1432,7 @@ const DiscoverUI = (props) => {
defaultIP = await services.indexPatternService.get( defaultIP = await services.indexPatternService.get(
index, index,
"index", "index",
props.selectedCluster.id props.selectedCluster?.id
); );
} else { } else {
if (ils.length > 0) { if (ils.length > 0) {
@ -1455,7 +1455,7 @@ const DiscoverUI = (props) => {
defaultIP = await services.indexPatternService.get( defaultIP = await services.indexPatternService.get(
targetIndex, targetIndex,
"index", "index",
props.selectedCluster.id props.selectedCluster?.id
); );
setIndex(targetIndex); setIndex(targetIndex);
} }
@ -1569,8 +1569,8 @@ const DiscoverUI = (props) => {
}; };
const DiscoverContainer = (props) => { const DiscoverContainer = (props) => {
if (props.selectedCluster.id == "") { if (!props.selectedCluster?.id) {
return null; return <Card ><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></Card>;
} }
return ( return (
<QueryParamProvider ReactRouterRoute={Route}> <QueryParamProvider ReactRouterRoute={Route}>

4
web/src/pages/DataManagement/IndexPatterns.jsx
View File

@ -20,7 +20,7 @@ import { getAuthority, hasAuthority } from "@/utils/authority";
import EditLayout from "./View/EditLayout"; import EditLayout from "./View/EditLayout";
const IndexPatterns = (props) => { const IndexPatterns = (props) => {
if (!props.selectedCluster.id) { if (!props.selectedCluster?.id) {
return null; return null;
} }
const history = useMemo(() => { const history = useMemo(() => {
@ -30,7 +30,7 @@ const IndexPatterns = (props) => {
const createComponentKey = useMemo(() => { const createComponentKey = useMemo(() => {
const { http, uiSettings } = useGlobalContext(); const { http, uiSettings } = useGlobalContext();
http.getServerBasePath = () => { http.getServerBasePath = () => {
return `${ESPrefix}/` + props.selectedCluster.id; return `${ESPrefix}/` + props.selectedCluster?.id;
}; };
return "CreateIndexPatternWizard_" + Math.random(); return "CreateIndexPatternWizard_" + Math.random();
}, [props.selectedCluster]); }, [props.selectedCluster]);

13
web/src/pages/Platform/Overview/Cluster/Monitor/index.jsx
View File

@ -7,6 +7,7 @@ import { connect } from "dva";
import { formatMessage } from "umi/locale"; import { formatMessage } from "umi/locale";
import Monitor from "@/components/Overview/Monitor"; import Monitor from "@/components/Overview/Monitor";
import StatisticBar from "./statistic_bar"; import StatisticBar from "./statistic_bar";
import { Empty } from "antd";
const panes = [ const panes = [
{ title: "Overview", component: Overview, key: "overview" }, { title: "Overview", component: Overview, key: "overview" },
@ -31,10 +32,10 @@ const Page = (props) => {
formatState={(state) => { formatState={(state) => {
let clusterID = props.match.params?.cluster_id; let clusterID = props.match.params?.cluster_id;
if ( if (
props.selectedCluster.id && props.selectedCluster?.id &&
props.selectedCluster.id !== clusterID props.selectedCluster?.id !== clusterID
) { ) {
clusterID = props.selectedCluster.id; clusterID = props.selectedCluster?.id;
} }
return { return {
...state, ...state,
@ -62,9 +63,9 @@ const Page = (props) => {
clusterMonitored, clusterMonitored,
clusterName: selectedCluster?.name, clusterName: selectedCluster?.name,
clusterID: clusterID:
props.selectedCluster.id && props.selectedCluster?.id &&
props.selectedCluster.id !== props.match.params?.cluster_id props.selectedCluster?.id !== props.match.params?.cluster_id
? props.selectedCluster.id ? props.selectedCluster?.id
: props.match.params?.cluster_id, : props.match.params?.cluster_id,
}} }}
panes={panes} panes={panes}

3
web/src/pages/Platform/Overview/Cluster/Monitor/statistic_bar.jsx
View File

@ -25,6 +25,9 @@ const StatisticBar = ({
clusterMonitored, clusterMonitored,
onInfoChange onInfoChange
}) => { }) => {
if (!clusterID) return null
const { loading, error, value } = useFetch( const { loading, error, value } = useFetch(
`${ESPrefix}/${clusterID}/metrics`, `${ESPrefix}/${clusterID}/metrics`,
{}, {},

10
web/src/pages/System/Cluster/AgentCredentialForm.jsx
View File

@ -4,6 +4,7 @@ import { formatMessage } from "umi/locale";
import useFetch from "@/lib/hooks/use_fetch"; import useFetch from "@/lib/hooks/use_fetch";
import { formatESSearchResult } from "@/lib/elasticsearch/util"; import { formatESSearchResult } from "@/lib/elasticsearch/util";
import { MANUAL_VALUE } from "./steps"; import { MANUAL_VALUE } from "./steps";
import { hasAuthority } from "@/utils/authority";
export default (props) => { export default (props) => {
const { const {
@ -63,7 +64,8 @@ export default (props) => {
size: 1000, size: 1000,
}, },
}, },
[] [],
false
); );
const onCredentialChange = (value) => { const onCredentialChange = (value) => {
@ -82,6 +84,12 @@ export default (props) => {
setIsManual(props.isManual); setIsManual(props.isManual);
}, [props.isManual]); }, [props.isManual]);
useEffect(() => {
if (hasAuthority('system.credential:all') || hasAuthority('system.credential:read')) {
run()
}
}, [])
if (!needAuth) { if (!needAuth) {
return null; return null;
} }

10
web/src/pages/System/Cluster/CredentialForm.jsx
View File

@ -4,6 +4,7 @@ import { formatMessage } from "umi/locale";
import useFetch from "@/lib/hooks/use_fetch"; import useFetch from "@/lib/hooks/use_fetch";
import { formatESSearchResult } from "@/lib/elasticsearch/util"; import { formatESSearchResult } from "@/lib/elasticsearch/util";
import { MANUAL_VALUE } from "./steps"; import { MANUAL_VALUE } from "./steps";
import { hasAuthority } from "@/utils/authority";
export default (props) => { export default (props) => {
const { const {
@ -27,7 +28,8 @@ export default (props) => {
size: 1000, size: 1000,
}, },
}, },
[] [],
false
); );
const onCredentialChange = (value) => { const onCredentialChange = (value) => {
@ -46,6 +48,12 @@ export default (props) => {
setIsManual(props.isManual); setIsManual(props.isManual);
}, [props.isManual]); }, [props.isManual]);
useEffect(() => {
if (hasAuthority('system.credential:all') || hasAuthority('system.credential:read')) {
run()
}
}, [])
if (!needAuth) { if (!needAuth) {
return null; return null;
} }

10
web/src/pages/System/Email/Components/CredentialForm.jsx
View File

@ -3,6 +3,7 @@ import { Button, Divider, Form, Input, Select } from "antd";
import { formatMessage } from "umi/locale"; import { formatMessage } from "umi/locale";
import useFetch from "@/lib/hooks/use_fetch"; import useFetch from "@/lib/hooks/use_fetch";
import { formatESSearchResult } from "@/lib/elasticsearch/util"; import { formatESSearchResult } from "@/lib/elasticsearch/util";
import { hasAuthority } from "@/utils/authority";
const MANUAL_VALUE = 'manual' const MANUAL_VALUE = 'manual'
@ -20,7 +21,8 @@ export default (props) => {
size: 1000, size: 1000,
}, },
}, },
[] [],
false
); );
const onCredentialChange = (value) => { const onCredentialChange = (value) => {
@ -39,6 +41,12 @@ export default (props) => {
setIsManual(initialValue.credential_id === MANUAL_VALUE) setIsManual(initialValue.credential_id === MANUAL_VALUE)
}, [initialValue.credential_id]) }, [initialValue.credential_id])
useEffect(() => {
if (hasAuthority('system.credential:all') || hasAuthority('system.credential:read')) {
run()
}
}, [])
return ( return (
<> <>
<Form.Item <Form.Item