fix: success message in creation cluster
This commit is contained in:
@@ -66,3 +66,5 @@ export const clusterSessionAtom = atom<{
|
|||||||
} | null>(null);
|
} | null>(null);
|
||||||
|
|
||||||
export const clusterDetailAtom = atom<ClusterListItem | null>(null);
|
export const clusterDetailAtom = atom<ClusterListItem | null>(null);
|
||||||
|
|
||||||
|
export const workerAddedCountAtom = atom(0);
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message';
|
import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Alert } from 'antd';
|
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { ProviderType, ProviderValueMap } from '../../config';
|
import { ProviderType, ProviderValueMap } from '../../config';
|
||||||
import { ClusterListItem } from '../../config/types';
|
import { ClusterListItem } from '../../config/types';
|
||||||
import { AddWorkerContext } from './add-worker-context';
|
import { AddWorkerContext } from './add-worker-context';
|
||||||
|
import AddedMessage from './added-message';
|
||||||
import CheckEnvironment from './check-environment';
|
import CheckEnvironment from './check-environment';
|
||||||
import { StepName, StepNamesMap } from './config';
|
import { StepName, StepNamesMap } from './config';
|
||||||
import DockerRunCommand from './docker-run-command';
|
import DockerRunCommand from './docker-run-command';
|
||||||
@@ -90,23 +90,6 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
|
|||||||
}
|
}
|
||||||
}, [actionSource, registrationInfo?.cluster_id]);
|
}, [actionSource, registrationInfo?.cluster_id]);
|
||||||
|
|
||||||
const renderMessage = (count: number) => {
|
|
||||||
if (count === 1) {
|
|
||||||
return intl.formatMessage(
|
|
||||||
{
|
|
||||||
id: 'clusters.addworker.message.success_single'
|
|
||||||
},
|
|
||||||
{ count: addedCount }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return intl.formatMessage(
|
|
||||||
{
|
|
||||||
id: 'clusters.addworker.message.success_multiple'
|
|
||||||
},
|
|
||||||
{ count: addedCount }
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const disabled = useMemo(() => {
|
const disabled = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
stepList.includes(StepNamesMap.SelectCluster) && !clusterList?.length
|
stepList.includes(StepNamesMap.SelectCluster) && !clusterList?.length
|
||||||
@@ -154,17 +137,8 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
|
|||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{addedCount > 0 && (
|
{actionSource === 'modal' && (
|
||||||
<Alert
|
<AddedMessage addedCount={addedCount}></AddedMessage>
|
||||||
style={{
|
|
||||||
textAlign: 'left',
|
|
||||||
borderColor: 'var(--ant-color-success)',
|
|
||||||
width: '100%'
|
|
||||||
}}
|
|
||||||
type="success"
|
|
||||||
title={renderMessage(addedCount)}
|
|
||||||
closable
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</Container>
|
</Container>
|
||||||
</AddWorkerContext.Provider>
|
</AddWorkerContext.Provider>
|
||||||
|
|||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import { useIntl } from '@umijs/max';
|
||||||
|
import { Alert } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const AddedMessage: React.FC<{ addedCount: number }> = ({ addedCount }) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const renderMessage = (count: number) => {
|
||||||
|
if (count === 1) {
|
||||||
|
return intl.formatMessage(
|
||||||
|
{
|
||||||
|
id: 'clusters.addworker.message.success_single'
|
||||||
|
},
|
||||||
|
{ count: addedCount }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return intl.formatMessage(
|
||||||
|
{
|
||||||
|
id: 'clusters.addworker.message.success_multiple'
|
||||||
|
},
|
||||||
|
{ count: addedCount }
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return addedCount > 0 ? (
|
||||||
|
<Alert
|
||||||
|
style={{
|
||||||
|
textAlign: 'left',
|
||||||
|
fontWeight: 400,
|
||||||
|
borderColor: 'var(--ant-color-success)',
|
||||||
|
width: '100%'
|
||||||
|
}}
|
||||||
|
type="success"
|
||||||
|
title={renderMessage(addedCount)}
|
||||||
|
closable
|
||||||
|
/>
|
||||||
|
) : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddedMessage;
|
||||||
@@ -1,14 +1,18 @@
|
|||||||
|
import { workerAddedCountAtom } from '@/atoms/clusters';
|
||||||
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
|
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Button } from 'antd';
|
import { Button } from 'antd';
|
||||||
|
import { useAtom } from 'jotai';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
import AddedMessage from './add-worker/added-message';
|
||||||
|
|
||||||
const Title = styled.span`
|
const Title = styled.span`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
gap: 16px;
|
||||||
padding-inline: 24px;
|
padding-inline: 24px;
|
||||||
.text {
|
.text {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@@ -33,11 +37,15 @@ const FooterButtons: React.FC<FooterButtonsProps> = (props) => {
|
|||||||
loading
|
loading
|
||||||
} = props;
|
} = props;
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
const [addedCount] = useAtom(workerAddedCountAtom);
|
||||||
const handleOnNext = () => {
|
const handleOnNext = () => {
|
||||||
onNext();
|
onNext();
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<Title style={{ padding: '16px 24px 24px' }}>
|
<Title style={{ padding: '16px 24px 24px' }}>
|
||||||
|
<div className="added-msge">
|
||||||
|
<AddedMessage addedCount={addedCount} />
|
||||||
|
</div>
|
||||||
<div className="flex-center gap-20">
|
<div className="flex-center gap-20">
|
||||||
{showButtons.previous && (
|
{showButtons.previous && (
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
|
import { workerAddedCountAtom } from '@/atoms/clusters';
|
||||||
import useSetChunkRequest from '@/hooks/use-chunk-request';
|
import useSetChunkRequest from '@/hooks/use-chunk-request';
|
||||||
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
|
import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
|
||||||
|
import { useAtom } from 'jotai';
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import qs from 'query-string';
|
import qs from 'query-string';
|
||||||
import { useEffect, useRef, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
@@ -11,11 +13,16 @@ export default function useAddWorkerMessage() {
|
|||||||
const [addedCount, setAddedCount] = useState(0);
|
const [addedCount, setAddedCount] = useState(0);
|
||||||
const timerRef = useRef<any>(null);
|
const timerRef = useRef<any>(null);
|
||||||
const triggerAtRef = useRef<number>(0);
|
const triggerAtRef = useRef<number>(0);
|
||||||
|
const [, setWorkerAddedCount] = useAtom(workerAddedCountAtom);
|
||||||
|
|
||||||
|
const updateAddedCount = (count: number) => {
|
||||||
|
setAddedCount(count);
|
||||||
|
setWorkerAddedCount(count);
|
||||||
|
};
|
||||||
const showAddWorkerMessage = () => {
|
const showAddWorkerMessage = () => {
|
||||||
if (newItemsRef.current.length > 0) {
|
if (newItemsRef.current.length > 0) {
|
||||||
const count = newItemsRef.current.length;
|
const count = newItemsRef.current.length;
|
||||||
setAddedCount(count);
|
updateAddedCount(count);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -39,7 +46,7 @@ export default function useAddWorkerMessage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const resetAddedCount = () => {
|
const resetAddedCount = () => {
|
||||||
setAddedCount(0);
|
updateAddedCount(0);
|
||||||
chunkRequestRef.current?.current?.cancel?.();
|
chunkRequestRef.current?.current?.cancel?.();
|
||||||
newItemsRef.current = [];
|
newItemsRef.current = [];
|
||||||
triggerAtRef.current = 0;
|
triggerAtRef.current = 0;
|
||||||
|
|||||||
@@ -108,7 +108,6 @@ const AccessForm: React.FC<ProviderFormProps> = forwardRef((props, ref) => {
|
|||||||
..._.omit(values, ['targets', 'fallback_target']),
|
..._.omit(values, ['targets', 'fallback_target']),
|
||||||
targets: targets
|
targets: targets
|
||||||
};
|
};
|
||||||
console.log('data=========', data);
|
|
||||||
onFinish(data);
|
onFinish(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -12,7 +12,8 @@ import useTargetSourceModels from '../hooks/use-target-source-models';
|
|||||||
const TargetsForm = forwardRef((props, ref) => {
|
const TargetsForm = forwardRef((props, ref) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const { getRuleMessage } = useAppUtils();
|
const { getRuleMessage } = useAppUtils();
|
||||||
const { sourceModels, loading, fetchSourceModels } = useTargetSourceModels();
|
const { sourceModels, fetchSourceModels } = useTargetSourceModels();
|
||||||
|
const [validTriggered, setValidTriggered] = useState<boolean>(false);
|
||||||
const form = Form.useFormInstance<FormData>();
|
const form = Form.useFormInstance<FormData>();
|
||||||
const targets = Form.useWatch('targets', form) || [];
|
const targets = Form.useWatch('targets', form) || [];
|
||||||
const [fallbackValues, setFallbackValues] = useState<{ value: any[] }>({
|
const [fallbackValues, setFallbackValues] = useState<{ value: any[] }>({
|
||||||
@@ -55,6 +56,7 @@ const TargetsForm = forwardRef((props, ref) => {
|
|||||||
weight: newDataList[index]?.weight || null,
|
weight: newDataList[index]?.weight || null,
|
||||||
value: value
|
value: value
|
||||||
};
|
};
|
||||||
|
form.validateFields(['targets']);
|
||||||
setDataList(newDataList);
|
setDataList(newDataList);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -120,6 +122,7 @@ const TargetsForm = forwardRef((props, ref) => {
|
|||||||
...newDataList[index],
|
...newDataList[index],
|
||||||
weight: value
|
weight: value
|
||||||
};
|
};
|
||||||
|
form.validateFields(['targets']);
|
||||||
setDataList(newDataList);
|
setDataList(newDataList);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -170,11 +173,13 @@ const TargetsForm = forwardRef((props, ref) => {
|
|||||||
<Form.Item
|
<Form.Item
|
||||||
name="targets"
|
name="targets"
|
||||||
data-field="targets"
|
data-field="targets"
|
||||||
|
trigger=""
|
||||||
rules={[
|
rules={[
|
||||||
{
|
{
|
||||||
validator(rule, value) {
|
validator(rule, value) {
|
||||||
if (value && value?.length > 0) {
|
if (value && value?.length > 0) {
|
||||||
if (_.some(value, (item: any) => !item.weight)) {
|
if (_.some(value, (item: any) => !item.weight)) {
|
||||||
|
setValidTriggered(true);
|
||||||
return Promise.reject(
|
return Promise.reject(
|
||||||
getRuleMessage('input', 'routes.form.target.weight')
|
getRuleMessage('input', 'routes.form.target.weight')
|
||||||
);
|
);
|
||||||
@@ -186,11 +191,13 @@ const TargetsForm = forwardRef((props, ref) => {
|
|||||||
(item: any) => !item.value || item.value.length === 0
|
(item: any) => !item.value || item.value.length === 0
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
|
setValidTriggered(true);
|
||||||
return Promise.reject(
|
return Promise.reject(
|
||||||
getRuleMessage('input', 'providers.form.target.placeholder')
|
getRuleMessage('input', 'providers.form.target.placeholder')
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
setValidTriggered(false);
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -214,7 +221,9 @@ const TargetsForm = forwardRef((props, ref) => {
|
|||||||
required
|
required
|
||||||
showSearch
|
showSearch
|
||||||
status={
|
status={
|
||||||
!item.value || item.value.length === 0 ? 'error' : 'success'
|
(!item.value || item.value.length === 0) && validTriggered
|
||||||
|
? 'error'
|
||||||
|
: 'success'
|
||||||
}
|
}
|
||||||
expandTrigger="hover"
|
expandTrigger="hover"
|
||||||
multiple={false}
|
multiple={false}
|
||||||
@@ -249,7 +258,9 @@ const TargetsForm = forwardRef((props, ref) => {
|
|||||||
style={{ flex: 100 }}
|
style={{ flex: 100 }}
|
||||||
min={0}
|
min={0}
|
||||||
step={1}
|
step={1}
|
||||||
status={item.weight === null ? 'error' : 'success'}
|
status={
|
||||||
|
item.weight === null && validTriggered ? 'error' : 'success'
|
||||||
|
}
|
||||||
value={item.weight}
|
value={item.weight}
|
||||||
onChange={(value) => handleOnWeightChange(value, index)}
|
onChange={(value) => handleOnWeightChange(value, index)}
|
||||||
placeholder={intl.formatMessage({
|
placeholder={intl.formatMessage({
|
||||||
|
|||||||
Reference in New Issue
Block a user