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 c6e8e5ce refactor: modify the style of the proxy-selector card (#299)
c6e8e5ce is described below
commit c6e8e5cebc279d6d930e7ee556d09f40fcea1a1f
Author: lulu <[email protected]>
AuthorDate: Tue Jul 25 11:57:57 2023 +0800
refactor: modify the style of the proxy-selector card (#299)
* refactor: re-modify the display of the proxy-selector card
* refactor: remove unnecessary comments
---
src/models/discovery.js | 2 +-
src/routes/Plugin/Discovery/DiscoveryIcon.js | 111 +++++++++++++++++++++++++++
src/routes/Plugin/Discovery/TcpCard.js | 106 ++++++++++++-------------
src/routes/Plugin/Discovery/index.js | 2 +-
src/routes/Plugin/Discovery/tcp.less | 36 ++++-----
5 files changed, 178 insertions(+), 79 deletions(-)
diff --git a/src/models/discovery.js b/src/models/discovery.js
index 28e43721..fc198069 100644
--- a/src/models/discovery.js
+++ b/src/models/discovery.js
@@ -39,7 +39,7 @@ export default {
chosenType: '',
totalPage: 0,
currentPage: 1,
- pageSize: 4
+ pageSize: 6
},
effects: {
diff --git a/src/routes/Plugin/Discovery/DiscoveryIcon.js
b/src/routes/Plugin/Discovery/DiscoveryIcon.js
new file mode 100644
index 00000000..bd9edaf2
--- /dev/null
+++ b/src/routes/Plugin/Discovery/DiscoveryIcon.js
@@ -0,0 +1,111 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Icon } from 'antd';
+
+const ZkSvg = () => (
+ <svg
+ className="icon"
+ viewBox="0 0 1024 1024"
+ width="1em"
+ height="1em"
+ >
+ <path
+ d="M632.618667 897.066667a15.189333 15.189333 0 0 1 15.232
15.232v34.474666a15.189333 15.189333 0 0 1-15.232 15.232h-68.906667a15.189333
15.189333 0 0 1-15.232-15.232v-34.474666a15.189333 15.189333 0 0 1
15.232-15.232h68.906667z m-172.330667 0a15.189333 15.189333 0 0 1 15.232
15.232v34.474666a15.189333 15.189333 0 0 1-15.232 15.232H391.381333a15.189333
15.189333 0 0 1-15.232-15.232v-34.474666a15.189333 15.189333 0 0 1
15.232-15.232h68.906667z m103.424-585.813334a15.189333 15.189333 [...]
+ fill="currentColor"
+ />
+ <path
+ d="M942.762667 69.973333a15.189333 15.189333 0 0 1 15.232
15.274667V946.773333a15.189333 15.189333 0 0 1-15.232 15.232H736a15.189333
15.189333 0 0 1-15.232-15.232v-34.474666a15.189333 15.189333 0 0 1
15.232-15.232h157.056V134.912H130.986667v762.154667H288a15.189333 15.189333 0 0
1 15.232 15.232v34.474666a15.189333 15.189333 0 0 1-15.232
15.232H81.237333a15.189333 15.189333 0 0 1-15.232-15.232V85.248a15.189333
15.189333 0 0 1 15.232-15.232h861.525334z"
+ fill="currentColor"
+ />
+ </svg>
+)
+
+const LocalSvg = () => (
+ <svg
+ className="icon"
+ viewBox="0 0 1024 1024"
+ width="1em"
+ height="1em"
+ >
+ <path
+ d="M780.093433 65.267493 243.991502 65.267493c-98.774631 0-178.700985
79.969333-178.700985 178.615027l0 536.102954c0 98.730629 79.925331 178.744987
178.700985 178.744987l536.102954 0c98.600669 0 178.615027-80.013335
178.615027-178.744987L958.709483 243.88252C958.70846 145.236825 878.695125
65.267493 780.093433 65.267493zM869.401458 735.353974c0 73.994248-59.989279
134.069485-134.069485 134.069485L288.667004 869.423459c-73.994248
0-134.115534-60.075237-134.115534-134.069485L154.5514 [...]
+ fill="currentColor"
+ />
+ </svg>
+)
+
+const NacosSvg = () => (
+ <svg
+ className="icon"
+ viewBox="0 0 1024 1024"
+ width="1em"
+ height="1em"
+ >
+ <path
+ d="M994.742857
307.2l-219.428571-146.285714c-7.314286-7.314286-21.942857-14.628571-29.257143-14.628572H343.771429c-43.885714
0-80.457143 43.885714-80.457143 87.771429v702.171428c0 43.885714 36.571429
87.771429 80.457143 87.771429h621.714285c29.257143 0 58.514286-29.257143
58.514286-58.514286V358.4c0-21.942857-7.314286-36.571429-29.257143-51.2z
m-87.771428 599.771429H380.342857V263.314286h343.771429l182.857143
124.342857v519.314286z"
+ fill="currentColor"
+ />
+ <path
+ d="M117.028571 117.028571h343.771429L512 146.285714 577.828571 51.2 512
7.314286h-7.314286C497.371429 0 490.057143 0 482.742857 0H73.142857C29.257143
7.314286 0 43.885714 0 87.771429v709.485714c7.314286 43.885714 36.571429
80.457143 80.457143
80.457143h117.028571v-117.028572H117.028571V117.028571zM709.485714
636.342857l-146.285714-219.428571H468.114286v409.6h102.4v-219.428572l153.6
219.428572h87.771428V416.914286H709.485714z"
+ fill="currentColor"
+ />
+ </svg>
+)
+
+const ConsulSvg = () => (
+ <svg
+ className="icon"
+ viewBox="0 0 1024 1024"
+ width="1em"
+ height="1em"
+ >
+ <path
+ d="M600.534613 513.194667a106.922667 106.922667 0 0
0-106.922666-106.922667 106.922667 106.922667 0 0 0-106.88 106.922667
106.922667 106.922667 0 0 0 106.922666 106.922666 106.922667 106.922667 0 0 0
106.88-106.922666z m150.698667 0a49.322667 49.322667 0 0 0-49.322667-49.28
49.322667 49.322667 0 0 0-49.322666 49.322666 49.322667 49.322667 0 0 0
49.322666 49.28 49.322667 49.322667 0 0 0 49.322667-49.28zM955.734613
748.373333a49.408 49.322667 0 0 0-49.408-49.322666 49.408 49.322667 0 [...]
+ fill="currentColor"
+ />
+ </svg>
+)
+
+const EtcdSvg = () => (
+ <svg
+ className="icon"
+ viewBox="0 0 1024 1024"
+ width="1em"
+ height="1em"
+ >
+ <path
+ d="M474.112 464a58.432 58.432 0 1 1-58.464-58.4 58.432 58.432 0 0 1
58.464 58.4zM549.632 464A58.432 58.432 0 1 0 608 405.632a58.432 58.432 0 0
0-58.368 58.368z"
+ fill="currentColor"
+ />
+ <path
+ d="M947.2 527.424a152.8 152.8 0 0 1-12.8 0.512 168.256 168.256 0 0
1-74.144-17.312 686.176 686.176 0 0 0 9.984-131.2 681.344 681.344 0 0
0-84.896-100.608 168.768 168.768 0 0 1 59.84-64l10.976-6.816-8.544-9.6a446.88
446.88 0 0 0-156.16-113.92l-11.872-5.184-3.008 12.544a168.16 168.16 0 0
1-42.336 76.8A678.4 678.4 0 0 0 512 118.208a679.04 679.04 0 0 0-122.144 50.304
168.128 168.128 0 0 1-42.208-76.8l-3.04-12.544-11.84 5.152A451.424 451.424 0 0
0 176.48 198.4l-8.576 9.6 10.944 6.72A168 [...]
+ fill="currentColor"
+ />
+ </svg>
+)
+
+export const ZkIcon = props => <Icon component={ZkSvg} {...props} />;
+export const LocalIcon = props => <Icon component={LocalSvg} {...props} />;
+export const NacosIcon = props => <Icon component={NacosSvg} {...props} />;
+export const ConsulIcon = props => <Icon component={ConsulSvg} {...props} />;
+export const EtcdIcon = props => <Icon component={EtcdSvg} {...props} />;
+
+
+
+
diff --git a/src/routes/Plugin/Discovery/TcpCard.js
b/src/routes/Plugin/Discovery/TcpCard.js
index 47a0905b..15cc0b2a 100644
--- a/src/routes/Plugin/Discovery/TcpCard.js
+++ b/src/routes/Plugin/Discovery/TcpCard.js
@@ -16,36 +16,23 @@
*/
import React, {Component} from "react";
-import {Button, Card, Popover, Typography} from "antd";
+import {Card, Popover, Typography, Skeleton, Icon} from "antd";
+
import {getIntlContent} from "../../../utils/IntlUtils";
import tcpStyles from "./tcp.less";
import { formatTimestamp } from "../../../utils/utils";
+import {ConsulIcon, EtcdIcon, LocalIcon, NacosIcon, ZkIcon} from
"./DiscoveryIcon";
import AuthButton from "../../../utils/AuthButton";
const { Text } = Typography;
+const { Meta } = Card;
export class TcpCard extends Component {
- renderCardItems = () => {
- const {forwardPort, discovery} = this.props.data
- return (
- <div style={{display: 'flex', flexDirection: 'column'}}>
- <div className={tcpStyles.cardItem}>
- <div style={{ fontSize: '18px', marginLeft: '30px'
}}>{getIntlContent("SHENYU.DISCOVERY.SELECTOR.FORWARDPORT")}</div>
- <div className={tcpStyles.cardTag}>{forwardPort}</div>
- </div>
- <div className={tcpStyles.cardItem}>
- <div style={{ fontSize: '18px', marginLeft: '30px'
}}>{getIntlContent("SHENYU.COMMON.TYPE")}</div>
- <div className={tcpStyles.cardTag}>{discovery.type}</div>
- </div>
- </div>
- )
- }
-
render() {
const { updateSelector, data, handleDelete, handleRefresh } = this.props
- const { createTime, updateTime, props: selectorProps} = this.props.data
+ const { createTime, updateTime, props: selectorProps, forwardPort,
discovery} = this.props.data
const propsJson = JSON.stringify(JSON.parse(selectorProps!== null &&
selectorProps.length > 0? selectorProps:'{}'), null, 4) ;
const content = (
<div>
@@ -62,50 +49,53 @@ export class TcpCard extends Component {
</div>
</div>
);
+
+ const typeIconMap = {
+ local: <LocalIcon style={{ fontSize: '40px', color: '#354458' }} />,
+ zookeeper: <ZkIcon style={{ fontSize: '40px', color: '#354458' }} />,
+ nacos: <NacosIcon style={{ fontSize: '40px', color: '#354458' }} />,
+ consul: <ConsulIcon style={{ fontSize: '40px', color: '#354458' }} />,
+ etcd: <EtcdIcon style={{ fontSize: '40px', color: '#354458' }} />,
+ };
+
+ const getAvatarIcon = () => {
+ return typeIconMap[discovery.type] || null;
+ };
+
return (
<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>
- )}
+ title={<div style={{ fontSize: '17px', lineHeight:
'1.5'}}>{data.name}</div>}
+ bordered={false}
+ className={tcpStyles.tcpCard}
+ actions={[
+ <AuthButton perms="plugin:tcp:modify">
+ <Icon type="reload" key="reload" style={{color: '#2E496E',
fontSize: "17px"}} onClick={() => handleRefresh(data.discoveryHandlerId)} />
+ </AuthButton>,
+ <AuthButton perms="plugin:tcp:modify">
+ <Icon type="edit" key="edit" style={{color: "#1352A2", fontSize:
"17px"}} onClick={() => updateSelector(data.id)} />
+ </AuthButton>,
+ <AuthButton perms="plugin:tcpSelector:delete">
+ <Icon type="delete" key="delete" style={{color: "#CC0000",
fontSize: "17px"}} onClick={() => handleDelete(data.id)} />
+ </AuthButton>
+ ]}
+ extra={<div style={{ fontSize: '15px', lineHeight: '1.5',
marginRight: '14px'}}>{formatTimestamp(createTime)}</div>}
>
- {this.renderCardItems()}
+ <Skeleton loading={false} avatar active>
+ <Meta
+ avatar={
+ <div style={{marginLeft: '20px', marginTop: '10px'}}>
+ {getAvatarIcon()}
+ </div>
+ }
+ title={
+ <div style={{marginLeft: '40px', fontSize: '15px', lineHeight:
'30px'}}>
+
{`${getIntlContent("SHENYU.DISCOVERY.SELECTOR.FORWARDPORT")}: ${forwardPort}`}
+ <br />
+ {`${getIntlContent("SHENYU.COMMON.TYPE") }:
${discovery.type}`}
+ </div>}
+ />
+ </Skeleton>
</Card>
</Popover>
)
diff --git a/src/routes/Plugin/Discovery/index.js
b/src/routes/Plugin/Discovery/index.js
index 44bf98f9..2958ffa5 100644
--- a/src/routes/Plugin/Discovery/index.js
+++ b/src/routes/Plugin/Discovery/index.js
@@ -569,7 +569,7 @@ export default class TCPProxy extends Component {
<div style={{
margin: '0px 0',
display: 'grid',
- gridTemplateColumns: '1fr 1fr',
+ gridTemplateColumns: '1fr 1fr 1fr',
gridAutoFlow: 'row',
gridGap: '20px',
justifyContent: 'stretch',
diff --git a/src/routes/Plugin/Discovery/tcp.less
b/src/routes/Plugin/Discovery/tcp.less
index c043eb2f..ba2d5ae7 100644
--- a/src/routes/Plugin/Discovery/tcp.less
+++ b/src/routes/Plugin/Discovery/tcp.less
@@ -15,21 +15,7 @@
* limitations under the License.
*/
-.cardTag {
- min-width: 231px;
- height: 32px;
- border: rgba(112, 109, 109, 0.4) 1px solid;
- border-radius: 5px;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-right: 30px;
- font-size: 18px
-}
-.cardInput {
- max-width: 50%;
-}
.main {
width: 100%;
@@ -76,11 +62,6 @@
justify-content: space-around;
}
-.cardItem {
- display: flex;
- justify-content: space-between;
- margin: 5px 0;
-}
.editable-cell {
position: relative;
@@ -97,3 +78,20 @@
padding: 4px 11px;
}
+
+.tcpCard {
+ :global {
+ .ant-card-body {
+ padding: 10px
+ }
+
+ .ant-card-actions {
+ background-color: white;
+ }
+ }
+ border-radius: 5px ;
+ box-shadow: 1px 2px 2px rgba(191, 189, 189, 0.5)
+}
+
+
+
