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

command globalization

This commit is contained in:
liugq 2021-11-28 21:25:29 +08:00
parent fe10f329ab
commit c0da75ae11
10 changed files with 180 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/components/kibana/console/components/CommonCommandModal.tsx
View File

@ -2,6 +2,7 @@
import React, { useState, useCallback } from "react";
import { Modal, Form, Input, Tag } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { formatMessage } from "umi/locale";
interface ITagGeneratorProps {
value?: Array<string>;
@ -61,7 +62,7 @@ export const TagGenerator = ({ value = [], onChange }: ITagGeneratorProps) => {
)}
{!inputVisible && (
<Tag onClick={showInput} style={{ padding: "4px 6px", fontSize: 16 }}>
<PlusOutlined /> 新建标签
<PlusOutlined /> {formatMessage({ id: "command.btn.newtag" })}
</Tag>
)}
</div>
@ -86,21 +87,21 @@ const CommonCommandModal = Form.create()((props: ICommonCommandModalProps) => {
return (
<Modal
title="保存常用命令"
title={formatMessage({ id: "command.manage.save.title" })}
visible={true}
onCancel={props.onClose}
onOk={handleConfirm}
zIndex={1003}
cancelText="取消"
okText="确认"
cancelText={formatMessage({ id: "form.button.cancel" })}
okText={formatMessage({ id: "form.button.save" })}
>
<Form layout="vertical">
<Form.Item label="标题">
<Form.Item label={formatMessage({ id: "command.table.field.name" })}>
{form.getFieldDecorator("title", {
rules: [{ required: true, message: "请输入标题" }],
})(<Input />)}
</Form.Item>
<Form.Item label="标签">
<Form.Item label={formatMessage({ id: "command.table.field.tag" })}>
{form.getFieldDecorator("tag")(<TagGenerator />)}
</Form.Item>
</Form>

93
web/src/components/kibana/console/components/ConsoleMenu.tsx
View File

@ -30,14 +30,20 @@
* GitHub history for details.
*/
import React, { Component } from 'react';
import { EuiIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
import { ESRequestParams } from '../entities/es_request';
import {notification} from 'antd';
import React, { Component } from "react";
import {
EuiIcon,
EuiContextMenuPanel,
EuiContextMenuItem,
EuiPopover,
} from "@elastic/eui";
import { ESRequestParams } from "../entities/es_request";
import { notification } from "antd";
import CommonCommandModal from './CommonCommandModal';
import {saveCommonCommand} from '../modules/es';
import {pushCommand} from '../modules/mappings/mappings';
import CommonCommandModal from "./CommonCommandModal";
import { saveCommonCommand } from "../modules/es";
import { pushCommand } from "../modules/mappings/mappings";
import { formatMessage } from "umi/locale";
interface Props {
getCurl: () => Promise<string>;
@ -57,7 +63,7 @@ export default class ConsoleMenu extends Component<Props, State> {
super(props);
this.state = {
curlCode: '',
curlCode: "",
isPopoverOpen: false,
modalVisible: false,
};
@ -74,14 +80,14 @@ export default class ConsoleMenu extends Component<Props, State> {
try {
await this.copyText(this.state.curlCode);
notification.open({
message: 'Request copied as cURL',
placement: 'bottomRight'
message: "Request copied as cURL",
placement: "bottomRight",
});
} catch (e) {
notification.error({
message: 'Could not copy request as cURL',
placement: 'bottomRight'
});
message: "Could not copy request as cURL",
placement: "bottomRight",
});
}
}
@ -90,7 +96,7 @@ export default class ConsoleMenu extends Component<Props, State> {
await window.navigator.clipboard.writeText(text);
return;
}
throw new Error('Could not copy to clipboard!');
throw new Error("Could not copy to clipboard!");
}
onButtonClick = () => {
@ -111,7 +117,7 @@ export default class ConsoleMenu extends Component<Props, State> {
if (!documentation) {
return;
}
window.open(documentation, '_blank');
window.open(documentation, "_blank");
};
autoIndent = (event: React.MouseEvent) => {
@ -122,7 +128,7 @@ export default class ConsoleMenu extends Component<Props, State> {
saveAsCommonCommand = () => {
this.setState({
isPopoverOpen: false,
modalVisible: true
modalVisible: true,
});
};
@ -137,14 +143,14 @@ export default class ConsoleMenu extends Component<Props, State> {
requests,
};
const result = await (await saveCommonCommand(reqBody))?.json();
if(result.error){
if (result.error) {
notification.error({
message: result.error
message: result.error,
});
}else{
} else {
this.handleClose();
notification.success({
message:'保存成功'
message: "保存成功",
});
pushCommand(result);
}
@ -152,40 +158,36 @@ export default class ConsoleMenu extends Component<Props, State> {
render() {
const button = (
<button
className="euiButtonIcon--primary"
onClick={this.onButtonClick}
>
<button className="euiButtonIcon--primary" onClick={this.onButtonClick}>
<EuiIcon type="wrench" />
</button>
);
const items = [
<EuiContextMenuItem
key="Auto indent"
onClick={this.autoIndent}
>
自动缩进
<EuiContextMenuItem key="Auto indent" onClick={this.autoIndent}>
{formatMessage({ id: "console.menu.auto_indent" })}
</EuiContextMenuItem>,
<EuiContextMenuItem
key="Save as common command"
onClick={this.saveAsCommonCommand}
>
保存为常用命令
{formatMessage({ id: "console.menu.save_as_command" })}
</EuiContextMenuItem>,
];
if(window.navigator?.clipboard){
items.unshift(<EuiContextMenuItem
key="Copy as cURL"
id="ConCopyAsCurl"
disabled={!window.navigator?.clipboard}
onClick={() => {
this.closePopover();
this.copyAsCurl();
}}
>
复制为curl命令
</EuiContextMenuItem>)
if (window.navigator?.clipboard) {
items.unshift(
<EuiContextMenuItem
key="Copy as cURL"
id="ConCopyAsCurl"
disabled={!window.navigator?.clipboard}
onClick={() => {
this.closePopover();
this.copyAsCurl();
}}
>
{formatMessage({ id: "console.menu.copy_as_curl" })}
</EuiContextMenuItem>
);
}
return (
@ -200,7 +202,12 @@ export default class ConsoleMenu extends Component<Props, State> {
>
<EuiContextMenuPanel items={items} />
</EuiPopover>
{this.state.modalVisible && <CommonCommandModal onClose={this.handleClose} onConfirm={this.handleConfirm} />}
{this.state.modalVisible && (
<CommonCommandModal
onClose={this.handleClose}
onConfirm={this.handleConfirm}
/>
)}
</span>
);
}

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

@ -1,6 +1,7 @@
import alert from "./en-US/alert";
import console from "./en-US/console";
import cluster from "./en-US/cluster";
import command from "./en-US/command";
export default {
"navBar.lang": "Languages",
@ -77,9 +78,13 @@ export default {
"form.button.cancel": "Cancel",
"form.button.collapse": "Collapse",
"form.button.advanced": "Advanced",
"form.button.regist": "Regist",
"table.field.operation": "Operation",
"form.button.next": "Next",
"form.button.pre": "Previous",
"form.button.goback": "Back",
"form.button.reset": "Reset",
"form.label.search-keyword": "Keyword",
"component.globalHeader.search": "Search",
"component.globalHeader.search.example1": "Search example 1",
@ -422,4 +427,5 @@ export default {
...alert,
...console,
...cluster,
...command,
};

8
web/src/locales/en-US/cluster.js
View File

@ -1,9 +1,11 @@
export default {
"cluster.manage.title": "CLUSTERS",
"cluster.manage.description":
"集群管理可以帮助您快速接入不同版本的 Elasticsearch 集群，以及删除和修改集群配置。",
"Cluster management can help you quickly access different versions of Elasticsearch clusters, as well as delete and modify cluster configurations.",
"cluster.manage.label.cluster_name": "Cluster Name",
"cluster.manage.label.cluster_host": "Cluster Host",
"cluster.manage.btn.regist": "Regist Cluster",
"cluster.manage.btn.try_connect": "Try Connect",
"cluster.manage.table.column.name": "Name",
"cluster.manage.table.column.health": "Health",
"cluster.manage.table.column.version": "Version",
@ -15,7 +17,9 @@ export default {
"cluster.manage.monitored.on": "ON",
"cluster.manage.monitored.off": "OFF",
"cluster.regist.title": "REGIST CLUSTER",
"cluster.regist.description": "输入集群地址和身份验证信息分步创建集群。",
"cluster.edit.title": "EDIT CLUSTER",
"cluster.regist.description":
"Enter the cluster address and authentication information to create a cluster step by step.",
"cluster.regist.step.connect.title": "Connect",
"cluster.regist.step.confirm.title": "Confirm",
"cluster.regist.step.complete.title": "Complete",

14
web/src/locales/en-US/command.js Normal file
View File

@ -0,0 +1,14 @@
export default {
"command.table.field.name": "Name",
"command.table.field.tag": "Tag",
"command.table.field.content": "Content",
"command.manage.edit.title": "Command",
"command.btn.newtag": "Add New Tag",
"command.manage.save.title": "Save As Command",
"command.manage.title": "COMMANDS",
"command.manage.description":
"Commonly used commands can help you save frequently used requests and load them quickly through the LOAD command in the development tool.",
"console.menu.copy_as_curl": "Copy As Curl",
"console.menu.auto_indent": "Auto Indent",
"console.menu.save_as_command": "Save As Command",
};

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

@ -1,6 +1,7 @@
import alert from "./zh-CN/alert";
import console from "./zh-CN/console";
import cluster from "./zh-CN/cluster";
import command from "./zh-CN/command";
export default {
"navBar.lang": "语言",
@ -83,9 +84,13 @@ export default {
"form.button.cancel": "取消",
"form.button.collapse": "收起",
"form.button.advanced": "高级",
"form.button.regist": "注册",
"table.field.operation": "操作",
"form.button.next": "下一步",
"form.button.pre": "上一步",
"form.button.goback": "返回",
"form.button.reset": "重置",
"form.label.search-keyword": "观检测",
"component.globalHeader.search": "站内搜索",
"component.globalHeader.search.example1": "搜索提示一",
@ -420,4 +425,5 @@ export default {
...alert,
...console,
...cluster,
...command,
};

5
web/src/locales/zh-CN/cluster.js
View File

@ -4,17 +4,20 @@ export default {
"集群管理可以帮助您快速接入不同版本的 Elasticsearch 集群，以及删除和修改集群配置。",
"cluster.manage.label.cluster_name": "集群名称",
"cluster.manage.btn.regist": "注册集群",
"cluster.manage.btn.try_connect": "测试连接",
"cluster.manage.table.column.name": "集群名称",
"cluster.manage.table.column.health": "集群状态",
"cluster.manage.table.column.version": "程序版本",
"cluster.manage.table.column.node_count": "节点数",
"cluster.manage.table.column.endpoint": "集群地址",
"cluster.manage.table.column.monitored": "监控启用状态",
"cluster.manage.label.cluster_host": "集群主机",
"cluster.manage.table.column.monitored": "监控启用",
"cluster.manage.table.column.operation": "操作",
"cluster.manage.table.column.description": "描述",
"cluster.manage.monitored.on": "启用",
"cluster.manage.monitored.off": "关闭",
"cluster.regist.title": "集群注册",
"cluster.edit.title": "修改集群配置",
"cluster.regist.description": "输入集群地址和身份验证信息分步创建集群。",
"cluster.regist.step.connect.title": "连接",
"cluster.regist.step.confirm.title": "确认",

14
web/src/locales/zh-CN/command.js Normal file
View File

@ -0,0 +1,14 @@
export default {
"command.table.field.name": "名称",
"command.table.field.tag": "标签",
"command.table.field.content": "内容",
"command.manage.edit.title": "常用命令",
"command.btn.newtag": "新建标签",
"command.manage.save.title": "保存为常用命令",
"command.manage.title": "常用命令管理",
"command.manage.description":
"常用命令可以帮助您保存常用的请求，并且在开发工具里面通过 LOAD 命令快速地加载。",
"console.menu.copy_as_curl": "复制为Curl命令",
"console.menu.auto_indent": "自动缩进",
"console.menu.save_as_command": "保存为常用命令",
};

68
web/src/pages/System/Cluster/Form.js
View File

@ -16,6 +16,7 @@ import styles from "./Form.less";
import { connect } from "dva";
import NewCluster from "./Step";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { formatMessage } from "umi/locale";
@Form.create()
@connect(({ clusterConfig }) => ({
@ -176,7 +177,12 @@ class ClusterForm extends React.Component {
return (
<PageHeaderWrapper>
<Card
title={editMode === "NEW" ? "注册集群" : "修改集群配置"}
title={formatMessage({
id:
editMode === "NEW"
? "cluster.regist.title"
: "cluster.edit.title",
})}
extra={[
<Button
type="primary"
@ -184,13 +190,19 @@ class ClusterForm extends React.Component {
router.push("/system/cluster");
}}
>
返回
{formatMessage({
id: "form.button.goback",
})}
</Button>,
]}
>
<Spin spinning={this.state.isLoading}>
<Form {...formItemLayout}>
<Form.Item label="集群名称">
<Form.Item
label={formatMessage({
id: "cluster.manage.label.cluster_name",
})}
>
{getFieldDecorator("name", {
initialValue: editValue.name,
rules: [
@ -201,7 +213,11 @@ class ClusterForm extends React.Component {
],
})(<Input autoComplete="off" placeholder="cluster-name" />)}
</Form.Item>
<Form.Item label="集群地址">
<Form.Item
label={formatMessage({
id: "cluster.manage.label.cluster_host",
})}
>
{getFieldDecorator("host", {
initialValue: editValue.host,
rules: [
@ -234,7 +250,11 @@ class ClusterForm extends React.Component {
/>
)}
</Form.Item>
<Form.Item label="是否需要身份验证">
<Form.Item
label={formatMessage({
id: "cluster.regist.step.connect.label.auth",
})}
>
<Switch
defaultChecked={this.state.needAuth}
onChange={this.handleAuthChange}
@ -244,13 +264,22 @@ class ClusterForm extends React.Component {
</Form.Item>
{this.state.needAuth === true ? (
<div>
<Form.Item label="用户名">
<Form.Item
label={formatMessage({
id: "cluster.regist.step.connect.label.username",
})}
>
{getFieldDecorator("username", {
initialValue: editValue.basic_auth?.username,
rules: [],
})(<Input autoComplete="off" />)}
</Form.Item>
<Form.Item label="密码" hasFeedback>
<Form.Item
label={formatMessage({
id: "cluster.regist.step.connect.label.password",
})}
hasFeedback
>
{getFieldDecorator("password", {
initialValue: editValue.basic_auth?.password,
rules: [],
@ -265,10 +294,14 @@ class ClusterForm extends React.Component {
initialValue: editValue.order || 0,
})(<InputNumber />)}
</Form.Item> */}
<Form.Item label="描述">
<Form.Item
label={formatMessage({
id: "cluster.manage.table.column.description",
})}
>
{getFieldDecorator("description", {
initialValue: editValue.description,
})(<Input.TextArea placeholder="集群应用描述" />)}
})(<Input.TextArea placeholder="Cluster Descirption" />)}
</Form.Item>
{/* <Form.Item label="是否启用">
{getFieldDecorator('enabled', {
@ -279,7 +312,11 @@ class ClusterForm extends React.Component {
unCheckedChildren={<Icon type="close" />}
/>)}
</Form.Item> */}
<Form.Item label="启用监控">
<Form.Item
label={formatMessage({
id: "cluster.manage.table.column.monitored",
})}
>
{getFieldDecorator("monitored", {
valuePropName: "checked",
initialValue:
@ -295,10 +332,17 @@ class ClusterForm extends React.Component {
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button type="primary" onClick={this.handleSubmit}>
{editMode === "NEW" ? "注册" : "保存"}
{formatMessage({
id:
editMode === "NEW"
? "form.button.regist"
: "form.button.save",
})}
</Button>
<Button style={{ marginLeft: 15 }} onClick={this.tryConnect}>
测试连接
{formatMessage({
id: "cluster.manage.btn.try_connect",
})}
</Button>
</Form.Item>
</Form>

35
web/src/pages/System/Command/Index.js
View File

@ -44,10 +44,7 @@ const { TabPane } = Tabs;
const content = (
<div className={styles.pageHeaderContent}>
<p>
常用命令可以帮助您保存常用的请求，并且在开发工具里面通过 LOAD
命令快速地加载。
</p>
<p>{formatMessage({ id: "command.manage.description" })}</p>
</div>
);
@ -75,7 +72,7 @@ class Index extends PureComponent {
};
columns = [
{
title: "名称",
title: formatMessage({ id: "command.table.field.name" }),
dataIndex: "title",
render: (text, record) => (
<a
@ -91,21 +88,21 @@ class Index extends PureComponent {
),
},
{
title: "标签",
title: formatMessage({ id: "command.table.field.tag" }),
dataIndex: "tag",
render: (val) => {
return (val || []).join(",");
},
},
{
title: "操作",
title: formatMessage({ id: "table.field.operation" }),
render: (text, record) => (
<Fragment>
<Popconfirm
title="Sure to delete?"
onConfirm={() => this.handleDeleteClick(record.id)}
>
<a>删除</a>
<a>{formatMessage({ id: "form.button.delete" })}</a>
</Popconfirm>
</Fragment>
),
@ -268,7 +265,7 @@ class Index extends PureComponent {
return (
<PageHeaderWrapper
title="常用命令管理"
title={formatMessage({ id: "command.manage.title" })}
content={content}
extraContent={extraContent}
>
@ -278,22 +275,24 @@ class Index extends PureComponent {
<Form onSubmit={this.handleSearch} layout="inline">
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
<Col md={8} sm={24}>
<FormItem label="关键词">
<FormItem
label={formatMessage({ id: "form.label.search-keyword" })}
>
{getFieldDecorator("keyword")(
<Input placeholder="请输入" />
<Input placeholder="Input keyword to search" />
)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<span className={styles.submitButtons}>
<Button type="primary" htmlType="submit">
查询
{formatMessage({ id: "form.button.search" })}
</Button>
<Button
style={{ marginLeft: 8 }}
onClick={this.handleFormReset}
>
重置
{formatMessage({ id: "form.button.reset" })}
</Button>
</span>
</Col>
@ -326,7 +325,7 @@ class Index extends PureComponent {
</Card>
<Drawer
// title={editingCommand.title}
title="常用命令"
title={formatMessage({ id: "command.manage.edit.title" })}
visible={drawerVisible}
onClose={() => {
this.setState({
@ -339,7 +338,7 @@ class Index extends PureComponent {
<div
style={{ display: "flex", alignItems: "center", marginBottom: 15 }}
>
<div>标题：</div>
<div>{formatMessage({ id: "command.table.field.name" })}：</div>
<div>
<Input
value={editingCommand.title}
@ -351,7 +350,7 @@ class Index extends PureComponent {
<div
style={{ display: "flex", alignItems: "center", marginBottom: 15 }}
>
<div>标签：</div>
<div>{formatMessage({ id: "command.table.field.tag" })}：</div>
<div>
<TagGenerator
value={editingCommand.tag || []}
@ -360,7 +359,7 @@ class Index extends PureComponent {
{/* <Input style={{ width: 250 }} /> */}
</div>
</div>
<div>内容：</div>
<div>{formatMessage({ id: "command.table.field.content" })}：</div>
<div style={{ border: "1px solid rgb(232, 232, 232)" }}>
<EuiCodeBlock language="json" style={{ height: 300 }} isCopyable>
{this.buildRawCommonCommandRequest(editingCommand)}
@ -385,7 +384,7 @@ class Index extends PureComponent {
</div>
<div style={{ marginTop: 15, textAlign: "right" }}>
<Button type="primary" onClick={this.handleSaveClick}>
保存
{formatMessage({ id: "form.button.save" })}
</Button>
</div>
</Drawer>