From d112631cdff85328650e8d632f42859924c54ab2 Mon Sep 17 00:00:00 2001
From: Bogdans Ozerkins <b.ozerkins@outlook.com>
Date: Fri, 13 Oct 2023 10:39:25 +0300
Subject: [PATCH] fix(ui): task duration (#209)

---
 docs/development.md              |  5 +++--
 web/src/Components/TasksTable.js |  8 +++++---
 web/src/Utils.js                 | 16 ++++++++++++----
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/docs/development.md b/docs/development.md
index 71f81ba6..41056013 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -66,23 +66,24 @@ go mod download
 LOG_LEVEL=debug LOG_FORMAT=text ARGO_URL=http://localhost:8081 ARGO_TOKEN=example STATE_TYPE=in-memory go run . -server
 ```
 
-
 ### Start the argo-watcher server (postgres)
 
 Start database
+
 ```shell
 # start the database in a separate terminal window
 docker compose up postgres
 ```
 
 Start server
+
 ```shell
 # go to backend directory
 cd cmd/argo-watcher
 # install dependencies
 go mod tidy
 # OR start argo-watcher (postgres)
-LOG_LEVEL=debug LOG_FORMAT=text ARGO_URL=http://localhost:8081 ARGO_TOKEN=example STATE_TYPE=postgres DB_USER=watcher DB_PASSWORD=watcher DB_NAME=watcher go run . -server
+LOG_LEVEL=debug LOG_FORMAT=text ARGO_URL=http://localhost:8081 ARGO_TOKEN=example STATE_TYPE=postgres DB_USER=watcher DB_PASSWORD=watcher DB_NAME=watcher DB_MIGRATIONS_PATH=../../db/migrations go run . -server
 ```
 
 #### Logs in simple text
diff --git a/web/src/Components/TasksTable.js b/web/src/Components/TasksTable.js
index 721e9f49..725aca61 100644
--- a/web/src/Components/TasksTable.js
+++ b/web/src/Components/TasksTable.js
@@ -353,10 +353,12 @@ function TasksTable({
                     )}
                   </TableCell>
                   <TableCell>
-                    {task.updated && (
-                      <span>{taskDuration(task.created, task.updated)}</span>
+                    {task.status === 'in progress' && (
+                      <span>{taskDuration(task.created, null)}</span>
+                    )}
+                    {task.status !== 'in progress' && (
+                      <span>{taskDuration(task.created, task?.updated)}</span>
                     )}
-                    {!task.updated && <span>-</span>}
                   </TableCell>
                   <TableCell>
                     {task.images.map((item, index) => {
diff --git a/web/src/Utils.js b/web/src/Utils.js
index 6adf3b89..1dea4946 100644
--- a/web/src/Utils.js
+++ b/web/src/Utils.js
@@ -8,21 +8,29 @@ export const relativeTime = oldTimestamp => {
 };
 
 export const relativeHumanDuration = seconds => {
+  function numberEnding(number) {
+    return number > 1 ? 's' : '';
+  }
+
   if (seconds < 60) {
     // Less than a minute has passed:
     return `< 1 minute`;
   } else if (seconds < 3600) {
     // Less than an hour has passed:
-    return `${Math.floor(seconds / 60)} minutes`;
+    const minutes = Math.floor(seconds / 60);
+    return `${minutes} minute${numberEnding(minutes)}`;
   } else if (seconds < 86400) {
     // Less than a day has passed:
-    return `${Math.floor(seconds / 3600)} hours`;
+    const hours = Math.floor(seconds / 3600);
+    return `${hours} hour${numberEnding(hours)}`;
   } else if (seconds < 2620800) {
     // Less than a month has passed:
-    return `${Math.floor(seconds / 86400)} days`;
+    const days = Math.floor(seconds / 86400);
+    return `${days} day${numberEnding(days)}`;
   } else if (seconds < 31449600) {
     // Less than a year has passed:
-    return `${Math.floor(seconds / 2620800)} months`;
+    const months = Math.floor(seconds / 2620800);
+    return `${months} month${numberEnding(months)}`;
   }
 
   // More than a year has passed: