F #5655: Open modals in a new tab (#1899)

OpenNebula · Apr 1, 2022 · 5487e46 · 5487e46
1 parent 7fcd57f
commit 5487e46
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 46 deletions.
diff --git 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: <RdpIcon /> },
 }
 
+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
@@ -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
@@ -87,13 +87,15 @@ const WebMKSFullScreenButton = memo((session) => (
       </Typography>
     }
   >
-    <IconButton
-      data-cy={'vmrc-fullscreen-button'}
-      disabled={!session?.wmks?.canFullScreen?.() ?? true}
-      onClick={() => session?.wmks?.enterFullScreen?.()}
-    >
-      <Maximize />
-    </IconButton>
+    <div>
+      <IconButton
+        data-cy={'vmrc-fullscreen-button'}
+        disabled={!session?.wmks?.canFullScreen?.() ?? true}
+        onClick={() => session?.wmks?.enterFullScreen?.()}
+      >
+        <Maximize />
+      </IconButton>
+    </div>
   </Tooltip>
 ))
 

diff --git 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) => (
-              <GuacamoleButton
+              <ConsoleButton
                 key={`${memoVm}-${connectionType}`}
                 connectionType={connectionType}
                 vm={memoVm}

diff --git a/src/fireedge/src/client/containers/Guacamole/index.js b/src/fireedge/src/client/containers/Guacamole/index.js
@@ -16,6 +16,9 @@
 import { ReactElement, useMemo, useRef, useEffect } from 'react'
 import { useParams, useHistory } from 'react-router'
 import { Box, Stack, Typography } from '@mui/material'
+import { RESOURCE_NAMES } from 'client/constants'
+import { useViews } from 'client/features/Auth'
+import { useGetGuacamoleSessionQuery } from 'client/features/OneApi/vm'
 
 import {
   HeaderVmInfo,
@@ -35,6 +38,21 @@ import { PATH } from 'client/apps/sunstone/routes'
 const Guacamole = () => {
   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 (
     <Box
       ref={containerRef}

diff --git a/src/fireedge/src/client/containers/WebMKS/index.js b/src/fireedge/src/client/containers/WebMKS/index.js
@@ -13,9 +13,11 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { ReactElement, useEffect } from 'react'
+import { ReactElement, useEffect, useMemo } from 'react'
 import { useHistory, useParams } from 'react-router'
 import { Box, Stack, Typography } from '@mui/material'
+import { RESOURCE_NAMES, VM_ACTIONS } from 'client/constants'
+import { useViews } from 'client/features/Auth'
 
 import { useGetVMRCSessionQuery } from 'client/features/OneApi/vcenter'
 import {
@@ -25,29 +27,31 @@ import {
   WebMKSCtrlAltDelButton,
   WebMKSFullScreenButton,
 } from 'client/components/Consoles'
-import { PATH as ONE_PATH } from 'client/apps/sunstone/routesOne'
-// import { PATH } from 'client/apps/sunstone/routes'
+import { PATH } from 'client/apps/sunstone/routes'
 import { sentenceCase } from 'client/utils'
-import { VM_ACTIONS } from 'client/constants'
 
 /** @returns {ReactElement} WebMKS container */
 const WebMKS = () => {
   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 (
     <Box display="grid" gridTemplateRows="auto 1fr" width={1} height={1}>
       <Stack>