Merge pull request #3585 from MrKomodoDragon/service-status-frontend

LB-1680: Add frontend display of service status

Author: MonkeyDo

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 = {
@@ -12,16 +17,23 @@ type CurrentStatusLoaderData = {
     label: string;
   }[];
   userCount: number;
+  serviceStatus: {
+    time: number;
+    dump_age: number;
+    stats_age: number;
+    sitewide_stats_age: number;
+    incoming_listen_count: number;
+  };
   userCountEvolution: UserEvolutionData[];
-  load: string;
 };
 
 export default function CurrentStatus() {
   const location = useLocation();
   const { data } = useQuery<CurrentStatusLoaderData>(
     RouteQuery(["current-status"], location.pathname)
   );
-  const { userCount, listenCount, listenCountsPerDay, load } = data || {};
+  const { userCount, listenCount, listenCountsPerDay, serviceStatus } =
+    data || {};
   return (
     <>
       <h2 className="page-title">Current status</h2>
@@ -88,10 +100,58 @@ export default function CurrentStatus() {
             doc.
           </p>
 
-          <h3>load average</h3>
-
-          <p>Current server load average</p>
-          <div className="border p-4 rounded bg-body-tertiary">{load}</div>
+          <h3>Current Service Status</h3>
+          <table className="table table-border table-sm table-striped">
+            <thead>
+              <tr>
+                <th>Field</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {serviceStatus && (
+                <tr>
+                  <td>Last Updated</td>
+                  <td>
+                    {fullLocalizedDateFromTimestampOrISODate(
+                      new Date(serviceStatus.time * 1000)
+                    )}
+                  </td>
+                </tr>
+              )}
+              {serviceStatus && (
+                <tr>
+                  <td>Database Dump Age</td>
+                  <td>{formatSecondsDuration(serviceStatus.dump_age)}</td>
+                </tr>
+              )}
+              {serviceStatus && (
+                <tr>
+                  <td>Stats Age</td>
+                  <td>{formatSecondsDuration(serviceStatus.stats_age)}</td>
+                </tr>
+              )}
+              {serviceStatus && (
+                <tr>
+                  <td>Sitewide Stats Age</td>
+                  <td>
+                    {formatSecondsDuration(serviceStatus.sitewide_stats_age)}
+                  </td>
+                </tr>
+              )}
+              {serviceStatus && (
+                <tr>
+                  <td>Incoming Listen Count</td>
+                  <td>
+                    {new Intl.NumberFormat().format(
+                      serviceStatus.incoming_listen_count
+                    )}{" "}
+                    listens
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
         </div>
       </div>
     </>

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,8 +126,7 @@ def current_status():
         })
 
     data = {
-        "load": load,
-        "service-status": service_status,
+        "serviceStatus": service_status,
         "listenCount": format(int(listen_count), ",d") if listen_count else "0",
         "userCount": user_count,
         "userCountEvolution": user_count_evolution,