F #3951: Add widget with providers per type (#662)

src/fireedge/src/client/components/Cards/ApplicationTemplateCard.js

@@ -10,7 +10,7 @@ import {
   CardActions
 } from '@material-ui/core'
 import FileIcon from '@material-ui/icons/Description'
-import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'
+import HostIcon from '@material-ui/icons/Computer'
 import AccountTreeIcon from '@material-ui/icons/AccountTree'
 
 import SelectCard from 'client/components/Cards/SelectCard'
@@ -51,7 +51,7 @@ const ApplicationTemplateCard = memo(
               badgeContent={numberOfTiers}
               anchorOrigin={badgePosition}
             >
-              <VideogameAssetIcon />
+              <HostIcon />
             </Badge>
             <Badge
               showZero

src/fireedge/src/client/components/Cards/ClusterCard.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { makeStyles, Badge, Box, CardContent } from '@material-ui/core'
 import {
   Storage as ClusterIcon,
-  VideogameAsset as HostIcon,
+  Computer as HostIcon,
   AccountTree as NetworkIcon,
   FolderOpen as DatastoreIcon
 } from '@material-ui/icons'

src/fireedge/src/client/components/Cards/HostCard.js

@@ -1,8 +1,8 @@
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 
-import { makeStyles, Chip, Box, Typography } from '@material-ui/core'
-import HostIcon from '@material-ui/icons/VideogameAsset'
+import { makeStyles, Typography } from '@material-ui/core'
+import { Computer as HostIcon } from '@material-ui/icons'
 
 import SelectCard from 'client/components/Cards/SelectCard'
 import { StatusBadge, StatusChip } from 'client/components/Status'

src/fireedge/src/client/components/DebugLog/ansiHtml.js

@@ -1,4 +1,5 @@
 // Reference to https://github.com/sindresorhus/ansi-regex
+// eslint-disable-next-line no-control-regex
 var _regANSI = /(?:(?:\u001b\[)|\u009b)(?:(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?[A-M|f-m])|\u001b[A-M]/
 
 var _defColors = {

src/fireedge/src/client/components/DebugLog/message.js

@@ -1,4 +1,4 @@
-import React, { memo, useState, useRef } from 'react'
+import React, { memo, useState } from 'react'
 import PropTypes from 'prop-types'
 import clsx from 'clsx'
 

src/fireedge/src/client/components/Sidebar/SidebarLink.js

@@ -14,6 +14,8 @@ import { useGeneral } from 'client/hooks'
 import sidebarStyles from 'client/components/Sidebar/styles'
 import { DevTypography } from 'client/components/Typography'
 
+const STATIC_LABEL_PROPS = { 'data-cy': 'main-menu-item-text' }
+
 const SidebarLink = ({ label, path, icon: Icon, devMode, isSubItem }) => {
   const classes = sidebarStyles()
   const history = useHistory()
@@ -25,7 +27,6 @@ const SidebarLink = ({ label, path, icon: Icon, devMode, isSubItem }) => {
     history.push(path)
     !isUpLg && fixMenu(false)
   }
-  const labelProps = {'data-cy':"main-menu-item-text"}
   return (
     <ListItem
       button
@@ -34,7 +35,7 @@ const SidebarLink = ({ label, path, icon: Icon, devMode, isSubItem }) => {
       selected={pathname === path}
       className={clsx({ [classes.subItem]: isSubItem })}
       classes={{ selected: classes.itemSelected }}
-      data-cy="main-menu-item"
+      data-cy='main-menu-item'
     >
       {Icon && (
         <ListItemIcon className={classes.itemIcon}>
@@ -42,9 +43,9 @@ const SidebarLink = ({ label, path, icon: Icon, devMode, isSubItem }) => {
         </ListItemIcon>
       )}
       <ListItemText
-        disableTypography = {devMode}
-        primaryTypographyProps={labelProps}
-        primary={devMode ? <DevTypography label={label} labelProps={labelProps}/> : label}
+        disableTypography={devMode}
+        primaryTypographyProps={STATIC_LABEL_PROPS}
+        primary={devMode ? <DevTypography label={label} labelProps={STATIC_LABEL_PROPS}/> : label}
       />
     </ListItem>
   )

src/fireedge/src/client/components/Sidebar/index.js

@@ -63,15 +63,15 @@ const Sidebar = memo(({ endpoints }) => {
           [classes.drawerFixed]: isFixMenu
         })
       }}
-      anchor="left"
+      anchor='left'
       open={isFixMenu}
     >
       <Box className={classes.header}>
         <Logo
-          width="100%"
+          width='100%'
           height={100}
           withText
-          viewBox="0 0 640 640"
+          viewBox='0 0 640 640'
           className={classes.svg}
         />
         <IconButton
@@ -83,7 +83,7 @@ const Sidebar = memo(({ endpoints }) => {
       </Box>
       <Divider />
       <Box className={classes.menu}>
-        <List className={classes.list} disablePadding data-cy="main-menu">
+        <List className={classes.list} disablePadding data-cy='main-menu'>
           {SidebarEndpoints}
         </List>
       </Box>

src/fireedge/src/client/components/Widgets/TotalProviders/index.js

@@ -1,37 +1,33 @@
 import * as React from 'react'
 
 import { PieChart } from 'react-minimal-pie-chart'
-import { Typography, useTheme, lighten, Paper } from '@material-ui/core'
-import { Public as ProvidersIcon } from '@material-ui/icons'
+import { Typography, Paper } from '@material-ui/core'
 
 import { useProvision } from 'client/hooks'
 import { TypographyWithPoint } from 'client/components/Typography'
 import Count from 'client/components/Count'
-import { get } from 'client/utils'
-import { T } from 'client/constants'
+import { groupBy } from 'client/utils'
+import { T, PROVIDERS_TYPES } from 'client/constants'
 
 import useStyles from 'client/components/Widgets/TotalProviders/styles'
 
 const TotalProviders = () => {
-  const { providers, provisions } = useProvision()
+  const { providers } = useProvision()
 
   const classes = useStyles()
-  const theme = useTheme()
-  const usedColor = theme.palette.secondary.main
-  const bgColor = lighten(theme.palette.background.paper, 0.8)
 
-  const totalProviders = React.useMemo(() => providers.length, [providers])
+  const totalProviders = React.useMemo(() => providers.length, [providers.length])
 
-  const usedProviders = React.useMemo(() =>
-    provisions
-      ?.map(provision => get(provision, 'TEMPLATE.BODY.provider'))
-      ?.filter((provision, idx, self) => self.indexOf(provision) === idx)
-      ?.length ?? 0
-  , [provisions])
+  const chartData = React.useMemo(() => {
+    const groups = groupBy(providers, 'TEMPLATE.PLAIN.provider')
 
-  const usedPercent = React.useMemo(() =>
-    totalProviders !== 0 ? (usedProviders * 100) / totalProviders : 0
-  , [totalProviders, usedProviders])
+    console.log({ groups })
+    return PROVIDERS_TYPES?.map(({ name, color }) => ({
+      color,
+      title: name,
+      value: groups[name]?.length ?? 0
+    }))
+  }, [totalProviders])
 
   const title = React.useMemo(() => (
     <div className={classes.title}>
@@ -47,39 +43,33 @@ const TotalProviders = () => {
 
   const legend = React.useMemo(() => (
     <div>
-      <TypographyWithPoint pointColor={usedColor}>
-        <Count number={`${usedProviders}`} />
-      </TypographyWithPoint>
-      <Typography className={classes.legendSecondary}>
-        {T.Used}
-      </Typography>
+      {chartData?.map(({ title: titleLegend, value, color }) =>
+        <div key={titleLegend}>
+          <TypographyWithPoint pointColor={color}>
+            <Count number={`${value}`} />
+            <Typography component='span' className={classes.legendSecondary}>
+              {titleLegend}
+            </Typography>
+          </TypographyWithPoint>
+        </div>
+      )}
     </div>
-  ), [classes, usedProviders])
+  ), [classes, chartData])
 
   const chart = React.useMemo(() => (
     <PieChart
       className={classes.chart}
-      background={bgColor}
-      data={[{ value: 1, key: 1, color: usedColor }]}
-      reveal={usedPercent}
-      lineWidth={20}
-      lengthAngle={270}
+      background={totalProviders === 0 && '#c3c3c3'}
+      data={chartData}
+      lineWidth={18}
       rounded
       animate
-      label={({ dataIndex }) => (
-        <ProvidersIcon
-          key={dataIndex}
-          x={25} y={25} width='50'height='50'
-          style={{ fill: bgColor }}
-        />
-      )}
-      labelPosition={0}
     />
-  ), [classes, usedPercent])
+  ), [classes, chartData])
 
   return (
     <Paper
-      data-cy='dashboard-widget-total-providers-by-state'
+      data-cy='dashboard-widget-total-providers-by-type'
       className={classes.root}
     >
       {title}

src/fireedge/src/client/components/Widgets/TotalProvisionInfrastructures.js

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import {
   Storage as ClusterIcon,
-  VideogameAsset as HostIcon,
+  Computer as HostIcon,
   FolderOpen as DatastoreIcon,
   AccountTree as NetworkIcon
 } from '@material-ui/icons'

src/fireedge/src/client/constants/provision.js

@@ -27,3 +27,14 @@ export const PROVISIONS_STATES = [
     meaning: ''
   }
 ]
+
+export const PROVIDERS_TYPES = [
+  {
+    name: 'aws',
+    color: '#ef931f'
+  },
+  {
+    name: 'packet',
+    color: '#364562'
+  }
+]

src/fireedge/src/client/containers/Provisions/DialogInfo/index.js

@@ -5,7 +5,7 @@ import { AppBar, Tabs, Tab, Box } from '@material-ui/core'
 import InfoIcon from '@material-ui/icons/Info'
 import DatastoreIcon from '@material-ui/icons/FolderOpen'
 import NetworkIcon from '@material-ui/icons/AccountTree'
-import HostIcon from '@material-ui/icons/VideogameAsset'
+import HostIcon from '@material-ui/icons/Computer'
 import LogIcon from '@material-ui/icons/InsertDriveFile'
 
 import InfoTab from 'client/containers/Provisions/DialogInfo/info'