From a6fb6bdd5d6bcfcdbf5c0455032f1342f3ca998a Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Tue, 22 Jun 2021 09:51:06 +0200 Subject: [PATCH] F OpenNebula/one#5422: Add clusters table --- .../components/Tables/Clusters/columns.js | 7 +++ .../components/Tables/Clusters/index.js | 33 ++++++++++++ .../client/components/Tables/Clusters/row.js | 53 +++++++++++++++++++ .../src/client/components/Tables/index.js | 2 + .../src/client/containers/Newstone/index.js | 21 ++++---- 5 files changed, 107 insertions(+), 9 deletions(-) create mode 100644 src/fireedge/src/client/components/Tables/Clusters/columns.js create mode 100644 src/fireedge/src/client/components/Tables/Clusters/index.js create mode 100644 src/fireedge/src/client/components/Tables/Clusters/row.js diff --git a/src/fireedge/src/client/components/Tables/Clusters/columns.js b/src/fireedge/src/client/components/Tables/Clusters/columns.js new file mode 100644 index 0000000000..4e432ce0f6 --- /dev/null +++ b/src/fireedge/src/client/components/Tables/Clusters/columns.js @@ -0,0 +1,7 @@ +export default [ + { Header: '', accessor: 'ID' }, + { Header: '', accessor: 'NAME' }, + { Header: '', accessor: 'HOSTS' }, + { Header: '', accessor: 'DATASTORES' }, + { Header: '', accessor: 'VNETS' } +] diff --git a/src/fireedge/src/client/components/Tables/Clusters/index.js b/src/fireedge/src/client/components/Tables/Clusters/index.js new file mode 100644 index 0000000000..190f1c2148 --- /dev/null +++ b/src/fireedge/src/client/components/Tables/Clusters/index.js @@ -0,0 +1,33 @@ +import React, { useEffect } from 'react' + +import { useAuth } from 'client/features/Auth' +import { useFetch } from 'client/hooks' +import { useCluster, useClusterApi } from 'client/features/One' + +import { EnhancedTable } from 'client/components/Tables' +import ClusterColumns from 'client/components/Tables/Clusters/columns' +import ClusterRow from 'client/components/Tables/Clusters/row' + +const ClustersTable = () => { + const columns = React.useMemo(() => ClusterColumns, []) + + const clusters = useCluster() + const { getClusters } = useClusterApi() + const { filterPool } = useAuth() + + const { fetchRequest, loading, reloading } = useFetch(getClusters) + + useEffect(() => { fetchRequest() }, [filterPool]) + + return ( + String(row.ID)} + RowComponent={ClusterRow} + /> + ) +} + +export default ClustersTable diff --git a/src/fireedge/src/client/components/Tables/Clusters/row.js b/src/fireedge/src/client/components/Tables/Clusters/row.js new file mode 100644 index 0000000000..8d30ab1fc7 --- /dev/null +++ b/src/fireedge/src/client/components/Tables/Clusters/row.js @@ -0,0 +1,53 @@ +import * as React from 'react' +import PropTypes from 'prop-types' + +import { HardDrive, NetworkAlt, Folder, Cloud } from 'iconoir-react' +import { Typography } from '@material-ui/core' + +import { rowStyles } from 'client/components/Tables/styles' + +const Row = ({ value, ...props }) => { + const classes = rowStyles() + const { ID, NAME, HOSTS, DATASTORES, VNETS, TEMPLATE } = value + + const hosts = [HOSTS?.ID ?? []].flat().length || 0 + const datastores = [DATASTORES?.ID ?? []].flat().length || 0 + const virtualNetworks = [VNETS?.ID ?? []].flat().length || 0 + + return ( +
+
+ + {NAME} + +
+ {`#${ID}`} + + + {` ${hosts}`} + + + + {` ${datastores}`} + + + + {` ${virtualNetworks}`} + + {TEMPLATE?.PROVISION && + + {` ${TEMPLATE?.PROVISION?.PROVIDER_NAME}`} + } +
+
+
+ ) +} + +Row.propTypes = { + 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 d6ca395ab1..c6136a7566 100644 --- a/src/fireedge/src/client/components/Tables/index.js +++ b/src/fireedge/src/client/components/Tables/index.js @@ -1,3 +1,4 @@ +import ClustersTable from 'client/components/Tables/Clusters' import DatastoresTable from 'client/components/Tables/Datastores' import EnhancedTable from 'client/components/Tables/Enhanced' import HostsTable from 'client/components/Tables/Hosts' @@ -11,6 +12,7 @@ export { EnhancedTable, VirtualizedTable, + ClustersTable, DatastoresTable, HostsTable, ImagesTable, diff --git a/src/fireedge/src/client/containers/Newstone/index.js b/src/fireedge/src/client/containers/Newstone/index.js index 054749f22b..ddb10365b1 100644 --- a/src/fireedge/src/client/containers/Newstone/index.js +++ b/src/fireedge/src/client/containers/Newstone/index.js @@ -6,23 +6,25 @@ import { Redirect, Route, Switch, Link } from 'react-router-dom' import { Container, Tabs, Tab, Box } from '@material-ui/core' import { + ClustersTable, DatastoresTable, HostsTable, - VmsTable, - MarketplacesTable, + ImagesTable, MarketplaceAppsTable, - ImagesTable + MarketplacesTable, + VmsTable } from 'client/components/Tables' import { PATH } from 'client/router/dev' const TABS = { - vms: PATH.NEWSTONE.replace(':resource', 'vms'), + apps: PATH.NEWSTONE.replace(':resource', 'apps'), + clusters: PATH.NEWSTONE.replace(':resource', 'clusters'), datastores: PATH.NEWSTONE.replace(':resource', 'datastores'), hosts: PATH.NEWSTONE.replace(':resource', 'hosts'), + images: PATH.NEWSTONE.replace(':resource', 'images'), marketplaces: PATH.NEWSTONE.replace(':resource', 'marketplaces'), - apps: PATH.NEWSTONE.replace(':resource', 'apps'), - images: PATH.NEWSTONE.replace(':resource', 'images') + vms: PATH.NEWSTONE.replace(':resource', 'vms') } const Newstone = () => { @@ -54,12 +56,13 @@ const Newstone = () => { - + + - - + + } />