feat: add some comments and change icons

webzard-io · Sep 5, 2024 · edb18f5 · edb18f5
1 parent 2b6be61
commit edb18f5
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 64 deletions.
diff --git a/packages/refine/package.json b/packages/refine/package.json
@@ -10,8 +10,8 @@
   "module": "./dist/refine.js",
   "types": "./lib/src/index.d.ts",
   "dependencies": {
-    "@cloudtower/eagle": "^0.30.3",
-    "@cloudtower/icons-react": "^0.30.3",
+    "@cloudtower/eagle": "^0.31.6",
+    "@cloudtower/icons-react": "^0.31.6",
     "@patternfly/react-core": "^5.1.1",
     "@patternfly/react-log-viewer": "^5.0.0",
     "@refinedev/core": "^4.47.2",
@@ -78,8 +78,8 @@
     "vite-plugin-commonjs": "^0.10.0"
   },
   "peerDependencies": {
-    "@cloudtower/eagle": "^0.30.3",
-    "@cloudtower/icons-react": "^0.30.3",
+    "@cloudtower/eagle": "^0.31.6",
+    "@cloudtower/icons-react": "^0.31.6",
     "@refinedev/core": "^4.47.2",
     "antd": "4.5.0",
     "i18next": "^23.2.3",

diff --git a/packages/refine/src/components/Form/FormModal.tsx b/packages/refine/src/components/Form/FormModal.tsx
@@ -6,6 +6,7 @@ import { useResource } from '@refinedev/core';
 import React, { useState, useContext, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import ConfigsContext from 'src/contexts/configs';
+import { FullscreenModalStyle } from 'src/styles/modal';
 import { RefineFormContent } from './RefineFormContent';
 import { useRefineForm } from './useRefineForm';
 import { YamlForm, YamlFormProps } from './YamlForm';
@@ -14,23 +15,6 @@ const FormDescStyle = css`
   margin-bottom: 16px;
 `;
 
-export const FullscreenModalStyle = css`
-  &.ant-modal.fullscreen {
-    .ant-modal-header {
-      padding: 60px 128px 32px 128px;
-    }
-
-    .ant-modal-body {
-      padding: 0 128px;
-    }
-
-    .ant-modal-footer {
-      .footer-content {
-        margin: 0 128px;
-      }
-    }
-  }
-`;
 const MaxWidthModalStyle = css`
   .ant-modal-header {
     max-width: 648px;

diff --git a/packages/refine/src/components/NamespacesFilter/index.tsx b/packages/refine/src/components/NamespacesFilter/index.tsx
@@ -258,17 +258,15 @@ export const NamespacesFilter: React.FC<NamespaceFilterProps> = ({ className })
         multiple
       >
         <AntdOption key="_all" value="_all" label={t('dovetail.all_namespaces')} className={AllNamespaceOptionStyle}>
-          <OverflowTooltip content={t('dovetail.all_namespaces')} className={LabelWrapperStyle}>
-          </OverflowTooltip>
+          <OverflowTooltip content={t('dovetail.all_namespaces')} className={LabelWrapperStyle} />
         </AntdOption>
         <AntdSelectOptGroup label="" className={SelectOptionGroupStyle}>
           {data?.data.map(namespace => {
             const { name } = namespace.metadata;
 
             return (
               <AntdOption key={name} value={name} label={name} className={OptionStyle}>
-                <OverflowTooltip content={name} className={LabelWrapperStyle}>
-                </OverflowTooltip>
+                <OverflowTooltip content={name} className={LabelWrapperStyle} />
               </AntdOption>
             );
           })}

diff --git a/packages/refine/src/components/PodShellModal/PodShell.tsx b/packages/refine/src/components/PodShellModal/PodShell.tsx
@@ -21,6 +21,14 @@ interface PodShellHandler {
   getAllTerminalContents: () => string[];
 }
 
+enum Channel {
+  STDIN = '0',
+  STDOUT = '1',
+  STDERR = '2',
+  ERR = '3',
+  RESIZE = '4'
+}
+
 const BACKUP_SHELLS = [OS.Windows, OS.Linux];
 
 const COMMANDS = {
@@ -68,9 +76,11 @@ export const PodShell = React.forwardRef<PodShellHandler, PodShellProps>(functio
   const onSocketClose = useCallback((socket: WebSocket, term: Terminal | null) => {
     if (errorMsgRef.current) {
       if (osIndex + 1 < BACKUP_SHELLS.length) {
+        // try other shells
         setOsIndex(osIndex + 1);
       } else {
-        term?.writeln(`\u001b[31m${errorMsgRef.current}`);
+        // ansi color: https://codehs.com/tutorial/ryan/add-color-with-ansi-in-javascript
+        term?.writeln(`\u001b[38;2;255;82;82m${errorMsgRef.current}`);
         shellRef.current?.setSocketStatus(SocketStatus.Disconnected);
         errorMsgRef.current = '';
       }
@@ -82,16 +92,16 @@ export const PodShell = React.forwardRef<PodShellHandler, PodShellProps>(functio
     const type = e.data.substr(0, 1);
     const msg = base64Decode(e.data.substr(1));
 
-    if (`${type}` === '1') {
+    if (`${type}` === Channel.STDOUT) {
       term?.write(msg);
     } else {
-      if (`${type}` === '3') {
+      if (`${type}` === Channel.ERR) {
         errorMsgRef.current = msg;
       }
     }
   }, []);
   const fit = useCallback(({ rows, cols }: { rows: number; cols: number; }) => {
-    const message = `4${base64Encode(
+    const message = `${Channel.RESIZE}${base64Encode(
       JSON.stringify({
         Width: Math.floor(cols),
         Height: Math.floor(rows),
@@ -100,7 +110,7 @@ export const PodShell = React.forwardRef<PodShellHandler, PodShellProps>(functio
 
     shellRef.current?.send(message);
   }, []);
-  const encode = useCallback((input) => `0${base64Encode(input)}`, []);
+  const encode = useCallback((input) => `${Channel.STDIN}${base64Encode(input)}`, []);
 
   useEffect(() => {
     if (!container && containers.length) {
@@ -130,7 +140,7 @@ export const PodShell = React.forwardRef<PodShellHandler, PodShellProps>(functio
             }
           }}
           style={{
-            width: '200px',
+            width: '256px',
           }}
           size="small"
         >

diff --git a/packages/refine/src/components/PodShellModal/index.tsx b/packages/refine/src/components/PodShellModal/index.tsx
@@ -2,10 +2,10 @@ import { CloseCircleFilled } from '@ant-design/icons';
 import { Modal, usePopModal } from '@cloudtower/eagle';
 import React, { useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FullscreenModalStyle } from 'src/components/Form/FormModal';
 import { SocketStatus } from 'src/components/Shell';
 import GlobalStoreContext from 'src/contexts/global-store';
 import { PodModel } from 'src/models';
+import { FullscreenModalStyle } from 'src/styles/modal';
 import { PodShell } from './PodShell';
 
 interface PodShellModalProps {

diff --git a/packages/refine/src/components/Shell/ShellToolbar.tsx b/packages/refine/src/components/Shell/ShellToolbar.tsx
@@ -1,13 +1,13 @@
 import { SearchInput, Icon, Tooltip, DropdownMenu } from '@cloudtower/eagle';
 import {
+  FontSize16GrayIcon,
+  FontSize16BlueIcon,
   LogCollection16GrayIcon,
   LogCollection16GradientBlueIcon,
   TrashBinDelete16Icon,
-  InfoICircle16GradientGrayIcon,
-  InfoICircle16GradientBlueIcon,
 } from '@cloudtower/icons-react';
 import { css, cx } from '@linaria/core';
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 const ToolbarStyle = css`
@@ -79,8 +79,8 @@ function ShellToolbar(props: ShellToolbarProps) {
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 <Icon
                   className={IconStyle}
-                  src={InfoICircle16GradientGrayIcon}
-                  hoverSrc={InfoICircle16GradientBlueIcon}
+                  src={FontSize16GrayIcon}
+                  hoverSrc={FontSize16BlueIcon}
                 />
               </div>
             </Tooltip>

diff --git a/packages/refine/src/components/Shell/index.tsx b/packages/refine/src/components/Shell/index.tsx
@@ -140,6 +140,7 @@ export const Shell = React.forwardRef<ShellHandler, ShellProps>(function Shell(p
       socketRef.current.send(message);
       callback?.();
     } else {
+      /** if the socket is not ready, the message will saved in the backlog and be sent after the socket ready */
       backlogRef.current.push({
         message,
         callback,
@@ -265,6 +266,7 @@ export const Shell = React.forwardRef<ShellHandler, ShellProps>(function Shell(p
         renderAddon = new CanvasAddon();
       }
 
+      // init and setup addons
       onTermInit?.(term);
       term.loadAddon(fitAddonRef.current = new FitAddon());
       term.loadAddon(searchAddonRef.current = new SearchAddon());
@@ -290,6 +292,7 @@ export const Shell = React.forwardRef<ShellHandler, ShellProps>(function Shell(p
         setSearchMatchedTotal(resultCount);
       });
       term.onData((input) => {
+        // send hte terminal input to websocket
         send(encode(input));
       });
       termInstanceRef.current = term;
@@ -367,6 +370,7 @@ export const Shell = React.forwardRef<ShellHandler, ShellProps>(function Shell(p
     return () => {
       disconnect?.();
     };
+    // reconnect when the url or protocols is changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [url, protocols]);
   useEffect(() => {

diff --git a/packages/refine/src/components/TextTags/index.tsx b/packages/refine/src/components/TextTags/index.tsx
@@ -15,8 +15,7 @@ export const TextTags: React.FC<Props> = props => {
   const tags = Object.keys(value).map(key => {
     return (
       <li key={key}>
-        <OverflowTooltip content={`${key}=${value[key]}`}>
-        </OverflowTooltip>
+        <OverflowTooltip content={`${key}=${value[key]}`} />
       </li>
     );
   });

diff --git a/packages/refine/src/pages/deployments/list/index.tsx b/packages/refine/src/pages/deployments/list/index.tsx
@@ -1,5 +1,5 @@
 import { IResourceComponentsProps } from '@refinedev/core';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ListPage } from 'src/components/ListPage';
 import { ReplicasDropdown } from 'src/components/ReplicasDropdown';
@@ -13,16 +13,12 @@ import {
   WorkloadRestartsColumnRenderer,
   StateDisplayColumnRenderer,
 } from 'src/hooks/useEagleTable/columns';
-import useNamespaceRefineFilter from 'src/hooks/useNamespaceRefineFilter';
 import { DeploymentModel } from '../../../models';
 
 export const DeploymentList: React.FC<IResourceComponentsProps> = () => {
   const { i18n } = useTranslation();
-  const filters = useNamespaceRefineFilter();
   const { tableProps, selectedKeys } = useEagleTable<DeploymentModel>({
-    useTableParams: {
-      filters
-    },
+    useTableParams: {},
     columns: [
       StateDisplayColumnRenderer(i18n),
       NameColumnRenderer(i18n),
@@ -38,11 +34,6 @@ export const DeploymentList: React.FC<IResourceComponentsProps> = () => {
     Dropdown: ReplicasDropdown,
   });
 
-  useEffect(() => {
-    tableProps.onPageChange(1);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filters]);
-
   return (
     <ListPage
       selectedKeys={selectedKeys}

diff --git a/packages/refine/src/styles/modal.ts b/packages/refine/src/styles/modal.ts
@@ -0,0 +1,20 @@
+import { css } from '@linaria/core';
+
+
+export const FullscreenModalStyle = css`
+  &.ant-modal.fullscreen {
+    .ant-modal-header {
+      padding: 60px 128px 32px 128px;
+    }
+
+    .ant-modal-body {
+      padding: 0 128px;
+    }
+
+    .ant-modal-footer {
+      .footer-content {
+        margin: 0 128px;
+      }
+    }
+  }
+`;
diff --git a/yarn.lock b/yarn.lock
@@ -1658,13 +1658,13 @@
   resolved "https://registry.npmmirror.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@cloudtower/eagle@^0.30.3":
-  version "0.30.3"
-  resolved "https://registry.npmjs.org/@cloudtower/eagle/-/eagle-0.30.3.tgz#ca98836806a7921f34c468746881499444addaca"
-  integrity sha512-C07ZXnCGgQOqfZQkObT1f46Jef2k3ZLK5IiDYhU7oXNFGIPd20MEeuUz9O67fKcJfxdLpyfID/kmhLA5paASgg==
+"@cloudtower/eagle@^0.31.6":
+  version "0.31.6"
+  resolved "https://registry.yarnpkg.com/@cloudtower/eagle/-/eagle-0.31.6.tgz#24bc400f4d1c1bda40c99cfdd90591ad018451af"
+  integrity sha512-zdt29ehzdA9WNxW50ybAUsH6ULLLxvZYRnE5m1mW+W83m+4we/pB/jo1ch8bipjwArZzNDZPK39McKCi00lwIA==
   dependencies:
-    "@cloudtower/icons-react" "0.30.3"
-    "@cloudtower/parrot" "0.30.3"
+    "@cloudtower/icons-react" "^0.31.6"
+    "@cloudtower/parrot" "^0.31.6"
     "@cloudtower/rc-notification" "^4.6.1"
     "@linaria/core" "^4.2.2"
     "@linaria/react" "^4.3.0"
@@ -1682,15 +1682,15 @@
     redux "^4.2.0"
     timezones.json "^1.6.1"
 
-"@cloudtower/icons-react@0.30.3", "@cloudtower/icons-react@^0.30.3":
-  version "0.30.3"
-  resolved "https://registry.npmjs.org/@cloudtower/icons-react/-/icons-react-0.30.3.tgz#bb459cd6a96404b7c8c76e88c2888169b63c229a"
-  integrity sha512-zxFdZBmAJ3mtOCg83Azmc0vdp940yEsMyFclY/omIbh/X7DcHu6IvWelLdPMHPo4lr5M1bHh2he63coDMjFq9w==
+"@cloudtower/icons-react@^0.31.6":
+  version "0.31.6"
+  resolved "https://registry.yarnpkg.com/@cloudtower/icons-react/-/icons-react-0.31.6.tgz#545c432db0620bc9f062e20d5d2d2b336c3ec3b4"
+  integrity sha512-kxtVmD5OueltNMZUJhICGDVOzZrVCZxSE1oDT1eTX2D2g2lGag5WMV5TAdxOD67m2HmGDFP/TqfkzGAkPXuL+A==
 
-"@cloudtower/parrot@0.30.3":
-  version "0.30.3"
-  resolved "https://registry.npmjs.org/@cloudtower/parrot/-/parrot-0.30.3.tgz#07e688166b3c449d9aca20a3dce4f62cfe4d0ab9"
-  integrity sha512-SxZfxTaZBMaKsdAiF7kOY/CVTcf6FEau1a1Dw7bnOdZEbSz1ytlv0xpuXc55A0zk4Yk4awaBTCcz/uI5YUHkAg==
+"@cloudtower/parrot@^0.31.6":
+  version "0.31.6"
+  resolved "https://registry.yarnpkg.com/@cloudtower/parrot/-/parrot-0.31.6.tgz#fbbb85d58fdaa2225ba907d4d075a165104b41f1"
+  integrity sha512-kL8cINO4YdG8IfQGG7O4aszA60GzV75gRzeFVjxvGH0kpwcVMwsSNqJJ59YwKdbEdHp3dywECd+L74KdU8B+ZA==
   dependencies:
     i18next "^23.2.3"
     lodash.merge "^4.6.2"