@perses-dev/dashboards 0.39.0 → 0.40.1

package/dist/components/Variables/EditVariablesButton.js

@@ -15,6 +15,7 @@ import { useState } from 'react';
 import { Button } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import { Drawer, InfoTooltip } from '@perses-dev/components';
+import { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';
 import { TOOLTIP_TEXT } from '../../constants';
 import { useTemplateExternalVariableDefinitions, useTemplateVariableActions, useTemplateVariableDefinitions } from '../../context';
 import { VariableEditor } from './VariableEditor';
@@ -22,6 +23,7 @@ export function EditVariablesButton({ variant ='text' , label ='Variables' , col
     const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);
     const variableDefinitions = useTemplateVariableDefinitions();
     const externalVariableDefinitions = useTemplateExternalVariableDefinitions();
+    const builtinVariableDefinitions = useBuiltinVariableDefinitions();
     const { setVariableDefinitions  } = useTemplateVariableActions();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
@@ -59,6 +61,7 @@ export function EditVariablesButton({ variant ='text' , label ='Variables' , col
                 children: /*#__PURE__*/ _jsx(VariableEditor, {
                     variableDefinitions: variableDefinitions,
                     externalVariableDefinitions: externalVariableDefinitions,
+                    builtinVariableDefinitions: builtinVariableDefinitions,
                     onCancel: closeVariableEditor,
                     onChange: (variables)=>{
                         setVariableDefinitions(variables);

package/dist/components/Variables/EditVariablesButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.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 { useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { VariableDefinition } from '@perses-dev/core';\n\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariableActions,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps) {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","TOOLTIP_TEXT","useTemplateExternalVariableDefinitions","useTemplateVariableActions","useTemplateVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","whiteSpace","minWidth","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"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;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,MAAM,QAAqB,eAAe,CAAC;AACpD,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,wBAAwB,CAAC;AAG7D,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAEEC,sCAAsC,EACtCC,0BAA0B,EAC1BC,8BAA8B,QACzB,eAAe,CAAC;AACvB,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAmBlD,OAAO,SAASC,mBAAmB,CAAC,EAClCC,OAAO,EAAG,MAAM,CAAA,EAChBC,KAAK,EAAG,WAAW,CAAA,EACnBC,KAAK,EAAG,SAAS,CAAA,EACjBC,SAAS,CAAA,EACgB,EAAE;IAC3B,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC,AAAC;IACxE,MAAMiB,mBAAmB,GAAyBT,8BAA8B,EAAE,AAAC;IACnF,MAAMU,2BAA2B,GAAiCZ,sCAAsC,EAAE,AAAC;IAC3G,MAAM,EAAEa,sBAAsB,CAAA,EAAE,GAAGZ,0BAA0B,EAAE,AAAC;IAEhE,MAAMa,kBAAkB,GAAG,IAAM;QAC/BJ,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,AAAC;IAEF,MAAMK,mBAAmB,GAAG,IAAM;QAChCL,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACZ,WAAW;gBAACkB,WAAW,EAAEjB,YAAY,CAACkB,aAAa;0BAClD,cAAA,KAACtB,MAAM;oBACLuB,SAAS,gBAAE,KAACtB,UAAU,KAAG;oBACzBuB,OAAO,EAAEL,kBAAkB;oBAC3BM,YAAU,EAAErB,YAAY,CAACkB,aAAa;oBACtCZ,OAAO,EAAEA,OAAO;oBAChBE,KAAK,EAAEA,KAAK;oBACZC,SAAS,EAAEA,SAAS;oBACpBa,EAAE,EAAE;wBAAEC,UAAU,EAAE,QAAQ;wBAAEC,QAAQ,EAAE,MAAM;qBAAE;8BAE7CjB,KAAK;kBACC;cACG;0BACd,KAACT,MAAM;gBACL2B,MAAM,EAAEf,oBAAoB;gBAC5BgB,OAAO,EAAEV,mBAAmB;gBAC5BW,UAAU,EAAE;oBAAEL,EAAE,EAAE;wBAAEM,KAAK,EAAE,KAAK;qBAAE;iBAAE;gBACpCC,aAAW,EAAC,iBAAiB;0BAE7B,cAAA,KAACzB,cAAc;oBACbQ,mBAAmB,EAAEA,mBAAmB;oBACxCC,2BAA2B,EAAEA,2BAA2B;oBACxDiB,QAAQ,EAAEd,mBAAmB;oBAC7Be,QAAQ,EAAE,CAACC,SAA+B,GAAK;wBAC7ClB,sBAAsB,CAACkB,SAAS,CAAC,CAAC;wBAClCrB,uBAAuB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;kBACD;cACK;;MACR,CACH;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.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 { useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariableActions,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps) {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useBuiltinVariableDefinitions","TOOLTIP_TEXT","useTemplateExternalVariableDefinitions","useTemplateVariableActions","useTemplateVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","whiteSpace","minWidth","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"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,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,6BAA6B,QAAQ,4BAA4B;AAC1E,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAEEC,sCAAsC,EACtCC,0BAA0B,EAC1BC,8BAA8B,QACzB,gBAAgB;AACvB,SAASC,cAAc,QAAQ,mBAAmB;AAmBlD,OAAO,SAASC,oBAAoB,EAClCC,SAAU,OAAM,EAChBC,OAAQ,YAAW,EACnBC,OAAQ,UAAS,EACjBC,UAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGjB,SAAS;IACjE,MAAMkB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0Df;IAChE,MAAM,EAAEgB,uBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACb;gBAAYoB,aAAalB,aAAamB;0BACrC,cAAA,KAACxB;oBACCyB,yBAAW,KAACxB;oBACZyB,SAASL;oBACTM,cAAYtB,aAAamB;oBACzBb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAI;wBAAEC,YAAY;wBAAUC,UAAU;oBAAO;8BAE5ClB;;;0BAGL,KAACV;gBACC6B,QAAQhB;gBACRiB,SAASV;gBACTW,YAAY;oBAAEL,IAAI;wBAAEM,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAAC1B;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5BiB,UAAUd;oBACVe,UAAU,CAACC;wBACTlB,uBAAuBkB;wBACvBtB,wBAAwB;oBAC1B;;;;;AAKV"}

package/dist/components/Variables/TemplateVariable.d.ts

@@ -1,9 +1,18 @@
 /// <reference types="react" />
-import { VariableName } from '@perses-dev/core';
+import { ListVariableSpec, UnknownSpec, VariableName, VariableValue } from '@perses-dev/core';
+import { VariableOption, VariableState } from '@perses-dev/plugin-system';
+import { UseQueryResult } from '@tanstack/react-query';
 declare type TemplateVariableProps = {
     name: VariableName;
     source?: string;
 };
 export declare function TemplateVariable({ name, source }: TemplateVariableProps): JSX.Element;
+export declare function useListVariableState(spec: ListVariableSpec<UnknownSpec> | undefined, state: VariableState | undefined, variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>): {
+    value: VariableValue | undefined;
+    loading: boolean;
+    options: VariableOption[] | undefined;
+    selectedValue: VariableValue;
+    viewOptions: VariableOption[];
+};
 export {};
 //# sourceMappingURL=TemplateVariable.d.ts.map

package/dist/components/Variables/TemplateVariable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateVariable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/TemplateVariable.tsx"],"names":[],"mappings":";AAeA,OAAO,EAA6C,YAAY,EAAiB,MAAM,kBAAkB,CAAC;AAI1G,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,qBAAqB,eAWvE"}
+{"version":3,"file":"TemplateVariable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/TemplateVariable.tsx"],"names":[],"mappings":";AAeA,OAAO,EAGL,gBAAgB,EAEhB,WAAW,EACX,YAAY,EACZ,aAAa,EACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,qBAAqB,eAWvE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,SAAS,EAC/C,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,GAC/D;IAED,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAEtC,aAAa,EAAE,aAAa,CAAC;IAE7B,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CAqDA"}

package/dist/components/Variables/TemplateVariable.js

@@ -17,9 +17,9 @@ import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
 import { useListVariablePluginValues } from '@perses-dev/plugin-system';
 import { useTemplateVariable, useTemplateVariableActions } from '../../context';
 export function TemplateVariable({ name , source  }) {
-    var ref;
+    var _ctx_definition;
     const ctx = useTemplateVariable(name, source);
-    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+    const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
     switch(kind){
         case 'TextVariable':
             return /*#__PURE__*/ _jsx(TextVariable, {
@@ -39,38 +39,21 @@ export function TemplateVariable({ name , source  }) {
         ]
     });
 }
-function ListVariable({ name , source  }) {
-    var ref, ref1, ref2, ref3;
-    const ctx = useTemplateVariable(name, source);
-    const definition = ctx.definition;
-    const variablesOptionsQuery = useListVariablePluginValues(definition);
-    const { setVariableValue , setVariableLoading , setVariableOptions  } = useTemplateVariableActions();
-    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
-    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
-    var ref4;
-    const title = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref4 !== void 0 ? ref4 : name;
-    useEffect(()=>{
-        setVariableLoading(name, variablesOptionsQuery.isFetching, source);
-        if (variablesOptionsQuery.data) {
-            setVariableOptions(name, variablesOptionsQuery.data, source);
-        }
-    }, [
-        variablesOptionsQuery,
-        name,
-        setVariableLoading,
-        setVariableOptions,
-        source
+export function useListVariableState(spec, state, variablesOptionsQuery) {
+    const allowMultiple = (spec === null || spec === void 0 ? void 0 : spec.allowMultiple) === true;
+    const allowAllValue = (spec === null || spec === void 0 ? void 0 : spec.allowAllValue) === true;
+    const loading = useMemo(()=>variablesOptionsQuery.isFetching || false, [
+        variablesOptionsQuery
     ]);
-    let value = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.value;
-    const options = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.options;
-    const loading = (ref3 = ctx.state) === null || ref3 === void 0 ? void 0 : ref3.loading;
+    const options = variablesOptionsQuery.data;
+    let value = state === null || state === void 0 ? void 0 : state.value;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
         value = typeof value === 'string' ? [
             value
         ] : [];
     }
-    const finalOptions = useMemo(()=>{
+    const viewOptions = useMemo(()=>{
         let computedOptions = options ? [
             ...options
         ] : [];
@@ -89,32 +72,85 @@ function ListVariable({ name , source  }) {
         options,
         allowAllValue
     ]);
-    const valueIsInOptions = useMemo(()=>Boolean(finalOptions.find((v)=>{
+    const valueIsInOptions = useMemo(()=>Boolean(viewOptions.find((v)=>{
             if (allowMultiple) {
                 return value.includes(v.value);
             }
             return value === v.value;
         })), [
-        finalOptions,
+        viewOptions,
         value,
         allowMultiple
     ]);
-    let selectValue = value;
-    if (!valueIsInOptions) {
-        selectValue = allowMultiple ? [] : '';
-    }
+    value = useMemo(()=>{
+        var _viewOptions_;
+        const firstOptionValue = viewOptions === null || viewOptions === void 0 ? void 0 : (_viewOptions_ = viewOptions[allowAllValue ? 1 : 0]) === null || _viewOptions_ === void 0 ? void 0 : _viewOptions_.value;
+        // If there is no value but there are options, or the value is not in options, we set the value to the first option.
+        if (firstOptionValue) {
+            if (!valueIsInOptions || !value || value.length === 0) {
+                return allowMultiple ? [
+                    firstOptionValue
+                ] : firstOptionValue;
+            }
+        }
+        return value;
+    }, [
+        viewOptions,
+        value,
+        valueIsInOptions,
+        allowMultiple,
+        allowAllValue
+    ]);
+    // Once we computed value, we set it as the selected one, if it is available in the options
+    const selectedValue = value && valueIsInOptions ? value : allowMultiple ? [] : '';
+    return {
+        value,
+        loading,
+        options,
+        selectedValue,
+        viewOptions
+    };
+}
+function ListVariable({ name , source  }) {
+    var _definition_spec_display;
+    const ctx = useTemplateVariable(name, source);
+    const definition = ctx.definition;
+    const variablesOptionsQuery = useListVariablePluginValues(definition);
+    const { setVariableValue , setVariableLoading , setVariableOptions  } = useTemplateVariableActions();
+    const { selectedValue , value , loading , options , viewOptions  } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
+    var _definition_spec_display_name;
+    const title = (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
+    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
+    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allowAllValue) === true;
+    // Update value when changed
     useEffect(()=>{
-        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
-        // If there is no value but there are options, set the value to the first option.
-        if (!value && firstOption) {
-            setVariableValue(name, firstOption.value, source);
+        if (value) {
+            setVariableValue(name, value, source);
         }
     }, [
-        finalOptions,
         setVariableValue,
+        name,
         value,
+        source
+    ]);
+    // Update loading when changed
+    useEffect(()=>{
+        setVariableLoading(name, loading, source);
+    }, [
+        setVariableLoading,
         name,
-        allowMultiple,
+        loading,
+        source
+    ]);
+    // Update options when changed
+    useEffect(()=>{
+        if (options) {
+            setVariableOptions(name, options, source);
+        }
+    }, [
+        setVariableOptions,
+        name,
+        options,
         source
     ]);
     return /*#__PURE__*/ _jsx(Box, {
@@ -127,13 +163,9 @@ function ListVariable({ name , source  }) {
                     children: title
                 }),
                 /*#__PURE__*/ _jsxs(Select, {
-                    sx: {
-                        minWidth: 100,
-                        maxWidth: 250
-                    },
                     id: name,
                     label: title,
-                    value: selectValue,
+                    value: selectedValue,
                     onChange: (e)=>{
                         // Must be selected
                         if (e.target.value === null || e.target.value.length === 0) {
@@ -151,12 +183,12 @@ function ListVariable({ name , source  }) {
                             disabled: true,
                             children: "Loading"
                         }),
-                        finalOptions.length === 0 && /*#__PURE__*/ _jsx(MenuItem, {
+                        viewOptions.length === 0 && /*#__PURE__*/ _jsx(MenuItem, {
                             value: "empty",
                             disabled: true,
                             children: "No options"
                         }),
-                        finalOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        viewOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
                                 value: option.value,
                                 children: option.label
                             }, option.value))
@@ -168,24 +200,29 @@ function ListVariable({ name , source  }) {
     });
 }
 function TextVariable({ name , source  }) {
-    var ref;
-    const { state , definition  } = useTemplateVariable(name, source);
-    var ref1;
-    const [tempValue, setTempValue] = useState((ref1 = state === null || state === void 0 ? void 0 : state.value) !== null && ref1 !== void 0 ? ref1 : '');
+    var _definition_spec_display;
+    const ctx = useTemplateVariable(name, source);
+    const state = ctx.state;
+    const definition = ctx.definition;
+    var _state_value;
+    const [tempValue, setTempValue] = useState((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
     const { setVariableValue  } = useTemplateVariableActions();
     useEffect(()=>{
-        var ref;
-        setTempValue((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+        var _state_value;
+        setTempValue((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
     }, [
         state === null || state === void 0 ? void 0 : state.value
     ]);
-    var ref2;
+    var _definition_spec_display_name, _definition_spec_constant;
     return /*#__PURE__*/ _jsx(TextField, {
         value: tempValue,
         onChange: (e)=>setTempValue(e.target.value),
         onBlur: ()=>setVariableValue(name, tempValue, source),
         placeholder: name,
-        label: (ref2 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : name
+        label: (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
+        InputProps: {
+            readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
+        }
     });
 }
 

package/dist/components/Variables/TemplateVariable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/TemplateVariable.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 { useEffect, useMemo, useState } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { DEFAULT_ALL_VALUE, ListVariableDefinition, VariableName, VariableValue } from '@perses-dev/core';\nimport { useListVariablePluginValues } from '@perses-dev/plugin-system';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nexport function TemplateVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nfunction ListVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\n  const title = definition?.spec.display?.name ?? name;\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching, source);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data, source);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions, source]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        finalOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [finalOptions, value, allowMultiple]\n  );\n\n  let selectValue = value;\n  if (!valueIsInOptions) {\n    selectValue = allowMultiple ? [] : '';\n  }\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value, source);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple, source]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl fullWidth>\n        <InputLabel id={name}>{title}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={title}\n          value={selectValue}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE, source);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue, source);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n\n          {finalOptions.length === 0 && (\n            <MenuItem value=\"empty\" disabled>\n              No options\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name, source }: TemplateVariableProps) {\n  const { state, definition } = useTemplateVariable(name, source);\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","DEFAULT_ALL_VALUE","useListVariablePluginValues","useTemplateVariable","useTemplateVariableActions","TemplateVariable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","variablesOptionsQuery","setVariableValue","setVariableLoading","setVariableOptions","allowMultiple","spec","allow_multiple","allowAllValue","allow_all_value","title","display","isFetching","data","value","state","options","loading","Array","isArray","finalOptions","computedOptions","label","valueIsInOptions","Boolean","find","v","includes","selectValue","firstOption","fullWidth","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","map","option","tempValue","setTempValue","onBlur","placeholder"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/TemplateVariable.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 { useEffect, useMemo, useState } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  UnknownSpec,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport { useListVariablePluginValues, VariableOption, VariableState } from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nexport function TemplateVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec<UnknownSpec> | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedValue is the value(s) that will be used in the view only\n  selectedValue: VariableValue;\n  // viewOptions are the options used in the view only (options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching || false, [variablesOptionsQuery]);\n  const options = variablesOptionsQuery.data;\n\n  let value = state?.value;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  // Once we computed value, we set it as the selected one, if it is available in the options\n  const selectedValue = value && valueIsInOptions ? value : allowMultiple ? [] : '';\n\n  return { value, loading, options, selectedValue, viewOptions };\n}\n\nfunction ListVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const { selectedValue, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl fullWidth>\n        <InputLabel id={name}>{title}</InputLabel>\n        <Select\n          id={name}\n          label={title}\n          value={selectedValue}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE, source);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue, source);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n\n          {viewOptions.length === 0 && (\n            <MenuItem value=\"empty\" disabled>\n              No options\n            </MenuItem>\n          )}\n          {viewOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name, source }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      InputProps={{\n        readOnly: definition?.spec.constant ?? false,\n      }}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","DEFAULT_ALL_VALUE","useListVariablePluginValues","useTemplateVariable","useTemplateVariableActions","TemplateVariable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","loading","isFetching","options","data","value","Array","isArray","viewOptions","computedOptions","label","valueIsInOptions","Boolean","find","v","includes","firstOptionValue","length","selectedValue","setVariableValue","setVariableLoading","setVariableOptions","title","display","fullWidth","id","onChange","e","target","multiple","disabled","map","option","tempValue","setTempValue","onBlur","placeholder","InputProps","readOnly","constant"],"mappings":"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"}

package/dist/components/Variables/VariableEditor.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { VariableDefinition } from '@perses-dev/core';
+import { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';
 import { VariableState } from '@perses-dev/plugin-system';
 import { ExternalVariableDefinition } from '../../context';
 export declare function VariableEditor(props: {
     variableDefinitions: VariableDefinition[];
     externalVariableDefinitions: ExternalVariableDefinition[];
+    builtinVariableDefinitions: BuiltinVariableDefinition[];
     onChange: (variableDefinitions: VariableDefinition[]) => void;
     onCancel: () => void;
 }): JSX.Element;

package/dist/components/Variables/VariableEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AAiCA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,EAA4B,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AACpG,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAsBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA8QA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,eAoBrF"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AAoCA,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUjF,OAAO,EAA8B,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAEtG,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAuBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAkUA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,eAoBrF"}