F OpenNebula/one#5422: Add clusters table

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' }
+]

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 (
+    <EnhancedTable
+      columns={columns}
+      data={clusters}
+      isLoading={loading || reloading}
+      getRowId={row => String(row.ID)}
+      RowComponent={ClusterRow}
+    />
+  )
+}
+
+export default ClustersTable

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 (
+    <div {...props}>
+      <div className={classes.main}>
+        <Typography className={classes.title} component='span'>
+          {NAME}
+        </Typography>
+        <div className={classes.caption}>
+          <span>{`#${ID}`}</span>
+          <span>
+            <HardDrive size={16} />
+            <span>{` ${hosts}`}</span>
+          </span>
+          <span>
+            <Folder size={16} />
+            <span>{` ${datastores}`}</span>
+          </span>
+          <span>
+            <NetworkAlt size={16} />
+            <span>{` ${virtualNetworks}`}</span>
+          </span>
+          {TEMPLATE?.PROVISION && <span>
+            <Cloud size={16} />
+            <span>{` ${TEMPLATE?.PROVISION?.PROVIDER_NAME}`}</span>
+          </span>}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Row.propTypes = {
+  value: PropTypes.object,
+  isSelected: PropTypes.bool,
+  handleClick: PropTypes.func
+}
+
+export default Row

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,

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 = () => {
 
       <Box py={2} overflow='auto'>
         <Switch>
-          <Route exact path={TABS.vms} component={VmsTable} />
+          <Route exact path={TABS.apps} component={MarketplaceAppsTable} />
+          <Route exact path={TABS.clusters} component={ClustersTable} />
           <Route exact path={TABS.datastores} component={DatastoresTable} />
           <Route exact path={TABS.hosts} component={HostsTable} />
-          <Route exact path={TABS.marketplaces} component={MarketplacesTable} />
-          <Route exact path={TABS.apps} component={MarketplaceAppsTable} />
           <Route exact path={TABS.images} component={ImagesTable} />
+          <Route exact path={TABS.marketplaces} component={MarketplacesTable} />
+          <Route exact path={TABS.vms} component={VmsTable} />
 
           <Route component={() => <Redirect to={TABS.vms} />} />
         </Switch>