mirror of
https://github.com/didi/KnowStreaming.git
synced 2026-01-08 07:32:11 +08:00
398 lines
9.0 KiB
TypeScript
398 lines
9.0 KiB
TypeScript
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||
import { IconFont, Switch, Tooltip } from 'knowdesign';
|
||
import { FormItemType, IFormItem } from 'knowdesign/es/extend/x-form';
|
||
import moment from 'moment';
|
||
import React from 'react';
|
||
import { timeFormat, getRandomStr } from '@src/constants/common';
|
||
import { ControlStatusMap } from '../CommonRoute';
|
||
|
||
export const filterList = [
|
||
{
|
||
label: 'none',
|
||
value: 'none',
|
||
},
|
||
{
|
||
label: 'contains',
|
||
value: 'contains',
|
||
},
|
||
{
|
||
label: 'does not contains',
|
||
value: 'does not contains',
|
||
},
|
||
{
|
||
label: 'equals',
|
||
value: 'equals',
|
||
},
|
||
{
|
||
label: 'Above Size',
|
||
value: 'aboveSize',
|
||
},
|
||
{
|
||
label: 'Under Size',
|
||
value: 'underSize',
|
||
},
|
||
];
|
||
|
||
export const untilList = [
|
||
{
|
||
label: 'Forever',
|
||
value: 'forever',
|
||
},
|
||
{
|
||
label: 'number of messages',
|
||
value: 'number of messages',
|
||
},
|
||
{
|
||
label: 'number of messages per partition',
|
||
value: 'number of messages per partition',
|
||
},
|
||
{
|
||
label: 'max size',
|
||
value: 'max size',
|
||
},
|
||
{
|
||
label: 'max size per partition',
|
||
value: 'max size per partition',
|
||
},
|
||
{
|
||
label: 'timestamp',
|
||
value: 'timestamp',
|
||
},
|
||
];
|
||
|
||
export const tabsConfig = [
|
||
{ name: 'Data', control: '' },
|
||
{ name: 'Flow', control: '' },
|
||
{ name: 'Header', control: ControlStatusMap.TESTING_PRODUCER_HEADER },
|
||
{ name: 'Options', control: '' },
|
||
];
|
||
|
||
const getComplexLabel = (key: string, label: string, form: any, onSwitchChange?: any, needSwitch = false) => (
|
||
<div className="complex-label">
|
||
<span>
|
||
<span>{label}</span>
|
||
<Tooltip title="暂支持string格式">
|
||
<QuestionCircleOutlined size={12} style={{ marginLeft: 2 }} />
|
||
</Tooltip>
|
||
:
|
||
{needSwitch ? (
|
||
<span>
|
||
<Switch onClick={onSwitchChange} size="small" defaultChecked className="switch" />
|
||
</span>
|
||
) : null}
|
||
</span>
|
||
<span>
|
||
<Tooltip title={'生成随机内容'}>
|
||
<IconFont
|
||
type="icon-shengchengdaima"
|
||
className="random-icon"
|
||
onClick={() => {
|
||
const randomStr = getRandomStr(key === 'key' ? 30 : 128);
|
||
form && form.setFieldsValue({ [key]: randomStr });
|
||
}}
|
||
/>
|
||
</Tooltip>
|
||
</span>
|
||
</div>
|
||
);
|
||
|
||
export const getFormConfig = (params: any) => {
|
||
const { topicMetaData, activeKey: type, configInfo: info, form, onKeySwitchChange, isKeyOn, isShowControl } = params;
|
||
const formConfig = [
|
||
{
|
||
key: 'topicName',
|
||
label: 'Topic',
|
||
type: FormItemType.select,
|
||
invisible: type !== 'Data',
|
||
rules: [{ required: true, message: '请选择Topic' }],
|
||
options: topicMetaData,
|
||
attrs: {
|
||
showSearch: true,
|
||
},
|
||
},
|
||
{
|
||
key: 'key',
|
||
label: getComplexLabel('key', 'Key', form, onKeySwitchChange, true),
|
||
type: FormItemType.textArea,
|
||
invisible: type !== 'Data',
|
||
rules: [
|
||
{
|
||
required: false,
|
||
message: '请输入Key',
|
||
},
|
||
],
|
||
attrs: {
|
||
disabled: !isKeyOn,
|
||
rows: 5,
|
||
placeholder: '暂支持string类型',
|
||
},
|
||
},
|
||
{
|
||
key: 'value',
|
||
label: getComplexLabel('value', 'Value', form),
|
||
type: FormItemType.textArea,
|
||
invisible: type !== 'Data',
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: '请输入Value',
|
||
},
|
||
],
|
||
attrs: {
|
||
rows: 5,
|
||
placeholder: '暂支持string类型',
|
||
},
|
||
},
|
||
{
|
||
key: 'chunks',
|
||
label: '单次发送消息数',
|
||
type: FormItemType.inputNumber,
|
||
invisible: type !== 'Flow',
|
||
defaultValue: 1,
|
||
rules: [{ required: true, message: '请输入' }],
|
||
attrs: {
|
||
min: 0,
|
||
style: { width: 232 },
|
||
},
|
||
},
|
||
{
|
||
key: 'producerMode',
|
||
label: '生产模式',
|
||
type: FormItemType.radioGroup,
|
||
invisible: type !== 'Flow',
|
||
defaultValue: 'manual',
|
||
options: [
|
||
{
|
||
label: '手动',
|
||
value: 'manual',
|
||
},
|
||
{
|
||
label: '周期',
|
||
value: 'timed',
|
||
},
|
||
],
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: '请选择生产模式',
|
||
},
|
||
],
|
||
},
|
||
// {
|
||
// key: 'timeOptions',
|
||
// label: 'Timer options',
|
||
// type: FormItemType.text,
|
||
// invisible: type !== 'Flow' || !info?.needTimeOption,
|
||
// customFormItem: null,
|
||
// rules: [
|
||
// {
|
||
// required: false,
|
||
// message: '请选择Producer Mode',
|
||
// },
|
||
// ],
|
||
// },
|
||
{
|
||
key: 'elapsed',
|
||
label: '运行总时间（min）',
|
||
type: FormItemType.inputNumber,
|
||
invisible: type !== 'Flow' || !info?.needTimeOption,
|
||
rules: [
|
||
{
|
||
required: info?.needTimeOption,
|
||
message: '请输入',
|
||
},
|
||
],
|
||
attrs: {
|
||
min: 0,
|
||
max: 300,
|
||
style: { width: '100%' },
|
||
},
|
||
},
|
||
{
|
||
key: 'interval',
|
||
label: '时间间隔（ms）',
|
||
type: FormItemType.inputNumber,
|
||
invisible: type !== 'Flow' || !info?.needTimeOption,
|
||
rules: [
|
||
{
|
||
required: info?.needTimeOption,
|
||
message: '请输入',
|
||
},
|
||
],
|
||
attrs: {
|
||
min: 300, // 300ms间隔保证请求不太频繁
|
||
style: { width: '100%' },
|
||
},
|
||
},
|
||
// {
|
||
// key: 'jitter',
|
||
// label: 'Max jitter（ms）',
|
||
// type: FormItemType.inputNumber,
|
||
// invisible: type !== 'Flow' || !info?.needTimeOption,
|
||
// rules: [
|
||
// {
|
||
// required: info?.needTimeOption,
|
||
// message: '请输入Max jitter',
|
||
// },
|
||
// ],
|
||
// attrs: {
|
||
// max: info.maxJitter || 0,
|
||
// size: 'small',
|
||
// style: { width: 216 },
|
||
// },
|
||
// formAttrs: {
|
||
// className: 'inner-item',
|
||
// },
|
||
// },
|
||
// {
|
||
// key: 'lifecycle',
|
||
// label: (
|
||
// <>
|
||
// Lifecycle options
|
||
// <Tooltip title="Shutdown the producer automatically">
|
||
// <QuestionCircleOutlined style={{ marginLeft: 8 }} />
|
||
// </Tooltip>
|
||
// </>
|
||
// ),
|
||
// type: FormItemType.text,
|
||
// invisible: type !== 'Flow' || !info?.needTimeOption,
|
||
// customFormItem: null,
|
||
// rules: [
|
||
// {
|
||
// required: false,
|
||
// message: '',
|
||
// },
|
||
// ],
|
||
// },
|
||
// {
|
||
// key: 'messageProduced',
|
||
// label: 'Number of message produced',
|
||
// type: FormItemType.inputNumber,
|
||
// invisible: type !== 'Flow' || !info?.needTimeOption,
|
||
// rules: [
|
||
// {
|
||
// required: info?.needTimeOption,
|
||
// message: '请输入Number of message produced',
|
||
// },
|
||
// ],
|
||
// attrs: {
|
||
// min: 0,
|
||
// size: 'small',
|
||
// style: { width: 216 },
|
||
// },
|
||
// formAttrs: {
|
||
// className: 'inner-item',
|
||
// },
|
||
// },
|
||
{
|
||
key: 'frocePartition',
|
||
label: 'Froce Partition',
|
||
invisible: type !== 'Options',
|
||
type: FormItemType.select,
|
||
attrs: {
|
||
mode: 'multiple',
|
||
maxTagCount: 'responsive',
|
||
allowClear: true,
|
||
},
|
||
options: info.partitionIdList || [],
|
||
rules: [{ required: false, message: '请选择' }],
|
||
},
|
||
{
|
||
key: 'compressionType',
|
||
label: 'Compression Type',
|
||
type: FormItemType.radioGroup,
|
||
defaultValue: 'none',
|
||
invisible: type !== 'Options',
|
||
options: (() => {
|
||
const options = [
|
||
{
|
||
label: 'none',
|
||
value: 'none',
|
||
},
|
||
{
|
||
label: 'gzip',
|
||
value: 'gzip',
|
||
},
|
||
{
|
||
label: 'snappy',
|
||
value: 'snappy',
|
||
},
|
||
{
|
||
label: 'lz4',
|
||
value: 'lz4',
|
||
},
|
||
];
|
||
|
||
if (isShowControl && isShowControl(ControlStatusMap.TESTING_PRODUCER_COMPRESSION_TYPE_ZSTD)) {
|
||
options.push({
|
||
label: 'zstd',
|
||
value: 'zstd',
|
||
});
|
||
}
|
||
|
||
return options;
|
||
})(),
|
||
rules: [
|
||
{
|
||
required: false,
|
||
message: '请选择Compression Type',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
key: 'acks',
|
||
label: 'Acks',
|
||
type: FormItemType.radioGroup,
|
||
defaultValue: '0',
|
||
invisible: type !== 'Options',
|
||
options: [
|
||
{
|
||
label: 'none',
|
||
value: '0',
|
||
},
|
||
{
|
||
label: 'leader',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: 'all',
|
||
value: 'all',
|
||
},
|
||
],
|
||
rules: [
|
||
{
|
||
required: false,
|
||
message: '请选择Acks',
|
||
},
|
||
],
|
||
},
|
||
] as unknown as IFormItem[];
|
||
|
||
return formConfig;
|
||
};
|
||
|
||
export const getTableColumns = () => {
|
||
return [
|
||
{
|
||
title: 'Partition',
|
||
dataIndex: 'partitionId',
|
||
},
|
||
{
|
||
title: 'offset',
|
||
dataIndex: 'offset',
|
||
},
|
||
{
|
||
title: 'Timestamp',
|
||
dataIndex: 'timestampUnitMs',
|
||
render: (text: number) => {
|
||
return moment(text).format(timeFormat);
|
||
},
|
||
},
|
||
{
|
||
title: 'time',
|
||
dataIndex: 'costTimeUnitMs',
|
||
width: 60,
|
||
},
|
||
];
|
||
};
|