From 894fce2a91ab8ed3682e229f52ba1171ef26ace3 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Wed, 6 Jan 2021 16:46:31 +0800
Subject: [PATCH 1/5] feat: add default plugin img
---
web/public/static/default-plugin.png | Bin 0 -> 2244 bytes
web/src/components/Plugin/PluginPage.tsx | 24 +++++++++++++++--------
2 files changed, 16 insertions(+), 8 deletions(-)
create mode 100644 web/public/static/default-plugin.png
diff --git a/web/public/static/default-plugin.png b/web/public/static/default-plugin.png
new file mode 100644
index 0000000000000000000000000000000000000000..422d7dd0438778085adff67cab79cc27a32e8e5f
GIT binary patch
literal 2244
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
SD^8;T0000<MNUMnLSTXvJMkL;
literal 0
HcmV?d00001
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index cde28976ac..cc638526fc 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -21,6 +21,7 @@ import { orderBy } from 'lodash';
import PluginDetail from './PluginDetail';
import { fetchList } from './service';
+import defaultPluginImg from '../../../public/static/default-plugin.png';
type Props = {
readonly?: boolean;
@@ -96,6 +97,7 @@ const PluginPage: React.FC<Props> = ({
).map((item) => (
<Card
key={item.name}
+ hoverable
actions={[
<Button
type={
@@ -110,19 +112,25 @@ const PluginPage: React.FC<Props> = ({
Enable
</Button>,
]}
- bodyStyle={{
- height: 151,
- display: 'flex',
- justifyContent: 'center',
- textAlign: 'center',
- }}
title={[
<div style={{ width: '100%', textAlign: 'center' }}>
<span key={2}>{item.name}</span>
</div>,
]}
- style={{ height: 258, width: 200 }}
- />
+ bodyStyle={{
+ minHeight: 151,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center'
+ }}
+ style={{ width: 200 }}
+ >
+ <img
+ alt="pluginImg"
+ src={defaultPluginImg}
+ style={{ width: 50, height: 50, opacity: 0.4 }}
+ />
+ </Card>
))}
</PanelSection>
);
From e3e63acebda0b4acd703a3b6ad9d6d5f99851c4a Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Wed, 6 Jan 2021 17:17:59 +0800
Subject: [PATCH 2/5] feat: add plugin edit drawer tips
---
web/src/pages/Plugin/List.tsx | 8 +++++++-
web/src/pages/Plugin/service.ts | 6 ++++++
2 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/web/src/pages/Plugin/List.tsx b/web/src/pages/Plugin/List.tsx
index 2e9c18f788..3a73cc1423 100644
--- a/web/src/pages/Plugin/List.tsx
+++ b/web/src/pages/Plugin/List.tsx
@@ -24,15 +24,20 @@ import { omit } from 'lodash';
import PluginDetail from '@/components/Plugin/PluginDetail';
-import { fetchList, createOrUpdate } from './service';
+import { fetchList, fetchPluginList, createOrUpdate } from './service';
const Page: React.FC = () => {
const ref = useRef<ActionType>();
const { formatMessage } = useIntl();
const [visible, setVisible] = useState(false);
const [initialData, setInitialData] = useState({});
+ const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
const [name, setName] = useState('');
+ useEffect(() => {
+ fetchPluginList().then(setPluginList);
+ }, []);
+
useEffect(() => {
if (!name) {
fetchList().then(({ data }) => {
@@ -98,6 +103,7 @@ const Page: React.FC = () => {
type="global"
schemaType="route"
initialData={initialData}
+ pluginList={pluginList}
onClose={() => {
setVisible(false);
}}
diff --git a/web/src/pages/Plugin/service.ts b/web/src/pages/Plugin/service.ts
index a11e2ad751..544fe04d88 100644
--- a/web/src/pages/Plugin/service.ts
+++ b/web/src/pages/Plugin/service.ts
@@ -44,3 +44,9 @@ export const createOrUpdate = (data: Partial<Omit<PluginModule.GlobalRule, 'id'>
method: 'PUT',
data: { id: DEFAULT_GLOBAL_RULE_ID, ...data },
});
+
+ export const fetchPluginList = () => {
+ return request<Res<PluginComponent.Meta[]>>('/plugins?all=true').then((data) => {
+ return data.data;
+ });
+ };
From 7a6908878303f58f8cd574eb7bf0898c39630874 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Wed, 6 Jan 2021 20:02:41 +0800
Subject: [PATCH 3/5] feat: change icon opacity to 0.2
---
web/src/components/Plugin/PluginPage.tsx | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index 48b48598f3..7bad1b0257 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -97,7 +97,6 @@ const PluginPage: React.FC<Props> = ({
).map((item) => (
<Card
key={item.name}
- hoverable
actions={[
<Button
type={
@@ -128,7 +127,7 @@ const PluginPage: React.FC<Props> = ({
<img
alt="pluginImg"
src={defaultPluginImg}
- style={{ width: 50, height: 50, opacity: 0.4 }}
+ style={{ width: 50, height: 50, opacity: 0.2 }}
/>
</Card>
))}
From e04fb7f7660bc336930eecfd0aa7d2bec78c25c5 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Thu, 7 Jan 2021 00:08:42 +0800
Subject: [PATCH 4/5] feat: add plugin icon
---
web/src/components/Plugin/PluginPage.tsx | 20 ++-
web/src/components/Plugin/data.tsx | 152 ++---------------------
web/src/components/Plugin/index.ts | 2 +-
3 files changed, 24 insertions(+), 150 deletions(-)
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index 7bad1b0257..5dab65216a 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -21,6 +21,7 @@ import { orderBy } from 'lodash';
import PluginDetail from './PluginDetail';
import { fetchList } from './service';
+import { PLUGIN_ICON_LIST } from './data'
import defaultPluginImg from '../../../public/static/default-plugin.png';
type Props = {
@@ -49,7 +50,7 @@ const PluginPage: React.FC<Props> = ({
initialData = {},
schemaType = 'route',
type = 'scoped',
- onChange = () => {},
+ onChange = () => { },
}) => {
const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
const [name, setName] = useState<string>(NEVER_EXIST_PLUGIN_FLAG);
@@ -71,7 +72,17 @@ const PluginPage: React.FC<Props> = ({
}, []);
const PluginList = () => (
- <>
+ <><style>
+ {`
+ .ant-card-body .icon {
+ width: 5em;
+ height: 5em;
+ overflow: hidden;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ }`
+ }
+ </style>
<Sider theme="light">
<Anchor offsetTop={150}>
{/* eslint-disable-next-line no-shadow */}
@@ -124,11 +135,12 @@ const PluginPage: React.FC<Props> = ({
}}
style={{ width: 200 }}
>
- <img
+ {Boolean(PLUGIN_ICON_LIST[item.name]) && PLUGIN_ICON_LIST[item.name]}
+ {Boolean(!PLUGIN_ICON_LIST[item.name]) && <img
alt="pluginImg"
src={defaultPluginImg}
style={{ width: 50, height: 50, opacity: 0.2 }}
- />
+ />}
</Card>
))}
</PanelSection>
diff --git a/web/src/components/Plugin/data.tsx b/web/src/components/Plugin/data.tsx
index 40b1d608d7..75baecbf4f 100644
--- a/web/src/components/Plugin/data.tsx
+++ b/web/src/components/Plugin/data.tsx
@@ -18,149 +18,11 @@ import React from 'react';
import IconFont from '../IconFont';
-export const PLUGIN_MAPPER_SOURCE: Record<string, Omit<PluginComponent.Meta, 'name'>> = {
- 'limit-req': {
- category: 'Limit traffic',
- priority: 1,
- },
- 'limit-count': {
- category: 'Limit traffic',
- priority: 2,
- },
- 'limit-conn': {
- category: 'Limit traffic',
- priority: 3,
- },
- prometheus: {
- category: 'Observability',
- priority: 1,
- avatar: <IconFont name="iconPrometheus_software_logo" />,
- },
- skywalking: {
- category: 'Observability',
- priority: 2,
- avatar: <IconFont name="iconskywalking" />,
- },
- zipkin: {
- category: 'Observability',
- priority: 3,
- },
- 'request-id': {
- category: 'Observability',
- priority: 4,
- },
- 'key-auth': {
- category: 'Authentication',
- priority: 1,
- },
- 'basic-auth': {
- category: 'Authentication',
- priority: 3,
- },
- 'node-status': {
- category: 'Other',
- },
- 'jwt-auth': {
- category: 'Authentication',
- priority: 2,
- avatar: <IconFont name="iconjwt-3" />,
- },
- 'authz-keycloak': {
- category: 'Authentication',
- priority: 5,
- avatar: <IconFont name="iconkeycloak_icon_32px" />,
- },
- 'ip-restriction': {
- category: 'Security',
- priority: 1,
- },
- 'grpc-transcode': {
- category: 'Other',
- },
- 'serverless-pre-function': {
- category: 'Other',
- },
- 'serverless-post-function': {
- category: 'Other',
- },
- 'openid-connect': {
- category: 'Authentication',
- priority: 4,
- avatar: <IconFont name="iconicons8-openid" />,
- },
- 'proxy-rewrite': {
- category: 'Other',
- },
- redirect: {
- category: 'Other',
- hidden: true,
- },
- 'response-rewrite': {
- category: 'Other',
- },
- 'fault-injection': {
- category: 'Security',
- priority: 4,
- },
- 'udp-logger': {
- category: 'Log',
- priority: 4,
- },
- 'wolf-rbac': {
- category: 'Other',
- },
- 'proxy-cache': {
- category: 'Other',
- priority: 1,
- },
- 'tcp-logger': {
- category: 'Log',
- priority: 3,
- },
- 'proxy-mirror': {
- category: 'Other',
- priority: 2,
- },
- 'kafka-logger': {
- category: 'Log',
- priority: 1,
- avatar: <IconFont name="iconApache_kafka" />,
- },
- cors: {
- category: 'Security',
- priority: 2,
- },
- 'uri-blocker': {
- category: 'Security',
- priority: 3,
- },
- 'request-validator': {
- category: 'Security',
- priority: 5,
- },
- heartbeat: {
- category: 'Other',
- hidden: true,
- },
- 'batch-requests': {
- category: 'Other',
- },
- 'http-logger': {
- category: 'Log',
- priority: 2,
- },
- 'mqtt-proxy': {
- category: 'Other',
- },
- oauth: {
- category: 'Security',
- },
- syslog: {
- category: 'Log',
- priority: 5,
- },
- echo: {
- category: 'Other',
- priority: 3,
- },
+export const PLUGIN_ICON_LIST: Record<string, any> = {
+ prometheus: <IconFont name="iconPrometheus_software_logo" />,
+ skywalking: <IconFont name="iconskywalking" />,
+ 'jwt-auth': <IconFont name="iconjwt-3" />,
+ 'authz-keycloak': <IconFont name="iconkeycloak_icon_32px" />,
+ 'openid-connect': <IconFont name="iconicons8-openid" />,
+ 'kafka-logger': <IconFont name="iconApache_kafka" />,
};
diff --git a/web/src/components/Plugin/index.ts b/web/src/components/Plugin/index.ts
index 940c9f0e88..cee617dfc5 100644
--- a/web/src/components/Plugin/index.ts
+++ b/web/src/components/Plugin/index.ts
@@ -15,4 +15,4 @@
* limitations under the License.
*/
export { default } from './PluginPage';
-export { PLUGIN_MAPPER_SOURCE } from './data';
+export { PLUGIN_ICON_LIST } from './data';
From 113b70a4c6d1c69f3a22941ae9c08d5fa0728d76 Mon Sep 17 00:00:00 2001
From: litesun <7sunmiao@gmail.com>
Date: Thu, 7 Jan 2021 00:10:09 +0800
Subject: [PATCH 5/5] feat: update style
---
web/src/components/Plugin/PluginPage.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index 5dab65216a..9cd9608c9f 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -77,6 +77,7 @@ const PluginPage: React.FC<Props> = ({
.ant-card-body .icon {
width: 5em;
height: 5em;
+ margin-right: 0;
overflow: hidden;
vertical-align: -0.15em;
fill: currentColor;