diff --git a/SAS/TMSS/frontend/tmss_webapp/package.json b/SAS/TMSS/frontend/tmss_webapp/package.json
index a265239926a84e93f1817f57f9db1988760ab4a0..5ec23965366cc6fa1eaa038697f600f0b09aeaeb 100644
--- a/SAS/TMSS/frontend/tmss_webapp/package.json
+++ b/SAS/TMSS/frontend/tmss_webapp/package.json
@@ -15,10 +15,12 @@
"ag-grid-react": "^24.1.1",
"axios": "^0.21.1",
"bootstrap": "^4.5.0",
+ "chart.js": "^3.2.1",
"cleave.js": "^1.6.0",
"flatpickr": "^4.6.3",
"font-awesome": "^4.7.0",
"history": "^5.0.0",
+ "html2canvas": "^1.0.0-rc.7",
"interactjs": "^1.9.22",
"jspdf": "^2.3.0",
"jspdf-autotable": "^3.5.13",
@@ -38,6 +40,7 @@
"react-bootstrap": "^1.0.1",
"react-bootstrap-datetimepicker": "0.0.22",
"react-calendar-timeline": "^0.27.0",
+ "react-chartjs-2": "^3.0.3",
"react-dom": "^16.13.1",
"react-flatpickr": "^3.10.7",
"react-frame-component": "^4.1.2",
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/App.js b/SAS/TMSS/frontend/tmss_webapp/src/App.js
index 3d4e9e0ac8152ae0a427918bf569f5668d1e0142..42ebe3118071b3a80a8252941150b880c9715bcf 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/App.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/App.js
@@ -61,8 +61,9 @@ class App extends Component {
{label: 'Project', icon: 'fab fa-fw fa-wpexplorer', to:'/project',section: 'project'},
{label: 'Scheduling Units', icon: 'pi pi-fw pi-calendar', to:'/schedulingunit',section: 'schedulingunit'},
{label: 'Tasks', icon: 'pi pi-fw pi-check-square', to:'/task'},
+ {label: 'Workflow', icon: 'pi pi-sitemap', to:'/workflow',section: 'workflow'},
{label: 'Timeline', icon: 'pi pi-fw pi-clock', to:'/su/timelineview',section: 'su/timelineview'},
- {label: 'Workflow', icon: 'fa fa-sitemap', to:'/workflow',section: 'workflow'},
+ {label: 'Reports', icon: 'pi pi-fw pi-chart-bar', to:'/reports',section: 'reports'},
];
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js b/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
index 0e9235c53d76d9286682e5c15412b3c86fd8d41c..f57e42b6e93d4139a7f82a11de4f387f37db0fe0 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
@@ -744,7 +744,7 @@ export class CalendarTimeline extends Component {
}
let itemDivStyle = { background: backgroundColor,
color: item.color,
- borderColor: "#5a5a5a",
+ borderColor: item.color,
borderRadius: 3,
border: "none",
zIndex: item.type==="SUNTIME"?79:80
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
index b417a3392a75736c5173c70da62a1e264d15075b..6eed93d5df517bd98cf4513613d1e8e83d6ac7b2 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
@@ -245,6 +245,14 @@ In Excel View the for Accordion background color override
border-color: transparent !important;
}
+.p-tabview-title {
+ display: inline !important;
+}
+
+.layout-sidebar {
+ overflow-y: unset;
+}
+
/**
Override the Primereact MultiSelect Dropdown
Begin
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/components/PageHeader.js b/SAS/TMSS/frontend/tmss_webapp/src/layout/components/PageHeader.js
index 05648df30a821b8b89b2696f52df68ee7a7e5f16..bc835979e1806deb5d4df907004effcde76e032a 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/components/PageHeader.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/components/PageHeader.js
@@ -3,6 +3,7 @@ import { routes } from '../../routes';
import {matchPath, Link} from 'react-router-dom';
export default ({ title, subTitle, actions, ...props}) => {
+ debugger;
const [page, setPage] = useState({});
useEffect(() => {
@@ -40,7 +41,7 @@ export default ({ title, subTitle, actions, ...props}) => {
</div>
<div className="page-action-menu">
{(actions || []).map((action, index) =>{
- if (action.type === 'button') {
+ if(action.type === 'button') {
return (
<button className="p-link" key={index} title={action.title || ''}>
<i className={`fa ${action.disabled?'fa-disabled':''} ${action.icon}`}
@@ -48,6 +49,15 @@ export default ({ title, subTitle, actions, ...props}) => {
onClick={(e) => action.disabled?'':onButtonClick(e, action)} />
</button>
);
+ } else if(action.type === 'element'){
+ return(
+ <div className={action.classes} dangerouslySetInnerHTML={{ __html: action.element }}/>
+ )
+ } else if (action.type === 'ext_link') {
+ return (
+ <a href={action.props.pathname} title={action.title || ''}
+ target={action.target?action.target:"_blank"}>{action.label}</a>
+ );
} else {
return (
<Link key={index} className={action.classname} to={action.disabled?{}:{ ...action.props }}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_layout.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_layout.scss
index 162da9617a52b68cd91028960fdabd32e09cc305..6b3aa8ba4bfce76b3347d3d09e2e2667017a540d 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_layout.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_layout.scss
@@ -20,4 +20,5 @@
@import "./reservation";
@import "./animation";
@import "./workflow";
+@import "./_report";
// @import "./splitpane";
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_report.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_report.scss
new file mode 100644
index 0000000000000000000000000000000000000000..013ae6c00108792d2c30dc0245a65bd95d62cd1a
--- /dev/null
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_report.scss
@@ -0,0 +1,25 @@
+.report-div, .report-div a {
+ font-size: 12px;
+}
+
+.report-div label {
+ font-size: 12px;
+ color: black;
+}
+
+.report-table {
+ width: 100%;
+ table-layout: fixed;
+ font-size: 10px;
+ word-break: break-word;
+ border: 1px solid;
+}
+
+.report-table thead th, .report-table tbody td {
+ padding: 5px;
+ border: 1px solid;
+}
+
+.report-calendar span,.report-calendar span input {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_workflow.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_workflow.scss
index e9172f64cf59d4f24fdcaf09752ebcbe494786c3..c1935e5355f79b0a0281046b1ebf1bf3d0976772 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_workflow.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_workflow.scss
@@ -39,6 +39,13 @@
}
}
}
+
+ .help-desk-link{
+ display: inline-block;
+ margin-right: 7px;
+ text-decoration: underline;
+ font-weight: bolder;
+ }
}
.step-header-1 {
@@ -89,4 +96,4 @@
.btn-bar {
padding: 10px;
-}
\ No newline at end of file
+}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Report/index.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Report/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8b05cdcb464fc31fad77671684161b080d4471ad
--- /dev/null
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Report/index.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { TabView,TabPanel } from 'primereact/tabview';
+
+import PageHeader from '../../layout/components/PageHeader';
+
+import ProjectReport from "./project.report";
+
+class ReportHome extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ reportIndex: 1
+ }
+ this.close = this.close.bind(this);
+ }
+
+ close() {
+ this.props.history.goBack();
+ }
+
+ render() {
+ return (
+ <React.Fragment>
+ <PageHeader location={this.props.location} title={'Reports'} actions={[{icon:'fa-window-close', title:'Click to Close Report',
+ type: 'button', actOn: 'click', props:{ callback: this.close }}]}/>
+ <TabView activeIndex={this.state.reportIndex} onTabChange={(e) => this.setState({reportIndex: e.index})}>
+ <TabPanel header="Cycle">
+ <h1>Cycle Report...</h1>
+ </TabPanel>
+ <TabPanel header="Project">
+ <ProjectReport ></ProjectReport>
+ </TabPanel>
+ <TabPanel header="Scheduling Unit">
+ <h1>Scheduling Unit Report...</h1>
+ </TabPanel>
+ </TabView>
+
+ </React.Fragment>
+ );
+ }
+}
+
+export default ReportHome;
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Report/project.report.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Report/project.report.js
new file mode 100644
index 0000000000000000000000000000000000000000..94cdbb6e530a8a69b17d4cf045fb835edb702652
--- /dev/null
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Report/project.report.js
@@ -0,0 +1,347 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import moment from 'moment';
+import _ from 'lodash';
+import { Bar } from 'react-chartjs-2';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+
+import ProjectService from '../../services/project.service';
+import ReportService from '../../services/report.service';
+import UnitConverter from '../../utils/unit.converter';
+import { Dropdown } from 'primereact/dropdown';
+import { Calendar } from 'primereact/calendar';
+import { Button } from 'primereact/button';
+import CycleService from '../../services/cycle.service';
+
+const SU_DETAILS_COLUMNS = [{name: "su_name", headerTitle: "SU Name & Link in TMSS", propertyname: "name"},
+ {name: "su_status", headerTitle: "SU Status Failed / Success ", propertyname: "status"},
+ {name: "su_execDate", headerTitle: "SU Execution Date", propertyname: "exec_date"},
+ {name: "observTime", headerTitle: "Time Observed (hr)", propertyname: "observingTime"},
+ {name: "observTimeInc", headerTitle: "Time Observed Incremental (hr)", propertyname: "observingTimeInc"},
+ {name: "observTimeLeft", headerTitle: "Time left for Observing (hr)", propertyname: "observingTimeLeft"},
+ {name: "observTimeIncPercent", headerTitle: "Completed Observing Time(%)", propertyname: "observingTimeIncPercent"},
+ {name: "processTime", headerTitle: "Time Processed (hr)", propertyname: "processTime"},
+ {name: "processTimeInc", headerTitle: "Time Processed Incremental (hr)", propertyname: "processTimeInc"},
+ {name: "processTimeLeft", headerTitle: "Time left for Processing (hr)", propertyname: "processTimeLeft"},
+ {name: "processTimeIncPercent", headerTitle: "Completed Processing Time(%)", propertyname: "processTimeIncPercent"},
+ {name: "ingestDate", headerTitle: "LTA Ingest Date", propertyname: "ingestDate"},
+ {name: "ingestDataSize", headerTitle: "Ingested Data Size(TB)", propertyname: "ingestDataSize"},
+ {name: "ingestDataIncPercent", headerTitle: "Used LTA Allocation (Incremental) (%)", propertyname: "ingestDataIncPercent"},
+ {name: "observationSASId", headerTitle: "SAS ID (Observations)", propertyname: "observationSASId"},
+ {name: "pipelinseSASId", headerTitle: "SAS ID (Pipelines)", propertyname: "pipelinseSASId"},
+ ]
+
+class ProjectReport extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ project: null,
+ reportData: null,
+ projectResources: {},
+ suStatsList: [],
+ resourceUtilization: []
+ };
+ this.selectProject = this.selectProject.bind(this);
+ this.loadProjectReport = this.loadProjectReport.bind(this);
+ }
+
+ componentDidMount() {
+ ProjectService.getResources()
+ .then(resourceList => {this.resourceList = resourceList});
+ CycleService.getAllCycles()
+ .then(cycles => {this.cycles = cycles});
+ ProjectService.getProjects()
+ .then(projects => { this.setState({projects: projects}) });
+ }
+
+ selectProject(projectName) {
+ const project = _.find(this.state.projects, ['name', projectName]);
+ let reportPeriod = [];
+ if (project.cycles_ids.length > 0) {
+ let projectCycleDates = [];
+ for (const cycleId of project.cycles_ids) {
+ const cycle = _.find(this.cycles, ['name', cycleId]);
+ projectCycleDates.push(moment(cycle.start));
+ projectCycleDates.push(moment(cycle.stop));
+ }
+ reportPeriod = [_.min(projectCycleDates).toDate(), _.max(projectCycleDates).toDate()];
+ }
+ this.setState({projectName: projectName, reportPeriod: reportPeriod})
+ }
+
+ async loadProjectReport() {
+ const projectName = this.state.projectName;
+ if (projectName) {
+ const resourceList = this.resourceList;
+ const project = _.find(this.state.projects, ['name', projectName]);
+ const projectReport = await ReportService.getProjectReport(projectName);
+ let projectResources = {};
+ if (projectReport.error) {
+ console.log(projectReport.error);
+ } else {
+ for (let quota of projectReport.quota) {
+ const resource = _.find(resourceList, ["name", quota.resource_type_id]);
+ const conversionFactor = UnitConverter.resourceUnitMap[resource.quantity_value]?UnitConverter.resourceUnitMap[resource.quantity_value].conversionFactor:1;
+ quota.convertedValue = (quota.value / conversionFactor).toFixed(2);
+ projectResources[quota.resource_type_id] = quota;
+ }
+ }
+ let suStatsList = [], resourceUtilization = [];
+ if (projectReport["SUBs"]) {
+ const projectObservingTime = projectResources["LOFAR Observing Time"]?projectResources["LOFAR Observing Time"].value:0;
+ const projectProcessTime = projectResources["CEP Processing Time"]?projectResources["CEP Processing Time"].value:0;
+ const projectLTAStorage = projectResources["LTA Storage"]?projectResources["LTA Storage"].value:0;
+ const timeFactor = UnitConverter.resourceUnitMap["time"].conversionFactor;
+ const dataSizeFactor = UnitConverter.resourceUnitMap["bytes"].conversionFactor;
+ let totalSUBObsTime = 0, totalProcessTime = 0, totalLTAStorage = 0;
+ for (const subStatus of _.keys(projectReport["SUBs"])) {
+ let subs = projectReport["SUBs"][subStatus];
+ for (const sub of subs) {
+ let reportSub = _.cloneDeep(sub);
+ reportSub.status = subStatus;
+ suStatsList.push(reportSub);
+ }
+ }
+ suStatsList = _.orderBy(suStatsList, ['id']);
+ for (const reportSub of suStatsList) {
+ if (reportSub.duration) {
+ reportSub.observingTime = (reportSub.duration/timeFactor).toFixed(2);
+ totalSUBObsTime += reportSub.duration;
+ reportSub.observingTimeInc = (totalSUBObsTime / timeFactor).toFixed(2);
+ reportSub.observingTimeLeft = ((projectObservingTime - totalSUBObsTime)/timeFactor).toFixed(2);
+ reportSub.observingTimeIncPercent = (totalSUBObsTime/projectObservingTime*100).toFixed(2);
+ }
+ // For testing set duration as processDuration
+ reportSub.processDuration = reportSub.duration;
+ if (reportSub.processDuration) {
+ reportSub.processTime = (reportSub.processDuration/timeFactor).toFixed(2);
+ totalProcessTime += reportSub.processDuration;
+ reportSub.processTimeInc = (totalProcessTime / timeFactor).toFixed(2);
+ reportSub.processTimeLeft = ((projectProcessTime - totalProcessTime)/timeFactor).toFixed(2);
+ reportSub.processTimeIncPercent = (totalProcessTime / projectProcessTime *100).toFixed(2);
+ }
+ // For testing set dummy value for LTA dataproducts
+ reportSub["LTA dataproducts"] = {size__sum: 10737418240};
+ if (reportSub["LTA dataproducts"]) {
+ reportSub.ingestDataSize = (reportSub["LTA dataproducts"]["size__sum"]/dataSizeFactor).toFixed(2);
+ totalLTAStorage += reportSub["LTA dataproducts"]["size__sum"];
+ reportSub.ingestDataIncPercent = (totalLTAStorage / projectLTAStorage * 100).toFixed(2);
+ }
+ }
+ let observTimeUtilization = {type: 'Observing (hrs)', value: parseFloat((totalSUBObsTime/timeFactor).toFixed(2))};
+ resourceUtilization.push(observTimeUtilization);
+ let processTimeUtilization = {type: 'CEP Processing (hrs)', value: parseFloat((totalProcessTime/timeFactor).toFixed(2))};
+ resourceUtilization.push(processTimeUtilization);
+ let ltaStorageUtilization = {type: 'LTA Storage (TB)', value: parseFloat((totalLTAStorage/dataSizeFactor).toFixed(2))};
+ resourceUtilization.push (ltaStorageUtilization);
+ }
+ this.setState({project: project, reportData: projectReport, projectResources: projectResources,
+ suStatsList: suStatsList, resourceUtilization: resourceUtilization});
+ }
+ }
+
+ renderSUTableHeader() {
+ return (
+ <thead><tr>
+ {
+ SU_DETAILS_COLUMNS.map((item, index) => {
+ return <th key={("th_"+index)}>{item.headerTitle}</th>
+ })
+ }
+ </tr></thead>
+ );
+ }
+
+ renderSURows() {
+ const suStatsList = this.state.suStatsList;
+ return (
+ <>
+ {
+ suStatsList.map((rowData, rowIndex) => {
+ return (
+ <tr key={("tr_"+rowIndex)} style={{border: "1px solid"}}>
+ { SU_DETAILS_COLUMNS.map((column, colIndex) => {
+ return (
+ <td key={(rowIndex+"_td_"+colIndex)}>
+ {column.propertyname === "name"?(
+ <Link to={`/schedulingunit/view/blueprint/${rowData['id']}`} target="_blank">{rowData[column.propertyname]}</Link>
+ ):rowData[column.propertyname]}
+ </td>
+ )
+ })
+ }
+ </tr>
+ )
+ })
+ }
+ </>
+ );
+ }
+
+ downloadPDF() {
+ // let pdf = new jsPDF();
+ // pdf.html(document.getElementById("report-div").innerHTML)
+ // .then(doc => {pdf.save("project.pdf")});
+ const input = document.getElementById('report-div');
+ html2canvas(input)
+ .then((canvas) => {
+ const imgData = canvas.toDataURL('image/png');
+ const pdf = new jsPDF();
+ pdf.addImage(imgData, 'JPEG', 0, 0);
+ // pdf.output('dataurlnewwindow');
+ pdf.save("project.pdf");
+ });
+ }
+
+ render() {
+ const reportData = this.state.reportData;
+ const project = this.state.project;
+ let barData = {}, barOptions = {};
+ const resourceUtilization = this.state.resourceUtilization;
+ if (resourceUtilization.length > 0) {
+ barData = {
+ labels: _.map(resourceUtilization, 'type'),
+ datasets: [
+ { label: 'Utilization',
+ data: _.map(resourceUtilization, 'value'),
+ backgroundColor: [
+ '#44a3ce',
+ '#44a3ce',
+ '#44a3ce'
+ ],
+ // borderColor: [
+ // 'rgba(54, 162, 235, 1)',
+ // 'rgba(54, 162, 235, 1)',
+ // 'rgba(54, 162, 235, 1)'
+ // ],
+ // borderWidth: 1
+ }
+ ]
+ };
+
+ barOptions = {
+ indexAxis: 'y',
+ // Elements options apply to all of the options unless overridden in a dataset
+ // In this case, we are setting the border of each horizontal bar to be 2px wide
+ elements: {
+ bar: {
+ borderWidth: 1,
+ },
+ },
+ scales: {
+ y: {
+ max: 100
+ }
+ },
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'right',
+ },
+ title: {
+ display: true,
+ text: 'Resource Utilization',
+ }
+ }
+ };
+ }
+ return(
+ <React.Fragment>
+ <div className="report-toolbar p-grid" style={{marginTop: "10px", paddingBottom: "10px", borderBottom: "1px solid lightgrey"}}>
+ <label htmlFor="project" className="col-lg-1 col-md-2 col-sm-12">Project </label>
+ {/* <div className="col-lg-3 col-md-3 col-sm-12"> */}
+ <Dropdown inputId="project" optionLabel="name" optionValue="name"
+ className="col-lg-2 col-md-3 col-sm-12"
+ tooltip="Select Project" tooltipOptions={this.tooltipOptions}
+ value={this.state.projectName}
+ options={this.state.projects}
+ onChange={(e) => {this.selectProject(e.value)}}
+ placeholder="Select Project" />
+ {/* </div> */}
+ <label htmlFor="period" className="col-lg-2 col-md-2 col-sm-12" style={{paddingRight: "0px"}}>For Period </label>
+ <div className="col-lg-3 col-md-3 col-sm-12 report-calendar">
+ <Calendar value={this.state.reportPeriod} selectionMode="range" dateFormat="yy-mm-dd"
+ onChange={e => this.setState({reportPeriod: e.value})}></Calendar>
+ </div>
+ <div className="col-lg-1 col-md-1 col-sm-12">
+ <Button label="Generate" className="p-button-primary" icon="pi pi-check"
+ onClick={this.loadProjectReport} disabled={!this.state.projectName || !this.state.reportPeriod} />
+
+ </div>
+ {/* <i className="fa fa-download" onClick={(e) => this.downloadPDF()}></i> */}
+ </div>
+ {reportData &&
+ <>
+ <div className="report-div" id="report-div">
+ <h2 style={{textAlign: "center", marginBottom:"25px"}}>Report statistics for project {this.props.project}</h2>
+ <div className="p-grid">
+ <div className="col-lg-3 col-md-4 col-sm-12">
+ <label>Project Documentation</label>
+ </div>
+ <div className="col-lg-9 col-md-8 col-sm-12">
+ <a href="https://support.astron.nl/jira" target="_blank">Link to Jira Ticket</a>
+ </div>
+ <div className="col-lg-3 col-md-4 col-sm-12">
+ <label>Project statistics over the period</label>
+ </div>
+ <div className="col-lg-8 col-md-9 col-sm-12">
+ <span>{this.state.reportPeriod?`${moment(this.state.reportPeriod[0]).format("MMM DD YYYY")} - ${moment(this.state.reportPeriod[1]).format("MMM DD YYYY")}`:"-"}</span>
+ </div>
+ <div className="col-lg-3 col-md-4 col-sm-12">
+ <label>Contact Project Friend</label>
+ </div>
+ <div className="col-lg-8 col-md-9 col-sm-12">
+ <span>{reportData.friends?reportData.friends.join(","):"-"}</span>
+ </div>
+ <div className="col-lg-3 col-md-4 col-sm-12">
+ <label>Awarded Observing Time(hours)</label>
+ </div>
+ <div className="col-lg-8 col-md-9 col-sm-12">
+ <span>{this.state.projectResources["LOFAR Observing Time"]?this.state.projectResources["LOFAR Observing Time"].convertedValue:"-"}</span>
+ </div>
+ <div className="col-lg-3 col-md-4 col-sm-12">
+ <label>Awarded Processing Time(hours)</label>
+ </div>
+ <div className="col-lg-8 col-md-9 col-sm-12">
+ <span>{this.state.projectResources["CEP Processing Time"]?this.state.projectResources["CEP Processing Time"].convertedValue:"-"}</span>
+ </div>
+ <div className="col-lg-3 col-md-4 col-sm-12">
+ <label>Awarded LTA Storage(TB)</label>
+ </div>
+ <div className="col-lg-8 col-md-9 col-sm-12">
+ <span>{this.state.projectResources["LTA Storage"]?this.state.projectResources["LTA Storage"].convertedValue:"-"}</span>
+ </div>
+ <div className="col-lg-3 col-md-4 col-sm-12">
+ <label>Release Date</label>
+ </div>
+ <div className="col-lg-8 col-md-9 col-sm-12">
+ <span>{project.releaseDate?project.releaseDate:"-"}</span>
+ </div>
+ </div>
+
+ {resourceUtilization.length > 0 &&
+ <div className="resource-utilization" style={{paddingTop: "10px", paddingBottom: "10px"}}>
+ <Bar data={barData} options={barOptions} width="50%" height="10"/>
+ </div>
+ }
+ <div className="su_details">
+ <label>Scheduling Units of the project</label>
+ <table className="report-table">
+ {this.renderSUTableHeader()}
+ <tbody>
+ {this.renderSURows()}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </>
+ }
+ </React.Fragment>
+ );
+ }
+
+}
+
+export default ProjectReport;
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Workflow/index.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Workflow/index.js
index 4fe4ee6675ff8c29ff6893460177ef8010e72c48..f2baaf1d0d7b6c317da5d7f55c3b429ceabf33d4 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Workflow/index.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Workflow/index.js
@@ -199,7 +199,11 @@ export default (props) => {
return (
<>
<Growl ref={(el) => growl = el} />
- {currentView && <PageHeader location={props.location} title={`${title}`} actions={[{ icon: 'fa-window-close', link: props.history.goBack, title: 'Click to Close Workflow'}]} />}
+ {currentStep &&
+ <PageHeader location={props.location} title={`${title}`}
+ actions={[{type:'ext_link', icon:'', label: 'SDC Helpdesk', title: 'Report major issues here', props: { pathname: 'https://support.astron.nl/sdchelpdesk' } },
+ {icon: 'fa-window-close', link: props.history.goBack, title: 'Click to Close Workflow', props: { pathname: '/schedulingunit/1/workflow' } },
+ ]} />}
{loader && <AppLoader />}
{!loader && schedulingUnit &&
<>
@@ -225,7 +229,7 @@ export default (props) => {
<label className="col-sm-10 ">
<a href=" https://proxy.lofar.eu/lofmonitor/" target="_blank">Station Monitor</a>
</label>
- </div>
+ </div>
</div>}
<div className={`step-header-${currentStep}`}>
<Steps model={getStepItems()} activeIndex={currentView - 1} readOnly={false}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/index.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/index.js
index aa2ce1fc7a253bf50bfc8f524aedbe3beffc5773..40f74503d596ad7393b9ee135b4303485f7bab0d 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/index.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/index.js
@@ -19,6 +19,7 @@ import { ReservationCreate, ReservationList, ReservationView, ReservationEdit }
import { FindObjectResult } from './Search/'
import SchedulingSetCreate from './Scheduling/excelview.schedulingset';
import Workflow from './Workflow';
+import ReportHome from './Report';
import { Growl } from 'primereact/components/growl/Growl';
import { setAppGrowl } from '../layout/components/AppGrowl';
import WorkflowList from './Workflow/workflow.list'
@@ -192,6 +193,12 @@ export const routes = [
component: WorkflowList,
name: 'Workflow',
title: 'Workflow'
+ },
+ {
+ path: "/reports",
+ component: ReportHome,
+ name: 'Reports',
+ title: 'Reports'
}
];
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/report.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/report.service.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0224c3f1f3943ec64498d931ab6ecef69156488
--- /dev/null
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/report.service.js
@@ -0,0 +1,18 @@
+import axios from "axios";
+
+const ReportService = {
+
+ getProjectReport: async(project) => {
+ let reportData = {};
+ try {
+ const response = await axios.get(`/api/project/${project}/report/`);
+ reportData = response.data;
+ } catch(error) {
+ console.error(error);
+ reportData.error = error;
+ }
+ return reportData;
+ }
+}
+
+export default ReportService;
\ No newline at end of file