v2.1 fe

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

@@ -48,6 +48,9 @@ import 'antd/es/notification/style';
 import Tooltip from 'antd/es/tooltip';
 import 'antd/es/tooltip/style';
 
+import Popover from 'antd/es/popover';
+import 'antd/es/popover/style';
+
 import Radio from 'antd/es/radio';
 import 'antd/es/radio';
 import { RadioChangeEvent } from 'antd/es/radio';
@@ -97,6 +100,9 @@ import 'antd/es/time-picker/style';
 import Badge from 'antd/es/badge';
 import 'antd/es/badge/style';
 
+import Progress from 'antd/es/progress';
+import 'antd/es/progress/style';
+
 import { RangePickerValue } from 'antd/es/date-picker/interface';
 
 export {
@@ -136,4 +142,5 @@ export {
   TimePicker,
   RangePickerValue,
   Badge,
+  Popover
 };

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

@@ -0,0 +1,68 @@
+// import * as React from 'react';
+// import CodeMirror from 'codemirror/lib/codemirror';
+// import 'codemirror/lib/codemirror.css';
+// import 'codemirror/mode/sql/sql';
+// import 'codemirror/mode/javascript/javascript';
+// import 'codemirror/addon/hint/show-hint.js';
+// import 'codemirror/addon/hint/sql-hint.js';
+// import 'codemirror/addon/hint/show-hint.css';
+// import './index.less';
+// import { indexStore } from 'store/my-index';
+
+// interface IProps {
+//   value?: string;
+//   placeholder?: string;
+//   readOnly?: boolean;
+// }
+// export class CodeMirrorEditor extends React.Component<IProps> {
+
+//   public editor = null as any;
+
+//   public handleCodeFocus = () => {
+//     // tslint:disable-next-line:no-unused-expression
+//     this.editor && this.editor.focus();
+//   }
+
+//   public componentDidMount() {
+//     const { value, placeholder, readOnly } = this.props;
+//     const code = document.querySelector('.codemirror');
+//     code.innerHTML = '';
+//     const editor = CodeMirror(document.querySelector('.codemirror'), {
+//       mode: 'application/json',
+//       indentWithTabs: true,
+//       smartIndent: true,
+//       lineNumbers: true,
+//       matchBrackets: true,
+//       autoCloseBrackets: true,
+//       styleSelectedText: true,
+//       foldGutter: true,
+//       readOnly,
+//       extraKeys: readOnly ? {} : {
+//         'Ctrl-Enter': 'autocomplete',
+//         'Tab': (cm) => {
+//           const spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
+//           cm.replaceSelection(spaces);
+//         },
+//       },
+//       placeholder,
+//     });
+//     editor.setValue(value || '');
+//     indexStore.setCodeEditorValue(value || '');
+//     editor.on('changes', (a: any) => {
+//       const data = a.getValue();
+//       indexStore.setCodeEditorValue(data);
+//     });
+//     this.editor = editor;
+//   }
+
+//   public render() {
+//     return (
+//       <div
+//         className="editor-wrap"
+//         onClick={this.handleCodeFocus}
+//       >
+//         <div className="codemirror" />
+//       </div >
+//     );
+//   }
+// }

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

@@ -0,0 +1,31 @@
+.editor {
+  height: 100%;
+}
+
+.CodeMirror-placeholder {
+  color:#999;
+  font-size: 12px;
+  line-height: 14px;
+  font-family: -apple-system,BlinkMacSystemFont,Neue Haas Grotesk Text Pro,Arial Nova,Segoe UI,Helvetica Neue,\.PingFang SC,PingFang SC,Microsoft YaHei,Microsoft JhengHei,Source Han Sans SC,Noto Sans CJK SC,Source Han Sans CN,Noto Sans SC,Source Han Sans TC,Noto Sans CJK TC,Hiragino Sans GB,sans-serif;
+}
+.editor-wrap {
+  max-height: 100%;
+}
+
+.CodeMirror {
+  height: 100vh;
+}
+
+.monacoEditor{
+  height: 150px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  .editor{
+    height: 100%;
+    position: absolute;
+    left: -14%;
+    width: 120%;
+  }
+}

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import * as monaco from 'monaco-editor';
+
+import './index.less';
+
+export interface IEditorProps {
+  style?: React.CSSProperties;
+  options: monaco.editor.IStandaloneEditorConstructionOptions;
+  uri?: monaco.Uri;
+  autoUnmount?: boolean;
+  customMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: any) => any;
+  placeholder?: string;
+}
+
+export class EditorCom extends React.Component<IEditorProps> {
+  public ref: HTMLElement = null;
+  public editor: monaco.editor.IStandaloneCodeEditor;
+  public state = {
+    placeholder: this.props.placeholder ?? '',
+  };
+
+  public componentWillUnmount() {
+    if (this.props.autoUnmount === false) return;
+    const model = this.editor.getModel();
+    model.dispose();
+    this.editor.dispose();
+  }
+
+  public componentDidMount() {
+    const { customMount, options, uri } = this.props;
+    const { value, language } = options;
+    if (uri) {
+      options.model = monaco.editor.createModel(value, language, uri);
+    }
+
+    this.editor = monaco.editor.create(this.ref,
+      options,
+    );
+    if (customMount) customMount(this.editor, monaco);
+  }
+
+  public render() {
+    const { style } = this.props;
+    return (
+      <>
+        <div style={style} className="editor" ref={(id) => { this.ref = id; }} />
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import * as monaco from 'monaco-editor';
+import format2json from 'format-to-json';
+import { Input } from 'component/antd';
+import './index.less';
+
+export interface IEditorProps {
+  style?: React.CSSProperties;
+  options: monaco.editor.IStandaloneEditorConstructionOptions;
+  uri?: monaco.Uri;
+  autoUnmount?: boolean;
+  customMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: any) => any;
+  placeholder?: string;
+  value: '';
+  onChange?: any;
+}
+
+class Monacoeditor extends React.Component<IEditorProps> {
+  public ref: HTMLElement = null;
+  public editor: monaco.editor.IStandaloneCodeEditor;
+  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,
+      language: 'json',
+      lineNumbers: 'off',
+      scrollBeyondLastLine: false,
+      // selectOnLineNumbers: true,
+      // roundedSelection: false,
+      // readOnly: true,
+      minimap: {
+        enabled: false,
+      },
+      // automaticLayout: true, // 自动布局
+      glyphMargin: true, // 字形边缘 {},[]
+      // useTabStops: false,
+      // formatOnPaste: true,
+      // mode: 'application/json',
+      // indentWithTabs: true,
+      // smartIndent: true,
+      // matchBrackets: 'always',
+      // autoCloseBrackets: true,
+      // styleSelectedText: true,
+      // foldGutter: true,
+    });
+    this.editor.onDidChangeModelContent((e) => {
+      const newValue = this.editor.getValue();
+      onChange(newValue);
+    });
+  }
+  public render() {
+    return (
+      <div className="monacoEditor ant-input" >
+        <Input style={{ display: 'none' }} {...this.props} />
+        <div className="editor" {...this.props} ref={(id) => { this.ref = id; }} />
+      </div>
+    );
+  }
+}
+export default Monacoeditor;

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

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { Drawer, Modal, Button, message } from 'component/antd';
 import { XFormComponent } from 'component/x-form';
 import { IXFormWrapper } from 'types/base-type';
+import { wrapper } from 'store';
 
 export class XFormWrapper extends React.Component<IXFormWrapper> {
-
   public state = {
     confirmLoading: false,
     formMap: this.props.formMap || [] as any,
-    formData: this.props.formData || {},
+    formData: this.props.formData || {}
   };
 
   private $formRef: any;
@@ -108,7 +108,7 @@ export class XFormWrapper extends React.Component<IXFormWrapper> {
       if (error) {
         return;
       }
-      const { onSubmit, isWaitting } = this.props;
+      const { onSubmit, isWaitting, onSubmitFaild } = this.props;
 
       if (typeof onSubmit === 'function') {
         if (isWaitting) {
@@ -116,12 +116,16 @@ export class XFormWrapper extends React.Component<IXFormWrapper> {
             confirmLoading: true,
           });
           onSubmit(result).then(() => {
-            this.setState({
-              confirmLoading: false,
-            });
             message.success('操作成功');
             this.resetForm();
             this.closeModalWrapper();
+          }).catch((err: any) => {
+            const { formMap, formData } = wrapper.xFormWrapper;
+            onSubmitFaild(err, this.$formRef, formData, formMap);
+          }).finally(() => {
+            this.setState({
+              confirmLoading: false,
+            });
           });
           return;
         }

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Select, Input, InputNumber, Form, Switch, Checkbox, DatePicker, Radio, Upload, Button, Icon, Tooltip } from 'component/antd';
+import Monacoeditor from 'component/editor/monacoEditor';
 import { searchProps } from 'constants/table';
 import './index.less';
 
@@ -19,6 +20,7 @@ export enum FormItemType {
   rangePicker = 'range_picker',
   radioGroup = 'radio_group',
   upload = 'upload',
+  monacoEditor = 'monaco_editor',
 }
 
 export interface IFormItem {
@@ -105,13 +107,11 @@ class XForm extends React.Component<IXFormProps> {
       <Form layout={layout || 'horizontal'} onSubmit={() => ({})}>
         {formMap.map(formItem => {
           const { initialValue, valuePropName } = this.handleFormItem(formItem, formData);
-
           const getFieldValue = {
             initialValue,
             rules: formItem.rules || [{ required: false, message: '' }],
             valuePropName,
           };
-
           if (formItem.type === FormItemType.upload) {
             Object.assign(getFieldValue, {
               getValueFromEvent: this.onUploadFileChange,
@@ -137,7 +137,6 @@ class XForm extends React.Component<IXFormProps> {
   }
 
   public renderFormItem(item: IFormItem) {
-
     switch (item.type) {
       default:
       case FormItemType.input:
@@ -148,6 +147,9 @@ class XForm extends React.Component<IXFormProps> {
         return <InputNumber {...item.attrs} />;
       case FormItemType.textArea:
         return <TextArea rows={5} {...item.attrs} />;
+      case FormItemType.monacoEditor:
+        // tslint:disable-next-line: jsx-wrap-multiline
+        return <Monacoeditor {...item.attrs} />;
       case FormItemType.select:
         return (
           <Select