From b4a9a5565299f7a344b49105ab5ad90ff8f53dab Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Tue, 27 Sep 2022 23:06:18 +0800 Subject: [PATCH 01/32] feat: add useThrottle --- web/src/hooks/useLatest.ts | 25 ++++++++++++++++ web/src/hooks/useThrottle.ts | 58 ++++++++++++++++++++++++++++++++++++ web/src/hooks/useUnmount.ts | 31 +++++++++++++++++++ 3 files changed, 114 insertions(+) create mode 100644 web/src/hooks/useLatest.ts create mode 100644 web/src/hooks/useThrottle.ts create mode 100644 web/src/hooks/useUnmount.ts diff --git a/web/src/hooks/useLatest.ts b/web/src/hooks/useLatest.ts new file mode 100644 index 0000000000..d0d7c71147 --- /dev/null +++ b/web/src/hooks/useLatest.ts @@ -0,0 +1,25 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { useRef } from 'react'; + +function useLatest(value: T) { + const ref = useRef(value); + ref.current = value; + + return ref; +} +export default useLatest; diff --git a/web/src/hooks/useThrottle.ts b/web/src/hooks/useThrottle.ts new file mode 100644 index 0000000000..c2b26f85e4 --- /dev/null +++ b/web/src/hooks/useThrottle.ts @@ -0,0 +1,58 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import useLatest from '@/hooks/useLatest'; +import { useMemo } from 'react'; +import { throttle } from 'lodash'; +import useUnmount from '@/hooks/useUnmount'; + +type useThrottleReturn = (...args: any) => any; + +interface ThrottleOptions { + wait?: number; + leading?: boolean; + trailing?: boolean; +} + +function useThrottle(fn: T, options: ThrottleOptions) { + const fnRef = useLatest(fn); + + const wait = options?.wait ?? 1000; + + const throttled = useMemo( + () => + throttle( + (...args: any[]): ReturnType => { + return fnRef.current(...args); + }, + wait, + options, + ), + [], + ); + + useUnmount(() => { + throttled.cancel(); + }); + + return { + fn: throttled, + cancel: throttled.cancel, + flush: throttled.flush, + }; +} + +export default useThrottle; diff --git a/web/src/hooks/useUnmount.ts b/web/src/hooks/useUnmount.ts new file mode 100644 index 0000000000..a79ee41c0c --- /dev/null +++ b/web/src/hooks/useUnmount.ts @@ -0,0 +1,31 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import useLatest from '@/hooks/useLatest'; +import { useEffect } from 'react'; + +const useUnmount = (fn: () => void) => { + const fnRef = useLatest(fn); + + useEffect( + () => () => { + fnRef.current(); + }, + [], + ); +}; + +export default useUnmount; From 2d69cdb653f2444174ce3f279a4060699a6e593a Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Wed, 28 Sep 2022 15:40:27 +0800 Subject: [PATCH 02/32] feat: submit button adds the throttling --- web/src/components/ActionBar/ActionBar.tsx | 12 ++++++-- web/src/hooks/useThrottle.ts | 2 +- web/src/pages/Consumer/Create.tsx | 7 ++++- .../Proto/components/ProtoDrawer/index.tsx | 29 ++++++++++++------- web/src/pages/Route/Create.tsx | 27 ++++++++++++----- web/src/pages/SSL/Create.tsx | 16 +++++++--- web/src/pages/Service/Create.tsx | 13 +++++++-- web/src/pages/Upstream/Create.tsx | 27 ++++++++++------- 8 files changed, 95 insertions(+), 38 deletions(-) diff --git a/web/src/components/ActionBar/ActionBar.tsx b/web/src/components/ActionBar/ActionBar.tsx index 50be51f469..e56c788581 100644 --- a/web/src/components/ActionBar/ActionBar.tsx +++ b/web/src/components/ActionBar/ActionBar.tsx @@ -18,12 +18,14 @@ import React from 'react'; import type { CSSProperties } from 'react'; import { Row, Col, Button } from 'antd'; import { useIntl } from 'umi'; +import useThrottle from '@/hooks/useThrottle'; type Props = { step: number; lastStep: number; onChange: (nextStep: number) => void; withResultView?: boolean; + loading?: boolean; }; const style: CSSProperties = { @@ -37,9 +39,13 @@ const style: CSSProperties = { width: '100%', }; -const ActionBar: React.FC = ({ step, lastStep, onChange, withResultView }) => { +const ActionBar: React.FC = ({ step, lastStep, onChange, withResultView, loading }) => { const { formatMessage } = useIntl(); + const { fn: onChangeStep } = useThrottle((n: number) => { + onChange(step + n); + }); + if (step > lastStep && !withResultView) { onChange(lastStep); return null; @@ -54,12 +60,12 @@ const ActionBar: React.FC = ({ step, lastStep, onChange, withResultView }
- - - diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx index 77c74a1f34..2e5f012fbf 100644 --- a/web/src/pages/Route/Create.tsx +++ b/web/src/pages/Route/Create.tsx @@ -226,6 +226,8 @@ const Page: React.FC = (props) => { return true; }; + const [submitLoading, setSubmitLoading] = useState(false); + const onStepChange = (nextStep: number) => { const onUpdateOrCreate = () => { const routeData = { @@ -234,8 +236,8 @@ const Page: React.FC = (props) => { step3Data, advancedMatchingRules, } as RouteModule.RequestData; - - const { path } = props.route + setSubmitLoading(true); + const { path } = props.route; if (path.indexOf('edit') !== -1) { update((props as any).match.params.rid, routeData).then(() => { @@ -243,11 +245,16 @@ const Page: React.FC = (props) => { }); } else { if (path.indexOf('duplicate') !== -1) { - delete routeData.form1Data.id + delete routeData.form1Data.id; } - create(routeData).then(() => { - setStep(5); - }); + create(routeData) + .then(() => { + setStep(5); + setSubmitLoading(false); + }) + .catch(() => { + setSubmitLoading(false); + }); } }; @@ -318,7 +325,13 @@ const Page: React.FC = (props) => { {renderStepList()} - + ); }; diff --git a/web/src/pages/SSL/Create.tsx b/web/src/pages/SSL/Create.tsx index 395bff14a4..8da2b1b0cb 100644 --- a/web/src/pages/SSL/Create.tsx +++ b/web/src/pages/SSL/Create.tsx @@ -51,6 +51,8 @@ const Page: React.FC = (props) => { }); }; + const [submitLoading, setSubmitLoading] = useState(false); + const submit = () => { const data = form.getFieldsValue(); const sslData = { @@ -58,9 +60,14 @@ const Page: React.FC = (props) => { cert: data.cert!, key: data.key!, }; - (id ? update(id, sslData) : create(sslData)).then(() => { - history.replace('/ssl/list'); - }); + (id ? update(id, sslData) : create(sslData)) + .then(() => { + history.replace('/ssl/list'); + setSubmitLoading(false); + }) + .catch(() => { + setSubmitLoading(false); + }); }; const handleStepChange = (nextStep: number) => { @@ -72,6 +79,7 @@ const Page: React.FC = (props) => { onValidateForm(); break; case 3: + setSubmitLoading(true); submit(); break; default: @@ -101,7 +109,7 @@ const Page: React.FC = (props) => { {Boolean(step === 2) && } - + ); }; diff --git a/web/src/pages/Service/Create.tsx b/web/src/pages/Service/Create.tsx index 4397b4eb3d..52916ee83b 100644 --- a/web/src/pages/Service/Create.tsx +++ b/web/src/pages/Service/Create.tsx @@ -62,7 +62,7 @@ const Page: React.FC = (props) => { }); } }, []); - + const [submitLoading, setSubmitLoading] = useState(false); const onSubmit = () => { const data = { ...form.getFieldsValue(), @@ -89,9 +89,11 @@ const Page: React.FC = (props) => { })}`, }); history.push('/service/list'); + setSubmitLoading(false); }) .catch(() => { setStep(3); + setSubmitLoading(false); }); }; @@ -105,6 +107,7 @@ const Page: React.FC = (props) => { return; } if (nextStep === 4) { + setSubmitLoading(true); onSubmit(); return; } @@ -142,7 +145,13 @@ const Page: React.FC = (props) => { )} - + ); }; diff --git a/web/src/pages/Upstream/Create.tsx b/web/src/pages/Upstream/Create.tsx index f9d98a4e8b..ac9949e5e0 100644 --- a/web/src/pages/Upstream/Create.tsx +++ b/web/src/pages/Upstream/Create.tsx @@ -48,6 +48,7 @@ const Page: React.FC = (props) => { }); } }, []); + const [submitLoading, setSubmitLoading] = useState(false); const onSubmit = () => { form1.validateFields().then(() => { @@ -60,16 +61,21 @@ const Page: React.FC = (props) => { } const { id } = (props as any).match.params; - (id ? update(id, data) : create(data)).then(() => { - notification.success({ - message: `${ - id - ? formatMessage({ id: 'page.upstream.edit.upstream.successfully' }) - : formatMessage({ id: 'page.upstream.create.upstream.successfully' }) - }`, + (id ? update(id, data) : create(data)) + .then(() => { + notification.success({ + message: `${ + id + ? formatMessage({ id: 'page.upstream.edit.upstream.successfully' }) + : formatMessage({ id: 'page.upstream.create.upstream.successfully' }) + }`, + }); + history.replace('/upstream/list'); + setSubmitLoading(false); + }) + .catch(() => { + setSubmitLoading(false); }); - history.replace('/upstream/list'); - }); }); }; @@ -79,6 +85,7 @@ const Page: React.FC = (props) => { setStep(nextStep); }); } else if (nextStep === 3) { + setSubmitLoading(true); onSubmit(); } else { setStep(nextStep); @@ -104,7 +111,7 @@ const Page: React.FC = (props) => { {step === 2 && } - + ); }; From 420861e1fdd50ac7ae56bf711dbd9719e6abee41 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Wed, 28 Sep 2022 22:27:43 +0800 Subject: [PATCH 03/32] feat(route): add publish and offline button loading --- web/src/pages/Route/List.tsx | 43 +++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index 67ea058457..e125cfc50a 100755 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -59,6 +59,7 @@ import { DebugDrawView } from './components/DebugViews'; import { RawDataEditor } from '@/components/RawDataEditor'; import { EXPORT_FILE_MIME_TYPE_SUPPORTED } from './constants'; import DataLoaderImport from '@/pages/Route/components/DataLoader/Import'; +import useThrottle from '@/hooks/useThrottle'; const { OptGroup, Option } = Select; @@ -108,18 +109,28 @@ const Page: React.FC = () => { checkPageList(ref); }; - const handlePublishOffline = (rid: string, status: RouteModule.RouteStatus) => { - updateRouteStatus(rid, status).then(() => { - const actionName = status - ? formatMessage({ id: 'page.route.publish' }) - : formatMessage({ id: 'page.route.offline' }); - handleTableActionSuccessResponse( - `${actionName} ${formatMessage({ - id: 'menu.routes', - })} ${formatMessage({ id: 'component.status.success' })}`, - ); - }); - }; + const [publishOfflineLoading, setPublishOfflineLoading] = useState(''); + + const { fn: handlePublishOffline } = useThrottle( + (rid: string, status: RouteModule.RouteStatus) => { + setPublishOfflineLoading(rid); + updateRouteStatus(rid, status) + .then(() => { + const actionName = status + ? formatMessage({ id: 'page.route.publish' }) + : formatMessage({ id: 'page.route.offline' }); + handleTableActionSuccessResponse( + `${actionName} ${formatMessage({ + id: 'menu.routes', + })} ${formatMessage({ id: 'component.status.success' })}`, + ); + setPublishOfflineLoading(''); + }) + .catch(() => { + setPublishOfflineLoading(''); + }); + }, + ); const handleExport = (exportFileType: ExportFileType) => { exportRoutes(selectedRowKeys.join(',')).then((resp) => { @@ -503,6 +514,7 @@ const Page: React.FC = () => { onClick={() => { handlePublishOffline(record.id, RouteStatus.Publish); }} + loading={record.id === publishOfflineLoading} > {formatMessage({ id: 'page.route.publish' })} @@ -519,7 +531,12 @@ const Page: React.FC = () => { okText={formatMessage({ id: 'component.global.confirm' })} cancelText={formatMessage({ id: 'component.global.cancel' })} > - From 59ebb8edc44e78e05f14164d6aca1460ee8c9228 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Thu, 29 Sep 2022 14:51:11 +0800 Subject: [PATCH 04/32] feat: hook submit loading --- web/src/hooks/useRequest.ts | 30 +++++++++++++++++++ web/src/pages/Consumer/Create.tsx | 8 ++--- .../Proto/components/ProtoDrawer/index.tsx | 23 ++++++-------- web/src/pages/Route/Create.tsx | 11 +++---- web/src/pages/SSL/Create.tsx | 2 +- web/src/pages/Service/Create.tsx | 2 +- web/src/pages/Upstream/Create.tsx | 2 +- 7 files changed, 49 insertions(+), 29 deletions(-) create mode 100644 web/src/hooks/useRequest.ts diff --git a/web/src/hooks/useRequest.ts b/web/src/hooks/useRequest.ts new file mode 100644 index 0000000000..2ae5e532d2 --- /dev/null +++ b/web/src/hooks/useRequest.ts @@ -0,0 +1,30 @@ +import { useCallback, useState } from 'react'; + +export default function useRequest(requestFn: any) { + const [loading, setLoading] = useState(false); + + const [data, setData] = useState(); + + const [err, setErr] = useState(); + + const fn = useCallback(async (...params: Y) => { + setLoading(true); + let res; + try { + res = await requestFn(...params); + setData(res); + } catch (error) { + // @ts-ignore + setErr(error); + } + setLoading(false); + return res; + }, []); + + return { + fn, + data, + err, + loading, + }; +} diff --git a/web/src/pages/Consumer/Create.tsx b/web/src/pages/Consumer/Create.tsx index 56c7b49a91..a84e357d09 100644 --- a/web/src/pages/Consumer/Create.tsx +++ b/web/src/pages/Consumer/Create.tsx @@ -25,6 +25,7 @@ import PluginPage from '@/components/Plugin'; import Step1 from './components/Step1'; import Preview from './components/Preview'; import { fetchItem, create, update } from './service'; +import useRequest from '@/hooks/useRequest'; const Page: React.FC = (props) => { const [step, setStep] = useState(1); @@ -43,12 +44,12 @@ const Page: React.FC = (props) => { } }, []); - const [submitLoading, setSubmitLoading] = useState(false); + const { fn: createConsumers, loading: submitLoading } = useRequest(create); const onSubmit = () => { const data = { ...form1.getFieldsValue(), plugins } as ConsumerModule.Entity; const { username } = (props as any).match.params; - (username ? update(username, data) : create(data)) + (username ? update(username, data) : createConsumers(data)) .then(() => { notification.success({ message: `${ @@ -58,11 +59,9 @@ const Page: React.FC = (props) => { }`, }); history.push('/consumer/list'); - setSubmitLoading(false); }) .catch(() => { setStep(3); - setSubmitLoading(false); }); }; @@ -74,7 +73,6 @@ const Page: React.FC = (props) => { } else if (nextStep === 3) { setStep(3); } else if (nextStep === 4) { - setSubmitLoading(true); onSubmit(); } else { setStep(nextStep); diff --git a/web/src/pages/Proto/components/ProtoDrawer/index.tsx b/web/src/pages/Proto/components/ProtoDrawer/index.tsx index 3c767ee8e7..8528cda373 100644 --- a/web/src/pages/Proto/components/ProtoDrawer/index.tsx +++ b/web/src/pages/Proto/components/ProtoDrawer/index.tsx @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { Button, Drawer, Form, notification, Space } from 'antd'; import { useIntl } from 'umi'; import Editor from '@monaco-editor/react'; @@ -23,6 +23,7 @@ import { Input } from 'antd'; import { create, update } from '../../service'; import styles from './index.less'; import useThrottle from '@/hooks/useThrottle'; +import useRequest from '@/hooks/useRequest'; const ProtoDrawer: React.FC = ({ protoData, @@ -39,25 +40,19 @@ const ProtoDrawer: React.FC = ({ form.setFieldsValue(protoData); }, [visible]); - const [submitLoading, setSubmitLoading] = useState(false); + const { fn: createProto, loading: submitLoading } = useRequest(create); const { fn: submit } = useThrottle(async () => { - setSubmitLoading(true); await form.validateFields(); const formData: ProtoModule.ProtoData = form.getFieldsValue(true); if (editMode === 'create') { - create(formData) - .then(() => { - notification.success({ - message: formatMessage({ id: 'page.proto.drawer.create.successfully' }), - }); - setVisible(false); - refreshTable(); - setSubmitLoading(false); - }) - .catch(() => { - setSubmitLoading(false); + createProto(formData).then(() => { + notification.success({ + message: formatMessage({ id: 'page.proto.drawer.create.successfully' }), }); + setVisible(false); + refreshTable(); + }); } else { update(formData); notification.success({ diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx index 2e5f012fbf..d3793d7c54 100644 --- a/web/src/pages/Route/Create.tsx +++ b/web/src/pages/Route/Create.tsx @@ -32,6 +32,7 @@ import CreateStep4 from './components/CreateStep4'; import { DEFAULT_STEP_1_DATA, DEFAULT_STEP_3_DATA } from './constants'; import ResultView from './components/ResultView'; import styles from './Create.less'; +import useRequest from '@/hooks/useRequest'; const { Step } = Steps; @@ -226,7 +227,7 @@ const Page: React.FC = (props) => { return true; }; - const [submitLoading, setSubmitLoading] = useState(false); + const { fn: createRoutes, loading: submitLoading } = useRequest(create); const onStepChange = (nextStep: number) => { const onUpdateOrCreate = () => { @@ -236,7 +237,6 @@ const Page: React.FC = (props) => { step3Data, advancedMatchingRules, } as RouteModule.RequestData; - setSubmitLoading(true); const { path } = props.route; if (path.indexOf('edit') !== -1) { @@ -247,14 +247,11 @@ const Page: React.FC = (props) => { if (path.indexOf('duplicate') !== -1) { delete routeData.form1Data.id; } - create(routeData) + createRoutes(routeData) .then(() => { setStep(5); - setSubmitLoading(false); }) - .catch(() => { - setSubmitLoading(false); - }); + .catch(() => {}); } }; diff --git a/web/src/pages/SSL/Create.tsx b/web/src/pages/SSL/Create.tsx index 8da2b1b0cb..54e6e7081b 100644 --- a/web/src/pages/SSL/Create.tsx +++ b/web/src/pages/SSL/Create.tsx @@ -54,6 +54,7 @@ const Page: React.FC = (props) => { const [submitLoading, setSubmitLoading] = useState(false); const submit = () => { + setSubmitLoading(true); const data = form.getFieldsValue(); const sslData = { sni: data.snis, @@ -79,7 +80,6 @@ const Page: React.FC = (props) => { onValidateForm(); break; case 3: - setSubmitLoading(true); submit(); break; default: diff --git a/web/src/pages/Service/Create.tsx b/web/src/pages/Service/Create.tsx index 52916ee83b..d4a9517218 100644 --- a/web/src/pages/Service/Create.tsx +++ b/web/src/pages/Service/Create.tsx @@ -64,6 +64,7 @@ const Page: React.FC = (props) => { }, []); const [submitLoading, setSubmitLoading] = useState(false); const onSubmit = () => { + setSubmitLoading(true); const data = { ...form.getFieldsValue(), plugins, @@ -107,7 +108,6 @@ const Page: React.FC = (props) => { return; } if (nextStep === 4) { - setSubmitLoading(true); onSubmit(); return; } diff --git a/web/src/pages/Upstream/Create.tsx b/web/src/pages/Upstream/Create.tsx index ac9949e5e0..ffd5ed23c0 100644 --- a/web/src/pages/Upstream/Create.tsx +++ b/web/src/pages/Upstream/Create.tsx @@ -51,6 +51,7 @@ const Page: React.FC = (props) => { const [submitLoading, setSubmitLoading] = useState(false); const onSubmit = () => { + setSubmitLoading(true); form1.validateFields().then(() => { const data = upstreamRef.current?.getData(); if (!data) { @@ -85,7 +86,6 @@ const Page: React.FC = (props) => { setStep(nextStep); }); } else if (nextStep === 3) { - setSubmitLoading(true); onSubmit(); } else { setStep(nextStep); From 73233ed8da189c5fb9e36f0f90766c145cba329d Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Thu, 29 Sep 2022 15:47:29 +0800 Subject: [PATCH 05/32] feat: add delete button loading --- web/src/pages/Consumer/List.tsx | 19 ++++++++++++------- web/src/pages/Plugin/List.tsx | 22 ++++++++++++++-------- web/src/pages/Proto/List.tsx | 18 ++++++++++++------ web/src/pages/SSL/List.tsx | 24 +++++++++++++++--------- web/src/pages/Service/List.tsx | 25 +++++++++++++++++-------- web/src/pages/Upstream/List.tsx | 19 +++++++++++++------ 6 files changed, 83 insertions(+), 44 deletions(-) diff --git a/web/src/pages/Consumer/List.tsx b/web/src/pages/Consumer/List.tsx index 86910efe9a..df4d84ba56 100644 --- a/web/src/pages/Consumer/List.tsx +++ b/web/src/pages/Consumer/List.tsx @@ -38,7 +38,7 @@ const Page: React.FC = () => { const [id, setId] = useState(''); const [editorMode, setEditorMode] = useState<'create' | 'update'>('create'); const { paginationConfig, savePageList, checkPageList } = usePagination(); - + const [deleteLoading, setDeleteLoading] = useState(''); const columns: ProColumns[] = [ { title: formatMessage({ id: 'page.consumer.username' }), @@ -92,15 +92,20 @@ const Page: React.FC = () => { okText={formatMessage({ id: 'component.global.confirm' })} cancelText={formatMessage({ id: 'component.global.cancel' })} onConfirm={() => { - remove(record.username).then(() => { - notification.success({ - message: `${formatMessage({ id: 'component.global.delete.consumer.success' })}`, + setDeleteLoading(record.id); + remove(record.username) + .then(() => { + notification.success({ + message: `${formatMessage({ id: 'component.global.delete.consumer.success' })}`, + }); + checkPageList(ref); + }) + .finally(() => { + setDeleteLoading(''); }); - checkPageList(ref); - }); }} > - diff --git a/web/src/pages/Plugin/List.tsx b/web/src/pages/Plugin/List.tsx index d4a4361e7f..f101a08b63 100644 --- a/web/src/pages/Plugin/List.tsx +++ b/web/src/pages/Plugin/List.tsx @@ -36,6 +36,7 @@ const Page: React.FC = () => { const [pluginList, setPluginList] = useState([]); const [name, setName] = useState(''); const { paginationConfig, savePageList, checkPageList } = usePagination(); + const [deleteLoading, setDeleteLoading] = useState(''); useEffect(() => { fetchPluginList().then(setPluginList); @@ -79,19 +80,24 @@ const Page: React.FC = () => { title={formatMessage({ id: 'component.global.popconfirm.title.delete' })} onConfirm={() => { const plugins = omit(initialData, [`${record.name}`]); - createOrUpdate({ plugins }).then(() => { - notification.success({ - message: formatMessage({ id: 'page.plugin.delete' }), + setDeleteLoading(record.id); + createOrUpdate({ plugins }) + .then(() => { + notification.success({ + message: formatMessage({ id: 'page.plugin.delete' }), + }); + checkPageList(ref); + setInitialData(plugins); + setName(''); + }) + .finally(() => { + setDeleteLoading(''); }); - checkPageList(ref); - setInitialData(plugins); - setName(''); - }); }} okText={formatMessage({ id: 'component.global.confirm' })} cancelText={formatMessage({ id: 'component.global.cancel' })} > - diff --git a/web/src/pages/Proto/List.tsx b/web/src/pages/Proto/List.tsx index 07f344e886..00ba09f8f5 100755 --- a/web/src/pages/Proto/List.tsx +++ b/web/src/pages/Proto/List.tsx @@ -40,6 +40,7 @@ const Page: React.FC = () => { }; const [protoData, setProtoData] = useState(emptyProtoData); const [editMode, setEditMode] = useState('create'); + const [deleteLoading, setDeleteLoading] = useState(''); const refreshTable = () => { ref.current?.reload(); @@ -97,15 +98,20 @@ const Page: React.FC = () => { okText={formatMessage({ id: 'page.proto.list.confirm' })} cancelText={formatMessage({ id: 'page.proto.list.cancel' })} onConfirm={() => { - remove(record.id).then(() => { - notification.success({ - message: formatMessage({ id: 'page.proto.list.delete.successfully' }), + setDeleteLoading(record.id); + remove(record.id) + .then(() => { + notification.success({ + message: formatMessage({ id: 'page.proto.list.delete.successfully' }), + }); + checkPageList(ref); + }) + .finally(() => { + setDeleteLoading(''); }); - checkPageList(ref); - }); }} > - diff --git a/web/src/pages/SSL/List.tsx b/web/src/pages/SSL/List.tsx index 47e4d00538..dc4c8d28c8 100644 --- a/web/src/pages/SSL/List.tsx +++ b/web/src/pages/SSL/List.tsx @@ -14,7 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import ProTable from '@ant-design/pro-table'; import type { ProColumns, ActionType } from '@ant-design/pro-table'; @@ -29,6 +29,7 @@ const Page: React.FC = () => { const tableRef = useRef(); const { formatMessage } = useIntl(); const { paginationConfig, savePageList, checkPageList } = usePagination(); + const [deleteLoading, setDeleteLoading] = useState(''); const columns: ProColumns[] = [ { @@ -70,18 +71,23 @@ const Page: React.FC = () => { - removeSSL(record.id).then(() => { - notification.success({ - message: formatMessage({ id: 'component.ssl.removeSSLSuccess' }), + onConfirm={() => { + setDeleteLoading(record.id); + removeSSL(record.id) + .then(() => { + notification.success({ + message: formatMessage({ id: 'component.ssl.removeSSLSuccess' }), + }); + requestAnimationFrame(() => checkPageList(tableRef)); + }) + .finally(() => { + setDeleteLoading(''); }); - requestAnimationFrame(() => checkPageList(tableRef)); - }) - } + }} cancelText={formatMessage({ id: 'component.global.cancel' })} okText={formatMessage({ id: 'component.global.confirm' })} > - diff --git a/web/src/pages/Service/List.tsx b/web/src/pages/Service/List.tsx index 948f112709..6fa43435e6 100644 --- a/web/src/pages/Service/List.tsx +++ b/web/src/pages/Service/List.tsx @@ -37,6 +37,8 @@ const Page: React.FC = () => { const [editorMode, setEditorMode] = useState<'create' | 'update'>('create'); const { paginationConfig, savePageList, checkPageList } = usePagination(); + const [deleteLoading, setDeleteLoading] = useState(''); + const columns: ProColumns[] = [ { title: 'ID', @@ -76,19 +78,26 @@ const Page: React.FC = () => { { - remove(record.id!).then(() => { - notification.success({ - message: `${formatMessage({ id: 'component.global.delete' })} ${formatMessage({ - id: 'menu.service', - })} ${formatMessage({ id: 'component.status.success' })}`, + setDeleteLoading(record.id!); + remove(record.id!) + .then(() => { + notification.success({ + message: `${formatMessage({ id: 'component.global.delete' })} ${formatMessage( + { + id: 'menu.service', + }, + )} ${formatMessage({ id: 'component.status.success' })}`, + }); + checkPageList(ref); + }) + .finally(() => { + setDeleteLoading(''); }); - checkPageList(ref); - }); }} okText={formatMessage({ id: 'component.global.confirm' })} cancelText={formatMessage({ id: 'component.global.cancel' })} > - diff --git a/web/src/pages/Upstream/List.tsx b/web/src/pages/Upstream/List.tsx index c0348743e0..3966b52157 100644 --- a/web/src/pages/Upstream/List.tsx +++ b/web/src/pages/Upstream/List.tsx @@ -40,6 +40,8 @@ const Page: React.FC = () => { const { paginationConfig, savePageList, checkPageList } = usePagination(); const { formatMessage } = useIntl(); + const [deleteLoading, setDeleteLoading] = useState(''); + const columns: ProColumns[] = [ { title: formatMessage({ id: 'page.upstream.list.id' }), @@ -91,15 +93,20 @@ const Page: React.FC = () => { okText={formatMessage({ id: 'page.upstream.list.confirm' })} cancelText={formatMessage({ id: 'page.upstream.list.cancel' })} onConfirm={() => { - remove(record.id!).then(() => { - notification.success({ - message: formatMessage({ id: 'page.upstream.list.delete.successfully' }), + setDeleteLoading(record.id!); + remove(record.id!) + .then(() => { + notification.success({ + message: formatMessage({ id: 'page.upstream.list.delete.successfully' }), + }); + checkPageList(ref); + }) + .finally(() => { + setDeleteLoading(''); }); - checkPageList(ref); - }); }} > - From 4d99636fd118b3bd34c07aaa6ee1c34df59dd07a Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Thu, 29 Sep 2022 16:03:53 +0800 Subject: [PATCH 06/32] docs: add license --- web/src/hooks/useRequest.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/web/src/hooks/useRequest.ts b/web/src/hooks/useRequest.ts index 2ae5e532d2..58487cdf28 100644 --- a/web/src/hooks/useRequest.ts +++ b/web/src/hooks/useRequest.ts @@ -1,3 +1,19 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ import { useCallback, useState } from 'react'; export default function useRequest(requestFn: any) { From 2a40b3267342cf898174c6e97d54235832dcd393 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Wed, 5 Oct 2022 02:28:10 +0800 Subject: [PATCH 07/32] test(route): correct the test sequence --- .../e2e/route/batch-delete-route.cy.js | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/web/cypress/e2e/route/batch-delete-route.cy.js b/web/cypress/e2e/route/batch-delete-route.cy.js index d96a13672c..fdfb08b67d 100644 --- a/web/cypress/e2e/route/batch-delete-route.cy.js +++ b/web/cypress/e2e/route/batch-delete-route.cy.js @@ -63,36 +63,38 @@ context('Create and Batch Deletion Routes', () => { for (let i = 0; i < 3; i += 1) { cy.wait(timeout); cy.get('.ant-pro-table-list-toolbar-right').contains('Create').click(); - cy.get('.ant-row').contains('Next').click().click(); cy.get(selector.name).type(`test${i}`); cy.get(selector.description).type(`desc${i}`); cy.get(selector.hosts_0).type(data.host1); cy.get(selector.uris_0).clear().type(`/get${i}`); - // config label cy.contains('Manage').click(); - + // eslint-disable-next-line @typescript-eslint/no-loop-func cy.get(selector.drawerBody).within(($drawer) => { cy.wrap($drawer) .contains('button', 'Add') .should('not.be.disabled') - .click() + .click({ force: true }) .then(() => { cy.get(selector.labels_0_labelKey).type(`label${i}`); cy.get(selector.labels_0_labelValue).type(`value${i}`); - cy.contains('Confirm').click(); + cy.contains('Confirm').click({ force: true }); }); }); - cy.contains('button', 'Next').should('not.be.disabled').click(); + cy.get('.ant-row').contains('Next').click({ force: true }); + cy.get(selector.nodes_0_host).type(data.host2, { timeout, }); cy.get(selector.nodes_0_port).type(data.port); cy.get(selector.nodes_0_weight).type(data.weight); + cy.get('.ant-row').contains('Next').click(); cy.get('.ant-row').contains('Next').click(); cy.get('.ant-row').contains('Submit').click(); + // cy.contains('button', 'Next').should('not.be.disabled').click(); + cy.contains(data.submitSuccess); cy.contains('Goto List').click(); cy.url().should('contains', 'routes/list'); @@ -115,16 +117,16 @@ context('Create and Batch Deletion Routes', () => { it('should batch delete the name of the route', function () { cy.contains('Route').click(); const cases = [ - [1, 0, 2], //full match + [1, 0, 2], // full match [0, 1, 2], // partial match - [0, 1, 2], //none match + [0, 1, 2], // none match ]; const prefix = 'test'; cy.wrap([0, 2, 'x']).each(($n, i) => { cy.get(selector.nameSearchInput).clear().type(`${prefix}${$n}`); cy.contains('Search').click(); - cy.wrap(cases[i]).each(($n) => { - cy.contains(`${prefix}${$n}`).should('not.exist'); + cy.wrap(cases[i]).each(($m) => { + cy.contains(`${prefix}${$m}`).should('not.exist'); }); }); }); @@ -132,16 +134,16 @@ context('Create and Batch Deletion Routes', () => { it('should batch delete the path of the route', function () { cy.contains('Route').click(); const cases = [ - [1, 0, 2], //full match + [1, 0, 2], // full match [0, 1, 2], // partial match - [0, 1, 2], //none match + [0, 1, 2], // none match ]; const prefix = '/get'; cy.wrap([0, 2, 'x']).each(($n, i) => { cy.get(selector.nameSearchInput).clear().type(`${prefix}${$n}`); cy.contains('Search').click(); - cy.wrap(cases[i]).each(($n) => { - cy.contains(`${prefix}${$n}`).should('not.exist'); + cy.wrap(cases[i]).each(($m) => { + cy.contains(`${prefix}${$m}`).should('not.exist'); }); }); }); From e0e284b1490cd570544834835f9bb9f11f905f1e Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Wed, 5 Oct 2022 18:12:06 +0800 Subject: [PATCH 08/32] test(route): click on the delay --- web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js | 2 +- .../create-route-with-advanced-matching-conditions.cy.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js b/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js index 449f8a4843..a99a530da5 100644 --- a/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js +++ b/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js @@ -72,7 +72,7 @@ context('Create Route Both use uri and uris', () => { cy.contains('Route').click(); cy.get(selector.empty).should('be.visible'); cy.contains('Create').click(); - cy.contains('Next').click().click(); + cy.contains('Next').click(); cy.get(selector.name).type(data.name); cy.get(selector.description).type(data.description); diff --git a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js index bce18506c2..df86f0bebe 100644 --- a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js +++ b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js @@ -70,7 +70,7 @@ context('Create Route with advanced matching conditions', () => { it('should create route with advanced matching conditions', function () { cy.visit('/routes/list'); cy.contains('Create').click(); - cy.contains('Next').click().click(); + cy.contains('Next').click(); cy.get(selector.name).type(data.routeName); // All Of Operational Character Should Exist And Can be Created @@ -162,7 +162,9 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); + cy.wait(2000); cy.contains('Next').click(); + cy.wait(2000); cy.contains('Submit').click(); cy.contains(data.submitSuccess); cy.contains('Goto List').click(); @@ -185,7 +187,9 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); + cy.wait(2000); cy.contains('Next').click(); + cy.wait(2000); cy.contains('Submit').click(); cy.contains(data.submitSuccess); cy.contains('Goto List').click(); From 15e683ddfe959eb289e5e47e95bd2846c208bc5f Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Fri, 7 Oct 2022 23:05:48 +0800 Subject: [PATCH 09/32] test(route): add custom redirect delay --- .../e2e/route/create-edit-route-with-redirect-plugin.cy.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js b/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js index f3f779c7dc..8fd19ee45e 100644 --- a/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js +++ b/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js @@ -67,6 +67,7 @@ context('Create Edit and Delete Route with redirect plugin', () => { cy.get(selector.name).type(name); cy.get(selector.redirect).click(); cy.contains('Custom').click({ force: true }); + cy.wait(timeout); // after choose Custom option, Custom Redirect form field should be visible cy.get(selector.customRedirectLabel).should('be.visible'); cy.get(selector.customRedirectUrI).should('be.visible'); @@ -79,6 +80,7 @@ context('Create Edit and Delete Route with redirect plugin', () => { cy.contains(data.step3Title).should('not.exist'); // type customRedirectUrI cy.get(selector.customRedirectUrI).type(data.customRedirectUrI); + cy.get(selector.customRedirectUrI); cy.contains('Next').click(); cy.contains('Submit').click(); cy.contains(data.submitSuccess); From 9d4edfe1f87196bf417242b430d67dc76da86545 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Sat, 8 Oct 2022 10:27:25 +0800 Subject: [PATCH 10/32] test(route): increase delay --- .../e2e/route/create-edit-route-with-redirect-plugin.cy.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js b/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js index 8fd19ee45e..480867c58d 100644 --- a/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js +++ b/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js @@ -63,6 +63,7 @@ context('Create Edit and Delete Route with redirect plugin', () => { cy.contains('Create').click(); cy.wait(timeout * 2); cy.contains('Next').click(); + cy.wait(timeout); cy.contains('Next').click(); cy.get(selector.name).type(name); cy.get(selector.redirect).click(); From 95cb478f29a839876b38c8aa57f2a1074e75e09d Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Sat, 8 Oct 2022 11:18:19 +0800 Subject: [PATCH 11/32] test(route): increase delay --- .../e2e/route/create-route-with-proxy-rewrite-plugin.cy.js | 3 +++ .../create-route-with-search-service-and-set-priority.cy.js | 6 +++++- web/cypress/e2e/route/search-route.cy.js | 4 +++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js b/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js index 721d317c35..5d99da4df2 100644 --- a/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js +++ b/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js @@ -81,6 +81,7 @@ context('create route with proxy-rewrite plugin', () => { cy.get(selector.newUri).should('be.visible').type(data.rewriteUri); // should show regexp and template after URIRewriteType regexp clicked cy.contains(routeLocaleUS['page.route.radio.regex']).click(); + cy.wait(1000); cy.contains(routeLocaleUS['page.route.form.itemLabel.regex']).should('be.visible'); cy.get(selector.uriRewriteReg).should('be.visible'); cy.contains(routeLocaleUS['page.route.form.itemLabel.template']).should('be.visible'); @@ -145,11 +146,13 @@ context('create route with proxy-rewrite plugin', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_host).should('have.value', data.host2); + cy.wait(1000); cy.contains('Next').click(); // should not see proxy-rewrite plugin in the step3 cy.contains('proxy-rewrite').should('not.exist'); cy.contains('Next').click(); + cy.wait(1000); cy.contains('Submit').click(); cy.contains(data.submitSuccess).should('be.visible'); }); diff --git a/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js b/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js index a6f3faae59..cfe034a43f 100644 --- a/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js +++ b/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js @@ -82,6 +82,7 @@ context('Create Route with search service name', () => { cy.get(selector.nodes_0_weight).clear().type(data.weight); cy.contains('Next').click(); + cy.wait(timeout); cy.contains('Next').click(); cy.contains('Submit').click(); cy.wait(timeout); @@ -109,7 +110,9 @@ context('Create Route with search service name', () => { cy.visit('/'); cy.contains('Route').click(); cy.contains('Create').click(); - cy.contains('Next').click().click(); + cy.contains('Next').click(); + cy.wait(timeout); + cy.contains('Next').click(); // set name cy.get(selector.name).type(data.routeName); @@ -168,6 +171,7 @@ context('Create Route with search service name', () => { cy.visit('/'); cy.contains('Service').click(); + cy.wait(timeout); cy.contains(data.serviceName).siblings().contains('Delete').click(); cy.contains('button', 'Confirm').click(); cy.get(selector.notification).should('contain', data.deleteServiceSuccess); diff --git a/web/cypress/e2e/route/search-route.cy.js b/web/cypress/e2e/route/search-route.cy.js index d947d977a7..0010e810db 100644 --- a/web/cypress/e2e/route/search-route.cy.js +++ b/web/cypress/e2e/route/search-route.cy.js @@ -82,7 +82,9 @@ context('Create and Search Route', () => { cy.wait(timeout); for (let i = 0; i < 3; i += 1) { cy.contains('Create').click(); - cy.contains('Next').click().click(); + cy.contains('Next').click(); + cy.wait(timeout); + cy.contains('Next').click(); cy.get(selector.name).type(`test${i}`); cy.get(selector.description).type(`desc${i}`); cy.get(selector.hosts_0).type(data.host1); From c4b2bbf3c15cc291d33f5ef1d4c128dff829b88a Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Sat, 8 Oct 2022 11:23:26 +0800 Subject: [PATCH 12/32] test(route):remove force --- web/cypress/e2e/route/batch-delete-route.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/cypress/e2e/route/batch-delete-route.cy.js b/web/cypress/e2e/route/batch-delete-route.cy.js index fdfb08b67d..5d56f79e59 100644 --- a/web/cypress/e2e/route/batch-delete-route.cy.js +++ b/web/cypress/e2e/route/batch-delete-route.cy.js @@ -74,7 +74,7 @@ context('Create and Batch Deletion Routes', () => { cy.wrap($drawer) .contains('button', 'Add') .should('not.be.disabled') - .click({ force: true }) + .click() .then(() => { cy.get(selector.labels_0_labelKey).type(`label${i}`); cy.get(selector.labels_0_labelValue).type(`value${i}`); From 59258163cc151a613b0a65b33c2e00129c8a5c16 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Sat, 8 Oct 2022 14:18:13 +0800 Subject: [PATCH 13/32] test(route): increase delay --- ...reate-route-with-advanced-matching-conditions.cy.js | 10 ++++++---- .../e2e/route/create-route-with-chash-upstream.cy.js | 1 + .../route/create-route-with-proxy-rewrite-plugin.cy.js | 8 +++++--- web/cypress/e2e/route/create-route-with-upstream.cy.js | 3 +++ 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js index df86f0bebe..072e31eb54 100644 --- a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js +++ b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js @@ -44,6 +44,8 @@ context('Create Route with advanced matching conditions', () => { deleteRouteSuccess: 'Delete Route Successfully', }; + const timeout = 1000; + const operatorList = [ // 'Equal(==)' : '1234', 'Unequal(~=)', @@ -162,9 +164,9 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); - cy.wait(2000); + cy.wait(timeout * 2); cy.contains('Next').click(); - cy.wait(2000); + cy.wait(timeout * 2); cy.contains('Submit').click(); cy.contains(data.submitSuccess); cy.contains('Goto List').click(); @@ -187,9 +189,9 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); - cy.wait(2000); + cy.wait(timeout * 2); cy.contains('Next').click(); - cy.wait(2000); + cy.wait(timeout * 2); cy.contains('Submit').click(); cy.contains(data.submitSuccess); cy.contains('Goto List').click(); diff --git a/web/cypress/e2e/route/create-route-with-chash-upstream.cy.js b/web/cypress/e2e/route/create-route-with-chash-upstream.cy.js index 6058e5922d..560c1f36fd 100644 --- a/web/cypress/e2e/route/create-route-with-chash-upstream.cy.js +++ b/web/cypress/e2e/route/create-route-with-chash-upstream.cy.js @@ -102,6 +102,7 @@ context('Create and Edit Route With Custom CHash Key Upstream', () => { cy.get(selector.chash_key).should('value', data.custom_key); cy.get(selector.chash_key).clear().type(data.new_key); cy.contains('Next').click(); + cy.wait(1000); cy.contains('Next').click(); cy.contains('Submit').click(); cy.contains(data.submitSuccess).should('be.visible'); diff --git a/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js b/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js index 5d99da4df2..c2a284bb4c 100644 --- a/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js +++ b/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js @@ -58,6 +58,8 @@ context('create route with proxy-rewrite plugin', () => { rewriteHeaderValue2: '2', }; + const timeout = 1000; + beforeEach(() => { cy.login(); }); @@ -81,7 +83,7 @@ context('create route with proxy-rewrite plugin', () => { cy.get(selector.newUri).should('be.visible').type(data.rewriteUri); // should show regexp and template after URIRewriteType regexp clicked cy.contains(routeLocaleUS['page.route.radio.regex']).click(); - cy.wait(1000); + cy.wait(timeout); cy.contains(routeLocaleUS['page.route.form.itemLabel.regex']).should('be.visible'); cy.get(selector.uriRewriteReg).should('be.visible'); cy.contains(routeLocaleUS['page.route.form.itemLabel.template']).should('be.visible'); @@ -146,13 +148,13 @@ context('create route with proxy-rewrite plugin', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_host).should('have.value', data.host2); - cy.wait(1000); + cy.wait(timeout); cy.contains('Next').click(); // should not see proxy-rewrite plugin in the step3 cy.contains('proxy-rewrite').should('not.exist'); cy.contains('Next').click(); - cy.wait(1000); + cy.wait(timeout); cy.contains('Submit').click(); cy.contains(data.submitSuccess).should('be.visible'); }); diff --git a/web/cypress/e2e/route/create-route-with-upstream.cy.js b/web/cypress/e2e/route/create-route-with-upstream.cy.js index 86dc8125c5..25e9f43877 100644 --- a/web/cypress/e2e/route/create-route-with-upstream.cy.js +++ b/web/cypress/e2e/route/create-route-with-upstream.cy.js @@ -45,6 +45,8 @@ context('Create Route with Upstream', () => { FQDN: 'bigserver.mycompany.com', }; + const timeout = 1000; + beforeEach(() => { cy.login(); }); @@ -66,6 +68,7 @@ context('Create Route with Upstream', () => { cy.get(selector.nodes_0_port).clear(); cy.get(selector.nodes_0_weight).type(data.weight); cy.contains('Next').click(); + cy.wait(timeout); cy.contains('Submit').click(); }); From f2d74677a352b524012e03fde83be908171c22c1 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Sat, 8 Oct 2022 17:36:29 +0800 Subject: [PATCH 14/32] test(route): increase delay --- ...ginTemplate-create-plugin-template-with-route.cy.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js b/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js index 8916977629..5357815dd0 100644 --- a/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js +++ b/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js @@ -48,6 +48,8 @@ context('Create PluginTemplate Binding To Route', () => { weight: 1, }; + const timeout = 1000; + beforeEach(() => { cy.login(); }); @@ -55,9 +57,11 @@ context('Create PluginTemplate Binding To Route', () => { it('should create test pluginTemplate', function () { cy.visit('/'); cy.contains('Route').click(); + cy.wait(timeout * 2); cy.get(selector.empty).should('be.visible'); cy.contains('Advanced').should('be.visible').click(); cy.contains('Plugin Template Config').should('be.visible').click(); + cy.wait(timeout * 2); cy.get(selector.empty).should('be.visible'); cy.contains('Create').click(); cy.get(selector.description).type(data.pluginTemplateName); @@ -92,7 +96,7 @@ context('Create PluginTemplate Binding To Route', () => { it('should delete the pluginTemplate failure', function () { cy.visit('plugin-template/list'); cy.get(selector.refresh).click(); - + cy.wait(timeout * 2); cy.get(selector.descriptionSelector).type(data.pluginTemplateName); cy.contains('button', 'Search').click(); cy.contains(data.pluginTemplateName).siblings().contains('Delete').click(); @@ -103,7 +107,7 @@ context('Create PluginTemplate Binding To Route', () => { it('should edit the route with pluginTemplate', function () { cy.visit('routes/list'); - + cy.wait(timeout * 2); cy.get(selector.nameSelector).type(data.routeName); cy.contains('Search').click(); cy.contains(data.routeName).siblings().contains('Configure').click(); @@ -124,8 +128,10 @@ context('Create PluginTemplate Binding To Route', () => { cy.visit('plugin-template/list'); cy.get(selector.refresh).click(); + cy.wait(timeout * 2); cy.get(selector.descriptionSelector).type(data.pluginTemplateName); cy.contains('button', 'Search').click(); + cy.wait(timeout * 2); cy.contains(data.pluginTemplateName).siblings().contains('Delete').click(); cy.contains('button', 'Confirm').click(); cy.get(selector.notification).should('contain', data.deletePluginTemplateSuccess); From 478e4f05e585f4ca223fb91365421c927d95ab8a Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Sat, 8 Oct 2022 20:03:13 +0800 Subject: [PATCH 15/32] test(upstream): increase delay --- .../rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js b/web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js index ce15556790..85be2547a9 100644 --- a/web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js +++ b/web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js @@ -49,6 +49,7 @@ context('Create and Delete Upstream', () => { cy.get(selector.upstreamNodeMinus0).click(); cy.contains('Next').click(); + cy.wait(2000); cy.contains('Submit').click(); cy.get(selector.notification).should('contain', data.createUpstreamSuccess); cy.url().should('contains', 'upstream/list'); From e4b47b448f31143d2a3a0b0644f262619cbbd470 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Sun, 9 Oct 2022 14:40:20 +0800 Subject: [PATCH 16/32] test(route): increase delay --- .../pluginTemplate-create-plugin-template-with-route.cy.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js b/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js index 5357815dd0..b04f394058 100644 --- a/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js +++ b/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js @@ -60,6 +60,7 @@ context('Create PluginTemplate Binding To Route', () => { cy.wait(timeout * 2); cy.get(selector.empty).should('be.visible'); cy.contains('Advanced').should('be.visible').click(); + cy.wait(timeout); cy.contains('Plugin Template Config').should('be.visible').click(); cy.wait(timeout * 2); cy.get(selector.empty).should('be.visible'); @@ -84,6 +85,7 @@ context('Create PluginTemplate Binding To Route', () => { cy.scrollTo(0, 0); cy.contains('Custom').should('be.visible'); cy.get(selector.customSelector).click(); + cy.wait(timeout); cy.contains(data.pluginTemplateName).click(); cy.contains('Next').click(); @@ -110,6 +112,7 @@ context('Create PluginTemplate Binding To Route', () => { cy.wait(timeout * 2); cy.get(selector.nameSelector).type(data.routeName); cy.contains('Search').click(); + cy.wait(timeout); cy.contains(data.routeName).siblings().contains('Configure').click(); cy.contains('Forbidden').click(); From f2e3aa2741a026a0da198b52b2ea355dce1675ee Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Mon, 10 Oct 2022 12:43:34 +0800 Subject: [PATCH 17/32] test: revert --- .../e2e/route/create-route-both-use-uri-uris.cy.js | 2 +- .../create-route-with-advanced-matching-conditions.cy.js | 8 +------- .../e2e/route/create-route-with-chash-upstream.cy.js | 1 - ...reate-route-with-search-service-and-set-priority.cy.js | 4 +--- web/cypress/e2e/route/search-route.cy.js | 4 +--- 5 files changed, 4 insertions(+), 15 deletions(-) diff --git a/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js b/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js index a99a530da5..449f8a4843 100644 --- a/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js +++ b/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js @@ -72,7 +72,7 @@ context('Create Route Both use uri and uris', () => { cy.contains('Route').click(); cy.get(selector.empty).should('be.visible'); cy.contains('Create').click(); - cy.contains('Next').click(); + cy.contains('Next').click().click(); cy.get(selector.name).type(data.name); cy.get(selector.description).type(data.description); diff --git a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js index 072e31eb54..bce18506c2 100644 --- a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js +++ b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js @@ -44,8 +44,6 @@ context('Create Route with advanced matching conditions', () => { deleteRouteSuccess: 'Delete Route Successfully', }; - const timeout = 1000; - const operatorList = [ // 'Equal(==)' : '1234', 'Unequal(~=)', @@ -72,7 +70,7 @@ context('Create Route with advanced matching conditions', () => { it('should create route with advanced matching conditions', function () { cy.visit('/routes/list'); cy.contains('Create').click(); - cy.contains('Next').click(); + cy.contains('Next').click().click(); cy.get(selector.name).type(data.routeName); // All Of Operational Character Should Exist And Can be Created @@ -164,9 +162,7 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); - cy.wait(timeout * 2); cy.contains('Next').click(); - cy.wait(timeout * 2); cy.contains('Submit').click(); cy.contains(data.submitSuccess); cy.contains('Goto List').click(); @@ -189,9 +185,7 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); - cy.wait(timeout * 2); cy.contains('Next').click(); - cy.wait(timeout * 2); cy.contains('Submit').click(); cy.contains(data.submitSuccess); cy.contains('Goto List').click(); diff --git a/web/cypress/e2e/route/create-route-with-chash-upstream.cy.js b/web/cypress/e2e/route/create-route-with-chash-upstream.cy.js index 560c1f36fd..6058e5922d 100644 --- a/web/cypress/e2e/route/create-route-with-chash-upstream.cy.js +++ b/web/cypress/e2e/route/create-route-with-chash-upstream.cy.js @@ -102,7 +102,6 @@ context('Create and Edit Route With Custom CHash Key Upstream', () => { cy.get(selector.chash_key).should('value', data.custom_key); cy.get(selector.chash_key).clear().type(data.new_key); cy.contains('Next').click(); - cy.wait(1000); cy.contains('Next').click(); cy.contains('Submit').click(); cy.contains(data.submitSuccess).should('be.visible'); diff --git a/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js b/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js index cfe034a43f..4d3c216c32 100644 --- a/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js +++ b/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js @@ -110,9 +110,7 @@ context('Create Route with search service name', () => { cy.visit('/'); cy.contains('Route').click(); cy.contains('Create').click(); - cy.contains('Next').click(); - cy.wait(timeout); - cy.contains('Next').click(); + cy.contains('Next').click().click(); // set name cy.get(selector.name).type(data.routeName); diff --git a/web/cypress/e2e/route/search-route.cy.js b/web/cypress/e2e/route/search-route.cy.js index 0010e810db..d947d977a7 100644 --- a/web/cypress/e2e/route/search-route.cy.js +++ b/web/cypress/e2e/route/search-route.cy.js @@ -82,9 +82,7 @@ context('Create and Search Route', () => { cy.wait(timeout); for (let i = 0; i < 3; i += 1) { cy.contains('Create').click(); - cy.contains('Next').click(); - cy.wait(timeout); - cy.contains('Next').click(); + cy.contains('Next').click().click(); cy.get(selector.name).type(`test${i}`); cy.get(selector.description).type(`desc${i}`); cy.get(selector.hosts_0).type(data.host1); From 457058071bcef30b44c19b3d765711197d287c78 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Mon, 10 Oct 2022 14:24:00 +0800 Subject: [PATCH 18/32] test: increase delay --- web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js | 1 + .../create-route-with-advanced-matching-conditions.cy.js | 5 +++++ .../create-route-with-search-service-and-set-priority.cy.js | 3 +-- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js b/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js index 449f8a4843..719ee48cea 100644 --- a/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js +++ b/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js @@ -73,6 +73,7 @@ context('Create Route Both use uri and uris', () => { cy.get(selector.empty).should('be.visible'); cy.contains('Create').click(); cy.contains('Next').click().click(); + cy.wait(2000); cy.get(selector.name).type(data.name); cy.get(selector.description).type(data.description); diff --git a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js index bce18506c2..15b1f955b3 100644 --- a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js +++ b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js @@ -57,6 +57,8 @@ context('Create Route with advanced matching conditions', () => { const matchingValueList2 = ['2000', '1800', '3000', '["2800","2888"]']; + const timeout = 2000; + before(() => { cy.clearLocalStorageSnapshot(); cy.login(); @@ -71,6 +73,7 @@ context('Create Route with advanced matching conditions', () => { cy.visit('/routes/list'); cy.contains('Create').click(); cy.contains('Next').click().click(); + cy.wait(timeout); cy.get(selector.name).type(data.routeName); // All Of Operational Character Should Exist And Can be Created @@ -162,6 +165,7 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); + cy.wait(timeout); cy.contains('Next').click(); cy.contains('Submit').click(); cy.contains(data.submitSuccess); @@ -185,6 +189,7 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); + cy.wait(timeout); cy.contains('Next').click(); cy.contains('Submit').click(); cy.contains(data.submitSuccess); diff --git a/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js b/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js index 4d3c216c32..1fd6fe7318 100644 --- a/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js +++ b/web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js @@ -85,7 +85,6 @@ context('Create Route with search service name', () => { cy.wait(timeout); cy.contains('Next').click(); cy.contains('Submit').click(); - cy.wait(timeout); cy.get(selector.notification).should('contain', data.createServiceSuccess); cy.visit('/'); @@ -111,7 +110,7 @@ context('Create Route with search service name', () => { cy.contains('Route').click(); cy.contains('Create').click(); cy.contains('Next').click().click(); - + cy.wait(timeout); // set name cy.get(selector.name).type(data.routeName); cy.get(selector.serviceSelector).type(`${data.serviceName2}\n`); From c489c231aa09afcc0fd5a208936cbaa16d0942be Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Mon, 10 Oct 2022 15:18:11 +0800 Subject: [PATCH 19/32] test: increase delay --- web/cypress/e2e/route/search-route.cy.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web/cypress/e2e/route/search-route.cy.js b/web/cypress/e2e/route/search-route.cy.js index d947d977a7..1e76e1d179 100644 --- a/web/cypress/e2e/route/search-route.cy.js +++ b/web/cypress/e2e/route/search-route.cy.js @@ -83,6 +83,7 @@ context('Create and Search Route', () => { for (let i = 0; i < 3; i += 1) { cy.contains('Create').click(); cy.contains('Next').click().click(); + cy.wait(timeout); cy.get(selector.name).type(`test${i}`); cy.get(selector.description).type(`desc${i}`); cy.get(selector.hosts_0).type(data.host1); From 27d3cf9cf778c7d6dc9452d5d089f9341f2f994c Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Mon, 10 Oct 2022 16:12:04 +0800 Subject: [PATCH 20/32] test: revert --- ...inTemplate-create-plugin-template-with-route.cy.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js b/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js index b04f394058..0b0af098a0 100644 --- a/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js +++ b/web/cypress/e2e/rest/pluginTemplate-create-plugin-template-with-route.cy.js @@ -48,8 +48,6 @@ context('Create PluginTemplate Binding To Route', () => { weight: 1, }; - const timeout = 1000; - beforeEach(() => { cy.login(); }); @@ -57,12 +55,9 @@ context('Create PluginTemplate Binding To Route', () => { it('should create test pluginTemplate', function () { cy.visit('/'); cy.contains('Route').click(); - cy.wait(timeout * 2); cy.get(selector.empty).should('be.visible'); cy.contains('Advanced').should('be.visible').click(); - cy.wait(timeout); cy.contains('Plugin Template Config').should('be.visible').click(); - cy.wait(timeout * 2); cy.get(selector.empty).should('be.visible'); cy.contains('Create').click(); cy.get(selector.description).type(data.pluginTemplateName); @@ -85,7 +80,6 @@ context('Create PluginTemplate Binding To Route', () => { cy.scrollTo(0, 0); cy.contains('Custom').should('be.visible'); cy.get(selector.customSelector).click(); - cy.wait(timeout); cy.contains(data.pluginTemplateName).click(); cy.contains('Next').click(); @@ -98,7 +92,6 @@ context('Create PluginTemplate Binding To Route', () => { it('should delete the pluginTemplate failure', function () { cy.visit('plugin-template/list'); cy.get(selector.refresh).click(); - cy.wait(timeout * 2); cy.get(selector.descriptionSelector).type(data.pluginTemplateName); cy.contains('button', 'Search').click(); cy.contains(data.pluginTemplateName).siblings().contains('Delete').click(); @@ -109,10 +102,8 @@ context('Create PluginTemplate Binding To Route', () => { it('should edit the route with pluginTemplate', function () { cy.visit('routes/list'); - cy.wait(timeout * 2); cy.get(selector.nameSelector).type(data.routeName); cy.contains('Search').click(); - cy.wait(timeout); cy.contains(data.routeName).siblings().contains('Configure').click(); cy.contains('Forbidden').click(); @@ -131,10 +122,8 @@ context('Create PluginTemplate Binding To Route', () => { cy.visit('plugin-template/list'); cy.get(selector.refresh).click(); - cy.wait(timeout * 2); cy.get(selector.descriptionSelector).type(data.pluginTemplateName); cy.contains('button', 'Search').click(); - cy.wait(timeout * 2); cy.contains(data.pluginTemplateName).siblings().contains('Delete').click(); cy.contains('button', 'Confirm').click(); cy.get(selector.notification).should('contain', data.deletePluginTemplateSuccess); From fd8796eaed5c55043fa35c6d7dcc53713a779cd6 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Mon, 10 Oct 2022 16:56:36 +0800 Subject: [PATCH 21/32] test: fix can't find dom --- .../e2e/route/create-route-with-api-breaker-form.cy.js | 1 + .../e2e/route/create-route-with-proxy-rewrite-plugin.cy.js | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/web/cypress/e2e/route/create-route-with-api-breaker-form.cy.js b/web/cypress/e2e/route/create-route-with-api-breaker-form.cy.js index 76ba89f189..4ff9ba58ef 100644 --- a/web/cypress/e2e/route/create-route-with-api-breaker-form.cy.js +++ b/web/cypress/e2e/route/create-route-with-api-breaker-form.cy.js @@ -49,6 +49,7 @@ context('Create and delete route with api-breaker form', () => { it('should create route with api-breaker form', function () { cy.visit('/'); cy.contains('Route').click(); + cy.wait(2000); cy.get(selector.empty).should('be.visible'); cy.contains('Create').click(); cy.contains('Next').click().click(); diff --git a/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js b/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js index c2a284bb4c..05051d41b4 100644 --- a/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js +++ b/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js @@ -58,7 +58,7 @@ context('create route with proxy-rewrite plugin', () => { rewriteHeaderValue2: '2', }; - const timeout = 1000; + const timeout = 2000; beforeEach(() => { cy.login(); @@ -71,6 +71,7 @@ context('create route with proxy-rewrite plugin', () => { // show create page cy.contains(componentLocaleUS['component.global.create']).click(); cy.contains('Next').click().click(); + cy.wait(timeout); cy.get(selector.name).type(data.routeName); // show requestOverride PanelSection @@ -83,7 +84,6 @@ context('create route with proxy-rewrite plugin', () => { cy.get(selector.newUri).should('be.visible').type(data.rewriteUri); // should show regexp and template after URIRewriteType regexp clicked cy.contains(routeLocaleUS['page.route.radio.regex']).click(); - cy.wait(timeout); cy.contains(routeLocaleUS['page.route.form.itemLabel.regex']).should('be.visible'); cy.get(selector.uriRewriteReg).should('be.visible'); cy.contains(routeLocaleUS['page.route.form.itemLabel.template']).should('be.visible'); @@ -148,13 +148,13 @@ context('create route with proxy-rewrite plugin', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_host).should('have.value', data.host2); - cy.wait(timeout); cy.contains('Next').click(); // should not see proxy-rewrite plugin in the step3 cy.contains('proxy-rewrite').should('not.exist'); cy.contains('Next').click(); cy.wait(timeout); + cy.contains('Next').click(); cy.contains('Submit').click(); cy.contains(data.submitSuccess).should('be.visible'); }); From 96bc69258ab3fd8cda9ef856e9c4fd91ab48e1a6 Mon Sep 17 00:00:00 2001 From: Silence-dream <1428482231@qq.com> Date: Tue, 11 Oct 2022 10:26:20 +0800 Subject: [PATCH 22/32] test: revert --- ...upstream-create_and_edit_upstream_with_no_nodes.cy.js | 1 - .../route/create-edit-route-with-redirect-plugin.cy.js | 1 - .../e2e/route/create-route-both-use-uri-uris.cy.js | 1 - .../create-route-with-advanced-matching-conditions.cy.js | 5 ----- .../e2e/route/create-route-with-api-breaker-form.cy.js | 1 - .../route/create-route-with-proxy-rewrite-plugin.cy.js | 5 ----- web/cypress/e2e/route/create-route-with-upstream.cy.js | 3 --- web/cypress/e2e/route/search-route.cy.js | 1 - web/src/components/ActionBar/ActionBar.tsx | 9 ++------- 9 files changed, 2 insertions(+), 25 deletions(-) diff --git a/web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js b/web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js index 85be2547a9..ce15556790 100644 --- a/web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js +++ b/web/cypress/e2e/rest/upstream-create_and_edit_upstream_with_no_nodes.cy.js @@ -49,7 +49,6 @@ context('Create and Delete Upstream', () => { cy.get(selector.upstreamNodeMinus0).click(); cy.contains('Next').click(); - cy.wait(2000); cy.contains('Submit').click(); cy.get(selector.notification).should('contain', data.createUpstreamSuccess); cy.url().should('contains', 'upstream/list'); diff --git a/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js b/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js index 480867c58d..3ece682d54 100644 --- a/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js +++ b/web/cypress/e2e/route/create-edit-route-with-redirect-plugin.cy.js @@ -68,7 +68,6 @@ context('Create Edit and Delete Route with redirect plugin', () => { cy.get(selector.name).type(name); cy.get(selector.redirect).click(); cy.contains('Custom').click({ force: true }); - cy.wait(timeout); // after choose Custom option, Custom Redirect form field should be visible cy.get(selector.customRedirectLabel).should('be.visible'); cy.get(selector.customRedirectUrI).should('be.visible'); diff --git a/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js b/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js index 719ee48cea..449f8a4843 100644 --- a/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js +++ b/web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js @@ -73,7 +73,6 @@ context('Create Route Both use uri and uris', () => { cy.get(selector.empty).should('be.visible'); cy.contains('Create').click(); cy.contains('Next').click().click(); - cy.wait(2000); cy.get(selector.name).type(data.name); cy.get(selector.description).type(data.description); diff --git a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js index 15b1f955b3..bce18506c2 100644 --- a/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js +++ b/web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js @@ -57,8 +57,6 @@ context('Create Route with advanced matching conditions', () => { const matchingValueList2 = ['2000', '1800', '3000', '["2800","2888"]']; - const timeout = 2000; - before(() => { cy.clearLocalStorageSnapshot(); cy.login(); @@ -73,7 +71,6 @@ context('Create Route with advanced matching conditions', () => { cy.visit('/routes/list'); cy.contains('Create').click(); cy.contains('Next').click().click(); - cy.wait(timeout); cy.get(selector.name).type(data.routeName); // All Of Operational Character Should Exist And Can be Created @@ -165,7 +162,6 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); - cy.wait(timeout); cy.contains('Next').click(); cy.contains('Submit').click(); cy.contains(data.submitSuccess); @@ -189,7 +185,6 @@ context('Create Route with advanced matching conditions', () => { cy.contains('Next').click(); cy.get(selector.nodes_0_port).focus(); cy.contains('Next').click(); - cy.wait(timeout); cy.contains('Next').click(); cy.contains('Submit').click(); cy.contains(data.submitSuccess); diff --git a/web/cypress/e2e/route/create-route-with-api-breaker-form.cy.js b/web/cypress/e2e/route/create-route-with-api-breaker-form.cy.js index 4ff9ba58ef..76ba89f189 100644 --- a/web/cypress/e2e/route/create-route-with-api-breaker-form.cy.js +++ b/web/cypress/e2e/route/create-route-with-api-breaker-form.cy.js @@ -49,7 +49,6 @@ context('Create and delete route with api-breaker form', () => { it('should create route with api-breaker form', function () { cy.visit('/'); cy.contains('Route').click(); - cy.wait(2000); cy.get(selector.empty).should('be.visible'); cy.contains('Create').click(); cy.contains('Next').click().click(); diff --git a/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js b/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js index 05051d41b4..721d317c35 100644 --- a/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js +++ b/web/cypress/e2e/route/create-route-with-proxy-rewrite-plugin.cy.js @@ -58,8 +58,6 @@ context('create route with proxy-rewrite plugin', () => { rewriteHeaderValue2: '2', }; - const timeout = 2000; - beforeEach(() => { cy.login(); }); @@ -71,7 +69,6 @@ context('create route with proxy-rewrite plugin', () => { // show create page cy.contains(componentLocaleUS['component.global.create']).click(); cy.contains('Next').click().click(); - cy.wait(timeout); cy.get(selector.name).type(data.routeName); // show requestOverride PanelSection @@ -153,8 +150,6 @@ context('create route with proxy-rewrite plugin', () => { // should not see proxy-rewrite plugin in the step3 cy.contains('proxy-rewrite').should('not.exist'); cy.contains('Next').click(); - cy.wait(timeout); - cy.contains('Next').click(); cy.contains('Submit').click(); cy.contains(data.submitSuccess).should('be.visible'); }); diff --git a/web/cypress/e2e/route/create-route-with-upstream.cy.js b/web/cypress/e2e/route/create-route-with-upstream.cy.js index 25e9f43877..86dc8125c5 100644 --- a/web/cypress/e2e/route/create-route-with-upstream.cy.js +++ b/web/cypress/e2e/route/create-route-with-upstream.cy.js @@ -45,8 +45,6 @@ context('Create Route with Upstream', () => { FQDN: 'bigserver.mycompany.com', }; - const timeout = 1000; - beforeEach(() => { cy.login(); }); @@ -68,7 +66,6 @@ context('Create Route with Upstream', () => { cy.get(selector.nodes_0_port).clear(); cy.get(selector.nodes_0_weight).type(data.weight); cy.contains('Next').click(); - cy.wait(timeout); cy.contains('Submit').click(); }); diff --git a/web/cypress/e2e/route/search-route.cy.js b/web/cypress/e2e/route/search-route.cy.js index 1e76e1d179..d947d977a7 100644 --- a/web/cypress/e2e/route/search-route.cy.js +++ b/web/cypress/e2e/route/search-route.cy.js @@ -83,7 +83,6 @@ context('Create and Search Route', () => { for (let i = 0; i < 3; i += 1) { cy.contains('Create').click(); cy.contains('Next').click().click(); - cy.wait(timeout); cy.get(selector.name).type(`test${i}`); cy.get(selector.description).type(`desc${i}`); cy.get(selector.hosts_0).type(data.host1); diff --git a/web/src/components/ActionBar/ActionBar.tsx b/web/src/components/ActionBar/ActionBar.tsx index e56c788581..43354d081c 100644 --- a/web/src/components/ActionBar/ActionBar.tsx +++ b/web/src/components/ActionBar/ActionBar.tsx @@ -18,7 +18,6 @@ import React from 'react'; import type { CSSProperties } from 'react'; import { Row, Col, Button } from 'antd'; import { useIntl } from 'umi'; -import useThrottle from '@/hooks/useThrottle'; type Props = { step: number; @@ -42,10 +41,6 @@ const style: CSSProperties = { const ActionBar: React.FC = ({ step, lastStep, onChange, withResultView, loading }) => { const { formatMessage } = useIntl(); - const { fn: onChangeStep } = useThrottle((n: number) => { - onChange(step + n); - }); - if (step > lastStep && !withResultView) { onChange(lastStep); return null; @@ -60,12 +55,12 @@ const ActionBar: React.FC = ({ step, lastStep, onChange, withResultView,
- - - diff --git a/web/src/pages/Plugin/List.tsx b/web/src/pages/Plugin/List.tsx index f101a08b63..1668fcad93 100644 --- a/web/src/pages/Plugin/List.tsx +++ b/web/src/pages/Plugin/List.tsx @@ -36,7 +36,7 @@ const Page: React.FC = () => { const [pluginList, setPluginList] = useState([]); const [name, setName] = useState(''); const { paginationConfig, savePageList, checkPageList } = usePagination(); - const [deleteLoading, setDeleteLoading] = useState(''); + const [pluginId, setPluginId] = useState(''); useEffect(() => { fetchPluginList().then(setPluginList); @@ -80,7 +80,7 @@ const Page: React.FC = () => { title={formatMessage({ id: 'component.global.popconfirm.title.delete' })} onConfirm={() => { const plugins = omit(initialData, [`${record.name}`]); - setDeleteLoading(record.id); + setPluginId(record.id); createOrUpdate({ plugins }) .then(() => { notification.success({ @@ -91,13 +91,13 @@ const Page: React.FC = () => { setName(''); }) .finally(() => { - setDeleteLoading(''); + setPluginId(''); }); }} okText={formatMessage({ id: 'component.global.confirm' })} cancelText={formatMessage({ id: 'component.global.cancel' })} > - diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx index ff3602f36a..5b7df127ff 100644 --- a/web/src/pages/Route/Create.tsx +++ b/web/src/pages/Route/Create.tsx @@ -19,7 +19,7 @@ import { Card, Steps, Form, Modal } from 'antd'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { history, useIntl } from 'umi'; import { isEmpty } from 'lodash'; - +import { useRequest } from 'ahooks'; import ActionBar from '@/components/ActionBar'; import FlowGraph from '@/components/PluginFlow/components/FlowGraph'; @@ -32,7 +32,6 @@ import CreateStep4 from './components/CreateStep4'; import { DEFAULT_STEP_1_DATA, DEFAULT_STEP_3_DATA } from './constants'; import ResultView from './components/ResultView'; import styles from './Create.less'; -import { useRequest } from 'ahooks'; const { Step } = Steps; diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index 94bdb33008..7f131dd095 100755 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -42,7 +42,7 @@ import yaml from 'js-yaml'; import moment from 'moment'; import { saveAs } from 'file-saver'; import { omit } from 'lodash'; - +import { useThrottleFn } from 'ahooks'; import { DELETE_FIELDS } from '@/constants'; import { timestampToLocaleString } from '@/helpers'; @@ -59,7 +59,6 @@ import { DebugDrawView } from './components/DebugViews'; import { RawDataEditor } from '@/components/RawDataEditor'; import { EXPORT_FILE_MIME_TYPE_SUPPORTED } from './constants'; import DataLoaderImport from '@/pages/Route/components/DataLoader/Import'; -import { useThrottleFn } from 'ahooks'; const { OptGroup, Option } = Select; @@ -86,6 +85,7 @@ const Page: React.FC = () => { const [editorMode, setEditorMode] = useState<'create' | 'update'>('create'); const { paginationConfig, savePageList, checkPageList } = usePagination(); const [debugDrawVisible, setDebugDrawVisible] = useState(false); + const [routeId, setRouteId] = useState(''); useEffect(() => { fetchLabelList().then(setLabelList); @@ -109,11 +109,9 @@ const Page: React.FC = () => { checkPageList(ref); }; - const [publishOfflineLoading, setPublishOfflineLoading] = useState(''); - const { run: handlePublishOffline } = useThrottleFn( (rid: string, status: RouteModule.RouteStatus) => { - setPublishOfflineLoading(rid); + setRouteId(rid); updateRouteStatus(rid, status) .then(() => { const actionName = status @@ -124,10 +122,9 @@ const Page: React.FC = () => { id: 'menu.routes', })} ${formatMessage({ id: 'component.status.success' })}`, ); - setPublishOfflineLoading(''); }) - .catch(() => { - setPublishOfflineLoading(''); + .finally(() => { + setRouteId(''); }); }, ); @@ -514,7 +511,7 @@ const Page: React.FC = () => { onClick={() => { handlePublishOffline(record.id, RouteStatus.Publish); }} - loading={record.id === publishOfflineLoading} + loading={record.id === routeId} > {formatMessage({ id: 'page.route.publish' })} @@ -535,7 +532,7 @@ const Page: React.FC = () => { type="primary" danger disabled={Boolean(!record.status)} - loading={record.id === publishOfflineLoading} + loading={record.id === routeId} > {formatMessage({ id: 'page.route.offline' })} diff --git a/web/src/pages/Service/Create.tsx b/web/src/pages/Service/Create.tsx index 6f06ff4045..6f60870451 100644 --- a/web/src/pages/Service/Create.tsx +++ b/web/src/pages/Service/Create.tsx @@ -35,6 +35,7 @@ const Page: React.FC = (props) => { const [upstreamForm] = Form.useForm(); const upstreamRef = useRef(); const [plugins, setPlugins] = useState({}); + const [submitLoading, setSubmitLoading] = useState(false); const STEP_HEADER = [ formatMessage({ id: 'page.service.steps.stepTitle.basicInformation' }), @@ -62,7 +63,7 @@ const Page: React.FC = (props) => { }); } }, []); - const [submitLoading, setSubmitLoading] = useState(false); + const onSubmit = () => { setSubmitLoading(true); const data = { diff --git a/web/src/pages/Upstream/Create.tsx b/web/src/pages/Upstream/Create.tsx index adc6bb62df..15edbdcede 100644 --- a/web/src/pages/Upstream/Create.tsx +++ b/web/src/pages/Upstream/Create.tsx @@ -29,6 +29,7 @@ const Page: React.FC = (props) => { const [form1] = Form.useForm(); const { formatMessage } = useIntl(); const upstreamRef = useRef(); + const [submitLoading, setSubmitLoading] = useState(false); useEffect(() => { const { id } = (props as any).match.params; @@ -48,7 +49,6 @@ const Page: React.FC = (props) => { }); } }, []); - const [submitLoading, setSubmitLoading] = useState(false); const onSubmit = () => { setSubmitLoading(true);