diff --git a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSelectedRows.js b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSelectedRows.js
index 09945db81b..6d8e062c12 100644
--- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSelectedRows.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSelectedRows.js
@@ -16,7 +16,7 @@
import { JSXElementConstructor } from 'react'
import PropTypes from 'prop-types'
-import { TableProps } from 'react-table'
+import { TableProps, Row } from 'react-table'
import { styled, Chip, Alert, Button, alertClasses } from '@mui/material'
import { Translate } from 'client/components/HOC'
@@ -39,10 +39,15 @@ const MessageStyled = styled(Alert)({
*
* @param {object} props - Props
* @param {boolean} props.withAlert - If `true`, the list of selected rows will be an alert
+ * @param {function(Row)} [props.gotoRowPage] - Function to navigate to a page of the row
* @param {TableProps} props.useTableProps - Table props
* @returns {JSXElementConstructor} Component JSX
*/
-const GlobalSelectedRows = ({ withAlert = false, useTableProps }) => {
+const GlobalSelectedRows = ({
+ withAlert = false,
+ useTableProps,
+ gotoRowPage,
+}) => {
const {
preFilteredRows,
toggleAllRowsSelected,
@@ -78,11 +83,12 @@ const GlobalSelectedRows = ({ withAlert = false, useTableProps }) => {
) : (
- {selectedRows?.map(({ original, id, toggleRowSelected }) => (
+ {selectedRows?.map((row) => (
toggleRowSelected(false)}
+ key={row.id}
+ label={row.original?.NAME ?? row.id}
+ onDelete={() => row.toggleRowSelected(false)}
+ {...(gotoRowPage && { onClick: () => gotoRowPage(row) })}
/>
))}
@@ -92,6 +98,7 @@ const GlobalSelectedRows = ({ withAlert = false, useTableProps }) => {
GlobalSelectedRows.propTypes = {
withAlert: PropTypes.bool,
useTableProps: PropTypes.object.isRequired,
+ gotoRowPage: PropTypes.func,
}
GlobalSelectedRows.displayName = ' GlobalSelectedRows'
diff --git a/src/fireedge/src/client/components/Tables/Enhanced/index.js b/src/fireedge/src/client/components/Tables/Enhanced/index.js
index 4a81c34176..b1eeb9874b 100644
--- a/src/fireedge/src/client/components/Tables/Enhanced/index.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js
@@ -104,11 +104,9 @@ const EnhancedTable = ({
autoResetSelectedRow: false,
autoResetSelectedRows: false,
autoResetSortBy: false,
+ autoResetPage: false,
// -------------------------------------
- initialState: {
- pageSize,
- ...initialState,
- },
+ initialState: { pageSize, ...initialState },
},
useGlobalFilter,
useFilters,
@@ -126,13 +124,24 @@ const EnhancedTable = ({
page,
gotoPage,
pageCount,
- state: { pageIndex, selectedRowIds },
+ state: { pageIndex, selectedRowIds, ...state },
} = useTableProps
+ const gotoRowPage = async (row) => {
+ const pageIdx = Math.floor(row.index / state.pageSize)
+
+ await gotoPage(pageIdx)
+
+ // scroll to the row in the table view (if it's visible)
+ document
+ ?.querySelector(`.selected[role='row'][data-cy$='-${row.id}']`)
+ ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+ }
+
useMountedLayoutEffect(() => {
- const selectedRows = preFilteredRows.filter(
- (row) => !!selectedRowIds[row.id]
- )
+ const selectedRows = preFilteredRows
+ .filter((row) => !!selectedRowIds[row.id])
+ .map((row) => ({ ...row, gotoPage: () => gotoRowPage(row) }))
onSelectedRowsChange?.(selectedRows)
}, [selectedRowIds])
@@ -189,7 +198,10 @@ const EnhancedTable = ({
{/* SELECTED ROWS */}
{displaySelectedRows && (
-
+
)}
diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js
index 186d8a750e..325771999c 100644
--- a/src/fireedge/src/client/constants/translates.js
+++ b/src/fireedge/src/client/constants/translates.js
@@ -85,6 +85,7 @@ module.exports = {
Info: 'Info',
Instantiate: 'Instantiate',
InstantiateVmTemplate: 'Instantiate VM Template',
+ LocateOnTable: 'Locate on table',
Lock: 'Lock',
Migrate: 'Migrate',
MigrateLive: 'Migrate live',
diff --git a/src/fireedge/src/client/containers/Clusters/index.js b/src/fireedge/src/client/containers/Clusters/index.js
index 72efb9467f..eb0ba91d0f 100644
--- a/src/fireedge/src/client/containers/Clusters/index.js
+++ b/src/fireedge/src/client/containers/Clusters/index.js
@@ -15,13 +15,16 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { ClustersTable } from 'client/components/Tables'
import ClusterTabs from 'client/components/Tabs/Cluster'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { Tr } from 'client/components/HOC'
+import { T, Cluster } from 'client/constants'
/**
* Displays a list of Clusters with a split pane between the list and selected row(s).
@@ -47,7 +50,10 @@ function Clusters() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -60,19 +66,31 @@ function Clusters() {
/**
* Displays details of a Cluster.
*
- * @param {object} cluster - Cluster to display
+ * @param {Cluster} cluster - Cluster to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a Cluster
* @returns {ReactElement} Cluster details
*/
-const InfoTabs = memo(({ cluster }) => (
+const InfoTabs = memo(({ cluster, gotoPage }) => (
-
- {`#${cluster.ID} | ${cluster.NAME}`}
-
+
+
+ {`#${cluster.ID} | ${cluster.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { cluster: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ cluster: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/Datastores/index.js b/src/fireedge/src/client/containers/Datastores/index.js
index 8001b64aba..1a6968f30b 100644
--- a/src/fireedge/src/client/containers/Datastores/index.js
+++ b/src/fireedge/src/client/containers/Datastores/index.js
@@ -15,13 +15,16 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { DatastoresTable } from 'client/components/Tables'
import DatastoreTabs from 'client/components/Tabs/Datastore'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { Tr } from 'client/components/HOC'
+import { T, Datastore } from 'client/constants'
/**
* Displays a list of Datastores with a split pane between the list and selected row(s).
@@ -47,7 +50,10 @@ function Datastores() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -60,19 +66,31 @@ function Datastores() {
/**
* Displays details of a Datastore.
*
- * @param {object} datastore - Datastore to display
+ * @param {Datastore} datastore - Datastore to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a Datastore
* @returns {ReactElement} Datastore details
*/
-const InfoTabs = memo(({ datastore }) => (
+const InfoTabs = memo(({ datastore, gotoPage }) => (
-
- {`#${datastore.ID} | ${datastore.NAME}`}
-
+
+
+ {`#${datastore.ID} | ${datastore.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { datastore: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ datastore: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/Groups/index.js b/src/fireedge/src/client/containers/Groups/index.js
index d5348f0577..f86f190bf7 100644
--- a/src/fireedge/src/client/containers/Groups/index.js
+++ b/src/fireedge/src/client/containers/Groups/index.js
@@ -15,13 +15,16 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { GroupsTable } from 'client/components/Tables'
import GroupTabs from 'client/components/Tabs/Group'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { Tr } from 'client/components/HOC'
+import { T, Group } from 'client/constants'
/**
* Displays a list of Groups with a split pane between the list and selected row(s).
@@ -47,7 +50,10 @@ function Groups() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -60,19 +66,31 @@ function Groups() {
/**
* Displays details of a Group.
*
- * @param {object} group - Group to display
+ * @param {Group} group - Group to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a Group
* @returns {ReactElement} Group details
*/
-const InfoTabs = memo(({ group }) => (
+const InfoTabs = memo(({ group, gotoPage }) => (
-
- {`#${group.ID} | ${group.NAME}`}
-
+
+
+ {`#${group.ID} | ${group.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { group: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ group: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/Hosts/index.js b/src/fireedge/src/client/containers/Hosts/index.js
index d356e4eccc..87651c4315 100644
--- a/src/fireedge/src/client/containers/Hosts/index.js
+++ b/src/fireedge/src/client/containers/Hosts/index.js
@@ -15,7 +15,8 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { HostsTable } from 'client/components/Tables'
@@ -23,6 +24,8 @@ 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'
/**
* Displays a list of Hosts with a split pane between the list and selected row(s).
@@ -52,7 +55,10 @@ function Hosts() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -65,19 +71,31 @@ function Hosts() {
/**
* Displays details of a Host.
*
- * @param {object} host - Host to display
+ * @param {Host} host - Host to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a Host
* @returns {ReactElement} Host details
*/
-const InfoTabs = memo(({ host }) => (
+const InfoTabs = memo(({ host, gotoPage }) => (
-
- {`#${host.ID} | ${host.NAME}`}
-
+
+
+ {`#${host.ID} | ${host.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { host: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ host: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -87,13 +105,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/Images/index.js b/src/fireedge/src/client/containers/Images/index.js
index 543d3c70c8..1f7628849f 100644
--- a/src/fireedge/src/client/containers/Images/index.js
+++ b/src/fireedge/src/client/containers/Images/index.js
@@ -15,13 +15,16 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { ImagesTable } from 'client/components/Tables'
import ImageTabs from 'client/components/Tabs/Image'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { Tr } from 'client/components/HOC'
+import { T, Image } from 'client/constants'
/**
* Displays a list of Images with a split pane between the list and selected row(s).
@@ -47,7 +50,10 @@ function Images() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -60,19 +66,31 @@ function Images() {
/**
* Displays details of an Image.
*
- * @param {object} image - Image to display
+ * @param {Image} image - Image to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of an Image
* @returns {ReactElement} Image details
*/
-const InfoTabs = memo(({ image }) => (
+const InfoTabs = memo(({ image, gotoPage }) => (
-
- {`#${image.ID} | ${image.NAME}`}
-
+
+
+ {`#${image.ID} | ${image.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { image: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ image: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/MarketplaceApps/index.js b/src/fireedge/src/client/containers/MarketplaceApps/index.js
index 8e23c2eb11..d7c66336b0 100644
--- a/src/fireedge/src/client/containers/MarketplaceApps/index.js
+++ b/src/fireedge/src/client/containers/MarketplaceApps/index.js
@@ -15,7 +15,8 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { MarketplaceAppsTable } from 'client/components/Tables'
@@ -23,6 +24,8 @@ import MarketplaceAppActions from 'client/components/Tables/MarketplaceApps/acti
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'
/**
* Displays a list of Marketplace Apps with a split pane between the list and selected row(s).
@@ -52,7 +55,10 @@ function MarketplaceApps() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -65,19 +71,31 @@ function MarketplaceApps() {
/**
* Displays details of a Marketplace App.
*
- * @param {object} app - Marketplace App to display
+ * @param {MarketplaceApp} app - Marketplace App to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a Marketplace App
* @returns {ReactElement} Marketplace App details
*/
-const InfoTabs = memo(({ app }) => (
+const InfoTabs = memo(({ app, gotoPage }) => (
-
- {`#${app.ID} | ${app.NAME}`}
-
+
+
+ {`#${app.ID} | ${app.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { app: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ app: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -87,13 +105,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/Marketplaces/index.js b/src/fireedge/src/client/containers/Marketplaces/index.js
index b7d2f65c45..6e5a38577c 100644
--- a/src/fireedge/src/client/containers/Marketplaces/index.js
+++ b/src/fireedge/src/client/containers/Marketplaces/index.js
@@ -15,13 +15,16 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { MarketplacesTable } from 'client/components/Tables'
import MarketplaceTabs from 'client/components/Tabs/Marketplace'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { Tr } from 'client/components/HOC'
+import { T, Marketplace } from 'client/constants'
/**
* Displays a list of Marketplaces with a split pane between the list and selected row(s).
@@ -47,7 +50,10 @@ function Marketplaces() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -60,19 +66,31 @@ function Marketplaces() {
/**
* Displays details of a Marketplace.
*
- * @param {object} market - Marketplace to display
+ * @param {Marketplace} market - Marketplace to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a Marketplace
* @returns {ReactElement} Marketplace details
*/
-const InfoTabs = memo(({ market }) => (
+const InfoTabs = memo(({ market, gotoPage }) => (
-
- {`#${market.ID} | ${market.NAME}`}
-
+
+
+ {`#${market.ID} | ${market.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { market: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ market: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/Users/index.js b/src/fireedge/src/client/containers/Users/index.js
index 78cd6c3e4b..2aee3ad613 100644
--- a/src/fireedge/src/client/containers/Users/index.js
+++ b/src/fireedge/src/client/containers/Users/index.js
@@ -15,13 +15,16 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { UsersTable } from 'client/components/Tables'
import UserTabs from 'client/components/Tabs/User'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { Tr } from 'client/components/HOC'
+import { T, User } from 'client/constants'
/**
* Displays a list of Users with a split pane between the list and selected row(s).
@@ -47,7 +50,10 @@ function Users() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -60,19 +66,31 @@ function Users() {
/**
* Displays details of an User.
*
- * @param {object} user - User to display
+ * @param {User} user - User to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of an User
* @returns {ReactElement} User details
*/
-const InfoTabs = memo(({ user }) => (
+const InfoTabs = memo(({ user, gotoPage }) => (
-
- {`#${user.ID} | ${user.NAME}`}
-
+
+
+ {`#${user.ID} | ${user.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { user: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ user: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/VNetworkTemplates/index.js b/src/fireedge/src/client/containers/VNetworkTemplates/index.js
index e210dab5c1..061eb850c5 100644
--- a/src/fireedge/src/client/containers/VNetworkTemplates/index.js
+++ b/src/fireedge/src/client/containers/VNetworkTemplates/index.js
@@ -15,13 +15,16 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { VNetworkTemplatesTable } from 'client/components/Tables'
import VNetworkTemplateTabs from 'client/components/Tabs/VNetworkTemplate'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { Tr } from 'client/components/HOC'
+import { T, VNetworkTemplate } from 'client/constants'
/**
* Displays a list of VNet Templates with a split pane between the list and selected row(s).
@@ -47,7 +50,10 @@ function VNetworkTemplates() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -60,19 +66,31 @@ function VNetworkTemplates() {
/**
* Displays details of a VNet Template.
*
- * @param {object} vnTemplate - VNet Template to display
+ * @param {VNetworkTemplate} vnTemplate - VNet Template to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a VNet Template
* @returns {ReactElement} VNet Template details
*/
-const InfoTabs = memo(({ vnTemplate }) => (
+const InfoTabs = memo(({ vnTemplate, gotoPage }) => (
-
- {`#${vnTemplate.ID} | ${vnTemplate.NAME}`}
-
+
+
+ {`#${vnTemplate.ID} | ${vnTemplate.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { vnTemplate: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ vnTemplate: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/VirtualMachines/index.js b/src/fireedge/src/client/containers/VirtualMachines/index.js
index 8ce078f1bf..ae0e0fb905 100644
--- a/src/fireedge/src/client/containers/VirtualMachines/index.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/index.js
@@ -15,7 +15,8 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { VmsTable } from 'client/components/Tables'
@@ -23,6 +24,8 @@ 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'
/**
* Displays a list of VMs with a split pane between the list and selected row(s).
@@ -52,7 +55,10 @@ function VirtualMachines() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -65,19 +71,31 @@ function VirtualMachines() {
/**
* Displays details of a VM.
*
- * @param {object} vm - VM to display
+ * @param {VM} vm - VM to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a VM
* @returns {ReactElement} VM details
*/
-const InfoTabs = memo(({ vm }) => (
+const InfoTabs = memo(({ vm, gotoPage }) => (
-
- {`#${vm.ID} | ${vm.NAME}`}
-
+
+
+ {`#${vm.ID} | ${vm.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { vm: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ vm: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -87,13 +105,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/VirtualNetworks/index.js b/src/fireedge/src/client/containers/VirtualNetworks/index.js
index 8db0e9448c..4b9bdab6d9 100644
--- a/src/fireedge/src/client/containers/VirtualNetworks/index.js
+++ b/src/fireedge/src/client/containers/VirtualNetworks/index.js
@@ -15,13 +15,16 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { VNetworksTable } from 'client/components/Tables'
import VNetworkTabs from 'client/components/Tabs/VNetwork'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { Tr } from 'client/components/HOC'
+import { T, VirtualNetwork } from 'client/constants'
/**
* Displays a list of Virtual Networks with a split pane between the list and selected row(s).
@@ -47,7 +50,10 @@ function VirtualNetworks() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -60,19 +66,31 @@ function VirtualNetworks() {
/**
* Displays details of a Virtual Network.
*
- * @param {object} vnet - Virtual Network to display
+ * @param {VirtualNetwork} vnet - Virtual Network to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a Virtual Network
* @returns {ReactElement} Virtual Network details
*/
-const InfoTabs = memo(({ vnet }) => (
+const InfoTabs = memo(({ vnet, gotoPage }) => (
-
- {`#${vnet.ID} | ${vnet.NAME}`}
-
+
+
+ {`#${vnet.ID} | ${vnet.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { vnet: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ vnet: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/VmTemplates/index.js b/src/fireedge/src/client/containers/VmTemplates/index.js
index 9918fdfe34..a32d383619 100644
--- a/src/fireedge/src/client/containers/VmTemplates/index.js
+++ b/src/fireedge/src/client/containers/VmTemplates/index.js
@@ -15,7 +15,8 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { VmTemplatesTable } from 'client/components/Tables'
@@ -23,6 +24,8 @@ 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'
/**
* Displays a list of VM Templates with a split pane between the list and selected row(s).
@@ -52,7 +55,10 @@ function VmTemplates() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -65,19 +71,31 @@ function VmTemplates() {
/**
* Displays details of a VM Template.
*
- * @param {object} vmTemplate - VM Template to display
+ * @param {VmTemplate} vmTemplate - VM Template to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a VM Template
* @returns {ReactElement} VM Template details
*/
-const InfoTabs = memo(({ vmTemplate }) => (
+const InfoTabs = memo(({ vmTemplate, gotoPage }) => (
-
- {`#${vmTemplate.ID} | ${vmTemplate.NAME}`}
-
+
+
+ {`#${vmTemplate.ID} | ${vmTemplate.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { vmTemplate: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ vmTemplate: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -87,13 +105,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}
diff --git a/src/fireedge/src/client/containers/Zones/index.js b/src/fireedge/src/client/containers/Zones/index.js
index 9080c2af74..617f5a9ce4 100644
--- a/src/fireedge/src/client/containers/Zones/index.js
+++ b/src/fireedge/src/client/containers/Zones/index.js
@@ -15,13 +15,16 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { Typography, Box, Stack, Chip } from '@mui/material'
+import { BookmarkEmpty } from 'iconoir-react'
+import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
import { Row } from 'react-table'
import { ZonesTable } from 'client/components/Tables'
import ZoneTabs from 'client/components/Tabs/Zone'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { Tr } from 'client/components/HOC'
+import { T, Zone } from 'client/constants'
/**
* Displays a list of Zones with a split pane between the list and selected row(s).
@@ -47,7 +50,10 @@ function Zones() {
{moreThanOneSelected ? (
) : (
-
+
)}
>
)}
@@ -60,19 +66,31 @@ function Zones() {
/**
* Displays details of a Zone.
*
- * @param {object} zone - Zone to display
+ * @param {Zone} zone - Zone to display
+ * @param {Function} [gotoPage] - Function to navigate to a page of a Zone
* @returns {ReactElement} Zone details
*/
-const InfoTabs = memo(({ zone }) => (
+const InfoTabs = memo(({ zone, gotoPage }) => (
-
- {`#${zone.ID} | ${zone.NAME}`}
-
+
+
+ {`#${zone.ID} | ${zone.NAME}`}
+
+ {gotoPage && (
+
+
+
+ )}
+
))
-InfoTabs.propTypes = { zone: PropTypes.object.isRequired }
+InfoTabs.propTypes = {
+ zone: PropTypes.object.isRequired,
+ gotoPage: PropTypes.func,
+}
+
InfoTabs.displayName = 'InfoTabs'
/**
@@ -82,13 +100,14 @@ InfoTabs.displayName = 'InfoTabs'
* @returns {ReactElement} List of tags
*/
const GroupedTags = memo(({ tags = [] }) => (
-
+
(
+ tags={tags?.map(({ original, id, toggleRowSelected, gotoPage }) => (
toggleRowSelected(false)}
/>
))}