fix(ui): task duration (#209)

shini4i · Oct 13, 2023 · d112631 · d112631
1 parent 8dfe92b
commit d112631
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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: