Add date formatting + remove the load value

Author: MrKomodoDragon

frontend/js/src/about/current-status/CurrentStatus.tsx

@@ -2,6 +2,11 @@ import { useQuery } from "@tanstack/react-query";
 import React from "react";
 import { useLocation } from "react-router";
 import { RouteQuery } from "../../utils/Loader";
+import {
+  fullLocalizedDateFromTimestampOrISODate,
+  formatSecondsDuration,
+} from "../../utils/utils";
+
 import UserEvolutionChart, { UserEvolutionData } from "./UserEvolutionChart";
 
 type CurrentStatusLoaderData = {
@@ -107,31 +112,42 @@ export default function CurrentStatus() {
               {serviceStatus && (
                 <tr>
                   <td>Last Updated</td>
-                  <td>{new Date(serviceStatus.time * 1000).toISOString()}</td>
+                  <td>
+                    {fullLocalizedDateFromTimestampOrISODate(
+                      new Date(serviceStatus.time * 1000)
+                    )}
+                  </td>
                 </tr>
               )}
               {serviceStatus && (
                 <tr>
                   <td>Database Dump Age</td>
-                  <td>{serviceStatus.dump_age} seconds</td>
+                  <td>{formatSecondsDuration(serviceStatus.dump_age)}</td>
                 </tr>
               )}
               {serviceStatus && (
                 <tr>
                   <td>Stats Age</td>
-                  <td>{serviceStatus.stats_age} seconds</td>
+                  <td>{formatSecondsDuration(serviceStatus.stats_age)}</td>
                 </tr>
               )}
               {serviceStatus && (
                 <tr>
                   <td>Sitewide Stats Age</td>
-                  <td>{serviceStatus.sitewide_stats_age} seconds</td>
+                  <td>
+                    {formatSecondsDuration(serviceStatus.sitewide_stats_age)}
+                  </td>
                 </tr>
               )}
               {serviceStatus && (
                 <tr>
                   <td>Incoming Listen Count</td>
-                  <td>{serviceStatus.incoming_listen_count} listens</td>
+                  <td>
+                    {new Intl.NumberFormat().format(
+                      serviceStatus.incoming_listen_count
+                    )}{" "}
+                    listens
+                  </td>
                 </tr>
               )}
             </tbody>

frontend/js/src/utils/utils.tsx

@@ -6,6 +6,7 @@ import { Rating } from "react-simple-star-rating";
 import { toast } from "react-toastify";
 import { Link } from "react-router";
 import ReactMarkdown from "react-markdown";
+import { formatDuration, intervalToDuration } from "date-fns";
 import SpotifyPlayer from "../common/brainzplayer/SpotifyPlayer";
 import YoutubePlayer from "../common/brainzplayer/YoutubePlayer";
 import NamePill from "../personal-recommendations/NamePill";
@@ -729,6 +730,11 @@ const preciseTimestamp = (
       return `${timeago.ago(listened_at)}`;
   }
 };
+const formatSecondsDuration = (seconds: number): string => {
+  return formatDuration(intervalToDuration({ start: 0, end: seconds * 1000 }), {
+    format: ["months", "days", "hours", "minutes"],
+  });
+};
 // recieves or unix epoch timestamp int or ISO datetime string
 const fullLocalizedDateFromTimestampOrISODate = (
   unix_epoch_timestamp: number | string | Date | undefined | null
@@ -1454,6 +1460,7 @@ export {
   getAlbumLink,
   formatWSMessageToListen,
   preciseTimestamp,
+  formatSecondsDuration,
   fullLocalizedDateFromTimestampOrISODate,
   convertDateToUnixTimestamp,
   getPageProps,

listenbrainz/webserver/views/index.py

@@ -93,8 +93,6 @@ def index():
 @index_bp.post("/current-status/")
 @web_listenstore_needed
 def current_status():
-    load = "%.2f %.2f %.2f" % os.getloadavg()
-
     service_status = get_service_status()
     listen_count = _ts.get_total_listen_count()
     try:
@@ -128,7 +126,6 @@ def current_status():
         })
 
     data = {
-        "load": load,
         "serviceStatus": service_status,
         "listenCount": format(int(listen_count), ",d") if listen_count else "0",
         "userCount": user_count,