@perses-dev/dashboards 0.0.0-snapshot-panel-extra-content-2-2767e21 → 0.0.0-snapshot-scatter-chart-embed-8efdfab

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 { TOOLTIP_TEXT } from '../../constants';
-import { useTemplateVariableDefinitions, useTemplateVariableActions } from '../../context';
+import { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
+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);
@@ -39,10 +42,7 @@ export function EditVariablesButton({ variant ='text' , label ='Variables' , col
                     variant: variant,
                     color: color,
                     fullWidth: fullWidth,
-                    sx: {
-                        whiteSpace: 'nowrap',
-                        minWidth: 'auto'
-                    },
+                    sx: editButtonStyle,
                     children: label
                 })
             }),
@@ -57,6 +57,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, editButtonStyle } 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={editButtonStyle}\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","editButtonStyle","useTemplateExternalVariableDefinitions","useTemplateVariableActions","useTemplateVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","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,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,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,GAAGlB,SAAS;IACjE,MAAMmB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0DhB;IAChE,MAAM,EAAEiB,uBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACd;gBAAYqB,aAAanB,aAAaoB;0BACrC,cAAA,KAACzB;oBACC0B,yBAAW,KAACzB;oBACZ0B,SAASL;oBACTM,cAAYvB,aAAaoB;oBACzBb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAIvB;8BAEHO;;;0BAGL,KAACX;gBACC4B,QAAQd;gBACRe,SAASR;gBACTS,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACxB;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5Be,UAAUZ;oBACVa,UAAU,CAACC;wBACThB,uBAAuBgB;wBACvBpB,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;
+    selectedOptions: VariableOption | VariableOption[];
+    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;AAIvD,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAcF,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,eAAe,EAAE,cAAc,GAAG,cAAc,EAAE,CAAC;IAEnD,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CA2FA"}