@forgeportal/plugin-grafana 1.3.0

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @forgeportal/plugin-grafana@1.3.0 build /home/runner/work/forgeportal/forgeportal/packages/plugin-grafana
+> tsc
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bendaamerahmed
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/GrafanaTab.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Entity } from '@forgeportal/plugin-sdk';
+interface GrafanaTabProps {
+    entity: Entity;
+}
+export declare function GrafanaTab({ entity }: GrafanaTabProps): React.ReactElement;
+export {};
+//# sourceMappingURL=GrafanaTab.d.ts.map

package/dist/GrafanaTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrafanaTab.d.ts","sourceRoot":"","sources":["../src/GrafanaTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AA8EtD,UAAU,eAAe;IAAG,MAAM,EAAE,MAAM,CAAA;CAAE;AAE5C,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAqI1E"}

package/dist/GrafanaTab.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+const TIME_RANGES = {
+    '1h': { label: '1h', from: 'now-1h', to: 'now' },
+    '6h': { label: '6h', from: 'now-6h', to: 'now' },
+    '24h': { label: '24h', from: 'now-24h', to: 'now' },
+    '7d': { label: '7d', from: 'now-7d', to: 'now' },
+};
+// ─── URL builder ─────────────────────────────────────────────────────────────
+function buildEmbedUrl(dashboardUrl, opts) {
+    try {
+        const url = new URL(dashboardUrl);
+        url.searchParams.set('from', opts.from);
+        url.searchParams.set('to', opts.to);
+        url.searchParams.set('kiosk', '1');
+        url.searchParams.set('theme', 'light');
+        if (opts.varName && opts.varValue) {
+            url.searchParams.set(`var-${opts.varName}`, opts.varValue);
+        }
+        return url.toString();
+    }
+    catch {
+        return dashboardUrl;
+    }
+}
+function buildOpenUrl(dashboardUrl) {
+    try {
+        const url = new URL(dashboardUrl);
+        // Remove kiosk param for the "open in Grafana" link
+        url.searchParams.delete('kiosk');
+        return url.toString();
+    }
+    catch {
+        return dashboardUrl;
+    }
+}
+/**
+ * Parses a comma-separated (or newline-separated) list of dashboard URLs
+ * from the annotation value.
+ */
+function parseDashboardUrls(raw) {
+    return raw
+        .split(/[\n,]+/)
+        .map((s) => s.trim())
+        .filter((s) => {
+        try {
+            new URL(s);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    });
+}
+function dashboardLabel(url, index) {
+    try {
+        const u = new URL(url);
+        // Extract the dashboard slug from the path: /d/<uid>/<slug>
+        const parts = u.pathname.split('/').filter(Boolean);
+        const slugIdx = parts.findIndex((p) => p === 'd') + 2;
+        const slug = parts[slugIdx];
+        if (slug)
+            return slug.replace(/-/g, ' ');
+    }
+    catch { /* fall through */ }
+    return `Dashboard ${index + 1}`;
+}
+export function GrafanaTab({ entity }) {
+    const [timeRange, setTimeRange] = useState('6h');
+    const [activeDashId, setActiveDashId] = useState(0);
+    const annotations = entity.annotations ?? {};
+    const rawUrls = annotations['forgeportal.dev/grafana-dashboard-url'] ?? '';
+    const varName = annotations['forgeportal.dev/grafana-variable-name'];
+    const varValue = entity.name;
+    const dashboards = useMemo(() => parseDashboardUrls(rawUrls), [rawUrls]);
+    // Not configured state
+    if (dashboards.length === 0) {
+        return (_jsxs("div", { className: "rounded-lg border border-dashed border-gray-200 bg-gray-50 p-8 text-center", children: [_jsx("p", { className: "text-sm font-medium text-gray-700 mb-1", children: "No Grafana dashboard configured" }), _jsxs("p", { className: "text-xs text-gray-500 mb-4", children: ["Add the annotation", ' ', _jsx("code", { className: "rounded bg-gray-100 px-1 py-0.5", children: "forgeportal.dev/grafana-dashboard-url" }), ' ', "to your ", _jsx("code", { className: "rounded bg-gray-100 px-1 py-0.5", children: "entity.yaml" }), "."] }), _jsx("pre", { className: "mx-auto max-w-lg rounded bg-gray-800 p-3 text-left text-xs text-green-300", children: `metadata:\n  annotations:\n    forgeportal.dev/grafana-dashboard-url: https://grafana.internal/d/abc123/service-overview\n    forgeportal.dev/grafana-variable-name: service  # optional` })] }));
+    }
+    const activeDash = dashboards[activeDashId] ?? dashboards[0];
+    const { from, to } = TIME_RANGES[timeRange];
+    const embedUrl = buildEmbedUrl(activeDash, { from, to, varName, varValue });
+    const openUrl = buildOpenUrl(activeDash);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between flex-wrap gap-2", children: [dashboards.length > 1 && (_jsx("div", { className: "flex gap-1 border border-gray-200 rounded-md p-0.5 bg-gray-50", children: dashboards.map((url, i) => (_jsx("button", { onClick: () => setActiveDashId(i), className: `px-3 py-1 text-xs font-medium rounded transition-colors ${activeDashId === i
+                                ? 'bg-white shadow-sm text-gray-800'
+                                : 'text-gray-500 hover:text-gray-700'}`, children: dashboardLabel(url, i) }, i))) })), _jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [_jsx("div", { className: "flex items-center gap-0.5 rounded-md border border-gray-200 bg-gray-50 p-0.5", children: Object.keys(TIME_RANGES).map((tr) => (_jsx("button", { onClick: () => setTimeRange(tr), className: `px-2.5 py-1 text-xs font-medium rounded transition-colors ${timeRange === tr
+                                        ? 'bg-white shadow-sm text-indigo-600'
+                                        : 'text-gray-500 hover:text-gray-700'}`, children: TIME_RANGES[tr].label }, tr))) }), _jsxs("a", { href: openUrl, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 transition-colors", children: [_jsx("svg", { className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) }), "Open in Grafana"] })] })] }), varName && (_jsxs("p", { className: "text-xs text-gray-400", children: ["Variable injection: ", _jsxs("code", { className: "rounded bg-gray-100 px-1", children: ["var-", varName, "=", varValue] })] })), _jsxs("div", { className: "relative w-full overflow-hidden rounded-lg border border-gray-200 bg-gray-50", style: { paddingBottom: '56.25%' /* 16:9 */ }, children: [_jsx("iframe", { src: embedUrl, className: "absolute inset-0 h-full w-full", title: `Grafana — ${dashboardLabel(activeDash, activeDashId)}`, frameBorder: "0", allowFullScreen: true }, `${embedUrl}`), _jsx("noscript", { children: _jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-gray-50 text-center p-6", children: [_jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: "Dashboard cannot be embedded" }), _jsx("p", { className: "text-xs text-gray-500 mb-4", children: "Your Grafana instance may require authentication or have CSP restrictions." }), _jsx("a", { href: openUrl, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1.5 rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700", children: "Open in Grafana" })] }) })] }), _jsxs("p", { className: "text-xs text-gray-400 text-right", children: ["Grafana \u00B7 ", dashboardLabel(activeDash, activeDashId), " \u00B7 ", from, " \u2192 ", to] })] }));
+}
+//# sourceMappingURL=GrafanaTab.js.map

package/dist/GrafanaTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrafanaTab.js","sourceRoot":"","sources":["../src/GrafanaTab.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAajD,MAAM,WAAW,GAAuC;IACtD,IAAI,EAAG,EAAE,KAAK,EAAE,IAAI,EAAG,IAAI,EAAE,QAAQ,EAAG,EAAE,EAAE,KAAK,EAAE;IACnD,IAAI,EAAG,EAAE,KAAK,EAAE,IAAI,EAAG,IAAI,EAAE,QAAQ,EAAG,EAAE,EAAE,KAAK,EAAE;IACnD,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE;IACnD,IAAI,EAAG,EAAE,KAAK,EAAE,IAAI,EAAG,IAAI,EAAE,QAAQ,EAAG,EAAE,EAAE,KAAK,EAAE;CACpD,CAAC;AAEF,gFAAgF;AAEhF,SAAS,aAAa,CACpB,YAAoB,EACpB,IAAuE;IAEvE,IAAI,CAAC;QACH,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QAClC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,EAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QACnC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACvC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;IACxB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,YAAY,CAAC;IACtB,CAAC;AACH,CAAC;AAED,SAAS,YAAY,CAAC,YAAoB;IACxC,IAAI,CAAC;QACH,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,CAAC;QAClC,oDAAoD;QACpD,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACjC,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;IACxB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,YAAY,CAAC;IACtB,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,SAAS,kBAAkB,CAAC,GAAW;IACrC,OAAO,GAAG;SACP,KAAK,CAAC,QAAQ,CAAC;SACf,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;SACpB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;QACZ,IAAI,CAAC;YAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC;YAAC,OAAO,IAAI,CAAC;QAAC,CAAC;QAAC,MAAM,CAAC;YAAC,OAAO,KAAK,CAAC;QAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAS,cAAc,CAAC,GAAW,EAAE,KAAa;IAChD,IAAI,CAAC;QACH,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QACvB,4DAA4D;QAC5D,MAAM,KAAK,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACpD,MAAM,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;QACtD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC3C,CAAC;IAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAC9B,OAAO,aAAa,KAAK,GAAG,CAAC,EAAE,CAAC;AAClC,CAAC;AAMD,MAAM,UAAU,UAAU,CAAC,EAAE,MAAM,EAAmB;IACpD,MAAM,CAAC,SAAS,EAAK,YAAY,CAAC,GAAM,QAAQ,CAAY,IAAI,CAAC,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAI,MAAM,CAAC,WAAW,IAAI,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAQ,WAAW,CAAC,uCAAuC,CAAC,IAAI,EAAE,CAAC;IAChF,MAAM,OAAO,GAAQ,WAAW,CAAC,uCAAuC,CAAC,CAAC;IAC1E,MAAM,QAAQ,GAAO,MAAM,CAAC,IAAI,CAAC;IAEjC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEzE,uBAAuB;IACvB,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,CACL,eAAK,SAAS,EAAC,4EAA4E,aACzF,YAAG,SAAS,EAAC,wCAAwC,gDAAoC,EACzF,aAAG,SAAS,EAAC,4BAA4B,mCACpB,GAAG,EACtB,eAAM,SAAS,EAAC,iCAAiC,sDAA6C,EAAC,GAAG,cAC1F,eAAM,SAAS,EAAC,iCAAiC,4BAAmB,SAC1E,EACJ,cAAK,SAAS,EAAC,2EAA2E,YACvF,0LAA0L,GACvL,IACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM,UAAU,GAAM,UAAU,CAAC,YAAY,CAAC,IAAI,UAAU,CAAC,CAAC,CAAE,CAAC;IACjE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,GAAI,WAAW,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,QAAQ,GAAQ,aAAa,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;IACjF,MAAM,OAAO,GAAS,YAAY,CAAC,UAAU,CAAC,CAAC;IAE/C,OAAO,CACL,eAAK,SAAS,EAAC,WAAW,aAExB,eAAK,SAAS,EAAC,mDAAmD,aAE/D,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,cAAK,SAAS,EAAC,+DAA+D,YAC3E,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,2DACT,YAAY,KAAK,CAAC;gCAChB,CAAC,CAAC,kCAAkC;gCACpC,CAAC,CAAC,mCACN,EAAE,YAED,cAAc,CAAC,GAAG,EAAE,CAAC,CAAC,IARlB,CAAC,CASC,CACV,CAAC,GACE,CACP,EAED,eAAK,SAAS,EAAC,iCAAiC,aAE9C,cAAK,SAAS,EAAC,8EAA8E,YACzF,MAAM,CAAC,IAAI,CAAC,WAAW,CAAiB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CACrD,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EAC/B,SAAS,EAAE,6DACT,SAAS,KAAK,EAAE;wCACd,CAAC,CAAC,oCAAoC;wCACtC,CAAC,CAAC,mCACN,EAAE,YAED,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,IARjB,EAAE,CASA,CACV,CAAC,GACE,EAGN,aACE,IAAI,EAAE,OAAO,EACb,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,SAAS,EAAC,8JAA8J,aAExK,cAAK,SAAS,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,YAChF,eAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAE,CAAC,EAC/D,CAAC,EAAC,8EAA8E,GAAG,GACjF,uBAEJ,IACA,IACF,EAGL,OAAO,IAAI,CACV,aAAG,SAAS,EAAC,uBAAuB,qCACd,gBAAM,SAAS,EAAC,0BAA0B,qBAAM,OAAO,OAAG,QAAQ,IAAQ,IAC5F,CACL,EAGD,eAAK,SAAS,EAAC,8EAA8E,EACxF,KAAK,EAAE,EAAE,aAAa,EAAE,QAAQ,CAAC,UAAU,EAAE,aAChD,iBAEE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,aAAa,cAAc,CAAC,UAAU,EAAE,YAAY,CAAC,EAAE,EAC9D,WAAW,EAAC,GAAG,EACf,eAAe,UALV,GAAG,QAAQ,EAAE,CAMlB,EAGF,6BACE,eAAK,SAAS,EAAC,uFAAuF,aACpG,YAAG,SAAS,EAAC,wCAAwC,6CAAiC,EACtF,YAAG,SAAS,EAAC,4BAA4B,2FAErC,EACJ,YACE,IAAI,EAAE,OAAO,EACb,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,YAAY,EAChB,SAAS,EAAC,0HAA0H,gCAGlI,IACA,GACG,IACP,EAEN,aAAG,SAAS,EAAC,kCAAkC,gCAClC,cAAc,CAAC,UAAU,EAAE,YAAY,CAAC,cAAK,IAAI,cAAK,EAAE,IACjE,IACA,CACP,CAAC;AACJ,CAAC"}

package/dist/ui.d.ts

@@ -0,0 +1,11 @@
+import type { ForgePluginSDK } from '@forgeportal/plugin-sdk';
+/**
+ * UI entry point for the Grafana plugin.
+ * Called by the ForgePortal UI shell at startup.
+ *
+ * Registration in apps/ui/src/plugins/index.ts:
+ *   import { registerPlugin as registerGrafana } from '@forgeportal/plugin-grafana/ui';
+ *   registerPluginById('grafana', registerGrafana);
+ */
+export declare function registerPlugin(sdk: ForgePluginSDK): void;
+//# sourceMappingURL=ui.d.ts.map

package/dist/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI,CAOxD"}

package/dist/ui.js

@@ -0,0 +1,18 @@
+import { GrafanaTab } from './GrafanaTab.js';
+/**
+ * UI entry point for the Grafana plugin.
+ * Called by the ForgePortal UI shell at startup.
+ *
+ * Registration in apps/ui/src/plugins/index.ts:
+ *   import { registerPlugin as registerGrafana } from '@forgeportal/plugin-grafana/ui';
+ *   registerPluginById('grafana', registerGrafana);
+ */
+export function registerPlugin(sdk) {
+    sdk.registerEntityTab({
+        id: 'grafana-tab',
+        title: 'Grafana',
+        component: GrafanaTab,
+        // No appliesTo — the tab shows a helpful config message when annotation is missing
+    });
+}
+//# sourceMappingURL=ui.js.map

package/dist/ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAe,iBAAiB,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,GAAmB;IAChD,GAAG,CAAC,iBAAiB,CAAC;QACpB,EAAE,EAAS,aAAa;QACxB,KAAK,EAAM,SAAS;QACpB,SAAS,EAAE,UAAU;QACrB,mFAAmF;KACpF,CAAC,CAAC;AACL,CAAC"}

package/forgeportal-plugin.json

@@ -0,0 +1,25 @@
+{
+  "name": "@forgeportal/plugin-grafana",
+  "version": "1.0.0",
+  "forgeportal": {
+    "engineVersion": "^1.0.0",
+    "type": "ui",
+    "capabilities": {
+      "ui": {
+        "entityTabs": ["grafana-tab"]
+      }
+    },
+    "config": {
+      "grafanaUrl": {
+        "type":        "string",
+        "description": "Base Grafana URL, e.g. https://grafana.internal. Used to validate annotations.",
+        "required":    false
+      },
+      "defaultTimeRange": {
+        "type":        "string",
+        "description": "Default time range: 1h | 6h | 24h | 7d (default: 6h).",
+        "required":    false
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@forgeportal/plugin-grafana",
+  "version": "1.3.0",
+  "type": "module",
+  "exports": {
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./package.json": "./package.json",
+    "./forgeportal-plugin.json": "./forgeportal-plugin.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@forgeportal/plugin-sdk": "1.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "*",
+    "react": "*"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint src/",
+    "clean": "rm -rf dist"
+  }
+}

package/src/GrafanaTab.tsx

@@ -0,0 +1,215 @@
+import React, { useState, useMemo } from 'react';
+import type { Entity } from '@forgeportal/plugin-sdk';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type TimeRange = '1h' | '6h' | '24h' | '7d';
+
+interface TimeRangeOption {
+  label: string;
+  from:  string;
+  to:    string;
+}
+
+const TIME_RANGES: Record<TimeRange, TimeRangeOption> = {
+  '1h':  { label: '1h',  from: 'now-1h',  to: 'now' },
+  '6h':  { label: '6h',  from: 'now-6h',  to: 'now' },
+  '24h': { label: '24h', from: 'now-24h', to: 'now' },
+  '7d':  { label: '7d',  from: 'now-7d',  to: 'now' },
+};
+
+// ─── URL builder ─────────────────────────────────────────────────────────────
+
+function buildEmbedUrl(
+  dashboardUrl: string,
+  opts: { from: string; to: string; varName?: string; varValue?: string },
+): string {
+  try {
+    const url = new URL(dashboardUrl);
+    url.searchParams.set('from',  opts.from);
+    url.searchParams.set('to',    opts.to);
+    url.searchParams.set('kiosk', '1');
+    url.searchParams.set('theme', 'light');
+    if (opts.varName && opts.varValue) {
+      url.searchParams.set(`var-${opts.varName}`, opts.varValue);
+    }
+    return url.toString();
+  } catch {
+    return dashboardUrl;
+  }
+}
+
+function buildOpenUrl(dashboardUrl: string): string {
+  try {
+    const url = new URL(dashboardUrl);
+    // Remove kiosk param for the "open in Grafana" link
+    url.searchParams.delete('kiosk');
+    return url.toString();
+  } catch {
+    return dashboardUrl;
+  }
+}
+
+/**
+ * Parses a comma-separated (or newline-separated) list of dashboard URLs
+ * from the annotation value.
+ */
+function parseDashboardUrls(raw: string): string[] {
+  return raw
+    .split(/[\n,]+/)
+    .map((s) => s.trim())
+    .filter((s) => {
+      try { new URL(s); return true; } catch { return false; }
+    });
+}
+
+function dashboardLabel(url: string, index: number): string {
+  try {
+    const u = new URL(url);
+    // Extract the dashboard slug from the path: /d/<uid>/<slug>
+    const parts = u.pathname.split('/').filter(Boolean);
+    const slugIdx = parts.findIndex((p) => p === 'd') + 2;
+    const slug = parts[slugIdx];
+    if (slug) return slug.replace(/-/g, ' ');
+  } catch { /* fall through */ }
+  return `Dashboard ${index + 1}`;
+}
+
+// ─── Main Tab ────────────────────────────────────────────────────────────────
+
+interface GrafanaTabProps { entity: Entity }
+
+export function GrafanaTab({ entity }: GrafanaTabProps): React.ReactElement {
+  const [timeRange,    setTimeRange]    = useState<TimeRange>('6h');
+  const [activeDashId, setActiveDashId] = useState(0);
+
+  const annotations  = entity.annotations ?? {};
+  const rawUrls      = annotations['forgeportal.dev/grafana-dashboard-url'] ?? '';
+  const varName      = annotations['forgeportal.dev/grafana-variable-name'];
+  const varValue     = entity.name;
+
+  const dashboards = useMemo(() => parseDashboardUrls(rawUrls), [rawUrls]);
+
+  // Not configured state
+  if (dashboards.length === 0) {
+    return (
+      <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-8 text-center">
+        <p className="text-sm font-medium text-gray-700 mb-1">No Grafana dashboard configured</p>
+        <p className="text-xs text-gray-500 mb-4">
+          Add the annotation{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5">forgeportal.dev/grafana-dashboard-url</code>{' '}
+          to your <code className="rounded bg-gray-100 px-1 py-0.5">entity.yaml</code>.
+        </p>
+        <pre className="mx-auto max-w-lg rounded bg-gray-800 p-3 text-left text-xs text-green-300">
+          {`metadata:\n  annotations:\n    forgeportal.dev/grafana-dashboard-url: https://grafana.internal/d/abc123/service-overview\n    forgeportal.dev/grafana-variable-name: service  # optional`}
+        </pre>
+      </div>
+    );
+  }
+
+  const activeDash    = dashboards[activeDashId] ?? dashboards[0]!;
+  const { from, to }  = TIME_RANGES[timeRange];
+  const embedUrl      = buildEmbedUrl(activeDash, { from, to, varName, varValue });
+  const openUrl       = buildOpenUrl(activeDash);
+
+  return (
+    <div className="space-y-3">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between flex-wrap gap-2">
+        {/* Multi-dashboard tab strip */}
+        {dashboards.length > 1 && (
+          <div className="flex gap-1 border border-gray-200 rounded-md p-0.5 bg-gray-50">
+            {dashboards.map((url, i) => (
+              <button
+                key={i}
+                onClick={() => setActiveDashId(i)}
+                className={`px-3 py-1 text-xs font-medium rounded transition-colors ${
+                  activeDashId === i
+                    ? 'bg-white shadow-sm text-gray-800'
+                    : 'text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                {dashboardLabel(url, i)}
+              </button>
+            ))}
+          </div>
+        )}
+
+        <div className="flex items-center gap-2 ml-auto">
+          {/* Time range selector */}
+          <div className="flex items-center gap-0.5 rounded-md border border-gray-200 bg-gray-50 p-0.5">
+            {(Object.keys(TIME_RANGES) as TimeRange[]).map((tr) => (
+              <button
+                key={tr}
+                onClick={() => setTimeRange(tr)}
+                className={`px-2.5 py-1 text-xs font-medium rounded transition-colors ${
+                  timeRange === tr
+                    ? 'bg-white shadow-sm text-indigo-600'
+                    : 'text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                {TIME_RANGES[tr].label}
+              </button>
+            ))}
+          </div>
+
+          {/* Open in Grafana */}
+          <a
+            href={openUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+          >
+            <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+            Open in Grafana
+          </a>
+        </div>
+      </div>
+
+      {/* Variable info badge */}
+      {varName && (
+        <p className="text-xs text-gray-400">
+          Variable injection: <code className="rounded bg-gray-100 px-1">var-{varName}={varValue}</code>
+        </p>
+      )}
+
+      {/* Embedded dashboard iframe */}
+      <div className="relative w-full overflow-hidden rounded-lg border border-gray-200 bg-gray-50"
+           style={{ paddingBottom: '56.25%' /* 16:9 */ }}>
+        <iframe
+          key={`${embedUrl}`}
+          src={embedUrl}
+          className="absolute inset-0 h-full w-full"
+          title={`Grafana — ${dashboardLabel(activeDash, activeDashId)}`}
+          frameBorder="0"
+          allowFullScreen
+        />
+
+        {/* Overlay shown while iframe may be blocked by CSP */}
+        <noscript>
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-50 text-center p-6">
+            <p className="text-sm font-medium text-gray-700 mb-2">Dashboard cannot be embedded</p>
+            <p className="text-xs text-gray-500 mb-4">
+              Your Grafana instance may require authentication or have CSP restrictions.
+            </p>
+            <a
+              href={openUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1.5 rounded-md bg-indigo-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-indigo-700"
+            >
+              Open in Grafana
+            </a>
+          </div>
+        </noscript>
+      </div>
+
+      <p className="text-xs text-gray-400 text-right">
+        Grafana · {dashboardLabel(activeDash, activeDashId)} · {from} → {to}
+      </p>
+    </div>
+  );
+}

package/src/ui.ts

@@ -0,0 +1,19 @@
+import type { ForgePluginSDK } from '@forgeportal/plugin-sdk';
+import { GrafanaTab }          from './GrafanaTab.js';
+
+/**
+ * UI entry point for the Grafana plugin.
+ * Called by the ForgePortal UI shell at startup.
+ *
+ * Registration in apps/ui/src/plugins/index.ts:
+ *   import { registerPlugin as registerGrafana } from '@forgeportal/plugin-grafana/ui';
+ *   registerPluginById('grafana', registerGrafana);
+ */
+export function registerPlugin(sdk: ForgePluginSDK): void {
+  sdk.registerEntityTab({
+    id:        'grafana-tab',
+    title:     'Grafana',
+    component: GrafanaTab,
+    // No appliesTo — the tab shows a helpful config message when annotation is missing
+  });
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir":         "dist",
+    "rootDir":        "src",
+    "jsx":            "react-jsx",
+    "declaration":    true,
+    "declarationMap": true
+  },
+  "include": ["src"]
+}