Add time remaining to embedding reindex pane (#14279)

* Add function to convert seconds to human readable duration

* Add estimated time remaining to reindexing pane

web/src/pages/Explore.tsx

@@ -10,6 +10,7 @@ import { useTimezone } from "@/hooks/use-date-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { SearchFilter, SearchQuery, SearchResult } from "@/types/search";
 import { ModelState } from "@/types/ws";
+import { formatSecondsToDuration } from "@/utils/dateUtil";
 import SearchView from "@/views/search/SearchView";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { LuCheck, LuExternalLink, LuX } from "react-icons/lu";
@@ -282,6 +283,16 @@ export default function Explore() {
                   />
                 </div>
                 <div className="flex w-96 flex-col gap-2 py-5">
+                  {reindexProgress.time_remaining >= 0 && (
+                    <div className="mb-3 flex flex-col items-center justify-center gap-1">
+                      <div className="text-primary-variant">
+                        Estimated time remaining:
+                      </div>
+                      {formatSecondsToDuration(
+                        reindexProgress.time_remaining,
+                      ) || "Finishing shortly"}
+                    </div>
+                  )}
                   <div className="flex flex-row items-center justify-center gap-3">
                     <span className="text-primary-variant">
                       Thumbnails embedded:

web/src/types/ws.ts

@@ -67,6 +67,7 @@ export type EmbeddingsReindexProgressType = {
   descriptions: number;
   processed_objects: number;
   total_objects: number;
+  time_remaining: number;
 };
 
 export type ToggleableSetting = "ON" | "OFF";

web/src/utils/dateUtil.ts

@@ -229,6 +229,23 @@ export const getDurationFromTimestamps = (
   return duration;
 };
 
+/**
+ *
+ * @param seconds - number of seconds to convert into hours, minutes and seconds
+ * @returns string - formatted duration in hours, minutes and seconds
+ */
+export const formatSecondsToDuration = (seconds: number): string => {
+  if (isNaN(seconds) || seconds < 0) {
+    return "Invalid duration";
+  }
+
+  const duration = intervalToDuration({ start: 0, end: seconds * 1000 });
+  return formatDuration(duration, {
+    format: ["hours", "minutes", "seconds"],
+    delimiter: ", ",
+  });
+};
+
 /**
  * Adapted from https://stackoverflow.com/a/29268535 this takes a timezone string and
  * returns the offset of that timezone from UTC in minutes.