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
tkestack · Apr 11, 2022 · 71de1c8 · 71de1c8
1 parent a7b2e26
commit 71de1c8
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 62 deletions.
diff --git a/web/console/package-lock.json b/web/console/package-lock.json
diff --git 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/...onsole/src/modules/cluster/components/resource/virtual-machine/pages/create/diskPanel.tsx b/...onsole/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>