mirror of
https://github.com/didi/KnowStreaming.git
synced 2026-01-10 17:12:11 +08:00
kafka-manager 2.0
This commit is contained in:
zengqiao
@@ -0,0 +1,369 @@
|
||||
import * as React from 'react';
|
||||
import { Icon, InputNumber, Select, message, Form, Tooltip } from 'component/antd';
|
||||
import { equalList, funcKeyMap, funcList } from 'constants/strategy';
|
||||
import { IStringMap } from 'types/base-type';
|
||||
import { IRequestParams } from 'types/alarm';
|
||||
import { IFormSelect, IFormItem, FormItemType } from 'component/x-form';
|
||||
import { searchProps } from 'constants/table';
|
||||
|
||||
interface IDynamicProps {
|
||||
form: any;
|
||||
formData?: any;
|
||||
maxLimit?: number;
|
||||
}
|
||||
interface ICRUDItem {
|
||||
id: string;
|
||||
func: string;
|
||||
eopt?: string;
|
||||
threshold?: number;
|
||||
period?: number;
|
||||
count?: number;
|
||||
day?: number;
|
||||
}
|
||||
const commonKeys = ['eopt', 'threshold', 'func'];
|
||||
|
||||
class DynamicSetStrategy extends React.Component<IDynamicProps> {
|
||||
public isDetailPage = window.location.pathname.includes('/alarm-detail'); // 判断是否为详情
|
||||
public crudList = [] as ICRUDItem[];
|
||||
public state = {
|
||||
shouldUpdate: false,
|
||||
};
|
||||
|
||||
public componentDidMount() {
|
||||
if (!this.crudList.length) {
|
||||
const id = `0_`;
|
||||
this.crudList.push({
|
||||
id,
|
||||
func: 'happen',
|
||||
});
|
||||
}
|
||||
this.updateRender();
|
||||
}
|
||||
|
||||
public updateRender() {
|
||||
this.setState({
|
||||
shouldUpdate: !this.state.shouldUpdate,
|
||||
});
|
||||
}
|
||||
|
||||
public resetForm() {
|
||||
const { resetFields } = this.props.form;
|
||||
resetFields();
|
||||
}
|
||||
|
||||
public dealFormParams(monitorRule: IRequestParams) {
|
||||
const initialCrudList = [] as ICRUDItem[];
|
||||
|
||||
if (monitorRule.strategyExpressionList) {
|
||||
const expressionList = monitorRule.strategyExpressionList;
|
||||
expressionList.map((row: any, index) => {
|
||||
const obj = {} as any;
|
||||
for (const key of commonKeys) {
|
||||
obj[key] = row[key];
|
||||
}
|
||||
const otherKeys = funcKeyMap[row.func] as string[];
|
||||
// 除去commonKeys中的key 其他值在提交时全塞到params中 故在编辑详情渲染时再拆回来
|
||||
const parmas = row.params ? row.params.split(',').map((row: string) => +row) : [];
|
||||
otherKeys.forEach((line: string, i: number) => {
|
||||
obj[line] = parmas[i] || 0;
|
||||
});
|
||||
obj.id = `${index}_`;
|
||||
|
||||
initialCrudList.push(obj);
|
||||
});
|
||||
}
|
||||
return initialCrudList;
|
||||
}
|
||||
|
||||
public updateFormValue(monitorRule: IRequestParams) {
|
||||
const { setFieldsValue } = this.props.form;
|
||||
const initialCrudList = this.dealFormParams(monitorRule);
|
||||
if (!initialCrudList.length) return;
|
||||
|
||||
const filledKeys = ['period'].concat(commonKeys);
|
||||
const formKeyMap = {
|
||||
happen: ['count'].concat(filledKeys),
|
||||
ndiff: ['count'].concat(filledKeys),
|
||||
all: [].concat(filledKeys),
|
||||
pdiff: [].concat(filledKeys),
|
||||
sum: [].concat(filledKeys),
|
||||
c_avg_rate_abs: ['day'].concat(filledKeys),
|
||||
} as {
|
||||
[key: string]: string[],
|
||||
};
|
||||
const feildValue = {
|
||||
|
||||
} as any;
|
||||
|
||||
for (const item of initialCrudList) {
|
||||
for (const key of formKeyMap[item.func]) {
|
||||
feildValue[item.id + '-' + key] = (item as any)[key];
|
||||
}
|
||||
}
|
||||
setFieldsValue(feildValue);
|
||||
this.crudList = initialCrudList;
|
||||
this.updateRender();
|
||||
}
|
||||
|
||||
public getFormValidateData() {
|
||||
let value = [] as IStringMap[];
|
||||
const { crudList } = this;
|
||||
|
||||
this.props.form.validateFields((err: Error, values: any) => {
|
||||
if (!err) {
|
||||
let strategyList = [];
|
||||
for (const item of crudList) {
|
||||
const lineValue = {} as IStringMap;
|
||||
const paramsArray = [] as number[];
|
||||
|
||||
// 不在commonKeys里的塞到params
|
||||
for (const key of Object.keys(values)) {
|
||||
if (key.indexOf(item.id) > -1) {
|
||||
const finalKey = key.substring(key.indexOf('-') + 1);
|
||||
if (commonKeys.indexOf(finalKey) < 0) { // 不在commonKeys里的塞到params 奇奇怪怪的接口
|
||||
paramsArray.push(finalKey === 'day' ? values[key] * 24 * 60 * 60 : values[key]); // 按接口单位天的时候需要换算成秒
|
||||
} else { // 在commonKeys里直接赋值
|
||||
lineValue[finalKey] = values[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (lineValue.func === 'happen' && paramsArray.length > 1 && paramsArray[0] < paramsArray[1]) {
|
||||
strategyList = []; // 清空赋值
|
||||
return message.error('周期值应大于次数') ;
|
||||
}
|
||||
|
||||
lineValue.params = paramsArray.join(',');
|
||||
strategyList.push(lineValue);
|
||||
}
|
||||
value = strategyList;
|
||||
}
|
||||
});
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
public remove = (curr: string) => {
|
||||
const { crudList } = this;
|
||||
if (crudList.length <= 1) {
|
||||
return message.info('至少保留一项');
|
||||
}
|
||||
|
||||
const index = crudList.findIndex(item => item.id === curr);
|
||||
|
||||
crudList.splice(index, 1);
|
||||
this.updateRender();
|
||||
}
|
||||
|
||||
public add = () => {
|
||||
const { maxLimit = 5 } = this.props;
|
||||
const { crudList } = this;
|
||||
if (crudList.length >= maxLimit) {
|
||||
return message.info('已达最大数量');
|
||||
}
|
||||
|
||||
const id = `${crudList.length}_`;
|
||||
crudList.push({
|
||||
id,
|
||||
func: 'happen',
|
||||
});
|
||||
this.updateRender();
|
||||
}
|
||||
|
||||
public onFuncTypeChange = (e: string, key: string) => {
|
||||
const { crudList } = this;
|
||||
const index = crudList.findIndex(row => row.id === key);
|
||||
|
||||
if (index > -1) {
|
||||
crudList[index].func = e;
|
||||
}
|
||||
this.updateRender();
|
||||
}
|
||||
|
||||
public getFormItem(item: IFormItem) {
|
||||
switch (item.type) {
|
||||
default:
|
||||
case FormItemType.input:
|
||||
return <InputNumber min={0} key={item.key} {...item.attrs} disabled={this.isDetailPage} />;
|
||||
case FormItemType.select:
|
||||
return (
|
||||
<Select
|
||||
key={item.key}
|
||||
{...item.attrs}
|
||||
disabled={this.isDetailPage}
|
||||
{...searchProps}
|
||||
>
|
||||
{(item as IFormSelect).options && (item as IFormSelect).options.map((v, index) => (
|
||||
<Select.Option
|
||||
key={v.value || v.key || index}
|
||||
value={v.value}
|
||||
>
|
||||
{v.label.length > 15 ? <Tooltip placement="bottomLeft" title={v.label}>
|
||||
{v.label}
|
||||
</Tooltip> : v.label}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public getFuncItem(row: ICRUDItem) {
|
||||
const key = row.id;
|
||||
const funcType = row.func;
|
||||
let element = null;
|
||||
const common = (
|
||||
<>
|
||||
在最近
|
||||
{this.renderFormItem({ type: 'input', key: key + '-period', defaultValue: row.period } as IFormItem)}
|
||||
个周期内
|
||||
</>
|
||||
);
|
||||
const equalItem = {
|
||||
type: 'select',
|
||||
attrs: { className: 'small-size' },
|
||||
defaultValue: row.eopt || '=',
|
||||
options: equalList,
|
||||
key: key + '-eopt',
|
||||
} as IFormSelect;
|
||||
|
||||
switch (funcType) {
|
||||
case 'happen':
|
||||
case 'ndiff':
|
||||
element = (
|
||||
<>
|
||||
{common}
|
||||
{this.renderFormItem({ type: 'input', key: key + '-count', defaultValue: row.count } as IFormItem)}
|
||||
次
|
||||
{this.renderFormItem(equalItem)}
|
||||
{this.renderFormItem({ type: 'input', key: key + '-threshold', defaultValue: row.threshold } as IFormItem)}
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case 'all':
|
||||
case 'diff':
|
||||
case 'max':
|
||||
case 'min':
|
||||
case 'sum':
|
||||
case 'avg':
|
||||
element = (
|
||||
<>
|
||||
{common}
|
||||
{this.renderFormItem(equalItem)}
|
||||
{this.renderFormItem({ type: 'input', key: key + '-threshold', defaultValue: row.threshold } as IFormItem)}
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case 'c_avg_rate_abs':
|
||||
case 'c_avg_rate':
|
||||
element = (
|
||||
<>
|
||||
{common}，平均值相对
|
||||
{this.renderFormItem({ type: 'input', key: key + '-day', defaultValue: row.day } as IFormItem)}
|
||||
天
|
||||
{this.renderFormItem(equalItem)}
|
||||
{this.renderFormItem({ type: 'input', key: key + '-threshold', defaultValue: row.threshold } as IFormItem)}
|
||||
%
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case 'c_avg_abs':
|
||||
case 'c_avg':
|
||||
element = (
|
||||
<>
|
||||
{common}，平均值相对
|
||||
{this.renderFormItem({ type: 'input', key: key + '-day', defaultValue: row.day } as IFormItem)}
|
||||
天
|
||||
{this.renderFormItem(equalItem)}
|
||||
{this.renderFormItem({ type: 'input', key: key + '-threshold', defaultValue: row.threshold } as IFormItem)}
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case 'pdiff':
|
||||
element = (
|
||||
<>
|
||||
{common}
|
||||
{this.renderFormItem(equalItem)}
|
||||
{this.renderFormItem({ type: 'input', key: key + '-threshold', defaultValue: row.threshold } as IFormItem)}
|
||||
%
|
||||
</>
|
||||
);
|
||||
break;
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
public renderFormList(row: ICRUDItem) {
|
||||
const key = row.id;
|
||||
const funcType = row.func;
|
||||
|
||||
return (
|
||||
<div key={key} className="form-list">
|
||||
{this.renderFormItem({
|
||||
type: 'select',
|
||||
defaultValue: funcType,
|
||||
attrs: {
|
||||
onChange: (e: string) => this.onFuncTypeChange(e, key),
|
||||
},
|
||||
options: funcList,
|
||||
key: key + '-func',
|
||||
} as IFormSelect)}
|
||||
{this.getFuncItem(row)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public renderFormItem(item: IFormItem) {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
const initialValue = item.defaultValue || '';
|
||||
const getFieldValue = {
|
||||
initialValue,
|
||||
rules: item.rules || [{ required: true, message: '请填写' }],
|
||||
};
|
||||
|
||||
return (
|
||||
<Form.Item
|
||||
key={item.key}
|
||||
>
|
||||
{getFieldDecorator(item.key, getFieldValue)(
|
||||
this.getFormItem(item),
|
||||
)}
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { crudList } = this;
|
||||
const { maxLimit = 5 } = this.props;
|
||||
|
||||
return (
|
||||
<Form>
|
||||
{crudList.map((row, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
{this.renderFormList(row)}
|
||||
{
|
||||
crudList.length > 1 ? (
|
||||
<Icon
|
||||
className={this.isDetailPage ? 'is-show' : 'dynamic-button delete'}
|
||||
type="minus-circle-o"
|
||||
onClick={() => this.remove(row.id)}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
{index === crudList.length - 1 && crudList.length < maxLimit ? (
|
||||
<Icon
|
||||
className={this.isDetailPage ? 'is-show' : 'dynamic-button plus'}
|
||||
type="plus-circle-o"
|
||||
onClick={() => this.add()}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const WrappedDynamicSetStrategy = Form.create({ name: 'dynamic_form_item' })(DynamicSetStrategy);
|
||||
Reference in New Issue
Block a user