From e6b26699be32541c112512edca8ede8220133963 Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Tue, 22 Jun 2021 09:18:49 +0200 Subject: [PATCH] F OpenNebula/one#5422: Add market table --- .../Tables/MarketplaceApps/columns.js | 12 ++++ .../Tables/MarketplaceApps/index.js | 33 +++++++++ .../components/Tables/MarketplaceApps/row.js | 71 +++++++++++++++++++ .../components/Tables/Marketplaces/columns.js | 9 +++ .../components/Tables/Marketplaces/index.js | 33 +++++++++ .../components/Tables/Marketplaces/row.js | 62 ++++++++++++++++ src/fireedge/src/client/models/Marketplace.js | 25 +++++++ .../src/client/models/MarketplaceApp.js | 36 ++++++++++ 8 files changed, 281 insertions(+) create mode 100644 src/fireedge/src/client/components/Tables/MarketplaceApps/columns.js create mode 100644 src/fireedge/src/client/components/Tables/MarketplaceApps/index.js create mode 100644 src/fireedge/src/client/components/Tables/MarketplaceApps/row.js create mode 100644 src/fireedge/src/client/components/Tables/Marketplaces/columns.js create mode 100644 src/fireedge/src/client/components/Tables/Marketplaces/index.js create mode 100644 src/fireedge/src/client/components/Tables/Marketplaces/row.js create mode 100644 src/fireedge/src/client/models/Marketplace.js create mode 100644 src/fireedge/src/client/models/MarketplaceApp.js diff --git a/src/fireedge/src/client/components/Tables/MarketplaceApps/columns.js b/src/fireedge/src/client/components/Tables/MarketplaceApps/columns.js new file mode 100644 index 0000000000..2778e21299 --- /dev/null +++ b/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' } +] diff --git a/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js b/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js new file mode 100644 index 0000000000..b8200c0bc1 --- /dev/null +++ b/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 ( + String(row.ID)} + RowComponent={MarketplaceAppRow} + /> + ) +} + +export default MarketplaceAppsTable diff --git a/src/fireedge/src/client/components/Tables/MarketplaceApps/row.js b/src/fireedge/src/client/components/Tables/MarketplaceApps/row.js new file mode 100644 index 0000000000..f53e7ded64 --- /dev/null +++ b/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 ( +
+
+ +
+
+ + {NAME} + {LOCK && } + + + + +
+ + {`#${ID} ${timeAgo}`} + + + + {` ${UNAME}`} + + + + {` ${GNAME}`} + + + + {` ${MARKETPLACE}`} + +
+
+
+ + + + +
+
+ ) +} + +Row.propTypes = { + value: PropTypes.object, + isSelected: PropTypes.bool, + handleClick: PropTypes.func +} + +export default Row diff --git a/src/fireedge/src/client/components/Tables/Marketplaces/columns.js b/src/fireedge/src/client/components/Tables/Marketplaces/columns.js new file mode 100644 index 0000000000..7a66cf99a4 --- /dev/null +++ b/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' } +] diff --git a/src/fireedge/src/client/components/Tables/Marketplaces/index.js b/src/fireedge/src/client/components/Tables/Marketplaces/index.js new file mode 100644 index 0000000000..76a534b382 --- /dev/null +++ b/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 ( + String(row.ID)} + RowComponent={MarketplaceRow} + /> + ) +} + +export default MarketplacesTable diff --git a/src/fireedge/src/client/components/Tables/Marketplaces/row.js b/src/fireedge/src/client/components/Tables/Marketplaces/row.js new file mode 100644 index 0000000000..139b9452b8 --- /dev/null +++ b/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 ( +
+
+ +
+
+ + {NAME} + + + + +
+ {`#${ID}`} + + + {` ${UNAME}`} + + + + {` ${GNAME}`} + + + + {` ${apps}`} + +
+
+
+ +
+
+ ) +} + +Row.propTypes = { + value: PropTypes.object, + isSelected: PropTypes.bool, + handleClick: PropTypes.func +} + +export default Row diff --git a/src/fireedge/src/client/models/Marketplace.js b/src/fireedge/src/client/models/Marketplace.js new file mode 100644 index 0000000000..7127e29f52 --- /dev/null +++ b/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 } +} diff --git a/src/fireedge/src/client/models/MarketplaceApp.js b/src/fireedge/src/client/models/MarketplaceApp.js new file mode 100644 index 0000000000..970f7ec795 --- /dev/null +++ b/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]