@oneuptime/common 7.0.2989 → 7.0.2994

package/Server/Infrastructure/Queue.ts

@@ -1,7 +1,16 @@
-import { RedisHostname, RedisPassword, RedisPort } from "../EnvironmentConfig";
+import {
+  ClusterKey,
+  RedisHostname,
+  RedisPassword,
+  RedisPort,
+} from "../EnvironmentConfig";
 import Dictionary from "Common/Types/Dictionary";
 import { JSONObject } from "Common/Types/JSON";
 import { Queue as BullQueue, Job, JobsOptions } from "bullmq";
+import { ExpressAdapter } from "@bull-board/express";
+import { createBullBoard } from "@bull-board/api";
+import { BullMQAdapter } from "@bull-board/api/bullMQAdapter";
+import { ExpressRouter } from "../Utils/Express";
 
 export enum QueueName {
   Workflow = "Workflow",
@@ -51,6 +60,32 @@ export default class Queue {
     await this.getQueue(queueName).removeRepeatableByKey(jobId);
   }
 
+  public static getInspectorRoute(): string {
+    return "/api/inspect/queue/:clusterKey";
+  }
+
+  public static getQueueInspectorRouter(): ExpressRouter {
+    const serverAdapter: ExpressAdapter = new ExpressAdapter();
+
+    createBullBoard({
+      queues: [
+        ...Object.values(QueueName).map((queueName: QueueName) => {
+          return new BullMQAdapter(this.getQueue(queueName));
+        }),
+      ],
+      serverAdapter: serverAdapter,
+    });
+
+    serverAdapter.setBasePath(
+      this.getInspectorRoute().replace(
+        "/:clusterKey",
+        "/" + ClusterKey.toString(),
+      ),
+    );
+
+    return serverAdapter.getRouter();
+  }
+
   public static async addJob(
     queueName: QueueName,
     jobId: string,

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -1,5 +1,6 @@
+import Text from "../../../../Types/Text";
 import LineChart, { ComponentProps as LineChartProps } from "../Line/LineChart";
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, { FunctionComponent, ReactElement } from "react";
 
 export enum ChartType {
   LINE = "line",
@@ -13,7 +14,6 @@ export interface Chart {
   description?: string | undefined;
   type: ChartType;
   props: LineChartProps;
-  sync: boolean;
 }
 
 export interface ComponentProps {
@@ -23,9 +23,7 @@ export interface ComponentProps {
 const ChartGroup: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const [syncValue, setSyncValue] = useState<
-    number | string | Date | undefined
-  >(undefined);
+  const syncId: string = Text.generateRandomText(10);
 
   return (
     <div className="lg:grid grid-cols-1 gap-5">
@@ -49,18 +47,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                     {chart.description}
                   </p>
                 )}
-                <LineChart
-                  key={index}
-                  {...chart.props}
-                  xAxisMarker={{
-                    value: chart.sync ? syncValue : undefined,
-                  }}
-                  onHoverXAxis={(value: string | number | Date) => {
-                    if (chart.sync) {
-                      setSyncValue(value);
-                    }
-                  }}
-                />
+                <LineChart key={index} {...chart.props} syncId={syncId} />
               </div>
             );
           default: