You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@doris.apache.org by ji...@apache.org on 2022/04/07 01:20:31 UTC
[incubator-doris-manager] branch master updated: [feature] can set agent port in frontend when creating a new cluster (#32)
This is an automated email from the ASF dual-hosted git repository.
jiafengzheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-doris-manager.git
The following commit(s) were added to refs/heads/master by this push:
new 9aec458 [feature] can set agent port in frontend when creating a new cluster (#32)
9aec458 is described below
commit 9aec45819405bfcc8f7a1eef3a2022b41ddb9409
Author: zhengbowen <10...@users.noreply.github.com>
AuthorDate: Thu Apr 7 09:20:26 2022 +0800
[feature] can set agent port in frontend when creating a new cluster (#32)
can set agent port in frontend when creating a new cluster
---
frontend/public/locales/en-us.json | 5 ++-
frontend/public/locales/zh-cn.json | 5 ++-
frontend/src/components/common-header/header.tsx | 4 +--
.../routes/space/access-cluster/access-cluster.tsx | 5 +--
.../steps/managed-options/index.module.less | 20 ++++++++++++
.../steps/managed-options/managed-options.tsx | 14 ++++++---
.../src/routes/space/new-cluster/new-cluster.tsx | 5 ++-
.../steps/install-options/index.module.less | 20 ++++++++++++
.../steps/install-options/install-options.tsx | 30 ++++++++----------
frontend/src/routes/space/space.interface.ts | 6 ++--
frontend/src/routes/tree/index.tsx | 36 ++++++++++++++++++----
frontend/src/utils/utils.ts | 6 +++-
12 files changed, 118 insertions(+), 38 deletions(-)
diff --git a/frontend/public/locales/en-us.json b/frontend/public/locales/en-us.json
index 990b864..9bdb60d 100644
--- a/frontend/public/locales/en-us.json
+++ b/frontend/public/locales/en-us.json
@@ -341,5 +341,8 @@
"TableDescription": "Table Description",
"CreateTime": "Create Time",
"UpdateTime": "Update Time",
- "UpdateTimeHelper": "Records the time when the last table structure change occurred"
+ "UpdateTimeHelper": "Records the time when the last table structure change occurred",
+
+ "Sync successfully, please refresh the page": "Sync successfully, please refresh the page",
+ "Sync failed": "Sync failed"
}
diff --git a/frontend/public/locales/zh-cn.json b/frontend/public/locales/zh-cn.json
index 3b0d38a..2ff6881 100644
--- a/frontend/public/locales/zh-cn.json
+++ b/frontend/public/locales/zh-cn.json
@@ -354,6 +354,9 @@
"TableDescription": "数据表描述信息",
"CreateTime": "创建时间",
"UpdateTime": "最近修改时间",
- "UpdateTimeHelper": "记录该表最近发生表结构变更的时间"
+ "UpdateTimeHelper": "记录该表最近发生表结构变更的时间",
+
+ "Sync successfully, please refresh the page": "同步成功，请刷新页面" ,
+ "Sync failed": "同步失败"
}
diff --git a/frontend/src/components/common-header/header.tsx b/frontend/src/components/common-header/header.tsx
index ab633d6..e68f82e 100644
--- a/frontend/src/components/common-header/header.tsx
+++ b/frontend/src/components/common-header/header.tsx
@@ -44,7 +44,7 @@ export function Header(props: HeaderProps) {
<span styleName="common-header-icon">{props.icon}</span>
<span styleName="common-header-name">{props.title}</span>
</div>
- <div styleName="common-header-refresh">
+ {/* <div styleName="common-header-refresh">
<SyncOutlined
spin={loading}
onClick={() => {
@@ -52,7 +52,7 @@ export function Header(props: HeaderProps) {
setLoading(true);
}}
/>
- </div>
+ </div> */}
</div>
);
}
diff --git a/frontend/src/routes/space/access-cluster/access-cluster.tsx b/frontend/src/routes/space/access-cluster/access-cluster.tsx
index 2cec6c6..e8854c0 100644
--- a/frontend/src/routes/space/access-cluster/access-cluster.tsx
+++ b/frontend/src/routes/space/access-cluster/access-cluster.tsx
@@ -18,7 +18,6 @@
import ProCard from '@ant-design/pro-card';
import { Button, message, Row, Space, Steps } from 'antd';
import React, { useEffect, useState } from 'react';
-import { pathToRegexp } from 'path-to-regexp';
import { NewSpaceInfoContext } from '@src/common/common.context';
import { useForm } from 'antd/lib/form/Form';
import { AccessClusterStepsEnum } from './access-cluster.data';
@@ -120,11 +119,13 @@ export function AccessCluster() {
sshUser: value.sshUser,
};
params.installInfo = value.installInfo;
+ params.agentPort = value.agentPort ? parseInt(value.agentPort) : value.agentPort;
isParamsValid =
checkParam(params.authInfo.sshUser, '请填写SSH用户') &&
checkParam(params.authInfo.sshPort, '请填写SSH端口') &&
checkParam(params.authInfo.sshKey, '请填写SSH私钥') &&
- checkParam(params.installInfo, '请填写安装路径');
+ checkParam(params.installInfo, '请填写安装路径') &&
+ checkParam(params.agentPort, '请填写Agent启动端口');
}
if (!isParamsValid) return;
setLoading(true);
diff --git a/frontend/src/routes/space/access-cluster/steps/managed-options/index.module.less b/frontend/src/routes/space/access-cluster/steps/managed-options/index.module.less
new file mode 100644
index 0000000..432ccec
--- /dev/null
+++ b/frontend/src/routes/space/access-cluster/steps/managed-options/index.module.less
@@ -0,0 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+.input {
+ width: 400px;
+}
diff --git a/frontend/src/routes/space/access-cluster/steps/managed-options/managed-options.tsx b/frontend/src/routes/space/access-cluster/steps/managed-options/managed-options.tsx
index 50ade76..879dac1 100644
--- a/frontend/src/routes/space/access-cluster/steps/managed-options/managed-options.tsx
+++ b/frontend/src/routes/space/access-cluster/steps/managed-options/managed-options.tsx
@@ -20,11 +20,12 @@ import React, { useContext, useEffect } from 'react';
import ProCard from '@ant-design/pro-card';
import { NewSpaceInfoContext } from '@src/common/common.context';
import TextArea from 'antd/lib/input/TextArea';
+import styles from './index.module.less';
export function ManagedOptions(props: any) {
const { form, reqInfo } = useContext(NewSpaceInfoContext);
useEffect(() => {
- form.setFieldsValue({...reqInfo.authInfo});
+ form.setFieldsValue({ ...reqInfo.authInfo });
}, [reqInfo.cluster_id]);
return (
<ProCard title={<h2>托管选项</h2>} headerBordered>
@@ -62,15 +63,20 @@ export function ManagedOptions(props: any) {
<Form
form={form}
name="basic"
- labelCol={{ span: 2 }}
- wrapperCol={{ span: 10 }}
initialValues={{
installInfo: reqInfo.installInfo,
}}
autoComplete="off"
>
<Form.Item label="安装路径" name="installInfo" rules={[{ required: true, message: '请输入安装路径' }]}>
- <Input />
+ <Input className={styles.input} />
+ </Form.Item>
+ <Form.Item
+ label="Agent启动端口"
+ name="agentPort"
+ rules={[{ required: true, message: '请输入Agent启动端口' }]}
+ >
+ <Input className={styles.input} />
</Form.Item>
</Form>
</ProCard>
diff --git a/frontend/src/routes/space/new-cluster/new-cluster.tsx b/frontend/src/routes/space/new-cluster/new-cluster.tsx
index 6654991..a8894f2 100644
--- a/frontend/src/routes/space/new-cluster/new-cluster.tsx
+++ b/frontend/src/routes/space/new-cluster/new-cluster.tsx
@@ -115,8 +115,11 @@ export function NewCluster() {
if (value && step === NewClusterStepsEnum['install-options']) {
params.installInfo = value.installDir;
params.packageInfo = value.packageUrl;
+ params.agentPort = value.agentPort ? parseInt(value.agentPort) : value.agentPort;
isParamsValid =
- checkParam(params.installInfo, '请填写代码包路径') && checkParam(params.packageInfo, '请填写安装路径');
+ checkParam(params.installInfo, '请填写代码包路径') &&
+ checkParam(params.packageInfo, '请填写安装路径') &&
+ checkParam(params.agentPort, '请填写Agent启动端口');
}
if (value && step === NewClusterStepsEnum['cluster-plan']) {
params.nodeConfig = value.nodeConfig;
diff --git a/frontend/src/routes/space/new-cluster/steps/install-options/index.module.less b/frontend/src/routes/space/new-cluster/steps/install-options/index.module.less
new file mode 100644
index 0000000..432ccec
--- /dev/null
+++ b/frontend/src/routes/space/new-cluster/steps/install-options/index.module.less
@@ -0,0 +1,20 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements. See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership. The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+.input {
+ width: 400px;
+}
diff --git a/frontend/src/routes/space/new-cluster/steps/install-options/install-options.tsx b/frontend/src/routes/space/new-cluster/steps/install-options/install-options.tsx
index 962b1a8..f27578d 100644
--- a/frontend/src/routes/space/new-cluster/steps/install-options/install-options.tsx
+++ b/frontend/src/routes/space/new-cluster/steps/install-options/install-options.tsx
@@ -19,9 +19,10 @@ import { Form, Input, PageHeader } from 'antd';
import React, { useContext } from 'react';
import ProCard from '@ant-design/pro-card';
import { NewSpaceInfoContext } from '@src/common/common.context';
+import styles from './index.module.less';
export function InstallOptions(props: any) {
- const {form} = useContext(NewSpaceInfoContext);
+ const { form } = useContext(NewSpaceInfoContext);
return (
<ProCard title={<h2>安装选项</h2>} headerBordered>
<PageHeader className="site-page-header" title="获取安装包" style={{ paddingLeft: 0 }} />
@@ -31,30 +32,25 @@ export function InstallOptions(props: any) {
若Manager节点可访问公网，推荐直接使用预编译安装包地址；若Manager节点不可访问公网，推荐自行搭建http服务提供安装包。
</div>
</p>
- <Form
- form={form}
- name="basic"
- labelCol={{ span: 2 }}
- wrapperCol={{ span: 10 }}
- autoComplete="off"
- >
+ <Form form={form} name="basic" autoComplete="off">
<Form.Item label="代码包路径" name="packageUrl" rules={[{ required: true, message: '请输入安装路径' }]}>
- <Input />
+ <Input className={styles.input} />
</Form.Item>
</Form>
<PageHeader className="site-page-header" title="指定安装路径" style={{ paddingLeft: 0 }} />
<div>
<p>Doris与Doris Manager Agent将安装至该目录下。请确保该目录为Doris及相关组件专用。</p>
</div>
- <Form
- form={form}
- name="basic"
- labelCol={{ span: 2 }}
- wrapperCol={{ span: 10 }}
- autoComplete="off"
- >
+ <Form form={form} name="basic" autoComplete="off">
<Form.Item label="安装路径" name="installDir" rules={[{ required: true, message: '请输入安装路径' }]}>
- <Input />
+ <Input className={styles.input} />
+ </Form.Item>
+ <Form.Item
+ label="Agent启动端口"
+ name="agentPort"
+ rules={[{ required: true, message: '请输入Agent启动端口' }]}
+ >
+ <Input className={styles.input} />
</Form.Item>
</Form>
</ProCard>
diff --git a/frontend/src/routes/space/space.interface.ts b/frontend/src/routes/space/space.interface.ts
index fad39f7..c96c54f 100644
--- a/frontend/src/routes/space/space.interface.ts
+++ b/frontend/src/routes/space/space.interface.ts
@@ -40,12 +40,11 @@ export interface ISpaceParam {
spaceAdminUsers: number[];
}
-
export interface ISpaceUser {
name: string;
email: string;
id: number;
- is_active: boolean
+ is_active: boolean;
}
export type IRequiredMark = boolean | 'optional';
@@ -88,4 +87,5 @@ export interface ClusterAccessParams {
clusterAccessInfo?: ClusterAccessInfo;
installInfo?: string;
spaceInfo?: SpaceInfo;
-}
\ No newline at end of file
+ agentPort?: number;
+}
diff --git a/frontend/src/routes/tree/index.tsx b/frontend/src/routes/tree/index.tsx
index dd986bb..5fdb4e5 100644
--- a/frontend/src/routes/tree/index.tsx
+++ b/frontend/src/routes/tree/index.tsx
@@ -19,22 +19,28 @@
import { useState, useEffect } from 'react';
import { Tree, message } from 'antd';
-import { TableOutlined, HddOutlined, HomeOutlined } from '@ant-design/icons';
+import { TableOutlined, HddOutlined, HomeOutlined, SyncOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
import { TreeAPI } from './tree.api';
import { DataNode } from './tree.interface';
import { updateTreeData } from './tree.service';
import { ContentRouteKeyEnum } from './tree.data';
-import styles from './tree.module.less';
import EventEmitter from '@src/utils/event-emitter';
-import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router';
+import { HeaderAPI } from '@src/components/common-header/header.api';
+import styles from './tree.module.less';
+import { delay } from '@src/utils/utils';
+import { isSuccess } from '@src/utils/http';
+
+// import { LoadingWrapper } from '@src/components/loadingwrapper/loadingwrapper';
const initTreeDate: DataNode[] = [];
export function MetaBaseTree() {
const [treeData, setTreeData] = useState(initTreeDate);
const [loading, setLoading] = useState(true);
const { t } = useTranslation();
const navigate = useNavigate();
+ const [syncLoading, setSyncLoading] = useState(false);
useEffect(() => {
initTreeData();
EventEmitter.on('refreshData', initTreeData);
@@ -47,7 +53,7 @@ export function MetaBaseTree() {
const num = Math.random();
const database = res.data;
const treeData: Array<DataNode> = [];
- database.forEach((item, index) => {
+ database.forEach(item => {
treeData.push({
title: `${item.name}`,
key: `1¥${num}¥name¥${item.id}¥${item.name}`,
@@ -116,11 +122,29 @@ export function MetaBaseTree() {
function goHome() {
navigate(`/meta`);
}
+
+ function syncData() {
+ setSyncLoading(true);
+ Promise.all([delay(500), HeaderAPI.refreshData()])
+ .then(res => {
+ if (isSuccess(res[1])) {
+ message.success(t`Sync successfully, please refresh the page`);
+ return;
+ }
+ message.error(res[1].msg);
+ })
+ .catch(() => {
+ message.error(t`Sync Failed`);
+ })
+ .finally(() => setSyncLoading(false));
+ }
+
return (
<div className={styles['palo-tree-container']}>
<h2 className={styles['palo-tree-title']}>
<HomeOutlined onClick={goHome} />
- {t`DataTree`}
+ <span>{t`DataTree`}</span>
+ <SyncOutlined spin={syncLoading} style={{ color: '#1890ff', padding: 0 }} onClick={syncData} />
</h2>
<div className={styles['palo-tree-wrapper']}>
<Tree
@@ -128,7 +152,7 @@ export function MetaBaseTree() {
loadData={onLoadData}
treeData={treeData}
className={styles['palo-side-tree']}
- onSelect={(selectedKeys, info) => handleTreeSelect(selectedKeys, info)}
+ onSelect={selectedKeys => handleTreeSelect(selectedKeys)}
/>
</div>
</div>
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index 5ff0322..e411301 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -75,4 +75,8 @@ export function showName(name: string): string {
return '空间成员';
}
return name;
-}
\ No newline at end of file
+}
+
+export function delay(ms: number) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@doris.apache.org
For additional commands, e-mail: commits-help@doris.apache.org