Create MCC telemetry page

gs/frontend/mcc/package.json

@@ -23,10 +23,12 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-table": "^8.21.3",
+    "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",
     "react": "^19.1.1",
+    "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.8.2",
     "react-toastify": "^11.0.5",

gs/frontend/mcc/src/App.tsx

@@ -8,6 +8,7 @@ import Dashboard from "./pages/Dashboard";
 import AROAdmin from "./pages/AROAdmin";
 import LiveSession from "./pages/LiveSession";
 import Login from "./pages/Login";
+import Telemetry from "./pages/Telemetry/Telemetry";
 import PageNotFound from "./components/PageNotFound";
 
 /**
@@ -25,6 +26,7 @@ function App() {
         <Route path="/telemetry-data" element={<AROAdmin />} />
         <Route path="/aro-requests" element={<LiveSession />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/telemetry" element={<Telemetry />} />
         <Route path="*" element={<PageNotFound />} />
       </Routes>
       <ToastContainer />

gs/frontend/mcc/src/pages/Telemetry/Telemetry.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  telemetryTypes,
+  telemetrySubtypes,
+  telemetryData,
+  type TelemetryDataType,
+} from "../../utils/mockTelemetryData"; // TODO: Create API to fetch real telemetry data
+import TypeSelector from "./components/TypeSelector";
+import SubtypeSelector from "./components/SubtypeSelector";
+import Table from "../../components/Table";
+import { createColumnHelper } from "@tanstack/react-table";
+import TelemetryChart from "./components/TelemetryChart";
+import ThesholdSelector from "./components/ThesholdSelector";
+
+const columnHelper = createColumnHelper<TelemetryDataType>();
+
+// TODO: Update columns as per real telemetry data structure when available
+const columns = [
+  columnHelper.accessor("session", {
+    header: "Session",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("telemetry", {
+    header: "Telemetry",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("type", {
+    header: "Type",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("packet", {
+    header: "Packet",
+    cell: (info) => info.getValue(),
+  }),
+];
+
+/**
+ * @brief Page for displaying telemetry data in a table and chart with options to select telemetry type, subtype, and threshold.
+ */
+function Telemetry() {
+  const [type, setType] = React.useState(`${telemetryTypes[0]}`);
+  const [subTypeList, setSubTypeList] = React.useState<string[]>(
+    telemetrySubtypes[type]
+  );
+  const [threshold, setThreshold] = React.useState<string | number>(0);
+  const [selectedSubTypeList, setSelectedSubTypeList] =
+    React.useState<string[]>(subTypeList);
+
+  const selectedData = telemetryData[type].filter((row) => selectedSubTypeList.includes(row.type));
+
+  return (
+    <div className="mt-30 mx-8">
+      <div className="gap-x-6 flex items-center justify-start">
+        <TypeSelector
+          type={type}
+          setType={setType}
+          setSubType={setSubTypeList}
+          setSelectedSubTypeList={setSelectedSubTypeList}
+        />
+        <ThesholdSelector threshold={threshold} setThreshold={setThreshold} />
+      </div>
+      <div className="flex my-10 gap-x-7">
+        <SubtypeSelector
+          subTypeList={subTypeList}
+          selectedSubTypeList={selectedSubTypeList}
+          setSelectedSubTypeList={setSelectedSubTypeList}
+        />
+        <div className="min-w-2/5 max-w-1/2">
+          <Table
+            data={selectedData}
+            columns={columns}
+            showFilters={true}
+          />
+        </div>
+        <TelemetryChart
+          type={type}
+          telemetryData={selectedData}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Telemetry;

gs/frontend/mcc/src/pages/Telemetry/components/SubtypeSelector.tsx

@@ -0,0 +1,41 @@
+/**
+ * @brief Component for selecting telemetry subtype(s) available for a given telemetry type
+ */
+function SubtypeSelector({
+  subTypeList,
+  selectedSubTypeList,
+  setSelectedSubTypeList,
+}: {
+  subTypeList: string[];
+  selectedSubTypeList: string[];
+  setSelectedSubTypeList: (selectedSubTypeList: string[]) => void;
+}) {
+  return (
+    <div className="max-w-30 mt-0 flex flex-col gap-y-3">
+      {subTypeList.map((st) => (
+        <div key={st} className="flex gap-x-2">
+          <input
+            type="checkbox"
+            id={st}
+            name={st}
+            value={st}
+            checked={selectedSubTypeList.includes(st)}
+            onChange={(e) => {
+              if (e.target.checked) {
+                if (!selectedSubTypeList.includes(st)) {
+                  setSelectedSubTypeList([...selectedSubTypeList, st]);
+                  console.log(selectedSubTypeList);
+                }
+              } else {
+                setSelectedSubTypeList(selectedSubTypeList.filter((item) => item !== st));
+              }
+            }}
+          />
+          <label htmlFor={st}>{st}</label>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default SubtypeSelector;