@perses-dev/dashboards 0.38.0 → 0.40.0

package/dist/components/Variables/BuiltinVariableAccordions.js

@@ -0,0 +1,127 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Accordion, AccordionDetails, AccordionSummary, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
+import ExpandMoreIcon from 'mdi-material-ui/ChevronUp';
+import { InfoTooltip } from '@perses-dev/components';
+import { useMemo } from 'react';
+export function BuiltinVariableAccordions({ builtinVariableDefinitions  }) {
+    const builtinVariablesBySource = useMemo(()=>{
+        const result = {};
+        for (const definition of builtinVariableDefinitions){
+            const value = result[definition.spec.source];
+            if (value) {
+                value.push(definition);
+                continue;
+            }
+            result[definition.spec.source] = [
+                definition
+            ];
+        }
+        return result;
+    }, [
+        builtinVariableDefinitions
+    ]);
+    const sources = useMemo(()=>{
+        const result = [];
+        for(const source in builtinVariablesBySource){
+            if (!result.includes(source)) {
+                result.push(source);
+            }
+        }
+        return result;
+    }, [
+        builtinVariablesBySource
+    ]);
+    var _builtinVariablesBySource_source, _v_spec_display_description;
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: sources.map((source)=>{
+            /*#__PURE__*/ return _jsxs(Accordion, {
+                sx: (theme)=>({
+                        '.MuiAccordionSummary-root': {
+                            backgroundColor: theme.palette.background.lighter
+                        },
+                        '.MuiAccordionDetails-root': {
+                            backgroundColor: theme.palette.background.lighter
+                        }
+                    }),
+                children: [
+                    /*#__PURE__*/ _jsx(AccordionSummary, {
+                        expandIcon: /*#__PURE__*/ _jsx(ExpandMoreIcon, {}),
+                        "aria-controls": "builtin",
+                        id: "builtin",
+                        children: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h2",
+                            children: /*#__PURE__*/ _jsx(InfoTooltip, {
+                                title: `${source} Builtin Variables`,
+                                description: "Variables computed during dashboard rendering.",
+                                children: /*#__PURE__*/ _jsxs("span", {
+                                    children: [
+                                        source,
+                                        " Builtin Variables"
+                                    ]
+                                })
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(AccordionDetails, {
+                        children: /*#__PURE__*/ _jsx(TableContainer, {
+                            children: /*#__PURE__*/ _jsxs(Table, {
+                                sx: {
+                                    minWidth: 650
+                                },
+                                "aria-label": "table of external variables",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableHead, {
+                                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: "Name"
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: "Description"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableBody, {
+                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>{
+                                            var _v_spec_display;
+                                            /*#__PURE__*/ return _jsxs(TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        component: "th",
+                                                        scope: "row",
+                                                        sx: {
+                                                            fontWeight: 'bold'
+                                                        },
+                                                        children: v.spec.name
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: (_v_spec_display_description = (_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
+                                                    })
+                                                ]
+                                            }, source + '-' + v.spec.name);
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            }, source);
+        })
+    });
+}
+
+//# sourceMappingURL=BuiltinVariableAccordions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Variables/BuiltinVariableAccordions.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 { BuiltinVariableDefinition } from '@perses-dev/core';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useMemo } from 'react';\n\ntype BuiltinVariableAccordionsProps = {\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n};\n\nexport function BuiltinVariableAccordions({ builtinVariableDefinitions }: BuiltinVariableAccordionsProps) {\n  const builtinVariablesBySource = useMemo(() => {\n    const result: Record<string, BuiltinVariableDefinition[]> = {};\n    for (const definition of builtinVariableDefinitions) {\n      const value = result[definition.spec.source];\n      if (value) {\n        value.push(definition);\n        continue;\n      }\n      result[definition.spec.source] = [definition];\n    }\n    return result;\n  }, [builtinVariableDefinitions]);\n\n  const sources = useMemo(() => {\n    const result: string[] = [];\n    for (const source in builtinVariablesBySource) {\n      if (!result.includes(source)) {\n        result.push(source);\n      }\n    }\n    return result;\n  }, [builtinVariablesBySource]);\n\n  return (\n    <>\n      {sources.map((source) => (\n        <Accordion\n          key={source}\n          sx={(theme) => ({\n            '.MuiAccordionSummary-root': {\n              backgroundColor: theme.palette.background.lighter,\n            },\n            '.MuiAccordionDetails-root': {\n              backgroundColor: theme.palette.background.lighter,\n            },\n          })}\n        >\n          <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls=\"builtin\" id=\"builtin\">\n            <Typography variant=\"h2\">\n              <InfoTooltip\n                title={`${source} Builtin Variables`}\n                description=\"Variables computed during dashboard rendering.\"\n              >\n                <span>{source} Builtin Variables</span>\n              </InfoTooltip>\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <TableContainer>\n              <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Name</TableCell>\n                    <TableCell>Description</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {(builtinVariablesBySource[source] ?? []).map((v) => (\n                    <TableRow key={source + '-' + v.spec.name}>\n                      <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                        {v.spec.name}\n                      </TableCell>\n                      <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </TableContainer>\n          </AccordionDetails>\n        </Accordion>\n      ))}\n    </>\n  );\n}\n"],"names":["Accordion","AccordionDetails","AccordionSummary","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","ExpandMoreIcon","InfoTooltip","useMemo","BuiltinVariableAccordions","builtinVariableDefinitions","builtinVariablesBySource","result","definition","value","spec","source","push","sources","includes","v","map","sx","theme","backgroundColor","palette","background","lighter","expandIcon","aria-controls","id","variant","title","description","span","minWidth","aria-label","component","scope","fontWeight","name","display"],"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;;AAGjC,SACEA,SAAS,EACTC,gBAAgB,EAChBC,gBAAgB,EAChBC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,UAAU,QACL,gBAAgB;AACvB,OAAOC,oBAAoB,4BAA4B;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,QAAQ;AAMhC,OAAO,SAASC,0BAA0B,EAAEC,2BAA0B,EAAkC;IACtG,MAAMC,2BAA2BH,QAAQ;QACvC,MAAMI,SAAsD,CAAC;QAC7D,KAAK,MAAMC,cAAcH,2BAA4B;YACnD,MAAMI,QAAQF,MAAM,CAACC,WAAWE,KAAKC,OAAO;YAC5C,IAAIF,OAAO;gBACTA,MAAMG,KAAKJ;gBACX;YACF;YACAD,MAAM,CAACC,WAAWE,KAAKC,OAAO,GAAG;gBAACH;aAAW;QAC/C;QACA,OAAOD;IACT,GAAG;QAACF;KAA2B;IAE/B,MAAMQ,UAAUV,QAAQ;QACtB,MAAMI,SAAmB,EAAE;QAC3B,IAAK,MAAMI,UAAUL,yBAA0B;YAC7C,IAAI,CAACC,OAAOO,SAASH,SAAS;gBAC5BJ,OAAOK,KAAKD;YACd;QACF;QACA,OAAOJ;IACT,GAAG;QAACD;KAAyB;QAoCXA,kCAKcS;IAvChC,qBACE;kBACGF,QAAQG,IAAI,CAACL;0BACZ,OAAA,MAACpB;gBAEC0B,IAAI,CAACC,QAAW,CAAA;wBACd,6BAA6B;4BAC3BC,iBAAiBD,MAAME,QAAQC,WAAWC;wBAC5C;wBACA,6BAA6B;4BAC3BH,iBAAiBD,MAAME,QAAQC,WAAWC;wBAC5C;oBACF,CAAA;;kCAEA,KAAC7B;wBAAiB8B,0BAAY,KAACtB;wBAAmBuB,iBAAc;wBAAUC,IAAG;kCAC3E,cAAA,KAACzB;4BAAW0B,SAAQ;sCAClB,cAAA,KAACxB;gCACCyB,OAAO,CAAC,EAAEhB,OAAO,kBAAkB,CAAC;gCACpCiB,aAAY;0CAEZ,cAAA,MAACC;;wCAAMlB;wCAAO;;;;;;kCAIpB,KAACnB;kCACC,cAAA,KAACK;sCACC,cAAA,MAACH;gCAAMuB,IAAI;oCAAEa,UAAU;gCAAI;gCAAGC,cAAW;;kDACvC,KAACjC;kDACC,cAAA,MAACC;;8DACC,KAACH;8DAAU;;8DACX,KAACA;8DAAU;;;;;kDAGf,KAACD;kDACE,AAACW,CAAAA,CAAAA,mCAAAA,wBAAwB,CAACK,OAAO,cAAhCL,8CAAAA,mCAAoC,EAAE,AAAD,EAAGU,IAAI,CAACD;gDAK/BA;0DAJd,OAAA,MAAChB;;kEACC,KAACH;wDAAUoC,WAAU;wDAAKC,OAAM;wDAAMhB,IAAI;4DAAEiB,YAAY;wDAAO;kEAC5DnB,EAAEL,KAAKyB;;kEAEV,KAACvC;kEAAWmB,CAAAA,8BAAAA,CAAAA,kBAAAA,EAAEL,KAAK0B,qBAAPrB,6BAAAA,KAAAA,IAAAA,gBAAgBa,yBAAhBb,yCAAAA,8BAA+B;;;+CAJ9BJ,SAAS,MAAMI,EAAEL,KAAKyB;;;;;;;;eA/B1CxB;;;AA8Cf"}

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

@@ -1 +1 @@
-{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AASpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,eA6C1B"}
+{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAcpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,eAiD1B"}

package/dist/components/Variables/EditVariablesButton.js

@@ -15,12 +15,15 @@ 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 { useTemplateVariableDefinitions, useTemplateVariableActions } from '../../context';
+import { useTemplateExternalVariableDefinitions, useTemplateVariableActions, useTemplateVariableDefinitions } from '../../context';
 import { VariableEditor } from './VariableEditor';
 export function EditVariablesButton({ variant ='text' , label ='Variables' , color ='primary' , fullWidth  }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);
     const variableDefinitions = useTemplateVariableDefinitions();
+    const externalVariableDefinitions = useTemplateExternalVariableDefinitions();
+    const builtinVariableDefinitions = useBuiltinVariableDefinitions();
     const { setVariableDefinitions  } = useTemplateVariableActions();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
@@ -57,6 +60,8 @@ export function EditVariablesButton({ variant ='text' , label ='Variables' , col
                 "data-testid": "variable-editor",
                 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 { useTemplateVariableDefinitions, useTemplateVariableActions } 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 { 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          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","useTemplateVariableDefinitions","useTemplateVariableActions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","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,SAASC,8BAA8B,EAAEC,0BAA0B,QAAQ,eAAe,CAAC;AAC3F,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,GAAGf,QAAQ,CAAC,KAAK,CAAC,AAAC;IACxE,MAAMgB,mBAAmB,GAAyBV,8BAA8B,EAAE,AAAC;IACnF,MAAM,EAAEW,sBAAsB,CAAA,EAAE,GAAGV,0BAA0B,EAAE,AAAC;IAEhE,MAAMW,kBAAkB,GAAG,IAAM;QAC/BH,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,IAAM;QAChCJ,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACX,WAAW;gBAACgB,WAAW,EAAEf,YAAY,CAACgB,aAAa;0BAClD,cAAA,KAACpB,MAAM;oBACLqB,SAAS,gBAAE,KAACpB,UAAU,KAAG;oBACzBqB,OAAO,EAAEL,kBAAkB;oBAC3BM,YAAU,EAAEnB,YAAY,CAACgB,aAAa;oBACtCX,OAAO,EAAEA,OAAO;oBAChBE,KAAK,EAAEA,KAAK;oBACZC,SAAS,EAAEA,SAAS;oBACpBY,EAAE,EAAE;wBAAEC,UAAU,EAAE,QAAQ;wBAAEC,QAAQ,EAAE,MAAM;qBAAE;8BAE7ChB,KAAK;kBACC;cACG;0BACd,KAACR,MAAM;gBACLyB,MAAM,EAAEd,oBAAoB;gBAC5Be,OAAO,EAAEV,mBAAmB;gBAC5BW,UAAU,EAAE;oBAAEL,EAAE,EAAE;wBAAEM,KAAK,EAAE,KAAK;qBAAE;iBAAE;gBACpCC,aAAW,EAAC,iBAAiB;0BAE7B,cAAA,KAACxB,cAAc;oBACbQ,mBAAmB,EAAEA,mBAAmB;oBACxCiB,QAAQ,EAAEd,mBAAmB;oBAC7Be,QAAQ,EAAE,CAACC,SAA+B,GAAK;wBAC7ClB,sBAAsB,CAACkB,SAAS,CAAC,CAAC;wBAClCpB,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,8 +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 declare function TemplateVariable({ name }: TemplateVariableProps): JSX.Element;
 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;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,eAW/D"}
+{"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

@@ -16,18 +16,20 @@ import { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextFie
 import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
 import { useListVariablePluginValues } from '@perses-dev/plugin-system';
 import { useTemplateVariable, useTemplateVariableActions } from '../../context';
-export function TemplateVariable({ name  }) {
-    var ref;
-    const ctx = useTemplateVariable(name);
-    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+export function TemplateVariable({ name , source  }) {
+    var _ctx_definition;
+    const ctx = useTemplateVariable(name, source);
+    const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
     switch(kind){
         case 'TextVariable':
             return /*#__PURE__*/ _jsx(TextVariable, {
-                name: name
+                name: name,
+                source: source
             });
         case 'ListVariable':
             return /*#__PURE__*/ _jsx(ListVariable, {
-                name: name
+                name: name,
+                source: source
             });
     }
     return /*#__PURE__*/ _jsxs("div", {
@@ -37,37 +39,21 @@ export function TemplateVariable({ name  }) {
         ]
     });
 }
-function ListVariable({ name  }) {
-    var ref, ref1, ref2, ref3;
-    const ctx = useTemplateVariable(name);
-    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);
-        if (variablesOptionsQuery.data) {
-            setVariableOptions(name, variablesOptionsQuery.data);
-        }
-    }, [
-        variablesOptionsQuery,
-        name,
-        setVariableLoading,
-        setVariableOptions
+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
         ] : [];
@@ -86,32 +72,86 @@ function ListVariable({ name  }) {
         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);
+        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, {
         display: 'flex',
@@ -123,22 +163,18 @@ function ListVariable({ name  }) {
                     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) {
                             if (allowAllValue) {
-                                setVariableValue(name, DEFAULT_ALL_VALUE);
+                                setVariableValue(name, DEFAULT_ALL_VALUE, source);
                             }
                             return;
                         }
-                        setVariableValue(name, e.target.value);
+                        setVariableValue(name, e.target.value, source);
                     },
                     multiple: allowMultiple,
                     children: [
@@ -147,12 +183,12 @@ function ListVariable({ name  }) {
                             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))
@@ -163,25 +199,30 @@ function ListVariable({ name  }) {
         })
     });
 }
-function TextVariable({ name  }) {
-    var ref;
-    const { state , definition  } = useTemplateVariable(name);
-    var ref1;
-    const [tempValue, setTempValue] = useState((ref1 = state === null || state === void 0 ? void 0 : state.value) !== null && ref1 !== void 0 ? ref1 : '');
+function TextVariable({ name , source  }) {
+    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),
+        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};\n\nexport function TemplateVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} />;\n    case 'ListVariable':\n      return <ListVariable name={name} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nfunction ListVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\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);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions]);\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);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple]);\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);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue);\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 }: TemplateVariableProps) {\n  const { state, definition } = useTemplateVariable(name);\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)}\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","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,8 +1,16 @@
 /// <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;
+export declare function VariableName(props: {
+    name: string;
+    state: VariableState | undefined;
+}): JSX.Element;
 //# sourceMappingURL=VariableEditor.d.ts.map

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":";AA+BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA4BtD,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA4MA"}
+{"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"}