From 2efb7a25083a9d65ed7d2cb14f30b13554e24636 Mon Sep 17 00:00:00 2001 From: juzhiyuan Date: Wed, 30 Dec 2020 17:08:28 +0800 Subject: [PATCH 01/11] style: codes-format --- web/src/hooks/useForceIntl.ts | 2 +- web/src/pages/Route/List.tsx | 49 ++++++++++--------- .../Route/components/Step1/LabelsDrawer.tsx | 14 +++--- .../pages/Route/components/Step1/MetaView.tsx | 3 +- 4 files changed, 38 insertions(+), 30 deletions(-) diff --git a/web/src/hooks/useForceIntl.ts b/web/src/hooks/useForceIntl.ts index 8f67bef9c1..890a16a5f0 100644 --- a/web/src/hooks/useForceIntl.ts +++ b/web/src/hooks/useForceIntl.ts @@ -29,7 +29,7 @@ const useForceIntl = () => { } const { locale } = getIntl(); - if (locale === 'zh-cn') { + if (locale === 'zh-CN') { return; } diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index 3ac4019bea..2885747b04 100644 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -179,29 +179,31 @@ const Page: React.FC = () => { > {formatMessage({ id: 'component.global.edit' })} - - { - handlePublishOffline(record.id, RouteStatus.Offline); - }} - okText={formatMessage({ id: 'component.global.confirm' })} - cancelText={formatMessage({ id: 'component.global.cancel' })} - disabled={Boolean(!record.status)} - > - - + )} + {Boolean(record.status) && ( + { + handlePublishOffline(record.id, RouteStatus.Offline); + }} + okText={formatMessage({ id: 'component.global.confirm' })} + cancelText={formatMessage({ id: 'component.global.cancel' })} + > + + + )} { @@ -213,6 +215,9 @@ const Page: React.FC = () => { ); }); }} + okButtonProps={{ + danger: true + }} okText={formatMessage({ id: 'component.global.confirm' })} cancelText={formatMessage({ id: 'component.global.cancel' })} > diff --git a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx index ba5b221e46..f4c68fcfa1 100644 --- a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx +++ b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx @@ -22,11 +22,12 @@ import { useIntl } from 'umi'; import { transformLableValueToKeyValue } from '../../transform'; import { fetchLabelList } from '../../service'; -interface Props extends Pick { - labelsDataSource: string[]; +type Props = { + title?: string; + dataSource: string[]; disabled: boolean; onClose(): void; -} +} & Pick; const LabelList = (disabled: boolean, labelList: RouteModule.LabelList) => { const { formatMessage } = useIntl(); @@ -108,12 +109,13 @@ const LabelList = (disabled: boolean, labelList: RouteModule.LabelList) => { }; const LabelsDrawer: React.FC = ({ + title = "Label Manager", disabled, - labelsDataSource, + dataSource = [], onClose, onChange = () => {}, }) => { - const transformLabel = transformLableValueToKeyValue(labelsDataSource); + const transformLabel = transformLableValueToKeyValue(dataSource); const { formatMessage } = useIntl(); const [form] = Form.useForm(); @@ -126,7 +128,7 @@ const LabelsDrawer: React.FC = ({ return ( = ({ disabled, form, isEdit if (form.getFieldValue('labels')) { return ( setVisible(false)} @@ -46,6 +46,7 @@ const MetaView: React.FC = ({ disabled, form, isEdit }} )} + Date: Wed, 30 Dec 2020 17:55:49 +0800 Subject: [PATCH 02/11] feat: use labels form item --- web/src/locales/en-US/component.ts | 1 + web/src/locales/zh-CN/component.ts | 1 + web/src/pages/Plugin/components/Step1.tsx | 16 ---- .../Route/components/Step1/LabelsDrawer.tsx | 1 + .../pages/Route/components/Step1/MetaView.tsx | 85 ++++++++++++++----- web/src/pages/Route/typing.d.ts | 2 +- 6 files changed, 69 insertions(+), 37 deletions(-) delete mode 100644 web/src/pages/Plugin/components/Step1.tsx diff --git a/web/src/locales/en-US/component.ts b/web/src/locales/en-US/component.ts index 946a735ac5..36301a108f 100644 --- a/web/src/locales/en-US/component.ts +++ b/web/src/locales/en-US/component.ts @@ -28,6 +28,7 @@ export default { 'component.global.add': 'Add', 'component.global.save': 'Save', 'component.global.edit': 'Edit', + 'component.global.manage': 'Manage', 'component.global.update': 'Update', 'component.global.get': 'Get', 'component.global.edit.plugin': 'Edit plugin', diff --git a/web/src/locales/zh-CN/component.ts b/web/src/locales/zh-CN/component.ts index d0829c6231..1789770128 100644 --- a/web/src/locales/zh-CN/component.ts +++ b/web/src/locales/zh-CN/component.ts @@ -28,6 +28,7 @@ export default { 'component.global.add': '新建', 'component.global.save': '保存', 'component.global.edit': '编辑', + 'component.global.manage': '管理', 'component.global.update': '更新', 'component.global.get': '获取', 'component.global.edit.plugin': '编辑插件', diff --git a/web/src/pages/Plugin/components/Step1.tsx b/web/src/pages/Plugin/components/Step1.tsx deleted file mode 100644 index 2944f98194..0000000000 --- a/web/src/pages/Plugin/components/Step1.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/* - * 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. - */ diff --git a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx index f4c68fcfa1..3a8311be1a 100644 --- a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx +++ b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx @@ -134,6 +134,7 @@ const LabelsDrawer: React.FC = ({ visible closable onClose={onClose} + maskClosable={false} footer={
diff --git a/web/src/pages/Route/components/Step1/MetaView.tsx b/web/src/pages/Route/components/Step1/MetaView.tsx index 28aa7f5e7d..3e3a6aa255 100644 --- a/web/src/pages/Route/components/Step1/MetaView.tsx +++ b/web/src/pages/Route/components/Step1/MetaView.tsx @@ -23,30 +23,15 @@ import { PanelSection } from '@api7-dashboard/ui'; import { FORM_ITEM_WITHOUT_LABEL } from '@/pages/Route/constants'; import LabelsDrawer from './LabelsDrawer'; +const DEFAULT_VERSION_LABEL_PREFIX = 'version:'; + const MetaView: React.FC = ({ disabled, form, isEdit, onChange }) => { const { formatMessage } = useIntl(); const [visible, setVisible] = useState(false); + const [showVersionManager, setShowVersionManager] = useState(false); return ( - {visible && ( - - {() => { - if (form.getFieldValue('labels')) { - return ( - setVisible(false)} - /> - ); - } - return null; - }} - - )} - = ({ disabled, form, isEdit disabled={disabled} /> + + {/* TODO: Filter Normal Labels */} + {(() => { + const labels: string[] = (form.getFieldValue('labels') || []).filter((label: string) => + label.startsWith(DEFAULT_VERSION_LABEL_PREFIX), + ); + return labels.map((label) => ( + + {label} + + )); + })()} + + + + + + {showVersionManager && ( + + {() => { + const labels: string[] = (form.getFieldValue('labels') || []).filter((label: string) => + label.startsWith(DEFAULT_VERSION_LABEL_PREFIX), + ); + return ( + setShowVersionManager(false)} + /> + ); + }} + + )} + + Date: Wed, 30 Dec 2020 18:06:23 +0800 Subject: [PATCH 03/11] style: codes-format --- web/src/components/Plugin/PluginDetail.tsx | 4 +-- web/src/components/Plugin/PluginPage.tsx | 2 +- web/src/constants.ts | 2 +- web/src/pages/Consumer/Create.tsx | 26 ++++++++++--------- web/src/pages/Plugin/PluginMarket.tsx | 4 +-- web/src/pages/Plugin/typing.d.ts | 2 +- web/src/pages/Route/List.tsx | 6 ++--- .../Route/components/Step1/LabelsDrawer.tsx | 2 +- .../pages/Route/components/Step1/MetaView.tsx | 4 +-- 9 files changed, 27 insertions(+), 25 deletions(-) diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index 932dee6645..2ff336c730 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/web/src/components/Plugin/PluginDetail.tsx @@ -67,8 +67,8 @@ const PluginDetail: React.FC = ({ visible, readonly = false, initialData = {}, - onClose = () => { }, - onChange = () => { }, + onClose = () => {}, + onChange = () => {}, }) => { const { formatMessage } = useIntl(); const [form] = Form.useForm(); diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx index 272b00c29e..cde28976ac 100644 --- a/web/src/components/Plugin/PluginPage.tsx +++ b/web/src/components/Plugin/PluginPage.tsx @@ -48,7 +48,7 @@ const PluginPage: React.FC = ({ initialData = {}, schemaType = 'route', type = 'scoped', - onChange = () => { }, + onChange = () => {}, }) => { const [pluginList, setPluginList] = useState([]); const [name, setName] = useState(NEVER_EXIST_PLUGIN_FLAG); diff --git a/web/src/constants.ts b/web/src/constants.ts index 217cf40504..3df1c0cf23 100644 --- a/web/src/constants.ts +++ b/web/src/constants.ts @@ -32,4 +32,4 @@ export const codeMessage = { 504: '网关超时。', }; -export const DEFAULT_GLOBAL_RULE_ID = "1" +export const DEFAULT_GLOBAL_RULE_ID = '1'; diff --git a/web/src/pages/Consumer/Create.tsx b/web/src/pages/Consumer/Create.tsx index 2bfdfe4f74..217c335e31 100644 --- a/web/src/pages/Consumer/Create.tsx +++ b/web/src/pages/Consumer/Create.tsx @@ -29,7 +29,7 @@ import { fetchItem, create, update, fetchPlugList } from './service'; const Page: React.FC = (props) => { const [step, setStep] = useState(1); const [plugins, setPlugins] = useState({}); - const [pluginList, setPluginList] = useState([]) + const [pluginList, setPluginList] = useState([]); const [form1] = Form.useForm(); const { formatMessage } = useIntl(); @@ -52,12 +52,13 @@ const Page: React.FC = (props) => { (username ? update(username, data) : create(data)) .then(() => { notification.success({ - message: `${username - ? formatMessage({ id: 'component.global.edit' }) - : formatMessage({ id: 'component.global.create' }) - } ${formatMessage({ id: 'menu.consumer' })} ${formatMessage({ - id: 'component.status.success', - })}`, + message: `${ + username + ? formatMessage({ id: 'component.global.edit' }) + : formatMessage({ id: 'component.global.create' }) + } ${formatMessage({ id: 'menu.consumer' })} ${formatMessage({ + id: 'component.status.success', + })}`, }); history.push('/consumer/list'); }) @@ -76,7 +77,7 @@ const Page: React.FC = (props) => { if ( !Object.keys(plugins).filter( (name) => - (pluginList.find(item => item.name === name)!.type === 'auth') && + pluginList.find((item) => item.name === name)!.type === 'auth' && !plugins[name].disable, ).length ) { @@ -98,10 +99,11 @@ const Page: React.FC = (props) => { return ( <> diff --git a/web/src/pages/Plugin/PluginMarket.tsx b/web/src/pages/Plugin/PluginMarket.tsx index 3613e00a1f..44032ec341 100644 --- a/web/src/pages/Plugin/PluginMarket.tsx +++ b/web/src/pages/Plugin/PluginMarket.tsx @@ -48,9 +48,9 @@ const PluginMarket: React.FC = () => { ...pluginsData, }, }).then(() => { - // TODO: + // TODO: window.location.reload(); - }) + }); }} /> diff --git a/web/src/pages/Plugin/typing.d.ts b/web/src/pages/Plugin/typing.d.ts index f0f3ac9caf..6f9c31b9a6 100644 --- a/web/src/pages/Plugin/typing.d.ts +++ b/web/src/pages/Plugin/typing.d.ts @@ -25,5 +25,5 @@ declare namespace PluginModule { type GlobalRule = { id: string; plugins: Record; - } + }; } diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index 2885747b04..54f55c94c2 100644 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -179,7 +179,7 @@ const Page: React.FC = () => { > {formatMessage({ id: 'component.global.edit' })} - {!Boolean(record.status) && ( + {!record.status && ( )} - {Boolean(record.status) && ( + {record.status && ( { @@ -216,7 +216,7 @@ const Page: React.FC = () => { }); }} okButtonProps={{ - danger: true + danger: true, }} okText={formatMessage({ id: 'component.global.confirm' })} cancelText={formatMessage({ id: 'component.global.cancel' })} diff --git a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx index 3a8311be1a..81b4c951a0 100644 --- a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx +++ b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx @@ -109,7 +109,7 @@ const LabelList = (disabled: boolean, labelList: RouteModule.LabelList) => { }; const LabelsDrawer: React.FC = ({ - title = "Label Manager", + title = 'Label Manager', disabled, dataSource = [], onClose, diff --git a/web/src/pages/Route/components/Step1/MetaView.tsx b/web/src/pages/Route/components/Step1/MetaView.tsx index 3e3a6aa255..aaa4393bf3 100644 --- a/web/src/pages/Route/components/Step1/MetaView.tsx +++ b/web/src/pages/Route/components/Step1/MetaView.tsx @@ -123,8 +123,8 @@ const MetaView: React.FC = ({ disabled, form, isEdit {() => { const labels: string[] = (form.getFieldValue('labels') || []).filter((label: string) => - label.startsWith(DEFAULT_VERSION_LABEL_PREFIX), - ); + label.startsWith(DEFAULT_VERSION_LABEL_PREFIX), + ); return ( Date: Wed, 30 Dec 2020 20:42:38 +0800 Subject: [PATCH 04/11] feat: adjust buttons --- web/src/pages/Route/List.tsx | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index 54f55c94c2..ccbb1132fd 100644 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -172,25 +172,17 @@ const Page: React.FC = () => { render: (_, record) => ( <> - - {!record.status && ( + {!record.status ? ( - )} - {record.status && ( + ) : null} + {record.status ? ( { @@ -203,7 +195,14 @@ const Page: React.FC = () => { {formatMessage({ id: 'page.route.offline' })} - )} + ) : null} + { From ca5d55d3fc4ec7545599f00fef92468a756ed06b Mon Sep 17 00:00:00 2001 From: juzhiyuan Date: Wed, 30 Dec 2020 20:52:08 +0800 Subject: [PATCH 05/11] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Route/List.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index ccbb1132fd..160cff3d25 100644 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -199,7 +199,6 @@ const Page: React.FC = () => { From 04abe54914116cc78b3b7f042db6e600fc7c9deb Mon Sep 17 00:00:00 2001 From: juzhiyuan Date: Wed, 30 Dec 2020 20:52:59 +0800 Subject: [PATCH 06/11] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=AD=A6?= =?UTF-8?q?=E5=91=8A=E6=A0=87=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Route/List.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index 160cff3d25..4d53eedb16 100644 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -188,6 +188,9 @@ const Page: React.FC = () => { onConfirm={() => { handlePublishOffline(record.id, RouteStatus.Offline); }} + okButtonProps={{ + danger: true + }} okText={formatMessage({ id: 'component.global.confirm' })} cancelText={formatMessage({ id: 'component.global.cancel' })} > From 753a69b299d81c5c570943bd5e74ccaa9408801d Mon Sep 17 00:00:00 2001 From: juzhiyuan Date: Thu, 31 Dec 2020 00:03:06 +0800 Subject: [PATCH 07/11] feat: added version --- web/src/pages/Route/Create.tsx | 4 +- web/src/pages/Route/List.tsx | 7 +- .../Route/components/Step1/LabelsDrawer.tsx | 7 +- .../pages/Route/components/Step1/MetaView.tsx | 159 ++++++++---------- web/src/pages/Route/transform.ts | 24 ++- web/src/pages/Route/typing.d.ts | 8 +- 6 files changed, 104 insertions(+), 105 deletions(-) diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx index a3d5f5307d..ab1257f130 100644 --- a/web/src/pages/Route/Create.tsx +++ b/web/src/pages/Route/Create.tsx @@ -112,8 +112,8 @@ const Page: React.FC = (props) => { if (action === 'advancedMatchingRulesChange') { setAdvancedMatchingRules(data); } - if (action === 'labelsChange') { - form1.setFieldsValue({ ...form1.getFieldsValue(), labels: data }); + if (action === 'custom_normal_labels') { + form1.setFieldsValue({ custom_normal_labels: data }); } }} isEdit={props.route.path.indexOf('edit') > 0} diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index 4d53eedb16..b5271d6a9d 100644 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -189,7 +189,7 @@ const Page: React.FC = () => { handlePublishOffline(record.id, RouteStatus.Offline); }} okButtonProps={{ - danger: true + danger: true, }} okText={formatMessage({ id: 'component.global.confirm' })} cancelText={formatMessage({ id: 'component.global.cancel' })} @@ -199,10 +199,7 @@ const Page: React.FC = () => { ) : null} - { const LabelsDrawer: React.FC = ({ title = 'Label Manager', - disabled, + actionName = '', + disabled = false, dataSource = [], onClose, onChange = () => {}, @@ -155,7 +158,7 @@ const LabelsDrawer: React.FC = ({ } onChange({ - action: 'labelsChange', + action: actionName, data, }); onClose(); diff --git a/web/src/pages/Route/components/Step1/MetaView.tsx b/web/src/pages/Route/components/Step1/MetaView.tsx index aaa4393bf3..9ebb5d8bb9 100644 --- a/web/src/pages/Route/components/Step1/MetaView.tsx +++ b/web/src/pages/Route/components/Step1/MetaView.tsx @@ -14,21 +14,88 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Form from 'antd/es/form'; -import { Input, Switch, Select, Button, Tag } from 'antd'; +import { Input, Switch, Select, Button, Tag, AutoComplete } from 'antd'; import { useIntl } from 'umi'; import { PanelSection } from '@api7-dashboard/ui'; import { FORM_ITEM_WITHOUT_LABEL } from '@/pages/Route/constants'; import LabelsDrawer from './LabelsDrawer'; - -const DEFAULT_VERSION_LABEL_PREFIX = 'version:'; +import { fetchLabelList } from '../../service'; const MetaView: React.FC = ({ disabled, form, isEdit, onChange }) => { const { formatMessage } = useIntl(); const [visible, setVisible] = useState(false); - const [showVersionManager, setShowVersionManager] = useState(false); + const [labelList, setLabelList] = useState({}); + + useEffect(() => { + // TODO: use a better state name + fetchLabelList().then(setLabelList); + }, []); + + const NormalLabelComponent = () => { + const field = 'custom_normal_labels'; + const title = 'Label Manager'; + + return ( + + + { - const { value, closable, onClose } = props; - return ( - - {value} - - ); - }} - /> - - - - - {visible && ( - - {() => { - const labels = (form.getFieldValue('labels') || []).filter( - (label: string) => !label.startsWith(DEFAULT_VERSION_LABEL_PREFIX), - ); - return ( - setVisible(false)} - /> - ); - }} - - )} - - - - - - - - {showVersionManager && ( - - {() => { - const labels: string[] = (form.getFieldValue('labels') || []).filter((label: string) => - label.startsWith(DEFAULT_VERSION_LABEL_PREFIX), - ); - return ( - setShowVersionManager(false)} - /> - ); - }} - - )} + + { }); }; +// Transform Route data then sent to API export const transformStepData = ({ form1Data, form2Data, advancedMatchingRules, step3Data, }: RouteModule.RequestData) => { + const { custom_normal_labels, custom_version_selected_label, service_id = '' } = form1Data; + let redirect: RouteModule.Redirect = {}; const step3DataCloned = cloneDeep(step3Data); if (form1Data.redirectOption === 'disabled') { @@ -45,13 +48,13 @@ export const transformStepData = ({ } const labels = {}; - transformLableValueToKeyValue(form1Data.labels).forEach((item) => { - labels[item.labelKey] = item.labelValue; + transformLableValueToKeyValue(custom_normal_labels).forEach(({ labelKey, labelValue }) => { + labels[labelKey] = labelValue; }); - const { service_id = '' } = form1Data; + labels['API_VERSION'] = custom_version_selected_label; const data: Partial = { - ...omit(form1Data, 'labels'), + ...form1Data, labels, ...step3DataCloned, vars: advancedMatchingRules.map((rule) => { @@ -92,6 +95,8 @@ export const transformStepData = ({ // Remove some of the frontend custom variables return omit(data, [ + 'custom_version_selected_label', + 'custom_normal_labels', 'advancedMatchingRules', 'upstreamHostList', 'upstreamPath', @@ -123,6 +128,7 @@ export const transformStepData = ({ service_id.length !== 0 ? 'service_id' : '', form1Data.hosts.filter(Boolean).length !== 0 ? 'hosts' : '', data.remote_addrs?.filter(Boolean).length !== 0 ? 'remote_addrs' : '', + form1Data.custom_version_selected_label.length !== 0 ? 'labels' : '', ]); }; @@ -154,11 +160,12 @@ export const transformUpstreamNodes = ( return data; }; +// Transform response's data export const transformRouteData = (data: RouteModule.Body) => { const { name, desc, - labels, + labels = {}, methods = [], uris, uri, @@ -173,6 +180,7 @@ export const transformRouteData = (data: RouteModule.Body) => { priority = 0, enable_websocket, } = data; + const form1Data: Partial = { name, desc, @@ -180,7 +188,11 @@ export const transformRouteData = (data: RouteModule.Body) => { hosts: hosts || (host && [host]) || [''], uris: uris || (uri && [uri]) || [], remote_addrs: remote_addrs || [''], - labels: Object.keys(labels || []).map((item) => `${item}:${labels[item]}`), + // NOTE: API_VERSION is a system label + custom_version_selected_label: labels['API_VERSION'] || '', + custom_normal_labels: Object.keys(labels) + .filter((item) => item !== 'API_VERSION') + .map((key) => `${key}:${labels[key]}`), // @ts-ignore methods: methods.length ? methods : ['ALL'], priority, diff --git a/web/src/pages/Route/typing.d.ts b/web/src/pages/Route/typing.d.ts index 8e6e2992f6..d6c5a5489b 100644 --- a/web/src/pages/Route/typing.d.ts +++ b/web/src/pages/Route/typing.d.ts @@ -134,16 +134,14 @@ declare namespace RouteModule { advancedMatchingRules: MatchingRule[]; disabled?: boolean; isEdit?: boolean; - onChange?(data: { - action: 'redirectOptionChange' | 'advancedMatchingRulesChange' | 'labelsChange'; - data: T; - }): void; + onChange?(data: { action: string; data: T }): void; }; type Form1Data = { name: string; desc: string; - labels: string[]; + custom_version_selected_label: string; + custom_normal_labels: string[]; priority: number; websocket: boolean; hosts: string[]; From 9b39d765714ca9213d63776e56438f32f8e93cfe Mon Sep 17 00:00:00 2001 From: juzhiyuan Date: Thu, 31 Dec 2020 00:20:23 +0800 Subject: [PATCH 08/11] feat: added version --- web/src/pages/Route/List.tsx | 71 ++++++++++++++----- .../Route/components/Step1/LabelsDrawer.tsx | 4 +- web/src/pages/Route/service.ts | 4 +- 3 files changed, 59 insertions(+), 20 deletions(-) diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index b5271d6a9d..bfc03e5950 100644 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -106,11 +106,13 @@ const Page: React.FC = () => { title: formatMessage({ id: 'component.global.labels' }), dataIndex: 'labels', render: (_, record) => { - return Object.keys(record.labels || {}).map((item) => ( - - {item}:{record.labels[item]} - - )); + return Object.keys(record.labels || {}) + .filter((item) => item !== 'API_VERSION') + .map((item) => ( + + {item}:{record.labels[item]} + + )); }, renderFormItem: (_, { type }) => { if (type === 'form') { @@ -130,18 +132,53 @@ const Page: React.FC = () => { ); }} > - {Object.keys(labelList).map((key) => { - return ( - - {(labelList[key] || []).map((value: string) => ( - - ))} - - ); - })} + {Object.keys(labelList) + .filter((item) => item !== 'API_VERSION') + .map((key) => { + return ( + + {(labelList[key] || []).map((value: string) => ( + + ))} + + ); + })} + + ); + }, + }, + { + title: 'Version', + dataIndex: 'API_VERSION', + render: (_, record) => { + return Object.keys(record.labels || {}) + .filter((item) => item === 'API_VERSION') + .map((item) => record.labels[item]); + }, + renderFormItem: (_, { type }) => { + if (type === 'form') { + return null; + } + + return ( + ); }, diff --git a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx index 55f84e12ef..26975799ef 100644 --- a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx +++ b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx @@ -34,7 +34,9 @@ type Props = { const LabelList = (disabled: boolean, labelList: RouteModule.LabelList) => { const { formatMessage } = useIntl(); - const keyOptions = Object.keys(labelList || {}).map((item) => ({ value: item })); + const keyOptions = Object.keys(labelList || {}) + .filter((item) => item !== 'API_VERSION') + .map((item) => ({ value: item })); return ( {(fields, { add, remove }) => { diff --git a/web/src/pages/Route/service.ts b/web/src/pages/Route/service.ts index bc1a4691f2..f67283f406 100644 --- a/web/src/pages/Route/service.ts +++ b/web/src/pages/Route/service.ts @@ -40,12 +40,12 @@ export const fetchItem = (rid: number) => request(`/routes/${rid}`).then((data) => transformRouteData(data.data)); export const fetchList = ({ current = 1, pageSize = 10, ...res }) => { - const { labels } = res; + const { labels, API_VERSION } = res; return request>>('/routes', { params: { name: res.name, uri: res.uri, - label: (labels || []).join(','), + label: (labels || []).concat(API_VERSION).join(','), page: current, page_size: pageSize, }, From ecb0c66d02615a5c7dccc83b73ba14eec06baf81 Mon Sep 17 00:00:00 2001 From: juzhiyuan Date: Thu, 31 Dec 2020 00:29:53 +0800 Subject: [PATCH 09/11] fix: redirect --- web/src/pages/Route/transform.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts index f2f22aa284..1dbcac4812 100644 --- a/web/src/pages/Route/transform.ts +++ b/web/src/pages/Route/transform.ts @@ -51,7 +51,9 @@ export const transformStepData = ({ transformLableValueToKeyValue(custom_normal_labels).forEach(({ labelKey, labelValue }) => { labels[labelKey] = labelValue; }); - labels['API_VERSION'] = custom_version_selected_label; + if (custom_version_selected_label) { + labels['API_VERSION'] = custom_version_selected_label; + } const data: Partial = { ...form1Data, @@ -84,7 +86,7 @@ export const transformStepData = ({ } if (redirect.http_to_https) { - if (Object.keys(data.plugins!).length === 0) { + if (Object.keys(data.plugins || {}).length === 0) { data.plugins = {}; } data.plugins!.redirect = redirect; @@ -105,8 +107,8 @@ export const transformStepData = ({ 'ret_code', 'redirectOption', service_id.length === 0 ? 'service_id' : '', - !Object.keys(step3DataCloned.plugins || {}).length ? 'plugins' : '', - !Object.keys(step3DataCloned.script || {}).length ? 'script' : '', + !Object.keys(data.plugins || {}).length ? 'plugins' : '', + !Object.keys(data.script || {}).length ? 'script' : '', form1Data.hosts.filter(Boolean).length === 0 ? 'hosts' : '', form1Data.redirectOption === 'disabled' ? 'redirect' : '', data.remote_addrs?.filter(Boolean).length === 0 ? 'remote_addrs' : '', From 3fc6a934c053ca4564c32d729a32583cc1826372 Mon Sep 17 00:00:00 2001 From: juzhiyuan Date: Thu, 31 Dec 2020 00:42:29 +0800 Subject: [PATCH 10/11] style: format codes --- web/src/locales/en-US/component.ts | 1 + web/src/locales/zh-CN/component.ts | 1 + web/src/pages/Route/List.tsx | 2 +- .../pages/Route/components/Step1/LabelsDrawer.tsx | 1 - web/src/pages/Route/components/Step1/MetaView.tsx | 5 ++++- web/src/pages/Route/transform.ts | 12 ++++++------ web/src/pages/Route/typing.d.ts | 2 +- 7 files changed, 14 insertions(+), 10 deletions(-) diff --git a/web/src/locales/en-US/component.ts b/web/src/locales/en-US/component.ts index 36301a108f..fa58634786 100644 --- a/web/src/locales/en-US/component.ts +++ b/web/src/locales/en-US/component.ts @@ -36,6 +36,7 @@ export default { 'component.global.list': 'List', 'component.global.description': 'Description', 'component.global.labels': 'Labels', + 'component.global.version': 'Version', 'component.global.operation': 'Operation', 'component.status.success': 'Successfully', 'component.status.fail': 'Failed', diff --git a/web/src/locales/zh-CN/component.ts b/web/src/locales/zh-CN/component.ts index 1789770128..210dd864d3 100644 --- a/web/src/locales/zh-CN/component.ts +++ b/web/src/locales/zh-CN/component.ts @@ -36,6 +36,7 @@ export default { 'component.global.list': '列表', 'component.global.description': '描述', 'component.global.labels': '标签', + 'component.global.version': '版本', 'component.global.operation': '操作', 'component.status.success': '成功', 'component.status.fail': '失败', diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx index bfc03e5950..88850a4536 100644 --- a/web/src/pages/Route/List.tsx +++ b/web/src/pages/Route/List.tsx @@ -151,7 +151,7 @@ const Page: React.FC = () => { }, }, { - title: 'Version', + title: formatMessage({ id: 'component.global.version' }), dataIndex: 'API_VERSION', render: (_, record) => { return Object.keys(record.labels || {}) diff --git a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx index 26975799ef..720a437fc8 100644 --- a/web/src/pages/Route/components/Step1/LabelsDrawer.tsx +++ b/web/src/pages/Route/components/Step1/LabelsDrawer.tsx @@ -24,7 +24,6 @@ import { fetchLabelList } from '../../service'; type Props = { title?: string; - labelPrefix?: string; actionName: string; dataSource: string[]; disabled: boolean; diff --git a/web/src/pages/Route/components/Step1/MetaView.tsx b/web/src/pages/Route/components/Step1/MetaView.tsx index 9ebb5d8bb9..6342e620b3 100644 --- a/web/src/pages/Route/components/Step1/MetaView.tsx +++ b/web/src/pages/Route/components/Step1/MetaView.tsx @@ -87,7 +87,10 @@ const MetaView: React.FC = ({ disabled, form, isEdit const VersionLabelComponent = () => { return ( - + ({ value: item }))} disabled={disabled} diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts index 1dbcac4812..e9d52db1d8 100644 --- a/web/src/pages/Route/transform.ts +++ b/web/src/pages/Route/transform.ts @@ -32,7 +32,7 @@ export const transformStepData = ({ advancedMatchingRules, step3Data, }: RouteModule.RequestData) => { - const { custom_normal_labels, custom_version_selected_label, service_id = '' } = form1Data; + const { custom_normal_labels, custom_version_label, service_id = '' } = form1Data; let redirect: RouteModule.Redirect = {}; const step3DataCloned = cloneDeep(step3Data); @@ -51,8 +51,8 @@ export const transformStepData = ({ transformLableValueToKeyValue(custom_normal_labels).forEach(({ labelKey, labelValue }) => { labels[labelKey] = labelValue; }); - if (custom_version_selected_label) { - labels['API_VERSION'] = custom_version_selected_label; + if (custom_version_label) { + labels['API_VERSION'] = custom_version_label; } const data: Partial = { @@ -97,7 +97,7 @@ export const transformStepData = ({ // Remove some of the frontend custom variables return omit(data, [ - 'custom_version_selected_label', + 'custom_version_label', 'custom_normal_labels', 'advancedMatchingRules', 'upstreamHostList', @@ -130,7 +130,7 @@ export const transformStepData = ({ service_id.length !== 0 ? 'service_id' : '', form1Data.hosts.filter(Boolean).length !== 0 ? 'hosts' : '', data.remote_addrs?.filter(Boolean).length !== 0 ? 'remote_addrs' : '', - form1Data.custom_version_selected_label.length !== 0 ? 'labels' : '', + form1Data.custom_version_label.length !== 0 ? 'labels' : '', ]); }; @@ -191,7 +191,7 @@ export const transformRouteData = (data: RouteModule.Body) => { uris: uris || (uri && [uri]) || [], remote_addrs: remote_addrs || [''], // NOTE: API_VERSION is a system label - custom_version_selected_label: labels['API_VERSION'] || '', + custom_version_label: labels['API_VERSION'] || '', custom_normal_labels: Object.keys(labels) .filter((item) => item !== 'API_VERSION') .map((key) => `${key}:${labels[key]}`), diff --git a/web/src/pages/Route/typing.d.ts b/web/src/pages/Route/typing.d.ts index d6c5a5489b..60afe5f87b 100644 --- a/web/src/pages/Route/typing.d.ts +++ b/web/src/pages/Route/typing.d.ts @@ -140,7 +140,7 @@ declare namespace RouteModule { type Form1Data = { name: string; desc: string; - custom_version_selected_label: string; + custom_version_label: string; custom_normal_labels: string[]; priority: number; websocket: boolean; From afd43c1780d0d3fe4c312418a0c4117ba0057856 Mon Sep 17 00:00:00 2001 From: juzhiyuan Date: Thu, 31 Dec 2020 00:51:17 +0800 Subject: [PATCH 11/11] fix: style --- web/src/pages/Route/components/Step1/MetaView.tsx | 2 +- web/src/pages/Route/transform.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/web/src/pages/Route/components/Step1/MetaView.tsx b/web/src/pages/Route/components/Step1/MetaView.tsx index 6342e620b3..09f64e550e 100644 --- a/web/src/pages/Route/components/Step1/MetaView.tsx +++ b/web/src/pages/Route/components/Step1/MetaView.tsx @@ -92,7 +92,7 @@ const MetaView: React.FC = ({ disabled, form, isEdit name="custom_version_label" > ({ value: item }))} + options={(labelList.API_VERSION || []).map((item) => ({ value: item }))} disabled={disabled} /> diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts index e9d52db1d8..5b10a8cdb7 100644 --- a/web/src/pages/Route/transform.ts +++ b/web/src/pages/Route/transform.ts @@ -47,12 +47,12 @@ export const transformStepData = ({ }; } - const labels = {}; + const labels: Record = {}; transformLableValueToKeyValue(custom_normal_labels).forEach(({ labelKey, labelValue }) => { labels[labelKey] = labelValue; }); if (custom_version_label) { - labels['API_VERSION'] = custom_version_label; + labels.API_VERSION = custom_version_label; } const data: Partial = { @@ -191,7 +191,7 @@ export const transformRouteData = (data: RouteModule.Body) => { uris: uris || (uri && [uri]) || [], remote_addrs: remote_addrs || [''], // NOTE: API_VERSION is a system label - custom_version_label: labels['API_VERSION'] || '', + custom_version_label: labels.API_VERSION || '', custom_normal_labels: Object.keys(labels) .filter((item) => item !== 'API_VERSION') .map((key) => `${key}:${labels[key]}`),