floraachy
/
console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add console locale

This commit is contained in:
liugq 2021-10-29 12:18:37 +08:00
parent 09f1c08171
commit 55d28118ec
12 changed files with 70 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/config/router.config.js
View File

@ -482,7 +482,7 @@ export default [
}, },
{ {
path: '/system/command', path: '/system/command',
name: 'command', name: 'commonCommand',
component: './System/Command/Index', component: './System/Command/Index',
hideInMenu: true hideInMenu: true
}, },

4
web/src/components/GlobalHeader/index.less
View File

@ -127,3 +127,7 @@ i.trigger {
} }
} }
} }
[tabindex]{
outline: none !important;
}

26
web/src/components/kibana/console/components/Console.tsx
View File

@ -41,22 +41,22 @@ const ConsoleWrapper = ({
const lastDatum = requestData?.[requestData.length - 1] ?? requestError; const lastDatum = requestData?.[requestData.length - 1] ?? requestError;
const calcHeight = height > 0 ? (height-35)+'px' : '100%'; const calcHeight = height > 0 ? (height)+'px' : '100%';
const leftBarRef = useRef(null) // const leftBarRef = useRef(null)
const rightBarRef = useRef(null) // const rightBarRef = useRef(null)
const [widths, setWidths] = useState(['50%', '50%']) // const [widths, setWidths] = useState(['calc(50% - 7px)', 'calc(50% - 7px)'])
const onPanelWidthChange = (widths:any)=>{ // const onPanelWidthChange = (widths:any)=>{
const [lp, rp] = widths; // const [lp, rp] = widths;
setWidths([lp+2+'%', rp+'%']); // setWidths([lp+'%', rp+'%']);
} // }
return ( return (
<div style={{height: calcHeight}}> <div style={{height: calcHeight}}>
<div className="Console" style={{height:'100%'}}> <div className="Console" style={{height:'100%'}}>
<PanelsContainer resizerClassName="resizer" onPanelWidthChange={onPanelWidthChange}> <PanelsContainer resizerClassName="resizer">
<Panel style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }} initialWidth={INITIAL_PANEL_WIDTH}> <Panel style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH, paddingBottom:30 }} initialWidth={INITIAL_PANEL_WIDTH}>
<ConsoleInput clusterID={selectedCluster.id} saveEditorContent={saveEditorContent} initialText={initialText} paneKey={paneKey} /> <ConsoleInput clusterID={selectedCluster.id} saveEditorContent={saveEditorContent} initialText={initialText} paneKey={paneKey} />
<div ref={leftBarRef} style={{background:'#fff', position:'fixed', left:0, bottom:0, width: widths[0], height:30, zIndex:1001, borderTop: '1px solid #eee'}}> <div style={{background:'#fff', position:'absolute', left:0, bottom:0, width: '100%', height:30, zIndex:1001, borderTop: '1px solid #eee'}}>
<RequestStatusBar <RequestStatusBar
requestInProgress={requestInProgress} requestInProgress={requestInProgress}
selectedCluster={selectedCluster} selectedCluster={selectedCluster}
@ -77,9 +77,9 @@ const ConsoleWrapper = ({
/> />
</div> </div>
</Panel> </Panel>
<Panel style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }} initialWidth={INITIAL_PANEL_WIDTH}> <Panel style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH, paddingBottom:30 }} initialWidth={INITIAL_PANEL_WIDTH}>
<ConsoleOutput clusterID={selectedCluster.id} /> <ConsoleOutput clusterID={selectedCluster.id} />
<div ref={rightBarRef} style={{background:'#fff', position:'fixed', right:0, bottom:0, width: widths[1], height:30, zIndex:1001, borderTop: '1px solid #eee'}}> <div style={{background:'#fff', position:'absolute', right:0, bottom:0, width: '100%', height:30, zIndex:1001, borderTop: '1px solid #eee'}}>
<RequestStatusBar <RequestStatusBar
requestInProgress={requestInProgress} requestInProgress={requestInProgress}
selectedCluster={selectedCluster} selectedCluster={selectedCluster}

11
web/src/components/kibana/console/components/request_status_bar/request_status_bar.scss
View File

@ -1,15 +1,14 @@
.request-status-bar{ .request-status-bar{
display: flex;
justify-content: center;
align-items: center;
height: 100%; height: 100%;
.bar-item{ .bar-item{
flex: 0 0 100%; height: 100%;
.base-info{ .base-info{
display: flex; display: flex;
font-size: 12px; font-size: 12px;
align-items: center;
margin-top: 2px;
.info-item{ .info-item{
margin: 12px; margin: 0 12px;
position: relative; position: relative;
&.health{ &.health{
padding-right: 14px; padding-right: 14px;
@ -21,7 +20,7 @@
font-size: 12px; font-size: 12px;
align-items: center; align-items: center;
.info-item{ .info-item{
margin: 12px; margin: 0 12px;
} }
} }
} }

22
web/src/components/kibana/console/components/request_status_bar/request_status_bar.tsx
View File

@ -22,6 +22,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiText, EuiToolTip,EuiCodeBlock }
import {HealthStatusCircle} from '@/components/infini/health_status_circle'; import {HealthStatusCircle} from '@/components/infini/health_status_circle';
import './request_status_bar.scss'; import './request_status_bar.scss';
import {Drawer, Tabs, Button} from 'antd'; import {Drawer, Tabs, Button} from 'antd';
import { FormattedMessage, formatMessage } from 'umi/locale';
export interface Props { export interface Props {
requestInProgress: boolean; requestInProgress: boolean;
@ -74,18 +75,18 @@ export const RequestStatusBar = ({
let content: React.ReactNode = null; let content: React.ReactNode = null;
const clusterContent = (<div className="base-info"> const clusterContent = (<div className="base-info">
<div className="info-item health"> <div className="info-item health">
<span>健康状态：</span> <span> <FormattedMessage id="console.cluster.status"/>：</span>
<i style={{position:'absolute', top: 1, right:0}}> <i style={{position:'absolute', top: 1, right:0}}>
<HealthStatusCircle status={selectedCluster.status}/> <HealthStatusCircle status={selectedCluster.status}/>
</i> </i>
</div> </div>
<div className="info-item"> <div className="info-item">
<span>集群地址：</span> <span><FormattedMessage id="console.cluster.endpoint"/>：</span>
<EuiBadge color="default">{selectedCluster.host}</EuiBadge> <EuiBadge color="default">{selectedCluster.host}</EuiBadge>
</div> </div>
<div className="info-item"> <div className="info-item">
<span>版本：</span> <span><FormattedMessage id="console.cluster.version"/>：</span>
<EuiBadge color="default"> {selectedCluster.version}</EuiBadge> <EuiBadge color="default">{selectedCluster.version}</EuiBadge>
</div> </div>
</div>); </div>);
const [headerInfoVisible, setHeaderInfoVisible] = React.useState(false) const [headerInfoVisible, setHeaderInfoVisible] = React.useState(false)
@ -105,7 +106,7 @@ const [headerInfoVisible, setHeaderInfoVisible] = React.useState(false)
<> <>
<div className="status_info"> <div className="status_info">
<div className="info-item"> <div className="info-item">
<span>响应状态：</span> <span><FormattedMessage id="console.response.status"/>：</span>
<EuiToolTip <EuiToolTip
position="top" position="top"
content={ content={
@ -114,14 +115,16 @@ const [headerInfoVisible, setHeaderInfoVisible] = React.useState(false)
}`}</EuiText> }`}</EuiText>
} }
> >
<EuiText size="s">
<EuiBadge color={mapStatusCodeToBadgeColor(statusCode)}> <EuiBadge color={mapStatusCodeToBadgeColor(statusCode)}>
{/* Use &nbsp; to ensure that no matter the width we don't allow line breaks */} {/* Use &nbsp; to ensure that no matter the width we don't allow line breaks */}
{statusCode}&nbsp;-&nbsp;{statusText} {statusCode}&nbsp;-&nbsp;{statusText}
</EuiBadge> </EuiBadge>
</EuiText>
</EuiToolTip> </EuiToolTip>
</div> </div>
<div className="info-item"> <div className="info-item">
<span>时延：</span> <span><FormattedMessage id="console.response.time_elapsed"/>：</span>
<EuiToolTip <EuiToolTip
position="top" position="top"
content={ content={
@ -138,11 +141,10 @@ const [headerInfoVisible, setHeaderInfoVisible] = React.useState(false)
</EuiToolTip> </EuiToolTip>
</div> </div>
<div className="info-item"> <div className="info-item">
<EuiText size="s"> {/* <Button type="link" onClick={()=>{setHeaderInfoVisible(true)}}> */}
<Button type="link" onClick={()=>{setHeaderInfoVisible(true)}}> {/* <FormattedMessage id="console.request.headers"/> */}
Headers Headers
</Button> {/* </Button> */}
</EuiText>
</div> </div>
</div> </div>
</> </>

3
web/src/locales/en-US.js
View File

@ -1,4 +1,5 @@
import alert from './en-US/alert'; import alert from './en-US/alert';
import console from './en-US/console';
export default { export default {
'navBar.lang': 'Languages', 'navBar.lang': 'Languages',
@ -152,6 +153,7 @@ export default {
'menu.system.logs.audit': 'AUDIT', 'menu.system.logs.audit': 'AUDIT',
'menu.system.logs.query': 'QUERY', 'menu.system.logs.query': 'QUERY',
'menu.system.logs.slow': 'SLOW', 'menu.system.logs.slow': 'SLOW',
'menu.system.commonCommand': 'COMMON COMMAND',
'menu.form': 'Form', 'menu.form': 'Form',
@ -405,4 +407,5 @@ export default {
'Setting panel shows in development environment only, please manually modify', 'Setting panel shows in development environment only, please manually modify',
...alert, ...alert,
...console,
}; };

9
web/src/locales/en-US/console.js Normal file
View File

@ -0,0 +1,9 @@
export default {
'console.cluster.status': 'Health',
'console.cluster.endpoint': 'Endpoint',
'console.cluster.version': 'Version',
'console.response.status': 'Response status',
'console.response.time_elapsed': 'Time elapsed',
'console.request.headers': 'Headers',
'console.request.headers.title': 'Request header info',
}

3
web/src/locales/zh-CN.js
View File

@ -1,4 +1,5 @@
import alert from './zh-CN/alert'; import alert from './zh-CN/alert';
import console from './zh-CN/console';
export default { export default {
'navBar.lang': '语言', 'navBar.lang': '语言',
@ -158,6 +159,7 @@ export default {
'menu.system.logs.audit': '审计日志', 'menu.system.logs.audit': '审计日志',
'menu.system.logs.query': '查询日志', 'menu.system.logs.query': '查询日志',
'menu.system.logs.slow': '慢日志', 'menu.system.logs.slow': '慢日志',
'menu.system.commonCommand': '常用命令',
'menu.form': '表单页', 'menu.form': '表单页',
@ -406,4 +408,5 @@ export default {
'配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件', '配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件',
...alert, ...alert,
...console,
}; };

9
web/src/locales/zh-CN/console.js Normal file
View File

@ -0,0 +1,9 @@
export default {
'console.cluster.status': '健康状态',
'console.cluster.endpoint': '集群地址',
'console.cluster.version': '版本',
'console.response.status': '响应状态',
'console.response.time_elapsed': '时延',
'console.request.headers': '请求头',
'console.request.headers.title': '请求头信息',
}

1
web/src/pages/Cluster/components/clusters.scss
View File

@ -9,6 +9,7 @@
&.left{ &.left{
border-right: 1px solid rgb(232, 232, 232); border-right: 1px solid rgb(232, 232, 232);
padding-right: 15px; padding-right: 15px;
min-width: 642px;
.card-cnt{ .card-cnt{
margin-top: 10px; margin-top: 10px;
.ant-list-item{ .ant-list-item{

1
web/src/pages/Cluster/components/tag.scss
View File

@ -9,6 +9,7 @@
&.checked{ &.checked{
background: #1890ff; background: #1890ff;
color: #fff; color: #fff;
border-color: #1890ff;
} }
>.wrapper{ >.wrapper{
font-size: 12px; font-size: 12px;

3
web/src/pages/DevTool/Console.tsx
View File

@ -1,6 +1,7 @@
import Console from '../../components/kibana/console/components/Console'; import Console from '../../components/kibana/console/components/Console';
import {connect} from 'dva'; import {connect} from 'dva';
import {Tabs, Button, Icon, Menu, Dropdown} from 'antd'; import {Button, Icon, Menu, Dropdown, Tabs} from 'antd';
// import Tabs from '@/components/infini/tabs';
import {useState, useReducer, useCallback, useEffect, useMemo, useRef, useLayoutEffect} from 'react'; import {useState, useReducer, useCallback, useEffect, useMemo, useRef, useLayoutEffect} from 'react';
import {useLocalStorage} from '@/lib/hooks/storage'; import {useLocalStorage} from '@/lib/hooks/storage';
import {setClusterID} from '../../components/kibana/console/modules/mappings/mappings'; import {setClusterID} from '../../components/kibana/console/modules/mappings/mappings';