show bag response time

src/components/Distribution/Bag.tsx

@@ -1,3 +1,4 @@
+import moment from "moment";
 import { useEffect, useState } from "react";
 import { Badge } from "react-bootstrap";
 import { Object, Operator } from ".types";
@@ -6,16 +7,26 @@ import { gb, testBag } from "./util";
 const Bag = (props: { id: number; operator: Operator; objects: Object[] }) => {
   const { id, objects, operator } = props;
   const [color, setColor] = useState(`warning`);
+  const [responseTime, setResponseTime] = useState();
   const endpoint = operator?.metadata?.nodeEndpoint;
-  useEffect(
-    () => testBag(endpoint, objects).then((color) => setColor(color)),
-    [endpoint, objects]
-  );
+  useEffect(() => {
+    const start = moment();
+    testBag(endpoint, objects).then((color) => {
+      setResponseTime(moment() - start);
+      setColor(color);
+    });
+  }, [endpoint, objects]);
   const channelId = id.split(":")[2];
-  const size = objects?.reduce((o, sum: number) => sum + +o.size, 0) || 0;
+  const title = objects
+    ? responseTime
+      ? responseTime + `ms`
+      : `sent request`
+    : `fetching list`;
+  const size = objects?.reduce((sum: number, o) => sum + +o.size, 0) || 0;
+  const content = channelId + (size ? ` (${gb(size)})` : ``);
   return (
-    <Badge variant={color} title={gb(size)}>
-      {channelId}
+    <Badge variant={color} title={title}>
+      {content}
     </Badge>
   );
 };

src/components/Distribution/util.ts

@@ -22,14 +22,15 @@ export const postQN = (query) =>
 export const testBag = async (
   endpoint: string,
   objects: Object[] | null
-): Promise<string> => {
+): Promise<[string, number]> => {
   if (!objects) return `warning`;
   if (!objects.length) return ``;
+  const url = endpoint + `api/v1/assets/${objects[0].id}`;
   return axios
-    .head(endpoint + `api/v1/assets/${objects[0].id}`)
+    .head(url)
     .then((data) => `success`)
     .catch((e) => {
-      console.error(`testBag: ${e.message}`);
+      console.error(`testBag ${url}: ${e.message}`);
       return `danger`;
     });
 };