TMSS-815: Added Data Ingested Per Site, Data Ingested Per Type, Project...

TMSS-815: Added Data Ingested Per Site, Data Ingested Per Type, Project Summary Overview report components

SAS/TMSS/frontend/tmss_webapp/src/routes/Report/cycle/report.category.data.js

+import React,{ Component } from "react";
+import { Bar } from 'react-chartjs-2';
+import _ from 'lodash';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import MathUtility from "../../../utils/math.utility";
+
+/**
+ * Component to show data ingested per category in cycle(s).
+ */
+class CycleCategoryWiseData extends Component{
+
+    constructor(props){
+        super(props);
+        this.state= {
+            reportData:[]
+        };
+    }
+
+    getBarData() {
+        let reportData = this.getReportData(false);
+        return {
+            labels: _.map(reportData, 'cycle'),
+            datasets:[
+                
+                {   label: 'Raw IF', 
+                    data:_.map(reportData, 'rawIF'),
+                    backgroundColor: '#4472C4',
+                    barThickness: 75,
+                },
+                {   label: 'Raw BF', 
+                    data:_.map(reportData, 'rawBF'),
+                    backgroundColor: '#ED7D31',
+                    barThickness: 75,
+                            
+                },
+                {   label: 'Raw TBB', 
+                    data:_.map(reportData, 'rawTBB'),
+                    backgroundColor: '#A5A5A5',
+                    barThickness: 75,       
+                },
+                {   label: 'Preproc IF', 
+                    data:_.map(reportData, 'preprocIF'),
+                    backgroundColor: '#FFC000',
+                    barThickness: 75,       
+                },
+                {   label: 'Pulp BF', 
+                    data:_.map(reportData, 'pulpBF'),
+                    backgroundColor: '#44a3ce',
+                    barThickness: 75,       
+                },
+                {   label: 'Dynspec BF', 
+                    data:_.map(reportData, 'dynspecBF'),
+                    backgroundColor:  '#4caf50',
+                    barThickness: 75,       
+                }
+            ]
+        };
+    }
+
+    getBarOptions() {
+        return {
+            indexAxis: 'x',
+            elements: {
+              bar: {
+                borderWidth: 0,
+              },
+            },
+            scales: {
+                x: {
+                    stacked: true,
+                    categoryPercentage: 1.0,
+                    barPercentage: 1.0
+                },
+                y: {
+                    stacked: true,
+                    // max: 5000,
+                }
+            },
+            responsive: true,
+            plugins: {
+              legend: {
+                position: 'bottom',
+              },
+              title: {
+                display: true,
+                text: 'Ingested Data per Type',
+              }
+            }
+        };
+    }
+
+    getReportData(isTableData) {
+        let reportData = [];
+        this.props.data.map(repData => {
+            let categoryData = {}
+            const cycleData = repData.data_ingested_per_site_and_category;
+            categoryData['cycle'] = repData.cycle;
+            // TODO: Update field names and values once API is complete
+            categoryData['rawIF'] = cycleData["Interferometric Observation"].dataproducts.length;
+            categoryData['rawBF'] = cycleData["Beamformed Observation"].dataproducts.length;
+            categoryData['rawTBB'] = cycleData.rawTBB;
+            categoryData['preprocIF'] = cycleData["Preprocessing Pipeline"].dataproducts.length;
+            categoryData['pulpBF'] = cycleData["Pulsar Pipeline"].dataproducts.length;
+            categoryData['dynspecBF'] = cycleData.dynspecBF;
+            reportData.push(categoryData);
+        });
+
+        if (isTableData) {
+            reportData.push({cycle: 'Average',
+                rawIF: MathUtility.getAverage(_.map(reportData, 'rawIF')), 
+                rawBF: MathUtility.getAverage(_.map(reportData, 'rawBF')), 
+                rawTBB: MathUtility.getAverage(_.map(reportData, 'rawTBB')), 
+                preprocIF: MathUtility.getAverage(_.map(reportData, 'preprocIF')), 
+                pulpBF: MathUtility.getAverage(_.map(reportData, 'pulpBF')), 
+                dynspecBF: MathUtility.getAverage(_.map(reportData, 'dynspecBF'))
+            });
+        }
+        return reportData;
+    }
+
+    render() {
+        return(
+            <React.Fragment>
+                <div  id={`cycles-telescope-time`}
+                    style={{paddingTop: "10px", paddingBottom: "10px"}}>
+                    <Bar data={this.getBarData()} options={this.getBarOptions()} width="50%" height="20" />
+                </div>
+                
+                <div className="ttd-details" id={`cycle-ttd-details`}>
+                    <DataTable value={this.getReportData(true)} resizableColumns columnResizeMode="expand" className="card" style={{paddingLeft: '0em', textAlign: 'center'}}>
+                        <Column field="cycle" header="Cycle Code"></Column>
+                        <Column field="rawIF" header="Raw IF"></Column>
+                        <Column field="rawBF" header="Raw BF"></Column>
+                        <Column field="rawTBB" header="Raw TBB"></Column>
+                        <Column field="preprocIF" header="Preproc IF"></Column>
+                        <Column field="pulpBF" header="Pulp BF"></Column>
+                        <Column field="dynspecBF" header="Dynspec BF"></Column>
+                    </DataTable>
+                </div>
+
+            </React.Fragment>
+        )
+    }
+
+}
+
+export default CycleCategoryWiseData;
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/routes/Report/cycle/report.intro.js

@@ -87,9 +87,9 @@ class CycleReportIntro extends Component {
                                 <li><a href="#avg_efficiency" >The average efficiency</a> matched with the expected or targeted or bench-marked average efficiency value for the cycle</li>
                                 <li><a href="#completion_level" >The completion level</a>, which shows the fraction of successful observations performed per the total number of observations earmarked for the cycle in question</li>
                                 <li><a href="#category_observations" >Observation hours per category</a>, which shows per single cycle the observing time fraction of successful Prio-A telescope hours, successful Prio-B telescope hours, System unavailability, Failed, System idle</li>
-                                <li><a href="#" >The weekly efficiency</a>, which shows per single cycle fractions of observing hours of successful observations per week</li>
-                                <li><a href="#" >Ingested data overview per site and category</a>, which shows per single cycle fractions of data products ingested per site and type (i.e. raw, (pre-)processed, interferometric, beamformed, tbb)</li>
-                                <li><a href="#" >Projects summary overview</a>, which shows a tabular overview of the telescope resources (successful(/failed) telescope hours, processing hours, storage space at the LTA site(s)) used by the projects in that cycle</li>
+                                <li><a href="#weekly_efficiency" >The weekly efficiency</a>, which shows per single cycle fractions of observing hours of successful observations per week</li>
+                                <li><a href="#site_ingest_data" >Ingested data overview per site and category</a>, which shows per single cycle fractions of data products ingested per site and type (i.e. raw, (pre-)processed, interferometric, beamformed, tbb)</li>
+                                <li><a href="#projects_summary" >Projects summary overview</a>, which shows a tabular overview of the telescope resources (successful(/failed) telescope hours, processing hours, storage space at the LTA site(s)) used by the projects in that cycle</li>
                                 <li><a href="#" >The ILT vs stand alone  mode usage</a>, which shows the amount of hours spent in ILT-mode observing (i.e. the telescope is using the full array), ILT-mode idle / test (i.e. the full array is available but not performing production observations), Local-mode (i.e. the telescope array consist of Dutch station), ILT-mode (in total), ILT_mode_Dutch_array_observing (i.e. the the full array is available but performing production observations requiring only Dutch stations)</li>
                                 <li><a href="#" >The rate of failures</a>, which shows the rate of failures as a function of time</li>
                             </ul>

SAS/TMSS/frontend/tmss_webapp/src/routes/Report/cycle/report.main.js

@@ -19,6 +19,9 @@ import CycleReportAvgEfficiency from './report.avg.efficiency';
 import CycleCompletionLevel from './report.cycle.completion';
 import CycleCategoryObservations from './report.category.observations';
 import CycleWeeklyEfficiency from './report.weekly.efficiency';
+import CycleSiteWiseData from './report.site.data';
+import CycleCategoryWiseData from './report.category.data';
+import CycleProjectSummary from './report.project.summary';
 
 // Constants for SU details table column property name to be used for identifying the properties in the 
 // report data and title for displaying in reports and while exporting them.
@@ -350,6 +353,18 @@ class CycleReportMain extends Component {
                             <label>Weekly Efficiency</label>
                             <CycleWeeklyEfficiency data={this.getReportData(REPORT_VARIABLE_MAP["WeeklyEfficiency"])} />
                         </div>
+                        <div id="site_ingest_data">
+                            <label>Ingested Data per Site</label>
+                            <CycleSiteWiseData data={this.getReportData(REPORT_VARIABLE_MAP["DataIngestedPerSite"])} />
+                        </div>
+                        <div id="category_ingest_data">
+                            <label>Ingested Data per Category</label>
+                            <CycleCategoryWiseData data={this.getReportData(REPORT_VARIABLE_MAP["DataIngestedPerCategory"])} />
+                        </div>
+                        <div id="projects_summary">
+                            <label>Projects Summary Overview</label>
+                            <CycleProjectSummary data={this.getReportData(REPORT_VARIABLE_MAP["ProjectSummary"])} />
+                        </div>
                         {/* { this.renderCycleReports()} */}
                     </div>
                     {/* Dummy reference div to scroll down before exporting to PDF so that 

SAS/TMSS/frontend/tmss_webapp/src/routes/Report/cycle/report.project.summary.js

+import React,{ Component } from "react";
+import { Bar } from 'react-chartjs-2';
+import _ from 'lodash';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import MathUtility from "../../../utils/math.utility";
+import UnitConverter from "../../../utils/unit.converter";
+
+/**
+ * Component to show projects summary in cycle.
+ */
+class CycleProjectSummary extends Component{
+
+    constructor(props){
+        super(props);
+    }
+
+    /**
+     * Returns the projects summary of the cycle(s) formatted to display in summary table.
+     * @returns Array of Cycle Projects list
+     */
+    getReportData() {
+        let reportData = [];
+        const timeConversionFactor = UnitConverter.resourceUnitMap["time"].conversionFactor;
+        const dataConversionFactor = UnitConverter.resourceUnitMap["bytes"].conversionFactor;
+        this.props.data.map(repData => {
+            const cycleProjects = repData.projects_summary;
+            for (const projData of cycleProjects) {
+                let projectData = {}
+                projectData['cycle'] = repData.cycle;
+                projectData['project'] = projData.project;
+                // TODO: Update field names and values once API is complete
+                projectData['durationObserved'] = (projData.durations.total/timeConversionFactor).toFixed(2);
+                projectData['durationProcessed'] = projData.durations.processed;
+                projectData['dataToSara'] = projData["Sara"];
+                projectData['dataToJuelich'] = projData["Juelich"];
+                projectData['dataTopoznan'] = projData["Poznan"];
+                reportData.push(projectData);
+            }
+        });
+        return reportData;
+    }
+
+    render() {
+        return(
+            <React.Fragment>
+                <div>
+                    <DataTable value={this.getReportData()} resizableColumns columnResizeMode="expand" className="card" style={{paddingLeft: '0em', textAlign: 'center'}}>
+                        <Column field="cycle" header="Cycle Code"></Column>
+                        <Column field="project" header="Cycle Code"></Column>
+                        <Column field="durationObserved" header="Time Observed (hr)"></Column>
+                        <Column field="duratioProcessed" header="Time Processed (hr)"></Column>
+                        <Column field="sara" header="Ingested To Sara data size (TB)"></Column>
+                        <Column field="juelich" header="Ingested To Juelich data size (TB)"></Column>
+                        <Column field="poznan" header="Ingested To Poznan data size (TB)"></Column>
+                    </DataTable>
+                </div>
+
+            </React.Fragment>
+        )
+    }
+
+}
+
+export default CycleProjectSummary;
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/routes/Report/cycle/report.site.data.js

+import React,{ Component } from "react";
+import { Bar } from 'react-chartjs-2';
+import _ from 'lodash';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import MathUtility from "../../../utils/math.utility";
+
+/**
+ * Component to show data ingested per site in cycle(s).
+ */
+class CycleSiteWiseData extends Component{
+
+    constructor(props){
+        super(props);
+        this.state= {
+            reportData:[]
+        };
+    }
+
+    getBarData() {
+        let reportData = this.getReportData(false);
+        return {
+            labels: _.map(reportData, 'cycle'),
+            datasets:[
+                
+                {   label: 'Poznan', 
+                    data:_.map(reportData, 'poznan'),
+                    backgroundColor: '#4472C4',
+                    barThickness: 75,
+                },
+                {   label: 'Juelich', 
+                    data:_.map(reportData, 'juelich'),
+                    backgroundColor: '#ED7D31',
+                    barThickness: 75,
+                            
+                },
+                {   label: 'Sara', 
+                    data:_.map(reportData, 'sara'),
+                    backgroundColor: '#A5A5A5',
+                    barThickness: 75,       
+                }
+            ]
+        };
+    }
+
+    getBarOptions() {
+        return {
+            indexAxis: 'x',
+            elements: {
+              bar: {
+                borderWidth: 0,
+              },
+            },
+            scales: {
+                x: {
+                    stacked: true,
+                    categoryPercentage: 1.0,
+                    barPercentage: 1.0
+                },
+                y: {
+                    stacked: true,
+                    // max: 5000,
+                }
+            },
+            responsive: true,
+            plugins: {
+              legend: {
+                position: 'bottom',
+              },
+              title: {
+                display: true,
+                text: 'Ingested Data per Site',
+              }
+            }
+        };
+    }
+
+    getReportData(isTableData) {
+        let reportData = [];
+        this.props.data.map(repData => {
+            let siteData = {}
+            const cycleData = repData.data_ingested_per_site_and_category;
+            siteData['cycle'] = repData.cycle;
+            // TODO: Update field names and values once API is complete
+            siteData['poznan'] = cycleData["Poznan"];
+            siteData['juelich'] = cycleData["Juelich"];
+            siteData['sara'] = cycleData["Sara"];
+            reportData.push(siteData);
+        });
+
+        // if (isTableData) {
+        //     reportData.push({cycle: 'Average',
+        //         poznan: MathUtility.getAverage(_.map(reportData, 'poznan')), 
+        //         juelich: MathUtility.getAverage(_.map(reportData, 'juelich')), 
+        //         sara: MathUtility.getAverage(_.map(reportData, 'sara'))
+        //     });
+        // }
+        return reportData;
+    }
+
+    render() {
+        return(
+            <React.Fragment>
+                <div  id={`cycles-telescope-time`}
+                    style={{paddingTop: "10px", paddingBottom: "10px"}}>
+                    <Bar data={this.getBarData()} options={this.getBarOptions()} width="50%" height="20" />
+                </div>
+                
+                <div className="ttd-details" id={`cycle-ttd-details`}>
+                    <DataTable value={this.getReportData(true)} resizableColumns columnResizeMode="expand" className="card" style={{paddingLeft: '0em', textAlign: 'center'}}>
+                        <Column field="cycle" header="Cycle Code"></Column>
+                        <Column field="sara" header="To Sara (TB)"></Column>
+                        <Column field="juelich" header="To Juelich (TB)"></Column>
+                        <Column field="poznan" header="To Poznan (TB)"></Column>
+                    </DataTable>
+                </div>
+
+            </React.Fragment>
+        )
+    }
+
+}
+
+export default CycleSiteWiseData;
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/services/cycle.service.js

@@ -867,16 +867,16 @@ const CycleService = {
             },
             "data_ingested_per_site_and_category": {
               "Interferometric Observation": {
-                "dataproducts": []
+                "dataproducts": [1,2,3,4]
               },
               "Beamformed Observation": {
-                "dataproducts": []
+                "dataproducts": [2,3,4]
               },
               "Preprocessing Pipeline": {
-                "dataproducts": []
+                "dataproducts": [1,2,3,4,5,6,7]
               },
               "Pulsar Pipeline": {
-                "dataproducts": []
+                "dataproducts": [1,1,1,1]
               }
             },
             "projects_summary": [],