feat(ui): Display detailed Start/End times in workflow-node-info. Fixes

#7920 (#9834) Signed-off-by: ibotdotout <tkroputa@gmail.com>
argoproj · Oct 18, 2022 · ce31728 · ce31728
1 parent b323bb1
commit ce31728
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -79,6 +79,24 @@ const AttributeRows = (props: {attributes: {title: string; value: any}[]}) => (
     </div>
 );
 
+const DisplayWorkflowTime = (props: {date: Date | string | number}) => {
+    const {date} = props;
+    const getLocalDateTime = (utc: Date | string | number) => {
+        return new Date(utc.toString()).toLocaleString();
+    };
+    return (
+        <div>
+            {date === null || date === undefined ? (
+                '-'
+            ) : (
+                <span>
+                    {getLocalDateTime(date)} (<Timestamp date={date} />)
+                </span>
+            )}
+        </div>
+    );
+};
+
 const WorkflowNodeSummary = (props: Props) => {
     const {workflow, node} = props;
 
@@ -107,8 +125,8 @@ const WorkflowNodeSummary = (props: Props) => {
                   }
               ]
             : []),
-        {title: 'START TIME', value: <Timestamp date={props.node.startedAt} />},
-        {title: 'END TIME', value: <Timestamp date={props.node.finishedAt} />},
+        {title: 'START TIME', value: <DisplayWorkflowTime date={props.node.startedAt} />},
+        {title: 'END TIME', value: <DisplayWorkflowTime date={props.node.finishedAt} />},
         {
             title: 'DURATION',
             value: <Ticker>{now => <DurationPanel duration={nodeDuration(props.node, now)} phase={props.node.phase} estimatedDuration={props.node.estimatedDuration} />}</Ticker>