feat(FE): add service module

web/config/routes.ts

@@ -75,6 +75,18 @@ const routes = [
     path: '/consumer/:username/edit',
     component: './Consumer/Create',
   },
+  {
+    path: '/service/list',
+    component: './Service/List',
+  },
+  {
+    path: '/service/create',
+    component: './Service/Create',
+  },
+  {
+    path: '/service/:serviceId/edit',
+    component: './Service/Create',
+  },
   {
     path: '/settings',
     component: './Setting',

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

@@ -17,7 +17,7 @@
 declare namespace PluginComponent {
   type Data = object;
 
-  type Schema = '' | 'route' | 'consumer';
+  type Schema = '' | 'route' | 'consumer' | 'service';
 
   type Category =
     | 'Security'

web/src/components/Upstream/UpstreamForm.tsx

@@ -97,7 +97,10 @@ const UpstreamForm: React.FC<Props> = forwardRef(
     useEffect(() => {
       const id = form.getFieldValue('upstream_id');
       if (id) {
-        form.setFieldsValue(list.find((item) => item.id === id));
+        setReadonly(true);
+        requestAnimationFrame(() => {
+          form.setFieldsValue(list.find((item) => item.id === id));
+        })
       }
     }, [list]);
 

web/src/helpers.tsx

@@ -51,6 +51,11 @@ export const getMenuData = (): MenuDataItem[] => {
       path: '/consumer/list',
       icon: <IconFont name="iconconsumer" />,
     },
+    {
+      name: 'service',
+      path: '/service/list',
+      icon: <IconFont name="iconconsumer" />,
+    },
     {
       name: 'setting',
       path: '/settings',

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

@@ -69,6 +69,7 @@ export default {
   'menu.ssl': 'SSL',
   'menu.upstream': 'Upstream',
   'menu.consumer': 'Consumer',
+  'menu.service': 'Service',
   'menu.setting': 'Settings',
   'menu.serverinfo': 'Server Info',
 };

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

@@ -69,6 +69,7 @@ export default {
   'menu.ssl': '证书',
   'menu.upstream': '上游',
   'menu.consumer': 'Consumer',
+  'menu.service': '服务',
   'menu.setting': '设置',
   'menu.serverinfo': '服务端信息',
 };

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

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Form from 'antd/es/form';
 import { Button, Input, Select, Row, Col, InputNumber, Switch } from 'antd';
 import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
@@ -26,13 +26,20 @@ import {
   FORM_ITEM_LAYOUT,
   FORM_ITEM_WITHOUT_LABEL,
 } from '@/pages/Route/constants';
+import { fetchServiceList } from '../../service';
 
 const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
   form,
   disabled,
-  onChange = () => {},
+  onChange = () => { },
 }) => {
   const { formatMessage } = useIntl();
+  const [serviceList, setServiceList] = useState<ServiceModule.ResponseBody[]>([]);
+
+  useEffect(() => {
+    fetchServiceList().then(({ data }) => setServiceList(data));
+  }, []);
+
   const HostList = () => (
     <Form.List name="hosts">
       {(fields, { add, remove }) => {
@@ -376,7 +383,21 @@ const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
           return null;
         }}
       </Form.Item>
-    </PanelSection>
+      <Form.Item
+        label={formatMessage({ id: 'page.route.service' })}
+        name='service_id'
+      >
+        <Select disabled={disabled}>
+          {/* NOTE value = '' mean no service_id select, need to find a better way */}
+          <Select.Option value='' key={Math.random().toString(36).substring(7)} >{null}</Select.Option >
+          {serviceList.map(item => {
+            return <Select.Option value={item.id} key={item.id}>
+              {item.name}
+            </Select.Option>
+          })}
+        </Select>
+      </Form.Item>
+    </PanelSection >
   );
 };
 

web/src/pages/Route/locales/en-US.ts

@@ -31,6 +31,7 @@ export default {
   'page.route.regexMatch': 'Regex Match',
   'page.route.rule': 'Rule',
   'page.route.httpHeaderName': 'HTTP Request Header Name',
+  'page.route.service': 'Service',
 
   'page.route.input.placeholder.parameterNameHttpHeader': 'Request header name, for example: HOST',
   'page.route.input.placeholder.parameterNameRequestParameter': 'Parameter name, for example: id',

web/src/pages/Route/locales/zh-CN.ts

@@ -40,6 +40,7 @@ export default {
   'page.route.published': '已发布',
   'page.route.unpublished': '未发布',
   'page.route.onlineDebug': '在线调试',
+  'page.route.service': '服务',
 
   // button
   'page.route.button.returnList': '返回路由列表',

web/src/pages/Route/service.ts

@@ -90,7 +90,7 @@ export const checkHostWithSSL = (hosts: string[]) =>
 export const updateRouteStatus = (rid: string, status: RouteModule.RouteStatus) =>
   request(`/routes/${rid}`, {
     method: 'PATCH',
-    data: {status}
+    data: { status }
   });
 
 export const debugRoute = (data: RouteModule.debugRequest) => {
@@ -99,3 +99,10 @@ export const debugRoute = (data: RouteModule.debugRequest) => {
     data,
   });
 };
+
+export const fetchServiceList = () =>
+  request('/services').then(({ data }) => ({
+    data: data.rows,
+    total: data.total_size,
+  }));
+

web/src/pages/Route/transform.ts

@@ -83,6 +83,7 @@ export const transformStepData = ({
       'redirectURI',
       'ret_code',
       'redirectOption',
+      form1Data.service_id.length === 0 ? 'service_id' : '',
       !Object.keys(step3DataCloned.plugins || {}).length ? 'plugins' : '',
       !Object.keys(step3DataCloned.script || {}).length ? 'script' : '',
       form1Data.hosts.filter(Boolean).length === 0 ? 'hosts' : '',
@@ -103,6 +104,7 @@ export const transformStepData = ({
     'redirect',
     'vars',
     'plugins',
+    form1Data.service_id.length !== 0 ? 'service_id' : '',
     form1Data.hosts.filter(Boolean).length !== 0 ? 'hosts' : '',
     data.remote_addrs?.filter(Boolean).length !== 0 ? 'remote_addrs' : '',
   ]);
@@ -150,6 +152,7 @@ export const transformRouteData = (data: RouteModule.Body) => {
     status,
     upstream,
     upstream_id,
+    service_id = '',
     priority = 0,
     enable_websocket
   } = data;
@@ -163,7 +166,8 @@ export const transformRouteData = (data: RouteModule.Body) => {
     // @ts-ignore
     methods: methods.length ? methods : ["ALL"],
     priority,
-    enable_websocket
+    enable_websocket,
+    service_id
   };
 
   const redirect = data.plugins?.redirect || {};

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

@@ -106,6 +106,7 @@ declare namespace RouteModule {
     script: Record<string, any>;
     url?: string;
     enable_websocket?: boolean;
+    service_id?: string;
   };
 
   // step1
@@ -142,6 +143,7 @@ declare namespace RouteModule {
     ret_code?: number;
     status: number;
     enable_websocket?: boolean;
+    service_id: string;
   };
 
   type AdvancedMatchingRules = {

web/src/pages/Service/Create.tsx

@@ -0,0 +1,138 @@
+/*
+ * 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 React, { useState, useRef, useEffect } from 'react'
+import { useIntl, history } from 'umi';
+import { Card, Steps, Form, notification } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { omit } from 'lodash';
+
+import ActionBar from '@/components/ActionBar';
+import PluginPage from '@/components/Plugin';
+import Preview from './components/Preview';
+import Step1 from "./components/Step1";
+import { create, update, fetchItem } from './service';
+
+const { Step } = Steps;
+
+const Page: React.FC = (props) => {
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+  const [upstreamForm] = Form.useForm();
+  const upstreamRef = useRef<any>();
+  const [plugins, setPlugins] = useState<PluginComponent.Data>({});
+
+  const STEP_HEADER = [
+    formatMessage({ id: 'page.service.steps.stepTitle.basicInformation' }),
+    formatMessage({ id: 'page.service.steps.stepTitle.pluginConfig' }),
+    formatMessage({ id: 'component.global.steps.stepTitle.preview' }),
+  ]
+
+  const [stepHeader] = useState(STEP_HEADER);
+  const [step, setStep] = useState(1);
+
+  useEffect(() => {
+    const { serviceId } = (props as any).match.params;
+    if (serviceId) {
+      fetchItem(serviceId).then(({ data }) => {
+        if (data.upstream_id && data.upstream_id !== '') {
+          upstreamForm.setFieldsValue({ upstream_id: data.upstream_id });
+        }
+        if (data.upstream) {
+          upstreamForm.setFieldsValue(data.upstream);
+        }
+        form.setFieldsValue(omit(data, ['upstream_id', 'upstream', 'plugins']));
+        setPlugins(data.plugins || {});
+      });
+    }
+  }, []);
+
+  const onSubmit = () => {
+    const data = {
+      ...form.getFieldsValue(),
+      plugins,
+    };
+
+    const upstreamFormData = upstreamForm.getFieldsValue();
+    if (upstreamFormData.upstream_id === '') {
+      data.upstream = omit(upstreamFormData, ['upstream_id']);
+    } else {
+      data.upstream_id = upstreamFormData.upstream_id;
+    }
+
+    const { serviceId } = (props as any).match.params;
+    (serviceId ? update(serviceId, data) : create(data))
+      .then(() => {
+        notification.success({
+          message: `${serviceId
+            ? formatMessage({ id: 'component.global.edit' })
+            : formatMessage({ id: 'component.global.create' })
+            } ${formatMessage({ id: 'menu.service' })} ${formatMessage({
+              id: 'component.status.success',
+            })}`,
+        });
+        history.push('/service/list');
+      })
+      .catch(() => {
+        setStep(3);
+      });
+  };
+
+  const onStepChange = (nextStep: number) => {
+    if (step === 1 && nextStep === 2) {
+      form.validateFields().then(() => {
+        upstreamForm.validateFields().then(() => {
+          setStep(nextStep);
+        })
+      })
+      return;
+    }
+    if (nextStep === 4) {
+      onSubmit();
+      return;
+    };
+    setStep(nextStep);
+  }
+
+  return (<>
+    <PageHeaderWrapper
+      title={`${(props as any).match.params.rid
+        ? formatMessage({ id: 'component.global.edit' })
+        : formatMessage({ id: 'component.global.create' })
+        } ${formatMessage({ id: 'menu.service' })}`}
+    >
+      <Card bordered={false}>
+        <Steps current={step - 1} style={{ marginBottom: "25px" }}>
+          {stepHeader.map((item) => (
+            <Step title={item} key={item} />
+          ))}
+        </Steps>
+        {step === 1 && <Step1
+          form={form}
+          upstreamForm={upstreamForm}
+          upstreamRef={upstreamRef}
+        />}
+        {step === 2 && (
+          <PluginPage initialData={plugins} onChange={setPlugins} schemaType="route" />
+        )}
+        {step === 3 && <Preview upstreamForm={upstreamForm} form={form} plugins={plugins} />}
+      </Card>
+    </PageHeaderWrapper>
+    <ActionBar step={step} lastStep={3} onChange={onStepChange} withResultView />
+  </>)
+}
+
+export default Page;