[apisix-dashboard] branch master updated: feat(route): show route id in list and edit views. (#2269)

[juzhiyuan]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git


The following commit(s) were added to refs/heads/master by this push:
     new 6e9149b  feat(route): show route id in list and edit views. (#2269)
6e9149b is described below

commit 6e9149bf30cf8f637bcb587aea6c72e1e9bb199d
Author: mango <35127166+mangogoforw...@users.noreply.github.com>
AuthorDate: Sat Jan 8 10:08:04 2022 +0800

    feat(route): show route id in list and edit views. (#2269)
---
 web/src/locales/en-US/component.ts                |  1 +
 web/src/locales/zh-CN/component.ts                |  1 +
 web/src/pages/Route/List.tsx                      |  5 +++++
 web/src/pages/Route/components/Step1/MetaView.tsx | 22 +++++++++++++++++++++-
 web/src/pages/Route/transform.ts                  |  2 ++
 5 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/web/src/locales/en-US/component.ts 
b/web/src/locales/en-US/component.ts
index 6cf033a..e844439 100644
--- a/web/src/locales/en-US/component.ts
+++ b/web/src/locales/en-US/component.ts
@@ -67,6 +67,7 @@ export default {
   'component.global.sendTimeout': 'Send Timeout',
   'component.global.receiveTimeout': 'Receive Timeout',
   'component.global.name': 'Name',
+  'component.global.id': 'ID',
   'component.global.updateTime': 'Update Time',
   'component.global.form.itemExtraMessage.nameGloballyUnique': 'Name should be 
globally unique',
   'component.global.input.placeholder.description':
diff --git a/web/src/locales/zh-CN/component.ts 
b/web/src/locales/zh-CN/component.ts
index 112211e..074b6be 100644
--- a/web/src/locales/zh-CN/component.ts
+++ b/web/src/locales/zh-CN/component.ts
@@ -56,6 +56,7 @@ export default {
   'component.global.sendTimeout': '发送超时时间',
   'component.global.receiveTimeout': '接收超时时间',
   'component.global.name': '名称',
+  'component.global.id': 'ID',
   'component.global.updateTime': '更新时间',
 
   'component.global.popconfirm.title.delete': '确定删除该条记录吗？',
diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx
index 23ea82e..8191640 100644
--- a/web/src/pages/Route/List.tsx
+++ b/web/src/pages/Route/List.tsx
@@ -336,6 +336,11 @@ const Page: React.FC = () => {
       fixed: 'left',
     },
     {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+    },
+    {
       title: formatMessage({ id: 'page.route.host' }),
       hideInSearch: true,
       render: (_, record) => {
diff --git a/web/src/pages/Route/components/Step1/MetaView.tsx 
b/web/src/pages/Route/components/Step1/MetaView.tsx
index c8b478d..4171d95 100644
--- a/web/src/pages/Route/components/Step1/MetaView.tsx
+++ b/web/src/pages/Route/components/Step1/MetaView.tsx
@@ -153,6 +153,23 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({
     </Form.Item>
   );
 
+  const Id: React.FC = () => {
+    if (isEdit) {
+      return (
+        <Form.Item label={formatMessage({ id: 'component.global.id' })}>
+          <Row>
+            <Col span={10}>
+              <Form.Item noStyle name="id">
+                <Input disabled={true} />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form.Item>
+      );
+    }
+    return null;
+  };
+
   const Description: React.FC = () => (
     <Form.Item label={formatMessage({ id: 'component.global.description' })}>
       <Row>
@@ -316,7 +333,9 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({
                 showSearch
                 disabled={disabled}
                 optionFilterProp="children"
-                filterOption={(input, option) => 
option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                filterOption={(input, option) =>
+                  option?.children.toLowerCase().indexOf(input.toLowerCase()) 
>= 0
+                }
               >
                 {/* TODO: value === '' means  no service_id select, need to 
find a better way */}
                 <Select.Option value="" 
key={Math.random().toString(36).substring(7)}>
@@ -361,6 +380,7 @@ const MetaView: React.FC<RouteModule.Step1PassProps> = ({
   return (
     <PanelSection title={formatMessage({ id: 
'page.route.panelSection.title.nameDescription' })}>
       <Name />
+      <Id />
       <NormalLabelComponent />
       <VersionLabelComponent />
 
diff --git a/web/src/pages/Route/transform.ts b/web/src/pages/Route/transform.ts
index 14d4fa7..cafc2e8 100644
--- a/web/src/pages/Route/transform.ts
+++ b/web/src/pages/Route/transform.ts
@@ -314,6 +314,7 @@ export const transformUpstreamNodes = (
 export const transformRouteData = (data: RouteModule.Body) => {
   const {
     name,
+    id,
     desc,
     labels = {},
     methods = [],
@@ -334,6 +335,7 @@ export const transformRouteData = (data: RouteModule.Body) 
=> {
 
   const form1Data: Partial<RouteModule.Form1Data> = {
     name,
+    id,
     desc,
     status,
     hosts: hosts || (host && [host]) || [''],