fix: Service Detail i18n
This commit is contained in:
王彦民
parent
d4a5fb2bd1
commit
1441561ae3
@ -3,7 +3,7 @@
|
||||
"outputPath": "./build",
|
||||
"proxy": {
|
||||
"/": {
|
||||
"target": "http://127.0.0.1:8848", //这边写你自己的服务Ip
|
||||
"target": "http://11.163.128.36:8848", //这边写你自己的服务Ip
|
||||
"changeOrigin": true,
|
||||
"pathRewrite": { "^/" : "" }
|
||||
}
|
||||
|
||||
@ -989,7 +989,7 @@ window.i18ndoc = {
|
||||
"com.alibaba.nacos.page.serviceManagement.table.column.ip_count": "Instance Count",
|
||||
"com.alibaba.nacos.page.serviceManagement.table.column.health_status": "Healthy Instance Count",
|
||||
"com.alibaba.nacos.page.serviceManagement.table.column.operation": "Operation",
|
||||
"com.alibaba.nacos.page.serviceManagement.detail": "detail",
|
||||
"com.alibaba.nacos.page.serviceManagement.detail": "Details",
|
||||
"com.alibaba.nacos.page.serviceManagement.query": "Search",
|
||||
"serviceManagement": "Service Management",
|
||||
"com.alibaba.nacos.page.serviceDetail.service_details": "Service Details",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,417 +1,432 @@
|
||||
import React from 'react';
|
||||
import { Icon } from '@alifd/next';
|
||||
import {Icon} from '@alifd/next';
|
||||
import siteConfig from '../config';
|
||||
import Header from './Header';
|
||||
import $ from 'jquery';
|
||||
|
||||
export default class MainLayout extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initNav = this.props.navList;
|
||||
this.deepNav = [];
|
||||
this.oneLevelNavArr = {}; //平行导航map
|
||||
this.state = {
|
||||
leftBarClose: false,
|
||||
showLink: null,
|
||||
navRow: [],
|
||||
noChild: false
|
||||
};
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initNav = this.props.navList;
|
||||
this.deepNav = [];
|
||||
this.oneLevelNavArr = {}; //平行导航map
|
||||
this.state = {
|
||||
leftBarClose: false,
|
||||
showLink: null,
|
||||
navRow: [],
|
||||
noChild: false
|
||||
};
|
||||
}
|
||||
|
||||
goBack() {
|
||||
window.hashHistory.goBack();
|
||||
}
|
||||
nacosToggleNav(id, event) {
|
||||
event.preventDefault();
|
||||
let nowNav = document.getElementById(id);
|
||||
let iconClass = nowNav.querySelector('.iconshow');
|
||||
let subNav = nowNav.querySelector('.subnavlist');
|
||||
let classList = iconClass.classList;
|
||||
let tmpClassName = 'iconshow ';
|
||||
for (let i = 0; i < classList.length; i++) {
|
||||
if (classList[i] === 'icon-arrow-down') {
|
||||
subNav.style.display = 'none';
|
||||
subNav.className += ' hidden';
|
||||
tmpClassName += 'icon-arrow-right';
|
||||
}
|
||||
if (classList[i] === 'icon-arrow-right') {
|
||||
tmpClassName += 'icon-arrow-down';
|
||||
subNav.className = subNav.className.replace(/hidden/g, '');
|
||||
subNav.style.display = 'block';
|
||||
}
|
||||
}
|
||||
iconClass.className = tmpClassName;
|
||||
}
|
||||
nacosGoBack(url) {
|
||||
let params = window.location.hash.split('?')[1];
|
||||
let urlArr = params.split('&') || [];
|
||||
let queryParams = [];
|
||||
for (let i = 0; i < urlArr.length; i++) {
|
||||
if (
|
||||
urlArr[i].split('=')[0] !== '_k' &&
|
||||
urlArr[i].split('=')[0] !== 'dataId' &&
|
||||
urlArr[i].split('=')[0] !== 'group'
|
||||
) {
|
||||
if (urlArr[i].split('=')[0] === 'searchDataId') {
|
||||
queryParams.push(`dataId=${urlArr[i].split('=')[1]}`);
|
||||
} else if (urlArr[i].split('=')[0] === 'searchGroup') {
|
||||
queryParams.push(`group=${urlArr[i].split('=')[1]}`);
|
||||
} else {
|
||||
queryParams.push(urlArr[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
window.hashHistory.push(`/${url}?${queryParams.join('&')}`);
|
||||
}
|
||||
nacosEnterBack() {
|
||||
document.getElementById('backarrow').style.color = '#09c';
|
||||
}
|
||||
nacosOutBack() {
|
||||
document.getElementById('backarrow').style.color = '#546478';
|
||||
}
|
||||
nacosToggleLeftBar() {
|
||||
if (!this.state.leftBarClose) {
|
||||
//关闭
|
||||
this.nacosOutDom.className = 'viewFramework-product';
|
||||
this.nacosLeftBarDom.style.width = 0;
|
||||
this.nacosBodyDom.style.left = 0;
|
||||
this.nacosToggleIconDom.style.left = 0;
|
||||
} else {
|
||||
this.nacosOutDom.className = 'viewFramework-product viewFramework-product-col-1';
|
||||
this.nacosLeftBarDom.style.width = '180px';
|
||||
this.nacosBodyDom.style.left = '180px';
|
||||
this.nacosToggleIconDom.style.left = '160px';
|
||||
}
|
||||
goBack() {
|
||||
window.hashHistory.goBack();
|
||||
}
|
||||
|
||||
this.setState({
|
||||
leftBarClose: !this.state.leftBarClose
|
||||
});
|
||||
}
|
||||
navTo(url) {
|
||||
if (url !== '/configdetail' && url !== '/configeditor') {
|
||||
//二级菜单不清空
|
||||
window.setParams({
|
||||
dataId: '',
|
||||
group: ''
|
||||
});
|
||||
}
|
||||
nacosToggleNav(id, event) {
|
||||
event.preventDefault();
|
||||
let nowNav = document.getElementById(id);
|
||||
let iconClass = nowNav.querySelector('.iconshow');
|
||||
let subNav = nowNav.querySelector('.subnavlist');
|
||||
let classList = iconClass.classList;
|
||||
let tmpClassName = 'iconshow ';
|
||||
for (let i = 0; i < classList.length; i++) {
|
||||
if (classList[i] === 'icon-arrow-down') {
|
||||
subNav.style.display = 'none';
|
||||
subNav.className += ' hidden';
|
||||
tmpClassName += 'icon-arrow-right';
|
||||
}
|
||||
if (classList[i] === 'icon-arrow-right') {
|
||||
tmpClassName += 'icon-arrow-down';
|
||||
subNav.className = subNav.className.replace(/hidden/g, '');
|
||||
subNav.style.display = 'block';
|
||||
}
|
||||
}
|
||||
iconClass.className = tmpClassName;
|
||||
}
|
||||
|
||||
let params = window.location.hash.split('?')[1];
|
||||
let urlArr = params.split('&') || [];
|
||||
let queryParams = [];
|
||||
for (let i = 0; i < urlArr.length; i++) {
|
||||
if (urlArr[i].split('=')[0] !== '_k') {
|
||||
queryParams.push(urlArr[i]);
|
||||
}
|
||||
}
|
||||
nacosGoBack(url) {
|
||||
let params = window.location.hash.split('?')[1];
|
||||
let urlArr = params.split('&') || [];
|
||||
let queryParams = [];
|
||||
for (let i = 0; i < urlArr.length; i++) {
|
||||
if (
|
||||
urlArr[i].split('=')[0] !== '_k' &&
|
||||
urlArr[i].split('=')[0] !== 'dataId' &&
|
||||
urlArr[i].split('=')[0] !== 'group'
|
||||
) {
|
||||
if (urlArr[i].split('=')[0] === 'searchDataId') {
|
||||
queryParams.push(`dataId=${urlArr[i].split('=')[1]}`);
|
||||
} else if (urlArr[i].split('=')[0] === 'searchGroup') {
|
||||
queryParams.push(`group=${urlArr[i].split('=')[1]}`);
|
||||
} else {
|
||||
queryParams.push(urlArr[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
window.hashHistory.push(`/${url}?${queryParams.join('&')}`);
|
||||
}
|
||||
|
||||
window.hashHistory.push(`${url}?${queryParams.join('&')}`);
|
||||
}
|
||||
nacosSetSpecialNav(item) {
|
||||
item.children.forEach((_item) => {
|
||||
let obj = _item;
|
||||
nacosEnterBack() {
|
||||
document.getElementById('backarrow').style.color = '#09c';
|
||||
}
|
||||
|
||||
if (obj.dontUseChild === true) {
|
||||
obj.parentName = item.title;
|
||||
obj.parentId = item.id;
|
||||
obj.parentPath = '/' + item.id;
|
||||
this.deepNav.push(obj);
|
||||
}
|
||||
if (_item.children) {
|
||||
this.nacosSetSpecialNav(_item);
|
||||
}
|
||||
});
|
||||
}
|
||||
nacosNavAct(serviceName, match, location) {
|
||||
if (!match) {
|
||||
let formatpath = location.pathname.substr(1); //得到当前路径
|
||||
let nowpathobj = this.oneLevelNavArr[formatpath]; //根据平行导航匹配父类
|
||||
if (nowpathobj) {
|
||||
if (nowpathobj.parent === serviceName) {
|
||||
//如果父类等于当前的导航则高亮
|
||||
return true;
|
||||
}
|
||||
}
|
||||
nacosOutBack() {
|
||||
document.getElementById('backarrow').style.color = '#546478';
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
nacosLoopNavDeeply(data, parentServiceName) {
|
||||
//深度遍历获取所有的导航数据
|
||||
data.forEach((item) => {
|
||||
if (item) {
|
||||
let navObj = item,
|
||||
_parentServiceName = item.serviceName;
|
||||
navObj.parentServiceName = parentServiceName;
|
||||
this.oneLevelNavArr[item.serviceName] = navObj; //得到每一个层级的导航映射
|
||||
if (item.children && item.children.length > 0) {
|
||||
this.nacosLoopNavDeeply(item.children, _parentServiceName);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
activeNav(id) {
|
||||
if (this.preActNav) {
|
||||
this.preActNav.removeClass('active');
|
||||
}
|
||||
let nowNav = $(`#${id}`);
|
||||
nowNav.addClass('active');
|
||||
this.preActNav = nowNav;
|
||||
}
|
||||
nacosLoopNav(data, index = 0, parent) {
|
||||
//遍历导航，只显示2级
|
||||
let self = this;
|
||||
return data.map((item) => {
|
||||
if (!item) {
|
||||
return '';
|
||||
}
|
||||
index++;
|
||||
if (item.dontUseChild === true) {
|
||||
return '';
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
if (item.isVirtual) {
|
||||
//如果是虚拟菜单需要增加展开箭头
|
||||
let icon = item.isExtend ? (
|
||||
<span className="icon-arrow-down iconshow" />
|
||||
) : (
|
||||
<span className="icon-arrow-right iconshow" />
|
||||
);
|
||||
let hiddenClass = item.isExtend ? '' : 'hidden';
|
||||
return (
|
||||
<li
|
||||
key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
id={`${item.serviceName}`}
|
||||
>
|
||||
<div>
|
||||
<a href="" onClick={this.nacosToggleNav.bind(this, item.serviceName)}>
|
||||
<div className="nav-icon">{icon}</div>
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</div>
|
||||
<ul className={`subnavlist ${hiddenClass}`}>{self.nacosLoopNav(item.children, index)}</ul>
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<li
|
||||
key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
|
||||
>
|
||||
<a
|
||||
href={`javascript:;`}
|
||||
id={`${item.serviceName}`}
|
||||
onClick={this.activeNav.bind(this, `nav${index}`)}
|
||||
>
|
||||
<div className="nav-icon" />
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<li
|
||||
key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
|
||||
>
|
||||
<a
|
||||
href={`javascript:;`}
|
||||
id={`${item.serviceName}`}
|
||||
onClick={this.activeNav.bind(this, `nav${index}`)}
|
||||
>
|
||||
<div className="nav-icon" />
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
}
|
||||
nacosGetNav(navList) {
|
||||
let navRow = ''; //导航
|
||||
if (navList.length > 0) {
|
||||
navRow = <ul>{this.nacosLoopNav(navList)}</ul>;
|
||||
this.nacosLoopNavDeeply(navList); //深度遍历导航树获得平行map
|
||||
}
|
||||
return navRow;
|
||||
}
|
||||
UNSAFE_componentWillMount() {
|
||||
let nav = this.props.navList || [];
|
||||
let navRow = this.nacosGetNav(nav);
|
||||
this.setState({
|
||||
navRow: navRow
|
||||
});
|
||||
}
|
||||
componentDidMount() {
|
||||
this.nacosLeftBarDom = document.getElementById('viewFramework-product-navbar');
|
||||
this.nacosBodyDom = document.getElementById('viewFramework-product-body');
|
||||
this.nacosToggleIconDom = document.getElementById('viewFramework-product-navbar-collapse');
|
||||
this.nacosOutDom = document.getElementById('page-header-mask');
|
||||
// let parentNav = this.initNav[0] || [];
|
||||
let defaultNav = '/configurationManagement';
|
||||
// let childrenNav = parentNav.children || [];
|
||||
window.hashHistory.listen((location) => {
|
||||
if (this.preSimplePath && this.preSimplePath !== '/') {
|
||||
if (location.pathname.indexOf(this.preSimplePath) !== -1) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
let simplePath = window.location.hash.split('?')[0];
|
||||
let navName = simplePath.substr('2');
|
||||
this.preSimplePath = simplePath;
|
||||
nacosToggleLeftBar() {
|
||||
if (!this.nacosOutDom) return
|
||||
if (!this.state.leftBarClose) {
|
||||
//关闭
|
||||
this.nacosOutDom.className = 'viewFramework-product';
|
||||
this.nacosLeftBarDom.style.width = 0;
|
||||
this.nacosBodyDom.style.left = 0;
|
||||
this.nacosToggleIconDom.style.left = 0;
|
||||
} else {
|
||||
this.nacosOutDom.className = 'viewFramework-product viewFramework-product-col-1';
|
||||
this.nacosLeftBarDom.style.width = '180px';
|
||||
this.nacosBodyDom.style.left = '180px';
|
||||
this.nacosToggleIconDom.style.left = '160px';
|
||||
}
|
||||
|
||||
if (navName === '') {
|
||||
window.hashHistory.push(defaultNav);
|
||||
setTimeout(() => {
|
||||
this.activeNav('configurationManagement');
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
leftBarClose: !this.state.leftBarClose
|
||||
});
|
||||
}
|
||||
|
||||
let nowNavObj = this.oneLevelNavArr[navName];
|
||||
if (!nowNavObj) {
|
||||
this.setState({
|
||||
noChild: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
noChild: !!nowNavObj.dontUseChild
|
||||
});
|
||||
let parentServiceName = nowNavObj.parentServiceName,
|
||||
parentNav = this.oneLevelNavArr[parentServiceName];
|
||||
if (simplePath !== '/' && nowNavObj && parentNav && !parentNav.isVirtual) {
|
||||
this.setState({
|
||||
showLink: (
|
||||
<div>
|
||||
<Icon
|
||||
type="arrow-left"
|
||||
onClick={this.nacosGoBack.bind(this, parentServiceName)}
|
||||
id={'backarrow'}
|
||||
onMouseOver={this.nacosEnterBack.bind(this)}
|
||||
onMouseLeave={this.nacosOutBack.bind(this)}
|
||||
style={{
|
||||
marginLeft: 77,
|
||||
marginTop: 0,
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer',
|
||||
color: '#546478',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
navTo(url) {
|
||||
if (url !== '/configdetail' && url !== '/configeditor') {
|
||||
//二级菜单不清空
|
||||
window.setParams({
|
||||
dataId: '',
|
||||
group: ''
|
||||
});
|
||||
}
|
||||
|
||||
navRow: <ul>{this.nacosLoopNav([ nowNavObj ])}</ul>
|
||||
});
|
||||
setTimeout(() => {
|
||||
let navid = navName;
|
||||
this.activeNav(navid);
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
showLink: null,
|
||||
navRow: <ul>{this.nacosLoopNav(this.initNav)}</ul>
|
||||
});
|
||||
setTimeout(() => {
|
||||
let navid = navName;
|
||||
this.activeNav(navid);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
let params = window.location.hash.split('?')[1];
|
||||
let urlArr = params.split('&') || [];
|
||||
let queryParams = [];
|
||||
for (let i = 0; i < urlArr.length; i++) {
|
||||
if (urlArr[i].split('=')[0] !== '_k') {
|
||||
queryParams.push(urlArr[i]);
|
||||
}
|
||||
}
|
||||
|
||||
onLanguageChange = (language) => {
|
||||
window.aliwareIntl.changeLanguage(language);
|
||||
document.cookie = `docsite_language=${language}`;
|
||||
window.location.reload();
|
||||
};
|
||||
window.hashHistory.push(`${url}?${queryParams.join('&')}`);
|
||||
}
|
||||
|
||||
render() {
|
||||
let language = window.aliwareGetCookieByKeyName('docsite_language') || siteConfig.defaultLanguage;
|
||||
nacosSetSpecialNav(item) {
|
||||
item.children.forEach((_item) => {
|
||||
let obj = _item;
|
||||
|
||||
const { headerType, showLink, navRow, leftBarClose, noChild } = this.state;
|
||||
const headerLogo = 'https://img.alicdn.com/tfs/TB118jPv_mWBKNjSZFBXXXxUFXa-2000-390.svg';
|
||||
return (
|
||||
<div className="viewFramework-product" style={{ top: 66 }}>
|
||||
<Header
|
||||
type={headerType}
|
||||
logo={headerLogo}
|
||||
language={language}
|
||||
onLanguageChange={this.onLanguageChange}
|
||||
/>
|
||||
<div
|
||||
className="viewFramework-product-navbar"
|
||||
style={{ width: 180, marginLeft: 0 }}
|
||||
id="viewFramework-product-navbar"
|
||||
data-spm="acm_nav"
|
||||
>
|
||||
<div className="viewFramework-product-navbar-removed">
|
||||
<div>
|
||||
<div className="product-nav-scene product-nav-main-scene">
|
||||
{showLink ? (
|
||||
<div className="product-nav-icon env" style={{ height: 80, paddingTop: 25 }}>
|
||||
{showLink}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{ textIndent: 0 }}
|
||||
className={'product-nav-title'}
|
||||
title={window.aliwareIntl.get(
|
||||
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
|
||||
)}
|
||||
>
|
||||
{window.aliwareIntl.get(
|
||||
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
|
||||
if (obj.dontUseChild === true) {
|
||||
obj.parentName = item.title;
|
||||
obj.parentId = item.id;
|
||||
obj.parentPath = '/' + item.id;
|
||||
this.deepNav.push(obj);
|
||||
}
|
||||
if (_item.children) {
|
||||
this.nacosSetSpecialNav(_item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
nacosNavAct(serviceName, match, location) {
|
||||
if (!match) {
|
||||
let formatpath = location.pathname.substr(1); //得到当前路径
|
||||
let nowpathobj = this.oneLevelNavArr[formatpath]; //根据平行导航匹配父类
|
||||
if (nowpathobj) {
|
||||
if (nowpathobj.parent === serviceName) {
|
||||
//如果父类等于当前的导航则高亮
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
nacosLoopNavDeeply(data, parentServiceName) {
|
||||
//深度遍历获取所有的导航数据
|
||||
data.forEach((item) => {
|
||||
if (item) {
|
||||
let navObj = item,
|
||||
_parentServiceName = item.serviceName;
|
||||
navObj.parentServiceName = parentServiceName;
|
||||
this.oneLevelNavArr[item.serviceName] = navObj; //得到每一个层级的导航映射
|
||||
if (item.children && item.children.length > 0) {
|
||||
this.nacosLoopNavDeeply(item.children, _parentServiceName);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
activeNav(id) {
|
||||
if (this.preActNav) {
|
||||
this.preActNav.removeClass('active');
|
||||
}
|
||||
let nowNav = $(`#${id}`);
|
||||
nowNav.addClass('active');
|
||||
this.preActNav = nowNav;
|
||||
}
|
||||
|
||||
nacosLoopNav(data, index = 0, parent) {
|
||||
//遍历导航，只显示2级
|
||||
let self = this;
|
||||
return data.map((item) => {
|
||||
if (!item) {
|
||||
return '';
|
||||
}
|
||||
index++;
|
||||
if (item.dontUseChild === true) {
|
||||
return '';
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
if (item.isVirtual) {
|
||||
//如果是虚拟菜单需要增加展开箭头
|
||||
let icon = item.isExtend ? (
|
||||
<span className="icon-arrow-down iconshow"/>
|
||||
) : (
|
||||
<span className="icon-arrow-right iconshow"/>
|
||||
);
|
||||
let hiddenClass = item.isExtend ? '' : 'hidden';
|
||||
return (
|
||||
<li
|
||||
key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
id={`${item.serviceName}`}
|
||||
>
|
||||
<div>
|
||||
<a href="" onClick={this.nacosToggleNav.bind(this, item.serviceName)}>
|
||||
<div className="nav-icon">{icon}</div>
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</div>
|
||||
<ul className={`subnavlist ${hiddenClass}`}>{self.nacosLoopNav(item.children, index)}</ul>
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<li
|
||||
key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
|
||||
>
|
||||
<a
|
||||
href={`javascript:;`}
|
||||
id={`${item.serviceName}`}
|
||||
onClick={this.activeNav.bind(this, `nav${index}`)}
|
||||
>
|
||||
<div className="nav-icon"/>
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<li
|
||||
key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
|
||||
>
|
||||
<a
|
||||
href={`javascript:;`}
|
||||
id={`${item.serviceName}`}
|
||||
onClick={this.activeNav.bind(this, `nav${index}`)}
|
||||
>
|
||||
<div className="nav-icon"/>
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
nacosGetNav(navList) {
|
||||
let navRow = ''; //导航
|
||||
if (navList.length > 0) {
|
||||
navRow = <ul>{this.nacosLoopNav(navList)}</ul>;
|
||||
this.nacosLoopNavDeeply(navList); //深度遍历导航树获得平行map
|
||||
}
|
||||
return navRow;
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
let nav = this.props.navList || [];
|
||||
let navRow = this.nacosGetNav(nav);
|
||||
this.setState({
|
||||
navRow: navRow
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.nacosLeftBarDom = document.getElementById('viewFramework-product-navbar');
|
||||
this.nacosBodyDom = document.getElementById('viewFramework-product-body');
|
||||
this.nacosToggleIconDom = document.getElementById('viewFramework-product-navbar-collapse');
|
||||
this.nacosOutDom = document.getElementById('page-header-mask');
|
||||
// let parentNav = this.initNav[0] || [];
|
||||
let defaultNav = '/configurationManagement';
|
||||
// let childrenNav = parentNav.children || [];
|
||||
window.hashHistory.listen((location) => {
|
||||
if (this.preSimplePath && this.preSimplePath !== '/') {
|
||||
if (location.pathname.indexOf(this.preSimplePath) !== -1) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
let simplePath = window.location.hash.split('?')[0];
|
||||
let navName = simplePath.substr('2');
|
||||
this.preSimplePath = simplePath;
|
||||
|
||||
if (navName === '') {
|
||||
window.hashHistory.push(defaultNav);
|
||||
setTimeout(() => {
|
||||
this.activeNav('configurationManagement');
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let nowNavObj = this.oneLevelNavArr[navName];
|
||||
if (!nowNavObj) {
|
||||
this.setState({
|
||||
noChild: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
noChild: !!nowNavObj.dontUseChild
|
||||
});
|
||||
let parentServiceName = nowNavObj.parentServiceName,
|
||||
parentNav = this.oneLevelNavArr[parentServiceName];
|
||||
if (simplePath !== '/' && nowNavObj && parentNav && !parentNav.isVirtual) {
|
||||
this.setState({
|
||||
showLink: (
|
||||
<div>
|
||||
<Icon
|
||||
type="arrow-left"
|
||||
onClick={this.nacosGoBack.bind(this, parentServiceName)}
|
||||
id={'backarrow'}
|
||||
onMouseOver={this.nacosEnterBack.bind(this)}
|
||||
onMouseLeave={this.nacosOutBack.bind(this)}
|
||||
style={{
|
||||
marginLeft: 77,
|
||||
marginTop: 0,
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer',
|
||||
color: '#546478',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
|
||||
navRow: <ul>{this.nacosLoopNav([nowNavObj])}</ul>
|
||||
});
|
||||
setTimeout(() => {
|
||||
let navid = navName;
|
||||
this.activeNav(navid);
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
showLink: null,
|
||||
navRow: <ul>{this.nacosLoopNav(this.initNav)}</ul>
|
||||
});
|
||||
setTimeout(() => {
|
||||
let navid = navName;
|
||||
this.activeNav(navid);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onLanguageChange = (language) => {
|
||||
window.aliwareIntl.changeLanguage(language);
|
||||
document.cookie = `docsite_language=${language}`;
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
render() {
|
||||
let language = window.aliwareGetCookieByKeyName('docsite_language') || siteConfig.defaultLanguage;
|
||||
|
||||
const {headerType, showLink, navRow, leftBarClose, noChild} = this.state;
|
||||
const headerLogo = 'https://img.alicdn.com/tfs/TB118jPv_mWBKNjSZFBXXXxUFXa-2000-390.svg';
|
||||
return (
|
||||
<div className="viewFramework-product" style={{top: 66}}>
|
||||
<Header
|
||||
type={headerType}
|
||||
logo={headerLogo}
|
||||
language={language}
|
||||
onLanguageChange={this.onLanguageChange}
|
||||
/>
|
||||
<div
|
||||
className="viewFramework-product-navbar"
|
||||
style={{width: 180, marginLeft: 0}}
|
||||
id="viewFramework-product-navbar"
|
||||
data-spm="acm_nav"
|
||||
>
|
||||
<div className="viewFramework-product-navbar-removed">
|
||||
<div>
|
||||
<div className="product-nav-scene product-nav-main-scene">
|
||||
{showLink ? (
|
||||
<div className="product-nav-icon env" style={{height: 80, paddingTop: 25}}>
|
||||
{showLink}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{textIndent: 0}}
|
||||
className={'product-nav-title'}
|
||||
title={window.aliwareIntl.get(
|
||||
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
|
||||
)}
|
||||
>
|
||||
{window.aliwareIntl.get(
|
||||
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
|
||||
)}
|
||||
{window.aliwareIntl.get(
|
||||
'com.alibaba.nacos.layout.noenv.nacosversion'
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
'com.alibaba.nacos.layout.noenv.nacosversion'
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="product-nav-list"
|
||||
style={{ position: 'relative', top: 0, height: '100%' }}
|
||||
>
|
||||
{navRow}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="viewFramework-product-navbar-collapse"
|
||||
id="viewFramework-product-navbar-collapse"
|
||||
onClick={this.nacosToggleLeftBar.bind(this)}
|
||||
>
|
||||
<div className="product-navbar-collapse-inner">
|
||||
<div className="product-navbar-collapse-bg" />
|
||||
<div className="product-navbar-collapse">
|
||||
{leftBarClose ? (
|
||||
<span className="icon-collapse-right" style={{ display: 'block' }} />
|
||||
) : (
|
||||
<span className="icon-collapse-left" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="viewFramework-product-body" style={{ marginLeft: 180 }} id="viewFramework-product-body">
|
||||
<div>
|
||||
{!noChild ? (
|
||||
<div>{this.props.children}</div>
|
||||
) : (
|
||||
<div style={{ height: 300, lineHeight: '300px', textAlign: 'center', fontSize: '18px' }}>
|
||||
{window.aliwareIntl.get('com.alibaba.nacos.layout.noenv.does_not_exist')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div
|
||||
className="product-nav-list"
|
||||
style={{position: 'relative', top: 0, height: '100%'}}
|
||||
>
|
||||
{navRow}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="viewFramework-product-navbar-collapse"
|
||||
id="viewFramework-product-navbar-collapse"
|
||||
onClick={this.nacosToggleLeftBar.bind(this)}
|
||||
>
|
||||
<div className="product-navbar-collapse-inner">
|
||||
<div className="product-navbar-collapse-bg"/>
|
||||
<div className="product-navbar-collapse">
|
||||
{leftBarClose ? (
|
||||
<span className="icon-collapse-right" style={{display: 'block'}}/>
|
||||
) : (
|
||||
<span className="icon-collapse-left"/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="viewFramework-product-body" style={{marginLeft: 180}} id="viewFramework-product-body">
|
||||
<div>
|
||||
{!noChild ? (
|
||||
<div>{this.props.children}</div>
|
||||
) : (
|
||||
<div style={{height: 300, lineHeight: '300px', textAlign: 'center', fontSize: '18px'}}>
|
||||
{window.aliwareIntl.get('com.alibaba.nacos.layout.noenv.does_not_exist')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import {Button, Pagination, Table} from '@alifd/next';
|
||||
import {I18N} from './constant'
|
||||
import {I18N, HEALTHY_COLOR_MAPPING} from './constant'
|
||||
import EditInstanceDialog from "./EditInstanceDialog";
|
||||
|
||||
|
||||
@ -71,12 +71,14 @@ class InstanceTable extends React.Component {
|
||||
this.setState({pageNum}, () => this.getInstanceList())
|
||||
}
|
||||
|
||||
rowColor = ({healthy}) => ({className: `row-bg-${HEALTHY_COLOR_MAPPING[`${healthy}`]}`})
|
||||
|
||||
render() {
|
||||
const {clusterName, serviceName} = this.props
|
||||
const {instance, pageSize, loading} = this.state
|
||||
return instance.count ? (
|
||||
<div>
|
||||
<Table dataSource={instance.list} loading={loading}>
|
||||
<Table dataSource={instance.list} loading={loading} getRowProps={this.rowColor}>
|
||||
<Table.Column title="IP" dataIndex="ip"/>
|
||||
<Table.Column title={I18N.PORT} dataIndex="port"/>
|
||||
<Table.Column title={I18N.WEIGHT} dataIndex="weight"/>
|
||||
@ -119,8 +121,8 @@ class InstanceTable extends React.Component {
|
||||
ref="editInstanceDialog"
|
||||
serviceName={serviceName}
|
||||
clusterName={clusterName}
|
||||
openLoading={()=>this.openLoading()}
|
||||
closeLoading={()=>this.closeLoading()}
|
||||
openLoading={() => this.openLoading()}
|
||||
closeLoading={() => this.closeLoading()}
|
||||
getInstanceList={() => this.getInstanceList()}
|
||||
/>
|
||||
</div>
|
||||
@ -117,3 +117,8 @@ export const DIALOG_FORM_LAYOUT = {
|
||||
labelCol: {fixedSpan: 12},
|
||||
wrapperCol: {span: 12}
|
||||
}
|
||||
|
||||
export const HEALTHY_COLOR_MAPPING = {
|
||||
'true': 'green',
|
||||
'false': 'red'
|
||||
}
|
||||
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import RegionGroup from '../../components/RegionGroup' ;
|
||||
import RegionGroup from '../../../components/RegionGroup/index' ;
|
||||
import {Button, Field, Form, Grid, Input, Loading, Pagination, Table} from '@alifd/next';
|
||||
import {I18N, STATUS_COLOR_MAPPING} from './constant'
|
||||
import './ServiceManagement.less'
|
||||
import './ServiceList.less'
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const {Row, Col} = Grid;
|
||||
const {Column} = Table
|
||||
|
||||
/*****************************此行为标记行, 请勿删和修改此行, 文件和组件依赖请写在此行上面, 主体代码请写在此行下面的class中*****************************/
|
||||
class ServiceManagement extends React.Component {
|
||||
class ServiceList extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@ -137,4 +137,4 @@ class ServiceManagement extends React.Component {
|
||||
}
|
||||
|
||||
/*****************************此行为标记行, 请勿删和修改此行, 主体代码请写在此行上面的class中, 组件导出语句及其他信息请写在此行下面*****************************/
|
||||
export default ServiceManagement;
|
||||
export default ServiceList;
|
||||
@ -0,0 +1,2 @@
|
||||
.service-management {
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
import ServiceList from './ServiceList'
|
||||
|
||||
export default ServiceList
|
||||
@ -1,14 +0,0 @@
|
||||
.service-management {
|
||||
.row-bg-green {
|
||||
background-color: #e4fdda;
|
||||
}
|
||||
.row-bg-light-green {
|
||||
background-color: #e3fff8;
|
||||
}
|
||||
.row-bg-orange {
|
||||
background-color: #fff3e0;
|
||||
}
|
||||
.row-bg-red {
|
||||
background-color: #ffece4;
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
import ServiceManagement from './ServiceManagement'
|
||||
|
||||
export default ServiceManagement
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Router, Route, Switch } from 'dva/router';
|
||||
import {Router, Route, Switch} from 'dva/router';
|
||||
import './globalLib';
|
||||
import './lib.js';
|
||||
import App from './containers/App';
|
||||
@ -13,31 +13,31 @@ import ConfigRollback from './pages/ConfigurationManagement/ConfigRollback';
|
||||
import HistoryRollback from './pages/ConfigurationManagement/HistoryRollback';
|
||||
import ListeningToQuery from './pages/ConfigurationManagement/ListeningToQuery';
|
||||
import ConfigurationManagement from './pages/ConfigurationManagement/ConfigurationManagement';
|
||||
import ServiceManagement from './pages/ServiceManagement/index';
|
||||
import ServiceDetail from './pages/ServiceDetail/ServiceDetail';
|
||||
import ServiceList from './pages/ServiceManagement/ServiceList';
|
||||
import ServiceDetail from './pages/ServiceManagement/ServiceDetail';
|
||||
|
||||
function RouterConfig({ history }) {
|
||||
window.hashHistory = history;
|
||||
return (
|
||||
<Router history={history}>
|
||||
<Switch>
|
||||
<App>
|
||||
<Route path="/Namespace" component={Namespace} />
|
||||
<Route path="/Newconfig" component={Newconfig} />
|
||||
<Route path="/Configsync" component={Configsync} />
|
||||
<Route path="/Configdetail" component={Configdetail} />
|
||||
<Route path="/Configeditor" component={Configeditor} />
|
||||
<Route path="/HistoryDetail" component={HistoryDetail} />
|
||||
<Route path="/ConfigRollback" component={ConfigRollback} />
|
||||
<Route path="/HistoryRollback" component={HistoryRollback} />
|
||||
<Route path="/ListeningToQuery" component={ListeningToQuery} />
|
||||
<Route path="/ConfigurationManagement" component={ConfigurationManagement} />
|
||||
<Route path="/ServiceManagement" component={ServiceManagement} />
|
||||
<Route path="/ServiceDetail" component={ServiceDetail} />
|
||||
</App>
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
function RouterConfig({history}) {
|
||||
window.hashHistory = history;
|
||||
return (
|
||||
<Router history={history}>
|
||||
<Switch>
|
||||
<App>
|
||||
<Route path="/Namespace" component={Namespace}/>
|
||||
<Route path="/Newconfig" component={Newconfig}/>
|
||||
<Route path="/Configsync" component={Configsync}/>
|
||||
<Route path="/Configdetail" component={Configdetail}/>
|
||||
<Route path="/Configeditor" component={Configeditor}/>
|
||||
<Route path="/HistoryDetail" component={HistoryDetail}/>
|
||||
<Route path="/ConfigRollback" component={ConfigRollback}/>
|
||||
<Route path="/HistoryRollback" component={HistoryRollback}/>
|
||||
<Route path="/ListeningToQuery" component={ListeningToQuery}/>
|
||||
<Route path="/ConfigurationManagement" component={ConfigurationManagement}/>
|
||||
<Route path="/ServiceManagement" component={ServiceList}/>
|
||||
<Route path="/ServiceDetail" component={ServiceDetail}/>
|
||||
</App>
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default RouterConfig;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user