mirror of
https://github.com/didi/KnowStreaming.git
synced 2026-01-11 02:13:28 +08:00
初始化3.0.0版本
This commit is contained in:
@@ -0,0 +1,396 @@
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||
import { IconFont, Switch, Tooltip } from 'knowdesign';
|
||||
import { FormItemType, IFormItem } from 'knowdesign/lib/extend/x-form';
|
||||
import moment from 'moment';
|
||||
import React from 'react';
|
||||
import { timeFormat } from '../../constants/common';
|
||||
import { getRandomStr } from '../../lib/utils';
|
||||
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',
|
||||
},
|
||||
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,
|
||||
},
|
||||
];
|
||||
};
|
||||
Reference in New Issue
Block a user