This is an automated email from the ASF dual-hosted git repository.
likeguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shenyu-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new a2bf43a5 Change card (#298)
a2bf43a5 is described below
commit a2bf43a5a145e9ec3a50b06be8492dc537f59706
Author: lulu <[email protected]>
AuthorDate: Mon Jul 24 19:46:32 2023 +0800
Change card (#298)
* fix: npm run lint bug
* refactor: modify the display of the proxy-selector card
---
.../Document/components/AddAndUpdateApiDoc.js | 26 ++---
src/routes/Document/components/AddAndUpdateTag.js | 4 +-
src/routes/Plugin/Common/Selector.js | 2 +-
src/routes/Plugin/Discovery/TcpCard.js | 121 ++++++++++++---------
src/routes/Plugin/Discovery/tcp.less | 3 +-
.../PluginRuleHandle/GeneralContextRuleHandle.js | 12 +-
src/routes/System/AppAuth/AddTable.js | 2 +-
src/routes/System/Metadata/AddModal.js | 2 +-
8 files changed, 94 insertions(+), 78 deletions(-)
diff --git a/src/routes/Document/components/AddAndUpdateApiDoc.js
b/src/routes/Document/components/AddAndUpdateApiDoc.js
index ffca196b..622b7c9d 100644
--- a/src/routes/Document/components/AddAndUpdateApiDoc.js
+++ b/src/routes/Document/components/AddAndUpdateApiDoc.js
@@ -144,7 +144,7 @@ class AddAndUpdateApiDoc extends Component {
>
<Form className="login-form">
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.CONTEXTPATH")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.CONTEXTPATH")}
{...formItemLayout}
>
{getFieldDecorator("contextPath", {
@@ -164,7 +164,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.APIPATH")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.APIPATH")}
{...formItemLayout}
>
{getFieldDecorator("apiPath", {
@@ -182,7 +182,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.HTTPMETHOD")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.HTTPMETHOD")}
{...formItemLayout}
>
{getFieldDecorator("httpMethod", {
@@ -206,7 +206,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.CONSUME")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.CONSUME")}
{...formItemLayout}
>
{getFieldDecorator("consume", {
@@ -224,7 +224,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.PRODUCE")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.PRODUCE")}
{...formItemLayout}
>
{getFieldDecorator("produce", {
@@ -242,7 +242,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.VERSION")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.VERSION")}
{...formItemLayout}
>
{getFieldDecorator("version", {
@@ -260,7 +260,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.RPCTYPE")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.RPCTYPE")}
{...formItemLayout}
>
{getFieldDecorator("rpcType", {
@@ -284,7 +284,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.STATE")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.STATE")}
{...formItemLayout}
>
{getFieldDecorator("state", {
@@ -309,7 +309,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.EXT")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.EXT")}
{...formItemLayout}
>
{getFieldDecorator("ext", {
@@ -328,7 +328,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.APIOWNER")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.APIOWNER")}
{...formItemLayout}
>
{getFieldDecorator("apiOwner", {
@@ -346,7 +346,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.APIDESC")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.APIDESC")}
{...formItemLayout}
>
{getFieldDecorator("apiDesc", {
@@ -364,7 +364,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.APISOURCE")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.APISOURCE")}
{...formItemLayout}
>
{getFieldDecorator("apiSource", {
@@ -388,7 +388,7 @@ class AddAndUpdateApiDoc extends Component {
)}
</Form.Item>
<Form.Item
- label={`${getIntlContent("SHENYU.DOCUMENT.APIDOC.DOCUMENT")}`}
+ label={getIntlContent("SHENYU.DOCUMENT.APIDOC.DOCUMENT")}
{...formItemLayout}
>
{getFieldDecorator("document", {
diff --git a/src/routes/Document/components/AddAndUpdateTag.js
b/src/routes/Document/components/AddAndUpdateTag.js
index 687fed97..b117960c 100644
--- a/src/routes/Document/components/AddAndUpdateTag.js
+++ b/src/routes/Document/components/AddAndUpdateTag.js
@@ -83,7 +83,7 @@ class AddAndUpdateTag extends Component {
forceRender
>
<Form className="login-form" {...formItemLayout}>
- <Form.Item label={`${getIntlContent("SHENYU.DOCUMENT.TAG.NAME")}`}>
+ <Form.Item label={getIntlContent("SHENYU.DOCUMENT.TAG.NAME")}>
{getFieldDecorator("name", {
rules: [
{
@@ -97,7 +97,7 @@ class AddAndUpdateTag extends Component {
)}
</Form.Item>
- <Form.Item label={`${getIntlContent("SHENYU.DOCUMENT.TAG.DESC")}`}>
+ <Form.Item label={getIntlContent("SHENYU.DOCUMENT.TAG.DESC")}>
{getFieldDecorator("tagDesc", {
rules: [
{
diff --git a/src/routes/Plugin/Common/Selector.js
b/src/routes/Plugin/Common/Selector.js
index 160819bd..efb4c9b8 100644
--- a/src/routes/Plugin/Common/Selector.js
+++ b/src/routes/Plugin/Common/Selector.js
@@ -952,7 +952,7 @@ class AddModal extends Component {
>
{selectorTypeEnums.map(item => {
return (
- <Option key={item.code} value={`${item.code}`}>
+ <Option key={item.code} value={item.code}>
{getIntlContent(
`SHENYU.COMMON.SELECTOR.TYPE.${item.name.toUpperCase()}`,
item.name
diff --git a/src/routes/Plugin/Discovery/TcpCard.js
b/src/routes/Plugin/Discovery/TcpCard.js
index 88cff7b5..47a0905b 100644
--- a/src/routes/Plugin/Discovery/TcpCard.js
+++ b/src/routes/Plugin/Discovery/TcpCard.js
@@ -16,18 +16,19 @@
*/
import React, {Component} from "react";
-import {Button, Card} from "antd";
+import {Button, Card, Popover, Typography} from "antd";
import {getIntlContent} from "../../../utils/IntlUtils";
import tcpStyles from "./tcp.less";
import { formatTimestamp } from "../../../utils/utils";
import AuthButton from "../../../utils/AuthButton";
+const { Text } = Typography;
+
export class TcpCard extends Component {
renderCardItems = () => {
- const {forwardPort, createTime, updateTime} = this.props.data
-
+ const {forwardPort, discovery} = this.props.data
return (
<div style={{display: 'flex', flexDirection: 'column'}}>
<div className={tcpStyles.cardItem}>
@@ -35,12 +36,8 @@ export class TcpCard extends Component {
<div className={tcpStyles.cardTag}>{forwardPort}</div>
</div>
<div className={tcpStyles.cardItem}>
- <div style={{ fontSize: '18px', marginLeft: '30px'
}}>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DateCreated")}</div>
- <div
className={tcpStyles.cardTag}>{formatTimestamp(createTime)}</div>
- </div>
- <div className={tcpStyles.cardItem}>
- <div style={{ fontSize: '18px', marginLeft: '30px'
}}>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.UPSTREAM.DateUpdated")}</div>
- <div
className={tcpStyles.cardTag}>{formatTimestamp(updateTime)}</div>
+ <div style={{ fontSize: '18px', marginLeft: '30px'
}}>{getIntlContent("SHENYU.COMMON.TYPE")}</div>
+ <div className={tcpStyles.cardTag}>{discovery.type}</div>
</div>
</div>
)
@@ -48,51 +45,69 @@ export class TcpCard extends Component {
render() {
const { updateSelector, data, handleDelete, handleRefresh } = this.props
+ const { createTime, updateTime, props: selectorProps} = this.props.data
+ const propsJson = JSON.stringify(JSON.parse(selectorProps!== null &&
selectorProps.length > 0? selectorProps:'{}'), null, 4) ;
+ const content = (
+ <div>
+ <Text>{`${getIntlContent("SHENYU.SYSTEM.CREATETIME") }:
${formatTimestamp(createTime)}`}</Text>
+ <br />
+ <Text>{`${getIntlContent("SHENYU.SYSTEM.UPDATETIME") }:
${formatTimestamp(updateTime)}`}</Text>
+ <hr />
+ <div>
+ {getIntlContent("SHENYU.DISCOVERY.SELECTOR.PROPS")}
+ <span style={{ marginLeft: '2px', fontWeight: '500' }}>:</span>
+ </div>
+ <div>
+ <pre><code>{propsJson}</code></pre>
+ </div>
+ </div>
+ );
return (
- <Card
- title={<div style={{ marginLeft: '30px', fontSize: '20px'
}}>{data.name}</div>}
- style={{ borderRadius: '5px' , boxShadow: '1px 2px 2px rgba(191, 189,
189, 0.5)' }}
- extra={(
- <div>
- <AuthButton perms="plugin:tcp:modify">
- <Button
- type="primary"
- onClick={() => {
- handleRefresh(data.discoveryHandlerId)
- }}
- style={{ marginRight: '20px' }}
- >
- {getIntlContent("SHENYU.COMMON.REFRESH")}
- </Button>
- </AuthButton>
- <AuthButton perms="plugin:tcp:modify">
- <Button
- type="primary"
- onClick={() => {
- updateSelector(data.id)
- }}
- style={{ marginRight: '20px' }}
- >
- {getIntlContent("SHENYU.COMMON.CHANGE")}
- </Button>
- </AuthButton>
- <AuthButton perms="plugin:tcpSelector:delete">
- <Button
- type="primary"
- onClick={() => {
- handleDelete(data.id)
- }}
- style={{ marginRight: '30px' }}
- >
- {getIntlContent("SHENYU.COMMON.DELETE.NAME")}
- </Button>
- </AuthButton>
- </div>
- )}
- >
- {this.renderCardItems()}
- </Card>
-
+ <Popover placement="leftTop" content={content}>
+ <Card
+ title={<div style={{ marginLeft: '30px', fontSize: '20px'
}}>{data.name}</div>}
+ style={{ borderRadius: '5px' , boxShadow: '1px 2px 2px rgba(191,
189, 189, 0.5)' }}
+ extra={(
+ <div>
+ <AuthButton perms="plugin:tcp:modify">
+ <Button
+ type="primary"
+ onClick={() => {
+ handleRefresh(data.discoveryHandlerId)
+ }}
+ style={{ marginRight: '20px' }}
+ >
+ {getIntlContent("SHENYU.COMMON.REFRESH")}
+ </Button>
+ </AuthButton>
+ <AuthButton perms="plugin:tcp:modify">
+ <Button
+ type="primary"
+ onClick={() => {
+ updateSelector(data.id)
+ }}
+ style={{ marginRight: '20px' }}
+ >
+ {getIntlContent("SHENYU.COMMON.CHANGE")}
+ </Button>
+ </AuthButton>
+ <AuthButton perms="plugin:tcpSelector:delete">
+ <Button
+ type="danger"
+ onClick={() => {
+ handleDelete(data.id)
+ }}
+ style={{ marginRight: '30px' }}
+ >
+ {getIntlContent("SHENYU.COMMON.DELETE.NAME")}
+ </Button>
+ </AuthButton>
+ </div>
+ )}
+ >
+ {this.renderCardItems()}
+ </Card>
+ </Popover>
)
}
}
diff --git a/src/routes/Plugin/Discovery/tcp.less
b/src/routes/Plugin/Discovery/tcp.less
index 25644569..c043eb2f 100644
--- a/src/routes/Plugin/Discovery/tcp.less
+++ b/src/routes/Plugin/Discovery/tcp.less
@@ -23,7 +23,8 @@
display: flex;
justify-content: center;
align-items: center;
- margin-right: 30px
+ margin-right: 30px;
+ font-size: 18px
}
.cardInput {
diff --git a/src/routes/Plugin/PluginRuleHandle/GeneralContextRuleHandle.js
b/src/routes/Plugin/PluginRuleHandle/GeneralContextRuleHandle.js
index c660084b..5fb86c84 100644
--- a/src/routes/Plugin/PluginRuleHandle/GeneralContextRuleHandle.js
+++ b/src/routes/Plugin/PluginRuleHandle/GeneralContextRuleHandle.js
@@ -133,9 +133,9 @@ export default class GeneralContextRuleHandle extends
Component {
}
)(
<Select
- placeholder={`${titleCase(
+ placeholder={titleCase(
`Select ${handler} Context Type`
- )}`}
+ )}
>
{contextType.map(v => (
<Option value={v} key={v} title={v}>
@@ -156,9 +156,9 @@ export default class GeneralContextRuleHandle extends
Component {
}
)(
<Input
- placeholder={`${titleCase(
+ placeholder={titleCase(
`Set ${handler} Context Key`
- )}`}
+ )}
/>
)}
</FormItem>
@@ -173,9 +173,9 @@ export default class GeneralContextRuleHandle extends
Component {
}
)(
<Input
- placeholder={`${titleCase(
+ placeholder={titleCase(
`Set ${handler} Context Value`
- )}`}
+ )}
/>
)}
</FormItem>
diff --git a/src/routes/System/AppAuth/AddTable.js
b/src/routes/System/AppAuth/AddTable.js
index ab9133f5..968a8f78 100644
--- a/src/routes/System/AppAuth/AddTable.js
+++ b/src/routes/System/AppAuth/AddTable.js
@@ -220,7 +220,7 @@ class AddTable extends Component {
>
{appNameGroup.map((item, index) => {
return (
- <Option key={index} value={`${item}`}>
+ <Option key={index} value={item}>
{item}
</Option>
)
diff --git a/src/routes/System/Metadata/AddModal.js
b/src/routes/System/Metadata/AddModal.js
index c61ad9ac..4124666e 100644
--- a/src/routes/System/Metadata/AddModal.js
+++ b/src/routes/System/Metadata/AddModal.js
@@ -158,7 +158,7 @@ class AddModal extends Component {
<Select>
{rpcTypeEnums.map(item => {
return (
- <Option key={item.name} value={`${item.name}`}>
+ <Option key={item.name} value={item.name}>
{item.name}
</Option>
);
