F OpenNebula/one#5422: Add DS table

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

@@ -1,72 +1,8 @@
-import * as React from 'react'
-
-import { LinearProgressWithLabel, StatusBadge } from 'client/components/Status'
-import * as DatastoreModel from 'client/models/Datastore'
-
 export default [
-  /* {
-    id: 'selection',
-    // The header can use the table's getToggleAllRowsSelectedProps method
-    // to render a checkbox.
-    // Pagination is a problem since this will select all rows even though
-    // not all rows are on the current page.
-    // The solution should be server side pagination.
-    // For one, the clients should not download all rows in most cases.
-    // The client should only download data for the current page.
-    // In that case, getToggleAllRowsSelectedProps works fine.
-    Header: ({ getToggleAllRowsSelectedProps }) => (
-      <CheckboxCell {...getToggleAllRowsSelectedProps()} />
-    ),
-    // The cell can use the individual row's getToggleRowSelectedProps method
-    // to the render a checkbox
-    Cell: ({ row }) => (
-      <CheckboxCell {...row.getToggleRowSelectedProps()} />
-    )
-  }, */
-  {
-    Header: '',
-    id: 'STATE',
-    width: 50,
-    accessor: row => {
-      const state = DatastoreModel.getState(row)
-
-      return (
-        <StatusBadge
-          title={state?.name}
-          stateColor={state?.color}
-          customTransform='translate(150%, 50%)'
-        />
-      )
-    }
-  },
-  { Header: '#', accessor: 'ID', width: 45 },
-  { Header: 'Name', accessor: 'NAME' },
-  {
-    Header: 'Type',
-    id: 'TYPE',
-    width: 100,
-    accessor: row => DatastoreModel.getType(row)?.name
-  },
-  {
-    Header: 'Owner/Group',
-    accessor: row => `${row.UNAME}/${row.GNAME}`
-  },
-  {
-    Header: 'Clusters',
-    id: 'CLUSTERS',
-    width: 100,
-    accessor: row => [row.CLUSTERS?.ID ?? []].flat().join(',')
-  },
-  {
-    Header: 'Allocated CPU',
-    accessor: row => {
-      const { percentOfUsed, percentLabel } = DatastoreModel.getCapacityInfo(row)
-
-      return (
-        <div style={{ paddingRight: '1em' }}>
-          <LinearProgressWithLabel value={percentOfUsed} label={percentLabel} />
-        </div>
-      )
-    }
-  }
+  { Header: '', accessor: 'ID' },
+  { Header: '', accessor: 'NAME' },
+  { Header: '', accessor: 'STATE' },
+  { Header: '', accessor: 'TYPE' },
+  { Header: '', accessor: 'CLUSTERS' },
+  { Header: '', accessor: 'ALLOCATED_CPU' }
 ]

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

@@ -5,11 +5,11 @@ import { useFetch } from 'client/hooks'
 import { useDatastore, useDatastoreApi } from 'client/features/One'
 
 import { EnhancedTable } from 'client/components/Tables'
-import { DatastoreCard } from 'client/components/Cards'
-import Columns from 'client/components/Tables/Datastores/columns'
+import DatastoreColumns from 'client/components/Tables/Datastores/columns'
+import DatastoreRow from 'client/components/Tables/Datastores/row'
 
 const DatastoresTable = () => {
-  const columns = React.useMemo(() => Columns, [])
+  const columns = React.useMemo(() => DatastoreColumns, [])
 
   const datastores = useDatastore()
   const { getDatastores } = useDatastoreApi()
@@ -24,7 +24,8 @@ const DatastoresTable = () => {
       columns={columns}
       data={datastores}
       isLoading={loading || reloading}
-      MobileComponentRow={DatastoreCard}
+      getRowId={row => String(row.ID)}
+      RowComponent={DatastoreRow}
     />
   )
 }

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

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import { User, Group, Lock, Cloud, Server } from 'iconoir-react'
+import { Typography } from '@material-ui/core'
+
+import { StatusCircle, LinearProgressWithLabel, StatusChip } from 'client/components/Status'
+import { rowStyles } from 'client/components/Tables/styles'
+
+import * as DatastoreModel from 'client/models/Datastore'
+
+const Row = ({ value, ...props }) => {
+  const classes = rowStyles()
+  const { ID, NAME, UNAME, GNAME, CLUSTERS, LOCK, TEMPLATE } = value
+  const { PROVISION } = TEMPLATE
+
+  const state = DatastoreModel.getState(value)
+  const type = DatastoreModel.getType(value)
+
+  const clusters = [CLUSTERS?.ID ?? []].flat()
+  const { percentOfUsed, percentLabel } = DatastoreModel.getCapacityInfo(value)
+
+  return (
+    <div {...props}>
+      <div>
+        <StatusCircle color={state?.color} tooltip={state?.name} />
+      </div>
+      <div className={classes.main}>
+        <Typography className={classes.title} component='span'>
+          {NAME}
+          <span className={classes.labels}>
+            {LOCK && <Lock size={20} />}
+            <StatusChip stateColor={'#c6c6c6'} text={type?.name} />
+          </span>
+        </Typography>
+        <div className={classes.caption}>
+          <span>{`#${ID}`}</span>
+          <span>
+            <User size={16} />
+            <span>{` ${UNAME}`}</span>
+          </span>
+          <span>
+            <Group size={16} />
+            <span>{` ${GNAME}`}</span>
+          </span>
+          {PROVISION?.ID && <span>
+            <Cloud size={16} />
+            <span>{` ${PROVISION.ID}`}</span>
+          </span>}
+          <span>
+            <Server size={16} />
+            <span>{` ${clusters.join(',')}`}</span>
+          </span>
+        </div>
+      </div>
+      <div className={classes.secondary}>
+        <LinearProgressWithLabel value={percentOfUsed} label={percentLabel} />
+      </div>
+    </div>
+  )
+}
+
+Row.propTypes = {
+  value: PropTypes.object,
+  isSelected: PropTypes.bool,
+  handleClick: PropTypes.func
+}
+
+export default Row