[grid] Displaying an OS logo in the Grid UI

Author: diemol

javascript/grid-ui/src/assets/operating-systems/linux.svg

@@ -6,6 +6,9 @@ import operaBlinkLogo from "../../assets/browsers/opera.svg";
 import firefoxLogo from "../../assets/browsers/firefox.svg";
 import safariLogo from "../../assets/browsers/safari.svg";
 import safariTechnologyPreviewLogo from "../../assets/browsers/safari.svg";
+import macLogo from "../../assets/operating-systems/mac.svg";
+import windowsLogo from "../../assets/operating-systems/windows.svg";
+import linuxLogo from "../../assets/operating-systems/linux.svg";
 import InfoIcon from '@material-ui/icons/Info';
 import NodeType from "../../models/node";
 
@@ -50,6 +53,19 @@ const browserLogoPath = (browser: string): string => {
   }
 };
 
+const osLogoPath = (os: string): string => {
+  const osLowerCase: string = os.toLowerCase();
+  if (osLowerCase.includes("win")) {
+    return windowsLogo;
+  }
+  if (osLowerCase.includes("mac")) {
+    return macLogo;
+  }
+  if (osLowerCase.includes("nix") || osLowerCase.includes("nux") || osLowerCase.includes("aix")) {
+    return linuxLogo;
+  }
+  return "";
+};
 
 export default function Node(props) {
   const classes = useStyles();
@@ -59,8 +75,7 @@ export default function Node(props) {
   // Assuming we will put 3 stereotypes per column.
   const stereotypeColumns = Math.round(nodeInfo.slotStereotypes.length / 3);
   // Then we need to know how many columns we will display.
-  const columnWidth: GridSize = 6;
-  // const columnWidth = 12 / 12;
+  const columnWidth: GridSize = 12 / stereotypeColumns as any;
 
   return (
       <Card
@@ -92,7 +107,7 @@ export default function Node(props) {
               >
                 {/*TODO: User proper logos after getting OS info from backend*/}
                 <img
-                    src={chromeLogo}
+                    src={osLogoPath(nodeInfo.osInfo.name)}
                     className={classes.osLogo}
                     alt="OS Logo"
                 />
@@ -122,7 +137,6 @@ export default function Node(props) {
                             nodeInfo.slotStereotypes
                                 .slice(index * 3, Math.min((index * 3) + 3, nodeInfo.slotStereotypes.length))
                                 .map((slotStereotype: any, idx) => {
-                                  console.log(slotStereotype)
                                   return (<Typography
                                           color="textPrimary"
                                           variant="h6"

javascript/grid-ui/src/assets/operating-systems/mac.svg

@@ -9,6 +9,11 @@ query {
 			stereotypes
 			version
 			sessionCount
+			osInfo {
+				version
+				name
+				arch
+			}
 		}
 		totalSlots
 		usedSlots

javascript/grid-ui/src/assets/operating-systems/windows.svg

@@ -1,3 +1,4 @@
+import OsInfoType from "./os-info";
 import CapabilitiesType from "./capabilities";
 
 interface NodeType {
@@ -15,6 +16,8 @@ interface NodeType {
     sessionCount: number;
     /** Grid Node version */
     version: string;
+    /** Grid Node OS information */
+    osInfo: OsInfoType;
     /** Node stereotypes.
      * Not an ideal type, but it simplifies the parsing.
      * There is room for improvement here. */

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

@@ -0,0 +1,7 @@
+interface OsInfoType {
+    name: string;
+    version: string;
+    arch: string;
+}
+
+export default OsInfoType;

javascript/grid-ui/src/graphql/grid.gql

@@ -25,6 +25,7 @@ import Node from "../../components/Node/Node";
 import {useQuery} from "@apollo/client";
 import NodeType from "../../models/node";
 import {Link} from "@material-ui/core";
+import OsInfoType from "../../models/os-info";
 
 function Copyright() {
   return (
@@ -153,14 +154,20 @@ export default function Overview() {
 
   const gridVersion = data.grid.version;
   const nodes = data.grid.nodes.map((node) => {
+    const osInfo: OsInfoType = {
+      name: node.osInfo.name,
+      version: node.osInfo.version,
+      arch: node.osInfo.arch,
+    }
     const slotStereotypes = JSON.parse(node.stereotypes);
     const newNode: NodeType = {
       uri: node.uri,
-      capabilities: [],
       id: node.id,
+      capabilities: [],
       status: node.status,
       maxSession: node.maxSession,
       version: node.version,
+      osInfo: osInfo,
       sessionCount: node.sessionCount ?? 0,
       slotStereotypes: slotStereotypes,
     };

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

@@ -15,7 +15,7 @@ const theme = createMuiTheme({
       main: red.A400,
     },
     background: {
-      default: '#fff',
+      default: '#F7F8F8',
     },
   },
   typography