优化节点显示，添加mode (#11275)

console-ui/src/layouts/MainLayout.js

@@ -43,6 +43,7 @@ class MainLayout extends React.Component {
     location: PropTypes.object,
     history: PropTypes.object,
     version: PropTypes.any,
+    startupMode: PropTypes.any,
     getState: PropTypes.func,
     functionMode: PropTypes.string,
     authEnabled: PropTypes.string,
@@ -98,7 +99,14 @@ class MainLayout extends React.Component {
   }
 
   render() {
-    const { locale = {}, version, functionMode, authEnabled, consoleUiEnable } = this.props;
+    const {
+      locale = {},
+      version,
+      functionMode,
+      authEnabled,
+      consoleUiEnable,
+      startupMode,
+    } = this.props;
     const { visible } = this.state;
     const MenuData = getMenuData(functionMode);
     return (
@@ -124,6 +132,10 @@ class MainLayout extends React.Component {
                       {locale.nacosName}
                       <span>{version}</span>
                     </h1>
+                    <h1 className="nav-mode">
+                      {locale.nacosMode}
+                      <span>{startupMode}</span>
+                    </h1>
                     <Menu
                       defaultOpenKeys={this.defaultOpenKeys()}
                       className="next-nav next-normal next-active next-right next-no-arrow next-nav-embeddable"

console-ui/src/layouts/index.scss

@@ -1507,7 +1507,27 @@ h6 {
     text-align: center;
     font-size: 14px;
     font-weight: bold;
-    height: 72px;
+    height: 60px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    border-bottom: var(--shell-brand-navigation-ver-divider-size, 1px) var(--shell-brand-navigation-ver-divider-style, solid) var(--shell-brand-navigation-ver-divider-color, #EEEEEE);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      margin-left: 5px;
+    }
+  }
+
+  .nav-mode {
+    margin: 0;
+    // background-color: #E4F3FE;
+    text-align: center;
+    font-size: 12px;
+    font-weight: bold;
+    height: 45px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

console-ui/src/locales/en-US.js

@@ -40,6 +40,7 @@ const I18N_CONF = {
   },
   MainLayout: {
     nacosName: 'NACOS',
+    nacosMode: 'MODE',
     doesNotExist: 'The page you visit does not exist',
     configurationManagementVirtual: 'ConfigManagement',
     configurationManagement: 'Configurations',
@@ -671,8 +672,8 @@ const I18N_CONF = {
     readWrite: 'Read and write',
   },
   Components: {
-      copySuccessfully: 'Success copied!',
-  }
+    copySuccessfully: 'Success copied!',
+  },
 };
 
 export default I18N_CONF;

console-ui/src/locales/zh-CN.js

@@ -38,6 +38,7 @@ const I18N_CONF = {
   },
   MainLayout: {
     nacosName: 'NACOS',
+    nacosMode: '模式',
     doesNotExist: '您访问的页面不存在',
     configurationManagementVirtual: '配置管理',
     configurationManagement: '配置列表',
@@ -666,8 +667,8 @@ const I18N_CONF = {
     readWrite: '读写',
   },
   Components: {
-      copySuccessfully: '复制成功！',
-  }
+    copySuccessfully: '复制成功！',
+  },
 };
 
 export default I18N_CONF;

console-ui/src/pages/ClusterManagement/ClusterNodeList/ClusterNodeList.js

@@ -219,11 +219,12 @@ class ClusterNodeList extends React.Component {
                 locale={{ empty: pubNoData }}
                 rowProps={row => this.rowColor(row)}
               >
-                <Column title={locale.nodeIp} dataIndex="address" width="20%" />
+                <Column title={locale.nodeIp} dataIndex="address" width="20%" align="center" />
                 <Column
                   title={locale.nodeState}
                   dataIndex="state"
-                  width="20%"
+                  width="10%"
+                  align="center"
                   cell={function(value, index, record) {
                     if (value === 'UP') {
                       return (
@@ -256,7 +257,7 @@ class ClusterNodeList extends React.Component {
                 <Column
                   title={locale.extendInfo}
                   dataIndex="extendInfo"
-                  width="30%"
+                  width="50%"
                   cell={function(value, index, record) {
                     function showCollapse() {
                       const collapse = (
@@ -280,6 +281,7 @@ class ClusterNodeList extends React.Component {
                   title={locale.operation}
                   dataIndex="address"
                   width="20%"
+                  align="center"
                   cell={this.renderCol.bind(this)}
                 />
               </Table>

console-ui/src/reducers/base.js

@@ -58,6 +58,7 @@ const getState = () => dispatch =>
           loginPageEnabled: res.login_page_enabled,
           authEnabled: res.auth_enabled,
           consoleUiEnable: res.console_ui_enabled,
+          startupMode: res.startup_mode,
         },
       });
     })

console/src/main/resources/static/index.html

@@ -35,7 +35,7 @@
 	<link rel="stylesheet" type="text/css" href="console-ui/public/css/icon.css">
 	<link rel="stylesheet" type="text/css" href="console-ui/public/css/font-awesome.css">
 	<!-- 第三方css结束 -->
-<link href="./css/main.css?4b245988901d784c9128" rel="stylesheet"></head>
+<link href="./css/main.css?c8c3e819b0fa18cbca1c" rel="stylesheet"></head>
 
 <body>
 	<div id="root" style="overflow:hidden"></div>
@@ -56,6 +56,6 @@
 	<script src="console-ui/public/js/merge.js"></script>
 	<script src="console-ui/public/js/loader.js"></script>
 	<!-- 第三方js结束 -->
-<script type="text/javascript" src="./js/main.js?4b245988901d784c9128"></script></body>
+<script type="text/javascript" src="./js/main.js?c8c3e819b0fa18cbca1c"></script></body>
 
 </html>