From 13b5f0c4acd3bd38e12bf8583897989c8ee5246a Mon Sep 17 00:00:00 2001 From: liuxiran Date: Tue, 15 Sep 2020 09:32:44 +0800 Subject: [PATCH] feat(route): add publish and offline to route (#451) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(route): add publish and offline to route * feat: trigger redeploy * feat: trigger redeploy * Update Create.tsx * fix: update refer to the code review * fix: init status default value * fix: add a help msg to status Form.Item Co-authored-by: 琚致远 --- src/pages/Route/Create.less | 5 + src/pages/Route/Create.tsx | 7 +- src/pages/Route/List.tsx | 99 ++++++++++++++----- src/pages/Route/components/Step1/MetaView.tsx | 14 ++- src/pages/Route/components/Step1/index.tsx | 2 +- src/pages/Route/constants.ts | 1 + src/pages/Route/locales/en-US.ts | 10 ++ src/pages/Route/locales/zh-CN.ts | 9 ++ src/pages/Route/service.ts | 2 + src/pages/Route/transform.ts | 2 + src/pages/Route/typing.d.ts | 4 + 11 files changed, 124 insertions(+), 31 deletions(-) diff --git a/src/pages/Route/Create.less b/src/pages/Route/Create.less index 14ad36a869..5d39f4cc2f 100644 --- a/src/pages/Route/Create.less +++ b/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 { diff --git a/src/pages/Route/Create.tsx b/src/pages/Route/Create.tsx index dcc21b1e82..fc767d242c 100644 --- a/src/pages/Route/Create.tsx +++ b/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) => { } setStep1Data({ ...form1.getFieldsValue(), ...step1Data, ...params }); }} + isEdit={props.route.path.indexOf('edit') > 0} /> ); } diff --git a/src/pages/Route/List.tsx b/src/pages/Route/List.tsx index e37d043d33..018ef8334a 100644 --- a/src/pages/Route/List.tsx +++ b/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(); @@ -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 ? ( + {formatMessage({ id: 'route.list.status.publish' })} + ) : ( + {formatMessage({ id: 'route.list.status.offline' })} + )} + + ), + }, { title: formatMessage({ id: 'route.list.edit.time' }), dataIndex: 'update_time', @@ -76,31 +89,67 @@ const Page: React.FC = () => { valueType: 'option', render: (_, record) => ( <> - - { - remove(record.id!).then(() => { - notification.success({ - message: formatMessage({ id: 'route.list.delete.success' }), + + + - + { + 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' })} + > + + + { + 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' })} + > + + + ), }, diff --git a/src/pages/Route/components/Step1/MetaView.tsx b/src/pages/Route/components/Step1/MetaView.tsx index afa1b90f94..a90faac6bf 100644 --- a/src/pages/Route/components/Step1/MetaView.tsx +++ b/src/pages/Route/components/Step1/MetaView.tsx @@ -16,7 +16,7 @@ */ 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'; @@ -24,7 +24,7 @@ import { fetchRouteGroupList } from '@/pages/Route/service'; interface Props extends RouteModule.Data {} -const MetaView: React.FC = ({ data, disabled, onChange }) => { +const MetaView: React.FC = ({ 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 = ({ data, disabled, onChange }) => { disabled={routeGroupDisabled} /> + {!isEdit && ( + + + + )} = (props) => { const { data, form, onChange } = props; - return ( <>
{ }; 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', { diff --git a/src/pages/Route/transform.ts b/src/pages/Route/transform.ts index e3c2b4ea0b..048f3d3151 100644 --- a/src/pages/Route/transform.ts +++ b/src/pages/Route/transform.ts @@ -166,6 +166,7 @@ export const transformRouteData = (data: RouteModule.Body) => { hosts, vars, redirect, + status, } = data; const step1Data: Partial = { @@ -173,6 +174,7 @@ export const transformRouteData = (data: RouteModule.Body) => { route_group_id, route_group_name, desc, + status, protocols: protocols.filter((item) => item !== 'websocket'), websocket: protocols.includes('websocket'), hosts, diff --git a/src/pages/Route/typing.d.ts b/src/pages/Route/typing.d.ts index 409f4cc275..ed4e3c4461 100644 --- a/src/pages/Route/typing.d.ts +++ b/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;