From 71de1c867d1213a7fbeb28c099dd8eb6347d39d4 Mon Sep 17 00:00:00 2001
From: jo-hnny <wuzhiqiang94@hotmail.com>
Date: Mon, 11 Apr 2022 21:36:37 +0800
Subject: [PATCH] feat(console): support paste string to vnc (#1833)

* feat(console): support paste string to vnc

* feat(console): hide volume mode

* fix(console): change vmi text to vm
---
 web/console/package-lock.json                 | 83 +++++++++++--------
 web/console/package.json                      |  2 +-
 .../pages/create/diskPanel.tsx                | 34 ++++----
 .../virtual-machine/pages/create/index.tsx    |  7 +-
 .../virtual-machine/pages/list/index.tsx      |  4 +-
 .../virtual-machine/store/creation.ts         |  5 +-
 .../src/modules/cluster/constants/Config.ts   |  2 +-
 web/console/src/modules/vnc/constants.ts      | 19 +++++
 web/console/src/modules/vnc/index.tsx         | 23 ++++-
 web/console/src/modules/vnc/vncClipboard.tsx  | 65 +++++++++++++++
 web/console/webpack/webpack.dev.js            |  2 +-
 11 files changed, 184 insertions(+), 62 deletions(-)
 create mode 100644 web/console/src/modules/vnc/vncClipboard.tsx

diff --git a/web/console/package-lock.json b/web/console/package-lock.json
index a9729c73b..bb308469a 100644
--- a/web/console/package-lock.json
+++ b/web/console/package-lock.json
@@ -1390,9 +1390,9 @@
       }
     },
     "@types/react-window": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.4.tgz",
-      "integrity": "sha512-rFJ0h1nYffFBNi6N80CFORAQNNr+440RtGCAmKyn81U99pXRoxS2goi/fkYnUJtk+LcvWCp8cmP16M8loJJsjw==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.5.tgz",
+      "integrity": "sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==",
       "requires": {
         "@types/react": "*"
       }
@@ -5210,17 +5210,17 @@
       }
     },
     "file-selector": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz",
-      "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.4.0.tgz",
+      "integrity": "sha512-iACCiXeMYOvZqlF1kTiYINzgepRBymz1wwjiuup9u9nayhb6g4fSwiyJ/6adli+EPwrWtpgQAh2PoS7HukEGEg==",
       "requires": {
         "tslib": "^2.0.3"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
         }
       }
     },
@@ -6976,11 +6976,12 @@
       }
     },
     "is-arguments": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
-      "integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
       "requires": {
-        "call-bind": "^1.0.0"
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
       }
     },
     "is-arrayish": {
@@ -8990,9 +8991,9 @@
       }
     },
     "popper.js": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
-      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
     },
     "portfinder": {
       "version": "1.0.28",
@@ -9362,9 +9363,9 @@
       "integrity": "sha512-Cksbgbviuf2mJfMyrKmcu7ycK6zX/ukuQO8dvRZdFWqATf5joalhjFc6etnBdGCcPA2LbhIwz+OPnQxLN/j1Fw=="
     },
     "react-copy-to-clipboard": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz",
-      "integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz",
+      "integrity": "sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==",
       "requires": {
         "copy-to-clipboard": "^3",
         "prop-types": "^15.5.8"
@@ -9382,13 +9383,25 @@
       }
     },
     "react-dropzone": {
-      "version": "11.3.4",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.3.4.tgz",
-      "integrity": "sha512-B1nzNRZ4F1cnrfEC0T6KXeBN1mCPinu4JCoTrp7NjB+442KSPxqfDrw41QIA2kAwlYs1+wj/0BTedeM5hc2+xw==",
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.7.1.tgz",
+      "integrity": "sha512-zxCMwhfPy1olUEbw3FLNPLhAm/HnaYH5aELIEglRbqabizKAdHs0h+WuyOpmA+v1JXn0++fpQDdNfUagWt5hJQ==",
       "requires": {
-        "attr-accept": "^2.2.1",
-        "file-selector": "^0.2.2",
-        "prop-types": "^15.7.2"
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.4.0",
+        "prop-types": "^15.8.1"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
+          }
+        }
       }
     },
     "react-final-form-hooks": {
@@ -10138,9 +10151,9 @@
       }
     },
     "scroll-into-view-if-needed": {
-      "version": "2.2.28",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.28.tgz",
-      "integrity": "sha512-8LuxJSuFVc92+0AdNv4QOxRL4Abeo1DgLnGNkn1XlaujPH/3cCFz3QI60r2VNu4obJJROzgnIUw5TKQkZvZI1w==",
+      "version": "2.2.29",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",
+      "integrity": "sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==",
       "requires": {
         "compute-scroll-into-view": "^1.0.17"
       }
@@ -10999,9 +11012,9 @@
       "dev": true
     },
     "tea-component": {
-      "version": "2.6.22",
-      "resolved": "https://registry.npmjs.org/tea-component/-/tea-component-2.6.22.tgz",
-      "integrity": "sha512-OYr2ihSDhah+i5GgG2oCIqZ/FiGQTbUfdluVh++Xde64Zsn1g578rcmnPuPeYGkx5TD5VgllLx5/lBAQvaiCcQ==",
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/tea-component/-/tea-component-2.7.3.tgz",
+      "integrity": "sha512-9hGDiwjwB0UQKVryFO3vYyQnPJCq+2d78OoqjkQE15WkZXrl1HHWgFly8KLbew1AeoQwFIyjZVKcdImWXYsu9g==",
       "requires": {
         "@types/hoist-non-react-statics": "^3.3.1",
         "@types/react-transition-group": "=4.2.3",
@@ -11011,7 +11024,7 @@
         "eventemitter3": "^4.0.0",
         "hoist-non-react-statics": "^3.3.0",
         "moment": "^2.24.0",
-        "popper.js": "1.15.0",
+        "popper.js": "^1.16.1-lts",
         "react-copy-to-clipboard": "^5.0.2",
         "react-dropzone": "^11.2.0",
         "react-onclickoutside": "6.10.0",
@@ -11045,9 +11058,9 @@
           }
         },
         "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
         }
       }
     },
diff --git a/web/console/package.json b/web/console/package.json
index 7ac1182b9..082da5c41 100644
--- a/web/console/package.json
+++ b/web/console/package.json
@@ -67,7 +67,7 @@
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "=2.0.1",
-    "tea-component": "^2.6.22",
+    "tea-component": "^2.7.3",
     "ts-optchain": "^0.1.7",
     "use-immer": "^0.4.1",
     "uuid": "^8.3.1",
diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/create/diskPanel.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/create/diskPanel.tsx
index 80653e78e..2fa787c06 100644
--- a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/create/diskPanel.tsx
+++ b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/create/diskPanel.tsx
@@ -22,7 +22,7 @@ export const DiskPanel = () => {
         id: uuidv4(),
         name: '',
         type: DiskTypeEnum.Data,
-        volumeMode: VolumeModeEnum.Block,
+        volumeMode: VolumeModeEnum.Filesystem,
         storageClass: null,
         size: 50
       }
@@ -64,22 +64,22 @@ export const DiskPanel = () => {
       }
     },
 
-    {
-      key: 'volumeMode',
-      header: '卷模式',
-      render({ volumeMode, id }) {
-        return (
-          <Form.Control>
-            <Select
-              size="s"
-              value={volumeMode}
-              options={VolumeModeOptions}
-              onChange={volumeMode => modifyDiskItem({ volumeMode, id })}
-            />
-          </Form.Control>
-        );
-      }
-    },
+    // {
+    //   key: 'volumeMode',
+    //   header: '卷模式',
+    //   render({ volumeMode, id }) {
+    //     return (
+    //       <Form.Control>
+    //         <Select
+    //           size="s"
+    //           value={volumeMode}
+    //           options={VolumeModeOptions}
+    //           onChange={volumeMode => modifyDiskItem({ volumeMode, id })}
+    //         />
+    //       </Form.Control>
+    //     );
+    //   }
+    // },
 
     {
       key: 'storageClass',
diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/create/index.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/create/index.tsx
index 2390ce8ac..c4c192a55 100644
--- a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/create/index.tsx
+++ b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/create/index.tsx
@@ -170,11 +170,16 @@ export const VMCreatePanel = () => {
             <Form.Item label="镜像" {...getReactHookFormStatusWithMessage(others)}>
               <Select
                 type="simulate"
+                matchButtonWidth
+                style={{ width: 200 }}
                 searchable
                 appearence="button"
-                size="auto"
                 options={mirrorListLoadable?.state === 'hasValue' ? mirrorListLoadable?.contents : []}
                 {...field}
+                onChange={value => {
+                  field.onChange(value);
+                  field.onBlur();
+                }}
               />
             </Form.Item>
           )}
diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx
index e7d08d8ef..26efe007f 100644
--- a/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx
+++ b/web/console/src/modules/cluster/components/resource/virtual-machine/pages/list/index.tsx
@@ -157,7 +157,9 @@ export const VMListPanel = ({ route }) => {
     {
       mode: 'continue',
       defaultPageSize,
-      fetchAble: !!(clusterId && namespace)
+      fetchAble: !!(clusterId && namespace),
+      polling: true,
+      pollingDelay: 30 * 1000
     }
   );
 
diff --git a/web/console/src/modules/cluster/components/resource/virtual-machine/store/creation.ts b/web/console/src/modules/cluster/components/resource/virtual-machine/store/creation.ts
index 7abddfb4e..c09885b7b 100644
--- a/web/console/src/modules/cluster/components/resource/virtual-machine/store/creation.ts
+++ b/web/console/src/modules/cluster/components/resource/virtual-machine/store/creation.ts
@@ -17,7 +17,8 @@ export const mirrorListState = selector({
     return (
       items?.map(({ metadata }) => ({
         text: metadata?.annotations?.['tkestack.io/image-display-name'],
-        value: metadata?.name
+        value: metadata?.name,
+        tooltip: metadata?.annotations?.['tkestack.io/image-display-name']
       })) ?? []
     );
   }
@@ -39,7 +40,7 @@ export const diskListState = atom<DiskInterface[]>({
       id: uuidv4(),
       name: 'datavolume1',
       type: DiskTypeEnum.Data,
-      volumeMode: VolumeModeEnum.Block,
+      volumeMode: VolumeModeEnum.Filesystem,
       storageClass: null,
       size: 50
     }
diff --git a/web/console/src/modules/cluster/constants/Config.ts b/web/console/src/modules/cluster/constants/Config.ts
index 9bd04e46e..4ccdb2b43 100644
--- a/web/console/src/modules/cluster/constants/Config.ts
+++ b/web/console/src/modules/cluster/constants/Config.ts
@@ -330,7 +330,7 @@ export const ServiceWorkloadList = [
   },
   {
     value: 'vmi',
-    name: 'VirtualMachineInstance'
+    name: 'VirtualMachines'
   }
 ];
 
diff --git a/web/console/src/modules/vnc/constants.ts b/web/console/src/modules/vnc/constants.ts
index 10c249f4a..7881da6e3 100644
--- a/web/console/src/modules/vnc/constants.ts
+++ b/web/console/src/modules/vnc/constants.ts
@@ -33,3 +33,22 @@ export const ShortcutKeyOptions = [
     }
   }
 ];
+
+// paste string to noVNC
+export const pasteStringToVnc = (rfb, str) => {
+  rfb.focus();
+
+  str.split('').forEach(char => {
+    const code = char.charCodeAt();
+    const needsShift = char.match(/[A-Z!@#$%^&*()_+{}:\"<>?~|]/);
+    if (needsShift) {
+      rfb.sendKey(KeyTable.XK_Shift_L, 'ShiftLeft', true);
+    }
+
+    rfb.sendKey(code);
+
+    if (needsShift) {
+      rfb.sendKey(KeyTable.XK_Shift_L, 'ShiftLeft', false);
+    }
+  });
+};
diff --git a/web/console/src/modules/vnc/index.tsx b/web/console/src/modules/vnc/index.tsx
index 15c7c3b44..a576a4fc9 100644
--- a/web/console/src/modules/vnc/index.tsx
+++ b/web/console/src/modules/vnc/index.tsx
@@ -2,7 +2,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import RFB from '@novnc/novnc/core/rfb';
 import { Text, Dropdown, List } from 'tea-component';
 import { encode } from 'js-base64';
-import { VNCStatusEnum, vncStatusToText, ShortcutKeyOptions } from './constants';
+import { VNCStatusEnum, vncStatusToText, ShortcutKeyOptions, pasteStringToVnc } from './constants';
+import { VncClipboard } from './vncClipboard';
 
 let rfb;
 
@@ -27,9 +28,13 @@ export const VNCPage = () => {
       setVncStatus(VNCStatusEnum.Connected);
     });
 
-    rfb.addEventListener('disconnect', e => {
+    rfb.addEventListener('disconnect', () => {
       setVncStatus(VNCStatusEnum.Disconnected);
     });
+
+    rfb.addEventListener('clipboard', e => {
+      console.log('clipboard', e?.detail?.text);
+    });
   }, []);
 
   return (
@@ -54,7 +59,19 @@ export const VNCPage = () => {
           </List>
         </Dropdown>
 
-        <Text style={{ color: 'white' }}>状态：{vncStatusToText[vncStatus]}</Text>
+        <Text style={{ color: 'white' }}>
+          状态：{vncStatusToText[vncStatus]}
+          {vncStatus === VNCStatusEnum.Connected && (
+            <>
+              。如需粘贴命令，请点击
+              <VncClipboard
+                onConfirm={content => {
+                  pasteStringToVnc(rfb, content);
+                }}
+              />
+            </>
+          )}
+        </Text>
 
         <Text style={{ color: 'white' }}>虚拟机名称：{name}</Text>
       </div>
diff --git a/web/console/src/modules/vnc/vncClipboard.tsx b/web/console/src/modules/vnc/vncClipboard.tsx
new file mode 100644
index 000000000..338ac2d97
--- /dev/null
+++ b/web/console/src/modules/vnc/vncClipboard.tsx
@@ -0,0 +1,65 @@
+import React, { useState, useMemo } from 'react';
+import { Button, Modal, Alert, Form, Input, FormItemProps } from 'tea-component';
+
+interface IVncClipboardProps {
+  onConfirm: (content: string) => void;
+}
+
+export const VncClipboard = ({ onConfirm }: IVncClipboardProps) => {
+  const [visible, setVisible] = useState(false);
+  const [content, setContent] = useState('');
+
+  const contentValidate = useMemo<{ message: string; status: FormItemProps['status'] }>(() => {
+    const rule = /^[^\u4e00-\u9fa5]+$/;
+
+    if (content && !rule.test(content)) {
+      return {
+        message: '暂时不支持汉字！',
+        status: 'error'
+      };
+    }
+
+    return {
+      message: null,
+      status: null
+    };
+  }, [content]);
+
+  function handleConfirm() {
+    if (!content) {
+      return;
+    }
+
+    setVisible(false);
+    onConfirm(content);
+    setContent('');
+  }
+
+  return (
+    <>
+      <Button type="link" style={{ textDecoration: 'underline #fff', color: '#fff' }} onClick={() => setVisible(true)}>
+        这里
+      </Button>
+
+      <Modal caption="粘贴命令" visible={visible} onClose={() => setVisible(false)}>
+        <Modal.Body>
+          <Alert>将内容粘贴至文本框,暂不支持中文等非标准键盘值特殊字符</Alert>
+
+          <Form>
+            <Form.Item required label="命令文本内容" {...contentValidate}>
+              <Input.TextArea size="full" value={content} onChange={value => setContent(value)} />
+            </Form.Item>
+          </Form>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Button type="primary" disabled={!content || contentValidate?.status === 'error'} onClick={handleConfirm}>
+            确定
+          </Button>
+
+          <Button onClick={() => setVisible(false)}>取消</Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
diff --git a/web/console/webpack/webpack.dev.js b/web/console/webpack/webpack.dev.js
index a7c1191bf..ef1700de2 100644
--- a/web/console/webpack/webpack.dev.js
+++ b/web/console/webpack/webpack.dev.js
@@ -41,7 +41,7 @@ module.exports = ({ version }) =>
         },
 
         '/websocket': {
-          target: 'ws://43.129.38.165',
+          target: `ws://${Host.split('//')?.[1]}`,
           ws: true,
           logLevel: 'debug',
           secure: false,