@perses-dev/plugin-system 0.55.0-beta.14 → 0.55.0-beta.15

package/dist/runtime/UsageMetricsProvider.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFetch } from "@perses-dev/client";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
 export const UsageMetricsContext = /*#__PURE__*/ createContext(undefined);
 export const useUsageMetricsContext = ()=>{
     return useContext(UsageMetricsContext);
@@ -24,27 +24,30 @@ export const useUsageMetrics = ()=>{
             if (ctx === undefined) {
                 return;
             }
-            const definitionKey = JSON.stringify(definition);
-            if (ctx.pendingQueries.has(definitionKey) && newState === 'pending') {
-                // Never allow transitions back to pending, to avoid re-sending stats on a re-render.
-                return;
-            }
-            if (ctx.pendingQueries.get(definitionKey) !== newState) {
-                ctx.pendingQueries.set(definitionKey, newState);
-                if (newState === 'error') {
-                    ctx.renderErrorCount += 1;
-                }
-                const allDone = [
-                    ...ctx.pendingQueries.values()
-                ].every((p)=>p !== 'pending');
-                if (ctx.renderDurationMs === 0 && allDone) {
-                    ctx.renderDurationMs = Date.now() - ctx.startRenderTime;
-                    submitMetrics(ctx);
-                }
-            }
+            recordQuery(ctx, definition, newState);
         }
     };
 };
+function recordQuery(ctx, definition, newState) {
+    const definitionKey = JSON.stringify(definition);
+    if (ctx.pendingQueries.has(definitionKey) && newState === 'pending') {
+        // Never allow transitions back to pending, to avoid re-sending stats on a re-render.
+        return;
+    }
+    if (ctx.pendingQueries.get(definitionKey) !== newState) {
+        ctx.pendingQueries.set(definitionKey, newState);
+        if (newState === 'error') {
+            ctx.renderErrorCount += 1;
+        }
+        const allDone = [
+            ...ctx.pendingQueries.values()
+        ].every((p)=>p !== 'pending');
+        if (ctx.renderDurationMs === 0 && allDone) {
+            ctx.renderDurationMs = Date.now() - ctx.startRenderTime;
+            submitMetrics(ctx);
+        }
+    }
+}
 const submitMetrics = async (stats)=>{
     await stats.fetchFn(`${stats.apiPrefix ?? ''}/api/v1/view`, {
         method: 'POST',
@@ -61,11 +64,12 @@ const submitMetrics = async (stats)=>{
 };
 export const UsageMetricsProvider = ({ apiPrefix, project, dashboard, children })=>{
     const { fetch } = useFetch();
+    const [startRenderTime] = useState(()=>Date.now());
     const ctx = {
         project: project,
         dashboard: dashboard,
         renderErrorCount: 0,
-        startRenderTime: Date.now(),
+        startRenderTime,
         renderDurationMs: 0,
         pendingQueries: new Map(),
         apiPrefix,

package/dist/runtime/UsageMetricsProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/runtime/UsageMetricsProvider.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { FetchFn } from '@perses-dev/client';\nimport { useFetch } from '@perses-dev/client';\nimport type { QueryDefinition } from '@perses-dev/spec';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\n\ntype QueryState = 'pending' | 'success' | 'error';\n\ninterface UsageMetrics {\n  project: string;\n  dashboard: string;\n  startRenderTime: number;\n  renderDurationMs: number;\n  renderErrorCount: number;\n  pendingQueries: Map<string, QueryState>;\n  apiPrefix?: string;\n  fetchFn: FetchFn;\n}\n\ninterface UsageMetricsProps {\n  project: string;\n  dashboard: string;\n  apiPrefix?: string;\n  children: ReactNode;\n}\n\ninterface UseUsageMetricsResults {\n  markQuery: (definition: QueryDefinition, state: QueryState) => void;\n}\n\nexport const UsageMetricsContext = createContext<UsageMetrics | undefined>(undefined);\n\nexport const useUsageMetricsContext = (): UsageMetrics | undefined => {\n  return useContext(UsageMetricsContext);\n};\n\nexport const useUsageMetrics = (): UseUsageMetricsResults => {\n  const ctx = useUsageMetricsContext();\n\n  return {\n    markQuery: (definition: QueryDefinition, newState: QueryState): void => {\n      if (ctx === undefined) {\n        return;\n      }\n\n      const definitionKey = JSON.stringify(definition);\n      if (ctx.pendingQueries.has(definitionKey) && newState === 'pending') {\n        // Never allow transitions back to pending, to avoid re-sending stats on a re-render.\n        return;\n      }\n\n      if (ctx.pendingQueries.get(definitionKey) !== newState) {\n        ctx.pendingQueries.set(definitionKey, newState);\n        if (newState === 'error') {\n          ctx.renderErrorCount += 1;\n        }\n\n        const allDone = [...ctx.pendingQueries.values()].every((p) => p !== 'pending');\n        if (ctx.renderDurationMs === 0 && allDone) {\n          ctx.renderDurationMs = Date.now() - ctx.startRenderTime;\n          submitMetrics(ctx);\n        }\n      }\n    },\n  };\n};\n\nconst submitMetrics = async (stats: UsageMetrics): Promise<void> => {\n  await stats.fetchFn(`${stats.apiPrefix ?? ''}/api/v1/view`, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    body: JSON.stringify({\n      project: stats.project,\n      dashboard: stats.dashboard,\n      render_time: stats.renderDurationMs / 1000,\n      render_errors: stats.renderErrorCount,\n    }),\n  });\n};\n\nexport const UsageMetricsProvider = ({ apiPrefix, project, dashboard, children }: UsageMetricsProps): ReactElement => {\n  const { fetch } = useFetch();\n\n  const ctx: UsageMetrics = {\n    project: project,\n    dashboard: dashboard,\n    renderErrorCount: 0,\n    startRenderTime: Date.now(),\n    renderDurationMs: 0,\n    pendingQueries: new Map(),\n    apiPrefix,\n    fetchFn: fetch,\n  };\n\n  return <UsageMetricsContext.Provider value={ctx}>{children}</UsageMetricsContext.Provider>;\n};\n"],"names":["useFetch","createContext","useContext","UsageMetricsContext","undefined","useUsageMetricsContext","useUsageMetrics","ctx","markQuery","definition","newState","definitionKey","JSON","stringify","pendingQueries","has","get","set","renderErrorCount","allDone","values","every","p","renderDurationMs","Date","now","startRenderTime","submitMetrics","stats","fetchFn","apiPrefix","method","headers","body","project","dashboard","render_time","render_errors","UsageMetricsProvider","children","fetch","Map","Provider","value"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,QAAQ,QAAQ,qBAAqB;AAG9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AA0BlD,OAAO,MAAMC,oCAAsBF,cAAwCG,WAAW;AAEtF,OAAO,MAAMC,yBAAyB;IACpC,OAAOH,WAAWC;AACpB,EAAE;AAEF,OAAO,MAAMG,kBAAkB;IAC7B,MAAMC,MAAMF;IAEZ,OAAO;QACLG,WAAW,CAACC,YAA6BC;YACvC,IAAIH,QAAQH,WAAW;gBACrB;YACF;YAEA,MAAMO,gBAAgBC,KAAKC,SAAS,CAACJ;YACrC,IAAIF,IAAIO,cAAc,CAACC,GAAG,CAACJ,kBAAkBD,aAAa,WAAW;gBACnE,qFAAqF;gBACrF;YACF;YAEA,IAAIH,IAAIO,cAAc,CAACE,GAAG,CAACL,mBAAmBD,UAAU;gBACtDH,IAAIO,cAAc,CAACG,GAAG,CAACN,eAAeD;gBACtC,IAAIA,aAAa,SAAS;oBACxBH,IAAIW,gBAAgB,IAAI;gBAC1B;gBAEA,MAAMC,UAAU;uBAAIZ,IAAIO,cAAc,CAACM,MAAM;iBAAG,CAACC,KAAK,CAAC,CAACC,IAAMA,MAAM;gBACpE,IAAIf,IAAIgB,gBAAgB,KAAK,KAAKJ,SAAS;oBACzCZ,IAAIgB,gBAAgB,GAAGC,KAAKC,GAAG,KAAKlB,IAAImB,eAAe;oBACvDC,cAAcpB;gBAChB;YACF;QACF;IACF;AACF,EAAE;AAEF,MAAMoB,gBAAgB,OAAOC;IAC3B,MAAMA,MAAMC,OAAO,CAAC,GAAGD,MAAME,SAAS,IAAI,GAAG,YAAY,CAAC,EAAE;QAC1DC,QAAQ;QACRC,SAAS;YACP,gBAAgB;QAClB;QACAC,MAAMrB,KAAKC,SAAS,CAAC;YACnBqB,SAASN,MAAMM,OAAO;YACtBC,WAAWP,MAAMO,SAAS;YAC1BC,aAAaR,MAAML,gBAAgB,GAAG;YACtCc,eAAeT,MAAMV,gBAAgB;QACvC;IACF;AACF;AAEA,OAAO,MAAMoB,uBAAuB,CAAC,EAAER,SAAS,EAAEI,OAAO,EAAEC,SAAS,EAAEI,QAAQ,EAAqB;IACjG,MAAM,EAAEC,KAAK,EAAE,GAAGxC;IAElB,MAAMO,MAAoB;QACxB2B,SAASA;QACTC,WAAWA;QACXjB,kBAAkB;QAClBQ,iBAAiBF,KAAKC,GAAG;QACzBF,kBAAkB;QAClBT,gBAAgB,IAAI2B;QACpBX;QACAD,SAASW;IACX;IAEA,qBAAO,KAACrC,oBAAoBuC,QAAQ;QAACC,OAAOpC;kBAAMgC;;AACpD,EAAE"}
+{"version":3,"sources":["../../src/runtime/UsageMetricsProvider.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { FetchFn } from '@perses-dev/client';\nimport { useFetch } from '@perses-dev/client';\nimport type { QueryDefinition } from '@perses-dev/spec';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\n\ntype QueryState = 'pending' | 'success' | 'error';\n\ninterface UsageMetrics {\n  project: string;\n  dashboard: string;\n  startRenderTime: number;\n  renderDurationMs: number;\n  renderErrorCount: number;\n  pendingQueries: Map<string, QueryState>;\n  apiPrefix?: string;\n  fetchFn: FetchFn;\n}\n\ninterface UsageMetricsProps {\n  project: string;\n  dashboard: string;\n  apiPrefix?: string;\n  children: ReactNode;\n}\n\ninterface UseUsageMetricsResults {\n  markQuery: (definition: QueryDefinition, state: QueryState) => void;\n}\n\nexport const UsageMetricsContext = createContext<UsageMetrics | undefined>(undefined);\n\nexport const useUsageMetricsContext = (): UsageMetrics | undefined => {\n  return useContext(UsageMetricsContext);\n};\n\nexport const useUsageMetrics = (): UseUsageMetricsResults => {\n  const ctx = useUsageMetricsContext();\n\n  return {\n    markQuery: (definition: QueryDefinition, newState: QueryState): void => {\n      if (ctx === undefined) {\n        return;\n      }\n      recordQuery(ctx, definition, newState);\n    },\n  };\n};\n\nfunction recordQuery(ctx: UsageMetrics, definition: QueryDefinition, newState: QueryState): void {\n  const definitionKey = JSON.stringify(definition);\n  if (ctx.pendingQueries.has(definitionKey) && newState === 'pending') {\n    // Never allow transitions back to pending, to avoid re-sending stats on a re-render.\n    return;\n  }\n\n  if (ctx.pendingQueries.get(definitionKey) !== newState) {\n    ctx.pendingQueries.set(definitionKey, newState);\n    if (newState === 'error') {\n      ctx.renderErrorCount += 1;\n    }\n\n    const allDone = [...ctx.pendingQueries.values()].every((p) => p !== 'pending');\n    if (ctx.renderDurationMs === 0 && allDone) {\n      ctx.renderDurationMs = Date.now() - ctx.startRenderTime;\n      submitMetrics(ctx);\n    }\n  }\n}\n\nconst submitMetrics = async (stats: UsageMetrics): Promise<void> => {\n  await stats.fetchFn(`${stats.apiPrefix ?? ''}/api/v1/view`, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    body: JSON.stringify({\n      project: stats.project,\n      dashboard: stats.dashboard,\n      render_time: stats.renderDurationMs / 1000,\n      render_errors: stats.renderErrorCount,\n    }),\n  });\n};\n\nexport const UsageMetricsProvider = ({ apiPrefix, project, dashboard, children }: UsageMetricsProps): ReactElement => {\n  const { fetch } = useFetch();\n  const [startRenderTime] = useState(() => Date.now());\n\n  const ctx: UsageMetrics = {\n    project: project,\n    dashboard: dashboard,\n    renderErrorCount: 0,\n    startRenderTime,\n    renderDurationMs: 0,\n    pendingQueries: new Map(),\n    apiPrefix,\n    fetchFn: fetch,\n  };\n\n  return <UsageMetricsContext.Provider value={ctx}>{children}</UsageMetricsContext.Provider>;\n};\n"],"names":["useFetch","createContext","useContext","useState","UsageMetricsContext","undefined","useUsageMetricsContext","useUsageMetrics","ctx","markQuery","definition","newState","recordQuery","definitionKey","JSON","stringify","pendingQueries","has","get","set","renderErrorCount","allDone","values","every","p","renderDurationMs","Date","now","startRenderTime","submitMetrics","stats","fetchFn","apiPrefix","method","headers","body","project","dashboard","render_time","render_errors","UsageMetricsProvider","children","fetch","Map","Provider","value"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,QAAQ,QAAQ,qBAAqB;AAG9C,SAASC,aAAa,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AA0B5D,OAAO,MAAMC,oCAAsBH,cAAwCI,WAAW;AAEtF,OAAO,MAAMC,yBAAyB;IACpC,OAAOJ,WAAWE;AACpB,EAAE;AAEF,OAAO,MAAMG,kBAAkB;IAC7B,MAAMC,MAAMF;IAEZ,OAAO;QACLG,WAAW,CAACC,YAA6BC;YACvC,IAAIH,QAAQH,WAAW;gBACrB;YACF;YACAO,YAAYJ,KAAKE,YAAYC;QAC/B;IACF;AACF,EAAE;AAEF,SAASC,YAAYJ,GAAiB,EAAEE,UAA2B,EAAEC,QAAoB;IACvF,MAAME,gBAAgBC,KAAKC,SAAS,CAACL;IACrC,IAAIF,IAAIQ,cAAc,CAACC,GAAG,CAACJ,kBAAkBF,aAAa,WAAW;QACnE,qFAAqF;QACrF;IACF;IAEA,IAAIH,IAAIQ,cAAc,CAACE,GAAG,CAACL,mBAAmBF,UAAU;QACtDH,IAAIQ,cAAc,CAACG,GAAG,CAACN,eAAeF;QACtC,IAAIA,aAAa,SAAS;YACxBH,IAAIY,gBAAgB,IAAI;QAC1B;QAEA,MAAMC,UAAU;eAAIb,IAAIQ,cAAc,CAACM,MAAM;SAAG,CAACC,KAAK,CAAC,CAACC,IAAMA,MAAM;QACpE,IAAIhB,IAAIiB,gBAAgB,KAAK,KAAKJ,SAAS;YACzCb,IAAIiB,gBAAgB,GAAGC,KAAKC,GAAG,KAAKnB,IAAIoB,eAAe;YACvDC,cAAcrB;QAChB;IACF;AACF;AAEA,MAAMqB,gBAAgB,OAAOC;IAC3B,MAAMA,MAAMC,OAAO,CAAC,GAAGD,MAAME,SAAS,IAAI,GAAG,YAAY,CAAC,EAAE;QAC1DC,QAAQ;QACRC,SAAS;YACP,gBAAgB;QAClB;QACAC,MAAMrB,KAAKC,SAAS,CAAC;YACnBqB,SAASN,MAAMM,OAAO;YACtBC,WAAWP,MAAMO,SAAS;YAC1BC,aAAaR,MAAML,gBAAgB,GAAG;YACtCc,eAAeT,MAAMV,gBAAgB;QACvC;IACF;AACF;AAEA,OAAO,MAAMoB,uBAAuB,CAAC,EAAER,SAAS,EAAEI,OAAO,EAAEC,SAAS,EAAEI,QAAQ,EAAqB;IACjG,MAAM,EAAEC,KAAK,EAAE,GAAG1C;IAClB,MAAM,CAAC4B,gBAAgB,GAAGzB,SAAS,IAAMuB,KAAKC,GAAG;IAEjD,MAAMnB,MAAoB;QACxB4B,SAASA;QACTC,WAAWA;QACXjB,kBAAkB;QAClBQ;QACAH,kBAAkB;QAClBT,gBAAgB,IAAI2B;QACpBX;QACAD,SAASW;IACX;IAEA,qBAAO,KAACtC,oBAAoBwC,QAAQ;QAACC,OAAOrC;kBAAMiC;;AACpD,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/plugin-system",
-  "version": "0.55.0-beta.14",
+  "version": "0.55.0-beta.15",
   "description": "The plugin feature in Pereses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@module-federation/enhanced": "^2.9.1",
-    "@perses-dev/client": "0.55.0-beta.14",
-    "@perses-dev/components": "0.55.0-beta.14",
+    "@perses-dev/client": "0.55.0-beta.15",
+    "@perses-dev/components": "0.55.0-beta.15",
     "@perses-dev/spec": "0.3.0-beta.10",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",