From d0d2e4a7a7ed6cd6549788621c922dfaea8a551b Mon Sep 17 00:00:00 2001 From: juzhiyuan Date: Sat, 18 Jul 2020 10:22:29 +0800 Subject: [PATCH 1/3] feat(Pages): update pages --- package.json | 26 +- src/app.tsx | 46 +- src/components/PluginModal/index.tsx | 5 +- src/constants.ts | 20 + src/helpers.tsx | 36 + src/pages/Consumer/Create.tsx | 7 +- src/pages/Metrics/Metrics.tsx | 17 +- src/pages/Metrics/index.ts | 1 + src/pages/Metrics/service.ts | 4 + src/pages/SSL/Create.tsx | 20 +- .../components/CertificateUploader/index.tsx | 3 +- src/pages/Setting/Setting.tsx | 156 ++- src/pages/Setting/service.ts | 12 +- src/pages/Upstream/Create.tsx | 7 +- yarn.lock | 993 +++++++++++------- 15 files changed, 767 insertions(+), 586 deletions(-) create mode 100644 src/constants.ts create mode 100644 src/helpers.tsx create mode 100644 src/pages/Metrics/index.ts create mode 100644 src/pages/Metrics/service.ts diff --git a/package.json b/package.json index 3a55579815..f4a8a302c7 100644 --- a/package.json +++ b/package.json @@ -53,24 +53,25 @@ "@ant-design/icons": "^4.0.0", "@ant-design/pro-layout": "^6.0.0", "@ant-design/pro-table": "^2.4.0", - "@rjsf/antd": "^2.2.0", - "@rjsf/core": "^2.2.0", - "antd": "^4.3.3", + "@rjsf/antd": "2.2.0", + "@rjsf/core": "2.2.0", + "antd": "^4.4.0", "classnames": "^2.2.6", - "dayjs": "^1.8.28", - "json-schema": "^0.2.5", - "lodash": "^4.17.15", + "dayjs": "1.8.28", + "json-schema": "0.2.5", + "lodash": "^4.17.11", "moment": "^2.25.3", - "nzh": "^1.0.3", + "nzh": "1.0.4", "omit.js": "^2.0.2", "path-to-regexp": "2.4.0", "qs": "^6.9.0", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-helmet-async": "^1.0.4", "umi": "^3.1.2", - "umi-request": "^1.3.3", + "umi-request": "^1.0.8", "use-merge-value": "^1.0.1", - "uuid": "^7.0.2" + "uuid": "7.0.3" }, "devDependencies": { "@ant-design/pro-cli": "^2.0.2", @@ -79,12 +80,12 @@ "@types/history": "^4.7.2", "@types/jest": "^26.0.0", "@types/lodash": "^4.14.144", - "@types/node-forge": "^0.9.3", + "@types/node-forge": "0.9.3", "@types/qs": "^6.5.3", "@types/react": "^16.9.17", "@types/react-dom": "^16.8.4", "@types/react-helmet": "^5.0.13", - "@types/uuid": "^7.0.0", + "@types/uuid": "7.0.4", "@umijs/fabric": "^2.2.0", "@umijs/plugin-blocks": "^2.0.5", "@umijs/plugin-esbuild": "^1.0.0-beta.2", @@ -95,6 +96,7 @@ "cross-env": "^7.0.0", "cross-port-killer": "^1.1.1", "detect-installer": "^1.0.1", + "enzyme": "^3.11.0", "eslint": "^7.1.0", "eslint-plugin-eslint-comments": "^3.2.0", "express": "^4.17.1", @@ -104,7 +106,7 @@ "prettier": "^2.0.1", "pro-download": "1.0.1", "puppeteer-core": "^4.0.1", - "react-helmet-async": "^1.0.6", + "react-helmet-async": "1.0.6", "stylelint": "^13.0.0" }, "engines": { diff --git a/src/app.tsx b/src/app.tsx index 1a38f9c88b..ec575bde8e 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,12 +1,11 @@ import React from 'react'; -import { notification } from 'antd'; import { RequestConfig, history } from 'umi'; import { BasicLayoutProps, Settings as LayoutSettings } from '@ant-design/pro-layout'; -import { getSetting } from '@/pages/Setting'; import RightContent from '@/components/RightContent'; import Footer from '@/components/Footer'; import { queryCurrent } from '@/services/user'; +import { errorHandler, getBaseURL } from '@/helpers'; import defaultSettings from '../config/defaultSettings'; export async function getInitialState(): Promise<{ @@ -44,49 +43,8 @@ export const layout = ({ }; }; -const codeMessage = { - 200: '服务器成功返回请求的数据。', - 201: '新建或修改数据成功。', - 202: '一个请求已经进入后台排队（异步任务）。', - 204: '删除数据成功。', - 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。', - 401: '用户没有权限（令牌、用户名、密码错误）。', - 403: '用户得到授权，但是访问是被禁止的。', - 404: '发出的请求针对的是不存在的记录，服务器没有进行操作。', - 406: '请求的格式不可得。', - 410: '请求的资源被永久删除，且不会再得到的。', - 422: '当创建一个对象时，发生一个验证错误。', - 500: '服务器发生错误，请检查服务器。', - 502: '网关错误。', - 503: '服务不可用，服务器暂时过载或维护。', - 504: '网关超时。', -}; - -/** - * 异常处理程序 - */ -const errorHandler = (error: { response: Response; data: any }): Promise => { - const { response } = error; - if (response && response.status) { - const errorText = - error.data.msg || error.data.message || error.data.error_msg || codeMessage[response.status]; - - notification.error({ - message: `请求错误，错误码： ${error.data.errorCode || response.status}`, - description: errorText, - }); - } else if (!response) { - notification.error({ - description: '您的网络发生异常，无法连接服务器', - message: '网络异常', - }); - } - return Promise.reject(response); -}; - -const { baseURL } = getSetting(); export const request: RequestConfig = { - prefix: baseURL, + prefix: getBaseURL(), errorHandler, credentials: 'same-origin', }; diff --git a/src/components/PluginModal/index.tsx b/src/components/PluginModal/index.tsx index 9f4882c60d..906fc2b339 100644 --- a/src/components/PluginModal/index.tsx +++ b/src/components/PluginModal/index.tsx @@ -1,9 +1,8 @@ import React from 'react'; -import { Modal } from 'antd'; +import { Modal, Form } from 'antd'; import { useIntl } from 'umi'; import PluginForm from '@/components/PluginForm'; -import { useForm } from 'antd/es/form/util'; interface Props { visible: boolean; @@ -14,7 +13,7 @@ interface Props { const PluginModal: React.FC = (props) => { const { name, visible } = props; - const [form] = useForm(); + const [form] = Form.useForm(); return ( window.location.pathname.indexOf('/login') !== -1; + +/** + * 异常处理程序 + */ +export const errorHandler = (error: { response: Response; data: any }): Promise => { + const { response } = error; + if (response && response.status) { + if ([401].includes(response.status) && !isLoginPage()) { + localStorage.clear(); + window.location.href = '/login'; + } + + const errorText = + error.data.msg || error.data.message || error.data.error_msg || codeMessage[response.status]; + + notification.error({ + message: `请求错误，错误码： ${error.data.errorCode || response.status}`, + description: errorText, + }); + } else if (!response) { + notification.error({ + description: '您的网络发生异常，无法连接服务器', + message: '网络异常', + }); + } + return Promise.reject(response); +}; + +export const getBaseURL = () => + localStorage.getItem('GLOBAL_SETTING_API_BASE_URL') || DEFAULT_BASE_URL; +export const setBaseURL = (url = '') => localStorage.setItem('GLOBAL_SETTING_API_BASE_URL', url); diff --git a/src/pages/Consumer/Create.tsx b/src/pages/Consumer/Create.tsx index 3c43c953e0..bf503cab3c 100644 --- a/src/pages/Consumer/Create.tsx +++ b/src/pages/Consumer/Create.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react'; import { PageContainer } from '@ant-design/pro-layout'; -import { Card, Steps, notification } from 'antd'; -import { useForm } from 'antd/es/form/util'; +import { Card, Steps, notification, Form } from 'antd'; import { history } from 'umi'; import ActionBar from '@/components/ActionBar'; @@ -15,7 +14,7 @@ import { fetchItem, create, update } from './service'; const Page: React.FC = (props) => { const [step, setStep] = useState(1); const [plugins, setPlugins] = useState({}); - const [form1] = useForm(); + const [form1] = Form.useForm(); useEffect(() => { const { id } = (props as any).match.params; @@ -29,7 +28,7 @@ const Page: React.FC = (props) => { }, []); const onSubmit = () => { - const data = Object.assign({}, form1.getFieldsValue(), { plugins }) as ConsumerModule.Entity; + const data = { ...form1.getFieldsValue(), plugins } as ConsumerModule.Entity; const { id } = (props as any).match.params; (id ? update(id, data) : create(data)) .then(() => { diff --git a/src/pages/Metrics/Metrics.tsx b/src/pages/Metrics/Metrics.tsx index 7693883252..76c242f72f 100644 --- a/src/pages/Metrics/Metrics.tsx +++ b/src/pages/Metrics/Metrics.tsx @@ -2,23 +2,22 @@ import React, { useState, useEffect } from 'react'; import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Empty, Button, Card } from 'antd'; import { history } from 'umi'; -import { stringify } from 'qs'; -import { getSetting } from '@/pages/Setting'; + +import { getGrafanaURL } from './service'; const Metrics: React.FC = () => { const [grafanaURL, setGrafanaURL] = useState(); - const [showMetrics, setShowMetrics] = useState(false); useEffect(() => { - const { grafanaURL: url } = getSetting(); - setGrafanaURL(url); - setShowMetrics(Boolean(url)); + getGrafanaURL().then((url) => { + setGrafanaURL(url); + }); }, []); return ( - + - {!showMetrics && ( + {!grafanaURL && ( { )} - {showMetrics && ( + {grafanaURL && (