diff --git a/src/fireedge/src/client/apps/sunstone/routes.js b/src/fireedge/src/client/apps/sunstone/routes.js index 29dac0c82b..88a6cb4213 100644 --- a/src/fireedge/src/client/apps/sunstone/routes.js +++ b/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 } ] }, diff --git a/src/fireedge/src/client/components/Tables/VNetworkTemplates/columns.js b/src/fireedge/src/client/components/Tables/VNetworkTemplates/columns.js new file mode 100644 index 0000000000..7f35c59ba8 --- /dev/null +++ b/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 + } + +] diff --git a/src/fireedge/src/client/components/Tables/VNetworkTemplates/index.js b/src/fireedge/src/client/components/Tables/VNetworkTemplates/index.js new file mode 100644 index 0000000000..85b292ca86 --- /dev/null +++ b/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 + } + + return ( + String(row.ID)} + RowComponent={VNetworkTemplateRow} + /> + ) +} + +export default VNetworkTemplatesTable diff --git a/src/fireedge/src/client/components/Tables/VNetworkTemplates/row.js b/src/fireedge/src/client/components/Tables/VNetworkTemplates/row.js new file mode 100644 index 0000000000..5f98ac8c5e --- /dev/null +++ b/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 ( +
+
+
+ + {NAME} + + + {LOCK && } + +
+
+ + {`#${ID} ${timeAgo}`} + + + + {` ${UNAME}`} + + + + {` ${GNAME}`} + + {PROVISION_ID && + + {` ${PROVISION_ID}`} + } +
+
+
+ ) +} + +Row.propTypes = { + original: PropTypes.object, + value: PropTypes.object, + isSelected: PropTypes.bool, + handleClick: PropTypes.func +} + +export default Row diff --git a/src/fireedge/src/client/components/Tables/index.js b/src/fireedge/src/client/components/Tables/index.js index 06967dbc16..c782cdad13 100644 --- a/src/fireedge/src/client/components/Tables/index.js +++ b/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 } diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Networking/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Networking/index.js index 8d5243db8e..9e6a32c389 100644 --- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Networking/index.js +++ b/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 ( diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Networking/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Networking/index.js index b0c1ab6697..a3e485926f 100644 --- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Networking/index.js +++ b/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) => ( diff --git a/src/fireedge/src/client/containers/VNetworkTemplates/index.js b/src/fireedge/src/client/containers/VNetworkTemplates/index.js new file mode 100644 index 0000000000..0eb52d9d0d --- /dev/null +++ b/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 ( + + + + ) +} + +export default VirtualMachines diff --git a/src/fireedge/src/client/features/One/vnetworkTemplate/actions.js b/src/fireedge/src/client/features/One/vnetworkTemplate/actions.js index b7f6f56843..a07eee8df5 100644 --- a/src/fireedge/src/client/features/One/vnetworkTemplate/actions.js +++ b/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 }) ) diff --git a/src/fireedge/src/client/features/One/vnetworkTemplate/hooks.js b/src/fireedge/src/client/features/One/vnetworkTemplate/hooks.js index 052bdaa2b8..854fd3e724 100644 --- a/src/fireedge/src/client/features/One/vnetworkTemplate/hooks.js +++ b/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()) } } diff --git a/src/fireedge/src/client/features/One/vnetworkTemplate/services.js b/src/fireedge/src/client/features/One/vnetworkTemplate/services.js index 065608acc2..7fa11ab8fa 100644 --- a/src/fireedge/src/client/features/One/vnetworkTemplate/services.js +++ b/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')