[COMP-336] : UI changes for monitoring tools graph

compendium-frontend/src/App.tsx

@@ -20,6 +20,7 @@ import ServicesPage from "./pages/Services";
 import {ConnectivityCategory, ServiceCategory} from "./Schema";
 import ConnectedUserPage from "./pages/ConnectedUser";
 import FibreLightPage from "./pages/FibreLight";
+import MonitoringToolsPage from "./pages/MonitoringTools";
 
 const router = createBrowserRouter([
   { path: "/budget", element: <BudgetPage /> },
@@ -51,6 +52,7 @@ const router = createBrowserRouter([
   { path: "/storage-and-hosting-services", element: <ServicesPage category={ServiceCategory.storage_and_hosting} /> },
   { path: "/professional-services", element: <ServicesPage category={ServiceCategory.professional_services} /> },
   { path: "/fibre-light", element: <FibreLightPage /> },
+  { path: "/monitoring-tools", element: <MonitoringToolsPage /> },
   { path: "*", element: <Landing /> },
 ]);
 

compendium-frontend/src/Schema.tsx

@@ -41,6 +41,11 @@ export interface FibreLight extends NrenAndYearDatapoint {
     light_description: (string | null)
 }
 
+export interface MonitoringTools extends NrenAndYearDatapoint {
+    tool_descriptions: (string | null)[],
+    netflow_processing_description: (string | null)
+}
+
 export interface NrenStaff extends NrenAndYearDatapoint {
     permanent_fte: number,
     subcontracted_fte: number,

compendium-frontend/src/components/NetworkSidebar.tsx

@@ -14,7 +14,12 @@ const NetworkSidebar = () => {
             </Row>
             <Row>
                 <Link to="/fibre-light" className="link-text-underline">
-                    <span>Fibre Operation Model</span>
+                    <span>Approaches to lighting NREN fibre networks</span>
+                </Link>
+            </Row>
+            <Row>
+                <Link to="/monitoring-tools" className="link-text-underline">
+                    <span>Tools for Monitoring or Troubleshooting the Network - Offered to Client Institutions</span>
                 </Link>
             </Row>
         </Sidebar>

compendium-frontend/src/helpers/dataconversion.tsx

@@ -405,9 +405,34 @@ export function createMatrixDataLookup<Datatype extends NrenAndYearDatapoint>(da
         nrenEntry.set(entry[columnProperty], serviceEntry);
         dataLookup.set(entry.nren, nrenEntry);
     });
+    // console.log('dataLookup----->', dataLookup);
     return dataLookup;
 }
 
+export function createMatrixDataLookupForArrayColumnType<Datatype extends NrenAndYearDatapoint>(data: Datatype[], columnPropertyName: string) {
+    const dataLookup = new Map<string, Map<string, Map<number, Datatype>>>();
+
+    data.forEach(entry => {
+        let nrenEntry = dataLookup.get(entry.nren) ?? new Map<string, Map<number, Datatype>>();
+
+        // Iterate over the array and set each element as a key in the map
+        const columnPropertyArray = entry[columnPropertyName];
+        columnPropertyArray.forEach((element: string) => {
+            let serviceEntry = nrenEntry.get(element);
+            if (!serviceEntry) {
+                serviceEntry = new Map<number, Datatype>();
+            }
+            serviceEntry.set(entry.year, entry);
+            nrenEntry.set(element, serviceEntry);
+        });
+
+        dataLookup.set(entry.nren, nrenEntry);
+    });
+    // console.log('createMatrixDataLookupForArrayColumnType-->',dataLookup)
+    return dataLookup;
+}
+    
+
 export function createConnectivityDataLookup<Datatype extends NrenAndYearDatapoint>(data: Datatype[], columnProperty: string,) {
     const dataLookup = new Map<string, Map<string, Map<number, Datatype>>>();
 

compendium-frontend/src/pages/CompendiumData.tsx

@@ -145,7 +145,12 @@ function CompendiumData(): ReactElement {
                                 </Row>
                                 <Row>
                                     <Link to="/fibre-light" className="link-text-underline">
-                                        <span>Fibre Operation Model</span>
+                                        <span>Approaches to lighting NREN fibre networks</span>
+                                    </Link>
+                                </Row>
+                                <Row>
+                                    <Link to="/monitoring-tools" className="link-text-underline">
+                                        <span>Tools for Monitoring or Troubleshooting the Network - Offered to Client Institutions</span>
                                     </Link>
                                 </Row>                                
                             </div>

compendium-frontend/src/pages/FibreLight.tsx

@@ -31,10 +31,9 @@ function FibreLightPage(): React.ReactElement {
     const showYears = [...filterSelection.selectedYears.filter(year => years.has(year))].sort();
 
     return (
-        <DataPage title="Fibre Operation Model"
-            description="[TBD] The fibre operation model is the way in which NRENs charge their customers for the services they provide.
-         The charging structure can be based on a flat fee, usage based fee, a combination of both, or no direct charge. 
-         By selecting multiple years and NRENs, the table can be used to compare the charging structure of NRENs."
+        <DataPage title="Approaches to lighting NREN fibre networks"
+            description="This graphic shows the different ways NRENs can light their fibre networks. 
+            The option 'Other' is given, with extra information if you hover over the icon."
             category={Sections.Network} filter={filterNode}
             data={selectedData} filename="fibre_light_of_nrens_per_year">
             <>

compendium-frontend/src/pages/MonitoringTools.tsx

+import React, { useContext } from "react";
+import { Table } from "react-bootstrap";
+
+import {  MonitoringTools } from "../Schema";
+import { createMatrixDataLookupForArrayColumnType } from "../helpers/dataconversion";
+import ColorPill from "../components/ColorPill";
+import DataPage from "../components/DataPage";
+import Filter from "../components/graphing/Filter";
+import { Sections } from "../helpers/constants";
+import { FilterSelectionContext } from "../helpers/FilterSelectionProvider";
+import ChartContainer from "../components/graphing/ChartContainer";
+import { useData } from "../helpers/useData";
+
+function MonitoringToolsPage(): React.ReactElement {
+    const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
+    const { data: fibreLightData, years, nrens } = useData<MonitoringTools>('/api/monitoring-tools/', setFilterSelection);
+
+    const selectedData = (fibreLightData).filter(data =>
+        filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
+    );
+
+    const toolDescriptionsDataLookup = createMatrixDataLookupForArrayColumnType(selectedData, 'tool_descriptions');
+
+    const filterNode = <Filter
+        filterOptions={{ availableYears: [...years], availableNrens: [...nrens.values()] }}
+        filterSelection={filterSelection}
+        setFilterSelection={setFilterSelection}
+        coloredYears
+    />
+
+    const showYears = [...filterSelection.selectedYears.filter(year => years.has(year))].sort();
+
+    return (
+        <DataPage title="Tools for Monitoring or Troubleshooting the Network - Offered to Client Institutions"
+            description="The table below shows which tools the NREN offers to client institutions to allow them to monitor the network and troubleshoot any issues which arise. 
+            Four common tools are named, however NRENs also have the opportunity to add their own tools to the table."
+            category={Sections.Network} filter={filterNode}
+            data={selectedData} filename="monitoring_tools_nrens_per_year">
+            <>
+                <ChartContainer>
+                    <Table className="charging-struct-table" striped bordered responsive>
+                        <colgroup>
+                            <col span={1} style={{ width: "10%" }} />
+                            <col span={1} style={{ width: "18%" }} />
+                            <col span={1} style={{ width: "18%" }} />
+                            <col span={1} style={{ width: "18%" }} />
+                            <col span={1} style={{ width: "18%" }} />
+                            <col span={1} style={{ width: "18%" }} />
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th>Looking Glass</th>
+                                <th>Network or Services Status Dashboard</th>
+                                <th>Historical traffic volume information</th>
+                                <th>Netflow analysis tool</th>
+                                <th>Other</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {Array.from(toolDescriptionsDataLookup.entries()).map(([nren, nrenMap]) => (
+                                <tr key={nren}>
+                                    <td>{nren}</td>
+                                    {["Looking Glass", 
+                                    "Network or services Status Dashboard", 
+                                    "Historical traffic volume information",
+                                    "Netflow analysis tool"].map(column_key => (
+                                        <td key={column_key}>
+                                            {nrenMap.has(column_key) &&
+                                                showYears.map(year => {
+                                                    const chargingYears = nrenMap.get(column_key)!;
+                                                    const yearData = chargingYears.get(year);
+                                                    const tooltip = column_key === "Netflow analysis tool" 
+                                                    && yearData && yearData.netflow_processing_description 
+                                                    ? yearData.netflow_processing_description : "";
+                                                    return <ColorPill key={year} year={year} active={chargingYears.has(year)} tooltip={tooltip}/>;
+                                                })
+                                            }
+                                        </td>
+                                    ))}
+                                    <td>
+                                        {Array.from(nrenMap.keys()).filter(key => !["Looking Glass", 
+                                    "Network or services Status Dashboard", 
+                                    "Historical traffic volume information",
+                                    "Netflow analysis tool"].includes(key)).map(other_key => (
+                                        <div key={other_key}>
+                                            {Array.from(nrenMap.get(other_key)!).map(([year, fibreLight]) => (
+                                                <ColorPill key={year} year={year} active={true} tooltip={other_key} />
+                                            ))}
+                                        </div>
+                                        ))}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </Table>
+                </ChartContainer>
+            </>
+        </DataPage>
+    );
+}
+export default MonitoringToolsPage;