TMSS-815: Failure rate added and updated other charts

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

@@ -12,9 +12,17 @@ class CycleReportAvgEfficiency extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {
-            reportData: this.getTableData()
-        }
+        this.state = {}
+    }
+
+    componentDidMount() {
+      this.setState({reportData: this.getTableData()});
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+      if (prevProps.data !== this.props.data) {
+        this.setState({reportData: this.getTableData()});
+      }
     }
 
     /**
@@ -39,9 +47,8 @@ class CycleReportAvgEfficiency extends Component {
                     label: 'Efficiency',
                     borderColor: '#44a3ce',
                     backgroundColor: '#44a3ce',
-                    borderWidth: 2,
-                  //   barThickness: 16,
-                    barPercentage: 0.3,
+                    barThickness: 50,
+                    // barPercentage: 0.3,
                     data: _.map(this.state.reportData, 'efficiency'),
                     borderColor: 'white',
                     borderWidth: 2,

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

@@ -12,8 +12,16 @@ class CycleCompletionLevel extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {
-            reportData: this.getTableData()
+        this.state = {}
+    }
+
+    componentDidMount() {
+        this.setState({reportData: this.getTableData()});
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.data !== this.props.data) {
+            this.setState({reportData: this.getTableData()});
         }
     }
 
@@ -49,8 +57,8 @@ class CycleCompletionLevel extends Component {
                     borderColor: '#44a3ce',
                     backgroundColor: '#44a3ce',
                     borderWidth: 2,
-                  //   barThickness: 16,
-                    barPercentage: 0.3,
+                    barThickness: 50,
+                    // barPercentage: 0.3,
                     data: _.map(this.state.reportData, 'performed'),
                     borderColor: 'white',
                     borderWidth: 2,

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

+import React, { Component } from 'react';
+import { Bar } from 'react-chartjs-2';
+import { Dropdown } from 'primereact/dropdown';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import _ from 'lodash';
+import moment from 'moment';
+import MathUtility from '../../../utils/math.utility';
+import UnitConverter from '../../../utils/unit.converter';
+
+/**
+ * Failures rate report component for cycle report.
+ */
+class CycleFailureRate extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {}
+    }
+
+    componentDidMount() {
+        this.setState({
+            reportData: this.getReportData()
+        });
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.data !== this.props.data) {
+            this.setState({
+                reportData: this.getReportData()
+            });
+        }
+    }
+
+    /**
+     * Function that returns the data required for the chart with labels, datasets, colors for bar, line, barwidth, etc.,
+     * @returns Object - with dataset, labels, colors, barwidth, etc.,
+     */
+    getBarData() {
+        const barData = this.state.reportData.chartData ;
+        return {
+            labels: _.map(barData, 'month'),
+            datasets: [
+                {
+                    type: 'bar',
+                    label: 'Hours Lost',
+                    borderColor: '#44a3ce',
+                    backgroundColor: '#44a3ce',
+                    borderWidth: 2,
+                    barThickness: 50,
+                    // barPercentage: 0.5,
+                    data: _.map(barData, 'duration'),
+                    borderColor: 'white',
+                    borderWidth: 2,
+                }
+            ],
+        };
+    }
+
+    /**
+     * Function that returns the bar options like axis, scales, max axis value, tooltip, etc.,
+     * @returns Object
+     */
+    getBarOptions() {
+        return {
+            elements: {
+              bar: {
+                borderWidth: 1,
+              },
+            },
+            responsive: true,
+            plugins: {
+              legend: {
+                position: 'bottom',
+              },
+              title: {
+                display: true,
+                text: 'LOFAR Observing Failures',
+              },
+            //   tooltip: {
+            //     callbacks: {
+            //         label: function(tooltipItem, data) {
+            //             const itemData = _.find(resourceUtilization, ['type', tooltipItem.label]);
+            //             return `${itemData?itemData.percent:""}% (${itemData?itemData.value:""} ${itemData?itemData.unit:""})`;
+            //         }
+            //     }
+            //   }
+            }
+        };
+    }
+
+    /**
+     * Function to format data list after calculations and include average if require for table or chart.
+     * @param {Boolean} forTable - flag to incluce average value if the data is for table component.
+     * @returns Array
+     */
+    getReportData() {
+        const data = this.props.data;
+        const timeConversionFactor = UnitConverter.resourceUnitMap.time.conversionFactor;
+        // Assuming data structure
+        // [{cycle: 'Cycle 15', failures: [{month: "2020-06-01", duration: 1200}, {month: "2020-07-01", duration: 1300},....]}]
+        let reportData = {chartData: [], monthTableData: [], cycleTableData: []};
+        _.map(data, repData=> {
+            const monthlyFailures = repData.failures;
+            let cycleMonthlyFailures = []
+            for (const failureData of monthlyFailures) {
+                cycleMonthlyFailures.push({   cycle: repData.cycle,
+                                    date: failureData.month,
+                                    month: moment(failureData.month).format("YYYY-MM"),
+                                    duration: failureData.duration?(failureData.duration/timeConversionFactor).toFixed(2):null
+                });
+            }
+            reportData.chartData = reportData.chartData.concat(cycleMonthlyFailures);
+            reportData.cycleTableData.push({
+                cycle: repData.cycle,
+                period: _.minBy(cycleMonthlyFailures, 'date')?
+                        `${(_.minBy(cycleMonthlyFailures, 'date')).month} -  ${(_.maxBy(cycleMonthlyFailures, 'date')).month}`:'',
+                duration: ((_.sumBy(monthlyFailures, 'duration'))/timeConversionFactor).toFixed(2)
+            });
+        });
+        reportData.monthTableData = reportData.chartData;
+        return reportData;
+    }
+
+    renderReportTable() {
+        const reportTableData = this.state.reportData.tableData;
+        const reportColumns = _.keys(reportTableData[0]).map((col,i) => {
+            return <Column key={col} field={col} header={col} />;
+        });
+        return (
+            <DataTable value={reportTableData} resizableColumns columnResizeMode="expand" className="card" style={{paddingLeft: '0em'}}>
+                { reportColumns }
+            </DataTable>
+        );
+    }
+    
+    render() {
+        return (
+            <>
+                {this.state.reportData &&
+                <>
+                    <Bar data={this.getBarData()} options={this.getBarOptions()} />
+                    <DataTable value={this.state.reportData.monthTableData} resizableColumns columnResizeMode="expand" className="card" style={{paddingLeft: '0em'}}>
+                        <Column field="cycle" header="Cycle Code" />
+                        <Column field="month" header="Period (YYYY-MM)" />
+                        <Column field="duration" header="Hours Lost per Month" />
+                    </DataTable>
+                    <DataTable value={this.state.reportData.cycleTableData} resizableColumns columnResizeMode="expand" className="card" style={{paddingLeft: '0em'}}>
+                        <Column field="cycle" header="Cycle Code" />
+                        <Column field="period" header="Period (YYYY-MM)" />
+                        <Column field="duration" header="Hours Lost per Cycle" />
+                    </DataTable>
+                </>
+                }
+            </>
+        );
+    }
+}
+
+export default CycleFailureRate;
\ No newline at end of file

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

 import React,{ Component } from "react";
-import { Line } from 'react-chartjs-2';
+import { Bar } from 'react-chartjs-2';
 import _ from 'lodash';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
@@ -16,7 +16,6 @@ class CyclesILTLocalUsage extends Component{
     }
 
     componentDidMount() {
-        console.log(this.props.data);
         if(this.props.data){
             this.setState({data: this.props.data});
             this.getReportData(this.props.data);
@@ -44,16 +43,19 @@ class CyclesILTLocalUsage extends Component{
                 {   label: 'ILT-mode observing', 
                     data:_.map(reportData, 'observing'),
                     backgroundColor: '#4472C4',
+                    barThickness: 75,
                     fill: 'origin'    
                 },
                 {   label: 'ILT-mode idle/test', 
                     data:_.map(reportData, 'idle'),
                     backgroundColor: '#ED7D31',
+                    barThickness: 75,
                     fill: 'origin'    
                 },
                 {   label: 'Local-mode', 
                     data:_.map(reportData, 'local_mode'),
                     backgroundColor: '#A5A5A5',
+                    barThickness: 75,
                     fill: 'origin'
                 },
             ]
@@ -71,7 +73,7 @@ class CyclesILTLocalUsage extends Component{
             // In this case, we are setting the border of each horizontal bar to be 1px wide
             elements: {
               bar: {
-                borderWidth: 1,
+                borderWidth: 1
               },
             },
             scales: {
@@ -133,7 +135,7 @@ class CyclesILTLocalUsage extends Component{
             <React.Fragment>
                 <div  id={`cycles-telescope-time`}
                     style={{paddingTop: "10px", paddingBottom: "10px"}}>
-                    <Line data={this.getBarData()} options={this.getBarOptions()} width="50%" height="20" />
+                    <Bar data={this.getBarData()} options={this.getBarOptions()} width="50%" height="20" />
                 </div>
                 <div className="ilt-time-details" id={`cycle-ilt-details`}>
                     <label> </label>

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

@@ -91,7 +91,7 @@ class CycleReportIntro extends Component {
                                 <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="#ilt_local_usage" >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>
+                                <li><a href="#failures" >The rate of failures</a>, which shows the rate of failures as a function of time</li>
                             </ul>
                         </div>
                     </div>

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

@@ -12,7 +12,7 @@ import { Calendar } from 'primereact/calendar';
 import { Button } from 'primereact/button';
 import { AppLoader } from '../../../layout/components/AppLoader';
 import CycleService from '../../../services/cycle.service';
-import ProjectReport from '../project.report';
+import ReportService from '../../../services/report.service';
 import CycleReportIntro from './report.intro';
 import CycleTelescopeTime from './report.telescope.time';
 import CycleReportAvgEfficiency from './report.avg.efficiency';
@@ -23,6 +23,7 @@ import CycleSiteWiseData from './report.site.data';
 import CycleCategoryWiseData from './report.category.data';
 import CycleProjectSummary from './report.project.summary';
 import CyclesILTLocalUsage from './report.ilt_local.usage';
+import CycleFailureRate from './report.failure.rate';
 
 // 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.
@@ -71,7 +72,6 @@ class CycleReportMain extends Component {
         this.searchCycles = this.searchCycles.bind(this);
         this.selectCycles = this.selectCycles.bind(this);
         this.setReportCycles = this.setReportCycles.bind(this);
-        this.renderCycleReports = this.renderCycleReports.bind(this);
         this.setReportData = this.setReportData.bind(this);
         this.downloadCSV = this.downloadCSV.bind(this);
         this.downloadPDF = this.downloadPDF.bind(this);
@@ -235,10 +235,10 @@ class CycleReportMain extends Component {
         
         let cyclesReportData = [];
         // for (const cycle of this.state.selectedCycles) {
-        //     let reportData = await CycleService.getCycleReport(cycle.name);
+        //     let reportData = await ReportService.getCycleReport(cycle.name);
         //     cyclesReportData.push(reportData);
         // }
-        cyclesReportData = _.values(await CycleService.getCyclesReport(cycleNames));
+        cyclesReportData = _.values(await ReportService.getCyclesReport(cycleNames));
         this.setState({ reportCycles: _.orderBy(_.cloneDeep(this.state.selectedCycles), 'start'),
                         cyclesReportData: cyclesReportData,
                         isLoading: false});
@@ -272,24 +272,6 @@ class CycleReportMain extends Component {
         this.setState({selectedCycles:[], reportPeriod:[], reportCycles:[]});
     }
 
-    /**
-     * To render multiple reports from a list of reports for the cycle.
-     * @returns Component
-     */
-    renderCycleReports() {
-        return (
-            <>
-                {
-                    this.state.reportCycles.map((project, index) => {
-                        return <ProjectReport project={project} resourceList={this.resourceList} 
-                                    reportPeriod={this.state.reportPeriod} SU_DETAILS_COLUMNS={SU_DETAILS_COLUMNS} 
-                                    passReportData={this.setReportData} />
-                    })
-                }
-            </>
-        );
-    }
-
     render() {
         return(
             <React.Fragment>
@@ -370,7 +352,10 @@ class CycleReportMain extends Component {
                             <label>ILT vs Local Mode Usage</label>
                             <CyclesILTLocalUsage data={this.getReportData(REPORT_VARIABLE_MAP["ILT_LocalUsage"])} />
                         </div>
-                        {/* { this.renderCycleReports()} */}
+                        <div id="failures">
+                            <label>Failure Rate</label>
+                            <CycleFailureRate data={this.getReportData(REPORT_VARIABLE_MAP["Failures"])} />
+                        </div>
                     </div>
                     {/* Dummy reference div to scroll down before exporting to PDF so that 
                         all components will be rendered properly before exporting */}

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

@@ -28,8 +28,6 @@ class CycleWeeklyEfficiency extends Component {
     }
 
     componentDidUpdate(prevProps, prevState) {
-        console.log(prevProps);
-        console.log(prevState);
         if (prevProps.data !== this.props.data) {
             this.setState({
                 reportData: this.getReportData(),
@@ -54,8 +52,8 @@ class CycleWeeklyEfficiency extends Component {
                     borderColor: '#44a3ce',
                     backgroundColor: '#44a3ce',
                     borderWidth: 2,
-                  //   barThickness: 16,
-                    barPercentage: 0.5,
+                    barThickness: 25,
+                    // barPercentage: 0.5,
                     data: _.map(barData, 'efficiency'),
                     borderColor: 'white',
                     borderWidth: 2,