feat(route): add publish and offline to route

src/pages/Route/Create.less

@@ -114,6 +114,11 @@
 .stepForm {
   max-width: 700px;
   margin: 40px auto 0;
+  :global {
+    .ant-form-item-with-help {
+      margin-bottom: 24px;
+    }
+  }
 }
 
 :global {

src/pages/Route/Create.tsx

@@ -25,11 +25,11 @@ import ActionBar from '@/components/ActionBar';
 import {
   create,
   fetchItem,
-  update,
-  checkUniqueName,
   fetchUpstreamItem,
-  checkHostWithSSL,
   fetchRouteGroupItem,
+  update,
+  checkUniqueName,
+  checkHostWithSSL
 } from './service';
 import Step1 from './components/Step1';
 import Step2 from './components/Step2';
@@ -143,6 +143,7 @@ const Page: React.FC<Props> = (props) => {
             }
             setStep1Data({ ...form1.getFieldsValue(), ...step1Data, ...params });
           }}
+          isEdit={props.route.path.indexOf('edit') > 0}
         />
       );
     }

src/pages/Route/List.tsx

@@ -17,12 +17,12 @@
 import React, { useRef, useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
-import { Button, Popconfirm, notification, Tag, Input } from 'antd';
+import { Button, Popconfirm, notification, Tag, Input, Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import { history, useIntl } from 'umi';
 
-import { fetchList, remove } from './service';
+import { fetchList, offline, publish, remove } from './service';
 
 const Page: React.FC = () => {
   const ref = useRef<ActionType>();
@@ -66,6 +66,19 @@ const Page: React.FC = () => {
       title: formatMessage({ id: 'route.list.group.name' }),
       dataIndex: 'route_group_name',
     },
+    {
+      title: formatMessage({ id: 'route.list.status' }),
+      dataIndex: 'status',
+      render: (_, record) => (
+        <>
+          {record.status ? (
+            <Tag color="green">{formatMessage({ id: 'route.list.status.publish' })}</Tag>
+          ) : (
+            <Tag color="red">{formatMessage({ id: 'route.list.status.offline' })}</Tag>
+          )}
+        </>
+      ),
+    },
     {
       title: formatMessage({ id: 'route.list.edit.time' }),
       dataIndex: 'update_time',
@@ -76,31 +89,67 @@ const Page: React.FC = () => {
       valueType: 'option',
       render: (_, record) => (
         <>
-          <Button
-            type="primary"
-            onClick={() => history.push(`/routes/${record.id}/edit`)}
-            style={{ marginRight: 10 }}
-          >
-            {formatMessage({ id: 'route.list.edit' })}
-          </Button>
-          <Popconfirm
-            title={formatMessage({ id: 'route.list.delete.confrim' })}
-            onConfirm={() => {
-              remove(record.id!).then(() => {
-                notification.success({
-                  message: formatMessage({ id: 'route.list.delete.success' }),
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() => {
+                publish(record.id!).then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'route.list.publish.success' }),
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
                 });
-                /* eslint-disable no-unused-expressions */
-                ref.current?.reload();
-              });
-            }}
-            okText={formatMessage({ id: 'route.list.confirm' })}
-            cancelText={formatMessage({ id: 'route.list.cancel' })}
-          >
-            <Button type="primary" danger>
-              {formatMessage({ id: 'route.list.delete' })}
+              }}
+              style={{ marginRight: 10 }}
+              disabled={record.status}
+            >
+              {formatMessage({ id: 'route.list.publish' })}
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => history.push(`/routes/${record.id}/edit`)}
+              style={{ marginRight: 10 }}
+            >
+              {formatMessage({ id: 'route.list.edit' })}
             </Button>
-          </Popconfirm>
+            <Popconfirm
+              title={formatMessage({ id: 'route.list.offline.confirm' })}
+              onConfirm={() => {
+                offline(record.id!).then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'route.list.offline.success' }),
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
+                });
+              }}
+              okText={formatMessage({ id: 'route.list.offline' })}
+              cancelText={formatMessage({ id: 'route.list.cancel' })}
+            >
+              <Button type="primary" danger disabled={!record.status}>
+                {formatMessage({ id: 'route.list.offline' })}
+              </Button>
+            </Popconfirm>
+            <Popconfirm
+              title={formatMessage({ id: 'route.list.delete.confrim' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'route.list.delete.success' }),
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
+                });
+              }}
+              okText={formatMessage({ id: 'route.list.confirm' })}
+              cancelText={formatMessage({ id: 'route.list.cancel' })}
+            >
+              <Button type="primary" danger>
+                {formatMessage({ id: 'route.list.delete' })}
+              </Button>
+            </Popconfirm>
+          </Space>
         </>
       ),
     },

src/pages/Route/components/Step1/MetaView.tsx

@@ -16,15 +16,15 @@
  */
 import React, { useEffect, useState } from 'react';
 import Form from 'antd/es/form';
-import { Input, Select } from 'antd';
+import { Input, Select, Switch } from 'antd';
 import { useIntl } from 'umi';
 import { PanelSection } from '@api7-dashboard/ui';
 
 import { fetchRouteGroupList } from '@/pages/Route/service';
 
 interface Props extends RouteModule.Data {}
 
-const MetaView: React.FC<Props> = ({ data, disabled, onChange }) => {
+const MetaView: React.FC<Props> = ({ data, disabled, onChange, isEdit }) => {
   const { step1Data } = data;
   const { formatMessage } = useIntl();
   const routeGroupDisabled = disabled || !!step1Data.route_group_id;
@@ -90,6 +90,16 @@ const MetaView: React.FC<Props> = ({ data, disabled, onChange }) => {
           disabled={routeGroupDisabled}
         />
       </Form.Item>
+      {!isEdit && (
+        <Form.Item
+          label={formatMessage({ id: 'route.list.publish' })}
+          name="status"
+          valuePropName="checked"
+          help={formatMessage({ id: 'page.route.form.itemHelp.status' })}
+        >
+          <Switch disabled={disabled} />
+        </Form.Item>
+      )}
       <Form.Item label={formatMessage({ id: 'route.meta.description' })} name="desc">
         <Input.TextArea
           placeholder={formatMessage({ id: 'route.meta.description.rule' })}

src/pages/Route/components/Step1/index.tsx

@@ -26,11 +26,11 @@ import MatchingRulesView from './MatchingRulesView';
 
 interface Props extends RouteModule.Data {
   form: FormInstance;
+  isEdit: boolean;
 }
 
 const Step1: React.FC<Props> = (props) => {
   const { data, form, onChange } = props;
-
   return (
     <>
       <Form

src/pages/Route/constants.ts

@@ -45,6 +45,7 @@ export const DEFAULT_STEP_1_DATA: RouteModule.Step1Data = {
   route_group_name: '',
   name: '',
   desc: '',
+  status: false,
   priority: 0,
   protocols: ['http', 'https'],
   websocket: false,

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

@@ -152,9 +152,17 @@ export default {
   'route.list.path': 'Path',
   'route.list.description': 'Description',
   'route.list.group.name': 'RouteGroup',
+  'route.list.status': 'Status',
+  'route.list.status.publish': 'Published',
+  'route.list.status.offline': 'Offline',
   'route.list.edit.time': 'Edit Time',
   'route.list.operation': 'Operation',
   'route.list.edit': 'Edit',
+  'route.list.publish': 'Publish',
+  'route.list.publish.success': 'Route publish success',
+  'route.list.offline': 'Offline',
+  'route.list.offline.success': 'Offline success',
+  'route.list.offline.confirm': 'Are you sure to offline this route?',
   'route.list.delete.confrim': 'Are you sure to delete this route?',
   'route.list.delete.success': 'Delete Success!',
   'route.list.confirm': 'Confirm',
@@ -166,4 +174,6 @@ export default {
   'page.route.radio.static': 'Static',
   'page.route.radio.regx': 'Regx',
   'page.route.form.itemLabel.from': 'From',
+  'page.route.form.itemHelp.status':
+    'Whether a route can be used after it is created, the default value is false.',
 };

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

@@ -147,9 +147,17 @@ export default {
   'route.list.path': '路径',
   'route.list.description': '描述',
   'route.list.group.name': '路由分组',
+  'route.list.status': '状态',
+  'route.list.status.publish': '已发布',
+  'route.list.status.offline': '未发布',
   'route.list.edit.time': '编辑时间',
   'route.list.operation': '操作',
   'route.list.edit': '编辑',
+  'route.list.publish': '发布',
+  'route.list.publish.success': 'API发布成功!',
+  'route.list.offline': '下线',
+  'route.list.offline.success': 'API下线成功！',
+  'route.list.offline.confirm': '确定下线该路由吗？',
   'route.list.delete.confrim': '确定删除该路由吗？',
   'route.list.delete.success': '删除成功！',
   'route.list.confirm': '确认',
@@ -161,4 +169,5 @@ export default {
   'page.route.radio.static': '静态重写',
   'page.route.radio.regx': '正则重写',
   'page.route.form.itemLabel.from': '原路径',
+  'page.route.form.itemHelp.status': '路由创建后是否可以使用， 默认值为 false',
 };

src/pages/Route/service.ts

@@ -50,6 +50,8 @@ export const fetchList = ({ current = 1, pageSize = 10 }, search: string) => {
 };
 
 export const remove = (rid: number) => request(`/routes/${rid}`, { method: 'DELETE' });
+export const offline = (rid: number) => request(`/routes/${rid}/offline`, { method: 'PUT' });
+export const publish = (rid: number) => request(`/routes/${rid}/publish`, { method: 'PUT' });
 
 export const checkUniqueName = (name = '', exclude = '') =>
   request('/notexist/routes', {

src/pages/Route/transform.ts

@@ -166,13 +166,15 @@ export const transformRouteData = (data: RouteModule.Body) => {
     hosts,
     vars,
     redirect,
+    status,
   } = data;
 
   const step1Data: Partial<RouteModule.Step1Data> = {
     name,
     route_group_id,
     route_group_name,
     desc,
+    status,
     protocols: protocols.filter((item) => item !== 'websocket'),
     websocket: protocols.includes('websocket'),
     hosts,

src/pages/Route/typing.d.ts

@@ -36,11 +36,13 @@ declare namespace RouteModule {
     desc: string;
     uris: string[];
     hosts: string[];
+    status: boolean;
   };
 
   type Step1Data = {
     name: string;
     desc: string;
+    status: boolean;
     priority: number;
     protocols: RequestProtocol[];
     websocket: boolean;
@@ -69,6 +71,7 @@ declare namespace RouteModule {
       step3Data: Step3Data;
     };
     onChange(data: T): void;
+    isEdit?: boolean;
   }
 
   type UpstreamHost = {
@@ -117,6 +120,7 @@ declare namespace RouteModule {
     id?: number;
     route_group_id?: string;
     route_group_name: string;
+    status: boolean;
     name: string;
     desc: string;
     priority?: number;