[COMP-360]: Network tasks - automation

compendium-frontend/src/pages/NetworkAutomation.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import { Table } from "react-bootstrap";
 
 import { NetworkAutomation } from "../Schema";
-import { createMatrixDataLookupForArrayColumnType } from "../helpers/dataconversion";
+import { createMatrixDataLookupForArrayColumnType, createMatrixDataLookup } from "../helpers/dataconversion";
 import ColorPill from "../components/ColorPill";
 import DataPage from "../components/DataPage";
 import Filter from "../components/graphing/Filter";
@@ -19,7 +19,7 @@ function NetworkAutomationPage(): React.ReactElement {
         filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
     );
 
-    const dataLookup = createMatrixDataLookupForArrayColumnType(selectedData, 'network_automation_specifics');
+    const dataLookup = createMatrixDataLookup(selectedData, 'network_automation');
     console.log('dataLookup-->', dataLookup);
 
     const filterNode = <Filter
@@ -35,21 +35,24 @@ function NetworkAutomationPage(): React.ReactElement {
         <DataPage title="Network Tasks for which NRENs Use Automation "
             description="The table below shows which NRENs have, or plan to, automate their 
             operational processes, with specification of which processes, and the names of 
-            software and tools used for this given when appropriate."
+            software and tools used for this given when appropriate. 
+            Where NRENs indicated that they are using automation for some network tasks, 
+            but did not specify which type of tasks, a marker has been placed in the 'other' column."
             category={Sections.Network} filter={filterNode}
             data={selectedData} filename="network_automation_nrens_per_year">
             <>
                 <ChartContainer>
                     <Table className="charging-struct-table" striped bordered >
-                    <colgroup>
-                        <col span={1} style={{ width: "16%" }} />
-                        <col span={2} style={{ width: "14%" }} />
-                        <col span={2} style={{ width: "14%" }} />
-                        <col span={2} style={{ width: "14%" }} />
-                        <col span={2} style={{ width: "14%" }} />
-                        <col span={2} style={{ width: "14%" }} />
-                        <col span={2} style={{ width: "14%" }} />
-                    </colgroup>
+                        <colgroup>
+                            <col span={1} style={{ width: "16%" }} />
+                            <col span={2} style={{ width: "12%" }} />
+                            <col span={2} style={{ width: "12%" }} />
+                            <col span={2} style={{ width: "12%" }} />
+                            <col span={2} style={{ width: "12%" }} />
+                            <col span={2} style={{ width: "12%" }} />
+                            <col span={2} style={{ width: "12%" }} />
+                            <col span={2} style={{ width: "12%" }} />
+                        </colgroup>
                         <thead>
                             <tr>
                                 <th></th>
@@ -59,6 +62,7 @@ function NetworkAutomationPage(): React.ReactElement {
                                 <th colSpan={2}>Compliance</th>
                                 <th colSpan={2}>Reporting</th>
                                 <th colSpan={2}>Troubleshooting</th>
+                                <th colSpan={2}>Other</th>
                             </tr>
                             <tr>
                                 <th></th>
@@ -74,52 +78,88 @@ function NetworkAutomationPage(): React.ReactElement {
                                 <th>Planned</th>
                                 <th>Yes</th>
                                 <th>Planned</th>
+                                <th>Yes</th>
+                                <th>Planned</th>
                             </tr>
                         </thead>
                         <tbody>
-                        {Array.from(dataLookup.entries()).map(([nren, nrenMap]) => (
-    <tr key={nren}>
-        <td>{nren}</td>
-        {["Device Provisioning", "Data Collection", "Configuration Management", "Compliance", "Reporting", "Troubleshooting"].map(column_key => (
-            <>
-                <td key={`${column_key}-yes`}>
-                    {nrenMap.has(column_key) &&
-                        showYears.map(year => {
-                            const chargingYears = nrenMap.get(column_key)!;
-                            const serviceInfo = chargingYears.get(year);
-                            return (
-                                <ColorPill
-                                    key={year}
-                                    year={year}
-                                    active={chargingYears.has(year)&& serviceInfo && serviceInfo.network_automation =='yes'}
-                                    tooltip={""}
-                                    rounded
-                                />
-                            );
-                        })
-                    }
-                </td>
-                <td key={`${column_key}-planned`}>
-                    {nrenMap.has(column_key) &&
-                        showYears.map(year => {
-                            const chargingYears = nrenMap.get(column_key)!;
-                            const serviceInfo = chargingYears.get(year);
-                            return (
-                                <ColorPill
-                                    key={year}
-                                    year={year}
-                                    active={chargingYears.has(year)&& serviceInfo && serviceInfo.network_automation =='planned'}
-                                    tooltip={""}
-                                    rounded
-                                />
-                            );
-                        })
-                    }
-                </td>
-            </>
-        ))}
-    </tr>
-))}
+                            {Array.from(dataLookup.entries()).map(([nren, nrenMap]) => (
+                                <tr key={nren}>
+                                    <td>{nren}</td>
+                                    {["Device Provisioning", "Data Collection", "Configuration Management", "Compliance", "Reporting", "Troubleshooting"].map(column_key => (
+                                        <>
+                                            <td key={`${nren}-${column_key}-yes`}>
+                                                {nrenMap.has("yes") &&
+                                                    showYears.map(year => {
+                                                        const chargingYears = nrenMap.get("yes")?.get(year)!;
+                                                        const serviceInfo = chargingYears ? chargingYears.network_automation_specifics:null;
+                                                        return (
+                                                            <ColorPill
+                                                                key={year}
+                                                                year={year}
+                                                                active={nrenMap.get("yes")?.has(year) && serviceInfo && serviceInfo.indexOf(column_key) > -1}
+                                                                tooltip={""}
+                                                                rounded
+                                                            />
+                                                        );
+                                                    })
+                                                }
+                                            </td>
+                                            <td key={`${nren}-${column_key}-planned`}>
+                                                {nrenMap.has("planned") &&
+                                                    showYears.map(year => {
+                                                        const chargingYears = nrenMap.get("planned")?.get(year)!;
+                                                        const serviceInfo = chargingYears ? chargingYears.network_automation_specifics:null;
+                                                        return (
+                                                            <ColorPill
+                                                                key={year}
+                                                                year={year}
+                                                                active={nrenMap.get("planned")?.has(year) && serviceInfo && serviceInfo.indexOf(column_key) > -1}
+                                                                tooltip={""}
+                                                                rounded
+                                                            />
+                                                        );
+                                                    })
+                                                }
+                                            </td>
+                                        </>
+                                    ))}
+                                    <td key={`${nren}-other-yes`}>
+                                        {nrenMap.has("yes") &&
+                                            showYears.map(year => {
+                                                const chargingYears = nrenMap.get("yes")?.get(year)!;
+                                                const serviceInfo = chargingYears ? chargingYears.network_automation_specifics:null;
+                                                return (
+                                                    <ColorPill
+                                                        key={year}
+                                                        year={year}
+                                                        active={nrenMap.get("yes")?.has(year) && serviceInfo && serviceInfo.length == 0}
+                                                        tooltip={""}
+                                                        rounded
+                                                    />
+                                                );
+                                            })
+                                        }
+                                    </td>
+                                    <td key={`${nren}-other-planned`}>
+                                        {nrenMap.has("planned") &&
+                                            showYears.map(year => {
+                                                const chargingYears = nrenMap.get("planned")?.get(year)!;
+                                                const serviceInfo = chargingYears ? chargingYears.network_automation_specifics:null;
+                                                return (
+                                                    <ColorPill
+                                                        key={year}
+                                                        year={year}
+                                                        active={nrenMap.get("planned")?.has(year) && serviceInfo && serviceInfo.length == 0}
+                                                        tooltip={""}
+                                                        rounded
+                                                    />
+                                                );
+                                            })
+                                        }
+                                    </td>
+                                </tr>
+                            ))}
 
                         </tbody>
                     </Table>