diff --git a/src/fireedge/src/client/components/Tabs/VmTemplate/Info/index.js b/src/fireedge/src/client/components/Tabs/VmTemplate/Info/index.js
new file mode 100644
index 0000000000..ed1abace16
--- /dev/null
+++ b/src/fireedge/src/client/components/Tabs/VmTemplate/Info/index.js
@@ -0,0 +1,103 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, 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. *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import { useContext } from 'react'
+import PropTypes from 'prop-types'
+
+import { useVmTemplateApi } from 'client/features/One'
+import { TabContext } from 'client/components/Tabs/TabProvider'
+import { Permissions, Ownership } from 'client/components/Tabs/Common'
+import Information from 'client/components/Tabs/VmTemplate/Info/information'
+import * as Helper from 'client/models/Helper'
+
+const VmTemplateInfoTab = ({ tabProps = {} }) => {
+ const {
+ information_panel: informationPanel,
+ permissions_panel: permissionsPanel,
+ ownership_panel: ownershipPanel
+ } = tabProps
+
+ const { rename, changeOwnership, changePermissions } = useVmTemplateApi()
+ const { handleRefetch, data: template = {} } = useContext(TabContext)
+ const { ID, UNAME, UID, GNAME, GID, PERMISSIONS } = template
+
+ const handleChangeOwnership = async newOwnership => {
+ const response = await changeOwnership(ID, newOwnership)
+ String(response) === String(ID) && await handleRefetch?.()
+ }
+
+ const handleChangePermission = async newPermission => {
+ const response = await changePermissions(ID, newPermission)
+ String(response) === String(ID) && await handleRefetch?.()
+ }
+
+ const handleRename = async newName => {
+ const response = await rename(ID, newName)
+ String(response) === String(ID) && await handleRefetch?.()
+ }
+
+ const getActions = actions => Helper.getActionsAvailable(actions)
+
+ return (
+
+ {informationPanel?.enabled && (
+
+ )}
+ {permissionsPanel?.enabled && (
+
+ )}
+ {ownershipPanel?.enabled && (
+
+ )}
+
+ )
+}
+
+VmTemplateInfoTab.propTypes = {
+ tabProps: PropTypes.object
+}
+
+VmTemplateInfoTab.displayName = 'VmTemplateInfoTab'
+
+export default VmTemplateInfoTab
diff --git a/src/fireedge/src/client/components/Tabs/VmTemplate/Info/information.js b/src/fireedge/src/client/components/Tabs/VmTemplate/Info/information.js
new file mode 100644
index 0000000000..223ce65e5e
--- /dev/null
+++ b/src/fireedge/src/client/components/Tabs/VmTemplate/Info/information.js
@@ -0,0 +1,51 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, 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. *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import PropTypes from 'prop-types'
+
+import { List } from 'client/components/Tabs/Common'
+
+import * as Helper from 'client/models/Helper'
+import { T } from 'client/constants'
+
+const InformationPanel = ({ template = {} }) => {
+ const { ID, NAME, REGTIME, LOCK } = template
+
+ const info = [
+ { name: T.ID, value: ID },
+ { name: T.Name, value: NAME },
+ {
+ name: T.StartTime,
+ value: Helper.timeToString(REGTIME)
+ },
+ {
+ name: T.Locked,
+ value: Helper.levelLockToString(LOCK?.LOCKED)
+ }
+ ]
+
+ return (
+
+ )
+}
+
+InformationPanel.displayName = 'InformationPanel'
+
+InformationPanel.propTypes = {
+ template: PropTypes.object
+}
+
+export default InformationPanel
diff --git a/src/fireedge/src/client/components/Tabs/VmTemplate/Template.js b/src/fireedge/src/client/components/Tabs/VmTemplate/Template.js
new file mode 100644
index 0000000000..9255df6105
--- /dev/null
+++ b/src/fireedge/src/client/components/Tabs/VmTemplate/Template.js
@@ -0,0 +1,41 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, 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. *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import { useContext } from 'react'
+import { Accordion, AccordionDetails } from '@material-ui/core'
+
+import { TabContext } from 'client/components/Tabs/TabProvider'
+
+const TemplateTab = () => {
+ const { data: template = {} } = useContext(TabContext)
+ const { TEMPLATE } = template
+
+ return (
+
+
+
+
+ {JSON.stringify(TEMPLATE, null, 2)}
+
+
+
+
+ )
+}
+
+TemplateTab.displayName = 'TemplateTab'
+
+export default TemplateTab
diff --git a/src/fireedge/src/client/components/Tabs/VmTemplate/index.js b/src/fireedge/src/client/components/Tabs/VmTemplate/index.js
new file mode 100644
index 0000000000..17a1734a62
--- /dev/null
+++ b/src/fireedge/src/client/components/Tabs/VmTemplate/index.js
@@ -0,0 +1,84 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, 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. *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import { memo, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { LinearProgress } from '@material-ui/core'
+
+import { useFetch } from 'client/hooks'
+import { useAuth } from 'client/features/Auth'
+import { useVmTemplateApi } from 'client/features/One'
+
+import Tabs from 'client/components/Tabs'
+import { sentenceCase, camelCase } from 'client/utils'
+
+import TabProvider from 'client/components/Tabs/TabProvider'
+import Info from 'client/components/Tabs/VmTemplate/Info'
+import Template from 'client/components/Tabs/VmTemplate/Template'
+
+const getTabComponent = tabName => ({
+ info: Info,
+ template: Template
+}[tabName])
+
+const VmTemplateTabs = memo(({ id }) => {
+ const { getVmTemplate } = useVmTemplateApi()
+ const { data, fetchRequest, loading, error } = useFetch(getVmTemplate)
+
+ const handleRefetch = () => fetchRequest(id, { reload: true })
+
+ const [tabsAvailable, setTabs] = useState(() => [])
+ const { view, getResourceView } = useAuth()
+
+ useEffect(() => {
+ fetchRequest(id)
+ }, [id])
+
+ useEffect(() => {
+ const infoTabs = getResourceView('VM-TEMPLATE')?.['info-tabs'] ?? {}
+
+ setTabs(() => Object.entries(infoTabs)
+ ?.filter(([_, { enabled } = {}]) => !!enabled)
+ ?.map(([tabName, tabProps]) => {
+ const camelName = camelCase(tabName)
+ const TabContent = getTabComponent(camelName)
+
+ return TabContent && {
+ name: sentenceCase(camelName),
+ renderContent: props => TabContent({ ...props, tabProps })
+ }
+ })
+ ?.filter(Boolean))
+ }, [view])
+
+ if ((!data && !error) || loading) {
+ return
+ }
+
+ return (
+
+
+
+ )
+})
+
+VmTemplateTabs.propTypes = {
+ id: PropTypes.string.isRequired
+}
+
+VmTemplateTabs.displayName = 'VmTemplateTabs'
+
+export default VmTemplateTabs
diff --git a/src/fireedge/src/client/components/Tabs/index.js b/src/fireedge/src/client/components/Tabs/index.js
index 1b22e95138..473952ca65 100644
--- a/src/fireedge/src/client/components/Tabs/index.js
+++ b/src/fireedge/src/client/components/Tabs/index.js
@@ -22,7 +22,7 @@ import { Tabs as MTabs, Tab as MTab } from '@material-ui/core'
const Content = ({ name, renderContent: Content, hidden }) => (
(
)
const Tabs = ({ tabs = [], renderHiddenTabs = false }) => {
- const [tabSelected, setTab] = useState(() => 6)
+ const [tabSelected, setTab] = useState(() => 0)
const renderTabs = useMemo(() => (
+ }
+
+ return (
+
+ {}
+
+ )
+}
+
+export default ClusterDetail
diff --git a/src/fireedge/src/client/containers/Clusters/index.js b/src/fireedge/src/client/containers/Clusters/index.js
index 14ef763e78..42e82c8fd4 100644
--- a/src/fireedge/src/client/containers/Clusters/index.js
+++ b/src/fireedge/src/client/containers/Clusters/index.js
@@ -14,12 +14,19 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-
+import { useState } from 'react'
import { Container, Box } from '@material-ui/core'
import { ClustersTable } from 'client/components/Tables'
+import ClusterTabs from 'client/components/Tabs/Cluster'
+import SplitPane from 'client/components/SplitPane'
function Clusters () {
+ const [selectedRows, onSelectedRowsChange] = useState([])
+
+ const getRowIds = () =>
+ JSON.stringify(selectedRows?.map(row => row.id).join(', '), null, 2)
+
return (
-
+
+
+
+ {selectedRows?.length > 0 && (
+
+ {selectedRows?.length === 1
+ ?
+ :
{getRowIds()}
+ }
+
)
}
diff --git a/src/fireedge/src/client/containers/Groups/Detail.js b/src/fireedge/src/client/containers/Groups/Detail.js
new file mode 100644
index 0000000000..c8d58161e1
--- /dev/null
+++ b/src/fireedge/src/client/containers/Groups/Detail.js
@@ -0,0 +1,43 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, 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. *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import { useParams, Redirect } from 'react-router-dom'
+import { Container, Box } from '@material-ui/core'
+
+// import GroupTabs from 'client/components/Tabs/Group'
+
+function GroupDetail () {
+ const { id } = useParams()
+
+ if (Number.isNaN(+id)) {
+ return
+ }
+
+ return (
+
+ {/* */}
+ {id}
+
+ )
+}
+
+export default GroupDetail
diff --git a/src/fireedge/src/client/containers/Hosts/Detail.js b/src/fireedge/src/client/containers/Hosts/Detail.js
new file mode 100644
index 0000000000..36927ccfdb
--- /dev/null
+++ b/src/fireedge/src/client/containers/Hosts/Detail.js
@@ -0,0 +1,42 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, 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. *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import { useParams, Redirect } from 'react-router-dom'
+import { Container, Box } from '@material-ui/core'
+
+import HostTabs from 'client/components/Tabs/Host'
+
+function HostDetail () {
+ const { id } = useParams()
+
+ if (Number.isNaN(+id)) {
+ return
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default HostDetail
diff --git a/src/fireedge/src/client/containers/Hosts/index.js b/src/fireedge/src/client/containers/Hosts/index.js
index 169a448cbc..c98e22f979 100644
--- a/src/fireedge/src/client/containers/Hosts/index.js
+++ b/src/fireedge/src/client/containers/Hosts/index.js
@@ -14,12 +14,19 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-
+import { useState } from 'react'
import { Container, Box } from '@material-ui/core'
import { HostsTable } from 'client/components/Tables'
+import HostTabs from 'client/components/Tabs/Host'
+import SplitPane from 'client/components/SplitPane'
function Hosts () {
+ const [selectedRows, onSelectedRowsChange] = useState([])
+
+ const getRowIds = () =>
+ JSON.stringify(selectedRows?.map(row => row.id).join(', '), null, 2)
+
return (
-
+
+
+
+ {selectedRows?.length > 0 && (
+
+ {selectedRows?.length === 1
+ ?
+ :
{getRowIds()}
+ }
+
)
}
diff --git a/src/fireedge/src/client/containers/Users/Detail.js b/src/fireedge/src/client/containers/Users/Detail.js
new file mode 100644
index 0000000000..02d6ba6d43
--- /dev/null
+++ b/src/fireedge/src/client/containers/Users/Detail.js
@@ -0,0 +1,42 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, 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. *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import { useParams, Redirect } from 'react-router-dom'
+import { Container, Box } from '@material-ui/core'
+
+import UserTabs from 'client/components/Tabs/User'
+
+function UserDetail () {
+ const { id } = useParams()
+
+ if (Number.isNaN(+id)) {
+ return
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default UserDetail
diff --git a/src/fireedge/src/client/containers/VirtualMachines/Detail.js b/src/fireedge/src/client/containers/VirtualMachines/Detail.js
new file mode 100644
index 0000000000..a7d887b830
--- /dev/null
+++ b/src/fireedge/src/client/containers/VirtualMachines/Detail.js
@@ -0,0 +1,42 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2021, 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. *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import { useParams, Redirect } from 'react-router-dom'
+import { Container, Box } from '@material-ui/core'
+
+import VmTabs from 'client/components/Tabs/Vm'
+
+function VirtualMachineDetail () {
+ const { id } = useParams()
+
+ if (Number.isNaN(+id)) {
+ return
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default VirtualMachineDetail
diff --git a/src/fireedge/src/client/containers/VmTemplates/Instantiate.js b/src/fireedge/src/client/containers/VmTemplates/Instantiate.js
index 2dd05e9ca3..29820c6aad 100644
--- a/src/fireedge/src/client/containers/VmTemplates/Instantiate.js
+++ b/src/fireedge/src/client/containers/VmTemplates/Instantiate.js
@@ -14,14 +14,15 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
+import { useEffect } from 'react'
import { useHistory, useParams } from 'react-router'
-
import { Container } from '@material-ui/core'
import { useGeneralApi } from 'client/features/General'
-import { useVmTemplateApi } from 'client/features/One'
+import { useVmTemplateApi, useUserApi, useVmGroupApi } from 'client/features/One'
import { InstantiateForm } from 'client/components/Forms/VmTemplate'
import { PATH } from 'client/apps/sunstone/routesOne'
+import { isDevelopment } from 'client/utils'
function InstantiateVmTemplate () {
const history = useHistory()
@@ -29,27 +30,28 @@ function InstantiateVmTemplate () {
const initialValues = { template: { ID: templateId } }
const { enqueueInfo } = useGeneralApi()
+ const { getUsers } = useUserApi()
+ const { getVmGroups } = useVmGroupApi()
const { instantiate } = useVmTemplateApi()
- const onSubmit = async formData => {
- const {
- template: [{ ID, NAME }] = [],
- configuration: { name, instances, ...configuration } = {}
- } = formData
+ const onSubmit = async ([templateSelected, templates]) => {
+ try {
+ const { ID, NAME } = templateSelected
- await Promise.all([...new Array(instances)]
- .map((_, idx) => {
- const replacedName = name?.replace(/%idx/gi, idx)
- const data = { ...configuration, name: replacedName }
+ await Promise.all(templates.map(template => instantiate(ID, template)))
- return instantiate(ID, data)
- })
- )
-
- history.push(templateId ? PATH.TEMPLATE.VMS.LIST : PATH.INSTANCE.VMS.LIST)
- enqueueInfo(`VM Template instantiated x${instances} - ${NAME}`)
+ history.push(templateId ? PATH.TEMPLATE.VMS.LIST : PATH.INSTANCE.VMS.LIST)
+ enqueueInfo(`VM Template instantiated x${templates.length} - #${ID} ${NAME}`)
+ } catch (err) {
+ isDevelopment() && console.error(err)
+ }
}
+ useEffect(() => {
+ getUsers()
+ getVmGroups()
+ }, [])
+
return (
diff --git a/src/fireedge/src/client/containers/VmTemplates/index.js b/src/fireedge/src/client/containers/VmTemplates/index.js
index 0f53934a24..5428267d00 100644
--- a/src/fireedge/src/client/containers/VmTemplates/index.js
+++ b/src/fireedge/src/client/containers/VmTemplates/index.js
@@ -14,12 +14,20 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
+import { useState } from 'react'
import { Container, Box } from '@material-ui/core'
import { VmTemplatesTable } from 'client/components/Tables'
+import VmTemplateTabs from 'client/components/Tabs/VmTemplate'
+import SplitPane from 'client/components/SplitPane'
function VmTemplates () {
+ const [selectedRows, onSelectedRowsChange] = useState([])
+
+ const getRowIds = () =>
+ JSON.stringify(selectedRows?.map(row => row.id).join(', '), null, 2)
+
return (
-
+
+
+
+ {selectedRows?.length > 0 && (
+
+ {selectedRows?.length === 1
+ ?
+ :
{getRowIds()}
+ }
+