@perses-dev/plugin-system 0.53.0-beta.2 → 0.53.0-beta.4

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

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    TRACE_QUERY_KEY: function() {
+    get TRACE_QUERY_KEY () {
         return TRACE_QUERY_KEY;
     },
-    useTraceQueries: function() {
+    get useTraceQueries () {
         return useTraceQueries;
     }
 });
@@ -55,9 +55,13 @@ function useTraceQueries(definitions) {
             return {
                 enabled: queryEnabled,
                 queryKey: queryKey,
-                queryFn: async ()=>{
+                refetchOnMount: false,
+                refetchOnWindowFocus: false,
+                refetchOnReconnect: false,
+                staleTime: Infinity,
+                queryFn: async ({ signal })=>{
                     const plugin = await getPlugin(TRACE_QUERY_KEY, traceQueryKind);
-                    const data = await plugin.getTraceData(definition.spec.plugin.spec, context);
+                    const data = await plugin.getTraceData(definition.spec.plugin.spec, context, signal);
                     return data;
                 }
             };

package/dist/cjs/runtime/utils.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    filterVariableStateMap: function() {
+    get filterVariableStateMap () {
         return filterVariableStateMap;
     },
-    getVariableValuesKey: function() {
+    get getVariableValuesKey () {
         return getVariableValuesKey;
     }
 });

package/dist/cjs/runtime/variables.js

@@ -17,26 +17,26 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    VariableContext: function() {
+    get VariableContext () {
         return VariableContext;
     },
-    VariableStoreStateMap: function() {
+    get VariableStoreStateMap () {
         return VariableStoreStateMap;
     },
-    replaceVariablesInString: function() {
+    get replaceVariablesInString () {
         return replaceVariablesInString;
     },
-    useAllVariableValues: function() {
+    get useAllVariableValues () {
         return useAllVariableValues;
     },
-    useReplaceVariablesInString: function() {
+    get useReplaceVariablesInString () {
         return useReplaceVariablesInString;
     },
-    useVariableValues: function() {
+    get useVariableValues () {
         return useVariableValues;
     }
 });

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

@@ -17,44 +17,44 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    MOCK_EMPTY_PLUGIN_MODULE: function() {
+    get MOCK_EMPTY_PLUGIN_MODULE () {
         return MOCK_EMPTY_PLUGIN_MODULE;
     },
-    MOCK_INVALID_PLUGIN_MODULE: function() {
+    get MOCK_INVALID_PLUGIN_MODULE () {
         return MOCK_INVALID_PLUGIN_MODULE;
     },
-    MOCK_LOG_DATA: function() {
+    get MOCK_LOG_DATA () {
         return MOCK_LOG_DATA;
     },
-    MOCK_MIXED_VALIDITY_PLUGIN_MODULES: function() {
+    get MOCK_MIXED_VALIDITY_PLUGIN_MODULES () {
         return MOCK_MIXED_VALIDITY_PLUGIN_MODULES;
     },
-    MOCK_MULTI_PLUGIN_MODULE: function() {
+    get MOCK_MULTI_PLUGIN_MODULE () {
         return MOCK_MULTI_PLUGIN_MODULE;
     },
-    MOCK_PARTIAL_FAILURE_MODULE: function() {
+    get MOCK_PARTIAL_FAILURE_MODULE () {
         return MOCK_PARTIAL_FAILURE_MODULE;
     },
-    MOCK_PROFILE_DATA: function() {
+    get MOCK_PROFILE_DATA () {
         return MOCK_PROFILE_DATA;
     },
-    MOCK_REMOTE_PLUGIN_MODULE: function() {
+    get MOCK_REMOTE_PLUGIN_MODULE () {
         return MOCK_REMOTE_PLUGIN_MODULE;
     },
-    MOCK_TIME_SERIES_DATA: function() {
+    get MOCK_TIME_SERIES_DATA () {
         return MOCK_TIME_SERIES_DATA;
     },
-    MOCK_TRACE_DATA: function() {
+    get MOCK_TRACE_DATA () {
         return MOCK_TRACE_DATA;
     },
-    MOCK_VALID_PLUGIN_METADATA: function() {
+    get MOCK_VALID_PLUGIN_METADATA () {
         return MOCK_VALID_PLUGIN_METADATA;
     },
-    MOCK_VALID_PLUGIN_MODULE_RESOURCE: function() {
+    get MOCK_VALID_PLUGIN_MODULE_RESOURCE () {
         return MOCK_VALID_PLUGIN_MODULE_RESOURCE;
     }
 });

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

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    BertPanel1: function() {
+    get BertPanel1 () {
         return BertPanel1;
     },
-    BertPanel2: function() {
+    get BertPanel2 () {
         return BertPanel2;
     }
 });

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

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    ErnieVariable1: function() {
+    get ErnieVariable1 () {
         return ErnieVariable1;
     },
-    ErnieVariable2: function() {
+    get ErnieVariable2 () {
         return ErnieVariable2;
     }
 });

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

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    getMockPluginName: function() {
+    get getMockPluginName () {
         return getMockPluginName;
     },
-    mockPluginRegistry: function() {
+    get mockPluginRegistry () {
         return mockPluginRegistry;
     }
 });

package/dist/cjs/utils/action.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    getSubmitText: function() {
+    get getSubmitText () {
         return getSubmitText;
     },
-    getTitleAction: function() {
+    get getTitleAction () {
         return getTitleAction;
     }
 });

package/dist/cjs/utils/variables.js

@@ -17,26 +17,26 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    InterpolationFormat: function() {
+    get InterpolationFormat () {
         return InterpolationFormat;
     },
-    interpolate: function() {
+    get interpolate () {
         return interpolate;
     },
-    parseVariables: function() {
+    get parseVariables () {
         return parseVariables;
     },
-    parseVariablesAndFormat: function() {
+    get parseVariablesAndFormat () {
         return parseVariablesAndFormat;
     },
-    replaceVariable: function() {
+    get replaceVariable () {
         return replaceVariable;
     },
-    replaceVariables: function() {
+    get replaceVariables () {
         return replaceVariables;
     }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"HTTPSettingsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAc,EAAY,YAAY,EAAY,MAAM,OAAO,CAAC;AAOhE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,kBAAkB,CAAC;IACtC,gBAAgB,EAAE,kBAAkB,CAAC;CACtC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA4b1E"}
+{"version":3,"file":"HTTPSettingsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkB,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAc,EAAY,YAAY,EAAY,MAAM,OAAO,CAAC;AAgBhE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,kBAAkB,CAAC;IACtC,gBAAgB,EAAE,kBAAkB,CAAC;CACtC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA8b1E"}

package/dist/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Grid, IconButton, MenuItem, TextField, Typography } from '@mui/material';
 import React, { Fragment, useState } from 'react';
 import { produce } from 'immer';
-import { Controller } from 'react-hook-form';
+import { Controller, useForm, useFieldArray } from 'react-hook-form';
 import MinusIcon from 'mdi-material-ui/Minus';
 import PlusIcon from 'mdi-material-ui/Plus';
 import { OptionsEditorRadios } from '../OptionsEditorRadios';
@@ -26,22 +26,50 @@ export function HTTPSettingsEditor(props) {
     if (value.directUrl === undefined && value.proxy === undefined) {
         Object.assign(value, initialSpecProxy);
     }
-    // utilitary function used for headers when renaming a property
-    // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.
-    const buildNewHeaders = (oldHeaders, oldName, newName)=>{
-        if (oldHeaders === undefined) return oldHeaders;
-        const keys = Object.keys(oldHeaders);
-        const newHeaders = keys.reduce((acc, val)=>{
-            if (val === oldName) {
-                acc[newName] = oldHeaders[oldName] || '';
-            } else {
-                acc[val] = oldHeaders[val] || '';
+    // Use local state to maintain an array of header entries during editing, instead of
+    // manipulating a map directly which causes weird UX.
+    const headersForm = useForm({
+        defaultValues: {
+            headers: Object.entries(value.proxy?.spec.headers ?? {}).map(([name, headerValue])=>({
+                    name,
+                    value: headerValue
+                }))
+        }
+    });
+    const { fields, append, remove } = useFieldArray({
+        control: headersForm.control,
+        name: 'headers'
+    });
+    // Watch the headers array for changes to detect duplicates
+    const watchedHeaders = headersForm.watch('headers');
+    // Check for duplicate header names
+    // TODO: duplication detection logic to be replaced by proper zod schema validation in the future
+    // ref https://github.com/perses/perses/issues/3014
+    const nameMap = new Map();
+    const duplicateNames = new Set();
+    watchedHeaders.forEach(({ name })=>{
+        if (name !== '') {
+            const count = (nameMap.get(name) || 0) + 1;
+            nameMap.set(name, count);
+            if (count > 1) {
+                duplicateNames.add(name);
+            }
+        }
+    });
+    const hasDuplicates = duplicateNames.size > 0;
+    // Sync headers to parent
+    const syncHeadersToParent = (headers)=>{
+        const headersObject = {};
+        headers.forEach(({ name, value: headerValue })=>{
+            if (name !== '') {
+                headersObject[name] = headerValue;
             }
-            return acc;
-        }, {});
-        return {
-            ...newHeaders
-        };
+        });
+        onChange(produce(value, (draft)=>{
+            if (draft.proxy !== undefined) {
+                draft.proxy.spec.headers = Object.keys(headersObject).length > 0 ? headersObject : undefined;
+            }
+        }));
     };
     const tabs = [
         {
@@ -77,7 +105,7 @@ export function HTTPSettingsEditor(props) {
                             })
                     }),
                     /*#__PURE__*/ _jsx(Typography, {
-                        variant: "h4",
+                        variant: "h5",
                         mb: 2,
                         children: "Allowed endpoints"
                     }),
@@ -252,7 +280,7 @@ export function HTTPSettingsEditor(props) {
                         ]
                     }),
                     /*#__PURE__*/ _jsx(Typography, {
-                        variant: "h4",
+                        variant: "h5",
                         mb: 2,
                         children: "Request Headers"
                     }),
@@ -261,20 +289,19 @@ export function HTTPSettingsEditor(props) {
                         spacing: 2,
                         mb: 2,
                         children: [
-                            value.proxy?.spec.headers && Object.keys(value.proxy.spec.headers).map((headerName, i)=>{
-                                return /*#__PURE__*/ _jsxs(Fragment, {
+                            fields.length > 0 ? fields.map((field, index)=>/*#__PURE__*/ _jsxs(Fragment, {
                                     children: [
                                         /*#__PURE__*/ _jsx(Grid, {
                                             item: true,
                                             xs: 4,
                                             children: /*#__PURE__*/ _jsx(Controller, {
-                                                name: `Header name ${i}`,
-                                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
-                                                        ...field,
+                                                control: headersForm.control,
+                                                name: `headers.${index}.name`,
+                                                render: ({ field: controllerField, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                                        ...controllerField,
                                                         fullWidth: true,
                                                         label: "Header name",
-                                                        value: headerName,
-                                                        error: !!fieldState.error,
+                                                        error: !!fieldState.error || duplicateNames.has(controllerField.value),
                                                         helperText: fieldState.error?.message,
                                                         InputProps: {
                                                             readOnly: isReadonly
@@ -283,12 +310,15 @@ export function HTTPSettingsEditor(props) {
                                                             shrink: isReadonly ? true : undefined
                                                         },
                                                         onChange: (e)=>{
-                                                            field.onChange(e);
-                                                            onChange(produce(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    draft.proxy.spec.headers = buildNewHeaders(draft.proxy.spec.headers, headerName, e.target.value);
-                                                                }
-                                                            }));
+                                                            controllerField.onChange(e);
+                                                            const updatedHeaders = [
+                                                                ...watchedHeaders
+                                                            ];
+                                                            updatedHeaders[index] = {
+                                                                name: e.target.value,
+                                                                value: updatedHeaders[index]?.value ?? ''
+                                                            };
+                                                            syncHeadersToParent(updatedHeaders);
                                                         }
                                                     })
                                             })
@@ -297,12 +327,12 @@ export function HTTPSettingsEditor(props) {
                                             item: true,
                                             xs: 7,
                                             children: /*#__PURE__*/ _jsx(Controller, {
-                                                name: `Header value ${i}`,
-                                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
-                                                        ...field,
+                                                control: headersForm.control,
+                                                name: `headers.${index}.value`,
+                                                render: ({ field: controllerField, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                                        ...controllerField,
                                                         fullWidth: true,
                                                         label: "Header value",
-                                                        value: value.proxy?.spec.headers?.[headerName],
                                                         error: !!fieldState.error,
                                                         helperText: fieldState.error?.message,
                                                         InputProps: {
@@ -312,15 +342,15 @@ export function HTTPSettingsEditor(props) {
                                                             shrink: isReadonly ? true : undefined
                                                         },
                                                         onChange: (e)=>{
-                                                            field.onChange(e);
-                                                            onChange(produce(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    draft.proxy.spec.headers = {
-                                                                        ...draft.proxy.spec.headers,
-                                                                        [headerName]: e.target.value
-                                                                    };
-                                                                }
-                                                            }));
+                                                            controllerField.onChange(e);
+                                                            const updatedHeaders = [
+                                                                ...watchedHeaders
+                                                            ];
+                                                            updatedHeaders[index] = {
+                                                                name: updatedHeaders[index]?.name ?? '',
+                                                                value: e.target.value
+                                                            };
+                                                            syncHeadersToParent(updatedHeaders);
                                                         }
                                                     })
                                             })
@@ -328,30 +358,36 @@ export function HTTPSettingsEditor(props) {
                                         /*#__PURE__*/ _jsx(Grid, {
                                             item: true,
                                             xs: 1,
-                                            children: /*#__PURE__*/ _jsx(Controller, {
-                                                name: `Remove Header ${i}`,
-                                                render: ({ field })=>/*#__PURE__*/ _jsx(IconButton, {
-                                                        ...field,
-                                                        disabled: isReadonly,
-                                                        // Remove the given header from the list
-                                                        onClick: (e)=>{
-                                                            field.onChange(e);
-                                                            const newHeaders = {
-                                                                ...value.proxy?.spec.headers
-                                                            };
-                                                            delete newHeaders[headerName];
-                                                            onChange(produce(value, (draft)=>{
-                                                                if (draft.proxy !== undefined) {
-                                                                    draft.proxy.spec.headers = newHeaders;
-                                                                }
-                                                            }));
-                                                        },
-                                                        children: /*#__PURE__*/ _jsx(MinusIcon, {})
-                                                    })
+                                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                                disabled: isReadonly,
+                                                "aria-label": `Remove header ${watchedHeaders[index]?.name || index}`,
+                                                onClick: ()=>{
+                                                    remove(index);
+                                                    const updatedHeaders = watchedHeaders.filter((_, i)=>i !== index);
+                                                    syncHeadersToParent(updatedHeaders);
+                                                },
+                                                children: /*#__PURE__*/ _jsx(MinusIcon, {})
                                             })
                                         })
                                     ]
-                                }, i);
+                                }, field.id)) : /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 4,
+                                children: /*#__PURE__*/ _jsx(Typography, {
+                                    sx: {
+                                        fontStyle: 'italic'
+                                    },
+                                    children: "None"
+                                })
+                            }),
+                            hasDuplicates && /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 12,
+                                children: /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "error",
+                                    children: "Duplicate header names detected. Each header name must be unique."
+                                })
                             }),
                             /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
@@ -362,15 +398,10 @@ export function HTTPSettingsEditor(props) {
                                 },
                                 children: /*#__PURE__*/ _jsx(IconButton, {
                                     disabled: isReadonly,
-                                    // Add a new (empty) header to the list
-                                    onClick: ()=>onChange(produce(value, (draft)=>{
-                                            if (draft.proxy !== undefined) {
-                                                draft.proxy.spec.headers = {
-                                                    ...draft.proxy.spec.headers,
-                                                    '': ''
-                                                };
-                                            }
-                                        })),
+                                    onClick: ()=>append({
+                                            name: '',
+                                            value: ''
+                                        }),
                                     children: /*#__PURE__*/ _jsx(PlusIcon, {})
                                 })
                             })