F OpenNebula/one#5422: Add market table

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

@@ -0,0 +1,12 @@
+export default [
+  { Header: '', accessor: 'ID' },
+  { Header: '', accessor: 'NAME' },
+  { Header: '', accessor: 'UNAME' },
+  { Header: '', accessor: 'GNAME' },
+  { Header: '', accessor: 'REGTIME' },
+  { Header: '', accessor: 'MARKETPLACE' },
+  { Header: '', accessor: 'STATE' },
+  { Header: '', accessor: 'TYPE' },
+  { Header: '', accessor: 'ZONE_ID' },
+  { Header: '', accessor: 'SIZE' }
+]

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

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react'
+
+import { useAuth } from 'client/features/Auth'
+import { useFetch } from 'client/hooks'
+import { useMarketplaceApp, useMarketplaceAppApi } from 'client/features/One'
+
+import { EnhancedTable } from 'client/components/Tables'
+import MarketplaceAppColumns from 'client/components/Tables/MarketplaceApps/columns'
+import MarketplaceAppRow from 'client/components/Tables/MarketplaceApps/row'
+
+const MarketplaceAppsTable = () => {
+  const columns = React.useMemo(() => MarketplaceAppColumns, [])
+
+  const marketplaceApps = useMarketplaceApp()
+  const { getMarketplaceApps } = useMarketplaceAppApi()
+  const { filterPool } = useAuth()
+
+  const { fetchRequest, loading, reloading } = useFetch(getMarketplaceApps)
+
+  useEffect(() => { fetchRequest() }, [filterPool])
+
+  return (
+    <EnhancedTable
+      columns={columns}
+      data={marketplaceApps}
+      isLoading={loading || reloading}
+      getRowId={row => String(row.ID)}
+      RowComponent={MarketplaceAppRow}
+    />
+  )
+}
+
+export default MarketplaceAppsTable

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

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import { Lock, User, Group, Cart } from 'iconoir-react'
+import { Typography } from '@material-ui/core'
+
+import { StatusCircle, StatusChip } from 'client/components/Status'
+import { rowStyles } from 'client/components/Tables/styles'
+
+import * as MarketplaceAppModel from 'client/models/MarketplaceApp'
+import * as Helper from 'client/models/Helper'
+import { prettyBytes } from 'client/utils'
+
+const Row = ({ value, ...props }) => {
+  const classes = rowStyles()
+  const { ID, NAME, UNAME, GNAME, LOCK, REGTIME, MARKETPLACE, ZONE_ID, SIZE } = value
+
+  const type = MarketplaceAppModel.getType(value)
+  const state = MarketplaceAppModel.getState(value)
+
+  const time = Helper.timeFromMilliseconds(+REGTIME)
+  const timeAgo = `registered ${time.toRelative()}`
+
+  return (
+    <div {...props}>
+      <div>
+        <StatusCircle color={state?.color} tooltip={state?.name} />
+      </div>
+      <div className={classes.main}>
+        <Typography className={classes.title} component='span'>
+          {NAME}
+          {LOCK && <Lock size={20} />}
+          <span className={classes.labels}>
+            <StatusChip stateColor={'#c6c6c6'} text={type} />
+          </span>
+        </Typography>
+        <div className={classes.caption}>
+          <span title={time.toFormat('ff')}>
+            {`#${ID} ${timeAgo}`}
+          </span>
+          <span>
+            <User size={16} />
+            <span>{` ${UNAME}`}</span>
+          </span>
+          <span>
+            <Group size={16} />
+            <span>{` ${GNAME}`}</span>
+          </span>
+          <span>
+            <Cart size={16} />
+            <span>{` ${MARKETPLACE}`}</span>
+          </span>
+        </div>
+      </div>
+      <div className={classes.secondary}>
+        <span className={classes.labels}>
+          <StatusChip stateColor={'#c6c6c6'} text={`Zone ${ZONE_ID}`} />
+          <StatusChip stateColor={'#c6c6c6'} text={prettyBytes(+SIZE, 'MB')} />
+        </span>
+      </div>
+    </div>
+  )
+}
+
+Row.propTypes = {
+  value: PropTypes.object,
+  isSelected: PropTypes.bool,
+  handleClick: PropTypes.func
+}
+
+export default Row

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

@@ -0,0 +1,9 @@
+export default [
+  { Header: '', accessor: 'ID' },
+  { Header: '', accessor: 'NAME' },
+  { Header: '', accessor: 'UNAME' },
+  { Header: '', accessor: 'GNAME' },
+  { Header: '', accessor: 'MARKET_MAD' },
+  { Header: '', accessor: 'ZONE_ID' },
+  { Header: '', accessor: 'MARKETPLACEAPPS' }
+]

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

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react'
+
+import { useAuth } from 'client/features/Auth'
+import { useFetch } from 'client/hooks'
+import { useMarketplace, useMarketplaceApi } from 'client/features/One'
+
+import { EnhancedTable } from 'client/components/Tables'
+import MarketplaceColumns from 'client/components/Tables/Marketplaces/columns'
+import MarketplaceRow from 'client/components/Tables/Marketplaces/row'
+
+const MarketplacesTable = () => {
+  const columns = React.useMemo(() => MarketplaceColumns, [])
+
+  const marketplaces = useMarketplace()
+  const { getMarketplaces } = useMarketplaceApi()
+  const { filterPool } = useAuth()
+
+  const { fetchRequest, loading, reloading } = useFetch(getMarketplaces)
+
+  useEffect(() => { fetchRequest() }, [filterPool])
+
+  return (
+    <EnhancedTable
+      columns={columns}
+      data={marketplaces}
+      isLoading={loading || reloading}
+      getRowId={row => String(row.ID)}
+      RowComponent={MarketplaceRow}
+    />
+  )
+}
+
+export default MarketplacesTable

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

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import { User, Group } 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 MarketplaceModel from 'client/models/Datastore'
+
+const Row = ({ value, ...props }) => {
+  const classes = rowStyles()
+  const { ID, NAME, UNAME, GNAME, MARKET_MAD, MARKETPLACEAPPS } = value
+
+  const { percentOfUsed, percentLabel } = MarketplaceModel.getCapacityInfo(value)
+
+  const state = MarketplaceModel.getState(value)
+  const apps = [MARKETPLACEAPPS?.ID ?? []].flat().length || 0
+
+  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}>
+            <StatusChip stateColor={'#c6c6c6'} text={MARKET_MAD} />
+          </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>
+          <span>
+            <Group size={16} />
+            <span>{` ${apps}`}</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

src/fireedge/src/client/models/Marketplace.js

@@ -0,0 +1,25 @@
+import { prettyBytes } from 'client/utils'
+import * as STATES from 'client/constants/states'
+import COLOR from 'client/constants/color'
+
+const MARKETPLACE_STATES = [
+  { // 0
+    name: STATES.ENABLED,
+    color: COLOR.success.main
+  },
+  { // 1
+    name: STATES.DISABLED,
+    color: COLOR.debug.main
+  }
+]
+
+export const getState = ({ STATE } = {}) => MARKETPLACE_STATES[+STATE]
+
+export const getCapacityInfo = ({ TOTAL_MB, USED_MB } = {}) => {
+  const percentOfUsed = +USED_MB * 100 / +TOTAL_MB || 0
+  const usedBytes = prettyBytes(+USED_MB, 'MB')
+  const totalBytes = prettyBytes(+TOTAL_MB, 'MB')
+  const percentLabel = `${usedBytes} / ${totalBytes} (${Math.round(percentOfUsed)}%)`
+
+  return { percentOfUsed, percentLabel }
+}

src/fireedge/src/client/models/MarketplaceApp.js

@@ -0,0 +1,36 @@
+import * as STATES from 'client/constants/states'
+import COLOR from 'client/constants/color'
+
+const MARKETPLACE_APP_TYPES = [
+  'UNKNOWN',
+  'IMAGE',
+  'VM TEMPLATE',
+  'SERVICE TEMPLATE'
+]
+
+const MARKETPLACE_APP_STATES = [
+  { // 0
+    name: STATES.INIT,
+    color: COLOR.info.main
+  },
+  { // 1
+    name: STATES.READY,
+    color: COLOR.success.main
+  },
+  { // 2
+    name: STATES.LOCKED,
+    color: COLOR.debug.main
+  },
+  { // 3
+    name: STATES.ERROR,
+    color: COLOR.error.main
+  },
+  { // 4
+    name: STATES.DISABLED,
+    color: COLOR.debug.light
+  }
+]
+
+export const getType = ({ TYPE = 0 } = {}) => MARKETPLACE_APP_TYPES[+TYPE]
+
+export const getState = ({ STATE } = {}) => MARKETPLACE_APP_STATES[+STATE]