make GlobalView render from the provided SystemState

closes #1286

packages/ott-vis-datasource/tsconfig.json

@@ -2,6 +2,8 @@
 	"extends": "./.config/tsconfig.json",
 	"compilerOptions": {
 		"strict": true,
-		"typeRoots": ["../../node_modules/@types"]
+		"typeRoots": ["../../node_modules/@types"],
+		"esModuleInterop": true,
+		"jsx": "react",
 	}
 }

packages/ott-vis/src/aggregate.spec.ts

@@ -0,0 +1,109 @@
+import { SystemState } from "types";
+import { aggMonolithRooms, countRoomClients } from "./aggregate";
+
+const sampleSystemState: SystemState = [
+	{
+		id: "154d9d41-128c-45ab-83d8-28661882c9e3",
+		region: "ewr",
+		monoliths: [
+			{
+				id: "2bd5e4a7-14f6-4da4-bedd-72946864a7bf",
+				region: "ewr",
+				rooms: [
+					{name: "foo", clients: 2},
+					{name: "bar", clients: 0},
+				],
+			},
+			{
+				id: "419580cb-f576-4314-8162-45340c94bae1",
+				region: "ewr",
+				rooms: [
+					{name: "baz", clients: 3},
+				]
+			},
+			{
+				id: "0c85b46e-d343-46a3-ae4f-5f2aa1a8bdac",
+				region: "cdg",
+				rooms: [
+					{name: "qux", clients: 0},
+				]
+			}
+		],
+	},
+	{
+		id: "c91d183c-980e-4160-b196-43658148f469",
+		region: "ewr",
+		monoliths: [
+			{
+				id: "2bd5e4a7-14f6-4da4-bedd-72946864a7bf",
+				region: "ewr",
+				rooms: [
+					{name: "foo", clients: 1},
+					{name: "bar", clients: 2},
+				],
+			},
+			{
+				id: "419580cb-f576-4314-8162-45340c94bae1",
+				region: "ewr",
+				rooms: [
+					{name: "baz", clients: 0},
+				]
+			},
+			{
+				id: "0c85b46e-d343-46a3-ae4f-5f2aa1a8bdac",
+				region: "cdg",
+				rooms: [
+					{name: "qux", clients: 0},
+				]
+			}
+		],
+	},
+	{
+		id: "5a2e3b2d-f27b-4e3d-9b59-c921442f7ff0",
+		region: "cdg",
+		monoliths: [
+			{
+				id: "2bd5e4a7-14f6-4da4-bedd-72946864a7bf",
+				region: "ewr",
+				rooms: [
+					{name: "foo", clients: 0},
+					{name: "bar", clients: 0},
+				],
+			},
+			{
+				id: "419580cb-f576-4314-8162-45340c94bae1",
+				region: "ewr",
+				rooms: [
+					{name: "baz", clients: 0},
+				]
+			},
+			{
+				id: "0c85b46e-d343-46a3-ae4f-5f2aa1a8bdac",
+				region: "cdg",
+				rooms: [
+					{name: "qux", clients: 4},
+				]
+			}
+		],
+	},
+]
+
+describe("aggregation helpers", () => {
+	it("counts room clients", () => {
+		expect(countRoomClients(sampleSystemState)).toEqual({
+			foo: 3,
+			bar: 2,
+			baz: 3,
+			qux: 4,
+		});
+	});
+
+	it("aggregates monolith rooms", () => {
+		expect(aggMonolithRooms(sampleSystemState)).toEqual({
+			"2bd5e4a7-14f6-4da4-bedd-72946864a7bf": ["foo", "bar"],
+			"419580cb-f576-4314-8162-45340c94bae1": ["baz"],
+			"0c85b46e-d343-46a3-ae4f-5f2aa1a8bdac": ["qux"],
+		});
+	});
+});
+

packages/ott-vis/src/aggregate.ts

@@ -0,0 +1,36 @@
+import { SystemState } from "types";
+
+/**
+ * Builds a map of room names to the number of clients in each room from the room state.
+ * @param state
+ */
+export function countRoomClients(state: SystemState): Record<string, number> {
+	const roomClients: Record<string, number> = {};
+	for (const balancer of state) {
+		for (const monolith of balancer.monoliths) {
+			for (const room of monolith.rooms) {
+				roomClients[room.name] = (roomClients[room.name] ?? 0) + room.clients;
+			}
+		}
+	}
+	return roomClients;
+}
+
+/**
+ * Collect a map of monolith ids to room names.
+ * @param state
+ * @returns
+ */
+export function aggMonolithRooms(state: SystemState): Record<string, string[]> {
+	const roomClients: Record<string, Set<string>> = {};
+	for (const balancer of state) {
+		for (const monolith of balancer.monoliths) {
+			for (const room of monolith.rooms) {
+				const s = roomClients[monolith.id] ?? new Set();
+				s.add(room.name);
+				roomClients[monolith.id] = s;
+			}
+		}
+	}
+	return Object.fromEntries(Object.entries(roomClients).map(([k, v]) => [k, Array.from(v)]));
+}

packages/ott-vis/src/components/CorePanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { PanelProps } from "@grafana/data";
-import type { CoreOptions } from "types";
+import type { CoreOptions, SystemState } from "types";
 import { css, cx } from "@emotion/css";
 import { useStyles2 } from "@grafana/ui";
 import GlobalView from "./views/GlobalView";
@@ -28,14 +28,103 @@ const getStyles = () => {
 	};
 };
 
+const sampleSystemState: SystemState = [
+	{
+		id: "154d9d41-128c-45ab-83d8-28661882c9e3",
+		region: "ewr",
+		monoliths: [
+			{
+				id: "2bd5e4a7-14f6-4da4-bedd-72946864a7bf",
+				region: "ewr",
+				rooms: [
+					{name: "foo", clients: 2},
+					{name: "bar", clients: 0},
+				],
+			},
+			{
+				id: "419580cb-f576-4314-8162-45340c94bae1",
+				region: "ewr",
+				rooms: [
+					{name: "baz", clients: 3},
+				]
+			},
+			{
+				id: "0c85b46e-d343-46a3-ae4f-5f2aa1a8bdac",
+				region: "cdg",
+				rooms: [
+					{name: "qux", clients: 0},
+				]
+			}
+		],
+	},
+	{
+		id: "c91d183c-980e-4160-b196-43658148f469",
+		region: "ewr",
+		monoliths: [
+			{
+				id: "2bd5e4a7-14f6-4da4-bedd-72946864a7bf",
+				region: "ewr",
+				rooms: [
+					{name: "foo", clients: 1},
+					{name: "bar", clients: 2},
+				],
+			},
+			{
+				id: "419580cb-f576-4314-8162-45340c94bae1",
+				region: "ewr",
+				rooms: [
+					{name: "baz", clients: 0},
+				]
+			},
+			{
+				id: "0c85b46e-d343-46a3-ae4f-5f2aa1a8bdac",
+				region: "cdg",
+				rooms: [
+					{name: "qux", clients: 0},
+				]
+			}
+		],
+	},
+	{
+		id: "5a2e3b2d-f27b-4e3d-9b59-c921442f7ff0",
+		region: "cdg",
+		monoliths: [
+			{
+				id: "2bd5e4a7-14f6-4da4-bedd-72946864a7bf",
+				region: "ewr",
+				rooms: [
+					{name: "foo", clients: 0},
+					{name: "bar", clients: 0},
+				],
+			},
+			{
+				id: "419580cb-f576-4314-8162-45340c94bae1",
+				region: "ewr",
+				rooms: [
+					{name: "baz", clients: 0},
+				]
+			},
+			{
+				id: "0c85b46e-d343-46a3-ae4f-5f2aa1a8bdac",
+				region: "cdg",
+				rooms: [
+					{name: "qux", clients: 4},
+				]
+			}
+		],
+	},
+]
+
+
+
 export const CorePanel: React.FC<Props> = ({ options, data, width, height }) => {
 	const styles = useStyles2(getStyles);
 
 	let view;
 	if (options.view === "global") {
-		view = <GlobalView height={height} width={width} systemState={[]} />;
+		view = <GlobalView height={height} width={width} systemState={sampleSystemState} />;
 	} else if (options.view === "region") {
-		view = <RegionView height={height} width={width} systemState={[]} />;
+		view = <RegionView height={height} width={width} systemState={sampleSystemState} />;
 	} else {
 		view = <div>Invalid view</div>;
 	}