You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by GitBox <gi...@apache.org> on 2022/02/16 07:56:04 UTC

[GitHub] [apisix-dashboard] oil-oil opened a new pull request #2320: feat: support protobuf on Web

oil-oil opened a new pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320


   Please answer these questions before submitting a pull request, **or your PR will get closed**.
   
   **Why submit this pull request?**
   
   - [ ] Bugfix
   - [x] New feature provided
   - [ ] Improve performance
   - [ ] Backport patches
   
   **What changes will this PR take into?**
   
   I added a page to manage protos for the apisix dashboard. In order to support the monaco editor to prompt the proto file code, I upgraded its version .
   
   List page:
   <img width="1916" alt="image" src="https://user-images.githubusercontent.com/57465570/154217785-f3c0b5b0-17e4-4e94-b04f-3a7437eeb7e1.png">
   
   Edit page:
   <img width="1917" alt="image" src="https://user-images.githubusercontent.com/57465570/154219190-ff1cfc9c-e46e-4f42-a016-c91c4bd66052.png">
   
   
   **Related issues**
   
   resolve #2189
   
   **Checklist:**
   
   - [ ] Did you explain what problem does this PR solve? Or what new features have been added?
   - [x] Have you added corresponding test cases?
   - [ ] Have you modified the corresponding document?
   - [ ] Is this PR backward compatible? If it is not backward compatible, please discuss on the mailing list first
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812532273



##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() =>
+                showDrawer({ id: record.id, content: record.content, desc: record.desc }, 'update')
+              }
+            >
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'page.upstream.list.confirm.delete' })}
+              okText={formatMessage({ id: 'page.upstream.list.confirm' })}
+              cancelText={formatMessage({ id: 'page.upstream.list.cancel' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'page.upstream.list.delete.successfully' }),
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
+                });
+              }}
+            >
+              <Button type="primary" danger>
+                {formatMessage({ id: 'page.upstream.list.delete' })}
+              </Button>
+            </Popconfirm>
+          </Space>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ProtoDrawer
+        protoData={protoData as ProtoModule.ProtoData}
+        setProtoData={setProtoData}
+        visible={drawerVisible}
+        setVisible={setDrawerVisible}
+        editMode={editMode}
+        refreshTable={refreshTable}
+      ></ProtoDrawer>

Review comment:
       > And I think we can just put the drawer component inside the PageHeaderWrapper
   
   OK, I'll fix it.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1058712375


   @juzhiyuan @bzp2010 Please help me re execute CI. I can pass it in the development environment.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] nic-chen commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
nic-chen commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r819405851



##########
File path: web/src/pages/Proto/locales/en-US.ts
##########
@@ -0,0 +1,34 @@
+/*
+ * 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 {
+  'page.proto.list': 'Proto List',
+  'page.proto.list.description':
+    "Protocol buffers are Google's language-neutral, platform-neutral, extensible mechanism for serializing structured data.You define how you want your data to be structured once, then you can use special generated source code to easily write and read your structured data to and from a variety of data streams and using a variety of languages.",

Review comment:
       @oil-oil  I see your update. LGTM, but should be better to keep the previous introduction.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812531184



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.less
##########
@@ -0,0 +1,28 @@
+/*
+ * 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 '~antd/es/style/themes/default.less';
+
+.formItemEditor {
+  flex-flow: column;
+  row-gap: 20px !important;
+
+  :global {
+    .ant-form-item-explain-error {
+      padding-left: 25px;
+    }

Review comment:
       It doesn't affect styles elsewhere, It will only affect the styles inside the "formItemEditor"
   <img width="732" alt="image" src="https://user-images.githubusercontent.com/57465570/155256534-118e5aa9-1764-4d4d-84c1-f6b82b37cacf.png">
   




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] codecov-commenter edited a comment on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
codecov-commenter edited a comment on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1041473770


   # [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#2320](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (df0d998) into [master](https://codecov.io/gh/apache/apisix-dashboard/commit/758c43262a3ae26d6f4a51e2f0a765842b66936d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (758c432) will **decrease** coverage by `1.32%`.
   > The diff coverage is `92.42%`.
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/graphs/tree.svg?width=650&height=150&src=pr&token=Q1HERXN96P&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master    #2320      +/-   ##
   ==========================================
   - Coverage   69.91%   68.59%   -1.33%     
   ==========================================
     Files         184      130      -54     
     Lines        7280     3445    -3835     
     Branches      830      838       +8     
   ==========================================
   - Hits         5090     2363    -2727     
   + Misses       1896     1082     -814     
   + Partials      294        0     -294     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | backend-e2e-test | `?` | |
   | backend-e2e-test-ginkgo | `?` | |
   | backend-unit-test | `?` | |
   | frontend-e2e-test | `68.59% <92.42%> (+0.42%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [web/src/helpers.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9oZWxwZXJzLnRzeA==) | `73.77% <ø> (ø)` | |
   | [...b/src/pages/Proto/components/ProtoDrawer/index.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9jb21wb25lbnRzL1Byb3RvRHJhd2VyL2luZGV4LnRzeA==) | `88.46% <88.46%> (ø)` | |
   | [web/src/pages/Proto/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9MaXN0LnRzeA==) | `93.54% <93.54%> (ø)` | |
   | [web/src/pages/Proto/service.ts](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9zZXJ2aWNlLnRz) | `100.00% <100.00%> (ø)` | |
   | [...omponents/Upstream/components/UpstreamSelector.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL2NvbXBvbmVudHMvVXBzdHJlYW1TZWxlY3Rvci50c3g=) | `85.71% <0.00%> (-14.29%)` | :arrow_down: |
   | [web/src/components/Upstream/UpstreamForm.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL1Vwc3RyZWFtRm9ybS50c3g=) | `90.12% <0.00%> (-2.29%)` | :arrow_down: |
   | [web/src/pages/Upstream/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9VcHN0cmVhbS9MaXN0LnRzeA==) | `90.00% <0.00%> (ø)` | |
   | [web/src/components/Plugin/UI/limit-count.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9VSS9saW1pdC1jb3VudC50c3g=) | `88.09% <0.00%> (ø)` | |
   | [api/internal/filter/request\_id.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2ZpbHRlci9yZXF1ZXN0X2lkLmdv) | | |
   | [api/internal/log/zap.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2xvZy96YXAuZ28=) | | |
   | ... and [56 more](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [758c432...df0d998](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil removed a comment on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil removed a comment on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1058909810


   > The relationship between the proto and the grpc-transcode plugin needs to be explained.
   
   @nic-chen I don't know much about proto and the grpc transcode, so maybe my explanation is not very accurate.
    Can you help me provide an explanation? 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] juzhiyuan commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
juzhiyuan commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1048382744


   cc @Baoyuantop @guoqqqi to have a review


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812537851



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,160 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { create, update } from '../../service';
+import styles from './index.less';
+
+const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
+  protoData,
+  setProtoData,
+  visible,
+  setVisible,
+  editMode,
+  refreshTable,
+}) => {
+  const [form] = Form.useForm();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    form.setFieldsValue(protoData);
+  }, [visible]);
+
+  const submit = async () => {
+    await form.validateFields();
+    const formData: ProtoModule.ProtoData = form.getFieldsValue(true);
+    if (editMode === 'create') {
+      create(formData).then(() => {
+        notification.success({
+          message: `${formatMessage({ id: 'component.global.create' })} ${formatMessage({
+            id: 'menu.proto',
+          })} ${formatMessage({
+            id: 'component.status.success',
+          })}`,
+        });
+        setVisible(false);
+        refreshTable();
+      });
+    } else {
+      update(formData);
+      notification.success({
+        message: `${formatMessage({ id: 'component.global.edit' })} ${formatMessage({
+          id: 'menu.proto',
+        })} ${formatMessage({
+          id: 'component.status.success',
+        })}`,
+      });
+      setVisible(false);
+      refreshTable();
+    }
+  };
+
+  return (
+    <Drawer
+      title={formatMessage({
+        id: editMode === 'create' ? 'page.proto.drawer.create' : 'page.proto.drawer.edit',
+      })}
+      visible={visible}
+      placement="right"
+      closable={false}
+      maskClosable={true}
+      destroyOnClose
+      onClose={() => setVisible(false)}
+      width={700}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Button
+            onClick={() => {
+              setVisible(false);
+            }}
+          >
+            {formatMessage({ id: 'component.global.cancel' })}
+          </Button>
+          <Space>
+            <Button type="primary" onClick={() => submit()}>
+              {formatMessage({ id: 'component.global.submit' })}
+            </Button>
+          </Space>
+        </div>
+      }
+    >
+      <Form form={form} labelAlign="left" labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
+        <Form.Item
+          label="id"
+          name="id"
+          tooltip={formatMessage({ id: 'page.proto.id.tooltip' })}
+          rules={[
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} id`,
+            },
+          ]}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+        >
+          <Input disabled={editMode === 'update'} required></Input>
+        </Form.Item>
+        <Form.Item
+          label="desc"
+          name="desc"
+          tooltip={formatMessage({ id: 'page.proto.desc.tooltip' })}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+        >
+          <Input></Input>
+        </Form.Item>
+        <Form.Item
+          label="content"
+          name="content"
+          tooltip={formatMessage({ id: 'page.proto.content.tooltip' })}
+          rules={[
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} content`,
+            },
+          ]}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+          wrapperCol={{ span: 24 }}
+          className={styles.formItemEditor}
+        >
+          <Editor
+            height="60vh"
+            value={protoData.content}
+            onChange={(text) => {
+              if (text) {
+                setProtoData({ ...protoData, content: text });
+              } else {
+                setProtoData({ ...protoData, content: '' });
+              }
+            }}

Review comment:
       > why do we need this?
   
    shorten it to `setProtoData({ ...protoData, content: text||'' })` 




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] juzhiyuan commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
juzhiyuan commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r818253953



##########
File path: web/src/locales/zh-CN/menu.ts
##########
@@ -67,6 +67,7 @@ export default {
   'menu.consumer': '消费者',
   'menu.plugin': '插件',
   'menu.service': '服务',
+  'menu.proto': 'Proto',

Review comment:
       Proto or Protocol Buffers?

##########
File path: web/cypress/integration/proto/create_and_edit_and_delete_proto.spce.js
##########
@@ -0,0 +1,92 @@
+/*
+ * 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.
+ */
+/* eslint-disable no-undef */
+
+context('Create and Delete Proto', () => {
+  const selector = {
+    id: '#id',
+    description: '#desc',
+    content: '.view-lines',
+    draw: '.ant-drawer-content',
+    notification: '.ant-notification-notice-message',
+  };
+
+  const data = {
+    id: 'test_id',
+    description: 'test_description',
+    content: `message Person {
+required string name = 1;
+required int32 id = 2;
+optional string email = 3;
+}`,

Review comment:
       Why not keep the 2 spaces? 🤔

##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,165 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+import querystring from 'query-string';
+
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });

Review comment:
       How about using your usepagination? (we could merge that one first)




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812532012



##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';

Review comment:
       OK, I'll fix it.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] codecov-commenter edited a comment on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
codecov-commenter edited a comment on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1041473770


   # [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#2320](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (ea1fe08) into [master](https://codecov.io/gh/apache/apisix-dashboard/commit/758c43262a3ae26d6f4a51e2f0a765842b66936d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (758c432) will **decrease** coverage by `1.38%`.
   > The diff coverage is `93.15%`.
   
   > :exclamation: Current head ea1fe08 differs from pull request most recent head 8d392cc. Consider uploading reports for the commit 8d392cc to get more accurate results
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/graphs/tree.svg?width=650&height=150&src=pr&token=Q1HERXN96P&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master    #2320      +/-   ##
   ==========================================
   - Coverage   69.91%   68.53%   -1.39%     
   ==========================================
     Files         184      130      -54     
     Lines        7280     3445    -3835     
     Branches      830      838       +8     
   ==========================================
   - Hits         5090     2361    -2729     
   + Misses       1896     1084     -812     
   + Partials      294        0     -294     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | backend-e2e-test | `?` | |
   | backend-e2e-test-ginkgo | `?` | |
   | backend-unit-test | `?` | |
   | frontend-e2e-test | `68.53% <93.15%> (+0.36%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [web/src/components/Plugin/UI/limit-count.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9VSS9saW1pdC1jb3VudC50c3g=) | `88.09% <ø> (ø)` | |
   | [web/src/components/Plugin/UI/limit-req.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9VSS9saW1pdC1yZXEudHN4) | `100.00% <ø> (ø)` | |
   | [web/src/components/Plugin/data.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9kYXRhLnRzeA==) | `100.00% <ø> (ø)` | |
   | [web/src/helpers.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9oZWxwZXJzLnRzeA==) | `70.49% <ø> (-3.28%)` | :arrow_down: |
   | [web/src/pages/Upstream/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9VcHN0cmVhbS9MaXN0LnRzeA==) | `90.00% <ø> (ø)` | |
   | [...b/src/pages/Proto/components/ProtoDrawer/index.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9jb21wb25lbnRzL1Byb3RvRHJhd2VyL2luZGV4LnRzeA==) | `88.46% <88.46%> (ø)` | |
   | [web/src/pages/Proto/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9MaXN0LnRzeA==) | `93.54% <93.54%> (ø)` | |
   | [web/src/components/Upstream/UpstreamForm.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL1Vwc3RyZWFtRm9ybS50c3g=) | `90.12% <100.00%> (-2.29%)` | :arrow_down: |
   | [...omponents/Upstream/components/UpstreamSelector.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL2NvbXBvbmVudHMvVXBzdHJlYW1TZWxlY3Rvci50c3g=) | `85.71% <100.00%> (-14.29%)` | :arrow_down: |
   | [web/src/pages/Proto/service.ts](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9zZXJ2aWNlLnRz) | `100.00% <100.00%> (ø)` | |
   | ... and [61 more](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [758c432...8d392cc](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] codecov-commenter edited a comment on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
codecov-commenter edited a comment on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1041473770


   # [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#2320](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (0b8b378) into [master](https://codecov.io/gh/apache/apisix-dashboard/commit/758c43262a3ae26d6f4a51e2f0a765842b66936d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (758c432) will **decrease** coverage by `1.32%`.
   > The diff coverage is `92.42%`.
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/graphs/tree.svg?width=650&height=150&src=pr&token=Q1HERXN96P&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master    #2320      +/-   ##
   ==========================================
   - Coverage   69.91%   68.59%   -1.33%     
   ==========================================
     Files         184      130      -54     
     Lines        7280     3445    -3835     
     Branches      830      838       +8     
   ==========================================
   - Hits         5090     2363    -2727     
   + Misses       1896     1082     -814     
   + Partials      294        0     -294     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | backend-e2e-test | `?` | |
   | backend-e2e-test-ginkgo | `?` | |
   | backend-unit-test | `?` | |
   | frontend-e2e-test | `68.59% <92.42%> (+0.42%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [web/src/helpers.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9oZWxwZXJzLnRzeA==) | `73.77% <ø> (ø)` | |
   | [...b/src/pages/Proto/components/ProtoDrawer/index.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9jb21wb25lbnRzL1Byb3RvRHJhd2VyL2luZGV4LnRzeA==) | `88.46% <88.46%> (ø)` | |
   | [web/src/pages/Proto/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9MaXN0LnRzeA==) | `93.54% <93.54%> (ø)` | |
   | [web/src/pages/Proto/service.ts](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9zZXJ2aWNlLnRz) | `100.00% <100.00%> (ø)` | |
   | [...omponents/Upstream/components/UpstreamSelector.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL2NvbXBvbmVudHMvVXBzdHJlYW1TZWxlY3Rvci50c3g=) | `85.71% <0.00%> (-14.29%)` | :arrow_down: |
   | [web/src/components/Upstream/UpstreamForm.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL1Vwc3RyZWFtRm9ybS50c3g=) | `90.12% <0.00%> (-2.29%)` | :arrow_down: |
   | [web/src/pages/Upstream/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9VcHN0cmVhbS9MaXN0LnRzeA==) | `90.00% <0.00%> (ø)` | |
   | [web/src/components/Plugin/UI/limit-count.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9VSS9saW1pdC1jb3VudC50c3g=) | `88.09% <0.00%> (ø)` | |
   | [api/internal/handler/ssl/ssl.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2hhbmRsZXIvc3NsL3NzbC5nbw==) | | |
   | [api/internal/utils/version.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL3V0aWxzL3ZlcnNpb24uZ28=) | | |
   | ... and [56 more](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [758c432...0b8b378](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r817316382



##########
File path: web/cypress/integration/proto/create_and_edit_and_delete_proto.spce.js
##########
@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+/* eslint-disable no-undef */
+
+context('Create and Delete Proto', () => {
+  const selector = {
+    id: '#id',
+    description: '#desc',
+    content: '.view-lines',
+    draw: '.ant-drawer-content',
+    notification: '.ant-notification-notice-message',
+  };
+
+  const data = {
+    id: 'test_id',
+    description: 'test_description',
+    content: `message Person {
+required string name = 1;
+required int32 id = 2;
+optional string email = 3;
+}`,
+    description2: 'test_description2',
+    content2: `message Person2 {
+required string name = 1;
+required int32 id = 2;
+optional string email = 3;
+}`,
+    createProtoSuccess: 'Create proto Successfully',
+    configureProtoSuccess: 'Configure proto Successfully',
+    deleteProtoDelete: 'Delete Upstream Successfully',
+  };
+
+  beforeEach(() => {
+    cy.login();
+  });
+
+  it('should create proto', () => {
+    cy.visit('/');
+    cy.contains('Proto').click();
+    cy.contains('Create').click();
+    cy.get(selector.draw)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.id).type(data.id);
+        cy.get(selector.description).type(data.description);
+        cy.get(selector.content).type(data.content);
+
+        cy.contains('Submit').click();
+      });
+    cy.get(selector.notification).should('contain', data.createProtoSuccess);
+  });
+
+  it('should edit the proto', () => {
+    cy.visit('/');
+    cy.contains('Proto').click();
+    cy.contains(data.id).siblings().contains('Configure').click();
+    cy.get(selector.draw)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.description).clear().type(data.description2);
+        cy.get(selector.content).type(data.content2);
+
+        cy.contains('Submit').click();
+      });
+    cy.get(selector.notification).should('contain', data.configureProtoSuccess);

Review comment:
       > After verifying notification displays correct text as expected, it would be better to close the notification component, or it may cause test unstable.
   
   done.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1058909810


   > The relationship between the proto and the grpc-transcode plugin needs to be explained.
   
   @nic-chen I don't know much about proto and the grpc transcode, so maybe my explanation is not very accurate.
    Can you help me provide an explanation? 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] juzhiyuan merged pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
juzhiyuan merged pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320


   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1058904528


   > LGTM with the screenshots and test cases.
   > 
   > BTW, do we have a plan to support selecting proto on the UI of the plugin `grpc-transcode`? Thanks!
   
   You can create a new issue after the current PR is merged, Maybe I'll try to develop it. 😀


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] Baoyuantop commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
Baoyuantop commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812513098



##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() =>
+                showDrawer({ id: record.id, content: record.content, desc: record.desc }, 'update')
+              }
+            >
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'page.upstream.list.confirm.delete' })}
+              okText={formatMessage({ id: 'page.upstream.list.confirm' })}
+              cancelText={formatMessage({ id: 'page.upstream.list.cancel' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'page.upstream.list.delete.successfully' }),
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
+                });
+              }}
+            >
+              <Button type="primary" danger>
+                {formatMessage({ id: 'page.upstream.list.delete' })}
+              </Button>
+            </Popconfirm>
+          </Space>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ProtoDrawer
+        protoData={protoData as ProtoModule.ProtoData}
+        setProtoData={setProtoData}
+        visible={drawerVisible}
+        setVisible={setDrawerVisible}

Review comment:
       we can use a state in this component control visible like `visible && ProtoDrawer`, this way avoided passing many props




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812524176



##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() =>
+                showDrawer({ id: record.id, content: record.content, desc: record.desc }, 'update')
+              }
+            >
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'page.upstream.list.confirm.delete' })}
+              okText={formatMessage({ id: 'page.upstream.list.confirm' })}
+              cancelText={formatMessage({ id: 'page.upstream.list.cancel' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {

Review comment:
       > why need `!`
   
   ! is not needed, I'll fix it.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] LiteSun commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
LiteSun commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r817295120



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.less
##########
@@ -0,0 +1,28 @@
+/*
+ * 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 '~antd/es/style/themes/default.less';
+
+.formItemEditor {
+  flex-flow: column;
+  row-gap: 20px !important;

Review comment:
       not recommend using !important here

##########
File path: web/cypress/integration/proto/create_and_edit_and_delete_proto.spce.js
##########
@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+/* eslint-disable no-undef */
+
+context('Create and Delete Proto', () => {
+  const selector = {
+    id: '#id',
+    description: '#desc',
+    content: '.view-lines',
+    draw: '.ant-drawer-content',
+    notification: '.ant-notification-notice-message',
+  };
+
+  const data = {
+    id: 'test_id',
+    description: 'test_description',
+    content: `message Person {
+required string name = 1;
+required int32 id = 2;
+optional string email = 3;
+}`,
+    description2: 'test_description2',
+    content2: `message Person2 {
+required string name = 1;
+required int32 id = 2;
+optional string email = 3;
+}`,
+    createProtoSuccess: 'Create proto Successfully',
+    configureProtoSuccess: 'Configure proto Successfully',
+    deleteProtoDelete: 'Delete Upstream Successfully',
+  };
+
+  beforeEach(() => {
+    cy.login();
+  });
+
+  it('should create proto', () => {
+    cy.visit('/');
+    cy.contains('Proto').click();
+    cy.contains('Create').click();
+    cy.get(selector.draw)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.id).type(data.id);
+        cy.get(selector.description).type(data.description);
+        cy.get(selector.content).type(data.content);
+
+        cy.contains('Submit').click();
+      });
+    cy.get(selector.notification).should('contain', data.createProtoSuccess);
+  });
+
+  it('should edit the proto', () => {
+    cy.visit('/');
+    cy.contains('Proto').click();
+    cy.contains(data.id).siblings().contains('Configure').click();
+    cy.get(selector.draw)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.description).clear().type(data.description2);
+        cy.get(selector.content).type(data.content2);
+
+        cy.contains('Submit').click();
+      });
+    cy.get(selector.notification).should('contain', data.configureProtoSuccess);

Review comment:
       After verifying notification displays correct text as expected, it would be better to close the notification component, or it may cause test unstable.

##########
File path: web/cypress/integration/proto/create_and_edit_and_delete_proto.spce.js
##########
@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+/* eslint-disable no-undef */
+
+context('Create and Delete Proto', () => {
+  const selector = {
+    id: '#id',
+    description: '#desc',
+    content: '.view-lines',
+    draw: '.ant-drawer-content',
+    notification: '.ant-notification-notice-message',
+  };
+
+  const data = {
+    id: 'test_id',
+    description: 'test_description',
+    content: `message Person {
+required string name = 1;
+required int32 id = 2;
+optional string email = 3;
+}`,
+    description2: 'test_description2',
+    content2: `message Person2 {
+required string name = 1;
+required int32 id = 2;
+optional string email = 3;
+}`,
+    createProtoSuccess: 'Create proto Successfully',
+    configureProtoSuccess: 'Configure proto Successfully',
+    deleteProtoDelete: 'Delete Upstream Successfully',
+  };
+
+  beforeEach(() => {
+    cy.login();
+  });
+
+  it('should create proto', () => {
+    cy.visit('/');
+    cy.contains('Proto').click();
+    cy.contains('Create').click();
+    cy.get(selector.draw)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.id).type(data.id);
+        cy.get(selector.description).type(data.description);
+        cy.get(selector.content).type(data.content);
+
+        cy.contains('Submit').click();
+      });
+    cy.get(selector.notification).should('contain', data.createProtoSuccess);
+  });
+
+  it('should edit the proto', () => {
+    cy.visit('/');
+    cy.contains('Proto').click();
+    cy.contains(data.id).siblings().contains('Configure').click();
+    cy.get(selector.draw)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.description).clear().type(data.description2);
+        cy.get(selector.content).type(data.content2);
+
+        cy.contains('Submit').click();
+      });
+    cy.get(selector.notification).should('contain', data.configureProtoSuccess);
+  });
+
+  it('should delete the proto', () => {
+    cy.visit('/');
+    cy.contains('Proto').click();
+    cy.contains(data.id).siblings().contains('Delete').click();
+    cy.contains('button', 'Confirm').click();
+    cy.get(selector.notification).should('contain', data.deleteProtoDelete);

Review comment:
       ditto




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] Baoyuantop commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
Baoyuantop commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1054888660


   also cc @bzp2010 @LiteSun 


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1056419274


   @LiteSun Please help me re execute CI. I can pass it in the development environment.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] codecov-commenter edited a comment on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
codecov-commenter edited a comment on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1041473770


   # [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#2320](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (bb21e05) into [master](https://codecov.io/gh/apache/apisix-dashboard/commit/758c43262a3ae26d6f4a51e2f0a765842b66936d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (758c432) will **decrease** coverage by `1.32%`.
   > The diff coverage is `93.15%`.
   
   > :exclamation: Current head bb21e05 differs from pull request most recent head 540f8ad. Consider uploading reports for the commit 540f8ad to get more accurate results
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/graphs/tree.svg?width=650&height=150&src=pr&token=Q1HERXN96P&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master    #2320      +/-   ##
   ==========================================
   - Coverage   69.91%   68.59%   -1.33%     
   ==========================================
     Files         184      130      -54     
     Lines        7280     3445    -3835     
     Branches      830      838       +8     
   ==========================================
   - Hits         5090     2363    -2727     
   + Misses       1896     1082     -814     
   + Partials      294        0     -294     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | backend-e2e-test | `?` | |
   | backend-e2e-test-ginkgo | `?` | |
   | backend-unit-test | `?` | |
   | frontend-e2e-test | `68.59% <93.15%> (+0.42%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [web/src/components/Plugin/UI/limit-count.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9VSS9saW1pdC1jb3VudC50c3g=) | `88.09% <ø> (ø)` | |
   | [web/src/components/Plugin/UI/limit-req.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9VSS9saW1pdC1yZXEudHN4) | `100.00% <ø> (ø)` | |
   | [web/src/components/Plugin/data.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9kYXRhLnRzeA==) | `100.00% <ø> (ø)` | |
   | [web/src/helpers.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9oZWxwZXJzLnRzeA==) | `73.77% <ø> (ø)` | |
   | [web/src/pages/Upstream/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9VcHN0cmVhbS9MaXN0LnRzeA==) | `90.00% <ø> (ø)` | |
   | [...b/src/pages/Proto/components/ProtoDrawer/index.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9jb21wb25lbnRzL1Byb3RvRHJhd2VyL2luZGV4LnRzeA==) | `88.46% <88.46%> (ø)` | |
   | [web/src/pages/Proto/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9MaXN0LnRzeA==) | `93.54% <93.54%> (ø)` | |
   | [web/src/components/Upstream/UpstreamForm.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL1Vwc3RyZWFtRm9ybS50c3g=) | `90.12% <100.00%> (-2.29%)` | :arrow_down: |
   | [...omponents/Upstream/components/UpstreamSelector.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL2NvbXBvbmVudHMvVXBzdHJlYW1TZWxlY3Rvci50c3g=) | `85.71% <100.00%> (-14.29%)` | :arrow_down: |
   | [web/src/pages/Proto/service.ts](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9zZXJ2aWNlLnRz) | `100.00% <100.00%> (ø)` | |
   | ... and [60 more](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [758c432...540f8ad](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] nic-chen commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
nic-chen commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1058893391


   LGTM with the screenshots and test cases. 
   
   BTW, do we have a plan to support selecting proto on the UI of the plugin `grpc-transcode`?  Thanks!


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] Baoyuantop commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
Baoyuantop commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812511311



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,160 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { create, update } from '../../service';
+import styles from './index.less';
+
+const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
+  protoData,
+  setProtoData,
+  visible,
+  setVisible,
+  editMode,
+  refreshTable,
+}) => {
+  const [form] = Form.useForm();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    form.setFieldsValue(protoData);
+  }, [visible]);

Review comment:
       Is it possible to use `initialValues` API from `Form`?




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] Baoyuantop commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
Baoyuantop commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812516732



##########
File path: web/src/pages/Proto/service.ts
##########
@@ -0,0 +1,46 @@
+/*
+ * 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 { request } from 'umi';
+
+export const fetchList = ({ current = 1, pageSize = 10, ...res }) => {
+  return request<Res<ResListData<ProtoModule.ResponseBody>>>('/proto', {
+    params: {
+      desc: res.desc,
+      page: current,
+      page_size: pageSize,
+    },
+  }).then(({ data }) => {
+    return {
+      data: data.rows,
+      total: data.total_size,
+    };
+  });
+};
+
+export const create = (data: ProtoModule.ProtoData) =>
+  request('/proto', {
+    method: 'POST',
+    data,
+  });
+
+export const update = (data: ProtoModule.ProtoData) => {

Review comment:
       we can only send `id`




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] codecov-commenter edited a comment on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
codecov-commenter edited a comment on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1041473770


   # [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#2320](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (4566878) into [master](https://codecov.io/gh/apache/apisix-dashboard/commit/758c43262a3ae26d6f4a51e2f0a765842b66936d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (758c432) will **decrease** coverage by `1.27%`.
   > The diff coverage is `92.42%`.
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/graphs/tree.svg?width=650&height=150&src=pr&token=Q1HERXN96P&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master    #2320      +/-   ##
   ==========================================
   - Coverage   69.91%   68.64%   -1.28%     
   ==========================================
     Files         184      130      -54     
     Lines        7280     3441    -3839     
     Branches      830      836       +6     
   ==========================================
   - Hits         5090     2362    -2728     
   + Misses       1896     1079     -817     
   + Partials      294        0     -294     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | backend-e2e-test | `?` | |
   | backend-e2e-test-ginkgo | `?` | |
   | backend-unit-test | `?` | |
   | frontend-e2e-test | `68.64% <92.42%> (+0.47%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [web/src/helpers.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9oZWxwZXJzLnRzeA==) | `73.77% <ø> (ø)` | |
   | [...b/src/pages/Proto/components/ProtoDrawer/index.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9jb21wb25lbnRzL1Byb3RvRHJhd2VyL2luZGV4LnRzeA==) | `88.46% <88.46%> (ø)` | |
   | [web/src/pages/Proto/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9MaXN0LnRzeA==) | `93.54% <93.54%> (ø)` | |
   | [web/src/pages/Proto/service.ts](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9zZXJ2aWNlLnRz) | `100.00% <100.00%> (ø)` | |
   | [web/src/components/Plugin/UI/limit-count.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9VSS9saW1pdC1jb3VudC50c3g=) | `88.09% <0.00%> (ø)` | |
   | [api/internal/core/migrate/conflict.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2NvcmUvbWlncmF0ZS9jb25mbGljdC5nbw==) | | |
   | [api/internal/handler/ssl/ssl.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2hhbmRsZXIvc3NsL3NzbC5nbw==) | | |
   | [api/internal/filter/logging.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2ZpbHRlci9sb2dnaW5nLmdv) | | |
   | [...pi/internal/handler/plugin\_config/plugin\_config.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2hhbmRsZXIvcGx1Z2luX2NvbmZpZy9wbHVnaW5fY29uZmlnLmdv) | | |
   | [api/internal/filter/recover.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2ZpbHRlci9yZWNvdmVyLmdv) | | |
   | ... and [53 more](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [758c432...4566878](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] guoqqqi commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
guoqqqi commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812510125



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,160 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { create, update } from '../../service';

Review comment:
       ```suggestion
   import { Input } from 'antd';
   
   import { create, update } from '../../service';
   ```

##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';

Review comment:
       ```suggestion
   import { PlusOutlined } from '@ant-design/icons';
   import querystring from 'query-string';
   
   import { timestampToLocaleString } from '@/helpers';
   ```

##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.less
##########
@@ -0,0 +1,28 @@
+/*
+ * 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 '~antd/es/style/themes/default.less';
+
+.formItemEditor {
+  flex-flow: column;
+  row-gap: 20px !important;
+
+  :global {
+    .ant-form-item-explain-error {
+      padding-left: 25px;
+    }

Review comment:
       It seems to have an effect on the error message on all pages here? Please make sure it doesn't affect other form styles.

##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() =>
+                showDrawer({ id: record.id, content: record.content, desc: record.desc }, 'update')
+              }
+            >
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'page.upstream.list.confirm.delete' })}
+              okText={formatMessage({ id: 'page.upstream.list.confirm' })}
+              cancelText={formatMessage({ id: 'page.upstream.list.cancel' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'page.upstream.list.delete.successfully' }),
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
+                });
+              }}
+            >
+              <Button type="primary" danger>
+                {formatMessage({ id: 'page.upstream.list.delete' })}
+              </Button>
+            </Popconfirm>
+          </Space>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ProtoDrawer
+        protoData={protoData as ProtoModule.ProtoData}
+        setProtoData={setProtoData}
+        visible={drawerVisible}
+        setVisible={setDrawerVisible}
+        editMode={editMode}
+        refreshTable={refreshTable}
+      ></ProtoDrawer>

Review comment:
       ```suggestion
         <ProtoDrawer
           protoData={protoData as ProtoModule.ProtoData}
           setProtoData={setProtoData}
           visible={drawerVisible}
           setVisible={setDrawerVisible}
           editMode={editMode}
           refreshTable={refreshTable}
         />
   ```

##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,160 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { create, update } from '../../service';
+import styles from './index.less';
+
+const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
+  protoData,
+  setProtoData,
+  visible,
+  setVisible,
+  editMode,
+  refreshTable,
+}) => {
+  const [form] = Form.useForm();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    form.setFieldsValue(protoData);
+  }, [visible]);
+
+  const submit = async () => {
+    await form.validateFields();
+    const formData: ProtoModule.ProtoData = form.getFieldsValue(true);
+    if (editMode === 'create') {
+      create(formData).then(() => {
+        notification.success({
+          message: `${formatMessage({ id: 'component.global.create' })} ${formatMessage({
+            id: 'menu.proto',
+          })} ${formatMessage({
+            id: 'component.status.success',
+          })}`,

Review comment:
       We would prefer not to use this style of writing, which is not particularly friendly to Chinese and English

##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() =>
+                showDrawer({ id: record.id, content: record.content, desc: record.desc }, 'update')
+              }
+            >
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'page.upstream.list.confirm.delete' })}
+              okText={formatMessage({ id: 'page.upstream.list.confirm' })}
+              cancelText={formatMessage({ id: 'page.upstream.list.cancel' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'page.upstream.list.delete.successfully' }),
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
+                });
+              }}
+            >
+              <Button type="primary" danger>
+                {formatMessage({ id: 'page.upstream.list.delete' })}
+              </Button>
+            </Popconfirm>
+          </Space>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ProtoDrawer
+        protoData={protoData as ProtoModule.ProtoData}
+        setProtoData={setProtoData}
+        visible={drawerVisible}
+        setVisible={setDrawerVisible}
+        editMode={editMode}
+        refreshTable={refreshTable}
+      ></ProtoDrawer>

Review comment:
       And I think we can just put the drawer component inside the PageHeaderWrapper




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] nic-chen commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
nic-chen commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r819322923



##########
File path: web/src/pages/Proto/locales/en-US.ts
##########
@@ -0,0 +1,34 @@
+/*
+ * 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 {
+  'page.proto.list': 'Proto List',
+  'page.proto.list.description':
+    "Protocol buffers are Google's language-neutral, platform-neutral, extensible mechanism for serializing structured data.You define how you want your data to be structured once, then you can use special generated source code to easily write and read your structured data to and from a variety of data streams and using a variety of languages.",

Review comment:
       The relationship between the `proto` and the `grpc-transcode` plugin needs to be explained.
   




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] nic-chen commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
nic-chen commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1058907126


   @Baoyuantop  please have a look again.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] guoqqqi commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
guoqqqi commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r816464029



##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,168 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+import querystring from 'query-string';
+
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>

Review comment:
       ```suggestion
   
   ```

##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,168 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+import querystring from 'query-string';
+
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() =>
+                showDrawer({ id: record.id, content: record.content, desc: record.desc }, 'update')
+              }
+            >
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'page.upstream.list.confirm.delete' })}
+              okText={formatMessage({ id: 'page.upstream.list.confirm' })}
+              cancelText={formatMessage({ id: 'page.upstream.list.cancel' })}
+              onConfirm={() => {
+                remove(record.id).then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'page.upstream.list.delete.successfully' }),
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
+                });
+              }}
+            >
+              <Button type="primary" danger>
+                {formatMessage({ id: 'page.upstream.list.delete' })}
+              </Button>
+            </Popconfirm>
+          </Space>
+        </>

Review comment:
       ```suggestion
   
   ```

##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,149 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+
+import { create, update } from '../../service';
+import styles from './index.less';
+
+const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
+  protoData,
+  setProtoData,
+  visible,
+  setVisible,
+  editMode,
+  refreshTable,
+}) => {
+  const [form] = Form.useForm();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    form.setFieldsValue(protoData);
+  }, [visible]);
+
+  const submit = async () => {
+    await form.validateFields();
+    const formData: ProtoModule.ProtoData = form.getFieldsValue(true);
+    if (editMode === 'create') {
+      create(formData).then(() => {
+        notification.success({
+          message: formatMessage({ id: 'page.proto.drawer.create.successfully' }),
+        });
+        setVisible(false);
+        refreshTable();
+      });
+    } else {
+      update(formData);
+      notification.success({
+        message: formatMessage({ id: 'page.proto.drawer.edit.successfully' }),
+      });
+      setVisible(false);
+      refreshTable();
+    }
+  };
+
+  return (
+    <Drawer
+      title={formatMessage({
+        id: editMode === 'create' ? 'page.proto.drawer.create' : 'page.proto.drawer.edit',
+      })}
+      visible={visible}
+      placement="right"
+      closable={false}
+      maskClosable={true}
+      destroyOnClose
+      onClose={() => setVisible(false)}
+      width={700}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Button
+            onClick={() => {
+              setVisible(false);
+            }}
+          >
+            {formatMessage({ id: 'component.global.cancel' })}
+          </Button>
+          <Space>
+            <Button type="primary" onClick={() => submit()}>
+              {formatMessage({ id: 'component.global.submit' })}
+            </Button>
+          </Space>
+        </div>
+      }
+    >
+      <Form form={form} labelAlign="left" labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
+        <Form.Item
+          label="id"
+          name="id"
+          tooltip={formatMessage({ id: 'page.proto.id.tooltip' })}
+          rules={[
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} id`,
+            },
+          ]}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+        >
+          <Input disabled={editMode === 'update'} required></Input>
+        </Form.Item>
+        <Form.Item
+          label="desc"
+          name="desc"
+          tooltip={formatMessage({ id: 'page.proto.desc.tooltip' })}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+        >
+          <Input></Input>

Review comment:
       ```suggestion
             <Input />
   ```

##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,149 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+
+import { create, update } from '../../service';
+import styles from './index.less';
+
+const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
+  protoData,
+  setProtoData,
+  visible,
+  setVisible,
+  editMode,
+  refreshTable,
+}) => {
+  const [form] = Form.useForm();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    form.setFieldsValue(protoData);
+  }, [visible]);
+
+  const submit = async () => {
+    await form.validateFields();
+    const formData: ProtoModule.ProtoData = form.getFieldsValue(true);
+    if (editMode === 'create') {
+      create(formData).then(() => {
+        notification.success({
+          message: formatMessage({ id: 'page.proto.drawer.create.successfully' }),
+        });
+        setVisible(false);
+        refreshTable();
+      });
+    } else {
+      update(formData);
+      notification.success({
+        message: formatMessage({ id: 'page.proto.drawer.edit.successfully' }),
+      });
+      setVisible(false);
+      refreshTable();
+    }
+  };
+
+  return (
+    <Drawer
+      title={formatMessage({
+        id: editMode === 'create' ? 'page.proto.drawer.create' : 'page.proto.drawer.edit',
+      })}
+      visible={visible}
+      placement="right"
+      closable={false}
+      maskClosable={true}
+      destroyOnClose
+      onClose={() => setVisible(false)}
+      width={700}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Button
+            onClick={() => {
+              setVisible(false);
+            }}
+          >
+            {formatMessage({ id: 'component.global.cancel' })}
+          </Button>
+          <Space>
+            <Button type="primary" onClick={() => submit()}>
+              {formatMessage({ id: 'component.global.submit' })}
+            </Button>
+          </Space>
+        </div>
+      }
+    >
+      <Form form={form} labelAlign="left" labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
+        <Form.Item
+          label="id"
+          name="id"
+          tooltip={formatMessage({ id: 'page.proto.id.tooltip' })}
+          rules={[
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} id`,
+            },
+          ]}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+        >
+          <Input disabled={editMode === 'update'} required></Input>

Review comment:
       ```suggestion
             <Input disabled={editMode === 'update'} required />
   ```

##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,168 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';

Review comment:
       chang this to the 27 line




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812537851



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,160 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { create, update } from '../../service';
+import styles from './index.less';
+
+const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
+  protoData,
+  setProtoData,
+  visible,
+  setVisible,
+  editMode,
+  refreshTable,
+}) => {
+  const [form] = Form.useForm();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    form.setFieldsValue(protoData);
+  }, [visible]);
+
+  const submit = async () => {
+    await form.validateFields();
+    const formData: ProtoModule.ProtoData = form.getFieldsValue(true);
+    if (editMode === 'create') {
+      create(formData).then(() => {
+        notification.success({
+          message: `${formatMessage({ id: 'component.global.create' })} ${formatMessage({
+            id: 'menu.proto',
+          })} ${formatMessage({
+            id: 'component.status.success',
+          })}`,
+        });
+        setVisible(false);
+        refreshTable();
+      });
+    } else {
+      update(formData);
+      notification.success({
+        message: `${formatMessage({ id: 'component.global.edit' })} ${formatMessage({
+          id: 'menu.proto',
+        })} ${formatMessage({
+          id: 'component.status.success',
+        })}`,
+      });
+      setVisible(false);
+      refreshTable();
+    }
+  };
+
+  return (
+    <Drawer
+      title={formatMessage({
+        id: editMode === 'create' ? 'page.proto.drawer.create' : 'page.proto.drawer.edit',
+      })}
+      visible={visible}
+      placement="right"
+      closable={false}
+      maskClosable={true}
+      destroyOnClose
+      onClose={() => setVisible(false)}
+      width={700}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Button
+            onClick={() => {
+              setVisible(false);
+            }}
+          >
+            {formatMessage({ id: 'component.global.cancel' })}
+          </Button>
+          <Space>
+            <Button type="primary" onClick={() => submit()}>
+              {formatMessage({ id: 'component.global.submit' })}
+            </Button>
+          </Space>
+        </div>
+      }
+    >
+      <Form form={form} labelAlign="left" labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
+        <Form.Item
+          label="id"
+          name="id"
+          tooltip={formatMessage({ id: 'page.proto.id.tooltip' })}
+          rules={[
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} id`,
+            },
+          ]}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+        >
+          <Input disabled={editMode === 'update'} required></Input>
+        </Form.Item>
+        <Form.Item
+          label="desc"
+          name="desc"
+          tooltip={formatMessage({ id: 'page.proto.desc.tooltip' })}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+        >
+          <Input></Input>
+        </Form.Item>
+        <Form.Item
+          label="content"
+          name="content"
+          tooltip={formatMessage({ id: 'page.proto.content.tooltip' })}
+          rules={[
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} content`,
+            },
+          ]}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+          wrapperCol={{ span: 24 }}
+          className={styles.formItemEditor}
+        >
+          <Editor
+            height="60vh"
+            value={protoData.content}
+            onChange={(text) => {
+              if (text) {
+                setProtoData({ ...protoData, content: text });
+              } else {
+                setProtoData({ ...protoData, content: '' });
+              }
+            }}

Review comment:
       > why do we need this?
   
   As it may appear `undefined`, I'll shorten it to `setProtoData({ ...protoData, content: text||'' })` 




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812577638



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,160 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { create, update } from '../../service';
+import styles from './index.less';
+
+const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
+  protoData,
+  setProtoData,
+  visible,
+  setVisible,
+  editMode,
+  refreshTable,
+}) => {
+  const [form] = Form.useForm();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    form.setFieldsValue(protoData);
+  }, [visible]);

Review comment:
       This operation is required, I need to guarantee that the form data is reset when the drawer is opened.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812533591



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,160 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { create, update } from '../../service';

Review comment:
       > 
   
   OK




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] nic-chen commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
nic-chen commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r819326303



##########
File path: web/src/pages/Proto/locales/zh-CN.ts
##########
@@ -0,0 +1,34 @@
+/*
+ * 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 {
+  'page.proto.list': 'Proto 列表',
+  'page.proto.list.description':
+    'Protocol Buffers 是 Google 用于序列化结构化数据的框架,它具有语言中立、平台中立、可扩展机制的特性,您只需定义一次数据的结构化方式,然后就可以使用各种语言通过特殊生成的源代码轻松地将结构化数据写入和读取各种数据流。',

Review comment:
       ditto




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] codecov-commenter edited a comment on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
codecov-commenter edited a comment on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1041473770


   # [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#2320](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (0b962e6) into [master](https://codecov.io/gh/apache/apisix-dashboard/commit/2aadeff96d13290918fe5598210f943e77da6411?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (2aadeff) will **increase** coverage by `0.45%`.
   > The diff coverage is `93.44%`.
   
   > :exclamation: Current head 0b962e6 differs from pull request most recent head 11e2808. Consider uploading reports for the commit 11e2808 to get more accurate results
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/graphs/tree.svg?width=650&height=150&src=pr&token=Q1HERXN96P&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master    #2320      +/-   ##
   ==========================================
   + Coverage   68.07%   68.52%   +0.45%     
   ==========================================
     Files         128      131       +3     
     Lines        3358     3419      +61     
     Branches      822      826       +4     
   ==========================================
   + Hits         2286     2343      +57     
   - Misses       1072     1076       +4     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | frontend-e2e-test | `68.52% <93.44%> (+0.45%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [web/src/helpers.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9oZWxwZXJzLnRzeA==) | `73.77% <ø> (ø)` | |
   | [...b/src/pages/Proto/components/ProtoDrawer/index.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9jb21wb25lbnRzL1Byb3RvRHJhd2VyL2luZGV4LnRzeA==) | `88.46% <88.46%> (ø)` | |
   | [web/src/pages/Proto/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9MaXN0LnRzeA==) | `96.15% <96.15%> (ø)` | |
   | [web/src/pages/Proto/service.ts](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9zZXJ2aWNlLnRz) | `100.00% <100.00%> (ø)` | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [2aadeff...11e2808](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] codecov-commenter edited a comment on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
codecov-commenter edited a comment on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1041473770


   # [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#2320](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (aa6e7a5) into [master](https://codecov.io/gh/apache/apisix-dashboard/commit/758c43262a3ae26d6f4a51e2f0a765842b66936d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (758c432) will **decrease** coverage by `1.29%`.
   > The diff coverage is `91.17%`.
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/graphs/tree.svg?width=650&height=150&src=pr&token=Q1HERXN96P&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master    #2320      +/-   ##
   ==========================================
   - Coverage   69.91%   68.62%   -1.30%     
   ==========================================
     Files         184      130      -54     
     Lines        7280     3442    -3838     
     Branches      830      836       +6     
   ==========================================
   - Hits         5090     2362    -2728     
   + Misses       1896     1080     -816     
   + Partials      294        0     -294     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | backend-e2e-test | `?` | |
   | backend-e2e-test-ginkgo | `?` | |
   | backend-unit-test | `?` | |
   | frontend-e2e-test | `68.62% <91.17%> (+0.45%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [web/src/helpers.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9oZWxwZXJzLnRzeA==) | `73.77% <ø> (ø)` | |
   | [...b/src/pages/Proto/components/ProtoDrawer/index.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9jb21wb25lbnRzL1Byb3RvRHJhd2VyL2luZGV4LnRzeA==) | `85.71% <85.71%> (ø)` | |
   | [web/src/pages/Proto/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9MaXN0LnRzeA==) | `93.54% <93.54%> (ø)` | |
   | [web/src/pages/Proto/service.ts](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9zZXJ2aWNlLnRz) | `100.00% <100.00%> (ø)` | |
   | [api/internal/core/store/store.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2NvcmUvc3RvcmUvc3RvcmUuZ28=) | | |
   | [api/internal/core/entity/interface.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2NvcmUvZW50aXR5L2ludGVyZmFjZS5nbw==) | | |
   | [api/internal/core/storage/etcd.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2NvcmUvc3RvcmFnZS9ldGNkLmdv) | | |
   | [api/internal/handler/consumer/consumer.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2hhbmRsZXIvY29uc3VtZXIvY29uc3VtZXIuZ28=) | | |
   | [api/internal/utils/json\_patch.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL3V0aWxzL2pzb25fcGF0Y2guZ28=) | | |
   | [api/internal/route.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL3JvdXRlLmdv) | | |
   | ... and [51 more](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [758c432...aa6e7a5](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] Baoyuantop commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
Baoyuantop commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812516053



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,160 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { create, update } from '../../service';
+import styles from './index.less';
+
+const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
+  protoData,
+  setProtoData,
+  visible,
+  setVisible,
+  editMode,
+  refreshTable,
+}) => {
+  const [form] = Form.useForm();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    form.setFieldsValue(protoData);
+  }, [visible]);
+
+  const submit = async () => {
+    await form.validateFields();
+    const formData: ProtoModule.ProtoData = form.getFieldsValue(true);
+    if (editMode === 'create') {
+      create(formData).then(() => {
+        notification.success({
+          message: `${formatMessage({ id: 'component.global.create' })} ${formatMessage({
+            id: 'menu.proto',
+          })} ${formatMessage({
+            id: 'component.status.success',
+          })}`,
+        });
+        setVisible(false);
+        refreshTable();
+      });
+    } else {
+      update(formData);
+      notification.success({
+        message: `${formatMessage({ id: 'component.global.edit' })} ${formatMessage({
+          id: 'menu.proto',
+        })} ${formatMessage({
+          id: 'component.status.success',
+        })}`,
+      });
+      setVisible(false);
+      refreshTable();
+    }
+  };
+
+  return (
+    <Drawer
+      title={formatMessage({
+        id: editMode === 'create' ? 'page.proto.drawer.create' : 'page.proto.drawer.edit',
+      })}
+      visible={visible}
+      placement="right"
+      closable={false}
+      maskClosable={true}
+      destroyOnClose
+      onClose={() => setVisible(false)}
+      width={700}
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Button
+            onClick={() => {
+              setVisible(false);
+            }}
+          >
+            {formatMessage({ id: 'component.global.cancel' })}
+          </Button>
+          <Space>
+            <Button type="primary" onClick={() => submit()}>
+              {formatMessage({ id: 'component.global.submit' })}
+            </Button>
+          </Space>
+        </div>
+      }
+    >
+      <Form form={form} labelAlign="left" labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
+        <Form.Item
+          label="id"
+          name="id"
+          tooltip={formatMessage({ id: 'page.proto.id.tooltip' })}
+          rules={[
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} id`,
+            },
+          ]}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+        >
+          <Input disabled={editMode === 'update'} required></Input>
+        </Form.Item>
+        <Form.Item
+          label="desc"
+          name="desc"
+          tooltip={formatMessage({ id: 'page.proto.desc.tooltip' })}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+        >
+          <Input></Input>
+        </Form.Item>
+        <Form.Item
+          label="content"
+          name="content"
+          tooltip={formatMessage({ id: 'page.proto.content.tooltip' })}
+          rules={[
+            {
+              required: true,
+              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} content`,
+            },
+          ]}
+          validateTrigger={['onChange', 'onBlur', 'onClick']}
+          wrapperCol={{ span: 24 }}
+          className={styles.formItemEditor}
+        >
+          <Editor
+            height="60vh"
+            value={protoData.content}
+            onChange={(text) => {
+              if (text) {
+                setProtoData({ ...protoData, content: text });
+              } else {
+                setProtoData({ ...protoData, content: '' });
+              }
+            }}

Review comment:
       why do we need this?




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812524058



##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() =>
+                showDrawer({ id: record.id, content: record.content, desc: record.desc }, 'update')
+              }
+            >
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'page.upstream.list.confirm.delete' })}
+              okText={formatMessage({ id: 'page.upstream.list.confirm' })}
+              cancelText={formatMessage({ id: 'page.upstream.list.cancel' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {

Review comment:
       `!` is not needed, I'll fix it.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812540507



##########
File path: web/src/pages/Proto/index.tsx
##########
@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */

Review comment:
       This file is not needed, I will delete it.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] codecov-commenter commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
codecov-commenter commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1041473770


   # [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#2320](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (fa16e63) into [master](https://codecov.io/gh/apache/apisix-dashboard/commit/758c43262a3ae26d6f4a51e2f0a765842b66936d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (758c432) will **decrease** coverage by `1.29%`.
   > The diff coverage is `91.17%`.
   
   > :exclamation: Current head fa16e63 differs from pull request most recent head 1b5f9bd. Consider uploading reports for the commit 1b5f9bd to get more accurate results
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/graphs/tree.svg?width=650&height=150&src=pr&token=Q1HERXN96P&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master    #2320      +/-   ##
   ==========================================
   - Coverage   69.91%   68.62%   -1.30%     
   ==========================================
     Files         184      130      -54     
     Lines        7280     3442    -3838     
     Branches      830      836       +6     
   ==========================================
   - Hits         5090     2362    -2728     
   + Misses       1896     1080     -816     
   + Partials      294        0     -294     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | backend-e2e-test | `?` | |
   | backend-e2e-test-ginkgo | `?` | |
   | backend-unit-test | `?` | |
   | frontend-e2e-test | `68.62% <91.17%> (+0.45%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [web/src/helpers.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9oZWxwZXJzLnRzeA==) | `73.77% <ø> (ø)` | |
   | [...b/src/pages/Proto/components/ProtoDrawer/index.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9jb21wb25lbnRzL1Byb3RvRHJhd2VyL2luZGV4LnRzeA==) | `85.71% <85.71%> (ø)` | |
   | [web/src/pages/Proto/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9MaXN0LnRzeA==) | `93.54% <93.54%> (ø)` | |
   | [web/src/pages/Proto/service.ts](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9zZXJ2aWNlLnRz) | `100.00% <100.00%> (ø)` | |
   | [api/cmd/version.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2NtZC92ZXJzaW9uLmdv) | | |
   | [api/internal/handler/proto/proto.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2hhbmRsZXIvcHJvdG8vcHJvdG8uZ28=) | | |
   | [api/internal/core/entity/format.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2NvcmUvZW50aXR5L2Zvcm1hdC5nbw==) | | |
   | [api/internal/utils/pid.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL3V0aWxzL3BpZC5nbw==) | | |
   | [api/internal/core/store/store.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL2NvcmUvc3RvcmUvc3RvcmUuZ28=) | | |
   | [api/internal/utils/json\_patch.go](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-YXBpL2ludGVybmFsL3V0aWxzL2pzb25fcGF0Y2guZ28=) | | |
   | ... and [51 more](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [758c432...1b5f9bd](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] Baoyuantop commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
Baoyuantop commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812517893



##########
File path: web/src/pages/Proto/index.tsx
##########
@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */

Review comment:
       What is the purpose of this file?




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812541066



##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() =>
+                showDrawer({ id: record.id, content: record.content, desc: record.desc }, 'update')
+              }
+            >
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'page.upstream.list.confirm.delete' })}
+              okText={formatMessage({ id: 'page.upstream.list.confirm' })}
+              cancelText={formatMessage({ id: 'page.upstream.list.cancel' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'page.upstream.list.delete.successfully' }),
+                  });
+                  /* eslint-disable no-unused-expressions */
+                  ref.current?.reload();
+                });
+              }}
+            >
+              <Button type="primary" danger>
+                {formatMessage({ id: 'page.upstream.list.delete' })}
+              </Button>
+            </Popconfirm>
+          </Space>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <ProtoDrawer
+        protoData={protoData as ProtoModule.ProtoData}
+        setProtoData={setProtoData}
+        visible={drawerVisible}
+        setVisible={setDrawerVisible}

Review comment:
       There is a coupling between these two components.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] Baoyuantop commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
Baoyuantop commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812508848



##########
File path: web/src/pages/Proto/List.tsx
##########
@@ -0,0 +1,170 @@
+/*
+ * 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, useEffect, useState } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import ProTable from '@ant-design/pro-table';
+import type { ProColumns, ActionType } from '@ant-design/pro-table';
+import ProtoDrawer from './components/ProtoDrawer';
+import { Button, notification, Popconfirm, Space } from 'antd';
+import { history, useIntl } from 'umi';
+import { PlusOutlined } from '@ant-design/icons';
+
+import querystring from 'query-string';
+import { timestampToLocaleString } from '@/helpers';
+import { fetchList, remove } from './service';
+
+const Page: React.FC = () => {
+  const ref = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const emptyProtoData = {
+    id: null,
+    content: '',
+    desc: '',
+  };
+  const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
+  const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [paginationConfig, setPaginationConfig] = useState({ pageSize: 10, current: 1 });
+
+  const refreshTable = () => {
+    ref.current?.reload();
+  };
+
+  const savePageList = (page = 1, pageSize = 10) => {
+    history.replace(`/proto/list?page=${page}&pageSize=${pageSize}`);
+  };
+
+  useEffect(() => {
+    const { page = 1, pageSize = 10 } = querystring.parse(window.location.search);
+    setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
+  }, [window.location.search]);
+
+  const showDrawer = (data: ProtoModule.ProtoData, mode: ProtoModule.EditMode) => {
+    setDrawerVisible(true);
+    setProtoData(data);
+    setEditMode(mode);
+  };
+
+  const columns: ProColumns<ProtoModule.ResponseBody>[] = [
+    {
+      title: formatMessage({ id: 'component.global.id' }),
+      hideInSearch: true,
+      dataIndex: 'id',
+      width: 100,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.desc' }),
+      dataIndex: 'desc',
+      ellipsis: true,
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'page.proto.content' }),
+      hideInSearch: true,
+      dataIndex: 'content',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'component.global.updateTime' }),
+      dataIndex: 'update_time',
+      hideInSearch: true,
+      render: (text) => timestampToLocaleString(text as number),
+      width: 200,
+    },
+    {
+      title: formatMessage({ id: 'component.global.operation' }),
+      valueType: 'option',
+      fixed: 'right',
+      hideInSearch: true,
+      render: (_, record) => (
+        <>
+          <Space align="baseline">
+            <Button
+              type="primary"
+              onClick={() =>
+                showDrawer({ id: record.id, content: record.content, desc: record.desc }, 'update')
+              }
+            >
+              {formatMessage({ id: 'component.global.edit' })}
+            </Button>
+            <Popconfirm
+              title={formatMessage({ id: 'page.upstream.list.confirm.delete' })}
+              okText={formatMessage({ id: 'page.upstream.list.confirm' })}
+              cancelText={formatMessage({ id: 'page.upstream.list.cancel' })}
+              onConfirm={() => {
+                remove(record.id!).then(() => {

Review comment:
       why need `!`




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r812536217



##########
File path: web/src/pages/Proto/components/ProtoDrawer/index.tsx
##########
@@ -0,0 +1,160 @@
+/*
+ * 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 } from 'react';
+import { Button, Drawer, Form, notification, Space } from 'antd';
+import { useIntl } from 'umi';
+import Editor from '@monaco-editor/react';
+import { Input } from 'antd';
+import { create, update } from '../../service';
+import styles from './index.less';
+
+const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
+  protoData,
+  setProtoData,
+  visible,
+  setVisible,
+  editMode,
+  refreshTable,
+}) => {
+  const [form] = Form.useForm();
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    form.setFieldsValue(protoData);
+  }, [visible]);
+
+  const submit = async () => {
+    await form.validateFields();
+    const formData: ProtoModule.ProtoData = form.getFieldsValue(true);
+    if (editMode === 'create') {
+      create(formData).then(() => {
+        notification.success({
+          message: `${formatMessage({ id: 'component.global.create' })} ${formatMessage({
+            id: 'menu.proto',
+          })} ${formatMessage({
+            id: 'component.status.success',
+          })}`,

Review comment:
       👌




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] nic-chen commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
nic-chen commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r819327016



##########
File path: web/src/pages/Proto/locales/en-US.ts
##########
@@ -0,0 +1,34 @@
+/*
+ * 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 {
+  'page.proto.list': 'Proto List',
+  'page.proto.list.description':
+    "Protocol buffers are Google's language-neutral, platform-neutral, extensible mechanism for serializing structured data.You define how you want your data to be structured once, then you can use special generated source code to easily write and read your structured data to and from a variety of data streams and using a variety of languages.",

Review comment:
       you could refer to https://github.com/apache/apisix/blob/master/docs/en/latest/plugins/grpc-transcode.md




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] codecov-commenter edited a comment on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
codecov-commenter edited a comment on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1041473770


   # [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#2320](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (b482ac0) into [master](https://codecov.io/gh/apache/apisix-dashboard/commit/758c43262a3ae26d6f4a51e2f0a765842b66936d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (758c432) will **decrease** coverage by `1.29%`.
   > The diff coverage is `93.15%`.
   
   > :exclamation: Current head b482ac0 differs from pull request most recent head 41a6a5e. Consider uploading reports for the commit 41a6a5e to get more accurate results
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/graphs/tree.svg?width=650&height=150&src=pr&token=Q1HERXN96P&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master    #2320      +/-   ##
   ==========================================
   - Coverage   69.91%   68.62%   -1.30%     
   ==========================================
     Files         184      130      -54     
     Lines        7280     3445    -3835     
     Branches      830      838       +8     
   ==========================================
   - Hits         5090     2364    -2726     
   + Misses       1896     1081     -815     
   + Partials      294        0     -294     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | backend-e2e-test | `?` | |
   | backend-e2e-test-ginkgo | `?` | |
   | backend-unit-test | `?` | |
   | frontend-e2e-test | `68.62% <93.15%> (+0.45%)` | :arrow_up: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [web/src/components/Plugin/UI/limit-count.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9VSS9saW1pdC1jb3VudC50c3g=) | `88.09% <ø> (ø)` | |
   | [web/src/components/Plugin/UI/limit-req.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9VSS9saW1pdC1yZXEudHN4) | `100.00% <ø> (ø)` | |
   | [web/src/components/Plugin/data.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1BsdWdpbi9kYXRhLnRzeA==) | `100.00% <ø> (ø)` | |
   | [web/src/helpers.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9oZWxwZXJzLnRzeA==) | `73.77% <ø> (ø)` | |
   | [web/src/pages/Upstream/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9VcHN0cmVhbS9MaXN0LnRzeA==) | `90.00% <ø> (ø)` | |
   | [...b/src/pages/Proto/components/ProtoDrawer/index.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9jb21wb25lbnRzL1Byb3RvRHJhd2VyL2luZGV4LnRzeA==) | `88.46% <88.46%> (ø)` | |
   | [web/src/pages/Proto/List.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9MaXN0LnRzeA==) | `93.54% <93.54%> (ø)` | |
   | [web/src/components/Upstream/UpstreamForm.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL1Vwc3RyZWFtRm9ybS50c3g=) | `90.12% <100.00%> (-2.29%)` | :arrow_down: |
   | [...omponents/Upstream/components/UpstreamSelector.tsx](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9jb21wb25lbnRzL1Vwc3RyZWFtL2NvbXBvbmVudHMvVXBzdHJlYW1TZWxlY3Rvci50c3g=) | `100.00% <100.00%> (ø)` | |
   | [web/src/pages/Proto/service.ts](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-d2ViL3NyYy9wYWdlcy9Qcm90by9zZXJ2aWNlLnRz) | `100.00% <100.00%> (ø)` | |
   | ... and [59 more](https://codecov.io/gh/apache/apisix-dashboard/pull/2320/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [758c432...41a6a5e](https://codecov.io/gh/apache/apisix-dashboard/pull/2320?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] Baoyuantop commented on a change in pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
Baoyuantop commented on a change in pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#discussion_r819338896



##########
File path: web/src/pages/Proto/locales/en-US.ts
##########
@@ -0,0 +1,34 @@
+/*
+ * 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 {
+  'page.proto.list': 'Proto List',
+  'page.proto.list.description':
+    "Protocol buffers are Google's language-neutral, platform-neutral, extensible mechanism for serializing structured data.You define how you want your data to be structured once, then you can use special generated source code to easily write and read your structured data to and from a variety of data streams and using a variety of languages.",

Review comment:
       Hi @oil-oil , we must explain that the proto resources here are used in the `grpc-transcode` plugin and that the proto resources created here can be accessed by selecting the corresponding IDs when the grpc-transcode plugin is opened. There is no need to explain what Protocol buffers are.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [apisix-dashboard] oil-oil commented on pull request #2320: feat: support protobuf on Web

Posted by GitBox <gi...@apache.org>.
oil-oil commented on pull request #2320:
URL: https://github.com/apache/apisix-dashboard/pull/2320#issuecomment-1054881499


   @guoqqqi @Baoyuantop Please help me review.😃


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org