This is an automated email from the ASF dual-hosted git repository.
sunyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 190949c feat: add plugin icon (#1220)
190949c is described below
commit 190949ca9c8e36ea4fc9e59112b70138977f2589
Author: litesun <su...@apache.org>
AuthorDate: Thu Jan 7 11:27:08 2021 +0800
feat: add plugin icon (#1220)
* feat: add default plugin img
* feat: add plugin edit drawer tips
* feat: change icon opacity to 0.2
* feat: add plugin icon
* feat: update style
Co-authored-by: 琚致远 <juzhiy...@apache.org>
---
web/public/static/default-plugin.png | Bin 0 -> 2244 bytes
web/src/components/Plugin/PluginPage.tsx | 40 ++++++--
web/src/components/Plugin/data.tsx | 152 ++-----------------------------
web/src/components/Plugin/index.ts | 2 +-
web/src/pages/Plugin/List.tsx | 8 +-
web/src/pages/Plugin/service.ts | 6 ++
6 files changed, 51 insertions(+), 157 deletions(-)
diff --git a/web/public/static/default-plugin.png
b/web/public/static/default-plugin.png
new file mode 100644
index 0000000..422d7dd
Binary files /dev/null and b/web/public/static/default-plugin.png differ
diff --git a/web/src/components/Plugin/PluginPage.tsx
b/web/src/components/Plugin/PluginPage.tsx
index ec11987..a0e214e 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -21,6 +21,8 @@ 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 = {
readonly?: boolean;
@@ -48,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);
@@ -70,7 +72,18 @@ const PluginPage: React.FC<Props> = ({
}, []);
const PluginList = () => (
- <>
+ <><style>
+ {`
+ .ant-card-body .icon {
+ width: 5em;
+ height: 5em;
+ margin-right: 0;
+ overflow: hidden;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ }`
+ }
+ </style>
<Sider theme="light">
<Anchor offsetTop={150}>
{/* eslint-disable-next-line no-shadow */}
@@ -110,12 +123,6 @@ const PluginPage: React.FC<Props> = ({
Enable
</Button>,
]}
- bodyStyle={{
- height: 151,
- display: 'flex',
- justifyContent: 'center',
- textAlign: 'center',
- }}
title={[
<div style={{ width: '100%', textAlign: 'center' }}
key={1}>
<span key={2} data-cy-plugin-name={item.name}>
@@ -123,8 +130,21 @@ const PluginPage: React.FC<Props> = ({
</span>
</div>,
]}
- style={{ height: 258, width: 200 }}
- />
+ bodyStyle={{
+ minHeight: 151,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center'
+ }}
+ style={{ width: 200 }}
+ >
+ {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 40b1d60..75baecb 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 940c9f0..cee617d 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';
diff --git a/web/src/pages/Plugin/List.tsx b/web/src/pages/Plugin/List.tsx
index 2e9c18f..3a73cc1 100644
--- a/web/src/pages/Plugin/List.tsx
+++ b/web/src/pages/Plugin/List.tsx
@@ -24,16 +24,21 @@ 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 }) => {
const plugins: any = {};
@@ -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 7c51d03..8a030ca 100644
--- a/web/src/pages/Plugin/service.ts
+++ b/web/src/pages/Plugin/service.ts
@@ -46,3 +46,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;
+ });
+ };
