From 5487e46e49ddbbb7afd9a14bec85605c1f3be7f3 Mon Sep 17 00:00:00 2001 From: Jorge Miguel Lobo Escalona Date: Fri, 1 Apr 2022 13:52:16 +0200 Subject: [PATCH] F #5655: Open modals in a new tab (#1899) --- .../components/Buttons/ConsoleAction.js | 29 +++++++++++-------- .../components/Consoles/HeaderVmInfo.js | 12 ++------ .../components/Consoles/WebMKS/buttons.js | 16 +++++----- .../src/client/components/Tables/Vms/row.js | 4 +-- .../src/client/containers/Guacamole/index.js | 23 +++++++++++---- .../src/client/containers/WebMKS/index.js | 26 ++++++++++------- 6 files changed, 64 insertions(+), 46 deletions(-) diff --git a/src/fireedge/src/client/components/Buttons/ConsoleAction.js b/src/fireedge/src/client/components/Buttons/ConsoleAction.js index dcc365b205d..ee8a4e7191b 100644 --- a/src/fireedge/src/client/components/Buttons/ConsoleAction.js +++ b/src/fireedge/src/client/components/Buttons/ConsoleAction.js @@ -34,7 +34,7 @@ import { isAvailableAction, } from 'client/models/VirtualMachine' import { Translate } from 'client/components/HOC' -import { T, VM, RESOURCE_NAMES, VM_ACTIONS } from 'client/constants' +import { T, VM, RESOURCE_NAMES, VM_ACTIONS, _APPS } from 'client/constants' import { PATH } from 'client/apps/sunstone/routes' const GUACAMOLE_BUTTONS = { @@ -43,6 +43,9 @@ const GUACAMOLE_BUTTONS = { [VM_ACTIONS.RDP]: { tooltip: T.Rdp, icon: }, } +const openNewBrowserTab = (path) => + window?.open(`/fireedge/${_APPS.sunstone.name}${path}`, '_blank') + const GuacamoleButton = memo(({ vm, connectionType, onClick }) => { const { icon, tooltip } = GUACAMOLE_BUTTONS[connectionType] const history = useHistory() @@ -54,11 +57,12 @@ const GuacamoleButton = memo(({ vm, connectionType, onClick }) => { evt.stopPropagation() const params = { id: vm?.ID, type: connectionType } - const session = await getSession(params).unwrap() - - typeof onClick === 'function' - ? onClick(session) - : history.push(generatePath(PATH.GUACAMOLE, params)) + if (typeof onClick === 'function') { + const session = await getSession(params).unwrap() + onClick(session) + } else { + openNewBrowserTab(generatePath(PATH.GUACAMOLE, params)) + } } catch {} }, [vm?.ID, connectionType, history, onClick] @@ -85,11 +89,12 @@ const VMRCButton = memo(({ vm, onClick }) => { evt.stopPropagation() const params = { id: vm?.ID } - const session = await getSession(params).unwrap() - - typeof onClick === 'function' - ? onClick(session) - : history.push(generatePath(PATH.WMKS, params)) + if (typeof onClick === 'function') { + const session = await getSession(params).unwrap() + onClick(session) + } else { + openNewBrowserTab(generatePath(PATH.WMKS, params)) + } } catch {} }, [vm?.ID, history, onClick] @@ -160,4 +165,4 @@ GuacamoleButton.displayName = 'GuacamoleButton' VMRCButton.displayName = 'VMRCButton' PreConsoleButton.displayName = 'PreConsoleButton' -export { PreConsoleButton as GuacamoleButton } +export { PreConsoleButton as ConsoleButton } diff --git a/src/fireedge/src/client/components/Consoles/HeaderVmInfo.js b/src/fireedge/src/client/components/Consoles/HeaderVmInfo.js index ab94bddd60e..0219c90f48b 100644 --- a/src/fireedge/src/client/components/Consoles/HeaderVmInfo.js +++ b/src/fireedge/src/client/components/Consoles/HeaderVmInfo.js @@ -20,13 +20,12 @@ import { Stack, Typography, Divider, Skeleton } from '@mui/material' import { useGetVmQuery } from 'client/features/OneApi/vm' import { useGeneralApi } from 'client/features/General' -import { useViews } from 'client/features/Auth' import { StatusCircle } from 'client/components/Status' import MultipleTags from 'client/components/MultipleTags' import { getIps, getState, isVCenter } from 'client/models/VirtualMachine' import { timeFromMilliseconds } from 'client/models/Helper' import { PATH } from 'client/apps/sunstone/routes' -import { RESOURCE_NAMES, VM_ACTIONS } from 'client/constants' +import { VM_ACTIONS } from 'client/constants' /** * @param {object} props - Props @@ -37,7 +36,6 @@ import { RESOURCE_NAMES, VM_ACTIONS } from 'client/constants' const HeaderVmInfo = ({ id, type }) => { const { push: redirectTo } = useHistory() const { enqueueError } = useGeneralApi() - const { view, [RESOURCE_NAMES.VM]: vmView } = useViews() const { data: vm, isSuccess, isLoading, isError } = useGetVmQuery(id) @@ -46,12 +44,8 @@ const HeaderVmInfo = ({ id, type }) => { const time = timeFromMilliseconds(+vm?.ETIME || +vm?.STIME) useEffect(() => { - const noAction = vmView?.actions?.[type] !== true - - if ((view && noAction) || isError) { - redirectTo(PATH.DASHBOARD) - } - }, [view, isError]) + isError && redirectTo(PATH.DASHBOARD) + }, [isError]) useEffect(() => { if (type === VM_ACTIONS.VMRC && isSuccess && vm && !isVCenter(vm)) { diff --git a/src/fireedge/src/client/components/Consoles/WebMKS/buttons.js b/src/fireedge/src/client/components/Consoles/WebMKS/buttons.js index 17736d87aed..0cbcd86609e 100644 --- a/src/fireedge/src/client/components/Consoles/WebMKS/buttons.js +++ b/src/fireedge/src/client/components/Consoles/WebMKS/buttons.js @@ -87,13 +87,15 @@ const WebMKSFullScreenButton = memo((session) => ( } > - session?.wmks?.enterFullScreen?.()} - > - - +
+ session?.wmks?.enterFullScreen?.()} + > + + +
)) diff --git a/src/fireedge/src/client/components/Tables/Vms/row.js b/src/fireedge/src/client/components/Tables/Vms/row.js index a1313e9bbc8..8328345ffd3 100644 --- a/src/fireedge/src/client/components/Tables/Vms/row.js +++ b/src/fireedge/src/client/components/Tables/Vms/row.js @@ -18,7 +18,7 @@ import PropTypes from 'prop-types' import vmApi from 'client/features/OneApi/vm' import { VirtualMachineCard } from 'client/components/Cards' -import { GuacamoleButton } from 'client/components/Buttons' +import { ConsoleButton } from 'client/components/Buttons' import { VM_ACTIONS } from 'client/constants' const { VNC, RDP, SSH, VMRC } = VM_ACTIONS @@ -40,7 +40,7 @@ const Row = memo( actions={ <> {CONNECTION_TYPES.map((connectionType) => ( - { const { id, type = '' } = useParams() const { push: redirectTo } = useHistory() + const { view, [RESOURCE_NAMES.VM]: vmView } = useViews() + + const isAvailableView = useMemo( + () => view && vmView?.actions?.[type] === true, + [view] + ) + + const { isError } = useGetGuacamoleSessionQuery( + { id, type }, + { refetchOnMountOrArgChange: false, skip: !isAvailableView } + ) + + useEffect(() => { + ;(isError || !isAvailableView) && redirectTo(PATH.DASHBOARD) + }, [isError]) const containerRef = useRef(null) const headerRef = useRef(null) @@ -60,11 +78,6 @@ const Guacamole = () => { GuacamoleClipboard ) - useEffect(() => { - // token should be saved after click on console button from datatable - !token && redirectTo(PATH.DASHBOARD) - }, [token]) - return ( { const { id } = useParams() const { push: redirectTo } = useHistory() + const { view, [RESOURCE_NAMES.VM]: vmView } = useViews() + const isAvailableView = useMemo( + () => view && vmView?.actions?.[VM_ACTIONS.VMRC] === true, + [view] + ) - const { data: ticket } = useGetVMRCSessionQuery( + const { data: ticket, isError } = useGetVMRCSessionQuery( { id }, - { refetchOnMountOrArgChange: false } + { refetchOnMountOrArgChange: false, skip: !isAvailableView } ) + useEffect(() => { + ;(isError || !isAvailableView) && redirectTo(PATH.DASHBOARD) + }, [isError]) + const { ...session } = useWebMKSSession({ token: ticket }) const { status, displayElement } = session - useEffect(() => { - // token should be saved after click on console button from datatable - !ticket && redirectTo(ONE_PATH.INSTANCE.VMS.LIST) - }, [ticket]) - return (