feat: added types for Plugins

web/src/components/Plugin/PluginPage.tsx

@@ -67,7 +67,6 @@ const PluginPage: React.FC<Props> = ({
   const [typeList, setTypeList] = useState<string[]>([]);
   const [plugins, setPlugins] = useState({});
 
-  const firstUpperCase = ([first, ...rest]: string) => first.toUpperCase() + rest.join('');
   useEffect(() => {
     setPlugins(initialData);
     fetchList().then((data) => {
@@ -77,14 +76,15 @@ const PluginPage: React.FC<Props> = ({
             PLUGIN_FILTER_LIST[item.name] && PLUGIN_FILTER_LIST[item.name].list.includes(referPage)
           ),
       );
+      console.log(filteredData)
       setPluginList(filteredData);
       const categoryList: string[] = [];
       data.forEach((item) => {
-        if (!categoryList.includes(firstUpperCase(item.type))) {
-          categoryList.push(firstUpperCase(item.type));
+        if (!categoryList.includes(item.type)) {
+          categoryList.push(item.type);
         }
       });
-      setTypeList(categoryList.sort());
+      setTypeList(categoryList);
     });
     fetchPluginTemplateList().then((data) => {
       setPluginTemplateList(data);
@@ -96,20 +96,24 @@ const PluginPage: React.FC<Props> = ({
     <>
       <style>
         {`
-      .ant-card-body .icon {
-          width: 5em;
-          height: 5em;
-          margin-right: 0;
-          overflow: hidden;
-          vertical-align: -0.15em;
-          fill: currentColor;
-        }`}
+          .ant-card-body .icon {
+            width: 5em;
+            height: 5em;
+            margin-right: 0;
+            overflow: hidden;
+            vertical-align: -0.15em;
+            fill: currentColor;
+          }
+          .ant-card-head {
+            padding: 0;
+          }
+        `}
       </style>
       <Sider theme="light">
         <Anchor offsetTop={150}>
           {typeList.map((typeItem) => {
             return (
-              <Anchor.Link href={`#plugin-category-${typeItem}`} title={typeItem} key={typeItem} />
+              <Anchor.Link href={`#plugin-category-${typeItem}`} title={formatMessage({ id: `component.plugin.${typeItem}` })} key={typeItem} />
             );
           })}
         </Anchor>
@@ -166,13 +170,13 @@ const PluginPage: React.FC<Props> = ({
         {typeList.map((typeItem) => {
           return (
             <PanelSection
-              title={typeItem}
+              title={formatMessage({ id: `component.plugin.${typeItem}` })}
               key={typeItem}
               style={PanelSectionStyle}
               id={`plugin-category-${typeItem}`}
             >
               {orderBy(
-                pluginList.filter((item) => item.type === typeItem.toLowerCase()),
+                pluginList.filter((item) => item.type === typeItem.toLowerCase() && !item.hidden),
                 'name',
                 'asc',
               ).map((item) => (

web/src/components/Plugin/data.tsx

@@ -30,5 +30,164 @@ export const PLUGIN_ICON_LIST: Record<string, any> = {
 // This list is used to filter out plugins that cannot be displayed in the plugins list.
 export const PLUGIN_FILTER_LIST: Record<string, { list: PluginComponent.ReferPage[] }> = {
   redirect: { list: ['route'] }, // Filter out the redirect plugin on the route page.
-  'proxy-rewrite': { list: ['route']},
+  'proxy-rewrite': { list: ['route'] },
 };
+
+export enum PluginType {
+  authentication = "authentication",
+  security = "security",
+  traffic = "traffic",
+  serverless = "serverless",
+  transformation = "transformation",
+  monitoring = "monitoring",
+  logging = "logging",
+  other = "other"
+}
+
+/**
+ * Plugin List that contains type field
+*/
+export const PLUGIN_LIST = {
+  "hmac-auth": {
+    type: PluginType.authentication
+  },
+  "serverless-post-function": {
+    type: PluginType.serverless
+  },
+  "mqtt-proxy": {
+    type: PluginType.other
+  },
+  "response-rewrite": {
+    type: PluginType.transformation
+  },
+  "basic-auth": {
+    type: PluginType.authentication
+  },
+  "error-log-logger": {
+    type: PluginType.logging
+  },
+  "fault-injection": {
+    type: PluginType.transformation
+  },
+  "limit-count": {
+    type: PluginType.traffic
+  },
+  "prometheus": {
+    type: PluginType.monitoring
+  },
+  "proxy-rewrite": {
+    type: PluginType.transformation
+  },
+  "syslog": {
+    type: PluginType.logging
+  },
+  "traffic-split": {
+    type: PluginType.traffic
+  },
+  "jwt-auth": {
+    type: PluginType.authentication
+  },
+  "kafka-logger": {
+    type: PluginType.logging
+  },
+  "limit-conn": {
+    type: PluginType.traffic
+  },
+  "udp-logger": {
+    type: PluginType.logging
+  },
+  "zipkin": {
+    type: PluginType.monitoring
+  },
+  "echo": {
+    type: PluginType.other,
+    hidden: true
+  },
+  "log-rotate": {
+    type: PluginType.logging
+  },
+  "serverless-pre-function": {
+    type: PluginType.serverless
+  },
+  "dubbo-proxy": {
+    type: PluginType.other
+  },
+  "node-status": {
+    type: PluginType.monitoring
+  },
+  "referer-restriction": {
+    type: PluginType.security
+  },
+  "api-breaker": {
+    type: PluginType.traffic
+  },
+  "consumer-restriction": {
+    type: PluginType.security
+  },
+  "cors": {
+    type: PluginType.security
+  },
+  "limit-req": {
+    type: PluginType.traffic
+  },
+  "proxy-mirror": {
+    type: PluginType.traffic
+  },
+  "request-validation": {
+    type: PluginType.traffic
+  },
+  "example-plugin": {
+    type: PluginType.other,
+    hidden: true
+  },
+  "ip-restriction": {
+    type: PluginType.security
+  },
+  "key-auth": {
+    type: PluginType.authentication
+  },
+  "proxy-cache": {
+    type: PluginType.traffic
+  },
+  "redirect": {
+    type: PluginType.other,
+    hidden: true
+  },
+  "request-id": {
+    type: PluginType.traffic
+  },
+  "skywalking": {
+    type: PluginType.monitoring
+  },
+  "batch-requests": {
+    type: PluginType.other
+  },
+  "http-logger": {
+    type: PluginType.logging
+  },
+  "openid-connect": {
+    type: PluginType.authentication
+  },
+  "sls-logger": {
+    type: PluginType.logging
+  },
+  "tcp-logger": {
+    type: PluginType.logging
+  },
+  "uri-blocker": {
+    type: PluginType.security
+  },
+  "wolf-rbac": {
+    type: PluginType.authentication
+  },
+  "authz-keycloak": {
+    type: PluginType.authentication
+  },
+  "grpc-transcode": {
+    type: PluginType.transformation
+  },
+  "server-info": {
+    type: PluginType.other,
+    hidden: true
+  }
+}

web/src/components/Plugin/locales/en-US.ts

@@ -21,6 +21,16 @@ export default {
   'component.step.select.pluginTemplate.select.option': 'Custom',
   'component.plugin.pluginTemplate.tip1': '1. When a route already have plugins field configured, the plugins in the plugin template will be merged into it.',
   'component.plugin.pluginTemplate.tip2': '2. The same plugin in the plugin template will override one in the plugins',
+  'component.plugin.general': 'General',
+  'component.plugin.transformation': 'Transformations',
+  'component.plugin.authentication': 'Authentication',
+  'component.plugin.security': 'Security',
+  'component.plugin.traffic': 'Traffic Control',
+  'component.plugin.serverless': 'Serverless',
+  'component.plugin.monitoring': 'Analytics & Monitoring',
+  'component.plugin.logging': 'Logging',
+  'component.plugin.protocol': 'Protocol',
+  'component.plugin.other': 'Other',
 
   // limit-conn
   'component.pluginForm.limit-conn.conn.tooltip': 'the maximum number of concurrent requests allowed. Requests exceeding this ratio (and below conn + burst) will get delayed(the latency seconds is configured by default_conn_delay) to conform to this threshold.',

web/src/components/Plugin/locales/zh-CN.ts

@@ -21,6 +21,16 @@ export default {
   'component.step.select.pluginTemplate.select.option': '手动配置',
   'component.plugin.pluginTemplate.tip1': '1. 若路由已配置插件，则插件模板数据将与已配置的插件数据合并。',
   'component.plugin.pluginTemplate.tip2': '2. 插件模板相同的插件会覆盖掉原有的插件。',
+  'component.plugin.general': '通用',
+  'component.plugin.transformation': '信息转换器',
+  'component.plugin.authentication': '身份验证',
+  'component.plugin.security': '安全防护',
+  'component.plugin.traffic': '流量控制',
+  'component.plugin.serverless': '无服务器架构',
+  'component.plugin.monitoring': '分析监控',
+  'component.plugin.logging': '日志记录',
+  'component.plugin.protocol': '协议',
+  'component.plugin.other': '其它',
 
   // limit-conn
   'component.pluginForm.limit-conn.conn.tooltip': '允许的最大并发请求数。超过 conn 的限制、但是低于 conn + burst 的请求，将被延迟处理。',

web/src/components/Plugin/service.ts

@@ -17,9 +17,23 @@
 import { omit } from 'lodash';
 import { request } from 'umi';
 
+import { PLUGIN_LIST, PluginType } from './data';
+
 export const fetchList = () => {
   return request<Res<PluginComponent.Meta[]>>('/plugins?all=true').then((data) => {
-    return data.data;
+    const typedData = data.data.map(item => ({
+      ...item,
+      type: PLUGIN_LIST[item.name]?.type || "other",
+      hidden: PLUGIN_LIST[item.name]?.hidden || false
+    }));
+
+    let finalList: PluginComponent.Meta[] = []
+
+    Object.values(PluginType).forEach(type => {
+      finalList = finalList.concat(typedData.filter(item => item.type === type))
+    })
+
+    return finalList
   });
 };
 

web/src/components/Plugin/typing.d.ts

@@ -26,9 +26,10 @@ declare namespace PluginComponent {
     type: string;
     version: number;
     consumer_schema?: Record<string, any>;
+    hidden?: boolean;
   };
 
   type ReferPage = '' | 'route' | 'consumer' | 'service' | 'plugin';
 
-  type CodeMirrorMode = 'JSON' | 'YAML'| 'Form';
+  type CodeMirrorMode = 'JSON' | 'YAML' | 'Form';
 }

web/src/pages/Plugin/locales/en-US.ts

@@ -18,5 +18,5 @@ export default {
   'page.plugin.drawer.popconfirm.title.delete': 'Are you sure to delete this item?',
   'page.plugin.list': 'Plugin List',
   'page.plugin.list.enabled': 'List of enabled plugins',
-  'page.plugin.market.config': 'Configure Plugin',
+  'page.plugin.market.config': 'Global Plugin List',
 };

web/src/pages/Plugin/locales/zh-CN.ts

@@ -18,5 +18,5 @@ export default {
   'page.plugin.drawer.popconfirm.title.delete': '确定删除该插件吗？',
   'page.plugin.list': '插件列表',
   'page.plugin.list.enabled': '已启用插件的列表',
-  'page.plugin.market.config': '配置列表',
+  'page.plugin.market.config': '全局插件列表',
 };