show QN status for providers

src/components/Distribution/Bucket.tsx

@@ -1,18 +1,30 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Badge } from "react-bootstrap";
 import Metadata from "./Metadata";
 import Bags from "./Bags";
 import StatusBadge from "./StatusBadge";
+import { testQN } from "./util";
 import { Operator, Bucket } from "./types";
 
 const BucketRow = (props: { isDP: boolean; bucket: Bucket }) => {
   const [show, setShow] = useState(false);
+  const [hasQN, setQN] = useState(false);
+  const [qnTitle, setTitle] = useState(``);
   const { isDP, bucket } = props;
   const { id, distributing, acceptingNewBags, bags, operatorMetadata } = bucket;
   const operator = isDP ? bucket.operators[0] : { metadata: operatorMetadata };
+
+  useEffect(() => testQN(operator, setQN, setTitle));
+
   return (
     <>
       <div key={id} className="d-flex flex-row" onClick={() => setShow(!show)}>
+        <StatusBadge
+          status={hasQN}
+          label={"Q"}
+          title={(hasQN ? "" : "no ") + "functional query node: " + qnTitle}
+        />
+
         <div className="col-1 text-right d-flex justify-content-between">
           <h3>{id}</h3>
           {isDP && (

src/components/Distribution/util.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { queryNode } from "../../config";
-import { Bucket } from "./types";
+import { Operator, Bucket } from "./types";
 import { qnBuckets, qnBucketObjects } from "./queries";
 
 export const gb = (bytes: number) => (bytes / 1024 ** 3).toFixed() + `gb`;
@@ -38,6 +38,26 @@ export const testBag = async (
     });
 };
 
+export const testQN = (
+  operator: Operator,
+  setStatus: (b: boolean) => void,
+  setTitle: (s: string) => void
+) => {
+  const query = `query { distributionBucketFamilies { id metadata{description region} buckets { id bags { id } }} }`;
+  const qnUrl = operator?.metadata?.nodeEndpoint?.replace(
+    /[^\/]+\/?$/,
+    `graphql`
+  );
+  return axios
+    .post(qnUrl, { query })
+    .then(({ data }) => {
+      setStatus(true);
+      console.log(data);
+      if (data) setTitle(JSON.stringify(data));
+    }) // TODO extra test to verify data
+    .catch((e) => setTitle(e.message + JSON.stringify(e)));
+};
+
 export const getBucketObjects = async (bucketId: number) =>
   postQN(qnBucketObjects(bucketId)).then(
     ({ storageBuckets, distributionBuckets }) => {