[COMP-365][COMP-366] Service level targets an mangement

compendium-frontend/src/App.tsx

@@ -50,6 +50,8 @@ import SurveyContainerComponent from "./survey/SurveyContainerComponent";
 import SurveyLanding from "./survey/Landing";
 import SNPServicesOfferedPage from "./pages/SNPServicesOffered";
 import SNPCorporateStrategyPage from "./pages/SNPCorporateStrategy";
+import SNPServiceManagementFrameworkPage from "./pages/SNPServiceManagementFramework";
+import SNPServiceLevelTargetsPage from "./pages/SNPServiceLevelTargets";
 
 
 const router = createBrowserRouter([
@@ -106,6 +108,8 @@ const router = createBrowserRouter([
   { path: "/crisis-exercise", element: <SNPStandardsCrisisExercisesPage /> },
   { path: "/security-control", element: <SNPStandardsSecurityControlsPage /> },
   { path: "/services-offered", element: <SNPServicesOfferedPage /> },
+  { path: "/service-management-framework", element: <SNPServiceManagementFrameworkPage /> },
+  { path: "/service-level-targets", element: <SNPServiceLevelTargetsPage /> },
   { path: "/corporate-strategy", element: <SNPCorporateStrategyPage /> },
   { path: "survey/admin/surveys", element: <SurveyManagementComponent /> },
   { path: "survey/admin/users", element: <UserManagementComponent /> },

compendium-frontend/src/Schema.tsx

@@ -82,6 +82,11 @@ export interface AlienWaveInternal extends NrenAndYearDatapoint {
     alien_wave_internal: (string | null)
 }
 
+export interface ServiceManagement extends NrenAndYearDatapoint {
+    service_management_framework: (string | null),
+    service_level_targets: (string | null),
+}
+
 export interface Standards extends NrenAndYearDatapoint {
     audits: (string | null),
     audit_specifics: (string | null),

compendium-frontend/src/components/PolicySidebar.tsx

@@ -48,6 +48,16 @@ const PolicySidebar = () => {
                     <span>NREN Corporate Strategies </span>
                 </Link>
             </Row>
+            <Row>
+                <Link to="/service-level-targets" className="link-text-underline">
+                    <span>NRENs Offering Service Level Targets</span>
+                </Link>
+            </Row>
+            <Row>
+                <Link to="/service-management-framework" className="link-text-underline">
+                    <span>NRENs Operating a Formal Service Management</span>
+                </Link>
+            </Row>
         </Sidebar>
     )
 }

compendium-frontend/src/pages/CompendiumData.tsx

@@ -135,6 +135,16 @@ function CompendiumData(): ReactElement {
                                         <span>NREN Corporate Strategies </span>
                                     </Link>
                                 </Row>
+                                <Row>
+                                    <Link to="/service-level-targets" className="link-text-underline">
+                                        <span>NRENs Offering Service Level Targets</span>
+                                    </Link>
+                                </Row>
+                                <Row>
+                                    <Link to="/service-management-framework" className="link-text-underline">
+                                        <span>NRENs Operating a Formal Service Management</span>
+                                    </Link>
+                                </Row>
                             </div>
                         </CollapsibleBox>
 

compendium-frontend/src/pages/SNPServiceLevelTargets.tsx

+import React, { useContext } from "react";
+import { Table } from "react-bootstrap";
+
+import { ServiceManagement } from "../Schema";
+import { createMatrixDataLookup } 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 "../providers/FilterSelectionProvider";
+import ChartContainer from "../components/graphing/ChartContainer";
+import { useData } from "../helpers/useData";
+
+function SNPServiceLevelTargetsPage(): React.ReactElement {
+    const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
+    const { data: pertTeamData, years, nrens } = useData<ServiceManagement>('/api/standards-and-policies/service-management', setFilterSelection);
+
+    const selectedData = (pertTeamData).filter(data =>
+        filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
+    );
+
+    const dataLookup = createMatrixDataLookup(selectedData, 'service_level_targets');
+    console.log(dataLookup);
+    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="NRENs Offering Service Level Targets"
+            description="The table below shows which NRENs offer Service Levels Targets for their services. 
+            If NRENs have never responded to this question in the survey, they are excluded. "
+            category={Sections.Policy} filter={filterNode}
+            data={selectedData} filename="service_level_targets">
+            <>
+                <ChartContainer>
+                    <Table className="charging-struct-table" striped bordered >
+                        <colgroup>
+                            <col span={1} style={{ width: "30%" }} />
+                            <col span={1} style={{ width: "35%" }} />
+                            <col span={1} style={{ width: "35%" }} />
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th>Yes</th>
+                                <th>No</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {Array.from(dataLookup.entries()).map(([nren, nrenMap]) => (
+                                <tr key={nren}>
+                                    <td>{nren}</td>
+                                    {["True", "False"].map(column_key => (
+                                        <td key={column_key}>
+                                            {nrenMap.has(column_key) &&
+                                                showYears.map(year => {
+                                                    const chargingYears = nrenMap.get(column_key)!;
+                                                    return <ColorPill key={year} year={year} active={chargingYears.has(year)} tooltip={""} />;
+                                                })
+                                            }
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </Table>
+                </ChartContainer>
+            </>
+        </DataPage>
+    );
+}
+export default SNPServiceLevelTargetsPage;

compendium-frontend/src/pages/SNPServiceManagementFramework.tsx

+import React, { useContext } from "react";
+import { Table } from "react-bootstrap";
+
+import { ServiceManagement } from "../Schema";
+import { createMatrixDataLookup } 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 "../providers/FilterSelectionProvider";
+import ChartContainer from "../components/graphing/ChartContainer";
+import { useData } from "../helpers/useData";
+
+function SNPServiceManagementFrameworkPage(): React.ReactElement {
+    const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
+    const { data: pertTeamData, years, nrens } = useData<ServiceManagement>('/api/standards-and-policies/service-management', setFilterSelection);
+
+    const selectedData = (pertTeamData).filter(data =>
+        filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
+    );
+
+    const dataLookup = createMatrixDataLookup(selectedData, 'service_management_framework');
+
+    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="NRENs Operating a Formal Service Management Framework"
+            description="The chart below shows which NRENs operate a formal service management framework 
+            for all of their services. NRENs which have never answered this question cannot be selected."
+            category={Sections.Policy} filter={filterNode}
+            data={selectedData} filename="service_management_framework">
+            <>
+                <ChartContainer>
+                    <Table className="charging-struct-table" striped bordered >
+                        <colgroup>
+                            <col span={1} style={{ width: "30%" }} />
+                            <col span={1} style={{ width: "35%" }} />
+                            <col span={1} style={{ width: "35%" }} />
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th></th>
+                                <th>Yes</th>
+                                <th>No</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {Array.from(dataLookup.entries()).map(([nren, nrenMap]) => (
+                                <tr key={nren}>
+                                    <td>{nren}</td>
+                                    {["True", "False"].map(column_key => (
+                                        <td key={column_key}>
+                                            {nrenMap.has(column_key) &&
+                                                showYears.map(year => {
+                                                    const chargingYears = nrenMap.get(column_key)!;
+                                                    return <ColorPill key={year} year={year} active={chargingYears.has(year)} tooltip={""} />;
+                                                })
+                                            }
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </Table>
+                </ChartContainer>
+            </>
+        </DataPage>
+    );
+}
+export default SNPServiceManagementFrameworkPage;

compendium-frontend/src/scss/layout/_components.scss

@@ -204,7 +204,8 @@ $year-colors: (
   #1E82B6,
   #13AC9C,
   #5454A8,
-  #8C6896
+  #8C6896,
+  #0069b0,
 );
 
 $service-tab-colors: (

compendium_v2/routes/standards_and_policies.py

 from typing import Any
 
-from compendium_v2.db.presentation_models import Standards, CrisisExercises, SecurityControls, ServiceUserTypes
+from compendium_v2.db.presentation_models import (Standards, CrisisExercises, SecurityControls,
+                                                  ServiceUserTypes, ServiceManagement)
 from compendium_v2.routes import common
 from flask import Blueprint, jsonify
 
@@ -70,7 +71,7 @@ SECURITY_CONTROLS_RESPONSE_SCHEMA = {
 SERVICES_USER_TYPES = {
     '$schema': 'http://json-schema.org/draft-07/schema#',
     'definitions': {
-        'policy': {
+        'services_user_types': {
             'type': 'object',
             'properties': {
                 'nren': {'type': 'string'},
@@ -86,9 +87,31 @@ SERVICES_USER_TYPES = {
     },
 
     'type': 'array',
-    'items': {'$ref': '#/definitions/connected/proportion'}
+    'items': {'$ref': '#/definitions/services_user_types'}
 }
 
+SERVICE_MANAGEMENT = {
+    '$schema': 'http://json-schema.org/draft-07/schema#',
+    'definitions': {
+        'service_management': {
+            'type': 'object',
+            'properties': {
+                'nren': {'type': 'string'},
+                'nren_country': {'type': 'string'},
+                'year': {'type': 'integer'},
+                'service_management_framework': {'type': 'string'},
+                'service_level_targets': {'type': 'string'},
+            },
+            'required': ['nren', 'nren_country', 'year', 'service_management_framework','service_level_targets'],
+            'additionalProperties': False
+        }
+    },
+
+    'type': 'array',
+    'items': {'$ref': '#/definitions/service_management'}
+}
+
+
 
 
 def standards_extract_data(standards: Standards) -> dict:
@@ -255,3 +278,33 @@ def service_user_types_view() -> Any:
 
     entries = [service_user_type_extract_data(entry) for entry in common.get_data(ServiceUserTypes)]
     return jsonify(entries)
+
+
+def service_management_extract_data(service_management: ServiceManagement):
+    return {
+        'nren': service_management.nren.name,
+        'nren_country': service_management.nren.country,
+        'year': service_management.year,
+        'service_management_framework': str(service_management.service_management_framework),
+        'service_level_targets': str(service_management.service_level_targets)
+    }
+
+
+@routes.route('/service-management', methods=['GET'])
+@common.require_accepts_json
+def service_management_view() -> Any:
+    """
+    handler for /api/standards-and-policies/service-management/ requests
+    returns policy information for each NREN/year combination
+
+    response will be formatted as:
+
+    .. asjson::
+        compendium_v2.routes.standards_and_policies.SERVICE_MANAGEMENT
+
+    :return:
+    """
+
+    entries = [service_management_extract_data(entry) for entry in common.get_data(ServiceManagement)]
+    return jsonify(entries)
+