{/* RESET FILTERS */}
- 0 || state.sortBy?.length > 0
- ? 'visible'
- : 'hidden'
- }
- >
-
-
-
-
-
+ }
+ onClick={canResetFilter ? handleResetFilters : undefined}
+ icon={}
+ sx={{
+ visibility: canResetFilter ? 'visible' : 'hidden',
+ width: 'fit-content',
+ padding: '0.75em',
+ marginBottom: '0.5em',
+ }}
+ />
{/* NO DATA MESSAGE */}
diff --git a/src/fireedge/src/client/components/Tables/Enhanced/styles.js b/src/fireedge/src/client/components/Tables/Enhanced/styles.js
index 76fb3dfda3..6933db6090 100644
--- a/src/fireedge/src/client/components/Tables/Enhanced/styles.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/styles.js
@@ -55,16 +55,6 @@ export default makeStyles(({ palette, typography, breakpoints }) => ({
justifySelf: 'end',
gap: '1em',
},
- resetFilters: {
- display: 'flex',
- alignItems: 'center',
- gap: '0.5em',
- cursor: 'pointer',
- marginBottom: '1em',
- '&:hover': {
- color: palette.secondary.dark,
- },
- },
body: {
overflow: 'auto',
display: 'grid',
diff --git a/src/fireedge/src/client/components/Tabs/Vm/Storage/Actions.js b/src/fireedge/src/client/components/Tabs/Vm/Storage/Actions.js
index 8313f61978..259988f137 100644
--- a/src/fireedge/src/client/components/Tabs/Vm/Storage/Actions.js
+++ b/src/fireedge/src/client/components/Tabs/Vm/Storage/Actions.js
@@ -16,14 +16,12 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
-import {
- Trash,
- Edit,
- UndoAction,
- SaveActionFloppy,
- Camera,
- Expand,
-} from 'iconoir-react'
+import Trash from 'iconoir-react/dist/Trash'
+import Edit from 'iconoir-react/dist/Edit'
+import UndoAction from 'iconoir-react/dist/UndoAction'
+import SaveActionFloppy from 'iconoir-react/dist/SaveActionFloppy'
+import Camera from 'iconoir-react/dist/Camera'
+import Expand from 'iconoir-react/dist/ExpandLines'
import {
useAttachDiskMutation,
diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js
index cf18e13ad2..ec621306b5 100644
--- a/src/fireedge/src/client/constants/translates.js
+++ b/src/fireedge/src/client/constants/translates.js
@@ -465,11 +465,14 @@ module.exports = {
/* VM schema - capacity */
Capacity: 'Capacity',
PhysicalCpu: 'Physical CPU',
+ PhysicalCpuWithPercent: 'Physical CPU (%)',
VirtualCpu: 'Virtual CPU',
+ VirtualCpuWithPercent: 'Virtual CPU (%)',
VirtualCores: 'Virtual Cores',
Cores: 'Cores',
Sockets: 'Sockets',
Memory: 'Memory',
+ MemoryWithUnit: 'Memory %s',
Cost: 'Cost',
CostEachMonth: '%s / month',
CostCpu: 'Cost / CPU',
diff --git a/src/fireedge/src/client/containers/Clusters/index.js b/src/fireedge/src/client/containers/Clusters/index.js
index b3636e6406..4f2445b99d 100644
--- a/src/fireedge/src/client/containers/Clusters/index.js
+++ b/src/fireedge/src/client/containers/Clusters/index.js
@@ -15,14 +15,21 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
+import {
+ useLazyGetClustersQuery,
+ useUpdateClusterMutation,
+} from 'client/features/OneApi/cluster'
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 { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T, Cluster } from 'client/constants'
@@ -41,7 +48,10 @@ function Clusters() {
{({ getGridProps, GutterComponent }) => (
-
+
{hasSelectedRows && (
<>
@@ -52,6 +62,7 @@ function Clusters() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,27 +78,56 @@ function Clusters() {
*
* @param {Cluster} cluster - Cluster to display
* @param {Function} [gotoPage] - Function to navigate to a page of a Cluster
+ * @param {Function} [unselect] - Function to unselect a Cluster
* @returns {ReactElement} Cluster details
*/
-const InfoTabs = memo(({ cluster, gotoPage }) => (
-
-
-
- {`#${cluster.ID} | ${cluster.NAME}`}
-
- {gotoPage && (
-
-
-
- )}
+const InfoTabs = memo(({ cluster, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetClustersQuery()
+ const id = lazyData?.ID ?? cluster.ID
+ const name = lazyData?.NAME ?? cluster.NAME
+
+ return (
+
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
+ )}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
+
+
-
-
-))
+ )
+})
InfoTabs.propTypes = {
cluster: PropTypes.object.isRequired,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/Datastores/index.js b/src/fireedge/src/client/containers/Datastores/index.js
index 1e9a365918..7f57717476 100644
--- a/src/fireedge/src/client/containers/Datastores/index.js
+++ b/src/fireedge/src/client/containers/Datastores/index.js
@@ -15,14 +15,21 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
+import {
+ useLazyGetDatastoreQuery,
+ useUpdateDatastoreMutation,
+} from 'client/features/OneApi/datastore'
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 { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T, Datastore } from 'client/constants'
@@ -41,7 +48,10 @@ function Datastores() {
{({ getGridProps, GutterComponent }) => (
-
+
{hasSelectedRows && (
<>
@@ -52,6 +62,7 @@ function Datastores() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,27 +78,56 @@ function Datastores() {
*
* @param {Datastore} datastore - Datastore to display
* @param {Function} [gotoPage] - Function to navigate to a page of a Datastore
+ * @param {Function} [unselect] - Function to unselect a Datastore
* @returns {ReactElement} Datastore details
*/
-const InfoTabs = memo(({ datastore, gotoPage }) => (
-
-
-
- {`#${datastore.ID} | ${datastore.NAME}`}
-
- {gotoPage && (
-
-
-
- )}
+const InfoTabs = memo(({ datastore, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetDatastoreQuery()
+ const id = lazyData?.ID ?? datastore.ID
+ const name = lazyData?.NAME ?? datastore.NAME
+
+ return (
+
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
+ )}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
+
+
-
-
-))
+ )
+})
InfoTabs.propTypes = {
datastore: PropTypes.object.isRequired,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/Groups/index.js b/src/fireedge/src/client/containers/Groups/index.js
index c8331c9849..40f5d9a0eb 100644
--- a/src/fireedge/src/client/containers/Groups/index.js
+++ b/src/fireedge/src/client/containers/Groups/index.js
@@ -15,14 +15,21 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
+import {
+ useLazyGetGroupQuery,
+ useUpdateGroupMutation,
+} from 'client/features/OneApi/group'
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 { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T, Group } from 'client/constants'
@@ -41,7 +48,10 @@ function Groups() {
{({ getGridProps, GutterComponent }) => (
-
+
{hasSelectedRows && (
<>
@@ -52,6 +62,7 @@ function Groups() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,27 +78,56 @@ function Groups() {
*
* @param {Group} group - Group to display
* @param {Function} [gotoPage] - Function to navigate to a page of a Group
+ * @param {Function} [unselect] - Function to unselect a Group
* @returns {ReactElement} Group details
*/
-const InfoTabs = memo(({ group, gotoPage }) => (
-
-
-
- {`#${group.ID} | ${group.NAME}`}
-
- {gotoPage && (
-
-
-
- )}
+const InfoTabs = memo(({ group, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetGroupQuery()
+ const id = lazyData?.ID ?? group.ID
+ const name = lazyData?.NAME ?? group.NAME
+
+ return (
+
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
+ )}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
+
+
-
-
-))
+ )
+})
InfoTabs.propTypes = {
group: PropTypes.object.isRequired,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/Hosts/index.js b/src/fireedge/src/client/containers/Hosts/index.js
index 302051878b..41959ab8c0 100644
--- a/src/fireedge/src/client/containers/Hosts/index.js
+++ b/src/fireedge/src/client/containers/Hosts/index.js
@@ -91,7 +91,12 @@ const InfoTabs = memo(({ host, gotoPage, unselect }) => {
return (
-
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
}
@@ -115,9 +120,7 @@ const InfoTabs = memo(({ host, gotoPage, unselect }) => {
onClick={() => unselect()}
/>
)}
-
- {`#${id} | ${name}`}
-
+ {/* -- END ACTIONS -- */}
diff --git a/src/fireedge/src/client/containers/Images/index.js b/src/fireedge/src/client/containers/Images/index.js
index 28e112fda0..f1086c51d2 100644
--- a/src/fireedge/src/client/containers/Images/index.js
+++ b/src/fireedge/src/client/containers/Images/index.js
@@ -15,14 +15,21 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
+import {
+ useLazyGetImageQuery,
+ useUpdateImageMutation,
+} from 'client/features/OneApi/image'
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 { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T, Image } from 'client/constants'
@@ -41,7 +48,10 @@ function Images() {
{({ getGridProps, GutterComponent }) => (
-
+
{hasSelectedRows && (
<>
@@ -52,6 +62,7 @@ function Images() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,27 +78,56 @@ function Images() {
*
* @param {Image} image - Image to display
* @param {Function} [gotoPage] - Function to navigate to a page of an Image
+ * @param {Function} [unselect] - Function to unselect a Image
* @returns {ReactElement} Image details
*/
-const InfoTabs = memo(({ image, gotoPage }) => (
-
-
-
- {`#${image.ID} | ${image.NAME}`}
-
- {gotoPage && (
-
-
-
- )}
+const InfoTabs = memo(({ image, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetImageQuery()
+ const id = lazyData?.ID ?? image.ID
+ const name = lazyData?.NAME ?? image.NAME
+
+ return (
+
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
+ )}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
+
+
-
-
-))
+ )
+})
InfoTabs.propTypes = {
image: PropTypes.object.isRequired,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/MarketplaceApps/index.js b/src/fireedge/src/client/containers/MarketplaceApps/index.js
index fc900dd9c8..00e4309ce2 100644
--- a/src/fireedge/src/client/containers/MarketplaceApps/index.js
+++ b/src/fireedge/src/client/containers/MarketplaceApps/index.js
@@ -85,7 +85,7 @@ function MarketplaceApps() {
* @returns {ReactElement} Marketplace App details
*/
const InfoTabs = memo(({ app, gotoPage, unselect }) => {
- const [getApp, queryState] = useLazyGetMarketplaceAppQuery()
+ const [get, queryState] = useLazyGetMarketplaceAppQuery()
const { data: lazyData, isFetching } = queryState
const id = lazyData?.ID ?? app.ID
@@ -93,13 +93,18 @@ const InfoTabs = memo(({ app, gotoPage, unselect }) => {
return (
-
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
}
tooltip={Tr(T.Refresh)}
isSubmitting={isFetching}
- onClick={() => getApp({ id })}
+ onClick={() => get({ id })}
/>
{typeof gotoPage === 'function' && (
{
onClick={() => unselect()}
/>
)}
-
- {`#${id} | ${name}`}
-
+ {/* -- END ACTIONS -- */}
diff --git a/src/fireedge/src/client/containers/Marketplaces/index.js b/src/fireedge/src/client/containers/Marketplaces/index.js
index 2a2bf62a98..ba20776cc8 100644
--- a/src/fireedge/src/client/containers/Marketplaces/index.js
+++ b/src/fireedge/src/client/containers/Marketplaces/index.js
@@ -15,14 +15,21 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
+import {
+ useLazyGetMarketplaceQuery,
+ useUpdateMarketplaceMutation,
+} from 'client/features/OneApi/marketplace'
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 { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T, Marketplace } from 'client/constants'
@@ -41,7 +48,10 @@ function Marketplaces() {
{({ getGridProps, GutterComponent }) => (
-
+
{hasSelectedRows && (
<>
@@ -52,6 +62,7 @@ function Marketplaces() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,27 +78,56 @@ function Marketplaces() {
*
* @param {Marketplace} market - Marketplace to display
* @param {Function} [gotoPage] - Function to navigate to a page of a Marketplace
+ * @param {Function} [unselect] - Function to unselect a Marketplace
* @returns {ReactElement} Marketplace details
*/
-const InfoTabs = memo(({ market, gotoPage }) => (
-
-
-
- {`#${market.ID} | ${market.NAME}`}
-
- {gotoPage && (
-
-
-
- )}
+const InfoTabs = memo(({ market, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetMarketplaceQuery()
+ const id = lazyData?.ID ?? market.ID
+ const name = lazyData?.NAME ?? market.NAME
+
+ return (
+
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
+ )}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
+
+
-
-
-))
+ )
+})
InfoTabs.propTypes = {
market: PropTypes.object.isRequired,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/ServiceTemplates/index.js b/src/fireedge/src/client/containers/ServiceTemplates/index.js
index c605f472a9..5b1936cd81 100644
--- a/src/fireedge/src/client/containers/ServiceTemplates/index.js
+++ b/src/fireedge/src/client/containers/ServiceTemplates/index.js
@@ -15,15 +15,18 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
-import serviceTemplateApi from 'client/features/OneApi/serviceTemplate'
+import { useLazyGetServiceTemplateQuery } from 'client/features/OneApi/serviceTemplate'
import { ServiceTemplatesTable } from 'client/components/Tables'
import ServiceTemplateTabs from 'client/components/Tabs/ServiceTemplate'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'
@@ -54,6 +57,7 @@ function ServiceTemplates() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,28 +71,48 @@ function ServiceTemplates() {
/**
* Displays details of a Service Template.
*
- * @param {string} id - Service Template id to display
+ * @param {object} template - Service Template to display
* @param {Function} [gotoPage] - Function to navigate to a page of a Service Template
+ * @param {Function} [unselect] - Function to unselect a Service Template
* @returns {ReactElement} Service Template details
*/
-const InfoTabs = memo(({ id, gotoPage }) => {
- const template =
- serviceTemplateApi.endpoints.getServiceTemplates.useQueryState(undefined, {
- selectFromResult: ({ data = [] }) =>
- data.find((item) => +item.ID === +id),
- })
+const InfoTabs = memo(({ template, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetServiceTemplateQuery()
+ const id = lazyData?.ID ?? template.ID
+ const name = lazyData?.NAME ?? template.NAME
return (
-
-
- {`#${id} | ${template.NAME}`}
+
+
+ {`#${id} | ${name}`}
- {gotoPage && (
-
-
-
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
)}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
@@ -96,8 +120,9 @@ const InfoTabs = memo(({ id, gotoPage }) => {
})
InfoTabs.propTypes = {
- id: PropTypes.string.isRequired,
+ template: PropTypes.object,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/Services/index.js b/src/fireedge/src/client/containers/Services/index.js
index 624b4100df..0e3e15ddbf 100644
--- a/src/fireedge/src/client/containers/Services/index.js
+++ b/src/fireedge/src/client/containers/Services/index.js
@@ -15,15 +15,18 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
-import serviceApi from 'client/features/OneApi/service'
+import { useLazyGetServiceQuery } from 'client/features/OneApi/service'
import { ServicesTable } from 'client/components/Tables'
import ServiceTabs from 'client/components/Tabs/Service'
import SplitPane from 'client/components/SplitPane'
import MultipleTags from 'client/components/MultipleTags'
+import { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'
@@ -54,6 +57,7 @@ function Services() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,26 +71,48 @@ function Services() {
/**
* Displays details of a Service.
*
- * @param {string} id - Service id to display
+ * @param {object} service - Service to display
* @param {Function} [gotoPage] - Function to navigate to a page of a Service
+ * @param {Function} [unselect] - Function to unselect a Service
* @returns {ReactElement} Service details
*/
-const InfoTabs = memo(({ id, gotoPage }) => {
- const template = serviceApi.endpoints.getServices.useQueryState(undefined, {
- selectFromResult: ({ data = [] }) => data.find((item) => +item.ID === +id),
- })
+const InfoTabs = memo(({ service, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetServiceQuery()
+ const id = lazyData?.ID ?? service.ID
+ const name = lazyData?.NAME ?? service.NAME
return (
-
-
- {`#${id} | ${template.NAME}`}
+
+
+ {`#${id} | ${name}`}
- {gotoPage && (
-
-
-
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
)}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
@@ -94,8 +120,9 @@ const InfoTabs = memo(({ id, gotoPage }) => {
})
InfoTabs.propTypes = {
- id: PropTypes.string.isRequired,
+ service: PropTypes.object,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/Users/index.js b/src/fireedge/src/client/containers/Users/index.js
index ddfad0652f..04821ce867 100644
--- a/src/fireedge/src/client/containers/Users/index.js
+++ b/src/fireedge/src/client/containers/Users/index.js
@@ -15,14 +15,21 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
+import {
+ useLazyGetUserQuery,
+ useUpdateUserMutation,
+} from 'client/features/OneApi/user'
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 { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T, User } from 'client/constants'
@@ -41,7 +48,10 @@ function Users() {
{({ getGridProps, GutterComponent }) => (
-
+
{hasSelectedRows && (
<>
@@ -52,6 +62,7 @@ function Users() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,27 +78,56 @@ function Users() {
*
* @param {User} user - User to display
* @param {Function} [gotoPage] - Function to navigate to a page of an User
+ * @param {Function} [unselect] - Function to unselect a User
* @returns {ReactElement} User details
*/
-const InfoTabs = memo(({ user, gotoPage }) => (
-
-
-
- {`#${user.ID} | ${user.NAME}`}
-
- {gotoPage && (
-
-
-
- )}
+const InfoTabs = memo(({ user, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetUserQuery()
+ const id = lazyData?.ID ?? user.ID
+ const name = lazyData?.NAME ?? user.NAME
+
+ return (
+
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
+ )}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
+
+
-
-
-))
+ )
+})
InfoTabs.propTypes = {
- user: PropTypes.object.isRequired,
+ user: PropTypes.object,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/VNetworkTemplates/index.js b/src/fireedge/src/client/containers/VNetworkTemplates/index.js
index f3660dab6c..f345f7b097 100644
--- a/src/fireedge/src/client/containers/VNetworkTemplates/index.js
+++ b/src/fireedge/src/client/containers/VNetworkTemplates/index.js
@@ -15,14 +15,21 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
+import {
+ useLazyGetVNTemplateQuery,
+ useUpdateVNTemplateMutation,
+} from 'client/features/OneApi/networkTemplate'
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 { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T, VNetworkTemplate } from 'client/constants'
@@ -41,7 +48,10 @@ function VNetworkTemplates() {
{({ getGridProps, GutterComponent }) => (
-
+
{hasSelectedRows && (
<>
@@ -52,6 +62,7 @@ function VNetworkTemplates() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,27 +78,56 @@ function VNetworkTemplates() {
*
* @param {VNetworkTemplate} vnTemplate - VNet Template to display
* @param {Function} [gotoPage] - Function to navigate to a page of a VNet Template
+ * @param {Function} [unselect] - Function to unselect
* @returns {ReactElement} VNet Template details
*/
-const InfoTabs = memo(({ vnTemplate, gotoPage }) => (
-
-
-
- {`#${vnTemplate.ID} | ${vnTemplate.NAME}`}
-
- {gotoPage && (
-
-
-
- )}
+const InfoTabs = memo(({ vnTemplate, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetVNTemplateQuery()
+ const id = lazyData?.ID ?? vnTemplate.ID
+ const name = lazyData?.NAME ?? vnTemplate.NAME
+
+ return (
+
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
+ )}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
+
+
-
-
-))
+ )
+})
InfoTabs.propTypes = {
- vnTemplate: PropTypes.object.isRequired,
+ vnTemplate: PropTypes.object,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/VirtualMachines/index.js b/src/fireedge/src/client/containers/VirtualMachines/index.js
index fca7058349..d77eca1a88 100644
--- a/src/fireedge/src/client/containers/VirtualMachines/index.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/index.js
@@ -91,7 +91,12 @@ const InfoTabs = memo(({ vm, gotoPage, unselect }) => {
return (
-
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
}
@@ -115,9 +120,7 @@ const InfoTabs = memo(({ vm, gotoPage, unselect }) => {
onClick={() => unselect()}
/>
)}
-
- {`#${id} | ${name}`}
-
+ {/* -- END ACTIONS -- */}
diff --git a/src/fireedge/src/client/containers/VirtualNetworks/index.js b/src/fireedge/src/client/containers/VirtualNetworks/index.js
index 581a352eb1..142dedb332 100644
--- a/src/fireedge/src/client/containers/VirtualNetworks/index.js
+++ b/src/fireedge/src/client/containers/VirtualNetworks/index.js
@@ -91,7 +91,12 @@ const InfoTabs = memo(({ vnet, gotoPage, unselect }) => {
return (
-
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
}
@@ -115,9 +120,7 @@ const InfoTabs = memo(({ vnet, gotoPage, unselect }) => {
onClick={() => unselect()}
/>
)}
-
- {`#${id} | ${name}`}
-
+ {/* -- END ACTIONS -- */}
diff --git a/src/fireedge/src/client/containers/VmTemplates/index.js b/src/fireedge/src/client/containers/VmTemplates/index.js
index b97c058a7b..2bac0e62fb 100644
--- a/src/fireedge/src/client/containers/VmTemplates/index.js
+++ b/src/fireedge/src/client/containers/VmTemplates/index.js
@@ -89,7 +89,12 @@ const InfoTabs = memo(({ template, gotoPage, unselect }) => {
return (
-
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
}
@@ -113,9 +118,7 @@ const InfoTabs = memo(({ template, gotoPage, unselect }) => {
onClick={() => unselect()}
/>
)}
-
- {`#${id} | ${name}`}
-
+ {/* -- END ACTIONS -- */}
diff --git a/src/fireedge/src/client/containers/Zones/index.js b/src/fireedge/src/client/containers/Zones/index.js
index 13efdfdb39..7425564c65 100644
--- a/src/fireedge/src/client/containers/Zones/index.js
+++ b/src/fireedge/src/client/containers/Zones/index.js
@@ -15,14 +15,21 @@
* ------------------------------------------------------------------------- */
import { ReactElement, useState, memo } from 'react'
import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import GotoIcon from 'iconoir-react/dist/Pin'
+import RefreshDouble from 'iconoir-react/dist/RefreshDouble'
+import Cancel from 'iconoir-react/dist/Cancel'
+import { Typography, Box, Stack, Chip } from '@mui/material'
import { Row } from 'react-table'
+import {
+ useLazyGetZoneQuery,
+ useUpdateZoneMutation,
+} from 'client/features/OneApi/zone'
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 { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T, Zone } from 'client/constants'
@@ -41,7 +48,10 @@ function Zones() {
{({ getGridProps, GutterComponent }) => (
-
+
{hasSelectedRows && (
<>
@@ -52,6 +62,7 @@ function Zones() {
selectedRows[0]?.toggleRowSelected(false)}
/>
)}
>
@@ -67,27 +78,56 @@ function Zones() {
*
* @param {Zone} zone - Zone to display
* @param {Function} [gotoPage] - Function to navigate to a page of a Zone
+ * @param {Function} [unselect] - Function to unselect
* @returns {ReactElement} Zone details
*/
-const InfoTabs = memo(({ zone, gotoPage }) => (
-
-
-
- {`#${zone.ID} | ${zone.NAME}`}
-
- {gotoPage && (
-
-
-
- )}
+const InfoTabs = memo(({ zone, gotoPage, unselect }) => {
+ const [get, { data: lazyData, isFetching }] = useLazyGetZoneQuery()
+ const id = lazyData?.ID ?? zone.ID
+ const name = lazyData?.NAME ?? zone.NAME
+
+ return (
+
+
+
+ {`#${id} | ${name}`}
+
+
+ {/* -- ACTIONS -- */}
+ }
+ tooltip={Tr(T.Refresh)}
+ isSubmitting={isFetching}
+ onClick={() => get({ id })}
+ />
+ {typeof gotoPage === 'function' && (
+ }
+ tooltip={Tr(T.LocateOnTable)}
+ onClick={() => gotoPage()}
+ />
+ )}
+ {typeof unselect === 'function' && (
+ }
+ tooltip={Tr(T.Close)}
+ onClick={() => unselect()}
+ />
+ )}
+ {/* -- END ACTIONS -- */}
+
+
-
-
-))
+ )
+})
InfoTabs.propTypes = {
- zone: PropTypes.object.isRequired,
+ zone: PropTypes.object,
gotoPage: PropTypes.func,
+ unselect: PropTypes.func,
}
InfoTabs.displayName = 'InfoTabs'