F #5422: Minor fix on main pages (#2081)

2025-03-22 18:50:08 +03:00 · 2022-05-25 18:50:21 +02:00 · 2022-05-25 18:50:21 +02:00 · 77f93635a7
commit 77f93635a7
parent 265ccea559
15 changed files with 138 additions and 117 deletions
--- a/src/fireedge/src/client/containers/Clusters/index.js
+++ b/src/fireedge/src/client/containers/Clusters/index.js
@ -36,12 +36,11 @@ function Clusters() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <ClustersTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/Datastores/index.js
+++ b/src/fireedge/src/client/containers/Datastores/index.js
@ -36,12 +36,11 @@ function Datastores() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <DatastoresTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/Groups/index.js
+++ b/src/fireedge/src/client/containers/Groups/index.js
@ -36,12 +36,11 @@ function Groups() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <GroupsTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/Hosts/index.js
+++ b/src/fireedge/src/client/containers/Hosts/index.js
@ -19,13 +19,14 @@ import { BookmarkEmpty } from 'iconoir-react'
 import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
 import { Row } from 'react-table'

+import hostApi from 'client/features/OneApi/host'
 import { HostsTable } from 'client/components/Tables'
 import HostTabs from 'client/components/Tabs/Host'
 import HostActions from 'client/components/Tables/Hosts/actions'
 import SplitPane from 'client/components/SplitPane'
 import MultipleTags from 'client/components/MultipleTags'
 import { Tr } from 'client/components/HOC'
-import { T, Host } from 'client/constants'
+import { T } from 'client/constants'

 /**
 * Displays a list of Hosts with a split pane between the list and selected row(s).
@ -38,12 +39,11 @@ function Hosts() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <HostsTable
            onSelectedRowsChange={onSelectedRowsChange}
            globalActions={actions}
@ -56,7 +56,7 @@ function Hosts() {
                <GroupedTags tags={selectedRows} />
              ) : (
                <InfoTabs
-                  host={selectedRows[0]?.original}
+                  id={selectedRows[0]?.original?.ID}
                  gotoPage={selectedRows[0]?.gotoPage}
                />
              )}
@ -71,28 +71,34 @@ function Hosts() {
 /**
 * Displays details of a Host.
 *
- * @param {Host} host - Host to display
+ * @param {string} id - Host id to display
 * @param {Function} [gotoPage] - Function to navigate to a page of a Host
 * @returns {ReactElement} Host details
 */
-const InfoTabs = memo(({ host, gotoPage }) => (
-  <Stack overflow="auto">
-    <Stack direction="row" alignItems="center" gap={1} mb={1}>
-      <Typography color="text.primary" noWrap>
-        {`#${host.ID} | ${host.NAME}`}
-      </Typography>
-      {gotoPage && (
-        <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
-          <BookmarkEmpty />
-        </IconButton>
-      )}
+const InfoTabs = memo(({ id, gotoPage }) => {
+  const host = hostApi.endpoints.getHosts.useQueryState(undefined, {
+    selectFromResult: ({ data = [] }) => data.find((item) => +item.ID === +id),
+  })
+
+  return (
+    <Stack overflow="auto">
+      <Stack direction="row" alignItems="center" gap={1} mb={1}>
+        <Typography color="text.primary" noWrap>
+          {`#${id} | ${host.NAME}`}
+        </Typography>
+        {gotoPage && (
+          <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
+            <BookmarkEmpty />
+          </IconButton>
+        )}
+      </Stack>
+      <HostTabs id={id} />
    </Stack>
-    <HostTabs id={host.ID} />
-  </Stack>
-))
+  )
+})

 InfoTabs.propTypes = {
-  host: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
  gotoPage: PropTypes.func,
 }

--- a/src/fireedge/src/client/containers/Images/index.js
+++ b/src/fireedge/src/client/containers/Images/index.js
@ -36,12 +36,11 @@ function Images() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <ImagesTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/MarketplaceApps/index.js
+++ b/src/fireedge/src/client/containers/MarketplaceApps/index.js
@ -19,13 +19,14 @@ import { BookmarkEmpty } from 'iconoir-react'
 import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
 import { Row } from 'react-table'

+import marketAppApi from 'client/features/OneApi/marketplaceApp'
 import { MarketplaceAppsTable } from 'client/components/Tables'
 import MarketplaceAppActions from 'client/components/Tables/MarketplaceApps/actions'
 import MarketplaceAppsTabs from 'client/components/Tabs/MarketplaceApp'
 import SplitPane from 'client/components/SplitPane'
 import MultipleTags from 'client/components/MultipleTags'
 import { Tr } from 'client/components/HOC'
-import { T, MarketplaceApp } from 'client/constants'
+import { T } from 'client/constants'

 /**
 * Displays a list of Marketplace Apps with a split pane between the list and selected row(s).
@ -38,12 +39,11 @@ function MarketplaceApps() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <MarketplaceAppsTable
            onSelectedRowsChange={onSelectedRowsChange}
            globalActions={actions}
@ -56,7 +56,7 @@ function MarketplaceApps() {
                <GroupedTags tags={selectedRows} />
              ) : (
                <InfoTabs
-                  app={selectedRows[0]?.original}
+                  id={selectedRows[0]?.original?.ID}
                  gotoPage={selectedRows[0]?.gotoPage}
                />
              )}
@ -71,28 +71,38 @@ function MarketplaceApps() {
 /**
 * Displays details of a Marketplace App.
 *
- * @param {MarketplaceApp} app - Marketplace App to display
+ * @param {string} id - Marketplace App id to display
 * @param {Function} [gotoPage] - Function to navigate to a page of a Marketplace App
 * @returns {ReactElement} Marketplace App details
 */
-const InfoTabs = memo(({ app, gotoPage }) => (
-  <Stack overflow="auto">
-    <Stack direction="row" alignItems="center" gap={1} mb={1}>
-      <Typography color="text.primary" noWrap>
-        {`#${app.ID} | ${app.NAME}`}
-      </Typography>
-      {gotoPage && (
-        <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
-          <BookmarkEmpty />
-        </IconButton>
-      )}
+const InfoTabs = memo(({ id, gotoPage }) => {
+  const app = marketAppApi.endpoints.getMarketplaceApps.useQueryState(
+    undefined,
+    {
+      selectFromResult: ({ data = [] }) =>
+        data.find((item) => +item.ID === +id),
+    }
+  )
+
+  return (
+    <Stack overflow="auto">
+      <Stack direction="row" alignItems="center" gap={1} mb={1}>
+        <Typography color="text.primary" noWrap>
+          {`#${id} | ${app.NAME}`}
+        </Typography>
+        {gotoPage && (
+          <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
+            <BookmarkEmpty />
+          </IconButton>
+        )}
+      </Stack>
+      <MarketplaceAppsTabs id={id} />
    </Stack>
-    <MarketplaceAppsTabs id={app.ID} />
-  </Stack>
-))
+  )
+})

 InfoTabs.propTypes = {
-  app: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
  gotoPage: PropTypes.func,
 }

--- a/src/fireedge/src/client/containers/Marketplaces/index.js
+++ b/src/fireedge/src/client/containers/Marketplaces/index.js
@ -36,12 +36,11 @@ function Marketplaces() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <MarketplacesTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/ServiceTemplates/index.js
+++ b/src/fireedge/src/client/containers/ServiceTemplates/index.js
@ -38,12 +38,11 @@ function ServiceTemplates() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <ServiceTemplatesTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/Services/index.js
+++ b/src/fireedge/src/client/containers/Services/index.js
@ -38,12 +38,11 @@ function Services() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <ServicesTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/Users/index.js
+++ b/src/fireedge/src/client/containers/Users/index.js
@ -36,12 +36,11 @@ function Users() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <UsersTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/VNetworkTemplates/index.js
+++ b/src/fireedge/src/client/containers/VNetworkTemplates/index.js
@ -36,12 +36,11 @@ function VNetworkTemplates() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <VNetworkTemplatesTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/VirtualMachines/index.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/index.js
@ -19,13 +19,14 @@ import { BookmarkEmpty } from 'iconoir-react'
 import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
 import { Row } from 'react-table'

+import vmApi from 'client/features/OneApi/vm'
 import { VmsTable } from 'client/components/Tables'
 import VmActions from 'client/components/Tables/Vms/actions'
 import VmTabs from 'client/components/Tabs/Vm'
 import SplitPane from 'client/components/SplitPane'
 import MultipleTags from 'client/components/MultipleTags'
 import { Tr } from 'client/components/HOC'
-import { T, VM } from 'client/constants'
+import { T } from 'client/constants'

 /**
 * Displays a list of VMs with a split pane between the list and selected row(s).
@ -38,12 +39,11 @@ function VirtualMachines() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <VmsTable
            onSelectedRowsChange={onSelectedRowsChange}
            globalActions={actions}
@ -56,7 +56,7 @@ function VirtualMachines() {
                <GroupedTags tags={selectedRows} />
              ) : (
                <InfoTabs
-                  vm={selectedRows[0]?.original}
+                  id={selectedRows[0]?.original?.ID}
                  gotoPage={selectedRows[0]?.gotoPage}
                />
              )}
@ -71,28 +71,34 @@ function VirtualMachines() {
 /**
 * Displays details of a VM.
 *
- * @param {VM} vm - VM to display
+ * @param {string} id - VM id to display
 * @param {Function} [gotoPage] - Function to navigate to a page of a VM
 * @returns {ReactElement} VM details
 */
-const InfoTabs = memo(({ vm, gotoPage }) => (
-  <Stack overflow="auto">
-    <Stack direction="row" alignItems="center" gap={1} mb={1}>
-      <Typography color="text.primary" noWrap>
-        {`#${vm.ID} | ${vm.NAME}`}
-      </Typography>
-      {gotoPage && (
-        <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
-          <BookmarkEmpty />
-        </IconButton>
-      )}
+const InfoTabs = memo(({ id, gotoPage }) => {
+  const vm = vmApi.endpoints.getVms.useQueryState(undefined, {
+    selectFromResult: ({ data = [] }) => data.find((item) => +item.ID === +id),
+  })
+
+  return (
+    <Stack overflow="auto">
+      <Stack direction="row" alignItems="center" gap={1} mb={1}>
+        <Typography color="text.primary" noWrap>
+          {`#${id} | ${vm.NAME}`}
+        </Typography>
+        {gotoPage && (
+          <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
+            <BookmarkEmpty />
+          </IconButton>
+        )}
+      </Stack>
+      <VmTabs id={id} />
    </Stack>
-    <VmTabs id={vm.ID} />
-  </Stack>
-))
+  )
+})

 InfoTabs.propTypes = {
-  vm: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
  gotoPage: PropTypes.func,
 }

--- a/src/fireedge/src/client/containers/VirtualNetworks/index.js
+++ b/src/fireedge/src/client/containers/VirtualNetworks/index.js
@ -36,12 +36,11 @@ function VirtualNetworks() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <VNetworksTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (
--- a/src/fireedge/src/client/containers/VmTemplates/index.js
+++ b/src/fireedge/src/client/containers/VmTemplates/index.js
@ -19,13 +19,14 @@ import { BookmarkEmpty } from 'iconoir-react'
 import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
 import { Row } from 'react-table'

+import vmTemplateApi from 'client/features/OneApi/vmTemplate'
 import { VmTemplatesTable } from 'client/components/Tables'
 import VmTemplateActions from 'client/components/Tables/VmTemplates/actions'
 import VmTemplateTabs from 'client/components/Tabs/VmTemplate'
 import SplitPane from 'client/components/SplitPane'
 import MultipleTags from 'client/components/MultipleTags'
 import { Tr } from 'client/components/HOC'
-import { T, VmTemplate } from 'client/constants'
+import { T } from 'client/constants'

 /**
 * Displays a list of VM Templates with a split pane between the list and selected row(s).
@ -38,12 +39,11 @@ function VmTemplates() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <VmTemplatesTable
            onSelectedRowsChange={onSelectedRowsChange}
            globalActions={actions}
@ -56,7 +56,7 @@ function VmTemplates() {
                <GroupedTags tags={selectedRows} />
              ) : (
                <InfoTabs
-                  vmTemplate={selectedRows[0]?.original}
+                  id={selectedRows[0]?.original?.ID}
                  gotoPage={selectedRows[0]?.gotoPage}
                />
              )}
@ -71,28 +71,38 @@ function VmTemplates() {
 /**
 * Displays details of a VM Template.
 *
- * @param {VmTemplate} vmTemplate - VM Template to display
+ * @param {string} id - VM Template id to display
 * @param {Function} [gotoPage] - Function to navigate to a page of a VM Template
 * @returns {ReactElement} VM Template details
 */
-const InfoTabs = memo(({ vmTemplate, gotoPage }) => (
-  <Stack overflow="auto">
-    <Stack direction="row" alignItems="center" gap={1} mb={1}>
-      <Typography color="text.primary" noWrap>
-        {`#${vmTemplate.ID} | ${vmTemplate.NAME}`}
-      </Typography>
-      {gotoPage && (
-        <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
-          <BookmarkEmpty />
-        </IconButton>
-      )}
+const InfoTabs = memo(({ id, gotoPage }) => {
+  const vmTemplate = vmTemplateApi.endpoints.getTemplates.useQueryState(
+    undefined,
+    {
+      selectFromResult: ({ data = [] }) =>
+        data.find((item) => +item.ID === +id),
+    }
+  )
+
+  return (
+    <Stack overflow="auto">
+      <Stack direction="row" alignItems="center" gap={1} mb={1}>
+        <Typography color="text.primary" noWrap>
+          {`#${id} | ${vmTemplate.NAME}`}
+        </Typography>
+        {gotoPage && (
+          <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
+            <BookmarkEmpty />
+          </IconButton>
+        )}
+      </Stack>
+      <VmTemplateTabs id={id} />
    </Stack>
-    <VmTemplateTabs id={vmTemplate.ID} />
-  </Stack>
-))
+  )
+})

 InfoTabs.propTypes = {
-  vmTemplate: PropTypes.object.isRequired,
+  id: PropTypes.string.isRequired,
  gotoPage: PropTypes.func,
 }

--- a/src/fireedge/src/client/containers/Zones/index.js
+++ b/src/fireedge/src/client/containers/Zones/index.js
@ -36,12 +36,11 @@ function Zones() {

  const hasSelectedRows = selectedRows?.length > 0
  const moreThanOneSelected = selectedRows?.length > 1
-  const gridTemplateRows = hasSelectedRows ? '1fr auto 1fr' : '1fr'

  return (
-    <SplitPane gridTemplateRows={gridTemplateRows}>
+    <SplitPane gridTemplateRows="1fr auto 1fr">
      {({ getGridProps, GutterComponent }) => (
-        <Box {...getGridProps()}>
+        <Box {...(hasSelectedRows && getGridProps())}>
          <ZonesTable onSelectedRowsChange={onSelectedRowsChange} />

          {hasSelectedRows && (