[incubator-apisix-dashboard] branch next updated: Feat ssl (#260)

[juzhiyuan]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git


The following commit(s) were added to refs/heads/next by this push:
     new 38b3e0b  Feat ssl (#260)
38b3e0b is described below

commit 38b3e0b1e967711ed23a1ebbb6cbc33e507af641
Author: 琚致远 <juzhiy...@apache.org>
AuthorDate: Mon Jun 15 16:55:17 2020 +0800

    Feat ssl (#260)
    
    * feat: added SSL checked
    
    * feat: added search query
---
 src/pages/ssl/List.tsx   | 48 ++++++++++++++++++++++++++++++++++++++++--------
 src/pages/ssl/service.ts | 30 +++++++++++++++++++++++++-----
 2 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/src/pages/ssl/List.tsx b/src/pages/ssl/List.tsx
index e356f6f..88b1927 100644
--- a/src/pages/ssl/List.tsx
+++ b/src/pages/ssl/List.tsx
@@ -1,16 +1,28 @@
 import React, { useRef } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
-import { Button, Switch, Popconfirm, notification } from 'antd';
+import { Button, Switch, Popconfirm, notification, DatePicker } from 'antd';
 import { history, useIntl } from 'umi';
 import { PlusOutlined } from '@ant-design/icons';
 
-import { fetchList as fetchSSLList, remove as removeSSL } from './service';
+import { fetchList as fetchSSLList, remove as removeSSL, update as updateSSL } 
from './service';
 
 const List: React.FC = () => {
   const tableRef = useRef<ActionType>();
   const { formatMessage } = useIntl();
 
+  const onEnableChange = (id: string, checked: boolean) => {
+    updateSSL(id, checked)
+      .then(() => {
+        notification.success({ message: '更新证书启用状态成功' });
+      })
+      .catch(() => {
+        notification.error({ message: '更新证书启用状态失败' });
+        /* eslint-disable no-unused-expressions */
+        tableRef.current?.reload();
+      });
+  };
+
   const columns: ProColumns<SSLModule.ResSSL>[] = [
     {
       title: 'SNI',
@@ -24,11 +36,17 @@ const List: React.FC = () => {
     },
     {
       title: '是否启用',
-      valueType: 'option',
-      render: () => (
-        <>
-          <Switch defaultChecked />
-        </>
+      dataIndex: 'status',
+      render: (text, record) => (
+        <Switch
+          defaultChecked={Number(text) === 1}
+          onChange={(checked: boolean) => {
+            onEnableChange(record.id, checked);
+          }}
+        />
+      ),
+      renderFormItem: (_, props) => (
+        <Switch onChange={(checked) => props.onChange && 
props.onChange(Number(checked))} />
       ),
     },
     {
@@ -54,13 +72,27 @@ const List: React.FC = () => {
         </Popconfirm>
       ),
     },
+    {
+      title: '有效期',
+      dataIndex: 'expire_range',
+      hideInTable: true,
+      renderFormItem: (_, props) => (
+        <DatePicker.RangePicker
+          onChange={(range) => {
+            const from = range?.[0]?.unix();
+            const to = range?.[1]?.unix();
+            props.onChange && props.onChange(`${from}:${to}`);
+          }}
+        />
+      ),
+    },
   ];
 
   return (
     <PageHeaderWrapper>
       <ProTable<SSLModule.ResSSL>
         request={(params) => fetchSSLList(params)}
-        search={false}
+        search
         rowKey="id"
         columns={columns}
         actionRef={tableRef}
diff --git a/src/pages/ssl/service.ts b/src/pages/ssl/service.ts
index bb7d514..b46667c 100644
--- a/src/pages/ssl/service.ts
+++ b/src/pages/ssl/service.ts
@@ -1,14 +1,26 @@
 import { request } from 'umi';
+import querystring from 'querystring';
+import { identity, pickBy, omit } from 'lodash';
+
 import { transformFetchItemData } from '@/transforms/global';
 
 type FetchListParams = {
-  current: number;
-  pageSize: number;
+  current?: number;
+  pageSize?: number;
+  sni?: string;
+  expire_range?: string;
+  expire_start?: number;
+  expire_end?: number;
+  status?: 0;
 };
 
-export const fetchList = (params?: Partial<FetchListParams>) =>
-  request<{ count: number; list: SSLModule.ResSSL[] }>(
-    `/ssls?page=${params?.current || 1}&size=${params?.pageSize || 10}`,
+export const fetchList = ({ current = 1, pageSize = 10, ...props }: 
FetchListParams) => {
+  const [expire_start, expire_end] = (props.expire_range || '').split(':');
+  let queryObj = omit(props, 'expire_range', '_timestamp');
+  queryObj = pickBy(Object.assign({}, queryObj, { expire_start, expire_end }), 
identity);
+  const query = querystring.encode(queryObj);
+  return request<{ count: number; list: SSLModule.ResSSL[] }>(
+    `/ssls?page=${current}&size=${pageSize}&${query}`,
   ).then((data) => {
     return {
       count: data.count,
@@ -18,6 +30,7 @@ export const fetchList = (params?: Partial<FetchListParams>) 
=>
       })),
     };
   });
+};
 
 export const fetchItem = (id: string) =>
   request(`/ssls/${id}`).then((data) => 
transformFetchItemData<SSLModule.SSL>(data));
@@ -56,3 +69,10 @@ export const verifyKeyPaire = (cert = '', key = ''): 
Promise<VerifyKeyPaireProps
     method: 'POST',
     data: { cert, key },
   });
+
+export const update = (id: string, checked: boolean) =>
+  request(`/ssls/${id}`, {
+    data: {
+      status: Number(checked),
+    },
+  });