feat(FE): version manager

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

@@ -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 = () => {
                 </Button>
               </Popconfirm>
             ) : null}
-            <Button
-              type="primary"
-              onClick={() => history.push(`/routes/${record.id}/edit`)}
-            >
+            <Button type="primary" onClick={() => history.push(`/routes/${record.id}/edit`)}>
               {formatMessage({ id: 'component.global.edit' })}
             </Button>
             <Popconfirm

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

@@ -24,6 +24,8 @@ import { fetchLabelList } from '../../service';
 
 type Props = {
   title?: string;
+  labelPrefix?: string;
+  actionName: string;
   dataSource: string[];
   disabled: boolean;
   onClose(): void;
@@ -110,7 +112,8 @@ const LabelList = (disabled: boolean, labelList: RouteModule.LabelList) => {
 
 const LabelsDrawer: React.FC<Props> = ({
   title = 'Label Manager',
-  disabled,
+  actionName = '',
+  disabled = false,
   dataSource = [],
   onClose,
   onChange = () => {},
@@ -155,7 +158,7 @@ const LabelsDrawer: React.FC<Props> = ({
                 }
 
                 onChange({
-                  action: 'labelsChange',
+                  action: actionName,
                   data,
                 });
                 onClose();

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<RouteModule.Step1PassProps> = ({ disabled, form, isEdit, onChange }) => {
   const { formatMessage } = useIntl();
   const [visible, setVisible] = useState(false);
-  const [showVersionManager, setShowVersionManager] = useState(false);
+  const [labelList, setLabelList] = useState<RouteModule.LabelList>({});
+
+  useEffect(() => {
+    // TODO: use a better state name
+    fetchLabelList().then(setLabelList);
+  }, []);
+
+  const NormalLabelComponent = () => {
+    const field = 'custom_normal_labels';
+    const title = 'Label Manager';
+
+    return (
+      <React.Fragment>
+        <Form.Item label={formatMessage({ id: 'component.global.labels' })} name={field}>
+          <Select
+            mode="tags"
+            style={{ width: '100%' }}
+            placeholder="--"
+            disabled={disabled}
+            open={false}
+            bordered={false}
+            tagRender={(props) => {
+              const { value, closable, onClose } = props;
+              return (
+                <Tag closable={closable && !disabled} onClose={onClose} style={{ marginRight: 3 }}>
+                  {value}
+                </Tag>
+              );
+            }}
+          />
+        </Form.Item>
+        <Form.Item {...FORM_ITEM_WITHOUT_LABEL}>
+          <Button type="dashed" disabled={disabled} onClick={() => setVisible(true)}>
+            {formatMessage({ id: 'component.global.manage' })}
+          </Button>
+        </Form.Item>
+        {visible && (
+          <Form.Item shouldUpdate noStyle>
+            {() => {
+              const labels = form.getFieldValue(field) || [];
+              return (
+                <LabelsDrawer
+                  title={title}
+                  actionName={field}
+                  dataSource={labels}
+                  disabled={disabled || false}
+                  onChange={onChange}
+                  onClose={() => setVisible(false)}
+                />
+              );
+            }}
+          </Form.Item>
+        )}
+      </React.Fragment>
+    );
+  };
+
+  const VersionLabelComponent = () => {
+    return (
+      <React.Fragment>
+        <Form.Item label="版本" name="custom_version_selected_label">
+          <AutoComplete
+            options={(labelList['API_VERSION'] || []).map((item) => ({ value: item }))}
+            disabled={disabled}
+          />
+        </Form.Item>
+      </React.Fragment>
+    );
+  };
 
   return (
     <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.nameDescription' })}>
@@ -57,86 +124,8 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({ disabled, form, isEdit
         />
       </Form.Item>
 
-      {/* TODO: Filter Normal Labels */}
-      <Form.Item label={formatMessage({ id: 'component.global.labels' })} name="labels">
-        <Select
-          mode="tags"
-          style={{ width: '100%' }}
-          placeholder="--"
-          disabled={disabled}
-          open={false}
-          bordered={false}
-          tagRender={(props) => {
-            const { value, closable, onClose } = props;
-            return (
-              <Tag closable={closable && !disabled} onClose={onClose} style={{ marginRight: 3 }}>
-                {value}
-              </Tag>
-            );
-          }}
-        />
-      </Form.Item>
-      <Form.Item {...FORM_ITEM_WITHOUT_LABEL}>
-        <Button type="dashed" disabled={disabled} onClick={() => setVisible(true)}>
-          {formatMessage({ id: 'component.global.manage' })}
-        </Button>
-      </Form.Item>
-      {visible && (
-        <Form.Item shouldUpdate noStyle>
-          {() => {
-            const labels = (form.getFieldValue('labels') || []).filter(
-              (label: string) => !label.startsWith(DEFAULT_VERSION_LABEL_PREFIX),
-            );
-            return (
-              <LabelsDrawer
-                title="Label Manager"
-                dataSource={labels}
-                disabled={disabled || false}
-                onChange={onChange}
-                onClose={() => setVisible(false)}
-              />
-            );
-          }}
-        </Form.Item>
-      )}
-
-      <Form.Item label="版本" name="labels">
-        <Select style={{ width: '100%' }} placeholder="--" disabled={disabled}>
-          {(() => {
-            const labels: string[] = (form.getFieldValue('labels') || []).filter((label: string) =>
-              label.startsWith(DEFAULT_VERSION_LABEL_PREFIX),
-            );
-            return labels.map((label) => (
-              <Select.Option value={label} key={label}>
-                {label}
-              </Select.Option>
-            ));
-          })()}
-        </Select>
-      </Form.Item>
-      <Form.Item {...FORM_ITEM_WITHOUT_LABEL}>
-        <Button type="dashed" disabled={disabled} onClick={() => setShowVersionManager(true)}>
-          {formatMessage({ id: 'component.global.manage' })}
-        </Button>
-      </Form.Item>
-      {showVersionManager && (
-        <Form.Item shouldUpdate noStyle>
-          {() => {
-            const labels: string[] = (form.getFieldValue('labels') || []).filter((label: string) =>
-              label.startsWith(DEFAULT_VERSION_LABEL_PREFIX),
-            );
-            return (
-              <LabelsDrawer
-                title="Version Manager"
-                dataSource={labels}
-                disabled={disabled || false}
-                onChange={onChange}
-                onClose={() => setShowVersionManager(false)}
-              />
-            );
-          }}
-        </Form.Item>
-      )}
+      <NormalLabelComponent />
+      <VersionLabelComponent />
 
       <Form.Item label={formatMessage({ id: 'component.global.description' })} name="desc">
         <Input.TextArea

web/src/pages/Route/transform.ts

@@ -25,12 +25,15 @@ export const transformLableValueToKeyValue = (data: string[]) => {
   });
 };
 
+// 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<RouteModule.Body> = {
-    ...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,14 +180,19 @@ export const transformRouteData = (data: RouteModule.Body) => {
     priority = 0,
     enable_websocket,
   } = data;
+
   const form1Data: Partial<RouteModule.Form1Data> = {
     name,
     desc,
     status,
     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,

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[];