From 745d87b832882d47963246884daf604b65d4a823 Mon Sep 17 00:00:00 2001
From: Vicente Zepeda Mas <vzepedam@redhat.com>
Date: Fri, 1 Dec 2023 16:17:07 +0100
Subject: [PATCH] Adds datetime formating to the display table

Signed-off-by: Vicente Zepeda Mas <vzepedam@redhat.com>
---
 .../PatternflyComponents/Table/TableView.js   |  6 ++++--
 frontend/src/helpers/Formatters.js            | 20 +++++++++++++++++--
 frontend/src/store/reducers/InitialData.js    |  8 ++++----
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/PatternflyComponents/Table/TableView.js b/frontend/src/components/PatternflyComponents/Table/TableView.js
index 8d00083a..8e208964 100644
--- a/frontend/src/components/PatternflyComponents/Table/TableView.js
+++ b/frontend/src/components/PatternflyComponents/Table/TableView.js
@@ -2,6 +2,8 @@
 import {Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent} from '@patternfly/react-table';
 import {Puff} from "react-loading-icons";
 import React, {useEffect, useState} from "react";
+import {getFormattedDate} from "../../../helpers/Formatters";
+
 
 
 export const TableView = ({columns , rows = [], initialState = true, stickyHeader=false,
@@ -29,7 +31,7 @@ export const TableView = ({columns , rows = [], initialState = true, stickyHeade
         return <Tbody>
                     { rows &&
                       rows.map( (item, index)=> <Tr key={index}>
-                          {item.tableRows.map( (value, idx) => <Td dataLabel={columns[idx]} key={idx}>{value}</Td> )}
+                          {item.tableRows.map( (value, idx) => <Td dataLabel={columns[idx]} key={idx}>{ columns[idx] === "Start Date" || columns[idx] === "End Date" ? getFormattedDate(value) : value }</Td> )}
                           </Tr>
                       )
                     }
@@ -46,7 +48,7 @@ export const TableView = ({columns , rows = [], initialState = true, stickyHeade
                                   isExpanded: expand[index],
                                   onToggle: handleToggle
                               }} />
-                              {item.tableRows.map( (value, idx) => <Td dataLabel={columns[idx]} key={idx}>{value}</Td> )}
+                              {item.tableRows.map( (value, idx) => <Td dataLabel={columns[idx]} key={idx}>{ columns[idx] === "Start Date" || columns[idx] === "End Date" ? getFormattedDate(value) : value }</Td> )}
                         </Tr>
                         <Tr isExpanded={expand[index]}>
                               <Td dataLabel={columns[index]} noPadding colSpan={columns.length + 1}>
diff --git a/frontend/src/helpers/Formatters.js b/frontend/src/helpers/Formatters.js
index 1f6d7b1c..275660a1 100644
--- a/frontend/src/helpers/Formatters.js
+++ b/frontend/src/helpers/Formatters.js
@@ -1,4 +1,4 @@
-export function formatTime(time) {   
+export function formatTime(time) {
     // Hours, minutes and seconds
     var hrs = ~~(time / 3600);
     var mins = ~~((time % 3600) / 60);
@@ -12,4 +12,20 @@ export function formatTime(time) {
     ret += "" + mins + ":" + (secs < 10 ? "0" : "");
     ret += "" + secs;
     return ret;
-}
\ No newline at end of file
+}
+
+export function getFormattedDate(date) {
+    let d = new Date();
+    if (typeof date === 'string' || date instanceof String)
+        d = new Date(date);
+    else
+        d = new Date(date.props.value);
+
+    var year = d.getFullYear();
+    var month = ("0" + (d.getMonth() + 1)).slice(-2);
+    var day  = ("0" + (d.getDate())).slice(-2);
+    var hour =  ("0" + (d.getHours())).slice(-2);
+    var min =  ("0" + (d.getMinutes())).slice(-2);
+    var sec = ("0" + (d.getSeconds())).slice(-2);
+    return year + "-" + month + "-" + day + " " + hour + ":" +  min + ":" + sec;
+}
diff --git a/frontend/src/store/reducers/InitialData.js b/frontend/src/store/reducers/InitialData.js
index 53e31d50..9a94290f 100644
--- a/frontend/src/store/reducers/InitialData.js
+++ b/frontend/src/store/reducers/InitialData.js
@@ -30,10 +30,10 @@ export const OCP_INITIAL_DATA = {
     startDate: '',
     endDate: '',
     tableData : [{ name: "Benchmark", value: "benchmark" },
-                {name:"ReleaseStream", value: "releaseStream"},
-                {name: "WorkerCount", value: "workerNodesCount"},
-                {name: "StartDate", value: "startDate"},
-                {name: "EndDate", value: "endDate"},
+                {name:"Release Stream", value: "releaseStream"},
+                {name: "Worker Count", value: "workerNodesCount"},
+                {name: "Start Date", value: "startDate"},
+                {name: "End Date", value: "endDate"},
                 {name: "Status", value: "jobStatus"}],
 }