From 09ad0c28527739231da8e9ca284681ead162358e Mon Sep 17 00:00:00 2001
From: juzhiyuan <juzhiyuan@apache.org>
Date: Sat, 28 Nov 2020 09:04:30 +0800
Subject: [PATCH 1/8] feat(plugin): added code mirror

---
 web/package.json                              |   1 +
 .../components/Plugin/CodeMirrorDrawer.tsx    |  83 ++++++++
 web/src/components/Plugin/IconFont.tsx        |  24 +++
 web/src/components/Plugin/PluginPage.tsx      | 189 ++++++++++++++++++
 web/src/components/Plugin/data.tsx            | 169 ++++++++++++++++
 web/src/components/Plugin/index.ts            |  17 ++
 web/src/components/Plugin/service.ts          |  98 +++++++++
 web/src/components/Plugin/typing.d.ts         |  39 ++++
 web/src/pages/Route/Create.tsx                |   7 +-
 .../pages/Route/components/Step3/index.tsx    |  69 ++++---
 10 files changed, 658 insertions(+), 38 deletions(-)
 create mode 100644 web/src/components/Plugin/CodeMirrorDrawer.tsx
 create mode 100644 web/src/components/Plugin/IconFont.tsx
 create mode 100644 web/src/components/Plugin/PluginPage.tsx
 create mode 100644 web/src/components/Plugin/data.tsx
 create mode 100644 web/src/components/Plugin/index.ts
 create mode 100644 web/src/components/Plugin/service.ts
 create mode 100644 web/src/components/Plugin/typing.d.ts

diff --git a/web/package.json b/web/package.json
index da5799d63c..05ce18f23e 100644
--- a/web/package.json
+++ b/web/package.json
@@ -60,6 +60,7 @@
     "@api7-dashboard/ui": "^1.0.3",
     "@rjsf/antd": "2.2.0",
     "@rjsf/core": "2.2.0",
+    "@uiw/react-codemirror": "^3.0.1",
     "antd": "^4.4.0",
     "classnames": "^2.2.6",
     "dayjs": "1.8.28",
diff --git a/web/src/components/Plugin/CodeMirrorDrawer.tsx b/web/src/components/Plugin/CodeMirrorDrawer.tsx
new file mode 100644
index 0000000000..b382d85d66
--- /dev/null
+++ b/web/src/components/Plugin/CodeMirrorDrawer.tsx
@@ -0,0 +1,83 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useRef } from 'react';
+import { Drawer, Button, notification } from 'antd';
+import CodeMirror from '@uiw/react-codemirror';
+
+type Props = {
+  visible?: boolean;
+  data?: object;
+  readonly?: boolean;
+  onClose?: () => void;
+  onSubmit?: (data: object) => void;
+};
+
+const CodeMirrorDrawer: React.FC<Props> = ({
+  visible = false,
+  readonly = false,
+  data = {},
+  onClose,
+  onSubmit,
+}) => {
+  const ref = useRef<any>(null);
+  return (
+    <Drawer
+      visible={visible}
+      width={500}
+      onClose={onClose}
+      footer={
+        !readonly && (
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Button onClick={onClose}>Cancel</Button>
+            <Button
+              type="primary"
+              style={{ marginRight: 8, marginLeft: 8 }}
+              onClick={() => {
+                try {
+                  if (onSubmit) {
+                    onSubmit(JSON.parse(ref.current?.editor.getValue()));
+                  }
+                } catch (error) {
+                  notification.error({
+                    message: 'Invalid JSON data',
+                  });
+                }
+              }}
+            >
+              Submit
+            </Button>
+          </div>
+        )
+      }
+    >
+      <CodeMirror
+        ref={ref}
+        value={JSON.stringify(data, null, 2)}
+        options={{
+          mode: 'json-ld',
+          readOnly: readonly ? 'nocursor' : '',
+          lineWrapping: true,
+          lineNumbers: true,
+          showCursorWhenSelecting: true,
+          autofocus: true,
+        }}
+      />
+    </Drawer>
+  );
+};
+
+export default CodeMirrorDrawer;
diff --git a/web/src/components/Plugin/IconFont.tsx b/web/src/components/Plugin/IconFont.tsx
new file mode 100644
index 0000000000..488972064c
--- /dev/null
+++ b/web/src/components/Plugin/IconFont.tsx
@@ -0,0 +1,24 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createFromIconfontCN } from '@ant-design/icons';
+
+// NOTE: Icons from AliCDN https://www.iconfont.cn/manage/index
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_2088089_a3klmsocd15.js',
+});
+
+export default IconFont;
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
new file mode 100644
index 0000000000..d5bfabd377
--- /dev/null
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -0,0 +1,189 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useEffect, useState } from 'react';
+import { Anchor, Layout, Switch, Card, Tooltip, Button, notification, Avatar } from 'antd';
+import { SettingFilled } from '@ant-design/icons';
+import { PanelSection } from '@api7-dashboard/ui';
+import { validate } from 'json-schema';
+
+import { fetchSchema, getList } from './service';
+import { PLUGIN_MAPPER_SOURCE } from './data';
+import CodeMirrorDrawer from './CodeMirrorDrawer';
+
+type Props = {
+  readonly?: boolean;
+  initialData?: PluginComponent.Data;
+  schemaType?: PluginComponent.Schema;
+  onChange?: (data: PluginComponent.Data) => void;
+};
+
+const PanelSectionStyle = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 33.333333%)',
+  gridRowGap: 15,
+  gridColumnGap: 10,
+  width: 'calc(100% - 20px)',
+};
+
+const { Sider, Content } = Layout;
+
+// NOTE: use this flag as plugin's name to hide drawer
+const NEVER_EXIST_PLUGIN_FLAG = 'NEVER_EXIST_PLUGIN_FLAG';
+
+const PluginPage: React.FC<Props> = ({
+  readonly = false,
+  initialData = {},
+  schemaType = '',
+  onChange = () => {},
+}) => {
+  const [pluginList, setPlugin] = useState<PluginComponent.Meta[][]>([]);
+  const [name, setName] = useState<string>(NEVER_EXIST_PLUGIN_FLAG);
+
+  useEffect(() => {
+    getList().then(setPlugin);
+  }, []);
+
+  return (
+    <>
+      <style>{`
+        .ant-avatar > img {
+          object-fit: contain;
+        }
+        .ant-avatar {
+          background-color: transparent;
+        }
+        .ant-avatar.ant-avatar-icon {
+          font-size: 32px;
+        }
+      `}</style>
+      <Layout>
+        <Sider theme="light">
+          <Anchor offsetTop={150}>
+            {pluginList.map((plugins) => {
+              const { category } = plugins[0];
+              return (
+                <Anchor.Link
+                  href={`#plugin-category-${category}`}
+                  title={category}
+                  key={category}
+                />
+              );
+            })}
+          </Anchor>
+        </Sider>
+        <Content style={{ padding: '0 10px', backgroundColor: '#fff', minHeight: 1400 }}>
+          {pluginList.map((plugins) => {
+            const { category } = plugins[0];
+            return (
+              <PanelSection
+                title={category}
+                key={category}
+                style={PanelSectionStyle}
+                id={`plugin-category-${category}`}
+              >
+                {plugins.map((item) => (
+                  <Card
+                    key={item.name}
+                    title={[
+                      item.avatar && (
+                        <Avatar
+                          icon={item.avatar}
+                          className="plugin-avatar"
+                          style={{
+                            marginRight: 5,
+                          }}
+                        />
+                      ),
+                      <a
+                        href={`https://github.com/apache/apisix/blob/master/doc/plugins/${item.name}.md`}
+                        style={{ color: 'inherit' }}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {item.name}
+                      </a>,
+                    ]}
+                    style={{ height: 66 }}
+                    extra={[
+                      <Tooltip title="Setting" key={`plugin-card-${item.name}-extra-tooltip-2`}>
+                        <Button
+                          disabled={PLUGIN_MAPPER_SOURCE[item.name]?.noConfiguration}
+                          shape="circle"
+                          icon={<SettingFilled />}
+                          style={{ marginRight: 10, marginLeft: 10 }}
+                          size="middle"
+                          onClick={() => {
+                            setName(item.name);
+                          }}
+                        />
+                      </Tooltip>,
+                      <Switch
+                        defaultChecked={initialData[item.name] && !initialData[item.name].disable}
+                        disabled={readonly}
+                        onChange={(isChecked) => {
+                          if (isChecked) {
+                            setName(item.name);
+                            onChange({
+                              ...initialData,
+                              [item.name]: { ...initialData[item.name], disable: false },
+                            });
+                          } else {
+                            onChange({
+                              ...initialData,
+                              [item.name]: { ...initialData[item.name], disable: true },
+                            });
+                          }
+                        }}
+                        key={Math.random().toString(36).substring(7)}
+                      />,
+                    ]}
+                  />
+                ))}
+              </PanelSection>
+            );
+          })}
+        </Content>
+      </Layout>
+      <CodeMirrorDrawer
+        visible={name !== NEVER_EXIST_PLUGIN_FLAG}
+        data={initialData[name]}
+        readonly={readonly}
+        onClose={() => {
+          setName(NEVER_EXIST_PLUGIN_FLAG);
+        }}
+        onSubmit={(value) => {
+          fetchSchema(name, schemaType).then((schema) => {
+            const { valid, errors } = validate(value, schema);
+            if (valid) {
+              onChange({ ...initialData, [name]: { ...value, disable: false } });
+              setName(NEVER_EXIST_PLUGIN_FLAG);
+              return;
+            }
+            errors?.forEach((item) => {
+              notification.error({
+                message: 'Invalid plugin data',
+                description: item.message,
+              });
+            });
+          });
+        }}
+      />
+    </>
+  );
+};
+
+export default PluginPage;
diff --git a/web/src/components/Plugin/data.tsx b/web/src/components/Plugin/data.tsx
new file mode 100644
index 0000000000..29762a0c78
--- /dev/null
+++ b/web/src/components/Plugin/data.tsx
@@ -0,0 +1,169 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+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',
+    noConfiguration: true,
+    priority: 1,
+    avatar: <IconFont type="iconPrometheus_software_logo" />,
+  },
+  skywalking: {
+    category: 'Observability',
+    priority: 2,
+    avatar: <IconFont type="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',
+    noConfiguration: true,
+  },
+  'jwt-auth': {
+    category: 'Authentication',
+    priority: 2,
+    avatar: <IconFont type="iconjwt-3" />,
+  },
+  'authz-keycloak': {
+    category: 'Authentication',
+    priority: 5,
+    avatar: <IconFont type="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 type="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 type="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',
+    noConfiguration: true,
+  },
+  'http-logger': {
+    category: 'Log',
+    priority: 2,
+  },
+  'mqtt-proxy': {
+    category: 'Other',
+  },
+  oauth: {
+    category: 'Security',
+  },
+  syslog: {
+    category: 'Log',
+    priority: 5,
+  },
+  echo: {
+    category: 'Other',
+    priority: 3,
+  },
+};
diff --git a/web/src/components/Plugin/index.ts b/web/src/components/Plugin/index.ts
new file mode 100644
index 0000000000..21da0223fa
--- /dev/null
+++ b/web/src/components/Plugin/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { default } from './PluginPage';
diff --git a/web/src/components/Plugin/service.ts b/web/src/components/Plugin/service.ts
new file mode 100644
index 0000000000..01f171bc59
--- /dev/null
+++ b/web/src/components/Plugin/service.ts
@@ -0,0 +1,98 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { JSONSchema7 } from 'json-schema';
+import { omit } from 'lodash';
+import { request } from 'umi';
+import { PLUGIN_MAPPER_SOURCE } from './data';
+
+enum Category {
+  'Limit traffic',
+  'Observability',
+  'Security',
+  'Authentication',
+  'Log',
+  'Other',
+}
+
+export const fetchList = () => request<Res<string[]>>('/plugins');
+
+let cachedPluginNameList: string[] = [];
+export const getList = async () => {
+  if (!cachedPluginNameList.length) {
+    cachedPluginNameList = (await fetchList()).data;
+  }
+  const names = cachedPluginNameList;
+  const data: Record<string, PluginComponent.Meta[]> = {};
+
+  names.forEach((name) => {
+    const plugin = PLUGIN_MAPPER_SOURCE[name] || {};
+    const { category = 'Other', hidden = false } = plugin;
+
+    // NOTE: assign it to Authentication plugin
+    if (name.includes('auth')) {
+      plugin.category = 'Authentication';
+    }
+
+    if (!data[category]) {
+      data[category] = [];
+    }
+
+    if (!hidden) {
+      data[category] = data[category].concat({
+        ...plugin,
+        name,
+      });
+    }
+  });
+
+  return Object.keys(data)
+    .sort((a, b) => Category[a] - Category[b])
+    .map((category) => {
+      return data[category].sort((a, b) => {
+        return (a.priority || 9999) - (b.priority || 9999);
+      });
+    });
+};
+
+/**
+ * cache pulgin schema by schemaType
+ * default schema is route for plugins in route
+ * support schema: consumer for plugins in consumer
+ */
+const cachedPluginSchema: Record<string, object> = {
+  route: {},
+  consumer: {},
+};
+export const fetchSchema = async (
+  name: string,
+  schemaType: PluginComponent.Schema,
+): Promise<JSONSchema7> => {
+  if (!cachedPluginSchema[schemaType][name]) {
+    const queryString = schemaType !== 'route' ? `?schema_type=${schemaType}` : '';
+    cachedPluginSchema[schemaType][name] = (
+      await request(`/schema/plugins/${name}${queryString}`)
+    ).data;
+    // for plugins schema returned with properties: [], which will cause parse error
+    if (JSON.stringify(cachedPluginSchema[schemaType][name].properties) === '[]') {
+      cachedPluginSchema[schemaType][name] = omit(
+        cachedPluginSchema[schemaType][name],
+        'properties',
+      );
+    }
+  }
+  return cachedPluginSchema[schemaType][name];
+};
diff --git a/web/src/components/Plugin/typing.d.ts b/web/src/components/Plugin/typing.d.ts
new file mode 100644
index 0000000000..c9233eaeb1
--- /dev/null
+++ b/web/src/components/Plugin/typing.d.ts
@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+declare namespace PluginComponent {
+  type Data = object;
+
+  type Schema = '' | 'route' | 'consumer';
+
+  type Category =
+    | 'Security'
+    | 'Limit traffic'
+    | 'Log'
+    | 'Observability'
+    | 'Other'
+    | 'Authentication';
+
+  type Meta = {
+    name: string;
+    category: Category;
+    hidden?: boolean;
+    noConfiguration?: boolean;
+    // Note: Plugins are sorted by priority under the same category in the frontend, the smaller the number, the higher the priority. The default value is 9999.
+    priority?: number;
+    avatar?: React.ReactNode;
+  };
+}
diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx
index 396008c0c5..379e83c6a4 100644
--- a/web/src/pages/Route/Create.tsx
+++ b/web/src/pages/Route/Create.tsx
@@ -65,7 +65,7 @@ const Page: React.FC<Props> = (props) => {
   const [form2] = Form.useForm();
   const upstreamRef = useRef<any>();
 
-  const [step, setStep] = useState(1);
+  const [step, setStep] = useState(3);
   const [stepHeader, setStepHeader] = useState(STEP_HEADER_4);
   const [chart, setChart] = useState(INIT_CHART);
 
@@ -252,10 +252,11 @@ const Page: React.FC<Props> = (props) => {
   return (
     <>
       <PageHeaderWrapper
-        title={`${(props as any).match.params.rid
+        title={`${
+          (props as any).match.params.rid
             ? formatMessage({ id: 'component.global.edit' })
             : formatMessage({ id: 'component.global.create' })
-          } ${formatMessage({ id: 'menu.routes' })}`}
+        } ${formatMessage({ id: 'menu.routes' })}`}
       >
         <Card bordered={false}>
           <Steps current={step - 1} className={styles.steps}>
diff --git a/web/src/pages/Route/components/Step3/index.tsx b/web/src/pages/Route/components/Step3/index.tsx
index fcc6b01641..324b86926e 100644
--- a/web/src/pages/Route/components/Step3/index.tsx
+++ b/web/src/pages/Route/components/Step3/index.tsx
@@ -19,17 +19,18 @@ import { Radio, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { isChrome } from 'react-device-detect';
 
-import { PluginPage, PluginPageType } from '@api7-dashboard/plugin';
+// import { PluginPage, PluginPageType } from '@api7-dashboard/plugin';
 import PluginOrchestration from '@api7-dashboard/pluginchart';
+import PluginPage from '@/components/Plugin';
 
 type Props = {
   data: {
-    plugins: PluginPageType.FinalData;
+    plugins: PluginComponent.Data;
     script: Record<string, any>;
   };
-  onChange(data: { plugins: PluginPageType.FinalData; script: any }): void;
+  onChange(data: { plugins: PluginComponent.Data; script: any }): void;
   readonly?: boolean;
-  isForceHttps: boolean
+  isForceHttps: boolean;
 };
 
 type Mode = 'NORMAL' | 'DRAW';
@@ -61,42 +62,40 @@ const Page: React.FC<Props> = ({ data, onChange, readonly = false, isForceHttps
         </Radio.Group>
         {Boolean(disableDraw) && (
           <div style={{ marginLeft: '10px' }}>
-            <Tooltip placement="right" title={() => {
-              // NOTE: forceHttps do not support DRAW mode
-              // TODO: i18n
-              const titleArr: string[] = [];
-              if (!isChrome) {
-                titleArr.push('插件编排仅支持 Chrome 浏览器。');
-              }
-              if (isForceHttps) {
-                titleArr.push('当步骤一中 重定向 选择为 启用 HTTPS 时，不可使用插件编排模式。');
-              }
-              return (
-                titleArr.map((item, index) => `${index + 1}.${item}`).join("")
-              )
-            }}>
+            <Tooltip
+              placement="right"
+              title={() => {
+                // NOTE: forceHttps do not support DRAW mode
+                // TODO: i18n
+                const titleArr: string[] = [];
+                if (!isChrome) {
+                  titleArr.push('插件编排仅支持 Chrome 浏览器。');
+                }
+                if (isForceHttps) {
+                  titleArr.push('当步骤一中 重定向 选择为 启用 HTTPS 时，不可使用插件编排模式。');
+                }
+                return titleArr.map((item, index) => `${index + 1}.${item}`).join('');
+              }}
+            >
               <QuestionCircleOutlined />
             </Tooltip>
           </div>
         )}
       </div>
-      {
-        Boolean(mode === 'NORMAL') && (
-          <PluginPage
-            initialData={plugins}
-            onChange={(pluginsData) => onChange({ plugins: pluginsData, script: {} })}
-          />
-        )
-      }
-      {
-        Boolean(mode === 'DRAW') && (
-          <PluginOrchestration
-            data={script?.chart}
-            onChange={(scriptData) => onChange({ plugins: {}, script: scriptData })}
-            readonly={readonly}
-          />
-        )
-      }
+      {Boolean(mode === 'NORMAL') && (
+        <PluginPage
+          initialData={plugins}
+          schemaType="route"
+          onChange={(pluginsData) => onChange({ plugins: pluginsData, script: {} })}
+        />
+      )}
+      {Boolean(mode === 'DRAW') && (
+        <PluginOrchestration
+          data={script?.chart}
+          onChange={(scriptData) => onChange({ plugins: {}, script: scriptData })}
+          readonly={readonly}
+        />
+      )}
     </>
   );
 };

From 44ca4f210a6ee9fe70a5b12f4cfde655d468ae30 Mon Sep 17 00:00:00 2001
From: juzhiyuan <juzhiyuan@apache.org>
Date: Sat, 28 Nov 2020 09:05:17 +0800
Subject: [PATCH 2/8] chore: format codes

---
 web/config/config.ts                                     | 2 +-
 web/src/e2e/Login.e2e.js                                 | 7 ++-----
 web/src/e2e/Logout.e2e.js                                | 9 +++------
 web/src/e2e/service.js                                   | 2 +-
 web/src/helpers.tsx                                      | 6 +++---
 .../pages/Route/components/Step1/MatchingRulesView.tsx   | 2 +-
 .../pages/Route/components/Step1/RequestConfigView.tsx   | 2 +-
 7 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/web/config/config.ts b/web/config/config.ts
index f71d512589..024b2237cb 100644
--- a/web/config/config.ts
+++ b/web/config/config.ts
@@ -61,5 +61,5 @@ export default defineConfig({
   manifest: {
     basePath: '/',
   },
-  outputPath: '../output/html'
+  outputPath: '../output/html',
 });
diff --git a/web/src/e2e/Login.e2e.js b/web/src/e2e/Login.e2e.js
index 1829daa912..5ea3ac91a5 100644
--- a/web/src/e2e/Login.e2e.js
+++ b/web/src/e2e/Login.e2e.js
@@ -18,10 +18,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 const puppeteer = require('puppeteer');
 
-const {
-  setupLogin,
-  BASE_URL
-} = require('./service')
+const { setupLogin, BASE_URL } = require('./service');
 
 let browser;
 const domSelectors = {
@@ -38,7 +35,7 @@ const loginFailedData = {
 beforeAll(async () => {
   browser = await puppeteer.launch({
     headless: true,
-    slowMo: 100
+    slowMo: 100,
   });
 });
 
diff --git a/web/src/e2e/Logout.e2e.js b/web/src/e2e/Logout.e2e.js
index cef92cfd26..c10083c783 100644
--- a/web/src/e2e/Logout.e2e.js
+++ b/web/src/e2e/Logout.e2e.js
@@ -18,24 +18,21 @@
 /* eslint-disable import/no-extraneous-dependencies */
 const puppeteer = require('puppeteer');
 
-const {
-  setupLogin
-} = require('./service')
+const { setupLogin } = require('./service');
 
 let browser;
 const domSelectors = {
   userProfile: '.ant-space-horizontal div:nth-child(2)',
   dropdownMenuItem: '.ant-dropdown-menu-item',
-  buttonLogin: ".ant-btn-lg",
+  buttonLogin: '.ant-btn-lg',
   logoutButton: '.ant-dropdown > ul > li:nth-child(3)',
 };
 
 describe('Logout', () => {
-
   beforeAll(async () => {
     browser = await puppeteer.launch({
       headless: true,
-      slowMo: 100
+      slowMo: 100,
     });
   });
 
diff --git a/web/src/e2e/service.js b/web/src/e2e/service.js
index 84bfcb0d5d..49279cd005 100644
--- a/web/src/e2e/service.js
+++ b/web/src/e2e/service.js
@@ -36,4 +36,4 @@ export const setupLogin = async (page) => {
   await page.click(domSelectors.buttonLogin);
   await page.waitForSelector(domSelectors.loginSuccessIcon);
   await page.waitForNavigation();
-}
+};
diff --git a/web/src/helpers.tsx b/web/src/helpers.tsx
index ac8eb840e1..34860ab328 100644
--- a/web/src/helpers.tsx
+++ b/web/src/helpers.tsx
@@ -101,8 +101,8 @@ export const getUrlQuery: (key: string) => string | false = (key: string) => {
 export const timestampToLocaleString = (timestamp: number) => {
   if (!timestamp) {
     // TODO: i18n
-    return "None"
+    return 'None';
   }
 
-  return moment.unix(timestamp).format('YYYY-MM-DD HH:mm:ss')
-}
+  return moment.unix(timestamp).format('YYYY-MM-DD HH:mm:ss');
+};
diff --git a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
index 9ba0b80161..48260e799a 100644
--- a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
+++ b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
@@ -149,7 +149,7 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
             </Space>
           ),
         },
-  ].filter(item => Object.keys(item).length)
+  ].filter((item) => Object.keys(item).length);
 
   const renderModal = () => (
     <Modal
diff --git a/web/src/pages/Route/components/Step1/RequestConfigView.tsx b/web/src/pages/Route/components/Step1/RequestConfigView.tsx
index 0d4181552d..20d8457503 100644
--- a/web/src/pages/Route/components/Step1/RequestConfigView.tsx
+++ b/web/src/pages/Route/components/Step1/RequestConfigView.tsx
@@ -30,7 +30,7 @@ import {
 const RequestConfigView: React.FC<RouteModule.Step1PassProps> = ({
   form,
   disabled,
-  onChange = () => { },
+  onChange = () => {},
 }) => {
   const { formatMessage } = useIntl();
   const HostList = () => (

From e98bb4b312d182c95cf4f31fb5f687ff7fcbfd63 Mon Sep 17 00:00:00 2001
From: juzhiyuan <juzhiyuan@apache.org>
Date: Sat, 28 Nov 2020 10:36:34 +0800
Subject: [PATCH 3/8] feat(Plugin): remove a7 plugin

---
 web/src/components/Plugin/PluginPage.tsx      | 41 +++++++++----------
 web/src/components/Plugin/data.tsx            |  3 --
 web/src/components/Plugin/typing.d.ts         |  1 -
 web/src/pages/Route/Create.tsx                |  2 +-
 .../components/CreateStep4/CreateStep4.tsx    |  2 +-
 .../pages/Route/components/Step3/index.tsx    |  1 -
 6 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index d5bfabd377..cbb071d2f5 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -21,7 +21,6 @@ import { PanelSection } from '@api7-dashboard/ui';
 import { validate } from 'json-schema';
 
 import { fetchSchema, getList } from './service';
-import { PLUGIN_MAPPER_SOURCE } from './data';
 import CodeMirrorDrawer from './CodeMirrorDrawer';
 
 type Props = {
@@ -57,6 +56,24 @@ const PluginPage: React.FC<Props> = ({
     getList().then(setPlugin);
   }, []);
 
+  const validateData = (pluginName: string, value: PluginComponent.Data) => {
+    fetchSchema(pluginName, schemaType).then((schema) => {
+      const { valid, errors } = validate(value, schema);
+      if (valid) {
+        setName(NEVER_EXIST_PLUGIN_FLAG);
+        onChange({ ...initialData, [pluginName]: { ...value, disable: false } });
+        return;
+      }
+      errors?.forEach((item) => {
+        notification.error({
+          message: 'Invalid plugin data',
+          description: item.message,
+        });
+      });
+      setName(pluginName);
+    });
+  };
+
   return (
     <>
       <style>{`
@@ -121,7 +138,6 @@ const PluginPage: React.FC<Props> = ({
                     extra={[
                       <Tooltip title="Setting" key={`plugin-card-${item.name}-extra-tooltip-2`}>
                         <Button
-                          disabled={PLUGIN_MAPPER_SOURCE[item.name]?.noConfiguration}
                           shape="circle"
                           icon={<SettingFilled />}
                           style={{ marginRight: 10, marginLeft: 10 }}
@@ -136,11 +152,7 @@ const PluginPage: React.FC<Props> = ({
                         disabled={readonly}
                         onChange={(isChecked) => {
                           if (isChecked) {
-                            setName(item.name);
-                            onChange({
-                              ...initialData,
-                              [item.name]: { ...initialData[item.name], disable: false },
-                            });
+                            validateData(item.name, initialData[item.name]);
                           } else {
                             onChange({
                               ...initialData,
@@ -166,20 +178,7 @@ const PluginPage: React.FC<Props> = ({
           setName(NEVER_EXIST_PLUGIN_FLAG);
         }}
         onSubmit={(value) => {
-          fetchSchema(name, schemaType).then((schema) => {
-            const { valid, errors } = validate(value, schema);
-            if (valid) {
-              onChange({ ...initialData, [name]: { ...value, disable: false } });
-              setName(NEVER_EXIST_PLUGIN_FLAG);
-              return;
-            }
-            errors?.forEach((item) => {
-              notification.error({
-                message: 'Invalid plugin data',
-                description: item.message,
-              });
-            });
-          });
+          validateData(name, value);
         }}
       />
     </>
diff --git a/web/src/components/Plugin/data.tsx b/web/src/components/Plugin/data.tsx
index 29762a0c78..df66c3b224 100644
--- a/web/src/components/Plugin/data.tsx
+++ b/web/src/components/Plugin/data.tsx
@@ -33,7 +33,6 @@ export const PLUGIN_MAPPER_SOURCE: Record<string, Omit<PluginComponent.Meta, 'na
   },
   prometheus: {
     category: 'Observability',
-    noConfiguration: true,
     priority: 1,
     avatar: <IconFont type="iconPrometheus_software_logo" />,
   },
@@ -60,7 +59,6 @@ export const PLUGIN_MAPPER_SOURCE: Record<string, Omit<PluginComponent.Meta, 'na
   },
   'node-status': {
     category: 'Other',
-    noConfiguration: true,
   },
   'jwt-auth': {
     category: 'Authentication',
@@ -146,7 +144,6 @@ export const PLUGIN_MAPPER_SOURCE: Record<string, Omit<PluginComponent.Meta, 'na
   },
   'batch-requests': {
     category: 'Other',
-    noConfiguration: true,
   },
   'http-logger': {
     category: 'Log',
diff --git a/web/src/components/Plugin/typing.d.ts b/web/src/components/Plugin/typing.d.ts
index c9233eaeb1..3a899aa02b 100644
--- a/web/src/components/Plugin/typing.d.ts
+++ b/web/src/components/Plugin/typing.d.ts
@@ -31,7 +31,6 @@ declare namespace PluginComponent {
     name: string;
     category: Category;
     hidden?: boolean;
-    noConfiguration?: boolean;
     // Note: Plugins are sorted by priority under the same category in the frontend, the smaller the number, the higher the priority. The default value is 9999.
     priority?: number;
     avatar?: React.ReactNode;
diff --git a/web/src/pages/Route/Create.tsx b/web/src/pages/Route/Create.tsx
index 379e83c6a4..73e3e9e034 100644
--- a/web/src/pages/Route/Create.tsx
+++ b/web/src/pages/Route/Create.tsx
@@ -65,7 +65,7 @@ const Page: React.FC<Props> = (props) => {
   const [form2] = Form.useForm();
   const upstreamRef = useRef<any>();
 
-  const [step, setStep] = useState(3);
+  const [step, setStep] = useState(1);
   const [stepHeader, setStepHeader] = useState(STEP_HEADER_4);
   const [chart, setChart] = useState(INIT_CHART);
 
diff --git a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
index 5e153e38ae..f0c668a1d6 100644
--- a/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
+++ b/web/src/pages/Route/components/CreateStep4/CreateStep4.tsx
@@ -17,9 +17,9 @@
 import React from 'react';
 import { FormInstance } from 'antd/lib/form';
 import { useIntl } from 'umi';
-import { PluginPage } from '@api7-dashboard/plugin';
 import PluginOrchestration from '@api7-dashboard/pluginchart';
 
+import PluginPage from '@/components/Plugin';
 import Step1 from '../Step1';
 import Step2 from '../Step2';
 
diff --git a/web/src/pages/Route/components/Step3/index.tsx b/web/src/pages/Route/components/Step3/index.tsx
index 324b86926e..3eb30b8f08 100644
--- a/web/src/pages/Route/components/Step3/index.tsx
+++ b/web/src/pages/Route/components/Step3/index.tsx
@@ -19,7 +19,6 @@ import { Radio, Tooltip } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { isChrome } from 'react-device-detect';
 
-// import { PluginPage, PluginPageType } from '@api7-dashboard/plugin';
 import PluginOrchestration from '@api7-dashboard/pluginchart';
 import PluginPage from '@/components/Plugin';
 

From e769114fc387f9e70f18aab5d4e7848621a026ec Mon Sep 17 00:00:00 2001
From: juzhiyuan <juzhiyuan@apache.org>
Date: Sat, 28 Nov 2020 11:13:45 +0800
Subject: [PATCH 4/8] feat(Plugin): remove @api7-dashboard/plugin

---
 web/package.json                              |  1 -
 web/src/components/Plugin/index.ts            |  1 +
 web/src/pages/Consumer/Create.tsx             | 21 ++++++++++---------
 web/src/pages/Consumer/components/Preview.tsx |  4 ++--
 web/yarn.lock                                 | 12 -----------
 5 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/web/package.json b/web/package.json
index 05ce18f23e..39f92982ef 100644
--- a/web/package.json
+++ b/web/package.json
@@ -55,7 +55,6 @@
     "@ant-design/icons": "^4.0.0",
     "@ant-design/pro-layout": "^6.0.0",
     "@ant-design/pro-table": "2.6.3",
-    "@api7-dashboard/plugin": "^1.0.10",
     "@api7-dashboard/pluginchart": "^1.0.14",
     "@api7-dashboard/ui": "^1.0.3",
     "@rjsf/antd": "2.2.0",
diff --git a/web/src/components/Plugin/index.ts b/web/src/components/Plugin/index.ts
index 21da0223fa..940c9f0e88 100644
--- a/web/src/components/Plugin/index.ts
+++ b/web/src/components/Plugin/index.ts
@@ -15,3 +15,4 @@
  * limitations under the License.
  */
 export { default } from './PluginPage';
+export { PLUGIN_MAPPER_SOURCE } from './data';
diff --git a/web/src/pages/Consumer/Create.tsx b/web/src/pages/Consumer/Create.tsx
index d866076151..cab68b9a23 100644
--- a/web/src/pages/Consumer/Create.tsx
+++ b/web/src/pages/Consumer/Create.tsx
@@ -18,9 +18,9 @@ import React, { useState, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Steps, notification, Form } from 'antd';
 import { history, useIntl } from 'umi';
-import { PluginPage, PluginPageType, PLUGIN_MAPPER_SOURCE } from '@api7-dashboard/plugin';
 
 import ActionBar from '@/components/ActionBar';
+import PluginPage, { PLUGIN_MAPPER_SOURCE } from '@/components/Plugin';
 
 import Step1 from './components/Step1';
 import Preview from './components/Preview';
@@ -28,7 +28,7 @@ import { fetchItem, create, update } from './service';
 
 const Page: React.FC = (props) => {
   const [step, setStep] = useState(1);
-  const [plugins, setPlugins] = useState<PluginPageType.FinalData>({});
+  const [plugins, setPlugins] = useState<PluginComponent.Data>({});
   const [form1] = Form.useForm();
   const { formatMessage } = useIntl();
 
@@ -70,14 +70,15 @@ const Page: React.FC = (props) => {
         setStep(nextStep);
       });
     } else if (nextStep === 3) {
-      const authPluginNames = Object.keys(PLUGIN_MAPPER_SOURCE).filter(
-        (pluginName) => PLUGIN_MAPPER_SOURCE[pluginName].category === 'Authentication',
-      );
-      const currentAuthPlugin = Object.keys(plugins).filter((plugin) =>
-        authPluginNames.includes(plugin),
-      );
-      const currentAuthPluginLen = currentAuthPlugin.length;
-      if (currentAuthPluginLen > 1 || currentAuthPluginLen === 0) {
+      // TRICK: waiting for https://github.com/apache/apisix-dashboard/issues/532
+      if (
+        !Object.keys(plugins).filter(
+          (name) =>
+            (name.indexOf('auth') !== -1 ||
+              PLUGIN_MAPPER_SOURCE[name]?.category === 'Authentication') &&
+            !plugins[name].disable,
+        ).length
+      ) {
         notification.warning({
           message: formatMessage({
             id: 'page.consumer.notification.warning.enableAuthenticationPlugin',
diff --git a/web/src/pages/Consumer/components/Preview.tsx b/web/src/pages/Consumer/components/Preview.tsx
index 92e4b01a1a..a1d1dafd6a 100644
--- a/web/src/pages/Consumer/components/Preview.tsx
+++ b/web/src/pages/Consumer/components/Preview.tsx
@@ -16,13 +16,13 @@
  */
 import React from 'react';
 import { FormInstance } from 'antd/lib/form';
-import { PluginPage, PluginPageType } from '@api7-dashboard/plugin';
 
+import PluginPage from '@/components/Plugin';
 import Step1 from './Step1';
 
 type Props = {
   form1: FormInstance;
-  plugins: PluginPageType.FinalData;
+  plugins: PluginComponent.Data;
 };
 
 const Page: React.FC<Props> = ({ form1, plugins }) => {
diff --git a/web/yarn.lock b/web/yarn.lock
index 997d175721..59213ac99e 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -187,18 +187,6 @@
     lodash "^4.17.15"
     resize-observer-polyfill "^1.5.0"
 
-"@api7-dashboard/plugin@^1.0.10":
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/@api7-dashboard/plugin/-/plugin-1.0.10.tgz#9f554f62c7c1f9be9ee36f084cef2fb3d2296ae5"
-  integrity sha512-ewPU6o6WOehn3pnV0DRyNGSyf4OrKuh3mVe11EUPnp4rtzvikjlll91xi27Zu33r+Wm1Jvvm+T6OkwcgXFVdPg==
-  dependencies:
-    "@rjsf/antd" "^2.3.0"
-    "@rjsf/core" "^2.3.0"
-    "@uiw/react-codemirror" "^3.0.1"
-    ajv "^6.12.5"
-    json-schema "^0.2.5"
-    set-value "^3.0.2"
-
 "@api7-dashboard/plugin@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@api7-dashboard/plugin/-/plugin-1.0.6.tgz#d17bd53da9151c0fee2d5591965b642bc7e1005d"

From cf9912aaad530f956a7c54f4cb88550b4d07c2ca Mon Sep 17 00:00:00 2001
From: juzhiyuan <juzhiyuan@apache.org>
Date: Mon, 30 Nov 2020 10:58:10 +0800
Subject: [PATCH 5/8] feat: added codes format

---
 web/package.json                              |   2 +
 .../components/Plugin/CodeMirrorDrawer.tsx    | 137 +++++++++++++-----
 web/src/components/Plugin/PluginPage.tsx      |  10 +-
 web/yarn.lock                                 |  78 +++++++++-
 4 files changed, 178 insertions(+), 49 deletions(-)

diff --git a/web/package.json b/web/package.json
index 39f92982ef..3f088fd582 100644
--- a/web/package.json
+++ b/web/package.json
@@ -63,6 +63,7 @@
     "antd": "^4.4.0",
     "classnames": "^2.2.6",
     "dayjs": "1.8.28",
+    "js-beautify": "^1.13.0",
     "json-schema": "0.2.5",
     "lodash": "^4.17.11",
     "moment": "^2.25.3",
@@ -87,6 +88,7 @@
     "@types/express": "^4.17.0",
     "@types/history": "^4.7.2",
     "@types/jest": "^26.0.0",
+    "@types/js-beautify": "^1.13.1",
     "@types/lodash": "^4.14.144",
     "@types/node-forge": "0.9.3",
     "@types/qs": "^6.5.3",
diff --git a/web/src/components/Plugin/CodeMirrorDrawer.tsx b/web/src/components/Plugin/CodeMirrorDrawer.tsx
index b382d85d66..95ef951663 100644
--- a/web/src/components/Plugin/CodeMirrorDrawer.tsx
+++ b/web/src/components/Plugin/CodeMirrorDrawer.tsx
@@ -15,10 +15,13 @@
  * limitations under the License.
  */
 import React, { useRef } from 'react';
-import { Drawer, Button, notification } from 'antd';
+import { Drawer, Button, notification, PageHeader } from 'antd';
 import CodeMirror from '@uiw/react-codemirror';
+import { js_beautify } from 'js-beautify';
+import { LinkOutlined } from '@ant-design/icons';
 
 type Props = {
+  name: string;
   visible?: boolean;
   data?: object;
   readonly?: boolean;
@@ -27,6 +30,7 @@ type Props = {
 };
 
 const CodeMirrorDrawer: React.FC<Props> = ({
+  name,
   visible = false,
   readonly = false,
   data = {},
@@ -34,49 +38,104 @@ const CodeMirrorDrawer: React.FC<Props> = ({
   onSubmit,
 }) => {
   const ref = useRef<any>(null);
+
+  const formatCodes = () => {
+    try {
+      if (ref.current) {
+        ref.current.editor.setValue(
+          js_beautify(ref.current.editor.getValue(), {
+            indent_size: 2,
+          }),
+        );
+      }
+    } catch (error) {
+      notification.error({
+        message: 'Format failed',
+      });
+    }
+  };
+
   return (
-    <Drawer
-      visible={visible}
-      width={500}
-      onClose={onClose}
-      footer={
-        !readonly && (
-          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <Button onClick={onClose}>Cancel</Button>
+    <>
+      <style>
+        {`
+        .ant-drawer-body {
+          padding: 0;
+        }
+        .ant-page-header.ant-page-header-compact {
+          height: 100%;
+        }
+        .ant-page-header-content {
+          height: 95%;
+        }
+      `}
+      </style>
+      <Drawer
+        title="Plugin Data Editor"
+        visible={visible}
+        width={500}
+        maskClosable={false}
+        destroyOnClose
+        onClose={onClose}
+        footer={
+          !readonly && (
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Button onClick={onClose}>Cancel</Button>
+              <Button
+                type="primary"
+                style={{ marginRight: 8, marginLeft: 8 }}
+                onClick={() => {
+                  try {
+                    if (onSubmit) {
+                      onSubmit(JSON.parse(ref.current?.editor.getValue()));
+                    }
+                  } catch (error) {
+                    notification.error({
+                      message: 'Invalid JSON data',
+                    });
+                  }
+                }}
+              >
+                Submit
+              </Button>
+            </div>
+          )
+        }
+      >
+        <PageHeader
+          title=""
+          subTitle={`Current Plugin: ${name}`}
+          ghost={false}
+          extra={[
             <Button
-              type="primary"
-              style={{ marginRight: 8, marginLeft: 8 }}
+              type="default"
+              icon={<LinkOutlined />}
               onClick={() => {
-                try {
-                  if (onSubmit) {
-                    onSubmit(JSON.parse(ref.current?.editor.getValue()));
-                  }
-                } catch (error) {
-                  notification.error({
-                    message: 'Invalid JSON data',
-                  });
-                }
+                window.open(`https://github.com/apache/apisix/blob/master/doc/plugins/${name}.md`);
               }}
             >
-              Submit
-            </Button>
-          </div>
-        )
-      }
-    >
-      <CodeMirror
-        ref={ref}
-        value={JSON.stringify(data, null, 2)}
-        options={{
-          mode: 'json-ld',
-          readOnly: readonly ? 'nocursor' : '',
-          lineWrapping: true,
-          lineNumbers: true,
-          showCursorWhenSelecting: true,
-          autofocus: true,
-        }}
-      />
-    </Drawer>
+              Document
+            </Button>,
+            <Button type="primary" onClick={formatCodes}>
+              Format
+            </Button>,
+          ]}
+        >
+          <CodeMirror
+            ref={ref}
+            value={JSON.stringify(data, null, 2)}
+            options={{
+              mode: 'json-ld',
+              readOnly: readonly ? 'nocursor' : '',
+              lineWrapping: true,
+              lineNumbers: true,
+              showCursorWhenSelecting: true,
+              autofocus: true,
+            }}
+          />
+        </PageHeader>
+      </Drawer>
+    </>
   );
 };
 
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index cbb071d2f5..8c5ab79122 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -125,14 +125,7 @@ const PluginPage: React.FC<Props> = ({
                           }}
                         />
                       ),
-                      <a
-                        href={`https://github.com/apache/apisix/blob/master/doc/plugins/${item.name}.md`}
-                        style={{ color: 'inherit' }}
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        {item.name}
-                      </a>,
+                      <span>{item.name}</span>,
                     ]}
                     style={{ height: 66 }}
                     extra={[
@@ -171,6 +164,7 @@ const PluginPage: React.FC<Props> = ({
         </Content>
       </Layout>
       <CodeMirrorDrawer
+        name={name}
         visible={name !== NEVER_EXIST_PLUGIN_FLAG}
         data={initialData[name]}
         readonly={readonly}
diff --git a/web/yarn.lock b/web/yarn.lock
index 59213ac99e..754e9a97b5 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2383,6 +2383,11 @@
     jest-diff "^25.2.1"
     pretty-format "^25.2.1"
 
+"@types/js-beautify@^1.13.1":
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/@types/js-beautify/-/js-beautify-1.13.1.tgz#d4739266c5dcad561226cd1ec5407fa0542d863d"
+  integrity sha512-F3YCoZS//n74Wu+hxoVrxX1H8qaWo+WAgQ+ObmFH4ZFwI0fIwiJTW7pvkCRShw8ST7+ej7sB68K+ZHAZgK4S4Q==
+
 "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5":
   version "7.0.5"
   resolved "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
@@ -3744,6 +3749,11 @@ abab@^2.0.0:
   resolved "https://registry.npm.taobao.org/abab/download/abab-2.0.4.tgz?cache=0&sync_timestamp=1596258082074&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fabab%2Fdownload%2Fabab-2.0.4.tgz#6dfa57b417ca06d21b2478f0e638302f99c2405c"
   integrity sha1-bfpXtBfKBtIbJHjw5jgwL5nCQFw=
 
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
 accepts@~1.3.5, accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -5529,6 +5539,14 @@ concat-stream@^1.5.0, concat-stream@^1.5.2, concat-stream@^1.6.2:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+config-chain@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
+  integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==
+  dependencies:
+    ini "^1.3.4"
+    proto-list "~1.2.1"
+
 confusing-browser-globals@^1.0.5, confusing-browser-globals@^1.0.9:
   version "1.0.9"
   resolved "https://registry.npm.taobao.org/confusing-browser-globals/download/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd"
@@ -6584,6 +6602,16 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+editorconfig@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
+  dependencies:
+    commander "^2.19.0"
+    lru-cache "^4.1.5"
+    semver "^5.6.0"
+    sigmund "^1.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -9047,7 +9075,7 @@ inherits@2.0.3:
   resolved "https://registry.npm.taobao.org/inherits/download/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-ini@^1.3.5:
+ini@^1.3.4, ini@^1.3.5:
   version "1.3.5"
   resolved "https://registry.npm.taobao.org/ini/download/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha1-7uJfVtscnsYIXgwid4CD9Zar+Sc=
@@ -10202,6 +10230,17 @@ joi@^17.1.1:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
+js-beautify@^1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.13.0.tgz#a056d5d3acfd4918549aae3ab039f9f3c51eebb2"
+  integrity sha512-/Tbp1OVzZjbwzwJQFIlYLm9eWQ+3aYbBXLSaqb1mEJzhcQAfrqMMQYtjb6io+U6KpD0ID4F+Id3/xcjH3l/sqA==
+  dependencies:
+    config-chain "^1.1.12"
+    editorconfig "^0.15.3"
+    glob "^7.1.3"
+    mkdirp "^1.0.4"
+    nopt "^5.0.0"
+
 js-file-download@^0.4.1:
   version "0.4.12"
   resolved "https://registry.npm.taobao.org/js-file-download/download/js-file-download-0.4.12.tgz#10c70ef362559a5b23cdbdc3bd6f399c3d91d821"
@@ -10964,6 +11003,14 @@ lowlight@^1.14.0:
     fault "^1.0.0"
     highlight.js "~10.1.0"
 
+lru-cache@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npm.taobao.org/lru-cache/download/lru-cache-5.1.1.tgz?cache=0&sync_timestamp=1594427569171&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -11487,7 +11534,7 @@ mkdirp@0.5.x, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp
   dependencies:
     minimist "^1.2.5"
 
-mkdirp@1.0.4, mkdirp@^1.0.0:
+mkdirp@1.0.4, mkdirp@^1.0.0, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmkdirp%2Fdownload%2Fmkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34=
@@ -11777,6 +11824,13 @@ node-releases@^1.1.13, node-releases@^1.1.60:
   resolved "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.60.tgz?cache=0&sync_timestamp=1595485348533&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-releases%2Fdownload%2Fnode-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
   integrity sha1-aUi9/OgobwtdDlqI6DhOlU3+cIQ=
 
+nopt@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
+  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
+  dependencies:
+    abbrev "1"
+
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npm.taobao.org/normalize-package-data/download/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -13482,6 +13536,11 @@ property-information@^5.0.0:
   dependencies:
     xtend "^4.0.0"
 
+proto-list@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+  integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
+
 protocols@^1.1.0, protocols@^1.4.0:
   version "1.4.8"
   resolved "https://registry.npm.taobao.org/protocols/download/protocols-1.4.8.tgz#48eea2d8f58d9644a4a32caae5d5db290a075ce8"
@@ -13512,6 +13571,11 @@ ps-tree@1.2.0:
   dependencies:
     event-stream "=3.3.4"
 
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
+
 psl@^1.1.28:
   version "1.8.0"
   resolved "https://registry.npm.taobao.org/psl/download/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -15689,6 +15753,11 @@ side-channel@^1.0.2:
     es-abstract "^1.18.0-next.0"
     object-inspect "^1.8.0"
 
+sigmund@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -18267,6 +18336,11 @@ y18n@^4.0.0:
   resolved "https://registry.npm.taobao.org/y18n/download/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha1-le+U+F7MgdAHwmThkKEg8KPIVms=
 
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
+
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.npm.taobao.org/yallist/download/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"

From 530b88604425fffc4fea0be1bb17d8276263d11d Mon Sep 17 00:00:00 2001
From: juzhiyuan <juzhiyuan@apache.org>
Date: Thu, 10 Dec 2020 10:21:44 +0800
Subject: [PATCH 6/8] feat: use local icon files

---
 web/src/app.tsx                               |  2 +
 .../IconFont/IconFont.tsx}                    | 19 +++--
 .../IconFont.tsx => IconFont/index.ts}        |  9 +-
 web/src/components/Plugin/data.tsx            | 14 +--
 web/src/global.less                           | 12 +++
 web/src/helpers.tsx                           | 14 +--
 web/src/libs/iconfont.js                      | 85 +++++++++++++++++++
 7 files changed, 128 insertions(+), 27 deletions(-)
 rename web/src/{iconfont.ts => components/IconFont/IconFont.tsx} (74%)
 rename web/src/components/{Plugin/IconFont.tsx => IconFont/index.ts} (75%)
 create mode 100644 web/src/libs/iconfont.js

diff --git a/web/src/app.tsx b/web/src/app.tsx
index 41921f1790..8e67c873f4 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -26,6 +26,8 @@ import RightContent from '@/components/RightContent';
 import Footer from '@/components/Footer';
 import { queryCurrent } from '@/services/user';
 import { getMenuData, errorHandler } from '@/helpers';
+
+import './libs/iconfont';
 import defaultSettings from '../config/defaultSettings';
 
 export async function getInitialState(): Promise<{
diff --git a/web/src/iconfont.ts b/web/src/components/IconFont/IconFont.tsx
similarity index 74%
rename from web/src/iconfont.ts
rename to web/src/components/IconFont/IconFont.tsx
index df1b5077d3..540ddfc38a 100644
--- a/web/src/iconfont.ts
+++ b/web/src/components/IconFont/IconFont.tsx
@@ -14,11 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createFromIconfontCN } from '@ant-design/icons';
+import React from 'react';
 
-// NOTE: 增加新图标时，请访问 https://www.iconfont.cn/manage/index 进行图标管理
-const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_1918158_alfpv3n06l6.js',
-});
+type Props = {
+  name: string;
+};
+
+/**
+ * Icon Font
+ * https://www.iconfont.cn/help/detail?helptype=code
+ */
+const IconFont: React.FC<Props> = ({ name }) => (
+  <svg className="icon" aria-hidden="true">
+    <use xlinkHref={`#${name}`} />
+  </svg>
+);
 
 export default IconFont;
diff --git a/web/src/components/Plugin/IconFont.tsx b/web/src/components/IconFont/index.ts
similarity index 75%
rename from web/src/components/Plugin/IconFont.tsx
rename to web/src/components/IconFont/index.ts
index 488972064c..a0209291eb 100644
--- a/web/src/components/Plugin/IconFont.tsx
+++ b/web/src/components/IconFont/index.ts
@@ -14,11 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createFromIconfontCN } from '@ant-design/icons';
-
-// NOTE: Icons from AliCDN https://www.iconfont.cn/manage/index
-const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2088089_a3klmsocd15.js',
-});
-
-export default IconFont;
+export { default } from './IconFont';
diff --git a/web/src/components/Plugin/data.tsx b/web/src/components/Plugin/data.tsx
index df66c3b224..40b1d608d7 100644
--- a/web/src/components/Plugin/data.tsx
+++ b/web/src/components/Plugin/data.tsx
@@ -16,7 +16,7 @@
  */
 import React from 'react';
 
-import IconFont from './IconFont';
+import IconFont from '../IconFont';
 
 export const PLUGIN_MAPPER_SOURCE: Record<string, Omit<PluginComponent.Meta, 'name'>> = {
   'limit-req': {
@@ -34,12 +34,12 @@ export const PLUGIN_MAPPER_SOURCE: Record<string, Omit<PluginComponent.Meta, 'na
   prometheus: {
     category: 'Observability',
     priority: 1,
-    avatar: <IconFont type="iconPrometheus_software_logo" />,
+    avatar: <IconFont name="iconPrometheus_software_logo" />,
   },
   skywalking: {
     category: 'Observability',
     priority: 2,
-    avatar: <IconFont type="iconskywalking" />,
+    avatar: <IconFont name="iconskywalking" />,
   },
   zipkin: {
     category: 'Observability',
@@ -63,12 +63,12 @@ export const PLUGIN_MAPPER_SOURCE: Record<string, Omit<PluginComponent.Meta, 'na
   'jwt-auth': {
     category: 'Authentication',
     priority: 2,
-    avatar: <IconFont type="iconjwt-3" />,
+    avatar: <IconFont name="iconjwt-3" />,
   },
   'authz-keycloak': {
     category: 'Authentication',
     priority: 5,
-    avatar: <IconFont type="iconkeycloak_icon_32px" />,
+    avatar: <IconFont name="iconkeycloak_icon_32px" />,
   },
   'ip-restriction': {
     category: 'Security',
@@ -86,7 +86,7 @@ export const PLUGIN_MAPPER_SOURCE: Record<string, Omit<PluginComponent.Meta, 'na
   'openid-connect': {
     category: 'Authentication',
     priority: 4,
-    avatar: <IconFont type="iconicons8-openid" />,
+    avatar: <IconFont name="iconicons8-openid" />,
   },
   'proxy-rewrite': {
     category: 'Other',
@@ -124,7 +124,7 @@ export const PLUGIN_MAPPER_SOURCE: Record<string, Omit<PluginComponent.Meta, 'na
   'kafka-logger': {
     category: 'Log',
     priority: 1,
-    avatar: <IconFont type="iconApache_kafka" />,
+    avatar: <IconFont name="iconApache_kafka" />,
   },
   cors: {
     category: 'Security',
diff --git a/web/src/global.less b/web/src/global.less
index b86beab960..aa176711c1 100644
--- a/web/src/global.less
+++ b/web/src/global.less
@@ -49,11 +49,13 @@ ol {
   .ant-table {
     width: 100%;
     overflow-x: auto;
+
     &-thead > tr,
     &-tbody > tr {
       > th,
       > td {
         white-space: pre;
+
         > span {
           display: block;
         }
@@ -88,3 +90,13 @@ ol {
 .ant-layout.ant-layout-has-sider > .ant-layout-content {
   overflow-x: unset;
 }
+
+// NOTE: compatible with IconFont
+.icon {
+  width: 1.2em;
+  height: 1.2em;
+  margin-right: 1em;
+  overflow: hidden;
+  vertical-align: -0.15em;
+  fill: currentColor;
+}
diff --git a/web/src/helpers.tsx b/web/src/helpers.tsx
index 34860ab328..a0ffe74f51 100644
--- a/web/src/helpers.tsx
+++ b/web/src/helpers.tsx
@@ -21,39 +21,39 @@ import { history } from 'umi';
 import moment from 'moment';
 
 import { codeMessage } from './constants';
-import IconFont from './iconfont';
+import IconFont from './components/IconFont';
 
 export const getMenuData = (): MenuDataItem[] => {
   return [
     {
       name: 'metrics',
       path: '/metrics',
-      icon: <IconFont type="icondashboard" />,
+      icon: <IconFont name="icondashboard" />,
     },
     {
       name: 'routes',
       path: '/routes/list',
-      icon: <IconFont type="iconroute" />,
+      icon: <IconFont name="iconroute" />,
     },
     {
       name: 'ssl',
       path: '/ssl/list',
-      icon: <IconFont type="iconSSLshuzizhengshu" />,
+      icon: <IconFont name="iconssl" />,
     },
     {
       name: 'upstream',
       path: '/upstream/list',
-      icon: <IconFont type="iconupstream" />,
+      icon: <IconFont name="iconserver" />,
     },
     {
       name: 'consumer',
       path: '/consumer/list',
-      icon: <IconFont type="iconfuwuliebiao" />,
+      icon: <IconFont name="iconconsumer" />,
     },
     {
       name: 'setting',
       path: '/settings',
-      icon: <IconFont type="iconsetting" />,
+      icon: <IconFont name="iconsetting" />,
     },
   ];
 };
diff --git a/web/src/libs/iconfont.js b/web/src/libs/iconfont.js
new file mode 100644
index 0000000000..0c8d3d6a6f
--- /dev/null
+++ b/web/src/libs/iconfont.js
@@ -0,0 +1,85 @@
+/*
+* MIT License
+
+* Copyright (c) 2019 Alipay.inc
+
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*/
+/* eslint-disable */
+!(function (l) {
+  var c,
+    h,
+    t,
+    a,
+    i,
+    e,
+    z =
+      '<svg><symbol id="icondashboard" viewBox="0 0 1024 1024"><path d="M662.87 343.467l60.33 60.33-128.768 128.768a85.333 85.333 0 1 1-60.33-60.33l128.767-128.768zM85.332 512C85.333 276.352 276.352 85.333 512 85.333S938.667 276.352 938.667 512a425.813 425.813 0 0 1-156.758 330.453l-70.826-53.162a341.333 341.333 0 1 0-398.123 0l-70.87 53.162A425.813 425.813 0 0 1 85.334 512zM384 725.333h256v85.334H384v-85.334z"  ></path></symbol><symbol id="iconssl" viewBox="0 0 1024 1024"><path d="M167.1 99.1v825h684.6v-825H167.1z m653.5 790.8H198.2V133.3h622.4v756.6zM704 496.7c-2.2-3.3-2.1-2.9-7.9-9.2-2.8-3.1-5.8-5.7-9.2-8-83.6-54.1-171.5 4.6-171.5 83.8 0 17.4 4.2 33.8 11.7 48.2l-76 151.6 69.8-7.6 35.7 60.4 62.1-124 71 123.7 32.2-62.3L792 757l-81.1-141.5c18.8-32.6 20.6-76.2-6.9-118.8zM554.9 766.4l-21.3-36.1-41.7 4.5 50.7-101.2c15.8 17.4 37.4 29.5 61.8 33.2l0.3 0.5-49.8 99.1z m7.9-145.9c-15.3-15.3-23.7-35.7-23.7-57.3 0-21.6 8.4-42 23.7-57.3 15.3-15.3 35.7-23.7 57.3-23.7s42 8.4 57.3 23.7 23.7 35.7 23.7 57.3c0 21.6-8.4 42-23.7 57.3-15.3 15.3-35.7 23.7-57.3 23.7s-42-8.3-57.3-23.7z m187.1 110.6l-41.9-2.2-19.3 37.3-56.7-98.9c24.8-2.8 47-14.2 63.4-31.2l54.5 95z m30.7-573.2H238.2V174h542.4v-16.1z m-73.9 129.8H279.2v32.5h427.6v-32.5zM279.2 430h244.9v-32.5H279.2V430z m0 109.8h183.7v-32.5H279.2v32.5z m340.9-45.4v16.3c29 0 52.6 23.6 52.6 52.6s-23.6 52.6-52.6 52.6v16.3c38 0 68.8-30.9 68.8-68.9 0.1-38-30.8-68.9-68.8-68.9z"  ></path></symbol><symbol id="iconroute" viewBox="0 0 1024 1024"><path d="M786.6 168.7h-74.4v14.9h74.4v-14.9z m-163.7-44.6H399.7v29.8h223.2v-29.8z m-312.4 44.6h-74.4v14.9h74.4v-14.9zM370 94.3h-29.8v89.3H370V94.3z m342.2 29.8v29.8h89.3V868H221.2V153.8h89.3V124h-119v773.7h639.8V124.1H712.2z m-29.8-29.8h-29.8v89.3h29.8V94.3z m-59.5 74.4H399.7v14.9h223.2v-14.9zM336.2 449.2c13 0 24.2-8 28.8-19.4h55.2l105.3-65.4h80.6c4 12.5 15.8 21.6 29.6 21.6 17.2 0 31.1-13.9 31.1-31.1s-13.9-31.1-31.1-31.1c-12.2 0-22.7 7-27.8 17.2h-89.1l-105.3 65.4H365c-4.6-11.4-15.8-19.4-28.8-19.4-17.2 0-31.1 13.9-31.1 31.1s14 31.1 31.1 31.1z m0 87.1c14.1 0 26.1-9.4 29.8-22.4h141.7c4.6 11.4 15.8 19.4 28.8 19.4 17.2 0 31.1-13.9 31.1-31.1s-13.9-31.1-31.1-31.1c-13 0-24.2 8-28.8 19.4H363.6c-5.2-9.8-15.6-16.4-27.4-16.4-17.2 0-31.1 13.9-31.1 31.1s14 31.1 31.1 31.1z m0 100.2c13.7 0 25.3-8.8 29.4-21.1h97.1l109.4 66.1h37.2c5 10.4 15.7 17.6 28 17.6 17.2 0 31.1-13.9 31.1-31.1s-13.9-31.1-31.1-31.1c-13.7 0-25.3 8.9-29.5 21.2h-29.2L469.3 592h-105c-5-10.5-15.7-17.7-28.1-17.7-17.2 0-31.1 13.9-31.1 31.1s14 31.1 31.1 31.1z"  ></path></symbol><symbol id="iconserver" viewBox="0 0 1024 1024"><path d="M600.678 904.431H868.94c19.929 0 33.725 13.797 33.725 30.659s-13.796 30.659-33.725 30.659H600.678c4.599-9.198 7.665-19.929 7.665-30.66s-3.066-19.927-7.665-30.658z m-93.51-45.988c41.39 0 76.648 35.258 76.648 76.647s-35.258 76.647-76.647 76.647-76.647-35.258-76.647-76.647 35.258-76.647 76.647-76.647z m-30.658-15.33h61.318v-61.317H476.51v61.318z m-334.18 61.318h272.863c-4.599 9.198-7.665 19.928-7.665 30.659s3.066 21.46 7.665 30.659H142.33c-19.929 0-33.725-13.797-33.725-30.66s15.33-30.658 33.725-30.658z m610.108-766.467h61.318V76.647h-61.318v61.317z m-76.646-61.317c-16.863 0-30.659 13.796-30.659 30.658s13.796 30.66 30.659 30.66 30.658-13.797 30.658-30.66-13.796-30.658-30.658-30.658z m-107.306 0c-16.862 0-30.658 13.796-30.658 30.658s13.796 30.66 30.658 30.66 30.659-13.797 30.659-30.66-13.796-30.658-30.659-30.658zM859.744 214.61h-705.15c-24.527 0-45.988-19.928-45.988-47.521V49.054c0-24.527 19.928-47.521 45.988-47.521h705.15c24.527 0 45.988 19.928 45.988 47.52V167.09c0 27.593-21.461 47.52-45.988 47.52zM752.438 413.892h61.318v-61.317h-61.318v61.317z m-76.646-61.317c-16.863 0-30.659 13.796-30.659 30.659s13.796 30.658 30.659 30.658 30.658-13.796 30.658-30.658c0-15.33-13.796-30.66-30.658-30.66z m-107.306 0c-16.862 0-30.658 13.796-30.658 30.659s13.796 30.658 30.658 30.658 30.659-13.796 30.659-30.658c1.533-15.33-13.796-30.66-30.659-30.66z m291.258 137.964h-705.15c-24.527 0-45.988-19.928-45.988-47.521V324.982c0-24.527 19.928-47.52 45.988-47.52h705.15c24.527 0 45.988 19.927 45.988 47.52v118.036c0 27.593-21.461 47.52-45.988 47.52zM752.438 689.82h61.318v-61.317h-61.318v61.317z m-76.646-61.317c-16.863 0-30.659 13.796-30.659 30.659s13.796 30.658 30.659 30.658 30.658-13.796 30.658-30.658-13.796-30.659-30.658-30.659z m-107.306 0c-16.862 0-30.658 13.796-30.658 30.659s13.796 30.658 30.658 30.658 30.659-13.796 30.659-30.658c1.533-16.863-13.796-30.659-30.659-30.659z m291.258 137.964h-705.15c-24.527 0-45.988-19.928-45.988-47.52V600.91c0-24.527 19.928-47.52 45.988-47.52h705.15c24.527 0 45.988 19.927 45.988 47.52v118.036c0 24.527-21.461 47.521-45.988 47.521z"  ></path></symbol><symbol id="iconsetting" viewBox="0 0 1024 1024"><path d="M512 362.73A149.27 149.27 0 1 0 661.27 512 149.44 149.44 0 0 0 512 362.73z m0 255.894A106.624 106.624 0 1 1 618.624 512 106.752 106.752 0 0 1 512 618.624z"  ></path><path d="M858.09 554.603a53.867 53.867 0 0 1 0-85.206 96.448 96.448 0 0 0-71.231-172.01 53.824 53.824 0 0 1-60.246-60.246 96.448 96.448 0 0 0-172.01-71.253 55.51 55.51 0 0 1-85.206 0 96.448 96.448 0 0 0-172.01 71.253 53.824 53.824 0 0 1-60.246 60.246 96.448 96.448 0 0 0-71.253 172.01 53.867 53.867 0 0 1 0 85.206 96.448 96.448 0 0 0 71.253 172.01 53.824 53.824 0 0 1 60.246 60.246 94.336 94.336 0 0 0 58.773 101.397A99.605 99.605 0 0 0 394.24 896a94.357 94.357 0 0 0 75.157-37.91 55.51 55.51 0 0 1 85.206 0 96.448 96.448 0 0 0 172.01-71.253 53.824 53.824 0 0 1 60.246-60.224 96.448 96.448 0 0 0 71.253-172.01z m-9.258 96.917a52.31 52.31 0 0 1-56.555 32.768 96.512 96.512 0 0 0-107.968 107.99A53.824 53.824 0 0 1 588.352 832a99.413 99.413 0 0 0-152.683 0 53.824 53.824 0 0 1-95.957-39.744 96.533 96.533 0 0 0-95.51-108.779 100.885 100.885 0 0 0-12.48 0.79A53.824 53.824 0 0 1 192 588.33a96.49 96.49 0 0 0 0-152.683 53.824 53.824 0 0 1 39.744-95.957 96.512 96.512 0 0 0 107.968-107.947 53.824 53.824 0 0 1 95.979-39.765 99.413 99.413 0 0 0 152.682 0 53.824 53.824 0 0 1 95.958 39.744A96.512 96.512 0 0 0 792.277 339.69a53.824 53.824 0 0 1 39.766 95.957 96.49 96.49 0 0 0 0 152.683 52.053 52.053 0 0 1 16.81 63.189z"  ></path></symbol><symbol id="iconconsumer" viewBox="0 0 1070 1024"><path d="M951.216 883.451c-10.04 0-18.824-8.784-18.824-18.824 0-112.94-62.745-214.588-163.137-267.294-5.02-2.51-8.784-7.53-10.04-13.804s1.256-12.549 6.275-16.313c40.157-37.647 61.49-87.843 61.49-143.06 0-107.92-87.843-195.764-195.764-195.764S435.45 316.235 435.45 424.157c0 53.96 22.588 105.412 61.49 143.059 5.02 3.764 6.275 10.039 6.275 16.313s-5.02 11.295-10.04 13.804C392.784 650.04 330.04 751.686 330.04 864.627c0 10.04-8.784 18.824-18.823 18.824s-18.824-8.784-18.824-18.824c0-119.215 61.49-227.137 161.883-288.627-36.393-42.667-56.471-95.373-56.471-151.843 0-129.255 105.412-233.412 233.412-233.412s233.411 105.412 233.411 233.412c0 56.47-20.078 109.176-56.47 151.843 100.392 61.49 161.882 169.412 161.882 288.627 0 11.295-8.784 18.824-18.823 18.824zM120.47 833.255c-10.04 0-18.824-8.784-18.824-18.824 0-119.215 61.49-227.137 161.882-288.627-36.392-42.667-56.47-95.373-56.47-151.843 0-129.255 105.412-233.412 233.412-233.412 10.039 0 18.823 8.784 18.823 18.824s-8.784 18.823-18.823 18.823c-107.922 0-195.765 87.843-195.765 195.765 0 53.96 22.588 105.412 61.49 143.059 5.02 3.764 6.275 10.039 6.275 16.313s-5.02 11.294-10.04 13.804C202.04 599.843 139.294 701.49 139.294 814.431c0 10.04-8.784 18.824-18.823 18.824z"  ></path><path d="M951.216 883.451c-10.04 0-18.824-8.784-18.824-18.824 0-112.94-62.745-214.588-163.137-267.294-5.02-2.51-8.784-7.53-10.04-13.804s1.256-12.549 6.275-16.313c40.157-37.647 61.49-87.843 61.49-143.06 0-107.92-87.843-195.764-195.764-195.764S435.45 316.235 435.45 424.157c0 53.96 22.588 105.412 61.49 143.059 5.02 3.764 6.275 10.039 6.275 16.313s-5.02 11.295-10.04 13.804C392.784 650.04 330.04 751.686 330.04 864.627c0 10.04-8.784 18.824-18.823 18.824s-18.824-8.784-18.824-18.824c0-119.215 61.49-227.137 161.883-288.627-36.393-42.667-56.471-95.373-56.471-151.843 0-129.255 105.412-233.412 233.412-233.412s233.411 105.412 233.411 233.412c0 56.47-20.078 109.176-56.47 151.843 100.392 61.49 161.882 169.412 161.882 288.627 0 11.295-8.784 18.824-18.823 18.824z"  ></path></symbol><symbol id="iconjwt-3" viewBox="0 0 1024 1024"><path d="M589.312 275.456L588.288 0h-153.6l1.024 275.456 76.8 105.472z m-153.6 472.064v276.48h153.6v-276.48L512.512 642.048z" fill="#FFFFFF" ></path><path d="M589.312 747.52l161.792 223.232 123.904-90.112-161.792-223.232-123.904-39.936z m-153.6-472.064L272.896 52.224l-123.904 90.112L310.784 365.568l124.928 39.936z" fill="#00F2E6" ></path><path d="M310.784 365.568L48.64 280.576 1.536 425.984 263.68 512l123.904-40.96z m325.632 186.368l76.8 105.472 262.144 84.992 47.104-145.408-262.144-84.992z" fill="#00B9F1" ></path><path d="M760.32 512l262.144-86.016-47.104-145.408L713.216 365.568l-76.8 105.472z m-496.64 0L1.536 596.992 48.64 742.4l262.144-84.992 76.8-105.472z" fill="#D63AFF" ></path><path d="M310.784 657.408L148.992 880.64l123.904 90.112 162.816-223.232V617.472zM713.216 365.568l161.792-223.232-123.904-90.112-161.792 223.232v130.048z" fill="#FB015B" ></path></symbol><symbol id="iconkeycloak_icon_32px" viewBox="0 0 1029 1024"><path d="M876.8 304a7.68 7.68 0 0 1-6.72-3.84l-115.52-200.32a7.68 7.68 0 0 0-6.72-3.84H276.48a7.68 7.68 0 0 0-6.72 3.84l-119.68 208-115.84 200.32a7.68 7.68 0 0 0 0 7.68l115.52 200.32 120 208a7.68 7.68 0 0 0 6.72 3.84h471.36a7.68 7.68 0 0 0 6.72-3.84l115.52-200.32a7.68 7.68 0 0 1 6.72-3.84h144a8.64 8.64 0 0 0 8.64-8.64V312.64a8.64 8.64 0 0 0-8.64-8.64h-144z" fill="#4D4D4D" ></path><path d="M176 490.88l-128 46.72-12.8-22.08a7.68 7.68 0 0 1 0-7.68l58.56-101.12z" fill="#E1E1E1" ></path><path d="M944.32 528.32l85.12-12.16v98.88l-85.12-86.72z" fill="#C8C8C8" ></path><path d="M944.32 528.32l85.12 86.4v96a8.64 8.64 0 0 1-8.64 8.64H921.92z" fill="#C2C2C2" ></path><path d="M944.32 528.32l-22.4 191.68h-119.04l-36.16-87.04 177.6-104.64z" fill="#C7C7C7" ></path><path d="M944.32 528.32l85.12-103.68v91.52l-85.12 12.16z" fill="#CECECE" ></path><path d="M1029.44 312.64v112l-85.12 103.68-64-224h140.8a8.64 8.64 0 0 1 8.32 8.32z" fill="#D3D3D3" ></path><path d="M802.88 720h-63.04l-16-23.36 42.88-63.68 36.16 87.04z" fill="#C6C6C6" ></path><path d="M944.32 528.32l-235.52-99.52 123.84-124.8h47.36l64.32 224.32z" fill="#D5D5D5" ></path><path d="M708.8 428.8l57.92 204.16 177.6-104.64z" fill="#D0D0D0" ></path><path d="M739.84 720h-16.96l0.96-23.36 16 23.36z" fill="#BFBFBF" ></path><path d="M832.64 304l-123.84 124.8-22.4-111.68 47.68-13.12h98.56z" fill="#D9D9D9" ></path><path d="M708.8 428.8l-286.08 65.92 300.8 201.92z" fill="#D4D4D4" ></path><path d="M708.8 428.8l15.04 267.84 42.88-64z" fill="#D0D0D0" ></path><path d="M686.4 317.12l-263.68 177.6 285.76-65.92z" fill="#D9D9D9" ></path><path d="M422.72 494.72L298.88 720H228.16l-52.16-229.12 246.72 3.84z" fill="#D8D8D8" ></path><path d="M295.68 304l-119.68 186.88-32-175.68 4.16-7.36a7.68 7.68 0 0 1 8.32-3.84h139.2z" fill="#E2E2E2" ></path><path d="M228.16 720H156.48a7.68 7.68 0 0 1-6.72-3.84l-102.72-178.24 128-46.72z" fill="#D8D8D8" ></path><path d="M176 490.88l-83.2-84.16 52.8-91.52 30.4 175.68z" fill="#E4E4E4" ></path><path d="M553.6 304h-208.96l78.08 190.72 263.68-177.6-79.36-13.12h-53.44z" fill="#DEDEDE" ></path><path d="M312 304h-16.32l-119.68 186.88 246.72 3.84-78.08-190.72H312z" fill="#DEDEDE" ></path><path d="M666.24 720h56.64l0.96-23.36-57.6 23.36z" fill="#C5C5C5" ></path><path d="M723.84 696.64l-301.12-201.92 54.4 225.28h189.12l57.6-23.36z" fill="#D0D0D0" ></path><path d="M298.88 720h178.24l-54.4-225.28-123.84 225.28z" fill="#D1D1D1" ></path><path d="M687.04 304l-0.64 13.12 47.68-13.12H687.04z" fill="#DDDDDD" ></path><path d="M607.04 304l79.36 13.12-7.36-13.12h-72z" fill="#E3E3E3" ></path><path d="M679.04 304l7.36 13.12 0.64-13.12h-8z" fill="#E2E2E2" ></path><path d="M470.08 307.52l-116.16 201.28a6.72 6.72 0 0 0 0 3.2H272l160-276.48a6.4 6.4 0 0 1 2.24 2.24l36.16 64a7.04 7.04 0 0 1-0.32 5.76z" fill="#00B8E3" ></path><path d="M470.08 723.84l-36.16 64a7.04 7.04 0 0 1-2.56 2.24L272 512H352.32a6.08 6.08 0 0 0 0 3.2l116.16 201.28a6.72 6.72 0 0 1 1.6 7.36z" fill="#33C6E9" ></path><path d="M431.36 235.84L272 512l-40 69.44L192.32 515.2a6.08 6.08 0 0 1 0-3.2 6.72 6.72 0 0 1 0-3.2l38.72-66.88 117.44-203.52a6.72 6.72 0 0 1 6.08-3.52h72z" fill="#008AAA" ></path><path d="M431.36 788.48h-75.52a6.72 6.72 0 0 1-6.08-3.52l-107.2-184.96-10.56-18.56L272 512z" fill="#00B8E3" ></path><path d="M752.32 512l-160 276.48a7.36 7.36 0 0 1-2.24-2.24l-36.16-64a7.04 7.04 0 0 1 0-6.4l116.16-201.28A6.72 6.72 0 0 0 672.32 512h80z" fill="#008AAA" ></path><path d="M832.32 512a6.72 6.72 0 0 1 0 3.52l-156.16 270.72a6.72 6.72 0 0 1-5.76 3.2h-74.24a7.36 7.36 0 0 1-3.52 0l160-276.48 40-69.12 38.08 65.92A6.72 6.72 0 0 1 832.32 512zM752.32 512H672.32a6.72 6.72 0 0 0 0-3.52l-118.08-200.96a6.72 6.72 0 0 1 0-7.04l36.16-64a7.36 7.36 0 0 1 2.24-2.24z" fill="#00B8E3" ></path><path d="M792.32 442.88L752.32 512l-160-276.48a7.36 7.36 0 0 1 3.52 0h72a6.72 6.72 0 0 1 5.76 3.2z" fill="#33C6E9" ></path></symbol><symbol id="iconApache_kafka" viewBox="0 0 1024 1024"><path d="M693.691077 566.685538c-39.842462 0-75.561846 17.651692-100.022154 45.442462l-62.678154-44.371692c6.653538-18.318769 10.473846-37.988923 10.473846-58.577231 0-20.231385-3.687385-39.571692-10.121846-57.619692l62.537846-43.901539c24.457846 27.650462 60.083692 45.206154 99.810462 45.206154 73.538462 0 133.376-59.827692 133.376-133.376 0-73.548308-59.837538-133.376-133.376-133.376-73.538462 0-133.376 59.827692-133.376 133.376 0 13.164308 1.988923 25.858462 5.558154 37.880615l-62.579693 43.923693c-26.141538-32.430769-63.780923-55.074462-106.665846-61.986462v-75.421538c60.416-12.689231 105.937231-66.368 105.937231-130.508308C502.564923 59.827692 442.727385 0 369.188923 0 295.650462 0 235.812923 59.827692 235.812923 133.376c0 63.281231 44.342154 116.297846 103.549539 129.892923v76.401231C258.56 353.853538 196.913231 424.371692 196.913231 509.179077c0 85.220923 62.257231 155.997538 143.643077 169.698461v80.674462c-59.812923 13.147077-104.743385 66.488615-104.743385 130.200615 0 73.548308 59.837538 133.376 133.376 133.376 73.538462 0 133.376-59.827692 133.376-133.376 0-63.712-44.930462-117.053538-104.743385-130.200615v-80.676923a172.221538 172.221538 0 0 0 104.861539-60.987077l63.096615 44.659692c-3.502769 11.913846-5.464615 24.482462-5.464615 37.513846 0 73.548308 59.837538 133.376 133.376 133.376 73.538462 0 133.376-59.827692 133.376-133.376 0-73.548308-59.837538-133.376-133.376-133.376z m0-311.864615c35.660308 0 64.664615 29.016615 64.664615 64.667077s-29.004308 64.664615-64.664615 64.664615-64.664615-29.014154-64.664615-64.664615c0-35.650462 29.004308-64.667077 64.664615-64.667077z m-389.169231-121.444923c0-35.650462 29.006769-64.664615 64.667077-64.664615s64.664615 29.014154 64.664615 64.664615c0 35.650462-29.004308 64.664615-64.664615 64.664615s-64.667077-29.014154-64.667077-64.664615z m129.331692 756.376615c0 35.650462-29.004308 64.664615-64.664615 64.664616s-64.667077-29.014154-64.667077-64.664616c0-35.650462 29.006769-64.664615 64.667077-64.664615s64.664615 29.014154 64.664615 64.664615z m-64.669538-290.387692c-49.735385 0-90.195692-40.452923-90.195692-90.185846 0-49.735385 40.460308-90.195692 90.195692-90.195692 49.732923 0 90.193231 40.460308 90.193231 90.195692 0 49.732923-40.460308 90.185846-90.193231 90.185846z m324.507077 165.363692c-35.660308 0-64.664615-29.016615-64.664615-64.667077s29.004308-64.664615 64.664615-64.664615 64.664615 29.014154 64.664615 64.664615c0 35.650462-29.004308 64.667077-64.664615 64.667077z"  ></path></symbol><symbol id="iconicons8-openid" viewBox="0 0 1024 1024"><path d="M938.666667 576l-21.333334-192-61.866666 40.533333c-57.6-36.266667-130.133333-61.866667-211.2-74.666666 0 0-40.533333-8.533333-93.866667-8.533334s-102.4 6.4-102.4 6.4C241.066667 373.333333 85.333333 490.666667 85.333333 631.466667 85.333333 776.533333 245.333333 896 490.666667 917.333333v-83.2c-168.533333-23.466667-275.2-102.4-275.2-202.666666 0-93.866667 98.133333-172.8 232.533333-198.4 0 0 104.533333-23.466667 196.266667 4.266666 44.8 10.666667 85.333333 25.6 119.466666 46.933334L682.666667 533.333333l256 42.666667z" fill="#9E9E9E" ></path><path d="M490.666667 170.666667v746.666666l128-64V106.666667z"  ></path><path d="M490.666667 170.666667v746.666666l128-64V106.666667z" fill="#FF9800" ></path></symbol><symbol id="iconPrometheus_software_logo" viewBox="0 0 1035 1024"><path d="M509.008842 5.991298C227.902877 5.991298 0 233.867228 0 514.982175c0 281.105965 227.902877 508.99986 509.008842 508.99986s508.99986-227.893895 508.99986-508.99986c0-281.114947-227.902877-508.990877-508.99986-508.990877z m0 952.634386c-79.979789 0-144.82414-53.427649-144.82414-119.313965H653.832982c0 65.877333-64.844351 119.313965-144.82414 119.313965z m239.202807-158.827789H269.779088v-86.752562h478.441544v86.752562z m-1.715649-131.404351h-475.351579c-1.580912-1.823439-3.197754-3.61993-4.724772-5.470316-48.972351-59.46386-60.505825-90.507228-71.706947-122.143439-0.188632-1.041965 59.383018 12.171228 101.627509 21.674667 0 0 21.737544 5.030175 53.517473 10.82386-30.513404-35.76814-48.631018-81.237333-48.631017-127.712562 0-102.031719 78.255158-191.191579 50.023298-263.257824 27.477333 2.236632 56.86793 57.990737 58.853053 145.165474 29.210947-40.367158 41.43607-114.086175 41.43607-159.285895 0-46.798596 30.836772-101.160421 61.682526-103.01979-27.495298 45.316491 7.123088 84.165614 37.896982 180.538386 11.542456 36.199298 10.069333 97.118316 18.97993 135.75186C573.053754 301.217684 586.850807 184.140351 637.754386 143.719298c-22.45614 50.903579 3.323509 114.598175 20.95607 145.219369 28.447439 49.403509 45.693754 86.833404 45.693755 157.62414 0 47.463298-17.524772 92.151018-47.086036 127.083789 33.612351-6.305684 56.823018-11.991579 56.823018-11.991578l109.154807-21.297404c0.008982-0.008982-15.854035 65.221614-76.8 128.03593z" fill="#E6522C" ></path></symbol><symbol id="iconskywalking" viewBox="0 0 4327 1024"><path d="M1739.616604 441.967094v2.334189l-70.798491 357.875925c-9.33434 46.678943-21.782943 65.351245-69.240755 65.351245h-21.005283c-42.010566 0-63.794717-20.227623-73.909132-60.682868l-61.461735-238.06551c-0.77766-3.111849-0.77766-3.889509-2.332982-3.889509-1.556528 0-1.556528 0.77766-2.334188 3.888302l-61.461736 238.066717c-10.113208 40.455245-31.897358 60.682868-73.909132 60.682868h-21.005283c-47.456604 0-59.906415-18.672302-69.240755-65.352453L1192.718491 695.233208c-1.195472 5.047547 0.798189-1.735245 5.984603-20.34717l7.780227-27.918491 35.907622-128.876679h17.354868l36.416 251.411321c0.77766 7.001358 2.334189 10.892075 3.88951 10.892075 1.556528 0 3.890717-3.113057 5.446037-10.892075l64.573585-261.404981c7.779019-30.342038 17.115774-33.453887 43.568302-33.453887h54.457963c26.451321 0 35.788075 3.111849 43.568301 33.453887l64.572378 261.403773c1.556528 7.780226 3.890717 10.892075 5.446038 10.892076 1.556528 0 3.111849-3.889509 3.889509-10.892076l49.01434-329.089207c0.77766-7.002566 6.223698-14.003925 14.003924-14.003925h75.464453c8.557887 0 15.559245 7.001358 15.559245 15.559245z m379.539321 407.667925c0 8.557887-7.002566 15.559245-15.560453 15.559245h-66.128906c-8.557887 0-15.559245-7.001358-15.559245-15.559245v-12.448604c-35.788075 21.784151-72.353811 34.231547-109.697208 34.231547-64.573585 0-134.593208-24.896-134.593207-129.923622v-3.113057c0-88.690717 54.460377-134.592 189.830037-134.592h49.01434v-34.231547c0-50.56966-22.561811-63.017057-68.463094-63.017057-49.792 0-101.139321 3.111849-126.812981 6.223698h-3.88951c-7.780226 0-14.003925-2.334189-14.003924-13.225056v-49.792c0-8.557887 4.66717-14.003925 14.781584-16.338113 31.118491-6.223698 76.243321-12.447396 129.924831-12.447397 110.47366 0 171.157736 49.01434 171.157736 148.595925v280.077283z m-102.694642-81.690566V672.253585h-49.01434c-70.796075 0-86.356528 22.561811-86.356528 66.128906v3.113056c0 38.121057 17.115774 48.234264 56.015698 48.234264 28.007849 0 56.793358-9.33434 79.35517-21.784151z m305.630189 80.911698c0 8.557887-6.223698 16.338113-14.781585 16.338113h-72.353812c-8.557887 0-15.559245-7.780226-15.559245-16.338113V288.704c0-8.557887 7.001358-15.560453 15.559245-15.560453h72.353812c8.557887 0 14.780377 7.002566 14.780377 15.560453v560.152151z m453.448453 7.002566c0 4.66717-4.668377 9.335547-10.892076 9.335547h-94.914415c-8.557887 0-17.893434-8.557887-22.561811-15.559245l-122.144604-177.382642v176.603774c0 8.557887-7.001358 16.338113-15.559245 16.338113h-71.576151c-8.557887 0-15.559245-7.780226-15.559246-16.338113V288.704c0-8.557887 7.001358-15.560453 15.559246-15.560453h71.576151c8.557887 0 15.559245 7.002566 15.559245 15.560453v324.42083l133.035472-177.381434c5.446038-7.001358 13.226264-9.335547 17.894641-9.335547h87.135396c7.779019 0 11.669736 3.111849 11.669736 8.557887 0 2.334189-0.778868 4.668377-3.111849 7.780226l-156.377358 192.163019 157.932679 214.726038c1.556528 2.332981 2.334189 3.888302 2.334189 6.223698z m176.483018-503.36c0 8.557887-7.001358 15.559245-15.559245 15.559245h-75.464453c-8.557887 0-16.338113-7.001358-16.338113-15.559245v-68.463094c0-8.557887 7.780226-15.560453 16.338113-15.560453h75.464453c8.557887 0 15.560453 7.002566 15.560453 15.560453v68.463094z m-2.332981 496.357434c0 8.557887-7.001358 16.338113-15.559245 16.338113h-71.576151c-8.557887 0-15.559245-7.780226-15.559245-16.338113V441.967094c0-8.557887 7.001358-15.559245 15.559245-15.559245h71.576151c8.557887 0 15.559245 7.001358 15.559245 15.559245V848.857358z m458.11683 0c0 8.557887-7.002566 16.338113-15.560452 16.338113h-71.574944c-8.557887 0-15.559245-7.780226-15.559245-16.338113V595.231396c0-67.685434-6.223698-87.134189-66.130113-87.134188-26.451321 0-55.23683 10.892075-87.911849 28.006641V848.857358c0 8.557887-7.002566 16.338113-15.560453 16.338114h-71.574944c-8.557887 0-15.559245-7.780226-15.559245-16.338114V441.967094c0-8.557887 7.001358-15.559245 15.559245-15.559245h67.685434c8.557887 0 15.559245 7.001358 15.559246 15.559245v16.338114c45.123623-28.785509 74.686792-37.343396 126.03532-37.343397 112.030189 0 134.592 75.46566 134.592 174.269585V848.857358z m478.344453-368.766793c0 11.669736-3.111849 13.225057-12.448603 17.115774l-25.672453 10.113208c12.447396 17.894642 19.448755 35.010415 19.448754 62.239396v5.446038c0 97.248604-66.906566 141.594566-184.384 141.594566-41.232906 0-69.240755-7.002566-84.8-13.226265-9.336755 6.223698-13.226264 13.226264-13.226264 20.227623 0 15.560453 8.557887 21.784151 26.451321 25.67366l91.802566 21.784151c105.807698 24.896 174.270792 41.232906 174.270792 124.478793v5.446038c0 79.353962-58.348679 122.143396-190.607698 122.143396-126.035321 0-192.941887-47.456604-192.941886-129.145962v-7.001359c0-31.898566 14.781585-63.017057 39.677584-85.578868-21.784151-16.338113-35.009208-43.568302-35.009207-71.576151v-0.77766c0-24.117132 10.113208-48.235472 31.118491-63.017057-23.339472-24.117132-31.897358-52.124981-31.897359-91.024905v-5.446038c0-77.798642 50.56966-143.149887 185.16166-143.149887h182.049812a20.91834 20.91834 0 0 1 21.00649 21.005283v32.676226zM3766.339623 577.337962v-6.223698c0-37.343396-16.338113-66.128906-83.245887-66.128906-66.128906 0-84.02234 29.56317-84.02234 66.128906v6.223698c0 28.785509 11.669736 61.461736 84.02234 61.461736 64.573585 0 83.245887-22.561811 83.245887-61.461736z m8.557886 323.644378v-5.446038c0-17.115774-10.114415-27.230189-91.803773-46.680151l-69.240755-16.338113c-11.669736 16.338113-19.449962 26.452528-19.449962 54.460377v7.001359c0 31.897358 19.449962 51.347321 92.581434 51.34732 74.686792 0 87.913057-16.338113 87.913056-44.344754zM374.123472 607.081057c0 78.577509-49.01434 162.599849-204.611623 162.599849-58.348679 0-100.360453-5.446038-137.703849-14.003925-7.780226-1.555321-14.781585-7.001358-14.781585-15.559245v-56.015698c0-8.557887 7.001358-14.781585 14.780377-14.781585h1.557736c31.118491 3.889509 108.91834 7.780226 137.703849 7.780226 69.240755 0 90.246038-24.896 90.246038-70.019622 0-30.342038-14.780377-45.901283-66.128906-76.243321l-102.694641-61.460528C20.138264 426.587774 0.688302 381.464151 0.688302 327.003774c0-85.578868 49.790792-147.818264 194.497207-147.818265 51.347321 0 122.922264 7.779019 149.373585 14.003925 7.780226 1.555321 14.005132 7.001358 14.005132 14.780377v57.572227c0 7.780226-5.446038 14.003925-13.226264 14.003924h-1.556528c-51.347321-4.668377-102.694642-7.780226-153.263094-7.780226-57.572226 0-81.690566 20.227623-81.690566 55.238038 0 25.672453 13.227472 41.232906 63.795924 69.240754l93.359094 52.124981c85.578868 47.456604 108.140679 97.248604 108.14068 158.71034z m433.99849 147.040603c0 4.66717-4.66717 9.33434-10.892075 9.33434h-94.913208c-8.559094 0-17.895849-8.556679-22.563019-15.559245l-122.143396-177.381434v176.603773c0 8.557887-7.003774 16.338113-15.560453 16.338114h-71.574943c-8.557887 0-15.560453-7.780226-15.560453-16.338114V186.965736c0-8.557887 7.002566-15.559245 15.560453-15.559245h71.574943c8.557887 0 15.559245 7.001358 15.559246 15.559245v324.422038L690.645736 334.007547c5.446038-7.001358 13.226264-9.335547 17.893434-9.335547h87.135396c7.780226 0 11.669736 3.111849 11.669736 8.557887 0 2.334189-0.77766 4.66717-3.111849 7.780226L647.856302 533.171925l157.932679 214.726037c1.555321 2.332981 2.332981 3.888302 2.332981 6.223698z m434.777359-416.225811c0 1.556528 0 3.113057-0.777661 4.668377L1112.19683 796.911094c-24.117132 84.8-52.902642 122.143396-158.710339 122.143397-25.672453 0-64.572377-4.66717-82.467019-10.113208-8.557887-2.334189-16.338113-5.446038-16.338114-13.226264v-49.790793c0-8.557887 7.002566-14.003925 15.560453-14.003924h1.556529c21.784151 0.77766 66.128906 4.668377 87.911849 4.668377 33.453887 0 50.56966-9.336755 61.461736-49.792l6.223698-23.339471h-11.669736c-22.561811 0-50.56966-5.446038-67.685434-64.573585l-101.916981-356.319397c-0.77766-2.334189-0.77766-3.889509-0.777661-5.446037 0-7.780226 4.668377-12.447396 14.782793-12.447397h78.576302c7.002566 0 13.226264 7.001358 14.781585 14.003925l78.577509 316.641811c3.111849 13.226264 6.223698 17.115774 10.892075 17.115774h7.001359l84.023547-334.536453c1.555321-7.001358 7.779019-13.225057 15.559245-13.225057h79.35517c7.780226 0 14.003925 6.223698 14.003925 13.225057z" fill="#1890FF" ></path><path d="M3643.813434 155.203623c21.086189-4.692528 42.908981-7.631698 64.788528-8.777661 219.435472-11.499472 406.839547 158.192302 418.404227 378.855849 3.95834 75.522415-14.055849 150.439849-50.383698 215.553208 154.855849-55.217509 259.634717-206.250264 250.596226-378.724227-11.004377-209.968302-189.681509-371.759094-398.479698-360.815094-114.165132 5.982189-218.470642 63.932377-284.925585 153.907925z" fill="#D8D8D8" ></path></symbol></svg>',
+    p = (p = document.getElementsByTagName('script'))[p.length - 1].getAttribute('data-injectcss');
+  if (p && !l.__iconfont__svg__cssinject__) {
+    l.__iconfont__svg__cssinject__ = !0;
+    try {
+      document.write(
+        '<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>',
+      );
+    } catch (l) {
+      console && console.log(l);
+    }
+  }
+  function o() {
+    i || ((i = !0), t());
+  }
+  (c = function () {
+    var l, c, h, t;
+    ((t = document.createElement('div')).innerHTML = z),
+      (z = null),
+      (h = t.getElementsByTagName('svg')[0]) &&
+        (h.setAttribute('aria-hidden', 'true'),
+        (h.style.position = 'absolute'),
+        (h.style.width = 0),
+        (h.style.height = 0),
+        (h.style.overflow = 'hidden'),
+        (l = h),
+        (c = document.body).firstChild
+          ? ((t = l), (h = c.firstChild).parentNode.insertBefore(t, h))
+          : c.appendChild(l));
+  }),
+    document.addEventListener
+      ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState)
+        ? setTimeout(c, 0)
+        : ((h = function () {
+            document.removeEventListener('DOMContentLoaded', h, !1), c();
+          }),
+          document.addEventListener('DOMContentLoaded', h, !1))
+      : document.attachEvent &&
+        ((t = c),
+        (a = l.document),
+        (i = !1),
+        (e = function () {
+          try {
+            a.documentElement.doScroll('left');
+          } catch (l) {
+            return void setTimeout(e, 50);
+          }
+          o();
+        })(),
+        (a.onreadystatechange = function () {
+          'complete' == a.readyState && ((a.onreadystatechange = null), o());
+        }));
+})(window);

From f207da9272ca7703e32caab057faf8da067255f5 Mon Sep 17 00:00:00 2001
From: juzhiyuan <juzhiyuan@apache.org>
Date: Thu, 10 Dec 2020 10:23:48 +0800
Subject: [PATCH 7/8] feat: update ASF Release cfg

---
 .actions/ASF-Release.cfg | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.actions/ASF-Release.cfg b/.actions/ASF-Release.cfg
index bed65bf18b..603f24546c 100644
--- a/.actions/ASF-Release.cfg
+++ b/.actions/ASF-Release.cfg
@@ -78,6 +78,7 @@ web/src/e2e/__mocks__/antd-pro-merge-less.js
 web/src/e2e/baseLayout.e2e.js
 web/src/pages/404.tsx
 web/src/service-worker.js
+web/src/libs/iconinfo.js
 api/build-tools/json.lua
 
 # Skip files containing Apache 2.0 License

From f602efc0e0dea76eea66bbe8b061c8f6a5872a8f Mon Sep 17 00:00:00 2001
From: juzhiyuan <juzhiyuan@apache.org>
Date: Thu, 10 Dec 2020 10:26:18 +0800
Subject: [PATCH 8/8] feat: update ASF Release cfg

---
 .actions/ASF-Release.cfg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.actions/ASF-Release.cfg b/.actions/ASF-Release.cfg
index 603f24546c..e2828f79fa 100644
--- a/.actions/ASF-Release.cfg
+++ b/.actions/ASF-Release.cfg
@@ -78,7 +78,7 @@ web/src/e2e/__mocks__/antd-pro-merge-less.js
 web/src/e2e/baseLayout.e2e.js
 web/src/pages/404.tsx
 web/src/service-worker.js
-web/src/libs/iconinfo.js
+web/src/libs/iconfont.js
 api/build-tools/json.lua
 
 # Skip files containing Apache 2.0 License