feat(route): show route id in list and edit views. (#2269)

apache · Jan 8, 2022 · 6e9149b · 6e9149b
1 parent 7624f2a
commit 6e9149b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 1 deletion.
diff --git 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
@@ -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
@@ -335,6 +335,11 @@ const Page: React.FC = () => {
       dataIndex: 'name',
       fixed: 'left',
     },
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+    },
     {
       title: formatMessage({ id: 'page.route.host' }),
       hideInSearch: true,

diff --git 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
@@ -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]) || [''],