[grid] Showing more stereotype details in the Grid UI

Author: diemol

javascript/grid-ui/src/components/Node/NodeDetailsDialog.tsx

@@ -24,7 +24,6 @@ import {
   DialogContent,
   DialogTitle,
   IconButton,
-  Theme,
   Typography,
   withStyles
 } from '@material-ui/core'
@@ -34,7 +33,7 @@ import InfoIcon from '@material-ui/icons/Info'
 import OsLogo from '../common/OsLogo'
 import { StyleRules } from '@material-ui/core/styles'
 
-const useStyles = (theme: Theme): StyleRules => createStyles(
+const useStyles = (): StyleRules => createStyles(
   {
     buttonMargin: {
       padding: 1

javascript/grid-ui/src/components/Node/Stereotypes.tsx

@@ -16,26 +16,31 @@
 // under the License.
 
 import {
+  Badge,
   Box,
   createStyles,
   Grid,
-  Theme,
+  Tooltip,
   Typography,
   withStyles
 } from '@material-ui/core'
 import React, { ReactNode } from 'react'
 import StereotypeInfo from '../../models/stereotype-info'
 import BrowserLogo from '../common/BrowserLogo'
 import { StyleRules } from '@material-ui/core/styles'
+import OsLogo from '../common/OsLogo'
+import { Size } from '../../models/size'
 
-const useStyles = (theme: Theme): StyleRules => createStyles(
+const useStyles = (): StyleRules => createStyles(
   {
-    slotCount: {
-      marginBottom: 5
+    boxStyle: {
+      marginBottom: 5,
+      marginTop: 20,
+      marginRight: 35
     },
     browserVersion: {
       marginBottom: 5,
-      marginRight: 20
+      marginRight: 7
     }
   })
 
@@ -51,20 +56,19 @@ class Stereotypes extends React.Component<StereotypesProps, {}> {
     function CreateStereotypeGridItem (slotStereotype: StereotypeInfo, index: any): JSX.Element {
       return (
         <Grid item key={index}>
-          <Grid container alignItems='center' spacing={1}>
-            <Grid item>
-              <BrowserLogo browserName={slotStereotype.browserName} />
-            </Grid>
-            <Grid item>
-              <Typography className={classes.slotCount}>
-                {slotStereotype.slotCount}
-              </Typography>
-            </Grid>
-            <Grid item>
-              <Typography className={classes.browserVersion} variant='caption'>
-                {slotStereotype.browserVersion}
-              </Typography>
-            </Grid>
+          <Grid container alignItems="center" spacing={1}>
+            <Tooltip title={JSON.stringify(slotStereotype.rawData.stereotype)}>
+              <Badge badgeContent={slotStereotype.slotCount} color={'primary'}
+                     className={classes.boxStyle}>
+                <Grid item className={classes.browserVersion}>
+                  <OsLogo osName={slotStereotype.platformName} size={Size.XS}/>
+                  <BrowserLogo browserName={slotStereotype.browserName}/>
+                  <Typography variant="caption">
+                    {slotStereotype.browserVersion}
+                  </Typography>
+                </Grid>
+              </Badge>
+            </Tooltip>
           </Grid>
         </Grid>
       )

javascript/grid-ui/src/components/common/BrowserLogo.tsx

@@ -16,15 +16,16 @@
 // under the License.
 
 import React, { ReactNode } from 'react'
-import { StyleRules, Theme, withStyles } from '@material-ui/core/styles'
+import { StyleRules, withStyles } from '@material-ui/core/styles'
 import browserLogo from '../../util/browser-logo'
 import { Size } from '../../models/size'
 import clsx from 'clsx'
 
-const useStyles = (theme: Theme): StyleRules => (
+const useStyles = (): StyleRules => (
   {
     logo: {
-      marginRight: 0
+      marginRight: 0,
+      marginLeft: 0
     },
     small: {
       width: 24,

javascript/grid-ui/src/components/common/OsLogo.tsx

@@ -16,15 +16,20 @@
 // under the License.
 
 import React, { ReactNode } from 'react'
-import { StyleRules, Theme, withStyles } from '@material-ui/core/styles'
+import { StyleRules, withStyles } from '@material-ui/core/styles'
 import { Size } from '../../models/size'
 import osLogo from '../../util/os-logo'
 import clsx from 'clsx'
 
-const useStyles = (theme: Theme): StyleRules => (
+const useStyles = (): StyleRules => (
   {
     logo: {
-      marginRight: 5
+      marginRight: 0,
+      marginLeft: 0
+    },
+    xs: {
+      width: 16,
+      height: 16
     },
     small: {
       width: 24,
@@ -55,6 +60,9 @@ class OsLogo extends React.Component<OsLogoProps, {}> {
     const { osName, size, classes } = this.props ?? { osName: '' }
 
     function sizeMap (size): string {
+      if (size === Size.XS) {
+        return classes.xs
+      }
       if (size === Size.S) {
         return classes.small
       }

javascript/grid-ui/src/models/size.ts

@@ -16,6 +16,7 @@
 // under the License.
 
 export enum Size {
+  XS,
   S,
   M,
   L,

javascript/grid-ui/src/models/stereotype-info.ts

@@ -18,6 +18,7 @@
 interface StereotypeInfo {
   browserName: string
   browserVersion: string
+  platformName: string
   slotCount: number
   rawData: any
 }

javascript/grid-ui/src/screens/Overview/Overview.tsx

@@ -148,9 +148,11 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
 
       const slotStereotypes = (JSON.parse(node.stereotypes) as Array<StereoTypeData>).map((item) => {
         const slotStereotype: StereotypeInfo = {
-          browserName: item.stereotype.browserName,
+          browserName: item.stereotype.browserName ?? '',
           browserVersion: browserVersion(
             item.stereotype.browserVersion ?? item.stereotype.version),
+          platformName: (item.stereotype.platformName
+                        ?? item.stereotype.platform) ?? '',
           slotCount: item.slots,
           rawData: item
         }