Added Table in Summary Page that groups by titleID

src/Home/Home.tsx

@@ -6,6 +6,7 @@ import { GameServerBuild } from "../types";
 import GameServerBuildsSummary from "./GameServerBuildsSummary";
 import TotalSummary from "./TotalSummary";
 import { fetchWithTimeout } from "../utils";
+import TitlesSummary, { TitlesDetail } from "./TitlesSummary";
 
 interface HomeProps {
   clusters: Record<string, Record<string, string>>
@@ -15,35 +16,53 @@ function Home({ clusters }: HomeProps) {
   const [gsbMap, setGsbMap] = useState<Map<string, Array<GameServerBuild>>>(new Map());
   const [errors, setErrors] = useState<Set<string>>(new Set());
 
-  const groupValues = (data: Map<string, Array<GameServerBuild>>): [Record<string, number>, Record<string, Record<string, number>>, Record<string, Record<string, number>>] => {
+  const groupValues = (data: Map<string, Array<GameServerBuild>>): [Record<string, number>, Record<string, Record<string, number>>, Record<string, Record<string, number>>, TitlesDetail] => {
+
     function emptyValues() {
       return {
         standingBy: 0,
-        active: 0
+        active: 0,
+        pending: 0,
+        initializing: 0,
       }
     };
     let total: Record<string, number> = emptyValues();
     let perCluster: Record<string, Record<string, number>> = {};
     let perBuild: Record<string, Record<string, number>> = {};
+    let perTitle: TitlesDetail = {};
+
     const keys = Array.from(data.keys());
     keys.forEach((clusterName) => {
       if (!perCluster[clusterName]) {
         perCluster[clusterName] = emptyValues();
       }
       data.get(clusterName)!.forEach((gsb: GameServerBuild) => {
         let buildName = gsb.metadata.name;
+        let titleId = gsb.spec.titleID;
         if (!perBuild[buildName]) {
           perBuild[buildName] = emptyValues();
         }
+        if (!perTitle[titleId]) {
+          perTitle[titleId] = { ...emptyValues(), status: "Healthy" };  
+        }
+
         total.standingBy += gsb.status.currentStandingBy ? gsb.status.currentStandingBy : 0;
-        perCluster[clusterName].standingBy += gsb.status.currentStandingBy ? gsb.status.currentStandingBy : 0;
-        perBuild[buildName].standingBy += gsb.status.currentStandingBy ? gsb.status.currentStandingBy : 0;
         total.active += gsb.status.currentActive ? gsb.status.currentActive : 0;
+
+        perTitle[titleId].standingBy += gsb.status.currentStandingBy ? gsb.status.currentStandingBy : 0;
+        perTitle[titleId].active = gsb.status.currentActive ? gsb.status.currentActive : 0;
+        perTitle[titleId].pending = gsb.status.currentPending ? gsb.status.currentPending : 0;
+        perTitle[titleId].initializing = gsb.status.currentInitializing ? gsb.status.currentInitializing : 0;
+        perTitle[titleId].status = gsb.status.health === "Healthy" ? "Healthy" : gsb.status.health === "Unhealthy" ? "Unhealthy" : "Unknown";
+
+        perCluster[clusterName].standingBy += gsb.status.currentStandingBy ? gsb.status.currentStandingBy : 0;
         perCluster[clusterName].active += gsb.status.currentActive ? gsb.status.currentActive : 0;
+
+        perBuild[buildName].standingBy += gsb.status.currentStandingBy ? gsb.status.currentStandingBy : 0;
         perBuild[buildName].active += gsb.status.currentActive ? gsb.status.currentActive : 0;
       });
     });
-    return [total, perCluster, perBuild];
+    return [total, perCluster, perBuild, perTitle];
   }
 
   const getAllBuilds = useCallback(() => {
@@ -89,7 +108,7 @@ function Home({ clusters }: HomeProps) {
     return () => clearInterval(interval);
   }, [getAllBuilds]);
 
-  const [total, perCluster, perBuild] = useMemo(() => groupValues(gsbMap), [gsbMap]);
+  const [total, perCluster, perBuild, perTitle] = useMemo(() => groupValues(gsbMap), [gsbMap]);
   const errorMessages = useMemo(() => {
     const errorsArray = Array.from(errors).sort();
     return errorsArray.map((error, index) =>
@@ -120,6 +139,10 @@ function Home({ clusters }: HomeProps) {
         Builds
       </Typography>
       <GameServerBuildsSummary perBuild={perBuild} />
+      <Typography variant="h5" gutterBottom component="div">
+        Titles
+      </Typography>
+      <TitlesSummary perTitle={perTitle} />
     </React.Fragment>
   );
 }

src/Home/TitleSummaryItem.tsx

@@ -0,0 +1,29 @@
+import { TableCell, TableRow } from "@mui/material";
+
+interface TitleSummaryItemProps {
+  titleInfo: {
+    id: string,
+    details: {
+        active: number,
+        pending: number,
+        initializing: number,
+        standingBy: number,
+        status: "Healthy" | "Unhealthy" | "Unknown"
+    }
+  }
+}
+
+function TitleSummaryItem({ titleInfo }: TitleSummaryItemProps) {
+  return (
+    <TableRow>
+      <TableCell>{titleInfo.id}</TableCell>
+      <TableCell>{titleInfo.details.status}</TableCell>
+      <TableCell>{titleInfo.details.pending}</TableCell>
+      <TableCell>{titleInfo.details.initializing}</TableCell>
+      <TableCell>{titleInfo.details.standingBy}</TableCell>
+      <TableCell>{titleInfo.details.active}</TableCell>
+    </TableRow>
+  );
+}
+
+export default TitleSummaryItem;

src/Home/TitlesSummary.tsx

@@ -0,0 +1,47 @@
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { useMemo } from "react";
+import TitleSummaryItem from "./TitleSummaryItem";
+
+export interface TitlesDetail {
+    [name: string]: {
+        active: number,
+        standingBy: number,
+        pending: number,
+        initializing: number,
+        status: "Healthy" | "Unhealthy" | "Unknown"
+    }
+}
+
+export interface TitlesSummaryProps {
+    perTitle: TitlesDetail
+}
+
+function TitlesSummary({ perTitle }: TitlesSummaryProps) {
+    const items = useMemo(() => {
+        const keys = Object.keys(perTitle).sort();
+        return keys.map((titleId, index) => <TitleSummaryItem key={index} titleInfo={{ id: titleId, details: perTitle[titleId] }} />);
+      }, [perTitle]);
+
+    return (
+        <TableContainer component={Paper} sx={{ marginBottom: "40px" }}>
+          <Table sx={{ minWidth: 500 }}>
+            <TableHead>
+              <TableRow>
+                <TableCell>Title ID</TableCell>
+                <TableCell>Status</TableCell>
+                <TableCell>Pending</TableCell>
+                <TableCell>Initializing</TableCell>
+                <TableCell>Standing By</TableCell>
+                <TableCell>Active</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {items}  
+            </TableBody>
+          </Table>
+        </TableContainer>
+      );
+}
+
+
+export default TitlesSummary;

src/tests/ClusterDetail.test.tsx

@@ -15,6 +15,7 @@ const gameServerBuilds: Array<GameServerBuild> = [
     },
     spec: {
       buildID: "85ffe8da-c82f-4035-86c5-9d2b5f42d6f6",
+      titleID: "test-game",
       standingBy: 0,
       max: 0,
       portsToExpose: [],

src/tests/GameServerBuildDetail.test.tsx

@@ -15,6 +15,7 @@ const gameServerBuild: GameServerBuild = {
   },
   spec: {
     buildID: "85ffe8da-c82f-4035-86c5-9d2b5f42d6f6",
+    titleID: "test-game",
     standingBy: 2,
     max: 4,
     portsToExpose: [80],

src/tests/Home.test.tsx

@@ -15,6 +15,7 @@ const gameServerBuildsCluster1: Array<GameServerBuild> = [
     },
     spec: {
       buildID: "85ffe8da-c82f-4035-86c5-9d2b5f42d6f6",
+      titleID: "test-game1",
       standingBy: 2,
       max: 4,
       portsToExpose: [80],
@@ -42,6 +43,7 @@ const gameServerBuildsCluster1: Array<GameServerBuild> = [
     },
     spec: {
       buildID: "85ffe8da-c82f-4035-86c5-9d2b5f42d6f6",
+      titleID: "test-game2",
       standingBy: 2,
       max: 4,
       portsToExpose: [80],
@@ -72,6 +74,7 @@ const gameServerBuildsCluster2: Array<GameServerBuild> = [
     },
     spec: {
       buildID: "85ffe8da-c82f-4035-86c5-9d2b5f42d6f6",
+      titleID: "test-game1",
       standingBy: 2,
       max: 4,
       portsToExpose: [80],
@@ -99,6 +102,7 @@ const gameServerBuildsCluster2: Array<GameServerBuild> = [
     },
     spec: {
       buildID: "85ffe8da-c82f-4035-86c5-9d2b5f42d6f6",
+      titleID: "test-game2",
       standingBy: 2,
       max: 4,
       portsToExpose: [80],

src/types.tsx

@@ -7,6 +7,7 @@ interface GameServerBuild {
   },
   spec: {
     buildID: string,
+    titleID: string,
     standingBy: number,
     max: number,
     portsToExpose: Array<number>,
@@ -60,6 +61,7 @@ const emptyGameServerBuild: GameServerBuild = {
   },
   spec: {
     buildID: "",
+    titleID: "",
     standingBy: 0,
     max: 0,
     portsToExpose: [],