@perses-dev/prometheus-plugin 0.58.0-beta.2 → 0.58.0-beta.4

package/lib/annotations/get-annotation-data.js

@@ -0,0 +1,79 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { parseDurationString } from '@perses-dev/spec';
+import { datasourceSelectValueToSelector, replaceVariables } from '@perses-dev/plugin-system';
+import { milliseconds } from 'date-fns';
+import { DEFAULT_SCRAPE_INTERVAL } from '../plugins';
+import { DEFAULT_PROM, getPrometheusTimeRange, getRangeStep, PROM_DATASOURCE_KIND } from '../model';
+import { formatSeriesName } from '../utils';
+import { interpolateDatasourceProxyParams } from '../plugins/interpolation';
+export const getAnnotationData = async (spec, context, abortSignal)=>{
+    if (!spec.expr) {
+        return [];
+    }
+    const listDatasourceSelectItems = await context.datasourceStore.listDatasourceSelectItems(PROM_DATASOURCE_KIND);
+    const datasourceSelector = datasourceSelectValueToSelector(spec.datasource ?? DEFAULT_PROM, context.variableState, listDatasourceSelectItems) ?? DEFAULT_PROM;
+    const client = await context.datasourceStore.getDatasourceClient(datasourceSelector);
+    const datasource = await context.datasourceStore.getDatasource(datasourceSelector);
+    const interpolatedOptions = interpolateDatasourceProxyParams(datasource, context.variableState);
+    const datasourceScrapeInterval = Math.trunc(milliseconds(parseDurationString(datasource.plugin.spec.scrapeInterval ?? DEFAULT_SCRAPE_INTERVAL)) / 1000);
+    const timeRange = getPrometheusTimeRange(context.absoluteTimeRange);
+    const step = getRangeStep(timeRange, datasourceScrapeInterval);
+    const utcOffsetSec = new Date().getTimezoneOffset() * 60;
+    const alignedStart = Math.floor((timeRange.start + utcOffsetSec) / step) * step - utcOffsetSec;
+    let alignedEnd = Math.floor((timeRange.end + utcOffsetSec) / step) * step - utcOffsetSec;
+    /* Ensure end is always greater than start:
+     If the step is greater than equal to the diff of end and start,
+     both start, and end will eventually be rounded to the same value,
+     Consequently, the time range will be zero, which does not return any valid value
+  */ if (alignedStart === alignedEnd) {
+        alignedEnd = alignedStart + step;
+        console.warn(`Step (${step}) was larger than the time range! end of time range was set accordingly.`);
+    }
+    const { data } = await client.rangeQuery({
+        query: replaceVariables(spec.expr, context.variableState),
+        start: alignedStart,
+        end: alignedEnd,
+        step: step
+    }, {
+        ...interpolatedOptions,
+        signal: abortSignal
+    });
+    const result = [];
+    for (const series of data?.result ?? []){
+        const start = series.values[0]?.[0];
+        const end = series.values[series.values.length - 1]?.[0];
+        if (start !== undefined && end !== undefined) {
+            const labels = series.metric ?? {};
+            const title = spec.title ? formatSeriesName(spec.title, labels) : undefined;
+            const legend = spec.legend ? formatSeriesName(spec.legend, labels) : undefined;
+            // If spec.tags is provided, only expose the selected label names as tags.
+            // Otherwise, expose all labels.
+            const tags = spec.tags && spec.tags.length > 0 ? spec.tags.reduce((acc, name)=>{
+                const v = labels[name];
+                if (v !== undefined) acc[name] = v;
+                return acc;
+            }, {}) : labels;
+            result.push({
+                start: start * 1000,
+                end: end * 1000,
+                title: title,
+                legend: legend,
+                tags: tags
+            });
+        }
+    }
+    return result;
+};
+
+//# sourceMappingURL=get-annotation-data.js.map

package/lib/annotations/get-annotation-data.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/annotations/get-annotation-data.ts"],"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 { AnnotationData, DatasourceSpec, parseDurationString } from '@perses-dev/spec';\nimport { AnnotationContext, datasourceSelectValueToSelector, replaceVariables } from '@perses-dev/plugin-system';\nimport { milliseconds } from 'date-fns';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec, PrometheusPromQLAnnotationOptions } from '../plugins';\nimport { DEFAULT_PROM, getPrometheusTimeRange, getRangeStep, PROM_DATASOURCE_KIND, PrometheusClient } from '../model';\nimport { formatSeriesName } from '../utils';\nimport { interpolateDatasourceProxyParams } from '../plugins/interpolation';\n\nexport const getAnnotationData = async (\n  spec: PrometheusPromQLAnnotationOptions,\n  context: AnnotationContext,\n  abortSignal?: AbortSignal\n): Promise<AnnotationData[]> => {\n  if (!spec.expr) {\n    return [];\n  }\n\n  const listDatasourceSelectItems = await context.datasourceStore.listDatasourceSelectItems(PROM_DATASOURCE_KIND);\n\n  const datasourceSelector =\n    datasourceSelectValueToSelector(\n      spec.datasource ?? DEFAULT_PROM,\n      context.variableState,\n      listDatasourceSelectItems\n    ) ?? DEFAULT_PROM;\n\n  const client: PrometheusClient = await context.datasourceStore.getDatasourceClient(datasourceSelector);\n\n  const datasource = (await context.datasourceStore.getDatasource(\n    datasourceSelector\n  )) as DatasourceSpec<PrometheusDatasourceSpec>;\n  const interpolatedOptions = interpolateDatasourceProxyParams(datasource, context.variableState);\n\n  const datasourceScrapeInterval = Math.trunc(\n    milliseconds(parseDurationString(datasource.plugin.spec.scrapeInterval ?? DEFAULT_SCRAPE_INTERVAL)) / 1000\n  );\n\n  const timeRange = getPrometheusTimeRange(context.absoluteTimeRange);\n\n  const step = getRangeStep(timeRange, datasourceScrapeInterval);\n\n  const utcOffsetSec = new Date().getTimezoneOffset() * 60;\n\n  const alignedStart = Math.floor((timeRange.start + utcOffsetSec) / step) * step - utcOffsetSec;\n  let alignedEnd = Math.floor((timeRange.end + utcOffsetSec) / step) * step - utcOffsetSec;\n\n  /* Ensure end is always greater than start:\n     If the step is greater than equal to the diff of end and start,\n     both start, and end will eventually be rounded to the same value,\n     Consequently, the time range will be zero, which does not return any valid value\n  */\n  if (alignedStart === alignedEnd) {\n    alignedEnd = alignedStart + step;\n    console.warn(`Step (${step}) was larger than the time range! end of time range was set accordingly.`);\n  }\n\n  const { data } = await client.rangeQuery(\n    {\n      query: replaceVariables(spec.expr, context.variableState),\n      start: alignedStart,\n      end: alignedEnd,\n      step: step,\n    },\n    { ...interpolatedOptions, signal: abortSignal }\n  );\n\n  const result: AnnotationData[] = [];\n  for (const series of data?.result ?? []) {\n    const start = series.values[0]?.[0];\n    const end = series.values[series.values.length - 1]?.[0];\n\n    if (start !== undefined && end !== undefined) {\n      const labels = series.metric ?? {};\n      const title = spec.title ? formatSeriesName(spec.title, labels) : undefined;\n      const legend = spec.legend ? formatSeriesName(spec.legend, labels) : undefined;\n      // If spec.tags is provided, only expose the selected label names as tags.\n      // Otherwise, expose all labels.\n      const tags =\n        spec.tags && spec.tags.length > 0\n          ? spec.tags.reduce<Record<string, string>>((acc, name) => {\n              const v = labels[name];\n              if (v !== undefined) acc[name] = v;\n              return acc;\n            }, {})\n          : labels;\n      result.push({\n        start: start * 1000,\n        end: end * 1000,\n        title: title,\n        legend: legend,\n        tags: tags,\n      });\n    }\n  }\n\n  return result;\n};\n"],"names":["parseDurationString","datasourceSelectValueToSelector","replaceVariables","milliseconds","DEFAULT_SCRAPE_INTERVAL","DEFAULT_PROM","getPrometheusTimeRange","getRangeStep","PROM_DATASOURCE_KIND","formatSeriesName","interpolateDatasourceProxyParams","getAnnotationData","spec","context","abortSignal","expr","listDatasourceSelectItems","datasourceStore","datasourceSelector","datasource","variableState","client","getDatasourceClient","getDatasource","interpolatedOptions","datasourceScrapeInterval","Math","trunc","plugin","scrapeInterval","timeRange","absoluteTimeRange","step","utcOffsetSec","Date","getTimezoneOffset","alignedStart","floor","start","alignedEnd","end","console","warn","data","rangeQuery","query","signal","result","series","values","length","undefined","labels","metric","title","legend","tags","reduce","acc","name","v","push"],"mappings":"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"}

package/lib/annotations/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PrometheusPromQLAnnotation';
+//# sourceMappingURL=index.d.ts.map

package/lib/annotations/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/annotations/index.ts"],"names":[],"mappings":"AAaA,cAAc,8BAA8B,CAAC"}

package/lib/annotations/index.js

@@ -0,0 +1,15 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './PrometheusPromQLAnnotation';
+
+//# sourceMappingURL=index.js.map

package/lib/annotations/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/annotations/index.ts"],"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\nexport * from './PrometheusPromQLAnnotation';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,+BAA+B"}

package/lib/cjs/annotations/PrometheusPromQLAnnotation.js

@@ -0,0 +1,40 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PrometheusPromQLAnnotation", {
+    enumerable: true,
+    get: function() {
+        return PrometheusPromQLAnnotation;
+    }
+});
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _PrometheusPromQLAnnotationOptionEditor = require("./PrometheusPromQLAnnotationOptionEditor");
+const _getannotationdata = require("./get-annotation-data");
+const PrometheusPromQLAnnotation = {
+    getAnnotationData: _getannotationdata.getAnnotationData,
+    dependsOn: (spec)=>{
+        const queryVariables = (0, _pluginsystem.parseVariables)(spec.expr);
+        return {
+            variables: [
+                ...queryVariables
+            ]
+        };
+    },
+    OptionsEditorComponent: _PrometheusPromQLAnnotationOptionEditor.PrometheusPromQLAnnotationOptionEditor,
+    createInitialOptions: ()=>({
+            expr: ''
+        })
+};

package/lib/cjs/annotations/PrometheusPromQLAnnotationOptionEditor.js

@@ -0,0 +1,147 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PrometheusPromQLAnnotationOptionEditor", {
+    enumerable: true,
+    get: function() {
+        return PrometheusPromQLAnnotationOptionEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
+const _immer = require("immer");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _model = require("../model");
+const _components1 = require("../components");
+function PrometheusPromQLAnnotationOptionEditor(props) {
+    const { onChange, value, value: { expr, datasource, title, legend, tags }, isReadonly } = props;
+    const datasourceSelectValue = datasource ?? _model.DEFAULT_PROM;
+    const datasourceSelectLabelID = (0, _components.useId)('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page
+    const selectedDatasource = (0, _pluginsystem.useDatasourceSelectValueToSelector)(datasourceSelectValue, _model.PROM_DATASOURCE_KIND);
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
+    const promURL = client?.options.datasourceUrl;
+    const handleDatasourceChange = (next)=>{
+        if ((0, _model.isPrometheusDatasourceSelector)(next)) {
+            /* Good to know: The usage of onchange here causes an immediate spec update which eventually updates the panel
+         This was probably intentional to allow for quick switching between datasources.
+         Could have been triggered only with Run Query button as well.
+      */ onChange((0, _immer.produce)(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                const nextDatasource = (0, _model.isDefaultPromSelector)(next) ? undefined : next;
+                draft.datasource = nextDatasource;
+            }));
+            return;
+        }
+        throw new Error('Got unexpected non-Prometheus datasource selector');
+    };
+    const handleExprChange = (next)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.expr = next;
+        }));
+    };
+    const handleTitleChange = (next)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.title = next || undefined;
+        }));
+    };
+    const handleLegendChange = (next)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.legend = next || undefined;
+        }));
+    };
+    const handleTagsChange = (next)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.tags = next.length > 0 ? next : undefined;
+        }));
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
+                margin: "dense",
+                fullWidth: false,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
+                    datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
+                    value: datasourceSelectValue,
+                    onChange: handleDatasourceChange,
+                    labelId: datasourceSelectLabelID,
+                    label: "Prometheus Datasource",
+                    notched: true,
+                    readOnly: isReadonly
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PromQLEditor, {
+                completeConfig: {
+                    remote: {
+                        url: promURL
+                    }
+                },
+                value: expr,
+                datasource: selectedDatasource,
+                onChange: handleExprChange,
+                isReadOnly: isReadonly,
+                treeViewMetadata: undefined
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                fullWidth: true,
+                label: "Title",
+                placeholder: "Example: 'Deployment {{service}}'",
+                helperText: "Title displayed in the annotation tooltip. Use {{label_name}} to interpolate label values.",
+                value: title ?? '',
+                onChange: (e)=>handleTitleChange(e.target.value),
+                slotProps: {
+                    inputLabel: {
+                        shrink: isReadonly ? true : undefined
+                    },
+                    input: {
+                        readOnly: isReadonly
+                    }
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                fullWidth: true,
+                label: "Legend",
+                placeholder: "Example: '{{instance}}' will generate annotation legends like 'webserver-123'...",
+                helperText: "Text displayed below the title in the annotation tooltip. Use {{label_name}} to interpolate label values.",
+                value: legend ?? '',
+                onChange: (e)=>handleLegendChange(e.target.value),
+                slotProps: {
+                    inputLabel: {
+                        shrink: isReadonly ? true : undefined
+                    },
+                    input: {
+                        readOnly: isReadonly
+                    }
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                multiple: true,
+                freeSolo: true,
+                options: [],
+                value: tags ?? [],
+                onChange: (_, next)=>handleTagsChange(next),
+                readOnly: isReadonly,
+                renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...params,
+                        label: "Tags",
+                        placeholder: "Add label names...",
+                        helperText: "Label names to display as tags in the annotation tooltip. Leave empty to show all labels. Press Enter to add."
+                    })
+            })
+        ]
+    });
+}

package/lib/cjs/annotations/get-annotation-data.js

@@ -0,0 +1,87 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getAnnotationData", {
+    enumerable: true,
+    get: function() {
+        return getAnnotationData;
+    }
+});
+const _spec = require("@perses-dev/spec");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _datefns = require("date-fns");
+const _plugins = require("../plugins");
+const _model = require("../model");
+const _utils = require("../utils");
+const _interpolation = require("../plugins/interpolation");
+const getAnnotationData = async (spec, context, abortSignal)=>{
+    if (!spec.expr) {
+        return [];
+    }
+    const listDatasourceSelectItems = await context.datasourceStore.listDatasourceSelectItems(_model.PROM_DATASOURCE_KIND);
+    const datasourceSelector = (0, _pluginsystem.datasourceSelectValueToSelector)(spec.datasource ?? _model.DEFAULT_PROM, context.variableState, listDatasourceSelectItems) ?? _model.DEFAULT_PROM;
+    const client = await context.datasourceStore.getDatasourceClient(datasourceSelector);
+    const datasource = await context.datasourceStore.getDatasource(datasourceSelector);
+    const interpolatedOptions = (0, _interpolation.interpolateDatasourceProxyParams)(datasource, context.variableState);
+    const datasourceScrapeInterval = Math.trunc((0, _datefns.milliseconds)((0, _spec.parseDurationString)(datasource.plugin.spec.scrapeInterval ?? _plugins.DEFAULT_SCRAPE_INTERVAL)) / 1000);
+    const timeRange = (0, _model.getPrometheusTimeRange)(context.absoluteTimeRange);
+    const step = (0, _model.getRangeStep)(timeRange, datasourceScrapeInterval);
+    const utcOffsetSec = new Date().getTimezoneOffset() * 60;
+    const alignedStart = Math.floor((timeRange.start + utcOffsetSec) / step) * step - utcOffsetSec;
+    let alignedEnd = Math.floor((timeRange.end + utcOffsetSec) / step) * step - utcOffsetSec;
+    /* Ensure end is always greater than start:
+     If the step is greater than equal to the diff of end and start,
+     both start, and end will eventually be rounded to the same value,
+     Consequently, the time range will be zero, which does not return any valid value
+  */ if (alignedStart === alignedEnd) {
+        alignedEnd = alignedStart + step;
+        console.warn(`Step (${step}) was larger than the time range! end of time range was set accordingly.`);
+    }
+    const { data } = await client.rangeQuery({
+        query: (0, _pluginsystem.replaceVariables)(spec.expr, context.variableState),
+        start: alignedStart,
+        end: alignedEnd,
+        step: step
+    }, {
+        ...interpolatedOptions,
+        signal: abortSignal
+    });
+    const result = [];
+    for (const series of data?.result ?? []){
+        const start = series.values[0]?.[0];
+        const end = series.values[series.values.length - 1]?.[0];
+        if (start !== undefined && end !== undefined) {
+            const labels = series.metric ?? {};
+            const title = spec.title ? (0, _utils.formatSeriesName)(spec.title, labels) : undefined;
+            const legend = spec.legend ? (0, _utils.formatSeriesName)(spec.legend, labels) : undefined;
+            // If spec.tags is provided, only expose the selected label names as tags.
+            // Otherwise, expose all labels.
+            const tags = spec.tags && spec.tags.length > 0 ? spec.tags.reduce((acc, name)=>{
+                const v = labels[name];
+                if (v !== undefined) acc[name] = v;
+                return acc;
+            }, {}) : labels;
+            result.push({
+                start: start * 1000,
+                end: end * 1000,
+                title: title,
+                legend: legend,
+                tags: tags
+            });
+        }
+    }
+    return result;
+};

package/lib/cjs/annotations/index.js

@@ -0,0 +1,30 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the \"License\");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./PrometheusPromQLAnnotation"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/explore/PrometheusExplorer.js

@@ -42,18 +42,11 @@ function TimeSeriesPanel({ queries }) {
     const { width, ref: boxRef } = (0, _useresizeobserver.default)();
     const height = PANEL_PREVIEW_HEIGHT;
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
-    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const definitions = queries.length ? queries.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    }) : [];
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ref: boxRef,
         height: height,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-            definitions: definitions,
+            definitions: queries,
             options: {
                 suggestedStepMs,
                 mode: 'range'
@@ -81,17 +74,10 @@ function TimeSeriesPanel({ queries }) {
 }
 function MetricDataTable({ queries }) {
     const height = PANEL_PREVIEW_HEIGHT;
-    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const definitions = queries.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    });
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         height: height,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-            definitions: definitions,
+            definitions: queries,
             options: {
                 mode: 'instant'
             },

package/lib/cjs/explore/PrometheusMetricsFinder/overview/MetricOverview.js

@@ -49,9 +49,9 @@ function OverviewPanel({ metricName, datasource, filters, type, isLoading, ...pr
     const { width, ref: panelRef } = (0, _useresizeobserver.default)();
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     const [rateEnabled, setRateEnabled] = (0, _react.useState)(true);
-    const { queries, definitions } = (0, _react.useMemo)(()=>{
+    const queries = (0, _react.useMemo)(()=>{
         const expr = type === 'counter' || rateEnabled && (type === undefined || type === 'summary' || type === 'histogram') ? `rate({__name__="${metricName}", ${(0, _types.computeFilterExpr)(filters)}}[5m])` : `{__name__="${metricName}", ${(0, _types.computeFilterExpr)(filters)}}`;
-        const queries = [
+        return [
             {
                 kind: 'TimeSeriesQuery',
                 spec: {
@@ -65,16 +65,6 @@ function OverviewPanel({ metricName, datasource, filters, type, isLoading, ...pr
                 }
             }
         ];
-        const definitions = queries.map((query)=>{
-            return {
-                kind: query.spec.plugin.kind,
-                spec: query.spec.plugin.spec
-            };
-        });
-        return {
-            queries,
-            definitions
-        };
     }, [
         datasource,
         filters,
@@ -105,7 +95,7 @@ function OverviewPanel({ metricName, datasource, filters, type, isLoading, ...pr
                 onChange: (_, checked)=>setRateEnabled(checked)
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-                definitions: definitions,
+                definitions: queries,
                 options: {
                     suggestedStepMs,
                     mode: 'range'

package/lib/cjs/index.js

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "getPluginModule", {
         return _getPluginModule.getPluginModule;
     }
 });
+_export_star(require("./annotations"), exports);
 _export_star(require("./components"), exports);
 _export_star(require("./explore"), exports);
 const _getPluginModule = require("./getPluginModule");

package/lib/explore/PrometheusExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrometheusExplorer.d.ts","sourceRoot":"","sources":["../../../src/explore/PrometheusExplorer.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AA2E/C,wBAAgB,kBAAkB,IAAI,YAAY,CAwDjD"}
+{"version":3,"file":"PrometheusExplorer.d.ts","sourceRoot":"","sources":["../../../src/explore/PrometheusExplorer.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAyD/C,wBAAgB,kBAAkB,IAAI,YAAY,CAwDjD"}

package/lib/explore/PrometheusExplorer.js

@@ -27,18 +27,11 @@ function TimeSeriesPanel({ queries }) {
     const { width, ref: boxRef } = useResizeObserver();
     const height = PANEL_PREVIEW_HEIGHT;
     const suggestedStepMs = useSuggestedStepMs(width);
-    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const definitions = queries.length ? queries.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    }) : [];
     return /*#__PURE__*/ _jsx(Box, {
         ref: boxRef,
         height: height,
         children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
-            definitions: definitions,
+            definitions: queries,
             options: {
                 suggestedStepMs,
                 mode: 'range'
@@ -66,17 +59,10 @@ function TimeSeriesPanel({ queries }) {
 }
 function MetricDataTable({ queries }) {
     const height = PANEL_PREVIEW_HEIGHT;
-    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const definitions = queries.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    });
     return /*#__PURE__*/ _jsx(Box, {
         height: height,
         children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
-            definitions: definitions,
+            definitions: queries,
             options: {
                 mode: 'instant'
             },

package/lib/explore/PrometheusExplorer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/explore/PrometheusExplorer.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 { Box, Stack, Tab, Tabs } from '@mui/material';\nimport { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { useExplorerManagerContext } from '@perses-dev/explore';\nimport useResizeObserver from 'use-resize-observer';\nimport { Panel } from '@perses-dev/dashboards';\nimport { ReactElement, useState } from 'react';\nimport { QueryDefinition } from '@perses-dev/spec';\nimport { DEFAULT_PROM } from '../model/prometheus-selectors';\nimport { FinderQueryParams } from './PrometheusMetricsFinder/types';\nimport { PrometheusMetricsFinder } from './PrometheusMetricsFinder';\n\ninterface MetricsExplorerQueryParams extends FinderQueryParams {\n  tab?: string;\n  queries?: QueryDefinition[];\n}\n\nconst PANEL_PREVIEW_HEIGHT = 700;\nconst FILTERED_QUERY_PLUGINS = ['PrometheusTimeSeriesQuery'];\n\nfunction TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const { width, ref: boxRef } = useResizeObserver();\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesChart', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nfunction MetricDataTable({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <Box height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ mode: 'instant' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesTable', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nexport function PrometheusExplorer(): ReactElement {\n  const {\n    data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined },\n    setData,\n  } = useExplorerManagerContext<MetricsExplorerQueryParams>();\n\n  const [queryDefinitions, setQueryDefinitions] = useState<QueryDefinition[]>(queries);\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setData({ tab: state, queries })}\n        variant=\"scrollable\"\n        sx={{ borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Tab value=\"table\" label=\"Table\" />\n        <Tab value=\"graph\" label=\"Graph\" />\n        <Tab value=\"finder\" label=\"Finder\" />\n      </Tabs>\n      <Stack gap={1}>\n        {tab === 'table' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setQueryDefinitions(state)}\n              queries={queryDefinitions}\n              onQueryRun={() => setData({ tab, queries: queryDefinitions })}\n              filteredQueryPlugins={FILTERED_QUERY_PLUGINS}\n            />\n            <MetricDataTable queries={queries} />\n          </Stack>\n        )}\n        {tab === 'graph' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setQueryDefinitions(state)}\n              queries={queryDefinitions}\n              onQueryRun={() => setData({ tab, queries: queryDefinitions })}\n              filteredQueryPlugins={FILTERED_QUERY_PLUGINS}\n            />\n            <TimeSeriesPanel queries={queries} />\n          </Stack>\n        )}\n        {tab === 'finder' && (\n          <Stack>\n            <PrometheusMetricsFinder\n              onChange={(state) => setData({ tab, ...state })}\n              value={{ datasource, filters, exploredMetric }}\n            />\n          </Stack>\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","Tab","Tabs","DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","useExplorerManagerContext","useResizeObserver","Panel","useState","DEFAULT_PROM","PrometheusMetricsFinder","PANEL_PREVIEW_HEIGHT","FILTERED_QUERY_PLUGINS","TimeSeriesPanel","queries","width","ref","boxRef","height","suggestedStepMs","definitions","length","map","query","kind","spec","plugin","options","mode","panelOptions","hideHeader","definition","display","name","MetricDataTable","PrometheusExplorer","data","tab","datasource","filters","exploredMetric","undefined","setData","queryDefinitions","setQueryDefinitions","gap","sx","value","onChange","_","state","variant","borderBottom","borderColor","label","queryTypes","onQueryRun","filteredQueryPlugins"],"mappings":"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"}
+{"version":3,"sources":["../../../src/explore/PrometheusExplorer.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 { Box, Stack, Tab, Tabs } from '@mui/material';\nimport { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { useExplorerManagerContext } from '@perses-dev/explore';\nimport useResizeObserver from 'use-resize-observer';\nimport { Panel } from '@perses-dev/dashboards';\nimport { ReactElement, useState } from 'react';\nimport { QueryDefinition } from '@perses-dev/spec';\nimport { DEFAULT_PROM } from '../model/prometheus-selectors';\nimport { FinderQueryParams } from './PrometheusMetricsFinder/types';\nimport { PrometheusMetricsFinder } from './PrometheusMetricsFinder';\n\ninterface MetricsExplorerQueryParams extends FinderQueryParams {\n  tab?: string;\n  queries?: QueryDefinition[];\n}\n\nconst PANEL_PREVIEW_HEIGHT = 700;\nconst FILTERED_QUERY_PLUGINS = ['PrometheusTimeSeriesQuery'];\n\nfunction TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const { width, ref: boxRef } = useResizeObserver();\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  return (\n    <Box ref={boxRef} height={height}>\n      <DataQueriesProvider definitions={queries} options={{ suggestedStepMs, mode: 'range' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesChart', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nfunction MetricDataTable({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  return (\n    <Box height={height}>\n      <DataQueriesProvider definitions={queries} options={{ mode: 'instant' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesTable', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nexport function PrometheusExplorer(): ReactElement {\n  const {\n    data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined },\n    setData,\n  } = useExplorerManagerContext<MetricsExplorerQueryParams>();\n\n  const [queryDefinitions, setQueryDefinitions] = useState<QueryDefinition[]>(queries);\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setData({ tab: state, queries })}\n        variant=\"scrollable\"\n        sx={{ borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Tab value=\"table\" label=\"Table\" />\n        <Tab value=\"graph\" label=\"Graph\" />\n        <Tab value=\"finder\" label=\"Finder\" />\n      </Tabs>\n      <Stack gap={1}>\n        {tab === 'table' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setQueryDefinitions(state)}\n              queries={queryDefinitions}\n              onQueryRun={() => setData({ tab, queries: queryDefinitions })}\n              filteredQueryPlugins={FILTERED_QUERY_PLUGINS}\n            />\n            <MetricDataTable queries={queries} />\n          </Stack>\n        )}\n        {tab === 'graph' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setQueryDefinitions(state)}\n              queries={queryDefinitions}\n              onQueryRun={() => setData({ tab, queries: queryDefinitions })}\n              filteredQueryPlugins={FILTERED_QUERY_PLUGINS}\n            />\n            <TimeSeriesPanel queries={queries} />\n          </Stack>\n        )}\n        {tab === 'finder' && (\n          <Stack>\n            <PrometheusMetricsFinder\n              onChange={(state) => setData({ tab, ...state })}\n              value={{ datasource, filters, exploredMetric }}\n            />\n          </Stack>\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","Tab","Tabs","DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","useExplorerManagerContext","useResizeObserver","Panel","useState","DEFAULT_PROM","PrometheusMetricsFinder","PANEL_PREVIEW_HEIGHT","FILTERED_QUERY_PLUGINS","TimeSeriesPanel","queries","width","ref","boxRef","height","suggestedStepMs","definitions","options","mode","panelOptions","hideHeader","definition","kind","spec","display","name","plugin","MetricDataTable","PrometheusExplorer","data","tab","datasource","filters","exploredMetric","undefined","setData","queryDefinitions","setQueryDefinitions","gap","sx","value","onChange","_","state","variant","borderBottom","borderColor","label","queryTypes","onQueryRun","filteredQueryPlugins"],"mappings":"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"}

package/lib/explore/PrometheusMetricsFinder/overview/MetricOverview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricOverview.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA+C,UAAU,EAAsB,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAE,kBAAkB,EAA4C,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAqB,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,YAAY,CAyEnC;AAED,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,eAAe,EACf,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,YAAY,CAyFpC"}
+{"version":3,"file":"MetricOverview.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA+C,UAAU,EAAsB,MAAM,eAAe,CAAC;AAC5G,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAE,kBAAkB,EAAmB,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAqB,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,YAAY,CA+DnC;AAED,MAAM,WAAW,mBAAoB,SAAQ,UAAU;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,eAAe,EACf,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,YAAY,CAyFpC"}