@perses-dev/dashboards 0.37.2 → 0.39.0

package/dist/components/Variables/TemplateVariable.js

@@ -14,20 +14,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';
 import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
+import { useListVariablePluginValues } from '@perses-dev/plugin-system';
 import { useTemplateVariable, useTemplateVariableActions } from '../../context';
-import { useListVariablePluginValues } from './variable-model';
-export function TemplateVariable({ name  }) {
+export function TemplateVariable({ name , source  }) {
     var ref;
-    const ctx = useTemplateVariable(name);
+    const ctx = useTemplateVariable(name, source);
     const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.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,9 +39,9 @@ export function TemplateVariable({ name  }) {
         ]
     });
 }
-function ListVariable({ name  }) {
+function ListVariable({ name , source  }) {
     var ref, ref1, ref2, ref3;
-    const ctx = useTemplateVariable(name);
+    const ctx = useTemplateVariable(name, source);
     const definition = ctx.definition;
     const variablesOptionsQuery = useListVariablePluginValues(definition);
     const { setVariableValue , setVariableLoading , setVariableOptions  } = useTemplateVariableActions();
@@ -48,15 +50,16 @@ function ListVariable({ name  }) {
     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);
+        setVariableLoading(name, variablesOptionsQuery.isFetching, source);
         if (variablesOptionsQuery.data) {
-            setVariableOptions(name, variablesOptionsQuery.data);
+            setVariableOptions(name, variablesOptionsQuery.data, source);
         }
     }, [
         variablesOptionsQuery,
         name,
         setVariableLoading,
-        setVariableOptions
+        setVariableOptions,
+        source
     ]);
     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;
@@ -104,14 +107,15 @@ function ListVariable({ name  }) {
         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);
+            setVariableValue(name, firstOption.value, source);
         }
     }, [
         finalOptions,
         setVariableValue,
         value,
         name,
-        allowMultiple
+        allowMultiple,
+        source
     ]);
     return /*#__PURE__*/ _jsx(Box, {
         display: 'flex',
@@ -134,11 +138,11 @@ function ListVariable({ name  }) {
                         // 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: [
@@ -163,9 +167,9 @@ function ListVariable({ name  }) {
         })
     });
 }
-function TextVariable({ name  }) {
+function TextVariable({ name , source  }) {
     var ref;
-    const { state , definition  } = useTemplateVariable(name);
+    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 : '');
     const { setVariableValue  } = useTemplateVariableActions();
@@ -179,7 +183,7 @@ function TextVariable({ name  }) {
     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
     });

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 { useTemplateVariable, useTemplateVariableActions } from '../../context';\nimport { useListVariablePluginValues } from './variable-model';\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","useTemplateVariable","useTemplateVariableActions","useListVariablePluginValues","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 { 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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"}

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

@@ -1,8 +1,15 @@
 /// <reference types="react" />
 import { 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[];
     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;AA8BtD,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,eA+LA"}
+{"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"}