V2.4.1 FE

kafka-manager-console/src/component/antd/index.tsx

@@ -94,6 +94,9 @@ import 'antd/es/divider/style';
 import Upload from 'antd/es/upload';
 import 'antd/es/upload/style';
 
+import Transfer from 'antd/es/transfer';
+import 'antd/es/transfer/style';
+
 import TimePicker from 'antd/es/time-picker';
 import 'antd/es/time-picker/style';
 
@@ -142,5 +145,6 @@ export {
   TimePicker,
   RangePickerValue,
   Badge,
-  Popover
+  Popover,
+  Transfer
 };

kafka-manager-console/src/component/editor/index.less

@@ -25,7 +25,7 @@
   .editor{
     height: 100%;
     position: absolute;
-    left: -14%;
+    left: -12%;
     width: 120%;
   }
 }

kafka-manager-console/src/component/editor/monacoEditor.tsx

@@ -21,24 +21,12 @@ class Monacoeditor extends React.Component<IEditorProps> {
   public state = {
     placeholder: '',
   };
-  // public arr = '{"clusterId":95,"startId":37397856,"step":100,"topicName":"kmo_topic_metrics_tempory_zq"}';
-  // public Ars(a: string) {
-  //   const obj = JSON.parse(a);
-  //   const newobj: any = {};
-  //   for (const item in obj) {
-  //     if (typeof obj[item] === 'object') {
-  //       this.Ars(obj[item]);
-  //     } else {
-  //       newobj[item] = obj[item];
-  //     }
-  //   }
-  //   return JSON.stringify(newobj);
-  // }
+
   public async componentDidMount() {
     const { value, onChange } = this.props;
     const format: any = await format2json(value);
     this.editor = monaco.editor.create(this.ref, {
-      value: format.result,
+      value: format.result || value,
       language: 'json',
       lineNumbers: 'off',
       scrollBeyondLastLine: false,
@@ -48,7 +36,7 @@ class Monacoeditor extends React.Component<IEditorProps> {
       minimap: {
         enabled: false,
       },
-      // automaticLayout: true, // 自动布局
+      automaticLayout: true, // 自动布局
       glyphMargin: true, // 字形边缘 {},[]
       // useTabStops: false,
       // formatOnPaste: true,

kafka-manager-console/src/component/flow-table/index.tsx

@@ -68,8 +68,8 @@ export class StatusGraghCom<T extends IFlowInfo> extends React.Component {
   public render() {
     const statusData = this.getData();
     const loading = this.getLoading();
-    if (!statusData) return null;
     const data: any[] = [];
+    if (!statusData) return <Table columns={flowColumns} dataSource={data} />;
     Object.keys(statusData).map((key) => {
       if (statusData[key]) {
         const v = key === 'byteIn' || key === 'byteOut' ? statusData[key].map(i => i && (i / 1024).toFixed(2)) :
@@ -85,7 +85,7 @@ export class StatusGraghCom<T extends IFlowInfo> extends React.Component {
       }
     });
     return (
-      <Table columns={flowColumns} dataSource={data} pagination={false} loading={loading}/>
+      <Table columns={flowColumns} dataSource={data} pagination={false} loading={loading} />
     );
   }
 }

kafka-manager-console/src/component/x-form/index.less

@@ -1,4 +1,4 @@
-.ant-input-number {
+.ant-input-number, .ant-form-item-children .ant-select {
   width: 314px
 }
 

kafka-manager-console/src/component/x-form/index.tsx

@@ -130,6 +130,8 @@ class XForm extends React.Component<IXFormProps> {
                 this.renderFormItem(formItem),
               )}
               {formItem.renderExtraElement ? formItem.renderExtraElement() : null}
+              {/* 添加保存时间提示文案 */}
+              {formItem.attrs?.prompttype ? <span style={{ color: "#cccccc", fontSize: '12px', lineHeight: '20px', display: 'block' }}>{formItem.attrs.prompttype}</span> : null}
             </Form.Item>
           );
         })}