From edb18f5d4a42820ddb4f0dcd24471d8e7063ab92 Mon Sep 17 00:00:00 2001 From: MrWindlike Date: Thu, 5 Sep 2024 14:49:21 +0800 Subject: [PATCH] feat: add some comments and change icons --- packages/refine/package.json | 8 +++--- .../refine/src/components/Form/FormModal.tsx | 18 +----------- .../src/components/NamespacesFilter/index.tsx | 6 ++-- .../src/components/PodShellModal/PodShell.tsx | 22 +++++++++++---- .../src/components/PodShellModal/index.tsx | 2 +- .../src/components/Shell/ShellToolbar.tsx | 10 +++---- .../refine/src/components/Shell/index.tsx | 4 +++ .../refine/src/components/TextTags/index.tsx | 3 +- .../src/pages/deployments/list/index.tsx | 13 ++------- packages/refine/src/styles/modal.ts | 20 +++++++++++++ yarn.lock | 28 +++++++++---------- 11 files changed, 70 insertions(+), 64 deletions(-) create mode 100644 packages/refine/src/styles/modal.ts diff --git a/packages/refine/package.json b/packages/refine/package.json index 9d0447c1..ecc457f2 100644 --- 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 index 603e0717..984b7ae7 100644 --- 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 index 35423831..a3820f3b 100644 --- a/packages/refine/src/components/NamespacesFilter/index.tsx +++ b/packages/refine/src/components/NamespacesFilter/index.tsx @@ -258,8 +258,7 @@ export const NamespacesFilter: React.FC = ({ className }) multiple > - - + {data?.data.map(namespace => { @@ -267,8 +266,7 @@ export const NamespacesFilter: React.FC = ({ className }) return ( - - + ); })} diff --git a/packages/refine/src/components/PodShellModal/PodShell.tsx b/packages/refine/src/components/PodShellModal/PodShell.tsx index 209c238a..d626c2cd 100644 --- 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(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(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(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(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 index fadf8cf3..a5e32b84 100644 --- 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 index 3591543d..610c5559 100644 --- 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) {
diff --git a/packages/refine/src/components/Shell/index.tsx b/packages/refine/src/components/Shell/index.tsx index b0fece60..8a64e871 100644 --- 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(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(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(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(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 index 88966677..27f0f228 100644 --- 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 => { const tags = Object.keys(value).map(key => { return (
  • - - +
    • ); }); diff --git a/packages/refine/src/pages/deployments/list/index.tsx b/packages/refine/src/pages/deployments/list/index.tsx index 5361d9e9..be60a794 100644 --- 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 = () => { const { i18n } = useTranslation(); - const filters = useNamespaceRefineFilter(); const { tableProps, selectedKeys } = useEagleTable({ - useTableParams: { - filters - }, + useTableParams: {}, columns: [ StateDisplayColumnRenderer(i18n), NameColumnRenderer(i18n), @@ -38,11 +34,6 @@ export const DeploymentList: React.FC = () => { Dropdown: ReplicasDropdown, }); - useEffect(() => { - tableProps.onPageChange(1); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [filters]); - return (