npm - @perses-dev/plugin-system - Versions diffs - 0.52.0-beta.3 → 0.52.0-beta.4 - Mend

@perses-dev/plugin-system 0.52.0-beta.3 → 0.52.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/dist/cjs/components/DatasourceEditorForm/DatasourceEditorForm.js CHANGED Viewed

@@ -238,6 +238,7 @@ function DatasourceEditorForm(props) {
                                     'Datasource'
                                 ],
                                 pluginKindLabel: "Source",
+                                withRunQueryButton: false,
                                 value: {
                                     selection: {
                                         type: 'Datasource',

package/dist/cjs/components/MultiQueryEditor/QueryEditorContainer.js CHANGED Viewed

@@ -93,6 +93,7 @@ const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete,
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ...others,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+            withRunQueryButton: true,
             pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
             value: {

package/dist/cjs/components/PluginEditor/PluginEditor.js CHANGED Viewed

@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _Reload = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Reload"));
 const _components = require("@perses-dev/components");
+const _react = require("react");
 const _PluginKindSelect = require("../PluginKindSelect");
 const _PluginSpecEditor = require("../PluginSpecEditor");
 const _plugineditorapi = require("./plugin-editor-api");
@@ -34,8 +35,28 @@ function _interop_require_default(obj) {
 }
 function PluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = (0, _plugineditorapi.usePluginEditor)(props);
+    const [watchedQuery, setWatchQuery] = (0, _react.useState)(value.spec['query']);
+    const runQueryHandler = (0, _react.useCallback)(()=>{
+        onSpecChange({
+            ...value.spec,
+            query: watchedQuery
+        });
+    }, [
+        value.spec,
+        onSpecChange,
+        watchedQuery
+    ]);
+    let queryHandlerSettings = undefined;
+    if (withRunQueryButton) {
+        queryHandlerSettings = {
+            runWithOnBlur: false,
+            watchQueryChanges: (query)=>{
+                setWatchQuery(query);
+            }
+        };
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ...others,
         children: [
@@ -63,7 +84,8 @@ function PluginEditor(props) {
                         helperText: error?.message,
                         onChange: onSelectionChange
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    withRunQueryButton && !isLoading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                        "data-testid": "run_query_button",
                         variant: "contained",
                         sx: {
                             marginTop: 1.5,
@@ -72,7 +94,7 @@ function PluginEditor(props) {
                             marginLeft: 'auto'
                         },
                         startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Reload.default, {}),
-                        onClick: ()=>onSpecChange(value.spec),
+                        onClick: runQueryHandler,
                         children: "Run Query"
                     })
                 ]
@@ -83,7 +105,8 @@ function PluginEditor(props) {
                     pluginSelection: value.selection,
                     value: value.spec,
                     onChange: onSpecChange,
-                    isReadonly: isReadonly
+                    isReadonly: isReadonly,
+                    queryHandlerSettings: queryHandlerSettings
                 })
             })
         ]

package/dist/cjs/components/PluginSpecEditor/PluginSpecEditor.js CHANGED Viewed

@@ -22,6 +22,7 @@ Object.defineProperty(exports, "PluginSpecEditor", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
 const _runtime = require("../../runtime");
 function PluginSpecEditor(props) {
     const { pluginSelection: { type: pluginType, kind: pluginKind }, ...others } = props;
@@ -31,21 +32,24 @@ function PluginSpecEditor(props) {
             error: error
         });
     }
-    // TODO: Proper loading indicator
     if (isLoading) {
-        return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            width: "100%",
+            sx: {
+                alignItems: 'center',
+                justifyContent: 'center'
+            },
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
+        });
     }
-    if (plugin === undefined) {
+    if (!plugin) {
         throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);
     }
     if (pluginType === 'Panel') {
         throw new Error('This editor should not be used for panel type. Please use Panel Spec Editor instead.');
     }
     const { OptionsEditorComponent } = plugin;
-    if (OptionsEditorComponent !== undefined) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(OptionsEditorComponent, {
-            ...others
-        });
-    }
-    return null;
+    return OptionsEditorComponent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(OptionsEditorComponent, {
+        ...others
+    }) : null;
 }

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js CHANGED Viewed

@@ -207,6 +207,7 @@ function ListVariableEditorForm({ action, control }) {
                                     name: "spec.plugin",
                                     render: ({ field })=>{
                                         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+                                            withRunQueryButton: true,
                                             width: "100%",
                                             pluginTypes: [
                                                 'Variable'

package/dist/cjs/model/log-queries.js ADDED Viewed

@@ -0,0 +1,16 @@
+// Copyright 2025 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
+});

package/dist/cjs/runtime/DataQueriesProvider/DataQueriesProvider.js CHANGED Viewed

@@ -40,6 +40,7 @@ const _timeseriesqueries = require("../time-series-queries");
 const _tracequeries = require("../trace-queries");
 const _profilequeries = require("../profile-queries");
 const _UsageMetricsProvider = require("../UsageMetricsProvider");
+const _logqueries = require("../log-queries");
 const _model = require("./model");
 const DataQueriesContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useDataQueriesContext() {
@@ -86,20 +87,25 @@ function DataQueriesProvider(props) {
     const traceResults = (0, _tracequeries.useTraceQueries)(traceQueries);
     const profileQueries = queryDefinitions.filter((definition)=>definition.kind === 'ProfileQuery');
     const profileResults = (0, _profilequeries.useProfileQueries)(profileQueries);
+    const logQueries = queryDefinitions.filter((definition)=>definition.kind === 'LogQuery');
+    const logResults = (0, _logqueries.useLogQueries)(logQueries);
     const refetchAll = (0, _react.useCallback)(()=>{
         timeSeriesResults.forEach((result)=>result.refetch());
         traceResults.forEach((result)=>result.refetch());
         profileResults.forEach((result)=>result.refetch());
+        logResults.forEach((result)=>result.refetch());
     }, [
         timeSeriesResults,
         traceResults,
-        profileResults
+        profileResults,
+        logResults
     ]);
     const ctx = (0, _react.useMemo)(()=>{
         const mergedQueryResults = [
             ...(0, _model.transformQueryResults)(timeSeriesResults, timeSeriesQueries),
             ...(0, _model.transformQueryResults)(traceResults, traceQueries),
-            ...(0, _model.transformQueryResults)(profileResults, profileQueries)
+            ...(0, _model.transformQueryResults)(profileResults, profileQueries),
+            ...(0, _model.transformQueryResults)(logResults, logQueries)
         ];
         if (queryOptions?.enabled) {
             for (const result of mergedQueryResults){
@@ -126,6 +132,8 @@ function DataQueriesProvider(props) {
         traceResults,
         profileQueries,
         profileResults,
+        logQueries,
+        logResults,
         refetchAll,
         queryOptions?.enabled,
         usageMetrics

package/dist/cjs/runtime/DataQueriesProvider/model.js CHANGED Viewed

@@ -52,12 +52,16 @@ function useQueryType() {
     const { data: profileQueryPlugins, isLoading: isProfileQueryPluginLoading } = (0, _pluginregistry.useListPluginMetadata)([
         'ProfileQuery'
     ]);
+    const { data: logQueries, isLoading: isLogQueryPluginLoading } = (0, _pluginregistry.useListPluginMetadata)([
+        'LogQuery'
+    ]);
     // For example, `map: {"TimeSeriesQuery":["PrometheusTimeSeriesQuery"],"TraceQuery":["TempoTraceQuery"]}`
     const queryTypeMap = (0, _react.useMemo)(()=>{
         const map = {
             TimeSeriesQuery: [],
             TraceQuery: [],
-            ProfileQuery: []
+            ProfileQuery: [],
+            LogQuery: []
         };
         if (timeSeriesQueryPlugins) {
             timeSeriesQueryPlugins.forEach((plugin)=>{
@@ -74,11 +78,17 @@ function useQueryType() {
                 map[plugin.kind]?.push(plugin.spec.name);
             });
         }
+        if (logQueries) {
+            logQueries.forEach((plugin)=>{
+                map[plugin.kind]?.push(plugin.spec.name);
+            });
+        }
         return map;
     }, [
         timeSeriesQueryPlugins,
         traceQueryPlugins,
-        profileQueryPlugins
+        profileQueryPlugins,
+        logQueries
     ]);
     const getQueryType = (0, _react.useCallback)((pluginKind)=>{
         const isLoading = (pluginKind)=>{
@@ -89,8 +99,10 @@ function useQueryType() {
                     return isTraceQueryPluginLoading;
                 case 'PyroscopeProfileQuery':
                     return isProfileQueryPluginLoading;
+                case 'LokiLogQuery':
+                    return isLogQueryPluginLoading;
             }
-            return isTraceQueryPluginLoading || isTimeSeriesQueryLoading || isProfileQueryPluginLoading;
+            return isTraceQueryPluginLoading || isTimeSeriesQueryLoading || isProfileQueryPluginLoading || isLogQueryPluginLoading;
         };
         if (isLoading(pluginKind)) {
             return undefined;
@@ -105,7 +117,8 @@ function useQueryType() {
         queryTypeMap,
         isTimeSeriesQueryLoading,
         isTraceQueryPluginLoading,
-        isProfileQueryPluginLoading
+        isProfileQueryPluginLoading,
+        isLogQueryPluginLoading
     ]);
     return getQueryType;
 }

package/dist/cjs/runtime/RouterProvider.js CHANGED Viewed

@@ -82,7 +82,8 @@ const RouterContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
 function useRouterContext() {
     const ctx = (0, _react.useContext)(RouterContext);
     if (ctx === undefined) {
-        throw new Error('No RouterContext found. Did you forget a <RouterProvider>?');
+        console.warn('No RouterContext found. Did you forget a <RouterProvider>?');
+        return {};
     }
     return ctx;
 }

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

@@ -0,0 +1,68 @@
+// Copyright 2025 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: all[name]
+    });
+}
+_export(exports, {
+    LOG_QUERY_KEY: function() {
+        return LOG_QUERY_KEY;
+    },
+    useLogQueries: function() {
+        return useLogQueries;
+    }
+});
+const _reactquery = require("@tanstack/react-query");
+const _datasources = require("./datasources");
+const _pluginregistry = require("./plugin-registry");
+const _TimeRangeProvider = require("./TimeRangeProvider");
+const _variables = require("./variables");
+const LOG_QUERY_KEY = 'LogQuery';
+function useLogQueries(definitions) {
+    const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();
+    const variableValues = (0, _variables.useVariableValues)();
+    const context = {
+        timeRange: absoluteTimeRange,
+        variableState: variableValues,
+        datasourceStore,
+        refreshKey: ''
+    };
+    return (0, _reactquery.useQueries)({
+        queries: definitions.map((definition)=>{
+            const queryKey = [
+                definition,
+                datasourceStore,
+                absoluteTimeRange,
+                variableValues
+            ];
+            const logQueryKind = definition?.spec?.plugin?.kind;
+            return {
+                queryKey: queryKey,
+                queryFn: async ()=>{
+                    const plugin = await getPlugin(LOG_QUERY_KEY, logQueryKind);
+                    const data = await plugin.getLogData(definition.spec.plugin.spec, context);
+                    return data;
+                },
+                structuralSharing: false
+            };
+        })
+    });
+}

package/dist/cjs/runtime/variables.js CHANGED Viewed

@@ -27,6 +27,9 @@ _export(exports, {
     VariableStoreStateMap: function() {
         return VariableStoreStateMap;
     },
+    replaceVariablesInString: function() {
+        return replaceVariablesInString;
+    },
     useAllVariableValues: function() {
         return useAllVariableValues;
     },
@@ -137,6 +140,18 @@ function useAllVariableValues(names) {
         builtinVariableValues
     ]);
 }
+function replaceVariablesInString(text, variableValues, extraVariables) {
+    const vars = {
+        ...variableValues
+    }; // shallow clone to avoid modifying the original object
+    for (const [key, value] of Object.entries(extraVariables ?? {})){
+        vars[key] = {
+            value,
+            loading: false
+        };
+    }
+    return (0, _utils.replaceVariables)(text, vars);
+}
 function useReplaceVariablesInString(str) {
     const variablesInString = str ? (0, _utils.parseVariables)(str) : [];
     const variableValues = useAllVariableValues(variablesInString);

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

@@ -21,6 +21,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    MOCK_LOG_DATA: function() {
+        return MOCK_LOG_DATA;
+    },
     MOCK_PROFILE_DATA: function() {
         return MOCK_PROFILE_DATA;
     },
@@ -102,6 +105,27 @@ const MOCK_TRACE_DATA = {
         executedQueryString: '{ duration > 1000ms }'
     }
 };
+const MOCK_LOG_DATA = {
+    totalCount: 2,
+    entries: [
+        {
+            timestamp: 1666479357903,
+            line: 'Error: Something went wrong',
+            labels: {
+                level: 'error',
+                service: 'backend'
+            }
+        },
+        {
+            timestamp: 1666479382282,
+            line: 'Info: Request processed successfully',
+            labels: {
+                level: 'info',
+                service: 'frontend'
+            }
+        }
+    ]
+};
 const MOCK_PROFILE_DATA = {
     profile: {
         stackTrace: {

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

	@@ -1 +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,~~CA6MnF~~"}
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"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js CHANGED Viewed

@@ -228,6 +228,7 @@ export function DatasourceEditorForm(props) {
                                     'Datasource'
                                 ],
                                 pluginKindLabel: "Source",
+                                withRunQueryButton: false,
                                 value: {
                                     selection: {
                                         type: 'Datasource',

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"sourcesContent":["// Copyright 2023 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 { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';\nimport { Action, DatasourceDefinition } from '@perses-dev/core';\nimport { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { useValidationSchemas } from '../../context';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { PluginEditor } from '../PluginEditor';\n\ninterface DatasourceEditorFormProps {\n initialDatasourceDefinition: DatasourceDefinition;\n action: Action;\n isDraft: boolean;\n isReadonly?: boolean;\n onActionChange?: (action: Action) => void;\n onSave: (def: DatasourceDefinition) => void;\n onClose: DispatchWithoutAction;\n onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement {\n const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;\n\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n const titleAction = getTitleAction(action, isDraft);\n const submitText = getSubmitText(action, isDraft);\n\n const { datasourceEditorSchema } = useValidationSchemas();\n const form = useForm<DatasourceDefinition>({\n resolver: zodResolver(datasourceEditorSchema),\n mode: 'onBlur',\n defaultValues: initialDatasourceDefinition,\n });\n\n /\n Remove empty fields that are optional\n */\n function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n const result = { ...data };\n if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n delete result.spec.display;\n }\n return result;\n }\n\n const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n onSave(clearFormData(data));\n };\n\n // When user click on cancel, several possibilities:\n // - create action: ask for discard approval\n // - update action: ask for discard approval if changed\n // - read action: don´t ask for discard approval\n function handleCancel(): void {\n if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }\n\n return (\n <FormProvider {...form}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n <FormActions\n action={action}\n submitText={submitText}\n isReadonly={isReadonly}\n isValid={form.formState.isValid}\n onActionChange={onActionChange}\n onSubmit={form.handleSubmit(processForm)}\n onDelete={onDelete}\n onCancel={handleCancel}\n />\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n required\n fullWidth\n name=\"name\"\n label=\"Name\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n disabled: action === 'update' && !isDraft,\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"spec.display.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n name=\"title\"\n label=\"Display Label\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={12}>\n <Controller\n control={form.control}\n name=\"spec.display.description\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n name=\"description\"\n label=\"Description\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n <Stack>\n <Controller\n control={form.control}\n name=\"spec.default\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Set as default\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n <Typography variant=\"caption\">\n Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n </Typography>\n </Stack>\n </Grid>\n </Grid>\n <Divider />\n <Typography py={1} variant=\"h3\">\n Plugin Options\n </Typography>\n <Controller\n control={form.control}\n name=\"spec.plugin\"\n render={({ field }) => (\n <PluginEditor\n width=\"100%\"\n pluginTypes={['Datasource']}\n pluginKindLabel=\"Source\"\n value={{\n selection: {\n type: 'Datasource',\n kind: field.value.kind,\n },\n spec: field.value.spec,\n }}\n isReadonly={action === 'read'}\n onChange={(v) => {\n field.onChange({ kind: v.selection.kind, spec: v.spec });\n }}\n />\n )}\n />\n </Box>\n <DiscardChangesConfirmationDialog\n description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n isOpen={isDiscardDialogOpened}\n onCancel={() => setDiscardDialogOpened(false)}\n onDiscardChanges={() => {\n setDiscardDialogOpened(false);\n onClose();\n }}\n />\n </FormProvider>\n );\n}\n"],"names":["zodResolver","Box","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","DiscardChangesConfirmationDialog","FormActions","useState","Controller","FormProvider","useForm","useValidationSchemas","getSubmitText","getTitleAction","PluginEditor","DatasourceEditorForm","props","initialDatasourceDefinition","action","isDraft","isReadonly","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","disabled","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onDiscardChanges"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"sourcesContent":["// Copyright 2023 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 { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DiscardChangesConfirmationDialog, FormActions } from '@perses-dev/components';\nimport { Action, DatasourceDefinition } from '@perses-dev/core';\nimport { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { useValidationSchemas } from '../../context';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { PluginEditor } from '../PluginEditor';\n\ninterface DatasourceEditorFormProps {\n initialDatasourceDefinition: DatasourceDefinition;\n action: Action;\n isDraft: boolean;\n isReadonly?: boolean;\n onActionChange?: (action: Action) => void;\n onSave: (def: DatasourceDefinition) => void;\n onClose: DispatchWithoutAction;\n onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement {\n const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;\n\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n const titleAction = getTitleAction(action, isDraft);\n const submitText = getSubmitText(action, isDraft);\n\n const { datasourceEditorSchema } = useValidationSchemas();\n const form = useForm<DatasourceDefinition>({\n resolver: zodResolver(datasourceEditorSchema),\n mode: 'onBlur',\n defaultValues: initialDatasourceDefinition,\n });\n\n /\n Remove empty fields that are optional\n */\n function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n const result = { ...data };\n if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n delete result.spec.display;\n }\n return result;\n }\n\n const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n onSave(clearFormData(data));\n };\n\n // When user click on cancel, several possibilities:\n // - create action: ask for discard approval\n // - update action: ask for discard approval if changed\n // - read action: don´t ask for discard approval\n function handleCancel(): void {\n if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }\n\n return (\n <FormProvider {...form}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n <FormActions\n action={action}\n submitText={submitText}\n isReadonly={isReadonly}\n isValid={form.formState.isValid}\n onActionChange={onActionChange}\n onSubmit={form.handleSubmit(processForm)}\n onDelete={onDelete}\n onCancel={handleCancel}\n />\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={4}>\n <Controller\n control={form.control}\n name=\"name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n required\n fullWidth\n name=\"name\"\n label=\"Name\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n disabled: action === 'update' && !isDraft,\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n control={form.control}\n name=\"spec.display.name\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n name=\"title\"\n label=\"Display Label\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={12}>\n <Controller\n control={form.control}\n name=\"spec.display.description\"\n render={({ field, fieldState }) => (\n <TextField\n {...field}\n fullWidth\n name=\"description\"\n label=\"Description\"\n InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n InputProps={{\n readOnly: action === 'read',\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n value={field.value ?? ''}\n onChange={(event) => {\n field.onChange(event);\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n <Stack>\n <Controller\n control={form.control}\n name=\"spec.default\"\n render={({ field }) => (\n <FormControlLabel\n label=\"Set as default\"\n control={\n <Switch\n {...field}\n checked={!!field.value}\n readOnly={action === 'read'}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n }}\n />\n }\n />\n )}\n />\n <Typography variant=\"caption\">\n Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n </Typography>\n </Stack>\n </Grid>\n </Grid>\n <Divider />\n <Typography py={1} variant=\"h3\">\n Plugin Options\n </Typography>\n <Controller\n control={form.control}\n name=\"spec.plugin\"\n render={({ field }) => (\n <PluginEditor\n width=\"100%\"\n pluginTypes={['Datasource']}\n pluginKindLabel=\"Source\"\n withRunQueryButton={false}\n value={{\n selection: {\n type: 'Datasource',\n kind: field.value.kind,\n },\n spec: field.value.spec,\n }}\n isReadonly={action === 'read'}\n onChange={(v) => {\n field.onChange({ kind: v.selection.kind, spec: v.spec });\n }}\n />\n )}\n />\n </Box>\n <DiscardChangesConfirmationDialog\n description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n isOpen={isDiscardDialogOpened}\n onCancel={() => setDiscardDialogOpened(false)}\n onDiscardChanges={() => {\n setDiscardDialogOpened(false);\n onClose();\n }}\n />\n </FormProvider>\n );\n}\n"],"names":["zodResolver","Box","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","DiscardChangesConfirmationDialog","FormActions","useState","Controller","FormProvider","useForm","useValidationSchemas","getSubmitText","getTitleAction","PluginEditor","DatasourceEditorForm","props","initialDatasourceDefinition","action","isDraft","isReadonly","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","disabled","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","withRunQueryButton","selection","type","v","isOpen","onDiscardChanges"],"mappings":"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"}

package/dist/components/MultiQueryEditor/QueryEditorContainer.js CHANGED Viewed

@@ -89,6 +89,7 @@ import { PluginEditor } from '../PluginEditor';
     return /*#__PURE__*/ _jsx(Box, {
         ...others,
         children: /*#__PURE__*/ _jsx(PluginEditor, {
+            withRunQueryButton: true,
             pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
             value: {

package/dist/components/MultiQueryEditor/QueryEditorContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 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 { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { ReactElement } from 'react';\nimport { PluginEditor, PluginEditorProps } from '../PluginEditor';\n\n/*\n Properties for {@link QueryEditorContainer}\n /\ninterface QueryEditorContainerProps {\n queryTypes: QueryPluginType[];\n index: number;\n query: QueryDefinition;\n onChange: (index: number, query: QueryDefinition) => void;\n onCollapseExpand: (index: number) => void;\n isCollapsed?: boolean;\n onDelete?: (index: number) => void;\n}\n\n/\n Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n /\nexport const QueryEditorContainer = ({\n queryTypes,\n index,\n query,\n isCollapsed,\n onDelete,\n onChange,\n onCollapseExpand,\n}: QueryEditorContainerProps): ReactElement => {\n return (\n <Stack key={index} spacing={1}>\n <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\n <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n </IconButton>\n <Typography variant=\"overline\" component=\"h4\">\n Query #{index + 1}\n </Typography>\n <IconButton\n size=\"small\"\n // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n onClick={() => onDelete && onDelete(index)}\n >\n <DeleteIcon />\n </IconButton>\n </Stack>\n {!isCollapsed && <QueryEditor queryTypes={queryTypes} value={query} onChange={(next) => onChange(index, next)} />}\n </Stack>\n );\n};\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' \| 'value' \| 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n queryTypes: QueryPluginType[];\n value: QueryDefinition;\n onChange: (next: QueryDefinition) => void;\n}\n\n/\n Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\nfunction QueryEditor(props: QueryEditorProps): ReactElement {\n const { value, onChange, queryTypes, ...others } = props;\n\n const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n onChange(\n produce(value, (draft) => {\n draft.kind = next.selection.type;\n draft.spec.plugin.kind = next.selection.kind;\n draft.spec.plugin.spec = next.spec;\n })\n );\n };\n\n return (\n <Box {...others}>\n <PluginEditor\n pluginTypes={queryTypes}\n pluginKindLabel=\"Query Type\"\n value={{\n selection: {\n kind: value.spec.plugin.kind,\n type: value.kind,\n },\n spec: value.spec.plugin.spec,\n }}\n onChange={handlePluginChange}\n />\n </Box>\n );\n}\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","PluginEditor","QueryEditorContainer","queryTypes","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","props","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AAExD,SAASC,YAAY,QAA2B,kBAAkB;AAelE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,gBAAgB,EACU;IAC1B,qBACE,MAACf;QAAkBgB,SAAS;;0BAC1B,MAAChB;gBAAMiB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAACtB;wBAAWuB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACN,kCAAkB,KAACD;;kCAErC,MAACH;wBAAWwB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACpCjB,QAAQ;;;kCAElB,KAACT;wBACCuB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,GAAGjB,WAAW,YAAY,UAAU;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACN;;;;YAGJ,CAACQ,6BAAe,KAACmB;gBAAYtB,YAAYA;gBAAYuB,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjB9FvB;AAoBhB,EAAE;AAWF;;;;;;CAMC,GACD,SAASqB,YAAYG,KAAuB;IAC1C,MAAM,EAAEF,KAAK,EAAElB,QAAQ,EAAEL,UAAU,EAAE,GAAG0B,QAAQ,GAAGD;IAEnD,MAAME,qBAAoD,CAACH;QACzDnB,SACEf,QAAQiC,OAAO,CAACK;YACdA,MAAMC,IAAI,GAAGL,KAAKM,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGL,KAAKM,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGR,KAAKQ,IAAI;QACpC;IAEJ;IAEA,qBACE,KAACtC;QAAK,GAAGgC,MAAM;kBACb,cAAA,KAAC5B;YACCoC,~~aAAalC~~;~~YACbmC~~,iBAAgB;~~YAChBZ~~,OAAO;gBACLO,WAAW;oBACTD,MAAMN,MAAMS,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMR,MAAMM,IAAI;gBAClB;gBACAG,MAAMT,MAAMS,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA3B,UAAUsB;;;AAIlB"}
1	+ {"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 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 { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { ReactElement } from 'react';\nimport { PluginEditor, PluginEditorProps } from '../PluginEditor';\n\n/*\n Properties for {@link QueryEditorContainer}\n /\ninterface QueryEditorContainerProps {\n queryTypes: QueryPluginType[];\n index: number;\n query: QueryDefinition;\n onChange: (index: number, query: QueryDefinition) => void;\n onCollapseExpand: (index: number) => void;\n isCollapsed?: boolean;\n onDelete?: (index: number) => void;\n}\n\n/\n Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n /\nexport const QueryEditorContainer = ({\n queryTypes,\n index,\n query,\n isCollapsed,\n onDelete,\n onChange,\n onCollapseExpand,\n}: QueryEditorContainerProps): ReactElement => {\n return (\n <Stack key={index} spacing={1}>\n <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\n <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n </IconButton>\n <Typography variant=\"overline\" component=\"h4\">\n Query #{index + 1}\n </Typography>\n <IconButton\n size=\"small\"\n // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n onClick={() => onDelete && onDelete(index)}\n >\n <DeleteIcon />\n </IconButton>\n </Stack>\n {!isCollapsed && <QueryEditor queryTypes={queryTypes} value={query} onChange={(next) => onChange(index, next)} />}\n </Stack>\n );\n};\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' \| 'value' \| 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n queryTypes: QueryPluginType[];\n value: QueryDefinition;\n onChange: (next: QueryDefinition) => void;\n}\n\n/\n Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\nfunction QueryEditor(props: QueryEditorProps): ReactElement {\n const { value, onChange, queryTypes, ...others } = props;\n\n const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n onChange(\n produce(value, (draft) => {\n draft.kind = next.selection.type;\n draft.spec.plugin.kind = next.selection.kind;\n draft.spec.plugin.spec = next.spec;\n })\n );\n };\n\n return (\n <Box {...others}>\n <PluginEditor\n withRunQueryButton\n pluginTypes={queryTypes}\n pluginKindLabel=\"Query Type\"\n value={{\n selection: {\n kind: value.spec.plugin.kind,\n type: value.kind,\n },\n spec: value.spec.plugin.spec,\n }}\n onChange={handlePluginChange}\n />\n </Box>\n );\n}\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","PluginEditor","QueryEditorContainer","queryTypes","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","props","others","handlePluginChange","draft","kind","selection","type","spec","plugin","withRunQueryButton","pluginTypes","pluginKindLabel"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AAExD,SAASC,YAAY,QAA2B,kBAAkB;AAelE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,gBAAgB,EACU;IAC1B,qBACE,MAACf;QAAkBgB,SAAS;;0BAC1B,MAAChB;gBAAMiB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAACtB;wBAAWuB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACN,kCAAkB,KAACD;;kCAErC,MAACH;wBAAWwB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACpCjB,QAAQ;;;kCAElB,KAACT;wBACCuB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,GAAGjB,WAAW,YAAY,UAAU;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACN;;;;YAGJ,CAACQ,6BAAe,KAACmB;gBAAYtB,YAAYA;gBAAYuB,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjB9FvB;AAoBhB,EAAE;AAWF;;;;;;CAMC,GACD,SAASqB,YAAYG,KAAuB;IAC1C,MAAM,EAAEF,KAAK,EAAElB,QAAQ,EAAEL,UAAU,EAAE,GAAG0B,QAAQ,GAAGD;IAEnD,MAAME,qBAAoD,CAACH;QACzDnB,SACEf,QAAQiC,OAAO,CAACK;YACdA,MAAMC,IAAI,GAAGL,KAAKM,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGL,KAAKM,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGR,KAAKQ,IAAI;QACpC;IAEJ;IAEA,qBACE,KAACtC;QAAK,GAAGgC,MAAM;kBACb,cAAA,KAAC5B;YACCoC,kBAAkB;YAClBC,aAAanC;YACboC,iBAAgB;YAChBb,OAAO;gBACLO,WAAW;oBACTD,MAAMN,MAAMS,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMR,MAAMM,IAAI;gBAClB;gBACAG,MAAMT,MAAMS,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA3B,UAAUsB;;;AAIlB"}

package/dist/components/PluginEditor/PluginEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,~~EAAE~~,MAAM,OAAO,CAAC;~~AAGrC~~,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,~~CAyCnE~~"}
1	+ {"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA8DnE"}

package/dist/components/PluginEditor/PluginEditor.js CHANGED Viewed

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button } from '@mui/material';
 import Reload from 'mdi-material-ui/Reload';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { useCallback, useState } from 'react';
 import { PluginKindSelect } from '../PluginKindSelect';
 import { PluginSpecEditor } from '../PluginSpecEditor';
 import { usePluginEditor } from './plugin-editor-api';
@@ -26,8 +27,28 @@ import { usePluginEditor } from './plugin-editor-api';
  * `usePluginEditor` hook that powers this component.
  */ export function PluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);
+    const [watchedQuery, setWatchQuery] = useState(value.spec['query']);
+    const runQueryHandler = useCallback(()=>{
+        onSpecChange({
+            ...value.spec,
+            query: watchedQuery
+        });
+    }, [
+        value.spec,
+        onSpecChange,
+        watchedQuery
+    ]);
+    let queryHandlerSettings = undefined;
+    if (withRunQueryButton) {
+        queryHandlerSettings = {
+            runWithOnBlur: false,
+            watchQueryChanges: (query)=>{
+                setWatchQuery(query);
+            }
+        };
+    }
     return /*#__PURE__*/ _jsxs(Box, {
         ...others,
         children: [
@@ -55,7 +76,8 @@ import { usePluginEditor } from './plugin-editor-api';
                         helperText: error?.message,
                         onChange: onSelectionChange
                     }),
-                    /*#__PURE__*/ _jsx(Button, {
+                    withRunQueryButton && !isLoading && /*#__PURE__*/ _jsx(Button, {
+                        "data-testid": "run_query_button",
                         variant: "contained",
                         sx: {
                             marginTop: 1.5,
@@ -64,7 +86,7 @@ import { usePluginEditor } from './plugin-editor-api';
                             marginLeft: 'auto'
                         },
                         startIcon: /*#__PURE__*/ _jsx(Reload, {}),
-                        onClick: ()=>onSpecChange(value.spec),
+                        onClick: runQueryHandler,
                         children: "Run Query"
                     })
                 ]
@@ -75,7 +97,8 @@ import { usePluginEditor } from './plugin-editor-api';
                     pluginSelection: value.selection,
                     value: value.spec,
                     onChange: onSpecChange,
-                    isReadonly: isReadonly
+                    isReadonly: isReadonly,
+                    queryHandlerSettings: queryHandlerSettings
                 })
             })
         ]