@perses-dev/plugin-system 0.55.0-beta.0 → 0.55.0-beta.10

package/dist/components/DatasourceSelect/DatasourceSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport {\n  Stack,\n  ListItemText,\n  Chip,\n  IconButton,\n  Box,\n  OutlinedSelectProps,\n  BaseSelectProps,\n  Autocomplete,\n  TextField,\n} from '@mui/material';\nimport { DatasourceSelector, VariableName } from '@perses-dev/spec';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  DatasourceSelectItem,\n  DatasourceSelectItemGroup,\n  DatasourceSelectItemSelector,\n  useListDatasourceSelectItems,\n  useVariableValues,\n  VariableStateMap,\n} from '../../runtime';\nimport { parseVariables } from '../../utils';\n\nconst DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';\nconst VARIABLE_IDENTIFIER = '$';\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\ntype DataSourceOption = {\n  groupEditLink?: string;\n  groupLabel?: string;\n  value: string;\n} & Omit<DatasourceSelectItem, 'selector'> &\n  Omit<DatasourceSelectItem['selector'], 'kind'>;\n\nconst emptyDatasourceOption: DataSourceOption = { name: '', value: '' };\n\nexport type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;\n\nexport interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelectValue;\n  onChange: (next: DatasourceSelectValue) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps): ReactElement {\n  const { datasourcePluginKind, value, project, readOnly, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  const variables = useVariableValues();\n\n  const defaultValue = useMemo<VariableName | DatasourceSelectItemSelector>(() => {\n    if (isVariableDatasource(value)) {\n      return value;\n    }\n\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  const options = useMemo<DataSourceOption[]>(() => {\n    const datasourceOptions = (data || []).flatMap<DataSourceOption>((itemGroup) =>\n      itemGroup.items.map<DataSourceOption>((item) => ({\n        groupLabel: itemGroup.group,\n        groupEditLink: itemGroup.editLink,\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      }))\n    );\n\n    const datasourceOptionsMap = new Map(datasourceOptions.map((option) => [option.name, option]));\n\n    const variableOptions = Object.entries(variables).flatMap<DataSourceOption>(([name, variable]) => {\n      if (Array.isArray(variable.value)) return [];\n\n      const associatedDatasource = datasourceOptionsMap.get(variable.value ?? '');\n      if (!associatedDatasource) return [];\n\n      return {\n        groupLabel: 'Variables',\n        name: `${VARIABLE_IDENTIFIER}${name}`,\n        saved: true,\n        value: `${DATASOURCE_VARIABLE_VALUE_PREFIX}${VARIABLE_IDENTIFIER}${name}`,\n      };\n    });\n\n    return [...datasourceOptions, ...variableOptions];\n  }, [data, variables]);\n\n  // While loading available values, just use an empty datasource option so MUI select doesn't warn about values out of range\n  const optionValue = isLoading\n    ? emptyDatasourceOption\n    : options.find((option) => option.value === selectorToOptionValue(defaultValue));\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange = (selectedOption: DataSourceOption | null): void => {\n    if (selectedOption) {\n      const next = optionValueToSelector(selectedOption?.value || '');\n      onChange(next);\n    } else {\n      onChange({ kind: datasourcePluginKind });\n    }\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = (): void => {};\n\n  return (\n    <Autocomplete<DataSourceOption>\n      readOnly={readOnly}\n      options={options}\n      renderInput={(params) => <TextField {...params} label={others.label} placeholder=\"\" />}\n      groupBy={(option) => option.groupLabel || 'No group'}\n      getOptionLabel={(option) => {\n        return option.name;\n      }}\n      onChange={(_, v) => handleChange(v)}\n      value={optionValue}\n      renderOption={(props, option) => {\n        return (\n          <li {...props} key={option.value}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName name={option.name} overridden={option.overridden} overriding={option.overriding} />\n              </ListItemText>\n              {!option.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {option.groupLabel && option.groupLabel.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={option.groupLabel}\n                    size=\"small\"\n                    onDelete={option.groupEditLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      option.groupEditLink ? (\n                        <IconButton href={option.groupEditLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </li>\n        );\n      }}\n    />\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }): ReactElement {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nexport function selectorToOptionValue(selector: DatasourceSelectItemSelector | VariableName): string {\n  if (isVariableDatasource(selector)) {\n    return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;\n  }\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nexport function optionValueToSelector(optionValue: string): DatasourceSelectValue {\n  if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {\n    return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1]!;\n  }\n\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n\nexport function isVariableDatasource(value: DatasourceSelectValue | undefined): value is VariableName {\n  return typeof value === 'string' && value.startsWith(VARIABLE_IDENTIFIER);\n}\n\nexport const datasourceSelectValueToSelector = (\n  value: DatasourceSelectValue | undefined,\n  variables: VariableStateMap,\n  datasourceSelectItemGroups: DatasourceSelectItemGroup[] | undefined\n): DatasourceSelector | undefined => {\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  const [variableName] = parseVariables(value);\n  const variable = variables[variableName ?? ''];\n\n  // If the variable is not defined or if its value is an array, we cannot determine a selector and return undefined\n  if (!variable || Array.isArray(variable.value)) {\n    return undefined;\n  }\n\n  const associatedDatasource = (datasourceSelectItemGroups || [])\n    .flatMap((itemGroup) => itemGroup.items)\n    .find((datasource) => datasource.name === variable.value);\n\n  // If the variable value is not a datasource, we cannot determine a selector and return undefined\n  if (associatedDatasource === undefined) {\n    return undefined;\n  }\n\n  const datasourceSelector: DatasourceSelector = {\n    kind: associatedDatasource.selector.kind,\n    name: associatedDatasource.selector.name,\n  };\n\n  return datasourceSelector;\n};\n\nexport const useDatasourceSelectValueToSelector = (\n  value: DatasourceSelectValue,\n  datasourcePluginKind: string\n): DatasourceSelector => {\n  const { data } = useListDatasourceSelectItems(datasourcePluginKind);\n  const variables = useVariableValues();\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  return datasourceSelectValueToSelector(value, variables, data) ?? { kind: datasourcePluginKind };\n};\n"],"names":["OpenInNewIcon","Stack","ListItemText","Chip","IconButton","Box","Autocomplete","TextField","useMemo","useListDatasourceSelectItems","useVariableValues","parseVariables","DATASOURCE_VARIABLE_VALUE_PREFIX","VARIABLE_IDENTIFIER","emptyDatasourceOption","name","value","DatasourceSelect","props","datasourcePluginKind","project","readOnly","onChange","others","data","isLoading","variables","defaultValue","isVariableDatasource","group","flatMap","itemGroup","items","find","item","kind","selector","overridden","options","datasourceOptions","map","groupLabel","groupEditLink","editLink","overriding","saved","selectorToOptionValue","datasourceOptionsMap","Map","option","variableOptions","Object","entries","variable","Array","isArray","associatedDatasource","get","optionValue","handleChange","selectedOption","next","optionValueToSelector","fakeActionEvent","renderInput","params","label","placeholder","groupBy","getOptionLabel","_","v","renderOption","li","key","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","disabled","size","onDelete","undefined","deleteIcon","href","target","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","startsWith","split","words","Error","datasourceSelectValueToSelector","datasourceSelectItemGroups","variableName","datasource","datasourceSelector","useDatasourceSelectValueToSelector"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"sourcesContent":["// Copyright 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 type { OutlinedSelectProps, BaseSelectProps } from '@mui/material';\nimport { Stack, ListItemText, Chip, IconButton, Box, Autocomplete, TextField } from '@mui/material';\nimport type { DatasourceSelector, VariableName } from '@perses-dev/spec';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport type {\n  DatasourceSelectItem,\n  DatasourceSelectItemGroup,\n  DatasourceSelectItemSelector,\n  VariableStateMap,\n} from '../../runtime';\nimport { useListDatasourceSelectItems, useVariableValues } from '../../runtime';\nimport { parseVariables } from '../../utils';\n\nconst DATASOURCE_VARIABLE_VALUE_PREFIX = '__DATASOURCE_VARIABLE_VALUE__';\nconst VARIABLE_IDENTIFIER = '$';\n// Props on MUI Select that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\ntype DataSourceOption = {\n  groupEditLink?: string;\n  groupLabel?: string;\n  value: string;\n} & Omit<DatasourceSelectItem, 'selector'> &\n  Omit<DatasourceSelectItem['selector'], 'kind'>;\n\nconst emptyDatasourceOption: DataSourceOption = { name: '', value: '' };\n\nexport type DatasourceSelectValue<T = DatasourceSelector> = T | VariableName;\n\nexport interface DatasourceSelectProps extends Omit<OutlinedSelectProps & BaseSelectProps<string>, OmittedMuiProps> {\n  value: DatasourceSelectValue;\n  onChange: (next: DatasourceSelectValue) => void;\n  datasourcePluginKind: string;\n  project?: string;\n}\n\n/**\n * Displays a MUI input for selecting a Datasource of a particular kind. Note: The 'value' and `onChange` handler for\n * the input deal with a `DatasourceSelector`.\n */\nexport function DatasourceSelect(props: DatasourceSelectProps): ReactElement {\n  const { datasourcePluginKind, value, project, readOnly, onChange, ...others } = props;\n  const { data, isLoading } = useListDatasourceSelectItems(datasourcePluginKind, project);\n  const variables = useVariableValues();\n\n  const defaultValue = useMemo<VariableName | DatasourceSelectItemSelector>(() => {\n    if (isVariableDatasource(value)) {\n      return value;\n    }\n\n    const group = (data ?? [])\n      .flatMap((itemGroup) => itemGroup.items)\n      .find((item) => {\n        return value.kind === item.selector.kind && value.name === item.selector.name && !item.overridden;\n      })?.selector.group;\n    return { ...value, group };\n  }, [value, data]);\n\n  const options = useMemo<DataSourceOption[]>(() => {\n    const datasourceOptions = (data || []).flatMap<DataSourceOption>((itemGroup) =>\n      itemGroup.items.map<DataSourceOption>((item) => ({\n        groupLabel: itemGroup.group,\n        groupEditLink: itemGroup.editLink,\n        name: item.name,\n        overriding: item.overriding,\n        overridden: item.overridden,\n        saved: item.saved ?? true,\n        group: item.selector.group,\n        value: selectorToOptionValue(item.selector),\n      })),\n    );\n\n    const datasourceOptionsMap = new Map(datasourceOptions.map((option) => [option.name, option]));\n\n    const variableOptions = Object.entries(variables).flatMap<DataSourceOption>(([name, variable]) => {\n      if (Array.isArray(variable.value)) return [];\n\n      const associatedDatasource = datasourceOptionsMap.get(variable.value ?? '');\n      if (!associatedDatasource) return [];\n\n      return {\n        groupLabel: 'Variables',\n        name: `${VARIABLE_IDENTIFIER}${name}`,\n        saved: true,\n        value: `${DATASOURCE_VARIABLE_VALUE_PREFIX}${VARIABLE_IDENTIFIER}${name}`,\n      };\n    });\n\n    return [...datasourceOptions, ...variableOptions];\n  }, [data, variables]);\n\n  // While loading available values, just use an empty datasource option so MUI select doesn't warn about values out of range\n  const optionValue = isLoading\n    ? emptyDatasourceOption\n    : options.find((option) => option.value === selectorToOptionValue(defaultValue));\n\n  // When the user makes a selection, convert the string option value back to a DatasourceSelector\n  const handleChange = (selectedOption: DataSourceOption | null): void => {\n    if (selectedOption) {\n      const next = optionValueToSelector(selectedOption?.value || '');\n      onChange(next);\n    } else {\n      onChange({ kind: datasourcePluginKind });\n    }\n  };\n\n  // We use a fake action event when we click on the action of the chip (hijack the \"delete\" feature).\n  // This is because the href link action is on the `deleteIcon` property already, but the `onDelete` property\n  // controls its visibility.\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const fakeActionEvent = (): void => {};\n\n  return (\n    <Autocomplete<DataSourceOption>\n      readOnly={readOnly}\n      options={options}\n      renderInput={(params) => <TextField {...params} label={others.label} placeholder=\"\" />}\n      groupBy={(option) => option.groupLabel || 'No group'}\n      getOptionLabel={(option) => {\n        return option.name;\n      }}\n      onChange={(_, v) => handleChange(v)}\n      value={optionValue}\n      renderOption={(props, option) => {\n        return (\n          <li {...props} key={option.value}>\n            <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" width=\"100%\">\n              <ListItemText>\n                <DatasourceName name={option.name} overridden={option.overridden} overriding={option.overriding} />\n              </ListItemText>\n              {!option.saved && <ListItemText>Save the dashboard to enable this datasource</ListItemText>}\n              <ListItemText style={{ textAlign: 'right' }}>\n                {option.groupLabel && option.groupLabel.length > 0 && (\n                  <Chip\n                    disabled={false}\n                    label={option.groupLabel}\n                    size=\"small\"\n                    onDelete={option.groupEditLink ? fakeActionEvent : undefined}\n                    deleteIcon={\n                      option.groupEditLink ? (\n                        <IconButton href={option.groupEditLink} target=\"_blank\">\n                          <OpenInNewIcon fontSize=\"small\" />\n                        </IconButton>\n                      ) : undefined\n                    }\n                  />\n                )}\n              </ListItemText>\n            </Stack>\n          </li>\n        );\n      }}\n    />\n  );\n}\n\nexport function DatasourceName(props: { name: string; overridden?: boolean; overriding?: boolean }): ReactElement {\n  const { name, overridden, overriding } = props;\n  return (\n    <>\n      {`${name} `}\n      {!overridden && overriding && (\n        <Box display=\"inline\" fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {overridden && '(overridden)'}\n    </>\n  );\n}\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a DatasourceSelectItemSelector,\n * returns a string value like `{kind}_____{group}_____{name}` that can be used as a Select input value.\n * @param selector\n */\nexport function selectorToOptionValue(selector: DatasourceSelectItemSelector | VariableName): string {\n  if (isVariableDatasource(selector)) {\n    return `${DATASOURCE_VARIABLE_VALUE_PREFIX}${selector}`;\n  }\n  return [selector.kind, selector.group ?? '', selector.name ?? ''].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{kind}_____{group}_____{name}`,\n * returns a DatasourceSelector to be used by the query data model.\n * @param optionValue\n */\nexport function optionValueToSelector(optionValue: string): DatasourceSelectValue {\n  if (optionValue.startsWith(DATASOURCE_VARIABLE_VALUE_PREFIX)) {\n    return optionValue.split(DATASOURCE_VARIABLE_VALUE_PREFIX)[1]!;\n  }\n\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const kind = words[0];\n  const name = words[2];\n  if (kind === undefined || name === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    kind,\n    name: name === '' ? undefined : name,\n  };\n}\n\nexport function isVariableDatasource(value: DatasourceSelectValue | undefined): value is VariableName {\n  return typeof value === 'string' && value.startsWith(VARIABLE_IDENTIFIER);\n}\n\nexport const datasourceSelectValueToSelector = (\n  value: DatasourceSelectValue | undefined,\n  variables: VariableStateMap,\n  datasourceSelectItemGroups: DatasourceSelectItemGroup[] | undefined,\n): DatasourceSelector | undefined => {\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  const [variableName] = parseVariables(value);\n  const variable = variables[variableName ?? ''];\n\n  // If the variable is not defined or if its value is an array, we cannot determine a selector and return undefined\n  if (!variable || Array.isArray(variable.value)) {\n    return undefined;\n  }\n\n  const associatedDatasource = (datasourceSelectItemGroups || [])\n    .flatMap((itemGroup) => itemGroup.items)\n    .find((datasource) => datasource.name === variable.value);\n\n  // If the variable value is not a datasource, we cannot determine a selector and return undefined\n  if (associatedDatasource === undefined) {\n    return undefined;\n  }\n\n  const datasourceSelector: DatasourceSelector = {\n    kind: associatedDatasource.selector.kind,\n    name: associatedDatasource.selector.name,\n  };\n\n  return datasourceSelector;\n};\n\nexport const useDatasourceSelectValueToSelector = (\n  value: DatasourceSelectValue,\n  datasourcePluginKind: string,\n): DatasourceSelector => {\n  const { data } = useListDatasourceSelectItems(datasourcePluginKind);\n  const variables = useVariableValues();\n  if (!isVariableDatasource(value)) {\n    return value;\n  }\n\n  return datasourceSelectValueToSelector(value, variables, data) ?? { kind: datasourcePluginKind };\n};\n"],"names":["Stack","ListItemText","Chip","IconButton","Box","Autocomplete","TextField","OpenInNewIcon","useMemo","useListDatasourceSelectItems","useVariableValues","parseVariables","DATASOURCE_VARIABLE_VALUE_PREFIX","VARIABLE_IDENTIFIER","emptyDatasourceOption","name","value","DatasourceSelect","props","datasourcePluginKind","project","readOnly","onChange","others","data","isLoading","variables","defaultValue","isVariableDatasource","group","flatMap","itemGroup","items","find","item","kind","selector","overridden","options","datasourceOptions","map","groupLabel","groupEditLink","editLink","overriding","saved","selectorToOptionValue","datasourceOptionsMap","Map","option","variableOptions","Object","entries","variable","Array","isArray","associatedDatasource","get","optionValue","handleChange","selectedOption","next","optionValueToSelector","fakeActionEvent","renderInput","params","label","placeholder","groupBy","getOptionLabel","_","v","renderOption","li","key","direction","alignItems","justifyContent","width","DatasourceName","style","textAlign","length","disabled","size","onDelete","undefined","deleteIcon","href","target","fontSize","display","fontWeight","color","theme","palette","primary","main","OPTION_VALUE_DELIMITER","join","startsWith","split","words","Error","datasourceSelectValueToSelector","datasourceSelectItemGroups","variableName","datasource","datasourceSelector","useDatasourceSelectValueToSelector"],"mappings":"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"}

package/dist/components/DatasourceSelect/index.js

@@ -10,6 +10,6 @@
 // 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.
-export * from './DatasourceSelect';
+export * from "./DatasourceSelect.js";
 
 //# sourceMappingURL=index.js.map

package/dist/components/DatasourceSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatasourceSelect/index.ts"],"sourcesContent":["// Copyright 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\nexport * from './DatasourceSelect';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB"}
+{"version":3,"sources":["../../../src/components/DatasourceSelect/index.ts"],"sourcesContent":["// Copyright 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\nexport * from './DatasourceSelect';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,wBAAqB"}

package/dist/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProps } from '@mui/material';
+import type { ReactElement } from 'react';
+type DatasourceTestConnectionButtonProps = {
+    testConnection: () => Promise<void>;
+} & Omit<ButtonProps, 'onClick'>;
+export declare const DatasourceTestConnectionButton: ({ testConnection, disabled, ...buttonProps }: DatasourceTestConnectionButtonProps) => ReactElement;
+export {};
+//# sourceMappingURL=DatasourceTestConnectionButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatasourceTestConnectionButton.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,KAAK,mCAAmC,GAAG;IACzC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEjC,eAAO,MAAM,8BAA8B,iDAIxC,mCAAmC,KAAG,YAqBxC,CAAC"}

package/dist/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.js

@@ -0,0 +1,45 @@
+// Copyright 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 } from "react/jsx-runtime";
+import { Button } from "@mui/material";
+import { useSnackbar } from "@perses-dev/components";
+import { useCallback, useState } from "react";
+export const DatasourceTestConnectionButton = ({ testConnection, disabled, ...buttonProps })=>{
+    const { successSnackbar, exceptionSnackbar } = useSnackbar();
+    const [isTesting, setIsTesting] = useState(false);
+    const handleClick = useCallback(async ()=>{
+        setIsTesting(true);
+        try {
+            await testConnection();
+            successSnackbar('Datasource is healthy');
+        } catch (e) {
+            exceptionSnackbar(e instanceof Error ? e : new Error('Datasource is not healthy'));
+        } finally{
+            setIsTesting(false);
+        }
+    }, [
+        testConnection,
+        successSnackbar,
+        exceptionSnackbar
+    ]);
+    return /*#__PURE__*/ _jsx(Button, {
+        onClick: handleClick,
+        color: "info",
+        variant: "outlined",
+        disabled: disabled || isTesting,
+        ...buttonProps,
+        children: "Test Connection"
+    });
+};
+
+//# sourceMappingURL=DatasourceTestConnectionButton.js.map

package/dist/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.tsx"],"sourcesContent":["// Copyright 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 type { ButtonProps } from '@mui/material';\nimport { Button } from '@mui/material';\nimport { useSnackbar } from '@perses-dev/components';\nimport type { ReactElement } from 'react';\nimport { useCallback, useState } from 'react';\n\ntype DatasourceTestConnectionButtonProps = {\n  testConnection: () => Promise<void>;\n} & Omit<ButtonProps, 'onClick'>;\n\nexport const DatasourceTestConnectionButton = ({\n  testConnection,\n  disabled,\n  ...buttonProps\n}: DatasourceTestConnectionButtonProps): ReactElement => {\n  const { successSnackbar, exceptionSnackbar } = useSnackbar();\n  const [isTesting, setIsTesting] = useState(false);\n\n  const handleClick = useCallback(async (): Promise<void> => {\n    setIsTesting(true);\n    try {\n      await testConnection();\n      successSnackbar('Datasource is healthy');\n    } catch (e) {\n      exceptionSnackbar(e instanceof Error ? e : new Error('Datasource is not healthy'));\n    } finally {\n      setIsTesting(false);\n    }\n  }, [testConnection, successSnackbar, exceptionSnackbar]);\n\n  return (\n    <Button onClick={handleClick} color=\"info\" variant=\"outlined\" disabled={disabled || isTesting} {...buttonProps}>\n      Test Connection\n    </Button>\n  );\n};\n"],"names":["Button","useSnackbar","useCallback","useState","DatasourceTestConnectionButton","testConnection","disabled","buttonProps","successSnackbar","exceptionSnackbar","isTesting","setIsTesting","handleClick","e","Error","onClick","color","variant"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAM9C,OAAO,MAAMC,iCAAiC,CAAC,EAC7CC,cAAc,EACdC,QAAQ,EACR,GAAGC,aACiC;IACpC,MAAM,EAAEC,eAAe,EAAEC,iBAAiB,EAAE,GAAGR;IAC/C,MAAM,CAACS,WAAWC,aAAa,GAAGR,SAAS;IAE3C,MAAMS,cAAcV,YAAY;QAC9BS,aAAa;QACb,IAAI;YACF,MAAMN;YACNG,gBAAgB;QAClB,EAAE,OAAOK,GAAG;YACVJ,kBAAkBI,aAAaC,QAAQD,IAAI,IAAIC,MAAM;QACvD,SAAU;YACRH,aAAa;QACf;IACF,GAAG;QAACN;QAAgBG;QAAiBC;KAAkB;IAEvD,qBACE,KAACT;QAAOe,SAASH;QAAaI,OAAM;QAAOC,SAAQ;QAAWX,UAAUA,YAAYI;QAAY,GAAGH,WAAW;kBAAE;;AAIpH,EAAE"}

package/dist/components/DatasourceTestConnectionButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DatasourceTestConnectionButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DatasourceTestConnectionButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceTestConnectionButton/index.ts"],"names":[],"mappings":"AAaA,cAAc,kCAAkC,CAAC"}

package/dist/{cjs/model/alerts-queries.js → components/DatasourceTestConnectionButton/index.js}

@@ -10,7 +10,6 @@
 // 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.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
+export * from "./DatasourceTestConnectionButton.js";
+
+//# sourceMappingURL=index.js.map

package/dist/components/DatasourceTestConnectionButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DatasourceTestConnectionButton/index.ts"],"sourcesContent":["// Copyright 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\nexport * from './DatasourceTestConnectionButton';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,sCAAmC"}

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

@@ -0,0 +1,10 @@
+import type { HTTPProxySpec } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
+interface HTTPHeaderPolicyEditorProps {
+    value: HTTPProxySpec;
+    onChange: (next: HTTPProxySpec) => void;
+    isReadonly?: boolean;
+}
+export declare function HTTPHeaderPolicyEditor({ value, onChange, isReadonly }: HTTPHeaderPolicyEditorProps): ReactElement;
+export {};
+//# sourceMappingURL=HTTPHeaderPolicyEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HTTPHeaderPolicyEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPHeaderPolicyEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAoB1C,UAAU,2BAA2B;IACnC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,2BAA2B,GAAG,YAAY,CAmBjH"}

package/dist/components/HTTPSettingsEditor/HTTPHeaderPolicyEditor.js

@@ -0,0 +1,99 @@
+// Copyright 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 } from "react/jsx-runtime";
+import { Autocomplete, Stack, TextField, Typography } from "@mui/material";
+import { useCallback } from "react";
+const emptyHeaders = [];
+const headerPolicies = [
+    {
+        name: 'allowHeaders',
+        label: 'Allowed headers',
+        otherName: 'dropHeaders',
+        description: 'Only these request headers may be forwarded to the datasource. All other request headers are dropped.'
+    },
+    {
+        name: 'dropHeaders',
+        label: 'Dropped headers',
+        otherName: 'allowHeaders',
+        description: 'These request headers must not be forwarded to the datasource.'
+    }
+];
+export function HTTPHeaderPolicyEditor({ value, onChange, isReadonly }) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        mb: 2,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h5",
+                children: "Request header forwarding"
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                children: "Configure either allowed headers or dropped headers. Clear the current list before using the other. Type a header name and press Enter to add it."
+            }),
+            headerPolicies.map((policy)=>/*#__PURE__*/ _jsx(HeaderPolicyField, {
+                    policy: policy,
+                    value: value,
+                    onChange: onChange,
+                    isReadonly: isReadonly
+                }, policy.name))
+        ]
+    });
+}
+function HeaderPolicyField({ policy, value, onChange, isReadonly }) {
+    const { name, label, otherName, description } = policy;
+    const hasConflict = Boolean(value.allowHeaders?.length && value.dropHeaders?.length);
+    const handleChange = useCallback((_, headers)=>{
+        const nextHeaders = headers.map((header)=>header.trim()).filter(Boolean);
+        onChange({
+            ...value,
+            [name]: nextHeaders.length > 0 ? nextHeaders : undefined
+        });
+    }, [
+        name,
+        value,
+        onChange
+    ]);
+    const renderInput = useCallback((params)=>/*#__PURE__*/ _jsx(TextField, {
+            ...params,
+            label: label,
+            error: hasConflict,
+            helperText: hasConflict ? 'Allowed headers and dropped headers cannot both be configured.' : description,
+            InputProps: {
+                ...params.InputProps,
+                readOnly: isReadonly
+            },
+            InputLabelProps: {
+                ...params.InputLabelProps,
+                shrink: isReadonly ? true : undefined
+            }
+        }), [
+        isReadonly,
+        label,
+        hasConflict,
+        description
+    ]);
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        multiple: true,
+        freeSolo: true,
+        autoSelect: true,
+        options: emptyHeaders,
+        value: value[name] ?? emptyHeaders,
+        readOnly: isReadonly,
+        disabled: Boolean(value[otherName]?.length) && !value[name]?.length,
+        onChange: handleChange,
+        renderInput: renderInput
+    });
+}
+
+//# sourceMappingURL=HTTPHeaderPolicyEditor.js.map

package/dist/components/HTTPSettingsEditor/HTTPHeaderPolicyEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HTTPSettingsEditor/HTTPHeaderPolicyEditor.tsx"],"sourcesContent":["// Copyright 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 type { AutocompleteRenderInputParams } from '@mui/material';\nimport { Autocomplete, Stack, TextField, Typography } from '@mui/material';\nimport type { HTTPProxySpec } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { useCallback } from 'react';\n\nconst emptyHeaders: string[] = [];\nconst headerPolicies = [\n  {\n    name: 'allowHeaders',\n    label: 'Allowed headers',\n    otherName: 'dropHeaders',\n    description:\n      'Only these request headers may be forwarded to the datasource. All other request headers are dropped.',\n  },\n  {\n    name: 'dropHeaders',\n    label: 'Dropped headers',\n    otherName: 'allowHeaders',\n    description: 'These request headers must not be forwarded to the datasource.',\n  },\n] as const;\n\ninterface HTTPHeaderPolicyEditorProps {\n  value: HTTPProxySpec;\n  onChange: (next: HTTPProxySpec) => void;\n  isReadonly?: boolean;\n}\n\nexport function HTTPHeaderPolicyEditor({ value, onChange, isReadonly }: HTTPHeaderPolicyEditorProps): ReactElement {\n  return (\n    <Stack spacing={1} mb={2}>\n      <Typography variant=\"h5\">Request header forwarding</Typography>\n      <Typography variant=\"body2\">\n        Configure either allowed headers or dropped headers. Clear the current list before using the other. Type a\n        header name and press Enter to add it.\n      </Typography>\n      {headerPolicies.map((policy) => (\n        <HeaderPolicyField\n          key={policy.name}\n          policy={policy}\n          value={value}\n          onChange={onChange}\n          isReadonly={isReadonly}\n        />\n      ))}\n    </Stack>\n  );\n}\n\ninterface HeaderPolicyFieldProps extends HTTPHeaderPolicyEditorProps {\n  policy: (typeof headerPolicies)[number];\n}\n\nfunction HeaderPolicyField({ policy, value, onChange, isReadonly }: HeaderPolicyFieldProps): ReactElement {\n  const { name, label, otherName, description } = policy;\n  const hasConflict = Boolean(value.allowHeaders?.length && value.dropHeaders?.length);\n  const handleChange = useCallback(\n    (_: unknown, headers: string[]): void => {\n      const nextHeaders = headers.map((header) => header.trim()).filter(Boolean);\n      onChange({ ...value, [name]: nextHeaders.length > 0 ? nextHeaders : undefined });\n    },\n    [name, value, onChange],\n  );\n  const renderInput = useCallback(\n    (params: AutocompleteRenderInputParams): ReactElement => (\n      <TextField\n        {...params}\n        label={label}\n        error={hasConflict}\n        helperText={hasConflict ? 'Allowed headers and dropped headers cannot both be configured.' : description}\n        InputProps={{\n          ...params.InputProps,\n          readOnly: isReadonly,\n        }}\n        InputLabelProps={{ ...params.InputLabelProps, shrink: isReadonly ? true : undefined }}\n      />\n    ),\n    [isReadonly, label, hasConflict, description],\n  );\n\n  return (\n    <Autocomplete\n      multiple\n      freeSolo\n      autoSelect\n      options={emptyHeaders}\n      value={value[name] ?? emptyHeaders}\n      readOnly={isReadonly}\n      disabled={Boolean(value[otherName]?.length) && !value[name]?.length}\n      onChange={handleChange}\n      renderInput={renderInput}\n    />\n  );\n}\n"],"names":["Autocomplete","Stack","TextField","Typography","useCallback","emptyHeaders","headerPolicies","name","label","otherName","description","HTTPHeaderPolicyEditor","value","onChange","isReadonly","spacing","mb","variant","map","policy","HeaderPolicyField","hasConflict","Boolean","allowHeaders","length","dropHeaders","handleChange","_","headers","nextHeaders","header","trim","filter","undefined","renderInput","params","error","helperText","InputProps","readOnly","InputLabelProps","shrink","multiple","freeSolo","autoSelect","options","disabled"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,YAAY,EAAEC,KAAK,EAAEC,SAAS,EAAEC,UAAU,QAAQ,gBAAgB;AAG3E,SAASC,WAAW,QAAQ,QAAQ;AAEpC,MAAMC,eAAyB,EAAE;AACjC,MAAMC,iBAAiB;IACrB;QACEC,MAAM;QACNC,OAAO;QACPC,WAAW;QACXC,aACE;IACJ;IACA;QACEH,MAAM;QACNC,OAAO;QACPC,WAAW;QACXC,aAAa;IACf;CACD;AAQD,OAAO,SAASC,uBAAuB,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAA+B;IACjG,qBACE,MAACb;QAAMc,SAAS;QAAGC,IAAI;;0BACrB,KAACb;gBAAWc,SAAQ;0BAAK;;0BACzB,KAACd;gBAAWc,SAAQ;0BAAQ;;YAI3BX,eAAeY,GAAG,CAAC,CAACC,uBACnB,KAACC;oBAECD,QAAQA;oBACRP,OAAOA;oBACPC,UAAUA;oBACVC,YAAYA;mBAJPK,OAAOZ,IAAI;;;AAS1B;AAMA,SAASa,kBAAkB,EAAED,MAAM,EAAEP,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAA0B;IACxF,MAAM,EAAEP,IAAI,EAAEC,KAAK,EAAEC,SAAS,EAAEC,WAAW,EAAE,GAAGS;IAChD,MAAME,cAAcC,QAAQV,MAAMW,YAAY,EAAEC,UAAUZ,MAAMa,WAAW,EAAED;IAC7E,MAAME,eAAetB,YACnB,CAACuB,GAAYC;QACX,MAAMC,cAAcD,QAAQV,GAAG,CAAC,CAACY,SAAWA,OAAOC,IAAI,IAAIC,MAAM,CAACV;QAClET,SAAS;YAAE,GAAGD,KAAK;YAAE,CAACL,KAAK,EAAEsB,YAAYL,MAAM,GAAG,IAAIK,cAAcI;QAAU;IAChF,GACA;QAAC1B;QAAMK;QAAOC;KAAS;IAEzB,MAAMqB,cAAc9B,YAClB,CAAC+B,uBACC,KAACjC;YACE,GAAGiC,MAAM;YACV3B,OAAOA;YACP4B,OAAOf;YACPgB,YAAYhB,cAAc,mEAAmEX;YAC7F4B,YAAY;gBACV,GAAGH,OAAOG,UAAU;gBACpBC,UAAUzB;YACZ;YACA0B,iBAAiB;gBAAE,GAAGL,OAAOK,eAAe;gBAAEC,QAAQ3B,aAAa,OAAOmB;YAAU;YAGxF;QAACnB;QAAYN;QAAOa;QAAaX;KAAY;IAG/C,qBACE,KAACV;QACC0C,QAAQ;QACRC,QAAQ;QACRC,UAAU;QACVC,SAASxC;QACTO,OAAOA,KAAK,CAACL,KAAK,IAAIF;QACtBkC,UAAUzB;QACVgC,UAAUxB,QAAQV,KAAK,CAACH,UAAU,EAAEe,WAAW,CAACZ,KAAK,CAACL,KAAK,EAAEiB;QAC7DX,UAAUa;QACVQ,aAAaA;;AAGnB"}

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

@@ -1,11 +1,13 @@
-import { ReactElement } from 'react';
-import { HTTPDatasourceSpec } from '@perses-dev/spec';
+import type { HTTPDatasourceSpec } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
 export interface HTTPSettingsEditor {
     value: HTTPDatasourceSpec;
     onChange: (next: HTTPDatasourceSpec) => void;
     isReadonly?: boolean;
     initialSpecDirect: HTTPDatasourceSpec;
     initialSpecProxy: HTTPDatasourceSpec;
+    testConnection?: () => Promise<void>;
 }
+/** Edits direct URLs and proxy settings, including mutually exclusive allow/drop request header lists. */
 export declare function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement;
 //# sourceMappingURL=HTTPSettingsEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HTTPSettingsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"names":[],"mappings":"AAcA,OAAc,EAAY,YAAY,EAAY,MAAM,OAAO,CAAC;AAKhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAatD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,kBAAkB,CAAC;IACtC,gBAAgB,EAAE,kBAAkB,CAAC;CACtC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CA8b1E"}
+{"version":3,"file":"HTTPSettingsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAiB,MAAM,kBAAkB,CAAC;AAI1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAoB1C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,kBAAkB,CAAC;IACtC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC;AAED,0GAA0G;AAC1G,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAwe1E"}

package/dist/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -11,15 +11,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { Grid, IconButton, MenuItem, TextField, Typography } from '@mui/material';
-import React, { Fragment, useState } from 'react';
-import { produce } from 'immer';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
-import MinusIcon from 'mdi-material-ui/Minus';
-import PlusIcon from 'mdi-material-ui/Plus';
-import { OptionsEditorRadios } from '../OptionsEditorRadios';
-export function HTTPSettingsEditor(props) {
-    const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = props;
+import { Box, Grid, IconButton, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { produce } from "immer";
+import MinusIcon from "mdi-material-ui/Minus";
+import PlusIcon from "mdi-material-ui/Plus";
+import React, { Fragment, useCallback, useState } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { z } from "zod";
+import { DatasourceTestConnectionButton } from "../DatasourceTestConnectionButton/index.js";
+import { OptionsEditorRadios } from "../OptionsEditorRadios/index.js";
+import { HTTPHeaderPolicyEditor } from "./HTTPHeaderPolicyEditor.js";
+const urlSchema = z.string().url();
+/** Edits direct URLs and proxy settings, including mutually exclusive allow/drop request header lists. */ export function HTTPSettingsEditor(props) {
+    const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy, testConnection } = props;
     const strDirect = 'Direct access';
     const strProxy = 'Proxy';
     // Initialize Proxy mode by default, if neither direct nor proxy mode is selected.
@@ -71,6 +75,16 @@ export function HTTPSettingsEditor(props) {
             }
         }));
     };
+    const handleHeaderPolicyChange = useCallback((next)=>{
+        onChange(produce(value, (draft)=>{
+            if (draft.proxy !== undefined) {
+                draft.proxy.spec = next;
+            }
+        }));
+    }, [
+        value,
+        onChange
+    ]);
     const tabs = [
         {
             label: strProxy,
@@ -104,6 +118,15 @@ export function HTTPSettingsEditor(props) {
                                 }
                             })
                     }),
+                    testConnection && /*#__PURE__*/ _jsx(Box, {
+                        mb: 2,
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        children: /*#__PURE__*/ _jsx(DatasourceTestConnectionButton, {
+                            testConnection: testConnection,
+                            disabled: !urlSchema.safeParse(value.proxy?.spec.url).success
+                        })
+                    }),
                     /*#__PURE__*/ _jsx(Typography, {
                         variant: "h5",
                         mb: 2,
@@ -407,13 +430,59 @@ export function HTTPSettingsEditor(props) {
                             })
                         ]
                     }),
+                    value.proxy && /*#__PURE__*/ _jsx(HTTPHeaderPolicyEditor, {
+                        value: value.proxy.spec,
+                        isReadonly: isReadonly,
+                        onChange: handleHeaderPolicyChange
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 1,
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "h5",
+                                children: "Secret"
+                            }),
+                            /*#__PURE__*/ _jsx(Controller, {
+                                name: "Secret",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                        ...field,
+                                        fullWidth: true,
+                                        label: "Secret",
+                                        value: value.proxy?.spec.secret || '',
+                                        error: !!fieldState.error,
+                                        helperText: fieldState.error?.message,
+                                        InputProps: {
+                                            readOnly: isReadonly
+                                        },
+                                        InputLabelProps: {
+                                            shrink: isReadonly ? true : undefined
+                                        },
+                                        onChange: (e)=>{
+                                            field.onChange(e);
+                                            onChange(produce(value, (draft)=>{
+                                                if (draft.proxy !== undefined) {
+                                                    draft.proxy.spec.secret = e.target.value;
+                                                }
+                                            }));
+                                        }
+                                    })
+                            })
+                        ]
+                    })
+                ]
+            })
+        },
+        {
+            label: strDirect,
+            content: /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
                     /*#__PURE__*/ _jsx(Controller, {
-                        name: "Secret",
+                        name: "URL",
                         render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                 ...field,
                                 fullWidth: true,
-                                label: "Secret",
-                                value: value.proxy?.spec.secret || '',
+                                label: "URL",
+                                value: value.directUrl || '',
                                 error: !!fieldState.error,
                                 helperText: fieldState.error?.message,
                                 InputProps: {
@@ -425,41 +494,22 @@ export function HTTPSettingsEditor(props) {
                                 onChange: (e)=>{
                                     field.onChange(e);
                                     onChange(produce(value, (draft)=>{
-                                        if (draft.proxy !== undefined) {
-                                            draft.proxy.spec.secret = e.target.value;
-                                        }
+                                        draft.directUrl = e.target.value;
                                     }));
                                 }
                             })
+                    }),
+                    testConnection && /*#__PURE__*/ _jsx(Box, {
+                        my: 2,
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        children: /*#__PURE__*/ _jsx(DatasourceTestConnectionButton, {
+                            testConnection: testConnection,
+                            disabled: !urlSchema.safeParse(value.directUrl).success
+                        })
                     })
                 ]
             })
-        },
-        {
-            label: strDirect,
-            content: /*#__PURE__*/ _jsx(Controller, {
-                name: "URL",
-                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
-                        ...field,
-                        fullWidth: true,
-                        label: "URL",
-                        value: value.directUrl || '',
-                        error: !!fieldState.error,
-                        helperText: fieldState.error?.message,
-                        InputProps: {
-                            readOnly: isReadonly
-                        },
-                        InputLabelProps: {
-                            shrink: isReadonly ? true : undefined
-                        },
-                        onChange: (e)=>{
-                            field.onChange(e);
-                            onChange(produce(value, (draft)=>{
-                                draft.directUrl = e.target.value;
-                            }));
-                        }
-                    })
-            })
         }
     ];
     // Use of findIndex instead of providing hardcoded values to avoid desynchronisatio or