Skip to content

Commit 2d3cd3e

Browse files
mortada-codesmortada-codes
authored
Merge pull request #322 from kubeshop/mm/fix/errormodal
fix: error messages
2 parents 37ecbea + d652544 commit 2d3cd3e

File tree

16 files changed

+257
-160
lines changed

16 files changed

+257
-160
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import styled from 'styled-components';
66
import 'swagger-ui-react/swagger-ui.css';
77

88
import {NotificationBox} from '@components';
9+
import {ErrorAlertModal} from '@components/ErrorAlertModal';
910

1011
import Router from './routes';
1112

@@ -24,6 +25,7 @@ const App = () => {
2425
</Suspense>
2526
</AppContainer>
2627
<NotificationBox />
28+
<ErrorAlertModal />
2729
</>
2830
);
2931
};

‎src/components/AddEnvoyFleetModal/AddEnvoyFleetModal.tsx‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -30,36 +30,46 @@ const AddEnvoyFleetModal = () => {
3030
const {data: namespaces} = useGetNamespacesQuery();
3131
const {data: services} = useGetServicesQuery({});
3232

33-
const [createFleet, {isLoading: isLoadingNewFleet, isError, error, reset}] = useCreateFleetMutation();
33+
const [createFleet, {isLoading: isLoadingNewFleet, isError, reset}] = useCreateFleetMutation();
3434

3535
const onBackHandler = () => {
3636
dispatch(closeEnvoyFleetModalModal());
3737
};
3838

3939
const onSubmitHandler = async () => {
40-
await form.validateFields();
41-
const {fleetInfo, portsInfo} = await form.getFieldsValue(true);
42-
form.submit();
43-
const portsList = portsInfo.ports.map((p: any) => ({
44-
port: Number(p.port),
45-
name: 'fleet',
46-
targetPort: 'http',
47-
}));
48-
49-
await createFleet({serviceItem: {...fleetInfo, ports: portsList, status: 'available'}}).unwrap();
50-
dispatch(closeEnvoyFleetModalModal());
51-
dispatch(
52-
setAlert({
53-
title: 'The Envoy fleet deployed successfully',
54-
description: `${fleetInfo.name} was deployed successfully in ${fleetInfo.namespace} namespace`,
55-
type: AlertEnum.Success,
56-
})
57-
);
40+
try {
41+
await form.validateFields();
42+
const {fleetInfo, portsInfo} = await form.getFieldsValue(true);
43+
form.submit();
44+
const portsList = portsInfo.ports.map((p: any) => ({
45+
port: Number(p.port),
46+
name: 'fleet',
47+
targetPort: 'http',
48+
}));
49+
50+
await createFleet({serviceItem: {...fleetInfo, ports: portsList, status: 'available'}}).unwrap();
51+
dispatch(closeEnvoyFleetModalModal());
52+
dispatch(
53+
setAlert({
54+
title: 'The Envoy fleet deployed successfully',
55+
description: `${fleetInfo.name} was deployed successfully in ${fleetInfo.namespace} namespace`,
56+
type: AlertEnum.Success,
57+
})
58+
);
59+
} catch (e: any) {
60+
dispatch(
61+
setAlert({
62+
title: 'Unable to create deployment',
63+
description: e?.message,
64+
type: AlertEnum.Error,
65+
})
66+
);
67+
}
5868
};
5969

6070
return (
6171
<S.Modal
62-
visible
72+
open
6373
title={<Typography.Title level={3}>Add a deployment fleet</Typography.Title>}
6474
width="600px"
6575
onCancel={onBackHandler}
@@ -75,8 +85,6 @@ const AddEnvoyFleetModal = () => {
7585
</>
7686
}
7787
>
78-
{isError && <S.Alert description={error?.message} message="Error" showIcon type="error" />}
79-
8088
<Form
8189
preserve
8290
layout="vertical"

‎src/components/AddServerModal/AddServerModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const AddServerModal: React.FC<IProps> = props => {
5656
destroyOnClose
5757
centered
5858
title="Add new server"
59-
visible={showModal}
59+
open={showModal}
6060
onCancel={onCancelHandler}
6161
onOk={onOkHandler}
6262
>

‎src/components/AddStaticRouteModal/AddStaticRouteModal.tsx‎

Lines changed: 56 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -26,59 +26,69 @@ const AddStaticRouteModal = () => {
2626
const navigate = useNavigate();
2727
const dispatch = useDispatch();
2828
const [form] = Form.useForm();
29-
const [createStaticRoute, {error, isError, reset}] = useCreateStaticRouteMutation();
29+
const [createStaticRoute, {isError, reset}] = useCreateStaticRouteMutation();
3030
const [currentStep, setCurrentStep] = useState(0);
3131
const step = currentStep === 0 ? 'routeInfo' : currentStep === 1 ? 'pathInfo' : 'targetInfo';
3232

3333
const okText = currentStep === 0 ? 'Add path' : currentStep === 1 ? 'Add target' : 'Create static route';
3434

3535
const onSubmitHandler = async () => {
36-
await form.validateFields();
37-
if (step !== 'targetInfo') {
38-
setCurrentStep(currentStep + 1);
39-
return;
40-
}
41-
const {name, namespace, deployment, path, methods, upstream, redirect} = await form.getFieldsValue(true);
42-
43-
const newStaticRouteDefinition: StaticRoute = {
44-
apiVersion: 'gateway.kusk.io/v1alpha1',
45-
kind: 'StaticRoute',
46-
metadata: {
47-
name,
48-
},
49-
spec: {
50-
fleet: {
51-
name: deployment.split(',')[1],
52-
namespace: deployment.split(',')[0],
36+
try {
37+
await form.validateFields();
38+
if (step !== 'targetInfo') {
39+
setCurrentStep(currentStep + 1);
40+
return;
41+
}
42+
const {name, namespace, deployment, path, methods, upstream, redirect} = await form.getFieldsValue(true);
43+
44+
const newStaticRouteDefinition: StaticRoute = {
45+
apiVersion: 'gateway.kusk.io/v1alpha1',
46+
kind: 'StaticRoute',
47+
metadata: {
48+
name,
5349
},
54-
hosts: [],
55-
paths: {
56-
[path]: methods.reduce((acc: any, item: any) => {
57-
acc[item] = redirect ? {redirect} : {route: {upstream}};
58-
return acc;
59-
}, {}),
50+
spec: {
51+
fleet: {
52+
name: deployment.split(',')[1],
53+
namespace: deployment.split(',')[0],
54+
},
55+
hosts: [],
56+
paths: {
57+
[path]: methods.reduce((acc: any, item: any) => {
58+
acc[item] = redirect ? {redirect} : {route: {upstream}};
59+
return acc;
60+
}, {}),
61+
},
6062
},
61-
},
62-
};
63-
64-
const result = await createStaticRoute({
65-
body: {
66-
name,
67-
namespace,
68-
envoyFleetNamespace: deployment.split(',')[0],
69-
envoyFleetName: deployment.split(',')[1],
70-
openapi: YAML.stringify(newStaticRouteDefinition),
71-
},
72-
}).unwrap();
73-
dispatch(
74-
setAlert({
75-
title: 'Static route deployed successfully',
76-
description: `${name} was deployed successfully in ${namespace} namespace`,
77-
type: AlertEnum.Success,
78-
})
79-
);
80-
dispatch(closeStaticRouteModal());
81-
navigate(`${AppRoutes.STATIC_ROUTE}/${result.namespace}/${result.name}`);
63+
};
64+
65+
const result = await createStaticRoute({
66+
body: {
67+
name,
68+
namespace,
69+
envoyFleetNamespace: deployment.split(',')[0],
70+
envoyFleetName: deployment.split(',')[1],
71+
openapi: YAML.stringify(newStaticRouteDefinition),
72+
},
73+
}).unwrap();
74+
dispatch(
75+
setAlert({
76+
title: 'Static route deployed successfully',
77+
description: `${name} was deployed successfully in ${namespace} namespace`,
78+
type: AlertEnum.Success,
79+
})
80+
);
81+
dispatch(closeStaticRouteModal());
82+
navigate(`${AppRoutes.STATIC_ROUTE}/${result.namespace}/${result.name}`);
83+
} catch (e: any) {
84+
dispatch(
85+
setAlert({
86+
title: 'Unable to deploy Static Route',
87+
description: e?.message,
88+
type: AlertEnum.Error,
89+
})
90+
);
91+
}
8292
};
8393

8494
const onBackHandler = () => {
@@ -92,14 +102,13 @@ const AddStaticRouteModal = () => {
92102

93103
return (
94104
<S.Modal
95-
visible
105+
open
96106
title="Create static route"
97107
width="824px"
98108
onCancel={onBackHandler}
99109
okText={okText}
100110
onOk={onSubmitHandler}
101111
>
102-
{isError && <S.Alert description={error?.message} message="Error" showIcon type="error" closable />}
103112
<S.Container>
104113
<S.StepsContainer>
105114
<Steps direction="vertical" current={currentStep}>

‎src/components/ApiDetails/ApiSettings/Settings/AddTargetModal/AddTargetModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const AddTargetModal = ({closeModal}: IProps) => {
3535

3636
return (
3737
<S.Modal
38-
visible
38+
open
3939
width="648px"
4040
title="Add a target"
4141
onCancel={closeModal}

‎src/components/ApiDetails/ApiSettings/Settings/General.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ const GeneralSettings = () => {
4343
type: AlertEnum.Success,
4444
})
4545
);
46-
} catch (e) {
46+
} catch (e: any) {
4747
dispatch(
4848
setAlert({
49-
title: 'Deleting API was failed',
50-
description: `Something went wrong!`,
49+
title: 'Unable to delete API',
50+
description: e?.message,
5151
type: AlertEnum.Error,
5252
})
5353
);

‎src/components/ApiPublishModal/ApiCreatorModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const ApiCreatorModal = () => {
3232
};
3333

3434
return (
35-
<Modal visible width="608px" footer={null} title="Create an API" onCancel={onBackHandler}>
35+
<Modal open width="608px" footer={null} title="Create an API" onCancel={onBackHandler}>
3636
<S.Heading type="secondary">Select how you’d like to create your API</S.Heading>
3737
<S.Grid>
3838
<S.Card hoverable cover={<img src={ApiTemplate} />} onClick={onTemplateClickHandler}>

‎src/components/ApiPublishModal/CanvasApiModal.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const CanvasApiModal = () => {
3434
const openapiField = Form.useWatch('openapi', form);
3535
const {data: apis} = useGetApisQuery({});
3636
const {data: namespaces} = useGetNamespacesQuery();
37-
const [deployAPI, {isError, error}] = useDeployApiMutation();
37+
const [deployAPI] = useDeployApiMutation();
3838

3939
useEffect(() => {
4040
if (apiCanvasType === 'template') {
@@ -95,12 +95,20 @@ const CanvasApiModal = () => {
9595
dispatch(selectApi(apiData));
9696
navigate(`${AppRoutes.API}/${apiData.namespace}/${apiData.name}`);
9797
})
98-
.catch(() => {});
98+
.catch(error => {
99+
dispatch(
100+
setAlert({
101+
title: 'Unable to deploy API',
102+
description: error?.message,
103+
type: AlertEnum.Error,
104+
})
105+
);
106+
});
99107
};
100108

101109
return (
102110
<S.Modal
103-
visible
111+
open
104112
closable
105113
title={`Create an API from ${apiCanvasType === 'template' ? 'template' : 'scratch'}`}
106114
footer={
@@ -114,8 +122,6 @@ const CanvasApiModal = () => {
114122
}
115123
onCancel={onBackHandler}
116124
>
117-
{isError && <S.Alert description={error?.message} message="Error" showIcon type="error" closable />}
118-
119125
<Form layout="vertical" form={form}>
120126
<Form.Item
121127
hasFeedback

‎src/components/ApiPublishModal/FileApiModal.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,14 @@ import {FilePicker, FleetDropdown} from '@components/FormComponents';
2222

2323
import {checkDuplicateAPI, formatApiName} from '@utils/api';
2424

25-
import * as S from './styled';
26-
2725
const FileApiModal = () => {
2826
const dispatch = useDispatch();
2927
const navigate = useNavigate();
3028
const [form] = Form.useForm();
3129
const type = Form.useWatch('type', form);
3230
const {data: apis} = useGetApisQuery({});
3331
const {data: namespaces} = useGetNamespacesQuery();
34-
const [deployAPI, {isError, error}] = useDeployApiMutation();
32+
const [deployAPI] = useDeployApiMutation();
3533

3634
const onBackHandler = () => {
3735
dispatch(closeFileApiModal());
@@ -77,13 +75,20 @@ const FileApiModal = () => {
7775
);
7876
dispatch(selectApi(apiData));
7977
navigate(`${AppRoutes.API}/${apiData.namespace}/${apiData.name}`);
78+
})
79+
.catch((error: any) => {
80+
dispatch(
81+
setAlert({
82+
title: 'Unable to deploy API',
83+
description: error?.message,
84+
type: AlertEnum.Error,
85+
})
86+
);
8087
});
8188
};
8289

8390
return (
84-
<Modal visible title="Create an API from file" onCancel={onBackHandler} onOk={onSubmitHandler} okText="Create API">
85-
{isError && <S.Alert description={error?.message} message="Error" showIcon type="error" closable />}
86-
91+
<Modal open title="Create an API from file" onCancel={onBackHandler} onOk={onSubmitHandler} okText="Create API">
8792
<Form form={form} layout="vertical">
8893
<Form.Item required name="type" label="Import API via" initialValue="file">
8994
<Radio.Group>

‎src/components/Apis/ApisList/ApisListTable.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@ const ApisListTable: React.FC<IProps> = props => {
5555
type: AlertEnum.Success,
5656
})
5757
);
58-
} catch (e) {
58+
} catch (e: any) {
5959
dispatch(
6060
setAlert({
61-
title: 'Deleting API was failed',
62-
description: `Something went wrong!`,
61+
title: 'Unable to delete API',
62+
description: e?.message,
6363
type: AlertEnum.Error,
6464
})
6565
);

0 commit comments

Comments
 (0)