This is an automated email from the ASF dual-hosted git repository. juzhiyuan pushed a commit to branch feat-ssl in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git
commit 9ba8264ce08896aeb4d6986dcef03f29c70b3ab6 Author: juzhiyuan <[email protected]> AuthorDate: Sat Oct 24 09:23:26 2020 +0800 feat(SSL): added SSL --- src/helpers.tsx | 11 +++--- src/locales/en-US/component.ts | 17 -------- src/locales/zh-CN/component.ts | 17 -------- src/pages/SSL/Create.tsx | 9 +---- src/pages/SSL/List.tsx | 46 +++++----------------- src/pages/SSL/components/CertificateForm/index.tsx | 6 +-- src/pages/SSL/locales/en-US.ts | 3 +- src/pages/SSL/locales/zh-CN.ts | 5 ++- src/pages/SSL/service.ts | 40 ++++--------------- src/pages/SSL/typing.d.ts | 28 +++++-------- 10 files changed, 37 insertions(+), 145 deletions(-) diff --git a/src/helpers.tsx b/src/helpers.tsx index 096c85c..6956bff 100644 --- a/src/helpers.tsx +++ b/src/helpers.tsx @@ -34,12 +34,11 @@ export const getMenuData = (): MenuDataItem[] => { path: '/routes/list', icon: <IconFont type="iconroute" />, }, - // NOTE: disable SSL module in v2.0 - // { - // name: 'ssl', - // path: '/ssl/list', - // icon: <IconFont type="iconSSLshuzizhengshu" />, - // }, + { + name: 'ssl', + path: '/ssl/list', + icon: <IconFont type="iconSSLshuzizhengshu" />, + }, { name: 'upstream', path: '/upstream/list', diff --git a/src/locales/en-US/component.ts b/src/locales/en-US/component.ts index 12a9fc8..1864cef 100644 --- a/src/locales/en-US/component.ts +++ b/src/locales/en-US/component.ts @@ -59,21 +59,4 @@ export default { // User component 'component.user.loginByPassword': 'Username & Password', 'component.user.login': 'Login', - 'component.user.username': 'Username', - 'component.user.password': 'Password', - 'component.user.rememberMe': 'Remember Me', - 'component.user.inputUsername': 'Please input username!', - 'component.user.inputPassword': 'Please input password!', - 'component.user.wrongUsernameOrPassword': 'Wrong account or password!', - // SSL Module - 'component.ssl.removeSSLItemModalContent': 'You are going to remove this item!', - 'component.ssl.removeSSLItemModalTitle': 'SSL Remove Alert', - 'component.ssl.fetchSSLListSuccess': 'Fetch SSL list successfully', - 'component.ssl.removeSSLSuccess': 'Remove target SSL successfully', - 'component.ssl.fieldSNIInvalid': 'Please check SNI', - 'component.ssl.fieldKeyInvalid': 'Please check Key', - 'component.ssl.fieldCertInvalid': 'Please check Cert', - 'component.ssl.invalidKey': 'Invalid Key', - 'component.ssl.fieldKeyTooShort': 'Key is too short, 128 characters at least.', - 'component.ssl.fieldCertTooShort': 'Cert is too short, 128 characters at least.', }; diff --git a/src/locales/zh-CN/component.ts b/src/locales/zh-CN/component.ts index e807c15..a074362 100644 --- a/src/locales/zh-CN/component.ts +++ b/src/locales/zh-CN/component.ts @@ -55,21 +55,4 @@ export default { // User component 'component.user.loginByPassword': '账号密码登录', 'component.user.login': '登录', - 'component.user.username': '账号', - 'component.user.password': '密码', - 'component.user.rememberMe': '自动登录', - 'component.user.inputUsername': '请输入账号！', - 'component.user.inputPassword': '请输入密码！', - 'component.user.wrongUsernameOrPassword': '账号或密码错误！', - // SSL Module - 'component.ssl.removeSSLItemModalContent': '确定要删除该项吗？', - 'component.ssl.removeSSLItemModalTitle': '删除 SSL', - 'component.ssl.fetchSSLListSuccess': '获取 SSL 列表成功', - 'component.ssl.removeSSLSuccess': '删除 SSL 成功', - 'component.ssl.fieldSNIInvalid': '请检查 SNI 值', - 'component.ssl.fieldKeyInvalid': '请检查 Key 值', - 'component.ssl.fieldCertInvalid': '请检查 Cert 值', - 'component.ssl.invalidKey': '非法的 Key', - 'component.ssl.fieldKeyTooShort': 'Key 值过短，至少需要128位！', - 'component.ssl.fieldCertTooShort': 'Cert 值过短，至少需要128位！', }; diff --git a/src/pages/SSL/Create.tsx b/src/pages/SSL/Create.tsx index 01b64a2..395bff1 100644 --- a/src/pages/SSL/Create.tsx +++ b/src/pages/SSL/Create.tsx @@ -15,7 +15,7 @@ * limitations under the License. */ import React, { useState } from 'react'; -import { Card, Steps, notification, Form } from 'antd'; +import { Card, Steps, Form } from 'antd'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import moment from 'moment'; import { history, useIntl } from 'umi'; @@ -48,13 +48,6 @@ const Page: React.FC = (props) => { expireTime: moment.unix(Number(data.validity_end)).format('YYYY-MM-DD HH:mm:ss'), }); setStep(2); - }) - .catch(() => { - notification.warning({ - message: `${formatMessage({ id: 'component.global.pleaseCheck' })}${formatMessage({ - id: 'page.ssl.form.itemLabel.cert', - })}`, - }); }); }; diff --git a/src/pages/SSL/List.tsx b/src/pages/SSL/List.tsx index 7517c1c..182ca5e 100644 --- a/src/pages/SSL/List.tsx +++ b/src/pages/SSL/List.tsx @@ -17,40 +17,25 @@ import React, { useRef, useState } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'; -import { Button, Switch, Popconfirm, notification, Tag, Input } from 'antd'; +import { Button, Popconfirm, notification, Tag, Input } from 'antd'; import { useIntl, history } from 'umi'; import { PlusOutlined } from '@ant-design/icons'; import moment from 'moment'; -import { fetchList as fetchSSLList, remove as removeSSL, switchEnable } from '@/pages/SSL/service'; +import { fetchList as fetchSSLList, remove as removeSSL } from '@/pages/SSL/service'; const Page: React.FC = () => { - const [search, setSearch] = useState(''); + const [, setSearch] = useState(''); const tableRef = useRef<ActionType>(); const { formatMessage } = useIntl(); - const onEnableChange = (id: string, checked: boolean) => { - switchEnable(id, checked) - .then(() => { - notification.success({ - message: formatMessage({ - id: 'page.ssl.notification.updateCertEnableStatusSuccessfully', - }), - }); - }) - .catch(() => { - /* eslint-disable no-unused-expressions */ - tableRef.current?.reload(); - }); - }; - - const columns: ProColumns<SSLModule.ResSSL>[] = [ + const columns: ProColumns<SSLModule.ResponseBody>[] = [ { title: 'SNI', dataIndex: 'sni', render: (_, record) => { - return record.snis.map((sni) => ( + return (record.snis || []).map((sni) => ( <Tag color="geekblue" key={sni}> {sni} </Tag> @@ -64,19 +49,6 @@ const Page: React.FC = () => { render: (text) => `${moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}`, }, { - title: formatMessage({ id: 'page.ssl.list.ifEnable' }), - dataIndex: 'status', - hideInSearch: true, - render: (text, record) => ( - <Switch - defaultChecked={Number(text) === 1} - onChange={(checked: boolean) => { - onEnableChange(record.id, checked); - }} - /> - ), - }, - { title: formatMessage({ id: 'component.global.updateTime' }), dataIndex: 'update_time', hideInSearch: true, @@ -97,7 +69,7 @@ const Page: React.FC = () => { {formatMessage({ id: 'component.global.edit' })} </Button> <Popconfirm - title={formatMessage({ id: 'component.global.delete' })} + title={formatMessage({ id: 'component.ssl.removeSSLItemModalContent' })} onConfirm={() => removeSSL(record.id).then(() => { notification.success({ @@ -111,7 +83,7 @@ const Page: React.FC = () => { okText={formatMessage({ id: 'component.global.confirm' })} > <Button type="primary" danger> - {formatMessage({ id: 'component.global.remove' })} + {formatMessage({ id: 'component.global.delete' })} </Button> </Popconfirm> </> @@ -131,12 +103,12 @@ const Page: React.FC = () => { id: 'component.global.list', })}`} > - <ProTable<SSLModule.ResSSL> + <ProTable<SSLModule.ResponseBody> search={false} rowKey="id" columns={columns} actionRef={tableRef} - request={(params) => fetchSSLList(params, search)} + request={() => fetchSSLList()} toolBarRender={(action) => [ <Input.Search placeholder={formatMessage({ id: 'component.global.pleaseEnter' })} diff --git a/src/pages/SSL/components/CertificateForm/index.tsx b/src/pages/SSL/components/CertificateForm/index.tsx index a0a4b26..0e667eb 100644 --- a/src/pages/SSL/components/CertificateForm/index.tsx +++ b/src/pages/SSL/components/CertificateForm/index.tsx @@ -75,11 +75,7 @@ const CertificateForm: React.FC<CertificateFormProps> = ({ mode, form }) => { }, ]} > - <Input.TextArea - rows={6} - disabled={mode !== 'EDIT'} - placeholder={formatMessage({ id: 'page.ssl.textAreaPlaceholder.cert' })} - /> + <Input.TextArea rows={6} disabled={mode !== 'EDIT'} /> </Form.Item> <Form.Item label={formatMessage({ id: 'page.ssl.form.itemLabel.privateKey' })} diff --git a/src/pages/SSL/locales/en-US.ts b/src/pages/SSL/locales/en-US.ts index c80b97d..884fbaa 100644 --- a/src/pages/SSL/locales/en-US.ts +++ b/src/pages/SSL/locales/en-US.ts @@ -22,7 +22,6 @@ export default { 'page.ssl.form.itemLabel.privateKey': 'Private Key', 'page.ssl.form.itemRuleMessage.privateKeyLength': 'The Private Key requires at least 128 characters', - 'page.ssl.textAreaPlaceholder.cert': 'Please enter the SSL Certificate Content', 'page.ssl.button.uploadCert': 'Upload Certificate', @@ -39,4 +38,6 @@ export default { 'page.ssl.list.ifEnable': 'If Enable', 'page.ssl.list.periodOfValidity': 'Period Of Validity', 'page.ssl.steps.stepTitle.completeCertInfo': 'Complete Certificate Information', + 'component.ssl.removeSSLSuccess': 'Remove target SSL successfully', + 'component.ssl.removeSSLItemModalContent': 'You are going to remove this item!', }; diff --git a/src/pages/SSL/locales/zh-CN.ts b/src/pages/SSL/locales/zh-CN.ts index 232c80a..c9a82b1 100644 --- a/src/pages/SSL/locales/zh-CN.ts +++ b/src/pages/SSL/locales/zh-CN.ts @@ -16,11 +16,10 @@ */ export default { 'page.ssl.form.itemLabel.expireTime': '过期时间', - 'page.ssl.form.itemLabel.cert': '证书内容', + 'page.ssl.form.itemLabel.cert': '证书', 'page.ssl.form.itemRuleMessage.certValueLength': '证书内容至少需要128个字符', 'page.ssl.form.itemLabel.privateKey': '私钥', 'page.ssl.form.itemRuleMessage.privateKeyLength': '私钥 至少需要128个字符', - 'page.ssl.textAreaPlaceholder.cert': '请填写SSL证书内容', 'page.ssl.button.uploadCert': '上传证书', @@ -35,4 +34,6 @@ export default { 'page.ssl.list.ifEnable': '是否启用', 'page.ssl.list.periodOfValidity': '有效期', 'page.ssl.steps.stepTitle.completeCertInfo': '完善证书信息', + 'component.ssl.removeSSLSuccess': '删除 SSL 成功', + 'component.ssl.removeSSLItemModalContent': '确定要删除该证书吗？', }; diff --git a/src/pages/SSL/service.ts b/src/pages/SSL/service.ts index 5513b88..2e65a0b 100644 --- a/src/pages/SSL/service.ts +++ b/src/pages/SSL/service.ts @@ -15,61 +15,35 @@ * limitations under the License. */ import { request } from 'umi'; -import querystring from 'querystring'; -import { identity, pickBy, omit } from 'lodash'; -export const fetchList = ( - { current = 1, pageSize = 10, ...props }: SSLModule.FetchListParams, - search: string, -) => { - const [expire_start, expire_end] = (props.expire_range || '').split(':'); - let queryObj = omit(props, 'expire_range', '_timestamp'); - queryObj = pickBy({ ...queryObj, expire_start, expire_end, sni: search }, identity); - const query = querystring.encode(queryObj); - return request<{ count: number; list: SSLModule.ResSSL[] }>( - `/ssl?page=${current}&page_size=${pageSize}&${query}`, - ).then((data) => { +export const fetchList = () => { + return request<Res<ResListData<SSLModule.ResponseBody>>>(`/ssl`).then(({ data }) => { return { - total: data.count, - data: data.list.map((item) => ({ - ...item, - sni: item.snis.join(';'), - })), + total: data.total_size, + data: data.rows, }; }); }; export const remove = (id: string) => - request(`/ssls/${id}`, { + request(`/ssl/${id}`, { method: 'DELETE', }); export const create = (data: SSLModule.SSL) => - request('/ssls', { + request('/ssl', { method: 'POST', data, }); -/** - * 1. 校验证书是否匹配 - * 2. 解析公钥内容 - * */ export const verifyKeyPaire = (cert = '', key = ''): Promise<SSLModule.VerifyKeyPaireProps> => request('/check_ssl_cert', { method: 'POST', data: { cert, key }, }); -export const switchEnable = (id: string, checked: boolean) => - request(`/ssls/${id}`, { - method: 'PATCH', - data: { - status: Number(checked), - }, - }); - export const update = (id: string, data: SSLModule.SSL) => - request(`/ssls/${id}`, { + request(`/ssl/${id}`, { method: 'PUT', data, }); diff --git a/src/pages/SSL/typing.d.ts b/src/pages/SSL/typing.d.ts index 652a436..985e305 100644 --- a/src/pages/SSL/typing.d.ts +++ b/src/pages/SSL/typing.d.ts @@ -21,17 +21,6 @@ declare namespace SSLModule { key: string; }; - type ResSSL = { - id: string; - create_time: number; - update_time: number; - validity_start: number; - validity_end: number; - status: number; - snis: string[]; - public_key: string; - }; - type UploadPublicSuccessData = { cert: string; publicKeyList: UploadFile[]; @@ -56,13 +45,14 @@ declare namespace SSLModule { }; }; - type FetchListParams = { - current?: number; - pageSize?: number; - sni?: string; - expire_range?: string; - expire_start?: number; - expire_end?: number; - status?: 0; + type ResponseBody = { + id: string; + cert: string; + create_time: number; + snis: string[]; + status: number; + update_time: number; + validity_start: number; + validity_end: number; }; }
