@perses-dev/plugin-system 0.55.0-beta.1 → 0.55.0-beta.3

package/dist/components/Annotations/AnnotationEditorForm/AnnotationPreview.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { AnnotationSpec } from '@perses-dev/spec';
 import { CardProps } from '@mui/material';
+import { AnnotationSpec } from '@perses-dev/spec';
+import { ReactNode } from 'react';
 export interface AnnotationPreviewProps extends CardProps {
     spec: AnnotationSpec;
 }

package/dist/components/Annotations/AnnotationEditorForm/AnnotationPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationPreview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAkB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAIL,SAAS,EAOV,MAAM,eAAe,CAAC;AAsDvB,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,IAAI,EAAE,cAAc,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,GAAG,SAAS,CA0DvF"}
+{"version":3,"file":"AnnotationPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationPreview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAIL,SAAS,EAOV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAkB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAqDrD,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,IAAI,EAAE,cAAc,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,GAAG,SAAS,CA0DvF"}

package/dist/components/Annotations/AnnotationEditorForm/AnnotationPreview.js

@@ -11,10 +11,10 @@ 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 { useMemo, useState } from 'react';
 import { Card, CardContent, CardHeader, Chip, CircularProgress, Divider, IconButton, Stack, Typography } from '@mui/material';
 import { getDateAndTime, InfoTooltip, useTimeZone } from '@perses-dev/components';
 import AlertIcon from 'mdi-material-ui/Alert';
+import { useMemo, useState } from 'react';
 import { useAnnotationData } from '../../../runtime';
 function AnnotationPreviewCard({ value, formatWithUserTimeZone, ...props }) {
     const start = getDateAndTime(value.start, formatWithUserTimeZone);

package/dist/components/Annotations/AnnotationEditorForm/AnnotationPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationPreview.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 { ReactNode, useMemo, useState } from 'react';\nimport { AnnotationData, AnnotationSpec } from '@perses-dev/spec';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardProps,\n  Chip,\n  CircularProgress,\n  Divider,\n  IconButton,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport { getDateAndTime, InfoTooltip, useTimeZone } from '@perses-dev/components';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport { useAnnotationData } from '../../../runtime';\n\ninterface AnnotationPreviewCardProps extends CardProps {\n  value: AnnotationData;\n  formatWithUserTimeZone: (date: Date, format: string) => string;\n}\n\nfunction AnnotationPreviewCard({ value, formatWithUserTimeZone, ...props }: AnnotationPreviewCardProps): ReactNode {\n  const start = getDateAndTime(value.start, formatWithUserTimeZone);\n  const end = value.end !== undefined ? getDateAndTime(value.start, formatWithUserTimeZone) : null;\n\n  const tags = useMemo(() => {\n    return Object.entries(value.tags ?? []).map(([key, value]) => {\n      return { key: key, value: value };\n    });\n  }, [value.tags]);\n\n  return (\n    <Card {...props}>\n      <CardContent>\n        <Stack gap={2}>\n          {value.title && <Typography variant=\"h3\">{value.title}</Typography>}\n          {value.legend && <Typography>{value.legend}</Typography>}\n\n          <Stack flexWrap=\"wrap\" direction=\"row\" gap={0.5}>\n            {tags.map((tag) => (\n              <Chip size=\"small\" key={`${tag.key}=${tag.value}`} label={`${tag.key}: ${tag.value}`} />\n            ))}\n          </Stack>\n        </Stack>\n\n        <Divider sx={{ marginY: 2 }} />\n\n        <Stack gap={0.5} direction=\"row\">\n          <Typography variant=\"caption\">\n            {start.formattedDate} - <strong>{start.formattedTime}</strong>\n          </Typography>\n          {end && (\n            <>\n              <Typography variant=\"caption\">{' → '}</Typography>\n              <Typography variant=\"caption\">\n                {end.formattedDate} - <strong>{end.formattedTime}</strong>\n              </Typography>\n            </>\n          )}\n        </Stack>\n      </CardContent>\n    </Card>\n  );\n}\n\nexport interface AnnotationPreviewProps extends CardProps {\n  spec: AnnotationSpec;\n}\n\nexport function AnnotationPreview({ spec, ...props }: AnnotationPreviewProps): ReactNode {\n  const { data, isFetching, error } = useAnnotationData(spec);\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const [showAll, setShowAll] = useState<boolean>(false);\n  const annotationsToShow = showAll ? data : data?.slice(0, 1);\n  let notShown = 0;\n  if (data && data?.length > 0 && annotationsToShow) {\n    notShown = data.length - annotationsToShow.length;\n  }\n\n  const stateIndicator = useMemo((): ReactNode | undefined => {\n    if (isFetching) {\n      return <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />;\n    } else if (error) {\n      return (\n        <InfoTooltip description={error.toString()}>\n          <IconButton aria-label=\"preview errors\" size=\"small\">\n            <AlertIcon\n              fontSize=\"inherit\"\n              sx={{\n                color: (theme) => theme.palette.error.main,\n              }}\n            />\n          </IconButton>\n        </InfoTooltip>\n      );\n    }\n  }, [isFetching, error]);\n\n  return (\n    <Card variant=\"outlined\" {...props}>\n      <CardHeader\n        title={\n          <Stack direction=\"row\" justifyContent=\"space-between\">\n            <Typography variant=\"h4\">Preview Annotations</Typography>\n            {stateIndicator}\n          </Stack>\n        }\n      />\n      <CardContent sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, paddingY: 0 }}>\n        {annotationsToShow?.map((item, index) => (\n          <AnnotationPreviewCard\n            key={index}\n            value={item}\n            formatWithUserTimeZone={formatWithUserTimeZone}\n            sx={{ width: '100%' }}\n          />\n        ))}\n        {notShown > 0 && (\n          <Chip onClick={() => setShowAll(true)} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />\n        )}\n        {showAll && data && data.length > 1 && (\n          <Chip onClick={() => setShowAll(false)} variant=\"outlined\" size=\"small\" label=\"-\" />\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":["useMemo","useState","Card","CardContent","CardHeader","Chip","CircularProgress","Divider","IconButton","Stack","Typography","getDateAndTime","InfoTooltip","useTimeZone","AlertIcon","useAnnotationData","AnnotationPreviewCard","value","formatWithUserTimeZone","props","start","end","undefined","tags","Object","entries","map","key","gap","title","variant","legend","flexWrap","direction","tag","size","label","sx","marginY","formattedDate","strong","formattedTime","AnnotationPreview","spec","data","isFetching","error","showAll","setShowAll","annotationsToShow","slice","notShown","length","stateIndicator","aria-label","description","toString","fontSize","color","theme","palette","main","justifyContent","display","paddingY","item","index","width","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationPreview.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 {\n  Card,\n  CardContent,\n  CardHeader,\n  CardProps,\n  Chip,\n  CircularProgress,\n  Divider,\n  IconButton,\n  Stack,\n  Typography,\n} from '@mui/material';\nimport { getDateAndTime, InfoTooltip, useTimeZone } from '@perses-dev/components';\nimport { AnnotationData, AnnotationSpec } from '@perses-dev/spec';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport { ReactNode, useMemo, useState } from 'react';\n\nimport { useAnnotationData } from '../../../runtime';\n\ninterface AnnotationPreviewCardProps extends CardProps {\n  value: AnnotationData;\n  formatWithUserTimeZone: (date: Date, format: string) => string;\n}\n\nfunction AnnotationPreviewCard({ value, formatWithUserTimeZone, ...props }: AnnotationPreviewCardProps): ReactNode {\n  const start = getDateAndTime(value.start, formatWithUserTimeZone);\n  const end = value.end !== undefined ? getDateAndTime(value.start, formatWithUserTimeZone) : null;\n\n  const tags = useMemo(() => {\n    return Object.entries(value.tags ?? []).map(([key, value]) => {\n      return { key: key, value: value };\n    });\n  }, [value.tags]);\n\n  return (\n    <Card {...props}>\n      <CardContent>\n        <Stack gap={2}>\n          {value.title && <Typography variant=\"h3\">{value.title}</Typography>}\n          {value.legend && <Typography>{value.legend}</Typography>}\n\n          <Stack flexWrap=\"wrap\" direction=\"row\" gap={0.5}>\n            {tags.map((tag) => (\n              <Chip size=\"small\" key={`${tag.key}=${tag.value}`} label={`${tag.key}: ${tag.value}`} />\n            ))}\n          </Stack>\n        </Stack>\n\n        <Divider sx={{ marginY: 2 }} />\n\n        <Stack gap={0.5} direction=\"row\">\n          <Typography variant=\"caption\">\n            {start.formattedDate} - <strong>{start.formattedTime}</strong>\n          </Typography>\n          {end && (\n            <>\n              <Typography variant=\"caption\">{' → '}</Typography>\n              <Typography variant=\"caption\">\n                {end.formattedDate} - <strong>{end.formattedTime}</strong>\n              </Typography>\n            </>\n          )}\n        </Stack>\n      </CardContent>\n    </Card>\n  );\n}\n\nexport interface AnnotationPreviewProps extends CardProps {\n  spec: AnnotationSpec;\n}\n\nexport function AnnotationPreview({ spec, ...props }: AnnotationPreviewProps): ReactNode {\n  const { data, isFetching, error } = useAnnotationData(spec);\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const [showAll, setShowAll] = useState<boolean>(false);\n  const annotationsToShow = showAll ? data : data?.slice(0, 1);\n  let notShown = 0;\n  if (data && data?.length > 0 && annotationsToShow) {\n    notShown = data.length - annotationsToShow.length;\n  }\n\n  const stateIndicator = useMemo((): ReactNode | undefined => {\n    if (isFetching) {\n      return <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />;\n    } else if (error) {\n      return (\n        <InfoTooltip description={error.toString()}>\n          <IconButton aria-label=\"preview errors\" size=\"small\">\n            <AlertIcon\n              fontSize=\"inherit\"\n              sx={{\n                color: (theme) => theme.palette.error.main,\n              }}\n            />\n          </IconButton>\n        </InfoTooltip>\n      );\n    }\n  }, [isFetching, error]);\n\n  return (\n    <Card variant=\"outlined\" {...props}>\n      <CardHeader\n        title={\n          <Stack direction=\"row\" justifyContent=\"space-between\">\n            <Typography variant=\"h4\">Preview Annotations</Typography>\n            {stateIndicator}\n          </Stack>\n        }\n      />\n      <CardContent sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, paddingY: 0 }}>\n        {annotationsToShow?.map((item, index) => (\n          <AnnotationPreviewCard\n            key={index}\n            value={item}\n            formatWithUserTimeZone={formatWithUserTimeZone}\n            sx={{ width: '100%' }}\n          />\n        ))}\n        {notShown > 0 && (\n          <Chip onClick={() => setShowAll(true)} variant=\"outlined\" size=\"small\" label={`+${notShown} more`} />\n        )}\n        {showAll && data && data.length > 1 && (\n          <Chip onClick={() => setShowAll(false)} variant=\"outlined\" size=\"small\" label=\"-\" />\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":["Card","CardContent","CardHeader","Chip","CircularProgress","Divider","IconButton","Stack","Typography","getDateAndTime","InfoTooltip","useTimeZone","AlertIcon","useMemo","useState","useAnnotationData","AnnotationPreviewCard","value","formatWithUserTimeZone","props","start","end","undefined","tags","Object","entries","map","key","gap","title","variant","legend","flexWrap","direction","tag","size","label","sx","marginY","formattedDate","strong","formattedTime","AnnotationPreview","spec","data","isFetching","error","showAll","setShowAll","annotationsToShow","slice","notShown","length","stateIndicator","aria-label","description","toString","fontSize","color","theme","palette","main","justifyContent","display","paddingY","item","index","width","onClick"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAA0C,eAAe,EAAE,MAAM,aAAa,CAAC;AAUtF,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAuB/F"}
+{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAA0C,eAAe,EAAE,MAAM,aAAa,CAAC;AAUtF,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAuB/F"}

package/dist/components/CalculationSelector/CalculationSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '../../model'; // TODO weird this is part of the model from the core package ...\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps): ReactElement {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption): void => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <SettingsAutocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          onChange={handleCalculationChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","disableClearable"],"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,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AAEpF,SAASC,mBAAmB,QAA4C,cAAc,CAAC,iEAAiE;AAGxJ,MAAMC,eAAgDC,OAAOC,OAAO,CAACH,qBAAqBI,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IACzG,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAOA,OAAO,SAASC,oBAAoB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IAC/E,MAAMC,0BAA0B,CAACC,GAAYC;QAC3CH,SAASG,SAASP,EAAE;IACtB;IAEA,MAAMQ,aAAab,mBAAmB,CAACQ,MAAM;IAE7C,qBACE,KAACV;QACCgB,OAAM;QACNC,uBACE,KAAChB;YACCS,OAAO;gBACL,GAAGK,UAAU;gBACbR,IAAIG;YACN;YACAQ,SAASf;YACTQ,UAAUC;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport { ReactElement } from 'react';\n\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '../../model'; // TODO weird this is part of the model from the core package ...\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps): ReactElement {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption): void => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <SettingsAutocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          onChange={handleCalculationChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","disableClearable"],"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,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AAGpF,SAASC,mBAAmB,QAA4C,cAAc,CAAC,iEAAiE;AAGxJ,MAAMC,eAAgDC,OAAOC,OAAO,CAACH,qBAAqBI,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IACzG,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAOA,OAAO,SAASC,oBAAoB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IAC/E,MAAMC,0BAA0B,CAACC,GAAYC;QAC3CH,SAASG,SAASP,EAAE;IACtB;IAEA,MAAMQ,aAAab,mBAAmB,CAACQ,MAAM;IAE7C,qBACE,KAACV;QACCgB,OAAM;QACNC,uBACE,KAAChB;YACCS,OAAO;gBACL,GAAGK,UAAU;gBACbR,IAAIG;YACN;YACAQ,SAASf;YACTQ,UAAUC;YACVO,gBAAgB;;;AAK1B"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.d.ts

@@ -1,5 +1,5 @@
+import { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/client';
 import { DispatchWithoutAction, ReactElement } from 'react';
-import { Action, DatasourceDefinition } from '@perses-dev/client';
 interface DatasourceEditorFormProps {
     initialDatasourceDefinition: DatasourceDefinition;
     action: Action;
@@ -9,6 +9,7 @@ interface DatasourceEditorFormProps {
     onSave: (def: DatasourceDefinition) => void;
     onClose: DispatchWithoutAction;
     onDelete?: DispatchWithoutAction;
+    testConnection?: (spec: DatasourceSpec, healthCheckPath: string) => Promise<void>;
 }
 export declare function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAIlE,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,CA8MnF"}
+{"version":3,"file":"DatasourceEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,MAAM,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAElF,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAMtE,UAAU,yBAAyB;IACjC,2BAA2B,EAAE,oBAAoB,CAAC;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,qBAAqB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACnF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,CAyNnF"}

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js

@@ -19,7 +19,7 @@ import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useValidationSchemas } from '../../context';
 import { PluginEditor } from '../PluginEditor';
 export function DatasourceEditorForm(props) {
-    const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;
+    const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete, testConnection } = props;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
     const titleAction = getTitleAction(action, isDraft);
     const submitText = getSubmitText(action, isDraft);
@@ -241,7 +241,8 @@ export function DatasourceEditorForm(props) {
                                         kind: v.selection.kind,
                                         spec: v.spec
                                     });
-                                }
+                                },
+                                testConnection: testConnection
                             })
                     })
                 ]

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.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 { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DiscardChangesConfirmationDialog, FormActions, getSubmitText, getTitleAction } from '@perses-dev/components';\nimport { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { Action, DatasourceDefinition } from '@perses-dev/client';\nimport { useValidationSchemas } from '../../context';\nimport { PluginEditor } from '../PluginEditor';\n\ninterface DatasourceEditorFormProps {\n  initialDatasourceDefinition: DatasourceDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: DatasourceDefinition) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement {\n  const { initialDatasourceDefinition, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete } = props;\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { datasourceEditorSchema } = useValidationSchemas();\n  const form = useForm<DatasourceDefinition>({\n    resolver: zodResolver(datasourceEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialDatasourceDefinition,\n  });\n\n  /*\n   * Remove empty fields that are optional\n   */\n  function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n    const result = { ...data };\n    if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n    onSave(clearFormData(data));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                control={form.control}\n                name=\"spec.default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    label=\"Set as default\"\n                    control={\n                      <Switch\n                        {...field}\n                        checked={!!field.value}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                        }}\n                      />\n                    }\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <Controller\n          control={form.control}\n          name=\"spec.plugin\"\n          render={({ field }) => (\n            <PluginEditor\n              width=\"100%\"\n              pluginTypes={['Datasource']}\n              pluginKindLabel=\"Source\"\n              withRunQueryButton={false}\n              value={{\n                selection: {\n                  type: 'Datasource',\n                  kind: field.value.kind,\n                },\n                spec: field.value.spec,\n              }}\n              isReadonly={action === 'read'}\n              onChange={(v) => {\n                field.onChange({ kind: v.selection.kind, spec: v.spec });\n              }}\n            />\n          )}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["zodResolver","Box","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","DiscardChangesConfirmationDialog","FormActions","getSubmitText","getTitleAction","useState","Controller","FormProvider","useForm","useValidationSchemas","PluginEditor","DatasourceEditorForm","props","initialDatasourceDefinition","action","isDraft","isReadonly","onActionChange","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","disabled","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","withRunQueryButton","selection","type","v","isOpen","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.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 { zodResolver } from '@hookform/resolvers/zod';\nimport { Box, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/client';\nimport { DiscardChangesConfirmationDialog, FormActions, getSubmitText, getTitleAction } from '@perses-dev/components';\nimport { DispatchWithoutAction, ReactElement, useState } from 'react';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\n\nimport { useValidationSchemas } from '../../context';\nimport { PluginEditor } from '../PluginEditor';\n\ninterface DatasourceEditorFormProps {\n  initialDatasourceDefinition: DatasourceDefinition;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: DatasourceDefinition) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n  testConnection?: (spec: DatasourceSpec, healthCheckPath: string) => Promise<void>;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps): ReactElement {\n  const {\n    initialDatasourceDefinition,\n    action,\n    isDraft,\n    isReadonly,\n    onActionChange,\n    onSave,\n    onClose,\n    onDelete,\n    testConnection,\n  } = props;\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { datasourceEditorSchema } = useValidationSchemas();\n  const form = useForm<DatasourceDefinition>({\n    resolver: zodResolver(datasourceEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialDatasourceDefinition,\n  });\n\n  /*\n   * Remove empty fields that are optional\n   */\n  function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n    const result = { ...data };\n    if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n    onSave(clearFormData(data));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                control={form.control}\n                name=\"spec.default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    label=\"Set as default\"\n                    control={\n                      <Switch\n                        {...field}\n                        checked={!!field.value}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                        }}\n                      />\n                    }\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <Controller\n          control={form.control}\n          name=\"spec.plugin\"\n          render={({ field }) => (\n            <PluginEditor\n              width=\"100%\"\n              pluginTypes={['Datasource']}\n              pluginKindLabel=\"Source\"\n              withRunQueryButton={false}\n              value={{\n                selection: {\n                  type: 'Datasource',\n                  kind: field.value.kind,\n                },\n                spec: field.value.spec,\n              }}\n              isReadonly={action === 'read'}\n              onChange={(v) => {\n                field.onChange({ kind: v.selection.kind, spec: v.spec });\n              }}\n              testConnection={testConnection}\n            />\n          )}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["zodResolver","Box","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","DiscardChangesConfirmationDialog","FormActions","getSubmitText","getTitleAction","useState","Controller","FormProvider","useForm","useValidationSchemas","PluginEditor","DatasourceEditorForm","props","initialDatasourceDefinition","action","isDraft","isReadonly","onActionChange","onSave","onClose","onDelete","testConnection","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","disabled","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","withRunQueryButton","selection","type","v","isOpen","onDiscardChanges"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAML,mBAAmB,EACnB,eAAe,EAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAEL,yBAAyB,EACzB,4BAA4B,EAG5B,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAOvB,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,GAAG,YAAY,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAkH3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH;AAKD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,GAAG,YAAY,GAAG,MAAM,CAKnG;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,qBAAqB,CAehF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,IAAI,YAAY,CAEpG;AAED,eAAO,MAAM,+BAA+B,UACnC,qBAAqB,GAAG,SAAS,aAC7B,gBAAgB,8BACC,yBAAyB,EAAE,GAAG,SAAS,KAClE,kBAAkB,GAAG,SA4BvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,UACtC,qBAAqB,wBACN,MAAM,KAC3B,kBAQF,CAAC"}
+{"version":3,"file":"DatasourceSelect.d.ts","sourceRoot":"","sources":["../../../src/components/DatasourceSelect/DatasourceSelect.tsx"],"names":[],"mappings":"AAaA,OAAO,EAML,mBAAmB,EACnB,eAAe,EAGhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,OAAO,EAEL,yBAAyB,EACzB,4BAA4B,EAG5B,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAOvB,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAWzD,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,GAAG,YAAY,CAAC;AAE7E,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC;IACjH,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAkH3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAahH;AAKD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,GAAG,YAAY,GAAG,MAAM,CAKnG;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM,GAAG,qBAAqB,CAehF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,KAAK,IAAI,YAAY,CAEpG;AAED,eAAO,MAAM,+BAA+B,GAC1C,OAAO,qBAAqB,GAAG,SAAS,EACxC,WAAW,gBAAgB,EAC3B,4BAA4B,yBAAyB,EAAE,GAAG,SAAS,KAClE,kBAAkB,GAAG,SA4BvB,CAAC;AAEF,eAAO,MAAM,kCAAkC,GAC7C,OAAO,qBAAqB,EAC5B,sBAAsB,MAAM,KAC3B,kBAQF,CAAC"}

package/dist/components/DatasourceSelect/DatasourceSelect.js

@@ -12,8 +12,8 @@ import { createElement as _createElement } from "react";
 // 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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';
 import { Stack, ListItemText, Chip, IconButton, Box, Autocomplete, TextField } from '@mui/material';
+import OpenInNewIcon from 'mdi-material-ui/OpenInNew';
 import { useMemo } from 'react';
 import { useListDatasourceSelectItems, useVariableValues } from '../../runtime';
 import { parseVariables } from '../../utils';

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 {\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 OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport { ReactElement, useMemo } from 'react';\n\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":["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/DatasourceTestConnectionButton/DatasourceTestConnectionButton.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from '@mui/material';
+import { 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,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAE5D,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,GAAI,8CAI5C,mCAAmC,KAAG,YAqBxC,CAAC"}

package/dist/components/DatasourceTestConnectionButton/DatasourceTestConnectionButton.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 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 { 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 { Button, ButtonProps } from '@mui/material';\nimport { useSnackbar } from '@perses-dev/components';\nimport { ReactElement, 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;AAEjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAAuBC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAM5D,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/components/DatasourceTestConnectionButton/index.js

@@ -0,0 +1,15 @@
+// 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.
+export * from './DatasourceTestConnectionButton';
+
+//# 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,mCAAmC"}

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

@@ -1,11 +1,12 @@
-import { ReactElement } from 'react';
 import { HTTPDatasourceSpec } from '@perses-dev/spec';
+import { ReactElement } from 'react';
 export interface HTTPSettingsEditor {
     value: HTTPDatasourceSpec;
     onChange: (next: HTTPDatasourceSpec) => void;
     isReadonly?: boolean;
     initialSpecDirect: HTTPDatasourceSpec;
     initialSpecProxy: HTTPDatasourceSpec;
+    testConnection?: () => Promise<void>;
 }
 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,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAc,EAAY,YAAY,EAAY,MAAM,OAAO,CAAC;AAkBhE,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,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAgd1E"}

package/dist/components/HTTPSettingsEditor/HTTPSettingsEditor.js

@@ -11,15 +11,18 @@ 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 { Box, Grid, IconButton, MenuItem, TextField, Typography } from '@mui/material';
 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 React, { Fragment, useState } from 'react';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { DatasourceTestConnectionButton } from '../DatasourceTestConnectionButton';
 import { OptionsEditorRadios } from '../OptionsEditorRadios';
+const urlSchema = z.string().url();
 export function HTTPSettingsEditor(props) {
-    const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = 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.
@@ -104,6 +107,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,
@@ -437,28 +449,41 @@ export function HTTPSettingsEditor(props) {
         },
         {
             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;
-                            }));
-                        }
+            content: /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__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;
+                                    }));
+                                }
+                            })
+                    }),
+                    testConnection && /*#__PURE__*/ _jsx(Box, {
+                        my: 2,
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        children: /*#__PURE__*/ _jsx(DatasourceTestConnectionButton, {
+                            testConnection: testConnection,
+                            disabled: !urlSchema.safeParse(value.directUrl).success
+                        })
                     })
+                ]
             })
         }
     ];