@checkmate-monitor/queue-frontend 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @checkmate-monitor/queue-frontend
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [eff5b4e]
+- Updated dependencies [ffc28f6]
+- Updated dependencies [b354ab3]
+  - @checkmate-monitor/ui@0.1.0
+  - @checkmate-monitor/common@0.1.0
+  - @checkmate-monitor/frontend-api@0.0.2
+  - @checkmate-monitor/queue-common@0.0.2

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@checkmate-monitor/queue-frontend",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "bun run lint:code",
+    "lint:code": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@checkmate-monitor/common": "workspace:*",
+    "@checkmate-monitor/frontend-api": "workspace:*",
+    "@checkmate-monitor/queue-common": "workspace:*",
+    "@checkmate-monitor/ui": "workspace:*",
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1",
+    "lucide-react": "^0.468.0",
+    "prismjs": "^1.29.0",
+    "react": "^18.3.1",
+    "react-router-dom": "^7.1.1",
+    "react-simple-code-editor": "^0.14.1",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "typescript": "^5.7.2",
+    "@checkmate-monitor/tsconfig": "workspace:*",
+    "@checkmate-monitor/scripts": "workspace:*"
+  }
+}

package/src/api.ts

@@ -0,0 +1,15 @@
+import { createApiRef } from "@checkmate-monitor/frontend-api";
+import { QueueApi } from "@checkmate-monitor/queue-common";
+import type { InferClient } from "@checkmate-monitor/common";
+
+// Re-export types for convenience
+export type {
+  QueuePluginDto,
+  QueueConfigurationDto,
+  UpdateQueueConfiguration,
+} from "@checkmate-monitor/queue-common";
+
+// QueueApiClient type inferred from the client definition
+export type QueueApiClient = InferClient<typeof QueueApi>;
+
+export const queueApiRef = createApiRef<QueueApiClient>("queue-api");

package/src/components/UserMenuItems.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ListOrdered } from "lucide-react";
+import { useApi, permissionApiRef } from "@checkmate-monitor/frontend-api";
+import { DropdownMenuItem } from "@checkmate-monitor/ui";
+import { resolveRoute } from "@checkmate-monitor/common";
+import { queueRoutes } from "@checkmate-monitor/queue-common";
+
+export const QueueUserMenuItems = () => {
+  const permissionApi = useApi(permissionApiRef);
+  const { allowed: canRead, loading } = permissionApi.useResourcePermission(
+    "queue",
+    "read"
+  );
+
+  if (loading || !canRead) {
+    return <React.Fragment />;
+  }
+
+  return (
+    <Link to={resolveRoute(queueRoutes.routes.config)}>
+      <DropdownMenuItem icon={<ListOrdered className="h-4 w-4" />}>
+        Queue Settings
+      </DropdownMenuItem>
+    </Link>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,44 @@
+import {
+  rpcApiRef,
+  ApiRef,
+  UserMenuItemsSlot,
+} from "@checkmate-monitor/frontend-api";
+import { queueApiRef, type QueueApiClient } from "./api";
+import { createFrontendPlugin } from "@checkmate-monitor/frontend-api";
+import { QueueConfigPage } from "./pages/QueueConfigPage";
+import { QueueUserMenuItems } from "./components/UserMenuItems";
+import {
+  queueRoutes,
+  QueueApi,
+  pluginMetadata,
+  permissions,
+} from "@checkmate-monitor/queue-common";
+
+export const queuePlugin = createFrontendPlugin({
+  metadata: pluginMetadata,
+  apis: [
+    {
+      ref: queueApiRef,
+      factory: (deps: { get: <T>(ref: ApiRef<T>) => T }): QueueApiClient => {
+        const rpcApi = deps.get(rpcApiRef);
+        return rpcApi.forPlugin(QueueApi);
+      },
+    },
+  ],
+  routes: [
+    {
+      route: queueRoutes.routes.config,
+      element: <QueueConfigPage />,
+      permission: permissions.queueRead,
+    },
+  ],
+  extensions: [
+    {
+      id: "queue.user-menu.items",
+      slot: UserMenuItemsSlot,
+      component: QueueUserMenuItems,
+    },
+  ],
+});
+
+export * from "./api";

package/src/pages/QueueConfigPage.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState } from "react";
+import {
+  useApi,
+  wrapInSuspense,
+  permissionApiRef,
+} from "@checkmate-monitor/frontend-api";
+import { queueApiRef } from "../api";
+import { QueuePluginDto } from "@checkmate-monitor/queue-common";
+import {
+  Button,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  PageLayout,
+  PluginConfigForm,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  useToast,
+} from "@checkmate-monitor/ui";
+import { AlertTriangle, Save } from "lucide-react";
+
+const QueueConfigPageContent = () => {
+  const api = useApi(queueApiRef);
+  const permissionApi = useApi(permissionApiRef);
+  const toast = useToast();
+  const { allowed: canRead, loading: permissionLoading } =
+    permissionApi.useResourcePermission("queue", "read");
+  const { allowed: canUpdate } = permissionApi.useManagePermission("queue");
+
+  const [plugins, setPlugins] = useState<QueuePluginDto[]>([]);
+  const [selectedPluginId, setSelectedPluginId] = useState<string>("");
+  const [config, setConfig] = useState<Record<string, unknown>>({});
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const [pluginsList, configuration] = await Promise.all([
+        api.getPlugins(),
+        api.getConfiguration(),
+      ]);
+      setPlugins(pluginsList);
+      setSelectedPluginId(configuration.pluginId);
+      setConfig(configuration.config);
+    };
+    fetchData();
+  }, [api]);
+
+  const handleSave = async () => {
+    if (!selectedPluginId) return;
+    setIsSaving(true);
+    try {
+      await api.updateConfiguration({
+        pluginId: selectedPluginId,
+        config,
+      });
+      toast.success("Configuration saved successfully!");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(`Failed to save configuration: ${message}`);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const isMemoryQueue = selectedPluginId === "memory";
+
+  return (
+    <PageLayout
+      title="Queue Settings"
+      subtitle="Configure the queue system for background jobs"
+      loading={permissionLoading}
+      allowed={canRead}
+      maxWidth="3xl"
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Queue Configuration</CardTitle>
+          <p className="text-sm text-muted-foreground">
+            Select and configure the queue plugin
+          </p>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {isMemoryQueue && (
+            <Alert variant="warning">
+              <AlertTriangle className="h-5 w-5" />
+              <div>
+                <AlertTitle>In-Memory Queue Warning</AlertTitle>
+                <AlertDescription>
+                  The in-memory queue is suitable for development and
+                  single-instance deployments only. It will not scale across
+                  multiple instances and jobs will be lost on restart. For
+                  production environments with multiple instances, consider
+                  using a persistent queue implementation.
+                </AlertDescription>
+              </div>
+            </Alert>
+          )}
+
+          <PluginConfigForm
+            label="Queue Plugin"
+            plugins={plugins}
+            selectedPluginId={selectedPluginId}
+            onPluginChange={(value) => {
+              setSelectedPluginId(value);
+              setConfig({});
+            }}
+            config={config}
+            onConfigChange={setConfig}
+            disabled={!canUpdate}
+          />
+        </CardContent>
+        <CardFooter className="flex justify-end gap-2">
+          <Button onClick={handleSave} disabled={!canUpdate || isSaving}>
+            <Save className="mr-2 h-4 w-4" />
+            {isSaving ? "Saving..." : "Save Configuration"}
+          </Button>
+        </CardFooter>
+      </Card>
+    </PageLayout>
+  );
+};
+
+export const QueueConfigPage = wrapInSuspense(QueueConfigPageContent);

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@checkmate-monitor/tsconfig/frontend.json",
+  "include": [
+    "src"
+  ]
+}