add console locale

2021-10-29 12:18:37 +08:00 · 2021-10-29 12:18:37 +08:00 · 55d28118ec
parent 09f1c08171
commit 55d28118ec
12 changed files with 70 additions and 38 deletions
--- a/web/config/router.config.js
+++ b/web/config/router.config.js
@ -482,7 +482,7 @@ export default [
          },
          {
            path: '/system/command',
-            name: 'command',
+            name: 'commonCommand',
            component: './System/Command/Index',
            hideInMenu: true
          },
--- a/web/src/components/GlobalHeader/index.less
+++ b/web/src/components/GlobalHeader/index.less
@ -127,3 +127,7 @@ i.trigger {
    }
  }
 }
+
+[tabindex]{
+  outline: none !important;
+}
--- a/web/src/components/kibana/console/components/Console.tsx
+++ b/web/src/components/kibana/console/components/Console.tsx
@ -41,22 +41,22 @@ const ConsoleWrapper = ({

  const lastDatum = requestData?.[requestData.length - 1] ?? requestError;

-  const calcHeight = height > 0 ? (height-35)+'px' : '100%';
-  const leftBarRef = useRef(null)
-  const rightBarRef = useRef(null)
-  const [widths, setWidths] = useState(['50%', '50%'])
-  const onPanelWidthChange = (widths:any)=>{
-    const [lp, rp] = widths;
-    setWidths([lp+2+'%', rp+'%']);
-  }
+  const calcHeight = height > 0 ? (height)+'px' : '100%';
+  // const leftBarRef = useRef(null)
+  // const rightBarRef = useRef(null)
+  // const [widths, setWidths] = useState(['calc(50% - 7px)', 'calc(50% - 7px)'])
+  // const onPanelWidthChange = (widths:any)=>{
+  //   const [lp, rp] = widths;
+  //   setWidths([lp+'%', rp+'%']);
+  // }

  return ( 
    <div style={{height: calcHeight}}>
    <div className="Console" style={{height:'100%'}}>
-      <PanelsContainer resizerClassName="resizer" onPanelWidthChange={onPanelWidthChange}>
-        <Panel style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }} initialWidth={INITIAL_PANEL_WIDTH}>
+      <PanelsContainer resizerClassName="resizer">
+        <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} />
-          <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
                requestInProgress={requestInProgress}
                selectedCluster={selectedCluster}
@ -77,9 +77,9 @@ const ConsoleWrapper = ({
            />
          </div>
        </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} /> 
-          <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
                requestInProgress={requestInProgress}
                selectedCluster={selectedCluster}
--- a/web/src/components/kibana/console/components/request_status_bar/request_status_bar.scss
+++ b/web/src/components/kibana/console/components/request_status_bar/request_status_bar.scss
@ -1,15 +1,14 @@
 .request-status-bar{
-  display: flex;
-  justify-content: center;
-  align-items: center;
  height: 100%;
  .bar-item{
-    flex: 0 0 100%;
+    height: 100%;
    .base-info{
      display: flex;
-      font-size: 12px;
+      font-size: 12px; 
+      align-items: center;
+      margin-top: 2px;
      .info-item{
-        margin: 12px;
+        margin: 0 12px;
        position: relative;
        &.health{
          padding-right: 14px;
@ -21,7 +20,7 @@
      font-size: 12px;
      align-items: center;
      .info-item{
-        margin: 12px;
+        margin: 0 12px;
      }
    }
  }
--- a/web/src/components/kibana/console/components/request_status_bar/request_status_bar.tsx
+++ b/web/src/components/kibana/console/components/request_status_bar/request_status_bar.tsx
@ -22,6 +22,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiText, EuiToolTip,EuiCodeBlock }
 import {HealthStatusCircle} from '@/components/infini/health_status_circle';
 import './request_status_bar.scss';
 import {Drawer, Tabs, Button} from 'antd';
+import { FormattedMessage, formatMessage } from 'umi/locale';

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

 export default {
  'navBar.lang': 'Languages',
@ -152,6 +153,7 @@ export default {
  'menu.system.logs.audit': 'AUDIT',
  'menu.system.logs.query': 'QUERY',
  'menu.system.logs.slow': 'SLOW',
+  'menu.system.commonCommand': 'COMMON COMMAND',


  'menu.form': 'Form',
@ -405,4 +407,5 @@ export default {
    'Setting panel shows in development environment only, please manually modify',

  ...alert,
+  ...console,
 };
--- a/web/src/locales/en-US/console.js
+++ b/web/src/locales/en-US/console.js
@ -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',
+}
--- a/web/src/locales/zh-CN.js
+++ b/web/src/locales/zh-CN.js
@ -1,4 +1,5 @@
 import alert from './zh-CN/alert';
+import console from './zh-CN/console'; 

 export default {
  'navBar.lang': '语言',
@ -158,6 +159,7 @@ export default {
  'menu.system.logs.audit': '审计日志',
  'menu.system.logs.query': '查询日志',
  'menu.system.logs.slow': '慢日志',
+  'menu.system.commonCommand': '常用命令',


  'menu.form': '表单页',
@ -406,4 +408,5 @@ export default {
    '配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件',

  ...alert,
+  ...console,
 };
--- a/web/src/locales/zh-CN/console.js
+++ b/web/src/locales/zh-CN/console.js
@ -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': '请求头信息',
+}
--- a/web/src/pages/Cluster/components/clusters.scss
+++ b/web/src/pages/Cluster/components/clusters.scss
@ -9,6 +9,7 @@
        &.left{
          border-right: 1px solid rgb(232, 232, 232);
          padding-right: 15px;
+          min-width: 642px;
          .card-cnt{
            margin-top: 10px;
            .ant-list-item{
--- a/web/src/pages/Cluster/components/tag.scss
+++ b/web/src/pages/Cluster/components/tag.scss
@ -9,6 +9,7 @@
    &.checked{
      background: #1890ff;
      color: #fff;
+      border-color: #1890ff;
    }
    >.wrapper{
      font-size: 12px;
--- a/web/src/pages/DevTool/Console.tsx
+++ b/web/src/pages/DevTool/Console.tsx
@ -1,6 +1,7 @@
 import Console from '../../components/kibana/console/components/Console';
 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 {useLocalStorage} from '@/lib/hooks/storage';
 import {setClusterID} from '../../components/kibana/console/modules/mappings/mappings';