diff --git a/src/pages/cluster-management/cluster-create.tsx b/src/pages/cluster-management/cluster-create.tsx index 3bf43870..d6893f58 100644 --- a/src/pages/cluster-management/cluster-create.tsx +++ b/src/pages/cluster-management/cluster-create.tsx @@ -71,6 +71,7 @@ const ClusterCreate = () => { provider: ProviderValueMap.Docker } as ClusterFormData); const [formValues, setFormValues] = useState>({}); + const [submitLoading, setSubmitLoading] = useState(false); const formRefs: Record = { [moduleMap.BasicForm]: useRef(null), @@ -273,8 +274,10 @@ const ClusterCreate = () => { ...extraData, ...(typeof values === 'object' ? values : {}) }; + setSubmitLoading(true); const res = await createCluster({ data }); const info = await queryClusterToken({ id: res.id }); + setSubmitLoading(false); setRegistrationInfo({ ...info, cluster_id: res.id @@ -318,6 +321,7 @@ const ClusterCreate = () => { onNext={onNext} handleCancel={handleCancel} handleSubmit={handleSubmit} + loading={submitLoading} showButtons={showButtons} /> ]} diff --git a/src/pages/cluster-management/components/footer-buttons.tsx b/src/pages/cluster-management/components/footer-buttons.tsx index 39bb601b..e4fea8d7 100644 --- a/src/pages/cluster-management/components/footer-buttons.tsx +++ b/src/pages/cluster-management/components/footer-buttons.tsx @@ -20,10 +20,18 @@ interface FooterButtonsProps { handleCancel: () => void; handleSubmit: () => void; showButtons: Record; + loading?: boolean; } const FooterButtons: React.FC = (props) => { - const { onPrevious, onNext, handleCancel, handleSubmit, showButtons } = props; + const { + onPrevious, + onNext, + handleCancel, + handleSubmit, + showButtons, + loading + } = props; const intl = useIntl(); const handleOnNext = () => { onNext(); @@ -52,6 +60,7 @@ const FooterButtons: React.FC = (props) => { type="primary" onClick={handleSubmit} style={{ minWidth: 88 }} + loading={loading} > {intl.formatMessage({ id: 'common.button.save' })} diff --git a/src/pages/dashboard/components/over-view.tsx b/src/pages/dashboard/components/over-view.tsx index f0250ff5..3803f53b 100644 --- a/src/pages/dashboard/components/over-view.tsx +++ b/src/pages/dashboard/components/over-view.tsx @@ -1,5 +1,5 @@ import { useIntl } from '@umijs/max'; -import { Card, Col, Row, Space } from 'antd'; +import { Card, Col, Row } from 'antd'; import _ from 'lodash'; import React, { useContext } from 'react'; import { overviewConfigs } from '../config'; @@ -30,26 +30,6 @@ const Overview: React.FC = () => { const intl = useIntl(); const data = useContext(DashboardContext).resource_counts || {}; - const renderValue = ( - value: - | number - | { - healthy: number; - warning: number; - error: number; - } - ) => { - if (typeof value === 'number') { - return value; - } - return ( - - {value.healthy} - {value.warning} - {value.error} - - ); - }; return (
@@ -64,7 +44,7 @@ const Overview: React.FC = () => { > {renderCardItem({ label: intl.formatMessage({ id: config.label }), - value: renderValue(_.get(data, config.key, 0)), + value: _.get(data, config.key, 0), bgColor: config.backgroundColor })} diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 634dbf0e..62f640e1 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -1,5 +1,6 @@ import { useMemoizedFn } from 'ahooks'; import { Spin } from 'antd'; +import { omit } from 'lodash'; import { useEffect, useState } from 'react'; import PageBox from '../_components/page-box'; import { queryDashboardData } from './apis'; @@ -11,17 +12,26 @@ const Dashboard: React.FC = () => { const [data, setData] = useState({} as DashboardProps); const [loading, setLoading] = useState(false); - const fetchDashboardData = useMemoizedFn(async () => { - try { - setLoading(true); - const res = await queryDashboardData(); - setData(res); - } catch (error) { - setData({} as DashboardProps); - } finally { - setLoading(false); + const fetchDashboardData = useMemoizedFn( + async (params?: { cluster_id?: number }) => { + try { + setLoading(true); + const res = await queryDashboardData(params); + setData((prev) => { + return params?.cluster_id + ? { + ...omit(prev, ['system_load']), + system_load: res.system_load + } + : res; + }); + } catch (error) { + setData({} as DashboardProps); + } finally { + setLoading(false); + } } - }); + ); useEffect(() => { fetchDashboardData();