@perses-dev/plugin-system 0.54.0-beta.0 → 0.54.0-beta.2

package/dist/cjs/runtime/alerts-queries.js

@@ -0,0 +1,101 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get ALERTS_QUERY_KEY () {
+        return ALERTS_QUERY_KEY;
+    },
+    get useAlertsQueries () {
+        return useAlertsQueries;
+    }
+});
+const _reactquery = require("@tanstack/react-query");
+const _datasources = require("./datasources");
+const _pluginregistry = require("./plugin-registry");
+const _variables = require("./variables");
+const _utils = require("./utils");
+const ALERTS_QUERY_KEY = 'AlertsQuery';
+function useAlertsQueries(definitions) {
+    const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
+    const context = useAlertsQueryContext();
+    const pluginLoaderResponse = (0, _pluginregistry.usePlugins)('AlertsQuery', definitions.map((d)=>({
+            kind: d.spec.plugin.kind
+        })));
+    return (0, _reactquery.useQueries)({
+        queries: definitions.map((definition, idx)=>{
+            const plugin = pluginLoaderResponse[idx]?.data;
+            const { queryEnabled, queryKey } = getQueryOptions({
+                context,
+                definition,
+                plugin
+            });
+            const alertsQueryKind = definition?.spec?.plugin?.kind;
+            return {
+                enabled: queryEnabled,
+                queryKey: queryKey,
+                refetchOnMount: false,
+                refetchOnWindowFocus: false,
+                refetchOnReconnect: false,
+                staleTime: 60_000,
+                queryFn: async ({ signal })=>{
+                    const plugin = await getPlugin({
+                        kind: ALERTS_QUERY_KEY,
+                        name: alertsQueryKind
+                    });
+                    const data = await plugin.getAlertsData(definition.spec.plugin.spec, context, signal);
+                    return data;
+                }
+            };
+        })
+    });
+}
+function getQueryOptions({ plugin, definition, context }) {
+    const { variableState } = context;
+    const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
+    const variableDependencies = dependencies?.variables;
+    const filteredVariabledState = (0, _utils.filterVariableStateMap)(variableState, variableDependencies);
+    const variablesValueKey = (0, _utils.getVariableValuesKey)(filteredVariabledState);
+    // Note: no absoluteTimeRange in query key since alerts are current state
+    const queryKey = [
+        'query',
+        ALERTS_QUERY_KEY,
+        definition,
+        variablesValueKey
+    ];
+    let waitToLoad = false;
+    if (variableDependencies) {
+        waitToLoad = variableDependencies.some((v)=>variableState[v]?.loading);
+    }
+    const queryEnabled = plugin !== undefined && !waitToLoad;
+    return {
+        queryKey,
+        queryEnabled
+    };
+}
+function useAlertsQueryContext() {
+    const variableState = (0, _variables.useAllVariableValues)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    return {
+        variableState,
+        datasourceStore
+    };
+}

package/dist/cjs/runtime/index.js

@@ -22,6 +22,8 @@ _export_star(require("./TimeRangeProvider"), exports);
 _export_star(require("./time-series-queries"), exports);
 _export_star(require("./trace-queries"), exports);
 _export_star(require("./profile-queries"), exports);
+_export_star(require("./alerts-queries"), exports);
+_export_star(require("./silences-queries"), exports);
 _export_star(require("./item-actions"), exports);
 _export_star(require("./DataQueriesProvider"), exports);
 _export_star(require("./QueryCountProvider"), exports);

package/dist/cjs/runtime/item-actions.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "executeAction", {
     }
 });
 const _components = require("@perses-dev/components");
-const _core = require("@perses-dev/core");
+const _client = require("@perses-dev/client");
 const BODY_METHODS = new Set([
     'POST',
     'PUT',
@@ -174,7 +174,7 @@ function buildWebhookHeaders(action) {
                 body = bodyResult.text;
             }
             // Make the request
-            const response = await (0, _core.fetch)(urlResult.text, {
+            const response = await (0, _client.fetch)(urlResult.text, {
                 method: action.method,
                 headers: buildWebhookHeaders(action),
                 body: body
@@ -239,7 +239,7 @@ function buildWebhookHeaders(action) {
             body = bodyResult.text;
         }
         // Make the request
-        const response = await (0, _core.fetch)(urlResult.text, {
+        const response = await (0, _client.fetch)(urlResult.text, {
             method: action.method,
             headers: buildWebhookHeaders(action),
             body: body

package/dist/cjs/runtime/log-queries.js

@@ -62,7 +62,10 @@ function useLogQueries(definitions) {
                 refetchOnReconnect: false,
                 staleTime: Infinity,
                 queryFn: async ({ signal })=>{
-                    const plugin = await getPlugin(LOG_QUERY_KEY, logQueryKind);
+                    const plugin = await getPlugin({
+                        kind: LOG_QUERY_KEY,
+                        name: logQueryKind
+                    });
                     const data = await plugin.getLogData(definition.spec.plugin.spec, context, signal);
                     return data;
                 },

package/dist/cjs/runtime/plugin-registry.js

@@ -63,7 +63,10 @@ function usePlugin(pluginType, kind, options) {
             pluginType,
             kind
         ],
-        queryFn: ()=>getPlugin(pluginType, kind),
+        queryFn: ()=>getPlugin({
+                kind: pluginType,
+                name: kind
+            }),
         ...options
     });
 }
@@ -84,7 +87,10 @@ function usePlugins(pluginType, plugins) {
                     pluginType,
                     kind
                 ],
-                queryFn: ()=>getPlugin(pluginType, kind)
+                queryFn: ()=>getPlugin({
+                        kind: pluginType,
+                        name: kind
+                    })
             };
         })
     });
@@ -115,7 +121,10 @@ function usePluginBuiltinVariableDefinitions() {
             const datasourceNames = new Set(datasources.map((datasource)=>datasource.spec.name));
             const result = [];
             for (const name of datasourceNames){
-                const plugin = await getPlugin('Datasource', name);
+                const plugin = await getPlugin({
+                    kind: 'Datasource',
+                    name
+                });
                 if (plugin.getBuiltinVariableDefinitions) {
                     plugin.getBuiltinVariableDefinitions().forEach((definition)=>result.push(definition));
                 }

package/dist/cjs/runtime/profile-queries.js

@@ -59,7 +59,10 @@ function useProfileQueries(definitions) {
                 refetchOnReconnect: false,
                 staleTime: Infinity,
                 queryFn: async ({ signal })=>{
-                    const plugin = await getPlugin(PROFILE_QUERY_KEY, profileQueryKind);
+                    const plugin = await getPlugin({
+                        kind: PROFILE_QUERY_KEY,
+                        name: profileQueryKind
+                    });
                     const data = await plugin.getProfileData(definition.spec.plugin.spec, context, signal);
                     return data;
                 },

package/dist/cjs/runtime/silences-queries.js

@@ -0,0 +1,101 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get SILENCES_QUERY_KEY () {
+        return SILENCES_QUERY_KEY;
+    },
+    get useSilencesQueries () {
+        return useSilencesQueries;
+    }
+});
+const _reactquery = require("@tanstack/react-query");
+const _datasources = require("./datasources");
+const _pluginregistry = require("./plugin-registry");
+const _variables = require("./variables");
+const _utils = require("./utils");
+const SILENCES_QUERY_KEY = 'SilencesQuery';
+function useSilencesQueries(definitions) {
+    const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
+    const context = useSilencesQueryContext();
+    const pluginLoaderResponse = (0, _pluginregistry.usePlugins)('SilencesQuery', definitions.map((d)=>({
+            kind: d.spec.plugin.kind
+        })));
+    return (0, _reactquery.useQueries)({
+        queries: definitions.map((definition, idx)=>{
+            const plugin = pluginLoaderResponse[idx]?.data;
+            const { queryEnabled, queryKey } = getQueryOptions({
+                context,
+                definition,
+                plugin
+            });
+            const silencesQueryKind = definition?.spec?.plugin?.kind;
+            return {
+                enabled: queryEnabled,
+                queryKey: queryKey,
+                refetchOnMount: false,
+                refetchOnWindowFocus: false,
+                refetchOnReconnect: false,
+                staleTime: 60_000,
+                queryFn: async ({ signal })=>{
+                    const plugin = await getPlugin({
+                        kind: SILENCES_QUERY_KEY,
+                        name: silencesQueryKind
+                    });
+                    const data = await plugin.getSilencesData(definition.spec.plugin.spec, context, signal);
+                    return data;
+                }
+            };
+        })
+    });
+}
+function getQueryOptions({ plugin, definition, context }) {
+    const { variableState } = context;
+    const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.spec.plugin.spec, context) : {};
+    const variableDependencies = dependencies?.variables;
+    const filteredVariabledState = (0, _utils.filterVariableStateMap)(variableState, variableDependencies);
+    const variablesValueKey = (0, _utils.getVariableValuesKey)(filteredVariabledState);
+    // Note: no absoluteTimeRange in query key since silences are current state
+    const queryKey = [
+        'query',
+        SILENCES_QUERY_KEY,
+        definition,
+        variablesValueKey
+    ];
+    let waitToLoad = false;
+    if (variableDependencies) {
+        waitToLoad = variableDependencies.some((v)=>variableState[v]?.loading);
+    }
+    const queryEnabled = plugin !== undefined && !waitToLoad;
+    return {
+        queryKey,
+        queryEnabled
+    };
+}
+function useSilencesQueryContext() {
+    const variableState = (0, _variables.useAllVariableValues)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    return {
+        variableState,
+        datasourceStore
+    };
+}

package/dist/cjs/runtime/time-series-queries.js

@@ -123,7 +123,10 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
                 staleTime: Infinity,
                 queryKey: queryKey,
                 queryFn: async ({ signal })=>{
-                    const plugin = await getPlugin(TIME_SERIES_QUERY_KEY, definition.spec.plugin.kind);
+                    const plugin = await getPlugin({
+                        kind: TIME_SERIES_QUERY_KEY,
+                        name: definition.spec.plugin.kind
+                    });
                     const data = await plugin.getTimeSeriesData(definition.spec.plugin.spec, context, signal);
                     return data;
                 }

package/dist/cjs/runtime/trace-queries.js

@@ -60,7 +60,10 @@ function useTraceQueries(definitions) {
                 refetchOnReconnect: false,
                 staleTime: Infinity,
                 queryFn: async ({ signal })=>{
-                    const plugin = await getPlugin(TRACE_QUERY_KEY, traceQueryKind);
+                    const plugin = await getPlugin({
+                        kind: TRACE_QUERY_KEY,
+                        name: traceQueryKind
+                    });
                     const data = await plugin.getTraceData(definition.spec.plugin.spec, context, signal);
                     return data;
                 }

package/dist/cjs/test/mock-data.js

@@ -21,6 +21,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get MOCK_ALERTS_DATA () {
+        return MOCK_ALERTS_DATA;
+    },
     get MOCK_EMPTY_PLUGIN_MODULE () {
         return MOCK_EMPTY_PLUGIN_MODULE;
     },
@@ -45,6 +48,9 @@ _export(exports, {
     get MOCK_REMOTE_PLUGIN_MODULE () {
         return MOCK_REMOTE_PLUGIN_MODULE;
     },
+    get MOCK_SILENCES_DATA () {
+        return MOCK_SILENCES_DATA;
+    },
     get MOCK_TIME_SERIES_DATA () {
         return MOCK_TIME_SERIES_DATA;
     },
@@ -170,6 +176,51 @@ const MOCK_PROFILE_DATA = {
         name: 'cpu'
     }
 };
+const MOCK_ALERTS_DATA = {
+    alerts: [
+        {
+            id: 'abc123',
+            name: 'HighErrorRate',
+            state: 'firing',
+            labels: {
+                alertname: 'HighErrorRate',
+                severity: 'critical',
+                service: 'backend'
+            },
+            annotations: {
+                summary: 'High error rate detected'
+            },
+            severity: 'critical',
+            startsAt: '2024-01-01T00:00:00Z',
+            endsAt: '2024-01-02T00:00:00Z',
+            updatedAt: '2024-01-01T12:00:00Z',
+            receivers: [
+                'cluster-01'
+            ]
+        }
+    ]
+};
+const MOCK_SILENCES_DATA = {
+    silences: [
+        {
+            id: 'silence-1',
+            state: 'active',
+            matchers: [
+                {
+                    name: 'alertname',
+                    value: 'HighErrorRate',
+                    isRegex: false,
+                    isEqual: true
+                }
+            ],
+            startsAt: '2024-01-01T00:00:00Z',
+            endsAt: '2024-01-02T00:00:00Z',
+            createdBy: 'admin',
+            comment: 'Maintenance window',
+            updatedAt: '2024-01-01T00:00:00Z'
+        }
+    ]
+};
 const MOCK_VALID_PLUGIN_METADATA = {
     kind: 'Panel',
     spec: {

package/dist/cjs/test/test-plugins/bert/index.js

@@ -14,18 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get BertPanel1 () {
-        return BertPanel1;
-    },
-    get BertPanel2 () {
-        return BertPanel2;
+Object.defineProperty(exports, "plugins", {
+    enumerable: true,
+    get: function() {
+        return plugins;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -48,6 +40,7 @@ function BertPanel1Editor({ value, onChange }) {
         ]
     });
 }
+// Dummy plugins to test loading
 const BertPanel1 = {
     PanelComponent: ()=>null,
     panelOptionsEditorComponents: [
@@ -100,3 +93,7 @@ const BertPanel2 = {
         }),
     hideQueryEditor: true
 };
+const plugins = {
+    'Panel:BertPanel1::1.0.0': BertPanel1,
+    'Panel:BertPanel2::1.0.0': BertPanel2
+};

package/dist/cjs/test/test-plugins/ernie/index.js

@@ -14,18 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
-    });
-}
-_export(exports, {
-    get ErnieVariable1 () {
-        return ErnieVariable1;
-    },
-    get ErnieVariable2 () {
-        return ErnieVariable2;
+Object.defineProperty(exports, "plugins", {
+    enumerable: true,
+    get: function() {
+        return plugins;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -39,6 +31,7 @@ const data = [
         value: 'Snuffleupagus'
     }
 ];
+// Dummy plugin to test loading
 const ErnieVariable1 = {
     getVariableOptions: async ()=>({
             data
@@ -93,3 +86,7 @@ const ErnieVariable2 = {
             variableOption2: ''
         })
 };
+const plugins = {
+    'Variable:ErnieVariable1::1.0.0': ErnieVariable1,
+    'Variable:ErnieVariable2::1.0.0': ErnieVariable2
+};

package/dist/cjs/test/test-plugins/index.js

@@ -72,10 +72,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const testPluginLoader = (0, _model.dynamicImportPluginLoader)([
     {
         resource: _pluginjson.default,
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bert")))
+        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bert"))).then((m)=>m.plugins)
     },
     {
         resource: _pluginjson1.default,
-        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./ernie")))
+        importPlugin: ()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./ernie"))).then((m)=>m.plugins)
     }
 ]);

package/dist/cjs/test/utils.js

@@ -22,7 +22,6 @@ Object.defineProperty(exports, "getTestContextWrapper", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _reactquery = require("@tanstack/react-query");
-const _core = require("@perses-dev/core");
 const _components = require("../components");
 const _runtime = require("../runtime");
 const _testplugins = require("./test-plugins");
@@ -36,8 +35,9 @@ function getTestContextWrapper(contextOptions) {
             }
         }
     });
+    const DEFAULT_DASHBOARD_DURATION = '1h';
     const timeRange = {
-        start: new Date(Date.now() - Number(_core.DEFAULT_DASHBOARD_DURATION)),
+        start: new Date(Date.now() - Number(DEFAULT_DASHBOARD_DURATION)),
         end: new Date()
     };
     return function Wrapper({ children }) {

package/dist/cjs/test-utils/mock-plugin-registry.js

@@ -28,12 +28,13 @@ _export(exports, {
         return mockPluginRegistry;
     }
 });
+const _model = require("../model");
 function mockPluginRegistry(...mockPlugins) {
     const mockPluginResource = {
         kind: 'PluginModule',
         metadata: {
             name: 'Fake Plugin Module for Tests',
-            version: '0'
+            version: '1.0.0'
         },
         spec: {
             // Add metadata for all mock plugins
@@ -51,7 +52,12 @@ function mockPluginRegistry(...mockPlugins) {
     const mockPluginModule = {};
     for (const mockPlugin of mockPlugins){
         // "Export" on the module under the same name as the kind the plugin handles
-        mockPluginModule[mockPlugin.spec.name] = mockPlugin.plugin;
+        mockPluginModule[(0, _model.getPluginModuleCompoundKey)({
+            kind: mockPlugin.kind,
+            name: mockPlugin.spec.name,
+            registry: mockPluginResource.metadata.registry,
+            version: mockPluginResource.metadata.version
+        })] = mockPlugin.plugin;
     }
     const pluginLoader = {
         getInstalledPlugins () {

package/dist/cjs/utils/index.js

@@ -14,7 +14,6 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./action"), exports);
 _export_star(require("./event"), exports);
 _export_star(require("./variables"), exports);
 _export_star(require("./csv-export"), exports);

package/dist/components/CalculationSelector/CalculationSelector.d.ts

@@ -1,5 +1,5 @@
-import { CalculationType } from '@perses-dev/core';
 import { ReactElement } from 'react';
+import { CalculationType } from '../../model';
 export interface CalculationSelectorProps {
     value: CalculationType;
     onChange: (unit: CalculationType) => void;

package/dist/components/CalculationSelector/CalculationSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,EAA0C,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAUrC,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAuB/F"}
+{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA0C,eAAe,EAAE,MAAM,aAAa,CAAC;AAUtF,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAuB/F"}

package/dist/components/CalculationSelector/CalculationSelector.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // 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.
@@ -10,9 +11,8 @@
 // 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 { jsx as _jsx } from "react/jsx-runtime";
 import { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';
-import { CALCULATIONS_CONFIG } from '@perses-dev/core'; // TODO weird this is part of the model from the core package ...
+import { CALCULATIONS_CONFIG } from '../../model'; // TODO weird this is part of the model from the core package ...
 const CALC_OPTIONS = Object.entries(CALCULATIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,

package/dist/components/CalculationSelector/CalculationSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '@perses-dev/core'; // TODO weird this is part of the model from the core package ...\nimport { ReactElement } from 'react';\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps): ReactElement {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption): void => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <SettingsAutocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          onChange={handleCalculationChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","disableClearable"],"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;;AAEjC,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AACpF,SAASC,mBAAmB,QAA4C,mBAAmB,CAAC,iEAAiE;AAI7J,MAAMC,eAAgDC,OAAOC,OAAO,CAACH,qBAAqBI,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IACzG,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAOA,OAAO,SAASC,oBAAoB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IAC/E,MAAMC,0BAA0B,CAACC,GAAYC;QAC3CH,SAASG,SAASP,EAAE;IACtB;IAEA,MAAMQ,aAAab,mBAAmB,CAACQ,MAAM;IAE7C,qBACE,KAACV;QACCgB,OAAM;QACNC,uBACE,KAAChB;YACCS,OAAO;gBACL,GAAGK,UAAU;gBACbR,IAAIG;YACN;YACAQ,SAASf;YACTQ,UAAUC;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '../../model'; // TODO weird this is part of the model from the core package ...\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps): ReactElement {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption): void => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <SettingsAutocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          onChange={handleCalculationChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","disableClearable"],"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;AAEjC,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AAEpF,SAASC,mBAAmB,QAA4C,cAAc,CAAC,iEAAiE;AAGxJ,MAAMC,eAAgDC,OAAOC,OAAO,CAACH,qBAAqBI,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IACzG,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAOA,OAAO,SAASC,oBAAoB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IAC/E,MAAMC,0BAA0B,CAACC,GAAYC;QAC3CH,SAASG,SAASP,EAAE;IACtB;IAEA,MAAMQ,aAAab,mBAAmB,CAACQ,MAAM;IAE7C,qBACE,KAACV;QACCgB,OAAM;QACNC,uBACE,KAAChB;YACCS,OAAO;gBACL,GAAGK,UAAU;gBACbR,IAAIG;YACN;YACAQ,SAASf;YACTQ,UAAUC;YACVO,gBAAgB;;;AAK1B"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.d.ts

@@ -1,5 +1,6 @@
-import { Action, DatasourceDefinition } from '@perses-dev/core';
+import { Action } from '@perses-dev/components';
 import { DispatchWithoutAction, ReactElement } from 'react';
+import { DatasourceDefinition } from '@perses-dev/client';
 interface DatasourceEditorFormProps {
     initialDatasourceDefinition: DatasourceDefinition;
     action: Action;

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAMtE,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,CA8MnF"}
+{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,MAAM,EAGP,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAI1D,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,CA8MnF"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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.
@@ -10,14 +11,12 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';
-import { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';
+import { DiscardChangesConfirmationDialog, FormActions, getSubmitText, getTitleAction } from '@perses-dev/components';
 import { useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useValidationSchemas } from '../../context';
-import { getSubmitText, getTitleAction } from '../../utils';
 import { PluginEditor } from '../PluginEditor';
 export function DatasourceEditorForm(props) {
     const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;