Merge pull request #2232 from Kobzol/status-page-fix

Fix duration formatting on the status page

Author: Kobzol

site/frontend/src/pages/status/page.vue

@@ -2,7 +2,7 @@
 import {getJson} from "../../utils/requests";
 import {STATUS_DATA_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
-import {formatDuration} from "../../utils/formatting";
+import {formatSecondsAsDuration} from "../../utils/formatting";
 import {computed, ref, Ref} from "vue";
 import {
   Artifact,
@@ -275,7 +275,9 @@ loadStatus(loading);
               <td>
                 {{ format(currentRun.expected_end, "HH:mm") }}
               </td>
-              <td>{{ timeLeft <= 0 ? "?" : formatDuration(timeLeft) }}</td>
+              <td>
+                {{ timeLeft <= 0 ? "?" : formatSecondsAsDuration(timeLeft) }}
+              </td>
             </tr>
           </tbody>
         </table>
@@ -307,11 +309,11 @@ loadStatus(loading);
                 {{
                   step.current_progress == 0
                     ? ""
-                    : formatDuration(step.current_progress)
+                    : formatSecondsAsDuration(step.current_progress)
                 }}
               </td>
               <td class="aligned">
-                {{ formatDuration(step.expected_duration) }}
+                {{ formatSecondsAsDuration(step.expected_duration) }}
               </td>
             </tr>
           </tbody>
@@ -322,7 +324,7 @@ loadStatus(loading);
         <div>
           Last collection finished at
           {{ fromUnixTime(lastFinishedRun.finished_at).toLocaleString() }} ({{
-            formatDuration(
+            formatSecondsAsDuration(
               differenceInSeconds(
                 new Date(),
                 fromUnixTime(lastFinishedRun.finished_at)
@@ -373,7 +375,7 @@ loadStatus(loading);
                 }}<template v-if="item.end_estimated"> (est.)</template>
               </td>
               <td v-if="item.duration !== null">
-                {{ formatDuration(item.duration) }}
+                {{ formatSecondsAsDuration(item.duration) }}
               </td>
               <td v-else class="centered">-</td>
               <td v-if="item.errors.length > 0">

site/frontend/src/pages/status_new/data.ts

@@ -5,7 +5,7 @@ export const BenchmarkRequestArtifactsReadyStr = "artifacts_ready";
 type BenchmarkRequestStatusComplete = {
   state: typeof BenchmarkRequestCompleteStr;
   completedAt: string;
-  duration: number; // time in milliseconds
+  duration_s: number;
 };
 
 type BenchmarkRequestStatusInProgress = {

site/frontend/src/pages/status_new/page.vue

@@ -4,7 +4,7 @@ import {h, ref, Ref} from "vue";
 import {getJson} from "../../utils/requests";
 import {STATUS_DATA_NEW_URL} from "../../urls";
 import {withLoading} from "../../utils/loading";
-import {formatDuration} from "../../utils/formatting";
+import {formatSecondsAsDuration} from "../../utils/formatting";
 import {
   StatusResponse,
   CollectorJobMap,
@@ -45,7 +45,7 @@ function getCreatedAt(request: BenchmarkRequest): string {
 
 function getDuration(request: BenchmarkRequest): string {
   if (request.status.state == BenchmarkRequestCompleteStr) {
-    return formatDuration(request.status.duration);
+    return formatSecondsAsDuration(request.status.duration_s);
   }
   return "";
 }

site/frontend/src/utils/formatting.ts

@@ -1,17 +1,19 @@
-export function formatDuration(milliseconds: number): string {
-  let seconds = milliseconds / 1000;
-  let secs = seconds % 60;
-  let mins = Math.trunc(seconds / 60);
+// `time` has to be in seconds
+export function formatSecondsAsDuration(time: number): string {
+  let seconds = time % 60;
+  let mins = Math.trunc(time / 60);
   let hours = Math.trunc(mins / 60);
   mins -= hours * 60;
 
   let s = "";
   if (hours > 0) {
     s = `${hours}h ${mins < 10 ? "0" + mins : mins}m ${
-      secs < 10 ? "0" + secs : secs
+      seconds < 10 ? "0" + seconds : seconds
     }s`;
   } else {
-    s = `${mins < 10 ? " " + mins : mins}m ${secs < 10 ? "0" + secs : secs}s`;
+    s = `${mins < 10 ? " " + mins : mins}m ${
+      seconds < 10 ? "0" + seconds : seconds
+    }s`;
   }
   return s;
 }

site/src/api.rs

@@ -401,7 +401,7 @@ pub mod status_new {
     pub struct BenchmarkRequestStatusUi {
         pub state: String,
         pub completed_at: Option<DateTime<Utc>>,
-        pub duration: Option<u32>,
+        pub duration_s: Option<u64>,
     }
 
     #[derive(Serialize, Debug)]

site/src/request_handlers/status_page_new.rs

@@ -12,18 +12,18 @@ use database::{
 };
 
 fn benchmark_request_status_to_ui(status: BenchmarkRequestStatus) -> BenchmarkRequestStatusUi {
-    let (completed_at, duration) = match status {
+    let (completed_at, duration_s) = match status {
         BenchmarkRequestStatus::Completed {
             duration,
             completed_at,
-        } => (Some(completed_at), u32::try_from(duration.as_millis()).ok()),
+        } => (Some(completed_at), Some(duration.as_secs())),
         _ => (None, None),
     };
 
     BenchmarkRequestStatusUi {
         state: status.as_str().to_owned(),
         completed_at,
-        duration,
+        duration_s,
     }
 }