root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: success message in creation cluster

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