F #7133: buttons added to individual resources (#3763)

Author: jloboescalona2

src/fireedge/src/modules/components/Tabs/Cluster/index.js

@@ -13,21 +13,22 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
+import { OpenNebulaLogo } from '@modules/components/Icons'
 import { Alert, Stack } from '@mui/material'
 import PropTypes from 'prop-types'
 import { memo, useMemo } from 'react'
-import { OpenNebulaLogo } from '@modules/components/Icons'
 
 import { RESOURCE_NAMES } from '@ConstantsModule'
-import { useViews, ClusterAPI } from '@FeaturesModule'
+import { ClusterAPI, useViews } from '@FeaturesModule'
 import { getAvailableInfoTabs } from '@ModelsModule'
 
 import { BaseTab as Tabs } from '@modules/components/Tabs'
-import Info from '@modules/components/Tabs/Cluster/Info'
-import Hosts from '@modules/components/Tabs/Cluster/Hosts'
-import Vnets from '@modules/components/Tabs/Cluster/Vnets'
 import Datastores from '@modules/components/Tabs/Cluster/Datastores'
 import PlanOptimization from '@modules/components/Tabs/Cluster/Drs'
+import Hosts from '@modules/components/Tabs/Cluster/Hosts'
+import Info from '@modules/components/Tabs/Cluster/Info'
+import Vnets from '@modules/components/Tabs/Cluster/Vnets'
+import SingleDetailActions from '@modules/components/Tabs/SingleDetailActions'
 
 const getTabComponent = (tabName) =>
   ({
@@ -38,7 +39,7 @@ const getTabComponent = (tabName) =>
     drs: PlanOptimization,
   }[tabName])
 
-const ClusterTabs = memo(({ id }) => {
+const ClusterTabs = memo(({ id, singleActions }) => {
   const { view, getResourceView } = useViews()
   const { isError, error, status, data } = ClusterAPI.useGetClusterQuery({ id })
 
@@ -58,7 +59,15 @@ const ClusterTabs = memo(({ id }) => {
   }
 
   if (status === 'fulfilled' || id === data?.ID) {
-    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+    return (
+      <>
+        <SingleDetailActions
+          selectedRows={data}
+          singleActions={singleActions}
+        />
+        <Tabs addBorder tabs={tabsAvailable ?? []} />
+      </>
+    )
   }
 
   return (
@@ -71,7 +80,10 @@ const ClusterTabs = memo(({ id }) => {
   )
 })
 
-ClusterTabs.propTypes = { id: PropTypes.string.isRequired }
+ClusterTabs.propTypes = {
+  id: PropTypes.string.isRequired,
+  singleActions: PropTypes.array.isRequired,
+}
 ClusterTabs.displayName = 'ClusterTabs'
 
 export default ClusterTabs

src/fireedge/src/modules/components/Tabs/Datastore/index.js

@@ -13,19 +13,20 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
+import { OpenNebulaLogo } from '@modules/components/Icons'
 import { Alert, Stack } from '@mui/material'
 import PropTypes from 'prop-types'
 import { memo, useMemo } from 'react'
-import { OpenNebulaLogo } from '@modules/components/Icons'
 
 import { RESOURCE_NAMES } from '@ConstantsModule'
-import { useViews, DatastoreAPI } from '@FeaturesModule'
+import { DatastoreAPI, useViews } from '@FeaturesModule'
 import { getAvailableInfoTabs } from '@ModelsModule'
 
 import { BaseTab as Tabs } from '@modules/components/Tabs'
 import Clusters from '@modules/components/Tabs/Datastore/Clusters'
 import Images from '@modules/components/Tabs/Datastore/Images'
 import Info from '@modules/components/Tabs/Datastore/Info'
+import SingleDetailActions from '@modules/components/Tabs/SingleDetailActions'
 
 const getTabComponent = (tabName) =>
   ({
@@ -34,7 +35,7 @@ const getTabComponent = (tabName) =>
     clusters: Clusters,
   }[tabName])
 
-const DatastoreTabs = memo(({ id }) => {
+const DatastoreTabs = memo(({ id, singleActions }) => {
   const { view, getResourceView } = useViews()
   const { isError, error, status, data } = DatastoreAPI.useGetDatastoreQuery({
     id,
@@ -56,7 +57,15 @@ const DatastoreTabs = memo(({ id }) => {
   }
 
   if (status === 'fulfilled' || id === data?.ID) {
-    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+    return (
+      <>
+        <SingleDetailActions
+          selectedRows={data}
+          singleActions={singleActions}
+        />
+        <Tabs addBorder tabs={tabsAvailable ?? []} />
+      </>
+    )
   }
 
   return (
@@ -69,7 +78,10 @@ const DatastoreTabs = memo(({ id }) => {
   )
 })
 
-DatastoreTabs.propTypes = { id: PropTypes.string.isRequired }
+DatastoreTabs.propTypes = {
+  id: PropTypes.string.isRequired,
+  singleActions: PropTypes.func,
+}
 DatastoreTabs.displayName = 'DatastoreTabs'
 
 export default DatastoreTabs

src/fireedge/src/modules/components/Tabs/Group/index.js

@@ -13,21 +13,21 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
+import { OpenNebulaLogo } from '@modules/components/Icons'
 import { Alert, Stack } from '@mui/material'
 import PropTypes from 'prop-types'
 import { memo, useMemo } from 'react'
-import { OpenNebulaLogo } from '@modules/components/Icons'
 
 import { RESOURCE_NAMES } from '@ConstantsModule'
-import { useViews, GroupAPI } from '@FeaturesModule'
+import { GroupAPI, useViews } from '@FeaturesModule'
 import { getAvailableInfoTabs } from '@ModelsModule'
-
 import { BaseTab as Tabs } from '@modules/components/Tabs'
+import generateAccountingInfoTab from '@modules/components/Tabs/Accounting'
 import Info from '@modules/components/Tabs/Group/Info'
 import GroupUsersTab from '@modules/components/Tabs/Group/Users'
 import generateQuotasInfoTab from '@modules/components/Tabs/Quota'
-import generateAccountingInfoTab from '@modules/components/Tabs/Accounting'
 import generateShowbackInfoTab from '@modules/components/Tabs/Showback'
+import SingleDetailActions from '@modules/components/Tabs/SingleDetailActions'
 
 const getTabComponent = (tabName) =>
   ({
@@ -38,7 +38,7 @@ const getTabComponent = (tabName) =>
     showback: generateShowbackInfoTab({ groups: true }),
   }[tabName])
 
-const GroupTabs = memo(({ id }) => {
+const GroupTabs = memo(({ id, singleActions }) => {
   const { view, getResourceView } = useViews()
   const { isError, error, status, data } = GroupAPI.useGetGroupQuery({ id })
 
@@ -58,7 +58,15 @@ const GroupTabs = memo(({ id }) => {
   }
 
   if (status === 'fulfilled' || id === data?.ID) {
-    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+    return (
+      <>
+        <SingleDetailActions
+          selectedRows={data}
+          singleActions={singleActions}
+        />
+        <Tabs addBorder tabs={tabsAvailable ?? []} />
+      </>
+    )
   }
 
   return (
@@ -71,7 +79,10 @@ const GroupTabs = memo(({ id }) => {
   )
 })
 
-GroupTabs.propTypes = { id: PropTypes.string.isRequired }
+GroupTabs.propTypes = {
+  id: PropTypes.string.isRequired,
+  singleActions: PropTypes.func,
+}
 GroupTabs.displayName = 'GroupTabs'
 
 export default GroupTabs

src/fireedge/src/modules/components/Tabs/Host/index.js

@@ -18,18 +18,19 @@ import PropTypes from 'prop-types'
 import { memo, useMemo } from 'react'
 
 import { RESOURCE_NAMES } from '@ConstantsModule'
-import { useViews, HostAPI } from '@FeaturesModule'
+import { HostAPI, useViews } from '@FeaturesModule'
 import { getAvailableInfoTabs } from '@ModelsModule'
 
+import { OpenNebulaLogo } from '@modules/components/Icons'
 import { BaseTab as Tabs } from '@modules/components/Tabs'
-import Info from '@modules/components/Tabs/Host/Info'
 import Graph from '@modules/components/Tabs/Host/Graphs'
-import PCI from '@modules/components/Tabs/Host/PCI'
+import Info from '@modules/components/Tabs/Host/Info'
 import Numa from '@modules/components/Tabs/Host/Numa'
+import PCI from '@modules/components/Tabs/Host/PCI'
 import Vms from '@modules/components/Tabs/Host/Vms'
 import Wilds from '@modules/components/Tabs/Host/Wilds'
 import Zombies from '@modules/components/Tabs/Host/Zombies'
-import { OpenNebulaLogo } from '@modules/components/Icons'
+import SingleDetailActions from '@modules/components/Tabs/SingleDetailActions'
 
 const getTabComponent = (tabName) =>
   ({
@@ -42,7 +43,7 @@ const getTabComponent = (tabName) =>
     zombies: Zombies,
   }[tabName])
 
-const HostTabs = memo(({ id }) => {
+const HostTabs = memo(({ id, singleActions }) => {
   const { view, getResourceView } = useViews()
   const {
     isError,
@@ -69,7 +70,15 @@ const HostTabs = memo(({ id }) => {
   }
 
   if (status === 'fulfilled' || id === data?.ID) {
-    return <Tabs addBorder tabs={tabsAvailable} />
+    return (
+      <>
+        <SingleDetailActions
+          selectedRows={data}
+          singleActions={singleActions}
+        />
+        <Tabs addBorder tabs={tabsAvailable} />
+      </>
+    )
   }
 
   return (
@@ -82,7 +91,10 @@ const HostTabs = memo(({ id }) => {
   )
 })
 
-HostTabs.propTypes = { id: PropTypes.string.isRequired }
+HostTabs.propTypes = {
+  id: PropTypes.string.isRequired,
+  singleActions: PropTypes.func,
+}
 HostTabs.displayName = 'HostTabs'
 
 export default HostTabs

src/fireedge/src/modules/components/Tabs/ServiceTemplate/index.js

@@ -13,19 +13,20 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
+import { OpenNebulaLogo } from '@modules/components/Icons'
 import { Alert, Stack } from '@mui/material'
 import PropTypes from 'prop-types'
 import { memo, useMemo } from 'react'
-import { OpenNebulaLogo } from '@modules/components/Icons'
 
 import { RESOURCE_NAMES } from '@ConstantsModule'
-import { useViews, ServiceTemplateAPI } from '@FeaturesModule'
+import { ServiceTemplateAPI, useViews } from '@FeaturesModule'
 import { getAvailableInfoTabs } from '@ModelsModule'
 
 import { BaseTab as Tabs } from '@modules/components/Tabs'
 import Info from '@modules/components/Tabs/ServiceTemplate/Info'
 import Roles from '@modules/components/Tabs/ServiceTemplate/Roles'
 import Template from '@modules/components/Tabs/ServiceTemplate/Template'
+import SingleDetailActions from '@modules/components/Tabs/SingleDetailActions'
 
 const getTabComponent = (tabName) =>
   ({
@@ -34,7 +35,7 @@ const getTabComponent = (tabName) =>
     template: Template,
   }[tabName])
 
-const ServiceTemplateTabs = memo(({ id }) => {
+const ServiceTemplateTabs = memo(({ id, singleActions }) => {
   const { view, getResourceView } = useViews()
   const { isError, error, status, data } =
     ServiceTemplateAPI.useGetServiceTemplateQuery({
@@ -57,7 +58,15 @@ const ServiceTemplateTabs = memo(({ id }) => {
   }
 
   if (status === 'fulfilled' || id === data?.ID) {
-    return <Tabs addBorder tabs={tabsAvailable ?? []} />
+    return (
+      <>
+        <SingleDetailActions
+          selectedRows={data}
+          singleActions={singleActions}
+        />
+        <Tabs addBorder tabs={tabsAvailable ?? []} />
+      </>
+    )
   }
 
   return (
@@ -70,7 +79,10 @@ const ServiceTemplateTabs = memo(({ id }) => {
   )
 })
 
-ServiceTemplateTabs.propTypes = { id: PropTypes.string.isRequired }
+ServiceTemplateTabs.propTypes = {
+  id: PropTypes.string.isRequired,
+  singleActions: PropTypes.func,
+}
 ServiceTemplateTabs.displayName = 'ServiceTemplateTabs'
 
 export default ServiceTemplateTabs

src/fireedge/src/modules/components/Tabs/SingleDetailActions.js

@@ -0,0 +1,56 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2025, OpenNebula Project, OpenNebula Systems               *
+ *                                                                           *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
+ * not use this file except in compliance with the License. You may obtain   *
+ * a copy of the License at                                                  *
+ *                                                                           *
+ * http://www.apache.org/licenses/LICENSE-2.0                                *
+ *                                                                           *
+ * Unless required by applicable law or agreed to in writing, software       *
+ * distributed under the License is distributed on an "AS IS" BASIS,         *
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
+ * See the License for the specific language governing permissions and       *
+ * limitations under the License.                                            *
+ * ------------------------------------------------------------------------- */
+import EnhancedTableStyles from '@modules/components/Tables/Enhanced/styles'
+import { GlobalActions } from '@modules/components/Tables/Enhanced/Utils'
+import { Box, useTheme } from '@mui/material'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'
+
+const SingleDetailActions = memo(({ selectedRows = [], singleActions }) => {
+  const theme = useTheme()
+  const styles = useMemo(
+    () =>
+      EnhancedTableStyles({
+        ...theme,
+        readOnly: false,
+      }),
+    [theme]
+  )
+
+  if (!selectedRows || typeof singleActions !== 'function') {
+    return null
+  }
+
+  const parsedSelectedRows = [{ original: selectedRows }]
+  const actions = singleActions({ selectedRows: parsedSelectedRows })
+
+  return (
+    <Box marginBottom={2}>
+      <GlobalActions
+        className={styles.actions}
+        globalActions={actions}
+        selectedRows={parsedSelectedRows}
+      />
+    </Box>
+  )
+})
+
+SingleDetailActions.propTypes = {
+  selectedRows: PropTypes.array,
+  actions: PropTypes.array,
+}
+SingleDetailActions.displayName = 'SingleDetailActions'
+export default SingleDetailActions