Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature][scaleph-engine-doris] add doris instance detail web #653

Merged
merged 3 commits into from
Dec 5, 2023
Merged

[Feature][scaleph-engine-doris] add doris instance detail web #653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
24a4a68
feature: add doris instance detail web
kalencaya Dec 4, 2023
4108068
feature: add doris instance detail web
kalencaya Dec 4, 2023
8d5528c
feature: add doris instance detail web
kalencaya Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions scaleph-dao/src/main/java/cn/sliew/scaleph/dao/entity/master/ws/WsDorisTemplate.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,6 @@ public class WsDorisTemplate extends BaseDO {
@TableField("template_id")
private String templateId;

@TableField("namespace")
private String namespace;

@TableField("`admin`")
private String admin;

Expand Down
3 changes: 1 addition & 2 deletions ...ph-dao/src/main/resources/cn/sliew/scaleph/dao/mapper/master/ws/WsDorisTemplateMapper.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
<result column="project_id" property="projectId" />
<result column="name" property="name" />
<result column="template_id" property="templateId" />
<result column="namespace" property="namespace" />
<result column="admin" property="admin" />
<result column="fe_spec" property="feSpec" />
<result column="be_spec" property="beSpec" />
Expand All @@ -45,7 +44,7 @@
create_time,
editor,
update_time,
project_id, `name`, template_id, namespace, `admin`, fe_spec, be_spec, cn_spec, broker_spec, remark
project_id, `name`, template_id, `admin`, fe_spec, be_spec, cn_spec, broker_spec, remark
</sql>

</mapper>
2 changes: 0 additions & 2 deletions ...ine-doris/src/main/java/cn/sliew/scaleph/engine/doris/service/dto/WsDorisTemplateDTO.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ public class WsDorisTemplateDTO extends BaseDTO {

private String templateId;

private String namespace;

@Schema(description = "admin user")
private AdminUser admin;

Expand Down
4 changes: 0 additions & 4 deletions ...is/src/main/java/cn/sliew/scaleph/engine/doris/service/param/WsDorisTemplateAddParam.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,6 @@ public class WsDorisTemplateAddParam {
@Schema(description = "name")
private String name;

@NotBlank
@Schema(description = "namespace")
private String namespace;

@NotNull
@Schema(description = "admin user")
private AdminUser admin;
Expand Down
4 changes: 0 additions & 4 deletions ...src/main/java/cn/sliew/scaleph/engine/doris/service/param/WsDorisTemplateUpdateParam.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,6 @@ public class WsDorisTemplateUpdateParam {
@Schema(description = "name")
private String name;

@NotBlank
@Schema(description = "namespace")
private String namespace;

@NotNull
@Schema(description = "admin user")
private AdminUser admin;
Expand Down
2 changes: 0 additions & 2 deletions .../java/cn/sliew/scaleph/engine/doris/service/resource/template/DorisTemplateConverter.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ public DorisTemplate convertTo(WsDorisTemplateDTO source) {
ObjectMetaBuilder builder = new ObjectMetaBuilder(true);
String name = StringUtils.hasText(source.getTemplateId()) ? source.getTemplateId() : source.getName();
builder.withName(name);
builder.withNamespace(source.getNamespace());
builder.withLabels(Map.of(ResourceLabels.SCALEPH_LABEL_NAME, source.getName()));
template.setMetadata(builder.build());
DorisClusterSpec spec = new DorisClusterSpec();
Expand All @@ -59,7 +58,6 @@ public WsDorisTemplateDTO convertFrom(DorisTemplate target) {
}
dto.setName(name);
dto.setTemplateId(target.getMetadata().getName());
dto.setNamespace(target.getMetadata().getNamespace());

DorisClusterSpec spec = target.getSpec();
dto.setFeSpec(spec.getFeSpec());
Expand Down
7 changes: 7 additions & 0 deletions scaleph-ui-react/config/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,13 @@ export default [
pCode: PRIVILEGE_CODE.workspaceClusterConfigShow,
access: 'normalRouteFilter'
},
{
path: '/workspace/doris/instance/detail',
exact: true,
component: './Project/Workspace/Doris/Instance/Detail',
pCode: PRIVILEGE_CODE.workspaceClusterConfigShow,
access: 'normalRouteFilter'
},
]
},
]
Expand Down
1 change: 0 additions & 1 deletion scaleph-ui-react/src/locales/zh-CN/pages/project.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -922,7 +922,6 @@ export default {

'pages.project.doris.template': 'Template',
'pages.project.doris.template.name': '名称',
'pages.project.doris.template.namespace': '命名空间',
'pages.project.doris.template.define': '模板定义',
'pages.project.doris.template.steps.base': '基础信息',
'pages.project.doris.template.steps.component': '集群组件',
Expand Down
186 changes: 186 additions & 0 deletions scaleph-ui-react/src/pages/Project/Workspace/Doris/Instance/Detail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
import {useIntl, useLocation} from "umi";
import React, {useEffect, useRef, useState} from "react";
import {WsDorisInstance} from "@/services/project/typings";
import {PageContainer, ProCard, StatisticCard} from "@ant-design/pro-components";
import {Divider, Space, Statistic} from "antd";
import RcResizeObserver from 'rc-resize-observer';
import Editor, {Monaco, useMonaco} from "@monaco-editor/react";
import {WsDorisTemplateService} from "@/services/project/WsDorisTemplateService";
import YAML from "yaml";
import {WsDorisInstanceService} from "@/services/project/WsDorisInstanceService";

const DorisInstanceDetailWeb: React.FC = () => {
const intl = useIntl();
const data = useLocation().state as WsDorisInstance
const editorRef = useRef(null);
const monaco = useMonaco();

const [yaml, setYaml] = useState<string>(null);
const [responsive, setResponsive] = useState(false);

useEffect(() => {
monaco?.languages.typescript.javascriptDefaults.setEagerModelSync(true);
}, [monaco]);

const handleEditorDidMount = (editor, monaco: Monaco) => {
editorRef.current = editor;
}

useEffect(() => {
const yamlData = {...data}
yamlData.deployed = undefined
WsDorisInstanceService.asYaml(yamlData).then((response) => {
if (response.success) {
setYaml(YAML.stringify(response.data))
}
});
}, []);

return (
<PageContainer title={intl.formatMessage({id: 'pages.project.doris.template.detail'})}>
<RcResizeObserver
key="resize-observer"
onResize={(offset) => {
setResponsive(offset.width < 596);
}}
>
<ProCard.Group title={intl.formatMessage({id: 'pages.project.doris.template.detail.component'})}
direction={responsive ? 'column' : 'row'}>
<ProCard bordered hoverable>
<StatisticCard title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.fe'})}
statistic={{
value: data.feSpec?.replicas,
prefix: intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.replicas'}) + ' x',
description: (
<Space>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.requests.cpu'})}
value={data.feSpec?.requests?.cpu}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.requests.memory'})}
value={data.feSpec?.requests?.memory}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.limits.cpu'})}
value={data.feSpec?.limits?.cpu}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.limits.memory'})}
value={data.feSpec?.limits?.memory}/>
</Space>
),
}}
footer={
<div>{intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.image'}) + ": " + data.feSpec?.image ? data.feSpec?.image : '-'}</div>
}
/>
</ProCard>
<Divider type={responsive ? 'horizontal' : 'vertical'}/>
<ProCard bordered hoverable>
<StatisticCard title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.be'})}
statistic={{
value: data.beSpec?.replicas,
prefix: intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.replicas'}) + ' x',
description: (
<Space>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.requests.cpu'})}
value={data.beSpec?.requests?.cpu}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.requests.memory'})}
value={data.beSpec?.requests?.memory}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.limits.cpu'})}
value={data.beSpec?.limits?.cpu}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.limits.memory'})}
value={data.beSpec?.limits?.memory}/>
</Space>
),
}}
footer={
<div>{intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.image'}) + ": " + data.beSpec?.image ? data.beSpec?.image : '-'}</div>
}
/>
</ProCard>
<Divider type={responsive ? 'horizontal' : 'vertical'}/>
<ProCard bordered hoverable>
<StatisticCard title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.cn'})}
statistic={{
value: data.cnSpec?.replicas,
prefix: intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.replicas'}) + ' x',
description: (
<Space>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.requests.cpu'})}
value={data.cnSpec?.requests?.cpu}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.requests.memory'})}
value={data.cnSpec?.requests?.memory}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.limits.cpu'})}
value={data.cnSpec?.limits?.cpu}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.limits.memory'})}
value={data.cnSpec?.limits?.memory}/>
</Space>
),
}}
footer={
<div>{intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.image'}) + ": " + data.cnSpec?.image ? data.cnSpec?.image : '-'}</div>
}
/>
</ProCard>
<Divider type={responsive ? 'horizontal' : 'vertical'}/>
<ProCard bordered hoverable>
<StatisticCard title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.broker'})}
statistic={{
value: data.brokerSpec?.replicas,
prefix: intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.replicas'}) + ' x',
description: (
<Space>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.requests.cpu'})}
value={data.brokerSpec?.requests?.cpu}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.requests.memory'})}
value={data.brokerSpec?.requests?.memory}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.limits.cpu'})}
value={data.brokerSpec?.limits?.cpu}/>
<Statistic
title={intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.limits.memory'})}
value={data.brokerSpec?.limits?.memory}/>
</Space>
),
}}
footer={
<div>{intl.formatMessage({id: 'pages.project.doris.template.steps.component.base.image'}) + ": " + data.brokerSpec?.image ? data.brokerSpec?.image : '-'}</div>
}
/>
</ProCard>
</ProCard.Group>
<Divider type={'horizontal'}/>
<ProCard.Group title="YAML" direction={responsive ? 'column' : 'row'}>
<ProCard bordered>
<Editor
width="730"
height="600px"
language="yaml"
theme="vs-white"
value={yaml}
options={{
selectOnLineNumbers: true,
readOnly: true,
minimap: {
enabled: false
}
}}
onMount={handleEditorDidMount}
/>
</ProCard>
</ProCard.Group>
</RcResizeObserver>
</PageContainer>
);
}

export default DorisInstanceDetailWeb;
83 changes: 83 additions & 0 deletions scaleph-ui-react/src/pages/Project/Workspace/Doris/Instance/DorisInstanceSimpleForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import {useIntl} from "umi";
import React from "react";
import {Form, message, Modal} from "antd";
import {ProForm, ProFormDigit, ProFormText, ProFormTextArea} from "@ant-design/pro-components";
import {ModalFormProps} from '@/app.d';
import {WsDorisInstance} from "@/services/project/typings";
import {WORKSPACE_CONF} from "@/constant";
import {WsDorisInstanceService} from "@/services/project/WsDorisInstanceService";

const DorisInstanceSimpleForm: React.FC<ModalFormProps<WsDorisInstance>> = ({
data,
visible,
onVisibleChange,
onCancel
}) => {
const intl = useIntl();
const [form] = Form.useForm();
const projectId = localStorage.getItem(WORKSPACE_CONF.projectId);

return (
<Modal
open={visible}
title={
data.id
? intl.formatMessage({id: 'app.common.operate.edit.label'}) +
intl.formatMessage({id: 'pages.project.doris.template'})
: intl.formatMessage({id: 'app.common.operate.new.label'}) +
intl.formatMessage({id: 'pages.project.doris.template'})
}
width={580}
destroyOnClose={true}
onCancel={onCancel}
onOk={() => {
form.validateFields().then((values) => {
data.id
? WsDorisInstanceService.update({...values}).then((response) => {
if (response.success) {
message.success(intl.formatMessage({id: 'app.common.operate.edit.success'}));
if (onVisibleChange) {
onVisibleChange(false);
}
}
})
: WsDorisInstanceService.add({...values, projectId: projectId}).then((response) => {
if (response.success) {
message.success(intl.formatMessage({id: 'app.common.operate.new.success'}));
if (onVisibleChange) {
onVisibleChange(false);
}
}
});
});
}}
>
<ProForm
form={form}
layout={"horizontal"}
submitter={false}
labelCol={{span: 6}}
wrapperCol={{span: 16}}
initialValues={{
id: data.id,
name: data.name,
namespace: data.namespace,
remark: data.remark
}}
>
<ProFormDigit name={"id"} hidden/>
<ProFormText
name={"name"}
label={intl.formatMessage({id: 'pages.project.doris.instance.name'})}
rules={[{required: true}]}
/>
<ProFormTextArea
name={"remark"}
label={intl.formatMessage({id: 'app.common.data.remark'})}
/>
</ProForm>
</Modal>
);
}

export default DorisInstanceSimpleForm;
5 changes: 3 additions & 2 deletions scaleph-ui-react/src/pages/Project/Workspace/Doris/Instance/Steps/BaseStepForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import {ProCard, ProFormDigit, ProFormSelect, ProFormText} from "@ant-design/pro-components";
import {ProCard, ProFormDigit, ProFormSelect, ProFormText, ProFormTextArea} from "@ant-design/pro-components";
import {useIntl} from "umi";
import {ClusterCredentialListParam} from "@/services/resource/typings";
import {ClusterCredentialService} from "@/services/resource/clusterCredential.service";
Expand Down Expand Up @@ -39,6 +39,7 @@ const DorisInstanceBase: React.FC = () => {
name={"namespace"}
label={intl.formatMessage({id: 'pages.project.doris.instance.namespace'})}
rules={[{required: true}]}
initialValue={"doris"}
/>
<ProFormSelect
name="templateId"
Expand All @@ -57,7 +58,7 @@ const DorisInstanceBase: React.FC = () => {
})
})}
/>
<ProFormText
<ProFormTextArea
name={"remark"}
label={intl.formatMessage({id: 'app.common.data.remark'})}
/>
Expand Down
Loading