fix: use plugin UI SDK in plugin UIs

arthas/ui-src/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@flanksource/clicky-ui": "^0.2.1",
+    "@flanksource/plugin-ui-sdk": "file:vendor/plugin-ui-sdk",
     "@tanstack/react-query": "^5.80.7",
     "lucide-react": "^0.545.0",
     "preact": "^10.24.0"

arthas/ui-src/src/lib/api.ts

@@ -1,11 +1,6 @@
-export const PLUGIN_NAME = "arthas";
+import { invoke } from "@flanksource/plugin-ui-sdk";
 
-function operationURL(op: string, configID: string): string {
-  const base = window.location.pathname.replace(/\/ui\/.*$/, "");
-  const url = new URL(base + "/operations/" + op, window.location.origin);
-  if (configID) url.searchParams.set("config_id", configID);
-  return url.toString();
-}
+export const PLUGIN_NAME = "arthas";
 
 export class OpError extends Error {
   readonly status: number;
@@ -25,13 +20,7 @@ export async function callOp<T = unknown>(
   op: string,
   params: Record<string, unknown> = {},
 ): Promise<T> {
-  const configID = configIDFromURL();
-  const res = await fetch(operationURL(op, configID), {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    credentials: "same-origin",
-    body: JSON.stringify(params),
-  });
+  const res = await invoke(op, params);
   if (!res.ok) {
     const text = await res.text();
     let body: unknown = text;

arthas/ui-src/src/main.tsx

@@ -1,6 +1,7 @@
 import { render } from "preact";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider, DensityProvider } from "@flanksource/clicky-ui";
+import { ready } from "@flanksource/plugin-ui-sdk";
 import { App } from "./App";
 import { logBanner } from "./version";
 import "./styles.css";
@@ -24,3 +25,5 @@ render(
   </ThemeProvider>,
   root,
 );
+
+ready();

arthas/ui-src/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

arthas/ui-src/vendor/plugin-ui-sdk/lib/index.d.ts

@@ -0,0 +1,10 @@
+export type QueryValue = string | number | boolean | null | undefined;
+export type QueryParams = Record<string, QueryValue | readonly QueryValue[]>;
+export type InvokeOptions = Omit<RequestInit, "body"> & {
+    query?: QueryParams;
+};
+export type StreamOptions = EventSourceInit;
+export declare function invoke(operation: string, body?: unknown, options?: InvokeOptions): Promise<Response>;
+export declare function stream(operation: string, query?: QueryParams, options?: StreamOptions): EventSource;
+export declare function ready(): void;
+//# sourceMappingURL=index.d.ts.map

arthas/ui-src/vendor/plugin-ui-sdk/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@flanksource/plugin-ui-sdk",
+  "version": "0.1.2",
+  "description": "Browser UI SDK for Mission Control plugin tabs",
+  "type": "module",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flanksource/plugin-ui-sdk.git"
+  },
+  "files": [
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    }
+  },
+  "types": "./lib/index.d.ts",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "check": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "clean": "trash lib || true"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.4"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "pnpm@10.11.0"
+}

inspektor-gadget/ui-src/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@flanksource/clicky-ui": "^0.2.1",
+    "@flanksource/plugin-ui-sdk": "file:vendor/plugin-ui-sdk",
     "@flanksource/icons": "^1.0.56",
     "@tanstack/react-query": "^5.90.11",
     "@vitejs/plugin-react": "^5.1.0",

inspektor-gadget/ui-src/src/main.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { invoke as sdkInvoke, ready } from "@flanksource/plugin-ui-sdk";
 import {
   Button,
   DataTable,
@@ -169,18 +170,8 @@ function configId() {
   return new URLSearchParams(window.location.search).get("config_id") || "";
 }
 
-function hostOperationUrl(op: string) {
-  const params = new URLSearchParams(window.location.search);
-  const id = params.get("config_id") || "";
-  return `/api/plugins/inspektor-gadget/operations/${op}${id ? `?config_id=${encodeURIComponent(id)}` : ""}`;
-}
-
 async function invoke<T>(op: string, body: unknown = {}): Promise<T> {
-  const res = await fetch(hostOperationUrl(op), {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(body)
-  });
+  const res = await sdkInvoke(op, body);
   if (!res.ok) {
     throw new Error(await res.text());
   }
@@ -229,7 +220,7 @@ function App() {
 
   useEffect(() => {
     refresh().catch((err) => setError(String(err)));
-    window.parent?.postMessage({ type: "mc.tab.ready" }, "*");
+    ready();
   }, []);
 
   useEffect(() => {

inspektor-gadget/ui-src/vendor/plugin-ui-sdk/lib/index.d.ts

@@ -0,0 +1,10 @@
+export type QueryValue = string | number | boolean | null | undefined;
+export type QueryParams = Record<string, QueryValue | readonly QueryValue[]>;
+export type InvokeOptions = Omit<RequestInit, "body"> & {
+    query?: QueryParams;
+};
+export type StreamOptions = EventSourceInit;
+export declare function invoke(operation: string, body?: unknown, options?: InvokeOptions): Promise<Response>;
+export declare function stream(operation: string, query?: QueryParams, options?: StreamOptions): EventSource;
+export declare function ready(): void;
+//# sourceMappingURL=index.d.ts.map