Skip to content

Commit

Permalink
Merge pull request #14 from KubeLilin/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@Artanis-c
Artanis-c authored Dec 16, 2022
2 parents 4525570 + 9f17502 commit cf682af
Show file tree
Hide file tree
Showing 27 changed files with 1,270 additions and 284 deletions.
24 changes: 24 additions & 0 deletions src/src/pages/applications/advancedDeployment/devlopment_data.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
export type DeploymentStep={
id?:number,
appId?:number,
name?:string,
nickname:string,
level:string,
clusterId:number,
namespaceId:number,
serviceEnable:boolean,
serviceAway:string,
servicePort:number,
replicas:number,
requestCpu:number,
requestMemory:number,
limitCpu:number,
limitMemory:number,
clusterSelect:any
}


export type DeploymentLevel = {
code: string,
name: string,
}
160 changes: 160 additions & 0 deletions src/src/pages/applications/advancedDeployment/forms/probe/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import { CloseCircleTwoTone, SmileOutlined } from '@ant-design/icons';
import ProForm, {
DrawerForm, ModalForm, ProFormGroup, ProFormInstance,
ProFormSwitch, ProFormTextArea, ProFormSelect, ProFormText
} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { Checkbox, Divider, InputNumber, Switch, Input, notification } from 'antd';
import Form from 'antd/lib/form';
import React, { SetStateAction, useState, Dispatch, useEffect, useRef, } from 'react';
import { ProbeFormData } from './probe_data';
import { saveProbe } from './service';

const { TextArea } = Input;


export interface Props {
deploymentId: number,
tableRef: any,
visibleFunc: Function
}

const ProbeForm: React.FC<Props> = (props: Props) => {
const [lifecycleChecked, lifecycleCheckedHandler] = useState<boolean>(false);
const [livenessChecked, livenessCheckedHandler] = useState<boolean>(false);
const [readnessChecked, readnessCheckedHandler] = useState<boolean>(false);

const actionRef = useRef<ProFormInstance>();
const [form] = Form.useForm();
return (
<ProForm<ProbeFormData> title="生命周期设置"
submitter={{ resetButtonProps: {}, searchConfig: { resetText: '取消', submitText: '提交' } }}
onReset={() => { props.visibleFunc(false) }}
form={form} formRef={actionRef}
onFinish={async (formData) => {
console.log(props);
formData.dpId = props.deploymentId;
console.log("保存probe");
let res = await saveProbe(formData);
console.log(res);
if (res.success) {
notification.open({
message: res.message,
icon: <SmileOutlined style={{ color: '#108ee9' }} />,
});
return true
} else {
notification.open({
message: res.message,
icon: <CloseCircleTwoTone />,
});
return false;
}
}} >
<ProCard title="生命周期管理" bordered headerBordered
style={{ marginBlockEnd: 16, maxWidth: '100%', }} >
<ProFormGroup label='滚动更新策略' >
<ProForm.Item name='maxSurge' initialValue={30} label='maxSurge(额外Pod)' required>
<InputNumber min={1} max={100} value={25}></InputNumber> %
</ProForm.Item>
<ProForm.Item name='maxUnavailable' initialValue={30} label='maxUnavailable(最大不可用)' required >
<InputNumber min={1} max={100} value={25}></InputNumber> %
</ProForm.Item>
<ProForm.Item name='terminationGracePeriodSeconds' initialValue={30} label='延时终止(秒)' required={lifecycleChecked}>
<InputNumber min={0}></InputNumber>
</ProForm.Item>
</ProFormGroup>

<ProFormGroup label='生命周期' >
<ProFormSwitch name="enableLifecycle" width="lg" fieldProps={{
onChange: (checked: boolean) => {
lifecycleCheckedHandler(checked)
}
}} />
<div style={{ display: lifecycleChecked ? 'block' : 'none' }}>

<ProForm.Item label='结束前执行:' name='lifecyclePreStop' >
<TextArea rows={4} cols={60} placeholder="注意每个命令单独一行，每行的行首和行尾不要加空格
示例：
/bin/sh
-c
sleep 30" />
</ProForm.Item>
<ProForm.Item label='启动后执行:' name='lifecyclePreStart' >
<TextArea rows={4} cols={60} placeholder="注意每个命令单独一行，每行的行首和行尾不要加空格
示例：
/bin/sh
-c
sleep 30" />
</ProForm.Item>
</div>
</ProFormGroup>

<Divider />

<ProFormGroup label='Liveness探针配置'>
<ProForm.Item name='enableLiveness' >
<ProFormSwitch width="lg" fieldProps={{
onChange: (checked: boolean) => {
livenessCheckedHandler(checked)
}
}} />
</ProForm.Item>
<div style={{ display: livenessChecked ? 'block' : 'none' }}>
<ProFormSelect name='livenessReqScheme' label='检查方法' initialValue="HTTP" options={[
{ label: 'HTTP请求检查', value: 'HTTP' }]} required={livenessChecked}>
</ProFormSelect>
<ProForm.Item name='livenessPort' label='检查端口' initialValue={80} required={livenessChecked}>
<InputNumber min={0} max={30000}></InputNumber>
</ProForm.Item>
<ProForm.Item name='livenessUrl' label='检查路径' initialValue={'/'} required={livenessChecked}>
<ProFormText width="lg" ></ProFormText>
</ProForm.Item>
<ProForm.Item name='livenessInitialDelaySeconds' initialValue={4} label='启动延时(秒)' required={livenessChecked}>
<InputNumber min={0}></InputNumber>
</ProForm.Item>
<ProForm.Item name='livenessTimeoutSeconds' initialValue={3} label='响应越时(秒)' required={livenessChecked}>
<InputNumber min={0}></InputNumber>
</ProForm.Item>
<ProForm.Item name='livenessPeriodSeconds' initialValue={20} label='间隔时间(秒)' required={livenessChecked}>
<InputNumber min={0}></InputNumber>
</ProForm.Item>

</div>
</ProFormGroup>
<Divider />
<ProFormGroup label='Readiness探针配置'>
<ProForm.Item name='enableReadiness' >
<ProFormSwitch width="lg" fieldProps={{
onChange: (checked: boolean) => {
readnessCheckedHandler(checked)
}
}} />
</ProForm.Item>
<div style={{ display: readnessChecked ? 'block' : 'none' }}>
<ProFormSelect name='readinessReqScheme' label='检查方法' initialValue="HTTP" options={[
{ label: 'HTTP请求检查', value: 'HTTP' }]} required={readnessChecked}>
</ProFormSelect>
<ProForm.Item name='readinessPort' label='检查端口' initialValue={80} required={readnessChecked}>
<InputNumber min={0} max={30000}></InputNumber>
</ProForm.Item>
<ProForm.Item name='readinessUrl' label='检查路径' initialValue={'/'} required={readnessChecked}>
<ProFormText width="lg"></ProFormText>
</ProForm.Item>
<ProForm.Item name='readinessInitialDelaySeconds' initialValue={4} label='启动延时(秒)' required={readnessChecked}>
<InputNumber min={0}></InputNumber>
</ProForm.Item>
<ProForm.Item name='readinessTimeoutSeconds' initialValue={3} label='响应越时(秒)' required={readnessChecked}>
<InputNumber min={0}></InputNumber>
</ProForm.Item>
<ProForm.Item name='readinessPeriodSeconds' initialValue={20} label='间隔时间(秒)' required={readnessChecked}>
<InputNumber min={0} ></InputNumber>
</ProForm.Item>

</div>
</ProFormGroup>
</ProCard>
</ProForm>)
}

export default ProbeForm;
47 changes: 47 additions & 0 deletions src/src/pages/applications/advancedDeployment/forms/probe/probe_data.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
export type ProbeData = {
dpId: number,
enableReadiness: boolean,
enableLiveness: boolean
readiness: ProbeItem,
liveness: ProbeItem
}

export type ProbeItem = {
type: string,
port: number,
url: string,
reqScheme: string
}

export type ProbeFormData = {
dpId: number,

maxUnavailable:number,
maxSurge:number,


enableLifecycle: boolean,
enableReadiness: boolean,
enableLiveness: boolean,

terminationGracePeriodSeconds: number, // 定义在 deployment资源中
lifecyclePreStop: string, // 定义在容器中
lifecyclePreStart: string, //

readinessType: string, // 定义在容器中
readinessPort: number,
readinessUrl: string,
readinessReqScheme: string
readinessInitialDelaySeconds: number,
readinessTimeoutSeconds: number,
readinessPeriodSeconds: number

livenessType: string, //定义在容器中
livenessPort: number,
livenessUrl: string,
livenessReqScheme: string,
livenessInitialDelaySeconds: number,
livenessTimeoutSeconds: number,
livenessPeriodSeconds: number

}
14 changes: 14 additions & 0 deletions src/src/pages/applications/advancedDeployment/forms/probe/service.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { ApiResponse, PageResponse } from "@/services/public/service";
import { request } from "umi";
import { ProbeFormData } from "./probe_data";

export async function saveProbe(params: ProbeFormData) {
let req = await request<ApiResponse<string>>('/v1/deployment/probe', {
method: 'POST',
data: params,
headers: {
'Content-Type': 'application/json',
},
})
return req;
}
67 changes: 67 additions & 0 deletions src/src/pages/applications/advancedDeployment/forms/route/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { SmileOutlined } from '@ant-design/icons';
import ProForm, {
DrawerForm, ModalForm, ProFormGroup, ProFormInstance,
ProFormSwitch, ProFormTextArea, ProFormSelect, ProFormText,ProFormRadio
} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { Checkbox, Divider, InputNumber, Switch, Input, notification } from 'antd';
import Form from 'antd/lib/form';
import React, { SetStateAction, useState, Dispatch, useEffect, useRef, } from 'react';


export interface RouteFormProps {
deploymentId: number,
tableRef: any,
visibleFunc:Function
}

const RouteForm: React.FC<RouteFormProps> = (props: RouteFormProps) => {
const [noRewrite, setNoRewrite] = useState(false)
const [repoFormRef] = Form.useForm();

return (
<ProForm submitter={{ resetButtonProps:{ },searchConfig:{ resetText:'取消',submitText:'提交'} }}
onReset={()=>{ props.visibleFunc(false) }}>
<ProCard>
<Divider orientation="left" orientationMargin="0">基本信息</Divider>
<ProFormText name='id' hidden></ProFormText>
<ProFormText name='name' label='路由名称' disabled initialValue={'default:route:deploy:'+props.deploymentId} placeholder="请输入路由名称" rules={[{ required: true, message: "请输入路由名称" }]}></ProFormText>
{/* <ProFormText name='desc' label='描述' placeholder="请输描述"></ProFormText>
<ProFormText name='liveness' label='存活探针' placeholder="请输入存活探针" ></ProFormText> */}

<Divider orientation="left" orientationMargin="0">负载信息</Divider>

<ProFormSelect name='loadbalance' label="负载均衡算法" initialValue={'roundrobin'} options={[ {label:'带权轮询(Round Robin)',value:'roundrobin'},{label:'一致性哈希(CHash)',value:'chash'},{label:'指数加权移动平均法(EWMA)',value:'ewma'},{label:'最小连接数(least_conn)',value:'least_conn'} ] }
placeholder="请选择负载均衡算法" rules={[{ required: true, message: "请选择负载均衡算法" }]}></ProFormSelect>

<ProFormText name='deploymentId' hidden initialValue={props.deploymentId} label="部署ID" placeholder="请选择部署" disabled ></ProFormText>

<Divider orientation="left" orientationMargin="0">匹配条件</Divider>
<ProFormText name='host' label='域名' placeholder="请输入域名,路由匹配的域名列表。支持泛域名，如：*.test.com" rules={[{ required: true, message: "请输入域名" }]}></ProFormText>
<ProFormText name='uri' label='路径' placeholder="请输入路径,HTTP 请求路径，如 /foo/index.html，支持请求路径前缀 /foo/*。/* 代表所有路径" rules={[{ required: true, message: "请输入路径" }]}></ProFormText>

<Divider orientation="left" orientationMargin="0">请求改写</Divider>
<ProFormRadio.Group name="rewrite" label="路径改写" initialValue={0} rules={[{ required: true, message: "请输入路径改写" }]}
options={[ { label: '保持原样', value: 0 }, { label: '正则改写', value: 1 }, ]}
fieldProps={{onChange:(e)=>{
setNoRewrite(Boolean( e.target.value))
if(e.target.value==0) {
repoFormRef.setFieldsValue({
uri:`/*`,
regexUri: `` ,
regexTmp: "",
})
}
}} } />
<div style={{ display: noRewrite?'block':'none' }}>
<ProFormText name='regexUri' label='匹配正则表达式' placeholder="请输入匹配正则表达式"></ProFormText>
<ProFormText name='regexTmp' label='转发路径模版' placeholder="请输入转发路径模版" ></ProFormText>
</div>
</ProCard>
</ProForm>
)
}



export default RouteForm;
Loading

0 comments on commit cf682af

Please sign in to comment.