F OpenNebula/one#5422: Add vn templates table

src/fireedge/src/client/apps/sunstone/routes.js

@@ -14,7 +14,9 @@ import {
   SimpleCart as MarketplaceIcon,
   CloudDownload as MarketplaceAppIcon,
 
+  ServerConnection as NetworksIcon,
   NetworkAlt as NetworkIcon,
+  Combine as NetworkTemplateIcon,
 
   CloudSync as InfrastructureIcon,
   Server as ClusterIcon,
@@ -45,7 +47,7 @@ const Marketplaces = loadable(() => import('client/containers/Marketplaces'), {
 const MarketplaceApps = loadable(() => import('client/containers/MarketplaceApps'), { ssr: false })
 
 const VirtualNetworks = loadable(() => import('client/containers/VirtualNetworks'), { ssr: false })
-// const NetworkTemplates = loadable(() => import('client/containers/NetworkTemplates'), { ssr: false })
+const VNetworkTemplates = loadable(() => import('client/containers/VNetworkTemplates'), { ssr: false })
 // const NetworkTopologies = loadable(() => import('client/containers/NetworkTopologies'), { ssr: false })
 // const SecurityGroups = loadable(() => import('client/containers/SecurityGroups'), { ssr: false })
 
@@ -191,7 +193,7 @@ export const ENDPOINTS = [
   {
     label: 'Networks',
     sidebar: true,
-    icon: NetworkIcon,
+    icon: NetworksIcon,
     routes: [
       {
         label: 'Virtual Networks',
@@ -199,6 +201,13 @@ export const ENDPOINTS = [
         sidebar: true,
         icon: NetworkIcon,
         Component: VirtualNetworks
+      },
+      {
+        label: 'Network Templates',
+        path: PATH.NETWORK.VN_TEMPLATES.LIST,
+        sidebar: true,
+        icon: NetworkTemplateIcon,
+        Component: VNetworkTemplates
       }
     ]
   },

src/fireedge/src/client/components/Tables/VNetworkTemplates/columns.js

@@ -0,0 +1,15 @@
+export default [
+  { Header: 'ID', accessor: 'ID', sortType: 'number' },
+  { Header: 'Name', accessor: 'NAME' },
+  { Header: 'Owner', accessor: 'UNAME' },
+  { Header: 'Group', accessor: 'GNAME' },
+  { Header: 'Locked', accessor: 'LOCK' },
+  { Header: 'Registration Time', accessor: 'REGTIME' },
+  {
+    Header: 'Provision ID',
+    id: 'PROVISION_ID',
+    accessor: row => row?.TEMPLATE?.PROVISION?.ID,
+    disableSortBy: true
+  }
+
+]

src/fireedge/src/client/components/Tables/VNetworkTemplates/index.js

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react'
+
+import { useFetch } from 'client/hooks'
+import { useVNetworkTemplate, useVNetworkTemplateApi } from 'client/features/One'
+
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
+import VNetworkTemplateColumns from 'client/components/Tables/VNetworkTemplates/columns'
+import VNetworkTemplateRow from 'client/components/Tables/VNetworkTemplates/row'
+
+const VNetworkTemplatesTable = () => {
+  const columns = React.useMemo(() => VNetworkTemplateColumns, [])
+
+  const vNetworkTemplates = useVNetworkTemplate()
+  const { getVNetworkTemplates } = useVNetworkTemplateApi()
+
+  const { status, fetchRequest, loading, reloading, STATUS } = useFetch(getVNetworkTemplates)
+  const { INIT, PENDING } = STATUS
+
+  useEffect(() => { fetchRequest() }, [])
+
+  if (vNetworkTemplates?.length === 0 && [INIT, PENDING].includes(status)) {
+    return <SkeletonTable />
+  }
+
+  return (
+    <EnhancedTable
+      columns={columns}
+      data={vNetworkTemplates}
+      isLoading={loading || reloading}
+      getRowId={row => String(row.ID)}
+      RowComponent={VNetworkTemplateRow}
+    />
+  )
+}
+
+export default VNetworkTemplatesTable

src/fireedge/src/client/components/Tables/VNetworkTemplates/row.js

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import { User, Group, Lock, Cloud } from 'iconoir-react'
+import { Typography } from '@material-ui/core'
+
+import { rowStyles } from 'client/components/Tables/styles'
+
+import * as Helper from 'client/models/Helper'
+
+const Row = ({ original, value, ...props }) => {
+  const classes = rowStyles()
+  const { ID, NAME, UNAME, GNAME, LOCK, REGTIME, PROVISION_ID } = value
+
+  const time = Helper.timeFromMilliseconds(+REGTIME)
+  const timeAgo = `registered ${time.toRelative()}`
+
+  return (
+    <div {...props}>
+      <div className={classes.main}>
+        <div className={classes.title}>
+          <Typography className={classes.titleText} component='span'>
+            {NAME}
+          </Typography>
+          <span className={classes.labels}>
+            {LOCK && <Lock size={20} />}
+          </span>
+        </div>
+        <div className={classes.caption}>
+          <span title={time.toFormat('ff')}>
+            {`#${ID} ${timeAgo}`}
+          </span>
+          <span title={`Owner: ${UNAME}`}>
+            <User size={16} />
+            <span>{` ${UNAME}`}</span>
+          </span>
+          <span title={`Group: ${GNAME}`}>
+            <Group size={16} />
+            <span>{` ${GNAME}`}</span>
+          </span>
+          {PROVISION_ID && <span title={`Provision ID: #${PROVISION_ID}`}>
+            <Cloud size={16} />
+            <span>{` ${PROVISION_ID}`}</span>
+          </span>}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Row.propTypes = {
+  original: PropTypes.object,
+  value: PropTypes.object,
+  isSelected: PropTypes.bool,
+  handleClick: PropTypes.func
+}
+
+export default Row

src/fireedge/src/client/components/Tables/index.js

@@ -12,6 +12,7 @@ import VirtualizedTable from 'client/components/Tables/Virtualized'
 import VmsTable from 'client/components/Tables/Vms'
 import VmTemplatesTable from 'client/components/Tables/VmTemplates'
 import VNetworksTable from 'client/components/Tables/VNetworks'
+import VNetworkTemplatesTable from 'client/components/Tables/VNetworkTemplates'
 
 export {
   SkeletonTable,
@@ -28,5 +29,6 @@ export {
   UsersTable,
   VmsTable,
   VmTemplatesTable,
-  VNetworksTable
+  VNetworksTable,
+  VNetworkTemplatesTable
 }

src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Networking/index.js

@@ -25,7 +25,7 @@ const Networks = () => ({
     const [showDialog, setShowDialog] = useState(false)
 
     const { getVNetworks } = useVNetworkApi()
-    const { getVNetworksTemplates } = useVNetworkTemplateApi()
+    const { getVNetworkTemplates } = useVNetworkTemplateApi()
 
     const {
       editingData,
@@ -42,7 +42,7 @@ const Networks = () => ({
 
     useEffect(() => {
       getVNetworks()
-      getVNetworksTemplates()
+      getVNetworkTemplates()
     }, [])
 
     return (

src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Networking/index.js

@@ -17,11 +17,11 @@ const Networks = () => ({
   optionsValidate: { abortEarly: false },
   content: useCallback(({ data }) => {
     const { getVNetworks } = useVNetworkApi()
-    const { getVNetworksTemplates } = useVNetworkTemplateApi()
+    const { getVNetworkTemplates } = useVNetworkTemplateApi()
 
     useEffect(() => {
       getVNetworks()
-      getVNetworksTemplates()
+      getVNetworkTemplates()
     }, [])
 
     return data?.map(({ id, name, description }, index) => (

src/fireedge/src/client/containers/VNetworkTemplates/index.js

@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+import { Container, Box } from '@material-ui/core'
+
+import * as Tables from 'client/components/Tables'
+
+function VirtualMachines () {
+  return (
+    <Box
+      height={1}
+      py={2}
+      overflow='auto'
+      display='flex'
+      flexDirection='column'
+      component={Container}
+    >
+      <Tables.VNetworkTemplatesTable />
+    </Box>
+  )
+}
+
+export default VirtualMachines

src/fireedge/src/client/features/One/vnetworkTemplate/actions.js

@@ -7,8 +7,8 @@ export const getVNetworkTemplate = createAction(
   vNetworkTemplateService.getVNetworkTemplate
 )
 
-export const getVNetworksTemplates = createAction(
+export const getVNetworkTemplates = createAction(
   'vnet-template/pool',
-  vNetworkTemplateService.getVNetworksTemplates,
+  vNetworkTemplateService.getVNetworkTemplates,
   response => ({ [RESOURCES.vntemplate]: response })
 )

src/fireedge/src/client/features/One/vnetworkTemplate/hooks.js

@@ -19,6 +19,6 @@ export const useVNetworkTemplateApi = () => {
 
   return {
     getVNetworkTemplate: id => unwrapDispatch(actions.getVNetworkTemplate({ id })),
-    getVNetworksTemplates: () => unwrapDispatch(actions.getVNetworksTemplates())
+    getVNetworkTemplates: () => unwrapDispatch(actions.getVNetworkTemplates())
   }
 }

src/fireedge/src/client/features/One/vnetworkTemplate/services.js

@@ -17,7 +17,7 @@ export const vNetworkTemplateService = ({
       return res?.data?.VNTEMPLATE ?? {}
     })
   },
-  getVNetworksTemplates: data => {
+  getVNetworkTemplates: data => {
     const name = Actions.VNTEMPLATE_POOL_INFO
     const command = { name, ...Commands[name] }
     return poolRequest(data, command, 'VNTEMPLATE')