Merge branch 'TMSS-643' into 'master'

Resolves TMSS-643

Closes TMSS-643

See merge request !446

SAS/TMSS/frontend/tmss_webapp/src/layout/sass/reservation.scss

@@ -10,3 +10,8 @@
     top: 2.2em;
     width: 40em;
 }
+
+.p-field.p-grid, .p-formgrid.p-grid {
+    margin-left: -2px;
+    margin-top: 0;
+}
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.list.js

@@ -43,7 +43,7 @@ export class ReservationList extends Component{
                     format:UIConstants.CALENDAR_DATETIME_FORMAT
                 },
                 duration:{
-                    name:"Duration (HH:mm:ss)",
+                    name:"Duration (Days HH:mm:ss)",
                     format:UIConstants.CALENDAR_TIME_FORMAT
                 },
                 type: {
@@ -86,7 +86,7 @@ export class ReservationList extends Component{
             optionalcolumns:  [{ 
             }],
             columnclassname: [{
-                "Duration (HH:mm:ss)":"filter-input-75",
+                "Duration (Days HH:mm:ss)":"filter-input-75",
                 "Reservation type":"filter-input-100",
                 "Subject":"filter-input-75",
                 "Planned":"filter-input-50",
@@ -143,7 +143,7 @@ export class ReservationList extends Component{
                     reservation['stop_time']= 'Unknown';
                 } else {
                     let duration = reservation.duration;
-                    reservation.duration = UnitService.getSecsToHHmmss(reservation.duration);
+                    reservation.duration = UnitService.getSecsToDDHHmmss(reservation.duration);
                     reservation['stop_time']= moment(reservation['stop_time']).format(UIConstants.CALENDAR_DATETIME_FORMAT);
                 }
                 reservation['start_time']= moment(reservation['start_time']).format(UIConstants.CALENDAR_DATETIME_FORMAT);

SAS/TMSS/frontend/tmss_webapp/src/routes/Reservation/reservation.view.js

@@ -12,6 +12,7 @@ import { appGrowl } from '../../layout/components/AppGrowl';
 import AppLoader from '../../layout/components/AppLoader';
 import PageHeader from '../../layout/components/PageHeader';
 import ReservationService from '../../services/reservation.service';
+import UnitConverter from '../../utils/unit.converter';
 
 export class ReservationView extends Component {
     constructor(props) {
@@ -176,6 +177,8 @@ export class ReservationView extends Component {
                             <span className="col-lg-4 col-md-4 col-sm-12">{(this.state.reservation.project_id)?this.state.reservation.project_id:''}</span>
                             {/* <label className="col-lg-2 col-md-2 col-sm-12">Reservation Strategy</label>
                             <span className="col-lg-4 col-md-4 col-sm-12">{this.state.reservation.specifications_doc.activity.name}</span> */}
+                            <label className="col-lg-2 col-md-2 col-sm-12">Duration (Days HH:mm:ss)</label>
+                            <span className="col-lg-4 col-md-4 col-sm-12">{(this.state.reservation.duration)?UnitConverter.getSecsToDDHHmmss(this.state.reservation.duration):'Unknown'}</span>
                         </div>
                        
                         <div className="p-fluid">

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

 import _, { round } from 'lodash';
+import moment from "moment";
 
 const UnitConverter = {
-    resourceUnitMap: {'time':{display: 'Hours', conversionFactor: 3600, mode:'decimal', minFractionDigits:0, maxFractionDigits: 2 }, 
+    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 },
-                      'days': {display: 'Days', conversionFactor: (3600*24), mode:'decimal', minFractionDigits:0, maxFractionDigits: 0}},
+        'days': { display: 'Days', conversionFactor: (3600 * 24), mode: 'decimal', minFractionDigits: 0, maxFractionDigits: 0 }
+    },
 
     getDBResourceUnit: function () {
 
@@ -22,8 +25,39 @@ const UnitConverter = {
         }
         return value;
     },
+
+    /**
+     * Function to convert the duration to string format (Days HH:mm:ss). 
+     * The days part is of 3 characters prefixed with 0s if it is less than 3 characters.
+     * @param {Number} duration - Duration in seconds
+     * @returns String - Formatted to 'Day HH:mm:ss' format.
+     */
+    getSecsToDDHHmmss: function(duration) {
+        var days = Math.floor(duration / 86400);
+        duration -= days * 86400;
+
+        return `${(days+"").padStart(3,0)} ${this.getSecsToHHmmss(duration)}`;
+    },
+  
+    /**
+     * Function to get a date (to date) offset from another date(from date) by certain duration.
+     * The duration is defined in 'Days Hours:minutes:seconds' format.
+     * @param {String} startdate - string of a date object
+     * @param {String} duration - duration in string format 'DDD HH:mm:ss'
+     * @returns 
+     */
+    getEndDateFromDuration: function(startdate, duration) {  
+        var values = duration.split(' ');
+        var days = values[0];
+        let tempStart = moment(startdate);
+        let tempEnd = _.clone(tempStart);
+        tempEnd.add(days, 'days');
+        tempEnd.add(this.getHHmmssToSecs(values[1]), 'seconds');
+        return tempEnd.toDate();
+    },
+
     getSecsToHHmmss: function (seconds) {
-        if (seconds) {
+        if (seconds >= 0) {
             const hh = Math.floor(seconds / 3600);
             const mm = Math.floor((seconds - hh * 3600) / 60);
             const ss = +((seconds - (hh * 3600) - (mm * 60)) / 1);