feat: add plugin icon

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,19 +123,26 @@ 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 }}
+                >
+                  {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>
           );

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" />,
 };

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';

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);
       }}

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;
+    });
+  };