TMSS-239

Changes updated

SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/list.js

@@ -12,7 +12,7 @@ class CycleList extends Component{
         this.state = {
             cyclelist: [],
             paths: [{
-                "View": "/cycle",
+                "View": "/cycle/view",
             }],
             projectCategory: ['regular', 'user_shared_support'],
             periodCategory: ['long_term'],
@@ -21,36 +21,37 @@ class CycleList extends Component{
                     id:"Cycle Code",
                     start:"Start Date",
                     stop: "End Date",
-                    duration: "Duration",
+                    duration: "Duration (Days)",
                     totalProjects: 'No.of Projects',
-                    longterm : 'LongTerm Projects',
                     observingTime: 'Lofar Observing Time (Hrs)',
                     processingTime: 'Lofar Processing Time (Hrs)',
                     ltaResources: 'Lofar LTA Resources(TB)',
                     support: 'Lofar Support (Hrs)',
+                    longterm : 'Long Term Projects'
                      
                 }
             ],
             optionalcolumns : [{
-                regularProjects: 'No.of Regular',
+                regularProjects: 'No.of Regular/Project',
                 observingTimeDDT: 'Lofar Observing Time Commissioning (Hrs)',
                 observingTimePrioA: 'Lofar Observing Time Prio A (Hrs)',
                 observingTimePrioB: 'Lofar Observing Time Prio B (Hrs)'
+
             }],
 
             columnclassname: [{
-                "Cycle Code":"filter-input-50",
-                "Duration" : "filter-input-75",
-                "No.of Projects" : "filter-input-75",
-                "LongTerm Projects" : "filter-input-75",
-                "Lofar Observing Time (hr)" : "filter-input-75",
-                "Lofar Processing Time (hr)" : "filter-input-75",
-                "Lofar LTA Resources(TB)" : "filter-input-100",
-                "Lofar Support (hr)" : "filter-input-50",
-                "No.of Regular" : "filter-input-50",
-                "Lofar Observing Time Commissioning (hr)" : "filter-input-50",
-                "Lofar Observing Time Prio A (hr)" : "filter-input-50",
-                "Lofar Observing Time Prio B (hr)" : "filter-input-50"
+                "Cycle Code":"filter-input-75",
+                "Duration (Days)" : "filter-input-50",
+                "No.of Projects" : "filter-input-50",
+                "Lofar Observing Time (Hrs)" : "filter-input-50",
+                "Lofar Processing Time (Hrs)" : "filter-input-50",
+                "Lofar LTA Resources(TB)" : "filter-input-50",
+                "Lofar Support (Hrs)" : "filter-input-50",
+                "Long Term Projects" : "filter-input-50",
+                "No.of Regular/Project" : "filter-input-50",
+                "Lofar Observing Time Commissioning (Hrs)" : "filter-input-50",
+                "Lofar Observing Time Prio A (Hrs)" : "filter-input-50",
+                "Lofar Observing Time Prio B (Hrs)" : "filter-input-50"
             }],
             isprocessed: false,
             isLoading: true
@@ -62,24 +63,20 @@ class CycleList extends Component{
         return UnitConversion.getUIResourceUnit(coversionType,d)
     }
 
-        componentDidMount(){ 
+    getCycles(cycles = [], cycleQuota) {
         const { projectCategory} = this.state;
         const { periodCategory} = this.state;
-
-        const promises = [CycleService.getProjects(), CycleService.getCycleQuota(),CycleService.getResources()]
+        const promises = [];
+        cycles.map(cycle => promises.push(CycleService.getCycleById(cycle.name)));
         Promise.all(promises).then(responses => {
-            const projects = responses[0];
-            const cycleQuota = responses[1];
-            this.setState({ resources: responses[2].data.results });
-            CycleService.getAllCycles().then(cyclelist =>{
-                const results = cyclelist || [];
-                results.map(cycle => {
-                    const regularProjects = projects.data.results.filter(project => project.cycles_ids.includes(cycle.name) && projectCategory.includes(project.project_category_value));
-                    const longterm = projects.data.results.filter(project => project.cycles_ids.includes(cycle.name) && periodCategory.includes(project.period_category_value));
-                    const timediff = new Date(cycle.stop).getTime() - new Date(cycle.start).getTime();
-                    cycle.duration = timediff / (1000 * 3600 * 24);
+            const results = cycles;
+            results.map(async (cycle, index) => {
+                const projects = responses[index];
+                const regularProjects = projects.filter(project => projectCategory.includes(project.project_category_value));
+                const longterm = projects.filter(project => periodCategory.includes(project.period_category_value));
+                cycle.duration = UnitConversion.getUIResourceUnit('days', cycle.duration);
                 cycle.totalProjects = cycle.projects ? cycle.projects.length : 0;
-                    cycle.id = cycle.name ? cycle.name.split(' ').join('') : cycle.name;
+                cycle.id = cycle.name ;
                 cycle.regularProjects = regularProjects.length;
                 cycle.longterm = longterm.length;
                 cycle.observingTime = this.conversion((cycleQuota.data.results.find(quota => quota.cycle_id === cycle.name && quota.resource_type_id === 'observing_time') || {value: 0}).value, 'observing_time')
@@ -89,7 +86,7 @@ class CycleList extends Component{
                 cycle.observingTimeDDT = this.conversion((cycleQuota.data.results.find(quota => quota.cycle_id === cycle.name && quota.resource_type_id === 'observing_time_commissioning') || {value: 0}).value, 'observing_time_commissioning')
                 cycle.observingTimePrioA = this.conversion((cycleQuota.data.results.find(quota => quota.cycle_id === cycle.name && quota.resource_type_id === 'observing_time_prio_a') || {value: 0}).value, 'observing_time_prio_a')
                 cycle.observingTimePrioB = this.conversion((cycleQuota.data.results.find(quota => quota.cycle_id === cycle.name && quota.resource_type_id === 'observing_time_prio_b') || {value: 0}).value, 'observing_time_prio_b')
-                    cycle.actionpath = "/cycle/view/{cycle_name}";
+                cycle['actionpath'] = '/cycle/view';
                 return cycle;
             });
             this.setState({
@@ -97,8 +94,18 @@ class CycleList extends Component{
                 isprocessed: true,
                 isLoading: false
             });
-            })
-        })  
+        });
+    }
+
+    componentDidMount(){ 
+        const promises = [CycleService.getCycleQuota(), CycleService.getResources()]
+        Promise.all(promises).then(responses => {
+            const cycleQuota = responses[0];
+            this.setState({ resources: responses[1].data.results });
+            CycleService.getAllCycles().then(cyclelist => {
+                this.getCycles(cyclelist, cycleQuota)
+            });
+        });  
     }
 	
 	render(){
@@ -133,9 +140,13 @@ class CycleList extends Component{
                         paths={this.state.paths}
                  />  : <></>
                  } 
+                
+
+                
             </>
         )
     }
 }
 
 export default CycleList
+

SAS/TMSS/frontend/tmss_webapp/src/routes/Cycle/view.js

+import React, {Component} from 'react';
+
+
+export class CycleView extends Component {
+
+    constructor(props){
+        super(props)
+        console.log(this.props)
+    }
+    render() {
+        return (
+            <h1>CycleView</h1>
+        );
+    }
+}
+
+export default CycleView;
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/routes/index.js

@@ -12,6 +12,7 @@ import {Scheduling} from './Scheduling';
 import {TaskEdit, TaskView} from './Task';
 import ViewSchedulingUnit from './Scheduling/ViewSchedulingUnit'
 import CycleList from './Cycle/list';
+import CycleView from './Cycle/view';
 
 export const routes = [
     {
@@ -71,6 +72,11 @@ export const routes = [
         component: CycleList,
         name: 'Cycle List'
     },
+    {
+        path: "/cycle/view",
+        component: CycleView,
+        name: 'Cycle View'
+    },
 ];
 
 export const RoutedContent = () => {

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

@@ -13,9 +13,9 @@ const CycleService = {
             console.error(error);
         }
     },
-      getCycle: async function(id) {
+    getCycleById: async function (id) {
         try {
-          const url = `/api/cycle/${id}`;
+            const url = `/api/cycle/${id}/project`;
             const response = await axios.get(url);
             return response.data.results;
         } catch (error) {
@@ -23,16 +23,6 @@ const CycleService = {
         }
     },
 
-      getProjects: async function() {
-        let res = [];
-        await axios.get('/api/project/')
-        .then(response => {
-            res= response;
-        }).catch(function(error) {
-            console.error('[cycle.services.project]',error);
-        });
-        return res;
-    },
     getCycleQuota: async function () {
         let res = [];
         await axios.get('/api/cycle_quota/')

SAS/TMSS/frontend/tmss_webapp/src/utils/unit.converter.js

 const UnitConverter = {
     resourceUnitMap: {'time':{display: 'Hours', conversionFactor: 3600, mode:'decimal', minFractionDigits:0, maxFractionDigits: 2 }, 
                       'bytes': {display: 'TB', conversionFactor: (1024*1024*1024*1024), mode:'decimal', minFractionDigits:0, maxFractionDigits: 3}, 
-                      'number': {display: 'Numbers', conversionFactor: 1, mode:'decimal', minFractionDigits:0, maxFractionDigits: 0}},
+                      'number': {display: 'Numbers', conversionFactor: 1, mode:'decimal', minFractionDigits:0, maxFractionDigits: 0},
+                      'days': {display: 'Days', conversionFactor: (3600*24), mode:'decimal', minFractionDigits:0, maxFractionDigits: 0}},
 
     getDBResourceUnit: function() {