feat(FE): version manager

web/src/components/Plugin/PluginDetail.tsx

@@ -67,8 +67,8 @@ const PluginDetail: React.FC<Props> = ({
   visible,
   readonly = false,
   initialData = {},
-  onClose = () => { },
-  onChange = () => { },
+  onClose = () => {},
+  onChange = () => {},
 }) => {
   const { formatMessage } = useIntl();
   const [form] = Form.useForm();

web/src/components/Plugin/PluginPage.tsx

@@ -48,7 +48,7 @@ const PluginPage: React.FC<Props> = ({
   initialData = {},
   schemaType = 'route',
   type = 'scoped',
-  onChange = () => { },
+  onChange = () => {},
 }) => {
   const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
   const [name, setName] = useState<string>(NEVER_EXIST_PLUGIN_FLAG);

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';

web/src/hooks/useForceIntl.ts

@@ -29,7 +29,7 @@ const useForceIntl = () => {
     }
 
     const { locale } = getIntl();
-    if (locale === 'zh-cn') {
+    if (locale === 'zh-CN') {
       return;
     }
 

web/src/locales/en-US/component.ts

@@ -28,13 +28,15 @@ 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',
   'component.global.loading': 'Loading',
   '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',

web/src/locales/zh-CN/component.ts

@@ -28,13 +28,15 @@ export default {
   'component.global.add': '新建',
   'component.global.save': '保存',
   'component.global.edit': '编辑',
+  'component.global.manage': '管理',
   'component.global.update': '更新',
   'component.global.get': '获取',
   'component.global.edit.plugin': '编辑插件',
   'component.global.loading': '加载中',
   'component.global.list': '列表',
   'component.global.description': '描述',
   'component.global.labels': '标签',
+  'component.global.version': '版本',
   'component.global.operation': '操作',
   'component.status.success': '成功',
   'component.status.fail': '失败',

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<PluginComponent.Data>({});
-  const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([])
+  const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
   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 (
     <>
       <PageContainer
-        title={`${(props as any).match.params.id
-          ? formatMessage({ id: 'component.global.edit' })
-          : formatMessage({ id: 'component.global.create' })
-          } ${formatMessage({ id: 'menu.consumer' })}`}
+        title={`${
+          (props as any).match.params.id
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
+        } ${formatMessage({ id: 'menu.consumer' })}`}
       >
         <Card bordered={false}>
           <Steps current={step - 1} style={{ marginBottom: 30 }}>

web/src/pages/Plugin/PluginMarket.tsx

@@ -48,9 +48,9 @@ const PluginMarket: React.FC = () => {
                 ...pluginsData,
               },
             }).then(() => {
-              // TODO: 
+              // TODO:
               window.location.reload();
-            })
+            });
           }}
         />
       </Card>

web/src/pages/Plugin/typing.d.ts

@@ -25,5 +25,5 @@ declare namespace PluginModule {
   type GlobalRule = {
     id: string;
     plugins: Record<string, object>;
-  }
+  };
 }

web/src/pages/Route/Create.tsx

@@ -112,8 +112,8 @@ const Page: React.FC<Props> = (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}

web/src/pages/Route/List.tsx

@@ -103,11 +103,13 @@ const Page: React.FC = () => {
       title: formatMessage({ id: 'component.global.labels' }),
       dataIndex: 'labels',
       render: (_, record) => {
-        return Object.keys(record.labels || {}).map((item) => (
-          <Tag key={Math.random().toString(36).slice(2)}>
-            {item}:{record.labels[item]}
-          </Tag>
-        ));
+        return Object.keys(record.labels || {})
+          .filter((item) => item !== 'API_VERSION')
+          .map((item) => (
+            <Tag key={Math.random().toString(36).slice(2)}>
+              {item}:{record.labels[item]}
+            </Tag>
+          ));
       },
       renderFormItem: (_, { type }) => {
         if (type === 'form') {
@@ -127,18 +129,53 @@ const Page: React.FC = () => {
               );
             }}
           >
-            {Object.keys(labelList).map((key) => {
-              return (
-                <OptGroup label={key} key={Math.random().toString(36).slice(2)}>
-                  {(labelList[key] || []).map((value: string) => (
-                    <Option key={Math.random().toString(36).slice(2)} value={`${key}:${value}`}>
-                      {' '}
-                      {value}{' '}
-                    </Option>
-                  ))}
-                </OptGroup>
-              );
-            })}
+            {Object.keys(labelList)
+              .filter((item) => item !== 'API_VERSION')
+              .map((key) => {
+                return (
+                  <OptGroup label={key} key={Math.random().toString(36).slice(2)}>
+                    {(labelList[key] || []).map((value: string) => (
+                      <Option key={Math.random().toString(36).slice(2)} value={`${key}:${value}`}>
+                        {' '}
+                        {value}{' '}
+                      </Option>
+                    ))}
+                  </OptGroup>
+                );
+              })}
+          </Select>
+        );
+      },
+    },
+    {
+      title: formatMessage({ id: 'component.global.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 (
+          <Select style={{ width: '100%' }}>
+            {Object.keys(labelList)
+              .filter((item) => item === 'API_VERSION')
+              .map((key) => {
+                return (
+                  <OptGroup label={key} key={Math.random().toString(36).slice(2)}>
+                    {(labelList[key] || []).map((value: string) => (
+                      <Option key={Math.random().toString(36).slice(2)} value={`${key}:${value}`}>
+                        {' '}
+                        {value}{' '}
+                      </Option>
+                    ))}
+                  </OptGroup>
+                );
+              })}
           </Select>
         );
       },
@@ -169,36 +206,36 @@ const Page: React.FC = () => {
       render: (_, record) => (
         <>
           <Space align="baseline">
-            <Button
-              type="primary"
-              onClick={() => history.push(`/routes/${record.id}/edit`)}
-              style={{ marginRight: 10 }}
-            >
+            {!record.status ? (
+              <Button
+                type="primary"
+                onClick={() => {
+                  handlePublishOffline(record.id, RouteStatus.Publish);
+                }}
+              >
+                {formatMessage({ id: 'page.route.publish' })}
+              </Button>
+            ) : null}
+            {record.status ? (
+              <Popconfirm
+                title={formatMessage({ id: 'page.route.popconfirm.title.offline' })}
+                onConfirm={() => {
+                  handlePublishOffline(record.id, RouteStatus.Offline);
+                }}
+                okButtonProps={{
+                  danger: true,
+                }}
+                okText={formatMessage({ id: 'component.global.confirm' })}
+                cancelText={formatMessage({ id: 'component.global.cancel' })}
+              >
+                <Button type="primary" danger disabled={Boolean(!record.status)}>
+                  {formatMessage({ id: 'page.route.offline' })}
+                </Button>
+              </Popconfirm>
+            ) : null}
+            <Button type="primary" onClick={() => history.push(`/routes/${record.id}/edit`)}>
               {formatMessage({ id: 'component.global.edit' })}
             </Button>
-            <Button
-              type="primary"
-              onClick={() => {
-                handlePublishOffline(record.id, RouteStatus.Publish);
-              }}
-              style={{ marginRight: 10 }}
-              disabled={Boolean(record.status)}
-            >
-              {formatMessage({ id: 'page.route.publish' })}
-            </Button>
-            <Popconfirm
-              title={formatMessage({ id: 'page.route.popconfirm.title.offline' })}
-              onConfirm={() => {
-                handlePublishOffline(record.id, RouteStatus.Offline);
-              }}
-              okText={formatMessage({ id: 'component.global.confirm' })}
-              cancelText={formatMessage({ id: 'component.global.cancel' })}
-              disabled={Boolean(!record.status)}
-            >
-              <Button type="primary" danger disabled={Boolean(!record.status)}>
-                {formatMessage({ id: 'page.route.offline' })}
-              </Button>
-            </Popconfirm>
             <Popconfirm
               title={formatMessage({ id: 'component.global.popconfirm.title.delete' })}
               onConfirm={() => {
@@ -210,6 +247,9 @@ const Page: React.FC = () => {
                   );
                 });
               }}
+              okButtonProps={{
+                danger: true,
+              }}
               okText={formatMessage({ id: 'component.global.confirm' })}
               cancelText={formatMessage({ id: 'component.global.cancel' })}
             >

web/src/pages/Route/components/Step1/LabelsDrawer.tsx

@@ -22,16 +22,20 @@ import { useIntl } from 'umi';
 import { transformLableValueToKeyValue } from '../../transform';
 import { fetchLabelList } from '../../service';
 
-interface Props extends Pick<RouteModule.Step1PassProps, 'onChange'> {
-  labelsDataSource: string[];
+type Props = {
+  title?: string;
+  actionName: string;
+  dataSource: string[];
   disabled: boolean;
   onClose(): void;
-}
+} & Pick<RouteModule.Step1PassProps, 'onChange'>;
 
 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 (
     <Form.List name="labels">
       {(fields, { add, remove }) => {
@@ -108,12 +112,14 @@ const LabelList = (disabled: boolean, labelList: RouteModule.LabelList) => {
 };
 
 const LabelsDrawer: React.FC<Props> = ({
-  disabled,
-  labelsDataSource,
+  title = 'Label Manager',
+  actionName = '',
+  disabled = false,
+  dataSource = [],
   onClose,
   onChange = () => {},
 }) => {
-  const transformLabel = transformLableValueToKeyValue(labelsDataSource);
+  const transformLabel = transformLableValueToKeyValue(dataSource);
 
   const { formatMessage } = useIntl();
   const [form] = Form.useForm();
@@ -126,12 +132,13 @@ const LabelsDrawer: React.FC<Props> = ({
 
   return (
     <Drawer
-      title="Edit labels"
+      title={title}
       placement="right"
       width={512}
       visible
       closable
       onClose={onClose}
+      maskClosable={false}
       footer={
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <Button onClick={onClose}>{formatMessage({ id: 'component.global.cancel' })}</Button>
@@ -152,7 +159,7 @@ const LabelsDrawer: React.FC<Props> = ({
                 }
 
                 onChange({
-                  action: 'labelsChange',
+                  action: actionName,
                   data,
                 });
                 onClose();