npm - @perses-dev/plugin-system - Versions diffs - 0.44.0 → 0.45.0-rc1 - Mend

@perses-dev/plugin-system 0.44.0 → 0.45.0-rc1

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 (129) hide show

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js ADDED Viewed

@@ -0,0 +1,192 @@
+// Copyright 2023 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, {
+    DEFAULT_REFRESH_INTERVAL_OPTIONS: function() {
+        return DEFAULT_REFRESH_INTERVAL_OPTIONS;
+    },
+    DEFAULT_TIME_RANGE_OPTIONS: function() {
+        return DEFAULT_TIME_RANGE_OPTIONS;
+    },
+    TimeRangeControls: function() {
+        return TimeRangeControls;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _Refresh = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Refresh"));
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _react = require("react");
+const _constants = require("../../constants");
+const _runtime = require("../../runtime");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DEFAULT_TIME_RANGE_OPTIONS = [
+    {
+        value: {
+            pastDuration: '5m'
+        },
+        display: 'Last 5 minutes'
+    },
+    {
+        value: {
+            pastDuration: '15m'
+        },
+        display: 'Last 15 minutes'
+    },
+    {
+        value: {
+            pastDuration: '30m'
+        },
+        display: 'Last 30 minutes'
+    },
+    {
+        value: {
+            pastDuration: '1h'
+        },
+        display: 'Last 1 hour'
+    },
+    {
+        value: {
+            pastDuration: '6h'
+        },
+        display: 'Last 6 hours'
+    },
+    {
+        value: {
+            pastDuration: '12h'
+        },
+        display: 'Last 12 hours'
+    },
+    {
+        value: {
+            pastDuration: '24h'
+        },
+        display: 'Last 1 day'
+    },
+    {
+        value: {
+            pastDuration: '7d'
+        },
+        display: 'Last 7 days'
+    },
+    {
+        value: {
+            pastDuration: '14d'
+        },
+        display: 'Last 14 days'
+    }
+];
+const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
+    {
+        value: {
+            pastDuration: '0s'
+        },
+        display: 'Off'
+    },
+    {
+        value: {
+            pastDuration: '5s'
+        },
+        display: '5s'
+    },
+    {
+        value: {
+            pastDuration: '10s'
+        },
+        display: '10s'
+    },
+    {
+        value: {
+            pastDuration: '15s'
+        },
+        display: '15s'
+    },
+    {
+        value: {
+            pastDuration: '30s'
+        },
+        display: '30s'
+    },
+    {
+        value: {
+            pastDuration: '60s'
+        },
+        display: '1m'
+    }
+];
+const DEFAULT_HEIGHT = '34px';
+function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, timePresets = DEFAULT_TIME_RANGE_OPTIONS }) {
+    const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = (0, _runtime.useTimeRange)();
+    // Convert height to a string, then use the string for styling
+    const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
+    // add time preset if one does not match duration given in time range
+    if ('pastDuration' in timeRange && !timePresets.some((option)=>option.value.pastDuration === timeRange['pastDuration'])) {
+        timePresets.push({
+            value: {
+                pastDuration: timeRange['pastDuration']
+            },
+            display: `Last ${timeRange['pastDuration']}`
+        });
+    }
+    // set the new refresh interval both in the dashboard context & as query param
+    const handleRefreshIntervalChange = (0, _react.useCallback)((duration)=>{
+        setRefreshInterval(duration);
+    }, [
+        setRefreshInterval
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            showTimeRangeSelector && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.DateTimeRangePicker, {
+                timeOptions: timePresets,
+                value: timeRange,
+                onChange: setTimeRange,
+                height: height
+            }),
+            showRefreshButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.refresh,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
+                    "aria-label": _constants.TOOLTIP_TEXT.refresh,
+                    onClick: refresh,
+                    sx: {
+                        height
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Refresh.default, {})
+                })
+            }),
+            showRefreshInterval && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.refreshInterval,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.RefreshIntervalPicker, {
+                    timeOptions: DEFAULT_REFRESH_INTERVAL_OPTIONS,
+                    value: refreshInterval,
+                    onChange: handleRefreshIntervalChange,
+                    height: height
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/{TraceQueryEditor → TimeRangeControls}/index.js RENAMED Viewed

@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./TraceQueryEditor"), exports);
+_export_star(require("./TimeRangeControls"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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

@@ -448,14 +448,26 @@ function VariableEditorForm(props) {
                                                 name: "listVariableFields.plugin",
                                                 render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
                                                         width: "100%",
-                                                        pluginType: "Variable",
+                                                        pluginTypes: [
+                                                            'Variable'
+                                                        ],
                                                         pluginKindLabel: "Source",
                                                         isReadonly: action === 'read',
-                                                        value: state.listVariableFields.plugin,
+                                                        value: {
+                                                            selection: {
+                                                                kind: state.listVariableFields.plugin.kind,
+                                                                type: 'Variable'
+                                                            },
+                                                            spec: state.listVariableFields.plugin.spec
+                                                        },
                                                         onChange: (val)=>{
-                                                            field.onChange(val);
+                                                            field.onChange({
+                                                                spec: val.spec,
+                                                                kind: val.selection.kind
+                                                            });
                                                             setState((draft)=>{
-                                                                draft.listVariableFields.plugin = val;
+                                                                draft.listVariableFields.plugin.kind = val.selection.kind;
+                                                                draft.listVariableFields.plugin.spec = val.spec;
                                                             });
                                                         }
                                                     })

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

@@ -18,6 +18,7 @@ _export_star(require("./CalculationSelector"), exports);
 _export_star(require("./DatasourceEditorForm"), exports);
 _export_star(require("./DatasourceSelect"), exports);
 _export_star(require("./LegendOptionsEditor"), exports);
+_export_star(require("./MultiQueryEditor"), exports);
 _export_star(require("./OptionsEditorRadios"), exports);
 _export_star(require("./OptionsEditorTabs"), exports);
 _export_star(require("./PanelSpecEditor"), exports);
@@ -25,7 +26,7 @@ _export_star(require("./PluginEditor"), exports);
 _export_star(require("./PluginKindSelect"), exports);
 _export_star(require("./PluginRegistry"), exports);
 _export_star(require("./PluginSpecEditor"), exports);
-_export_star(require("./TimeSeriesQueryEditor"), exports);
+_export_star(require("./TimeRangeControls"), exports);
 _export_star(require("./Variables"), exports);
 _export_star(require("./ProjectSelect"), exports);
 function _export_star(from, to) {

package/dist/cjs/constants/user-interface-text.js CHANGED Viewed

@@ -23,5 +23,8 @@ Object.defineProperty(exports, "TOOLTIP_TEXT", {
 const TOOLTIP_TEXT = {
     // Variable editor buttons
     refreshVariableValues: 'Refresh values',
-    copyVariableValues: 'Copy values to clipboard'
+    copyVariableValues: 'Copy values to clipboard',
+    // Time range controls buttons
+    refresh: 'Refresh',
+    refreshInterval: 'Auto refresh interval'
 };

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

@@ -43,8 +43,12 @@ function transformQueryResults(results, definitions) {
     });
 }
 function useQueryType() {
-    const { data: timeSeriesQueryPlugins, isLoading: isTimeSeriesQueryLoading } = (0, _pluginregistry.useListPluginMetadata)('TimeSeriesQuery');
-    const { data: traceQueryPlugins, isLoading: isTraceQueryPluginLoading } = (0, _pluginregistry.useListPluginMetadata)('TraceQuery');
+    const { data: timeSeriesQueryPlugins, isLoading: isTimeSeriesQueryLoading } = (0, _pluginregistry.useListPluginMetadata)([
+        'TimeSeriesQuery'
+    ]);
+    const { data: traceQueryPlugins, isLoading: isTraceQueryPluginLoading } = (0, _pluginregistry.useListPluginMetadata)([
+        'TraceQuery'
+    ]);
     // For example, `map: {"TimeSeriesQuery":["PrometheusTimeSeriesQuery"],"TraceQuery":["TempoTraceQuery"]}`
     const queryTypeMap = (0, _react.useMemo)(()=>{
         const map = {

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

@@ -27,6 +27,9 @@ _export(exports, {
     TimeRangeProvider: function() {
         return TimeRangeProvider;
     },
+    useSuggestedStepMs: function() {
+        return useSuggestedStepMs;
+    },
     useTimeRange: function() {
         return useTimeRange;
     },
@@ -90,6 +93,11 @@ function useTimeRangeContext() {
 function useTimeRange() {
     return useTimeRangeContext();
 }
+function useSuggestedStepMs(width) {
+    const { absoluteTimeRange } = useTimeRange();
+    if (width === undefined) return 0;
+    return (0, _core.getSuggestedStepMs)(absoluteTimeRange, width);
+}
 function TimeRangeProvider(props) {
     const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
     const [localTimeRange, setLocalTimeRange] = (0, _react.useState)(timeRange);
@@ -111,6 +119,18 @@ function TimeRangeProvider(props) {
     }, [
         setRefreshCounter
     ]);
+    const refreshIntervalInMs = (0, _refreshinterval.getRefreshIntervalInMs)(localRefreshInterval);
+    (0, _react.useEffect)(()=>{
+        if (refreshIntervalInMs > 0) {
+            const interval = setInterval(()=>{
+                refresh();
+            }, refreshIntervalInMs);
+            return ()=>clearInterval(interval);
+        }
+    }, [
+        refresh,
+        refreshIntervalInMs
+    ]);
     const ctx = (0, _react.useMemo)(()=>{
         const absoluteTimeRange = (0, _core.isRelativeTimeRange)(localTimeRange) ? (0, _core.toAbsoluteTimeRange)(localTimeRange) : localTimeRange;
         return {
@@ -120,15 +140,16 @@ function TimeRangeProvider(props) {
             refresh,
             refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${localRefreshInterval}:${refreshCounter}`,
             refreshInterval: localRefreshInterval,
-            refreshIntervalInMs: (0, _refreshinterval.getRefreshIntervalInMs)(localRefreshInterval),
+            refreshIntervalInMs: refreshIntervalInMs,
             setRefreshInterval: setRefreshInterval !== null && setRefreshInterval !== void 0 ? setRefreshInterval : setLocalRefreshInterval
         };
     }, [
         localTimeRange,
         setTimeRange,
         refresh,
-        refreshCounter,
         localRefreshInterval,
+        refreshCounter,
+        refreshIntervalInMs,
         setRefreshInterval
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeRangeContext.Provider, {

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

@@ -55,7 +55,7 @@ function usePlugin(pluginType, kind, options) {
     // We never want to ask for a plugin when the kind isn't set yet, so disable those queries automatically
     options = {
         ...options,
-        enabled: ((_options_enabled = options === null || options === void 0 ? void 0 : options.enabled) !== null && _options_enabled !== void 0 ? _options_enabled : true) && kind !== ''
+        enabled: ((_options_enabled = options === null || options === void 0 ? void 0 : options.enabled) !== null && _options_enabled !== void 0 ? _options_enabled : true) && pluginType !== undefined && kind !== ''
     };
     const { getPlugin } = usePluginRegistry();
     return (0, _reactquery.useQuery)([
@@ -79,19 +79,21 @@ function usePlugins(pluginType, plugins) {
         })
     });
 }
-function useListPluginMetadata(pluginType, options) {
+function useListPluginMetadata(pluginTypes, options) {
     const { listPluginMetadata } = usePluginRegistry();
     return (0, _reactquery.useQuery)([
         'listPluginMetadata',
-        pluginType
-    ], ()=>listPluginMetadata(pluginType), options);
+        pluginTypes
+    ], ()=>listPluginMetadata(pluginTypes), options);
 }
 function usePluginBuiltinVariableDefinitions() {
     const { getPlugin, listPluginMetadata } = usePluginRegistry();
     return (0, _reactquery.useQuery)([
         'usePluginBuiltinVariableDefinitions'
     ], async ()=>{
-        const datasources = await listPluginMetadata('Datasource');
+        const datasources = await listPluginMetadata([
+            'Datasource'
+        ]);
         const datasourceKinds = new Set(datasources.map((datasource)=>datasource.kind));
         const result = [];
         for (const kind of datasourceKinds){

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

@@ -95,7 +95,6 @@ const useTimeSeriesQuery = (definition, options, queryOptions)=>{
     return (0, _reactquery.useQuery)({
         enabled: ((_queryOptions_enabled = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled) !== null && _queryOptions_enabled !== void 0 ? _queryOptions_enabled : true) || queryEnabled,
         queryKey: queryKey,
-        refetchInterval: context.refreshIntervalInMs > 0 ? context.refreshIntervalInMs : false,
         queryFn: ()=>{
             // The 'enabled' option should prevent this from happening, but make TypeScript happy by checking
             if (plugin === undefined) {
@@ -129,7 +128,6 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
             return {
                 enabled: ((_queryOptions_enabled = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.enabled) !== null && _queryOptions_enabled !== void 0 ? _queryOptions_enabled : true) && queryEnabled,
                 queryKey: queryKey,
-                refetchInterval: context.refreshIntervalInMs > 0 ? context.refreshIntervalInMs : undefined,
                 queryFn: async ()=>{
                     // Keep options out of query key so we don't re-run queries because suggested step changes
                     const ctx = {
@@ -147,15 +145,14 @@ function useTimeSeriesQueries(definitions, options, queryOptions) {
 /**
  * Build the time series query context object from data available at runtime
  */ function useTimeSeriesQueryContext() {
-    const { absoluteTimeRange, refreshKey, refreshIntervalInMs } = (0, _TimeRangeProvider.useTimeRange)();
+    const { absoluteTimeRange, refreshKey } = (0, _TimeRangeProvider.useTimeRange)();
     const variableState = (0, _templatevariables.useVariableValues)();
     const datasourceStore = (0, _datasources.useDatasourceStore)();
     return {
         timeRange: absoluteTimeRange,
         variableState,
         datasourceStore,
-        refreshKey,
-        refreshIntervalInMs: refreshIntervalInMs
+        refreshKey
     };
 }
 function useActiveTimeSeriesQueries() {

package/dist/cjs/validation/resource.js CHANGED Viewed

@@ -21,4 +21,4 @@ Object.defineProperty(exports, "resourceIdValidationSchema", {
     }
 });
 const _zod = require("zod");
-const resourceIdValidationSchema = _zod.z.string().nonempty('Required').max(75, 'Must be 75 or fewer characters long').regex(/^[a-zA-Z0-9_.-]+$/, 'Must only contains alphanumerical characters and special characters _ . -');
+const resourceIdValidationSchema = _zod.z.string().min(1, 'Required').max(75, 'Must be 75 or fewer characters long').regex(/^[a-zA-Z0-9_.-]+$/, 'Must only contains alphanumerical characters and special characters _ . -');

package/dist/cjs/validation/user.js ADDED Viewed

@@ -0,0 +1,46 @@
+// Copyright 2023 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, "userEditorValidationSchema", {
+    enumerable: true,
+    get: function() {
+        return userEditorValidationSchema;
+    }
+});
+const _zod = require("zod");
+const _resource = require("./resource");
+const nativeProviderSchema = _zod.z.object({
+    password: _zod.z.string().optional()
+});
+const oauthProvidersSchema = _zod.z.object({
+    issuer: _zod.z.string().optional(),
+    email: _zod.z.string().optional(),
+    subject: _zod.z.string().optional()
+});
+// TODO: handle exclusion native / oauth?
+const userSpecSchema = _zod.z.object({
+    firstName: _zod.z.string().optional(),
+    lastName: _zod.z.string().optional(),
+    nativeProvider: nativeProviderSchema.optional(),
+    oauthProviders: _zod.z.array(oauthProvidersSchema).optional()
+});
+const userEditorValidationSchema = _zod.z.object({
+    kind: _zod.z.literal('User'),
+    metadata: _zod.z.object({
+        name: _resource.resourceIdValidationSchema
+    }),
+    spec: userSpecSchema
+});

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":"AAcA,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,qBAAqB,EAAyB,MAAM,OAAO,CAAC;AA2BrE,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,~~2CAwOpE~~"}
1	+ {"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEhF,OAAO,EAAE,qBAAqB,EAAyB,MAAM,OAAO,CAAC;AA2BrE,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CA+OpE"}

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

@@ -314,13 +314,22 @@ export function DatasourceEditorForm(props) {
                     }),
                     /*#__PURE__*/ _jsx(PluginEditor, {
                         width: "100%",
-                        pluginType: "Datasource",
+                        pluginTypes: [
+                            'Datasource'
+                        ],
                         pluginKindLabel: "Source",
-                        value: state.spec.plugin,
+                        value: {
+                            selection: {
+                                kind: state.spec.plugin.kind,
+                                type: 'Datasource'
+                            },
+                            spec: state.spec.plugin.spec
+                        },
                         isReadonly: action === 'read',
                         onChange: (v)=>{
                             setState((draft)=>{
-                                draft.spec.plugin = v;
+                                draft.spec.plugin.kind = v.selection.kind;
+                                draft.spec.plugin.spec = v.spec;
                             });
                         }
                     })

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 { useImmer } from 'use-immer';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DispatchWithoutAction, useCallback, useState } from 'react';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { datasourceEditValidationSchema, DatasourceEditValidationType } from '../../validation';\n\n/*\n This preprocessing ensures that we always have a defined object for the `display` property\n * @param datasource\n */\nfunction getInitialState(datasourceDefinition: DatasourceDefinition) {\n const patchedDisplay = {\n name: datasourceDefinition.spec.display?.name ?? '',\n description: datasourceDefinition.spec.display?.description ?? '',\n };\n\n return {\n name: datasourceDefinition.name,\n spec: {\n ...datasourceDefinition.spec,\n display: patchedDisplay,\n },\n };\n}\n\ninterface DatasourceEditorFormProps {\n initialDatasourceDefinition: DatasourceDefinition;\n initialAction: Action;\n isDraft: boolean;\n isReadonly?: boolean;\n onSave: (name: string, spec: DatasourceSpec) => void;\n onClose: DispatchWithoutAction;\n onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps) {\n const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n const initialState = getInitialState(initialDatasourceDefinition);\n const [state, setState] = useImmer(initialState);\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n const [action, setAction] = useState(initialAction);\n const titleAction = getTitleAction(action, isDraft);\n const submitText = getSubmitText(action, isDraft);\n\n const form = useForm<DatasourceEditValidationType>({\n resolver: zodResolver(datasourceEditValidationSchema),\n mode: 'onBlur',\n defaultValues: {\n name: state.name,\n title: state.spec.display?.name,\n description: state.spec.display?.description,\n default: state.spec.default,\n },\n });\n\n const processForm: SubmitHandler<DatasourceEditValidationType> = () => {\n // reset display attributes to undefined when empty, because we don't want to save empty strings\n onSave(state.name, {\n ...state.spec,\n display: {\n name: state.spec.display?.name === '' ? undefined : state.spec.display?.name,\n description: state.spec.display?.description === '' ? undefined : state.spec.display?.description,\n },\n });\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 const handleCancel = useCallback(() => {\n if (JSON.stringify(initialState) !== JSON.stringify(state)) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }, [state, initialState, setDiscardDialogOpened, onClose]);\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 <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n {action === 'read' ? (\n <>\n <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n Edit\n </Button>\n <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n Delete\n </Button>\n <Divider\n orientation=\"vertical\"\n flexItem\n sx={(theme) => ({\n borderColor: theme.palette.grey['500'],\n '&.MuiDivider-root': {\n marginLeft: 2,\n marginRight: 1,\n },\n })}\n />\n <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n Close\n </Button>\n </>\n ) : (\n <>\n <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n {submitText}\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </>\n )}\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={4}>\n <Controller\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 onChange={(event) => {\n field.onChange(event);\n setState((draft) => {\n draft.name = event.target.value;\n });\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n name=\"title\"\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 onChange={(event) => {\n setState((draft) => {\n field.onChange(event);\n if (draft.spec.display) {\n draft.spec.display.name = event.target.value;\n }\n });\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={12}>\n <Controller\n name=\"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 onChange={(event) => {\n field.onChange(event);\n setState((draft) => {\n if (draft.spec.display) {\n draft.spec.display.description = event.target.value;\n }\n });\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n <Stack>\n <Controller\n name=\"default\"\n render={({ field }) => (\n <FormControlLabel\n {...field}\n control={\n <Switch\n checked={state.spec.default}\n readOnly={action === 'read'}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n setState((draft) => {\n draft.spec.default = event.target.checked;\n });\n }}\n />\n }\n label=\"Set as default\"\n />\n )}\n />\n <Typography variant=\"caption\">\n Whether this datasource should be the default {state.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 <PluginEditor\n width=\"100%\"\n pluginType=\"Datasource\"\n pluginKindLabel=\"Source\"\n value={state.spec.plugin}\n isReadonly={action === 'read'}\n onChange={(v) => {\n setState((draft) => {\n draft.spec.plugin = v;\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":["useImmer","Box","Button","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","useCallback","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","datasourceEditValidationSchema","getInitialState","datasourceDefinition","patchedDisplay","name","spec","display","description","DatasourceEditorForm","props","state","initialDatasourceDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","initialState","setState","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","form","resolver","mode","defaultValues","title","default","processForm","undefined","handleCancel","JSON","stringify","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","paddingTop","control","checked","plugin","kind","py","width","pluginType","pluginKindLabel","v","isOpen","onCancel","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 { useImmer } from 'use-immer';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DispatchWithoutAction, useCallback, useState } from 'react';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { datasourceEditValidationSchema, DatasourceEditValidationType } from '../../validation';\n\n/*\n This preprocessing ensures that we always have a defined object for the `display` property\n * @param datasource\n */\nfunction getInitialState(datasourceDefinition: DatasourceDefinition) {\n const patchedDisplay = {\n name: datasourceDefinition.spec.display?.name ?? '',\n description: datasourceDefinition.spec.display?.description ?? '',\n };\n\n return {\n name: datasourceDefinition.name,\n spec: {\n ...datasourceDefinition.spec,\n display: patchedDisplay,\n },\n };\n}\n\ninterface DatasourceEditorFormProps {\n initialDatasourceDefinition: DatasourceDefinition;\n initialAction: Action;\n isDraft: boolean;\n isReadonly?: boolean;\n onSave: (name: string, spec: DatasourceSpec) => void;\n onClose: DispatchWithoutAction;\n onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps) {\n const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n const initialState = getInitialState(initialDatasourceDefinition);\n const [state, setState] = useImmer(initialState);\n const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n const [action, setAction] = useState(initialAction);\n const titleAction = getTitleAction(action, isDraft);\n const submitText = getSubmitText(action, isDraft);\n\n const form = useForm<DatasourceEditValidationType>({\n resolver: zodResolver(datasourceEditValidationSchema),\n mode: 'onBlur',\n defaultValues: {\n name: state.name,\n title: state.spec.display?.name,\n description: state.spec.display?.description,\n default: state.spec.default,\n },\n });\n\n const processForm: SubmitHandler<DatasourceEditValidationType> = () => {\n // reset display attributes to undefined when empty, because we don't want to save empty strings\n onSave(state.name, {\n ...state.spec,\n display: {\n name: state.spec.display?.name === '' ? undefined : state.spec.display?.name,\n description: state.spec.display?.description === '' ? undefined : state.spec.display?.description,\n },\n });\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 const handleCancel = useCallback(() => {\n if (JSON.stringify(initialState) !== JSON.stringify(state)) {\n setDiscardDialogOpened(true);\n } else {\n onClose();\n }\n }, [state, initialState, setDiscardDialogOpened, onClose]);\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 <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n {action === 'read' ? (\n <>\n <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n Edit\n </Button>\n <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n Delete\n </Button>\n <Divider\n orientation=\"vertical\"\n flexItem\n sx={(theme) => ({\n borderColor: theme.palette.grey['500'],\n '&.MuiDivider-root': {\n marginLeft: 2,\n marginRight: 1,\n },\n })}\n />\n <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n Close\n </Button>\n </>\n ) : (\n <>\n <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n {submitText}\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </>\n )}\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={4}>\n <Controller\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 onChange={(event) => {\n field.onChange(event);\n setState((draft) => {\n draft.name = event.target.value;\n });\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={8}>\n <Controller\n name=\"title\"\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 onChange={(event) => {\n setState((draft) => {\n field.onChange(event);\n if (draft.spec.display) {\n draft.spec.display.name = event.target.value;\n }\n });\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={12}>\n <Controller\n name=\"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 onChange={(event) => {\n field.onChange(event);\n setState((draft) => {\n if (draft.spec.display) {\n draft.spec.display.description = event.target.value;\n }\n });\n }}\n />\n )}\n />\n </Grid>\n <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n <Stack>\n <Controller\n name=\"default\"\n render={({ field }) => (\n <FormControlLabel\n {...field}\n control={\n <Switch\n checked={state.spec.default}\n readOnly={action === 'read'}\n onChange={(event) => {\n if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n field.onChange(event);\n setState((draft) => {\n draft.spec.default = event.target.checked;\n });\n }}\n />\n }\n label=\"Set as default\"\n />\n )}\n />\n <Typography variant=\"caption\">\n Whether this datasource should be the default {state.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 <PluginEditor\n width=\"100%\"\n pluginTypes={['Datasource']}\n pluginKindLabel=\"Source\"\n value={{\n selection: {\n kind: state.spec.plugin.kind,\n type: 'Datasource',\n },\n spec: state.spec.plugin.spec,\n }}\n isReadonly={action === 'read'}\n onChange={(v) => {\n setState((draft) => {\n draft.spec.plugin.kind = v.selection.kind;\n draft.spec.plugin.spec = v.spec;\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":["useImmer","Box","Button","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","useCallback","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","datasourceEditValidationSchema","getInitialState","datasourceDefinition","patchedDisplay","name","spec","display","description","DatasourceEditorForm","props","state","initialDatasourceDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","initialState","setState","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","form","resolver","mode","defaultValues","title","default","processForm","undefined","handleCancel","JSON","stringify","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","paddingTop","control","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+export interface MultiQueryEditorProps {
+    queryTypes: QueryPluginType[];
+    queries?: QueryDefinition[];
+    onChange: (queries: QueryDefinition[]) => void;
+}
+/**
+ * A component render a list of {@link QueryEditor} for the given query definitions.
+ * It allows adding, removing and editing queries.
+ * @param queryTypes The list of query types that the underlying editor will propose
+ * @param queries The list of query definitions to render
+ * @param onChange The callback to call when the queries are modified
+ * @constructor
+ */
+export declare function MultiQueryEditor({ queryTypes, queries, onChange }: MultiQueryEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MultiQueryEditor.d.ts.map

package/dist/components/MultiQueryEditor/MultiQueryEditor.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MultiQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAA6B,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAI/F,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AA6BD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CA8E7F"}