This is an automated email from the ASF dual-hosted git repository.
aloyszhang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong.git
The following commit(s) were added to refs/heads/master by this push:
new 8efeb14803 [INLONG-10691][Dashboard] Added monitoring and auditing
page (#10778)
8efeb14803 is described below
commit 8efeb148037da3ed2a71b45af9298340170272c0
Author: kamianlaida <[email protected]>
AuthorDate: Tue Aug 13 20:26:46 2024 +0800
[INLONG-10691][Dashboard] Added monitoring and auditing page (#10778)
---
.../plugins/streams/common/StreamDefaultInfo.ts | 20 +++-
.../src/ui/components/HighRadio/index.tsx | 110 +++++++++++++++++++++
2 files changed, 128 insertions(+), 2 deletions(-)
diff --git a/inlong-dashboard/src/plugins/streams/common/StreamDefaultInfo.ts
b/inlong-dashboard/src/plugins/streams/common/StreamDefaultInfo.ts
index 380ae0f5ef..b62ac7d4b3 100644
--- a/inlong-dashboard/src/plugins/streams/common/StreamDefaultInfo.ts
+++ b/inlong-dashboard/src/plugins/streams/common/StreamDefaultInfo.ts
@@ -25,6 +25,7 @@ import EditableTable from '@/ui/components/EditableTable';
import { fieldTypes as sourceFieldsTypes } from
'@/plugins/sinks/common/sourceFields';
import { statusList, genStatusTag } from './status';
import { timestampFormat } from '@/core/utils';
+import HighRadio from '@/ui/components/HighRadio';
const { I18nMap, I18n } = DataWithBackend;
const { FieldList, FieldDecorator } = RenderRow;
@@ -173,10 +174,10 @@ export class StreamDefaultInfo implements
DataWithBackend, RenderRow, RenderList
dataEncoding: string;
@FieldDecorator({
- type: 'radio',
+ type: HighRadio,
+ initialValue: '124',
props: values => ({
disabled: [110].includes(values?.status),
- initialValue: '124',
options: [
{
label: i18n.t('meta.Stream.DataSeparator.Space'),
@@ -203,6 +204,21 @@ export class StreamDefaultInfo implements DataWithBackend,
RenderRow, RenderList
value: '34',
},
],
+ useInput: true,
+ useInputProps: {
+ style:
+ i18n?.language === 'cn'
+ ? {
+ width: 80,
+ }
+ : {
+ width: 80,
+ position: 'absolute',
+ left: 180,
+ bottom: 0,
+ },
+ placeholder: 'ASCII',
+ },
}),
rules: [
{
diff --git a/inlong-dashboard/src/ui/components/HighRadio/index.tsx
b/inlong-dashboard/src/ui/components/HighRadio/index.tsx
new file mode 100644
index 0000000000..f131cd790a
--- /dev/null
+++ b/inlong-dashboard/src/ui/components/HighRadio/index.tsx
@@ -0,0 +1,110 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * A select that can automatically initiate asynchronous (cooperating with
useRequest) to obtain drop-down list data
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+import { Input, Radio, RadioGroupProps } from 'antd';
+import i18n from '@/i18n';
+
+interface optionProps {
+ label: string;
+ value: number;
+}
+export interface HighRadioProps extends Omit<RadioGroupProps, 'options'> {
+ options: optionProps[];
+ useInput?: boolean;
+ useInputProps?: Record<string, unknown>;
+}
+
+const HighRadio: React.FC<HighRadioProps> = ({
+ options,
+ useInput = false,
+ useInputProps,
+ ...rest
+}) => {
+ const [diyWatcher, setDiyWatcher] = useState(true);
+ const [diyState, setDiyState] = useState(false);
+ const optionList = useMemo(() => {
+ return useInput
+ ? [
+ ...options,
+ {
+ label: i18n.t('components.HighRadio.Customize'),
+ value: '__DIYState',
+ },
+ ]
+ : options;
+ }, [options, useInput]);
+
+ useEffect(() => {
+ if (diyWatcher && optionList.every(item => item.value !== rest.value) &&
!diyState) {
+ setDiyState(true);
+ }
+ }, [diyWatcher, rest.value, optionList, diyState]);
+
+ const onValueChange = value => {
+ if (typeof rest.onChange === 'function') {
+ rest.onChange(value);
+ }
+ };
+
+ const onRadioChange = e => {
+ const newDiyState = e.target.value === '__DIYState';
+ if (diyState !== newDiyState) {
+ setDiyState(newDiyState);
+ }
+ if (newDiyState) {
+ setDiyWatcher(false);
+ return;
+ }
+ onValueChange(e);
+ };
+ const RadioComponent = (
+ <Radio.Group
+ {...rest}
+ options={optionList}
+ onChange={onRadioChange}
+ value={useInput && diyState ? '__DIYState' : (!optionList.length &&
rest.value) || rest.value}
+ />
+ );
+ const onInputChange = e => {
+ onValueChange(e.target.value);
+ };
+ return useInput ? (
+ <div
+ style={{
+ display: 'flex-inline',
+ flexWrap: 'wrap',
+ height: 50,
+ position: 'relative',
+ }}
+ >
+ {RadioComponent}
+ {useInput && diyState && (
+ <Input {...useInputProps} value={rest.value} onChange={onInputChange}
/>
+ )}
+ </div>
+ ) : (
+ RadioComponent
+ );
+};
+
+export default HighRadio;
