@perses-dev/plugin-system 0.51.0-beta.1 → 0.51.0-rc.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { RequestHeaders, HTTPDatasourceSpec } from '@perses-dev/core';\nimport { Grid, IconButton, MenuItem, TextField, Typography } from '@mui/material';\nimport React, { Fragment, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Controller } from 'react-hook-form';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { OptionsEditorRadios } from '../OptionsEditorRadios';\n\nexport interface HTTPSettingsEditor {\n  value: HTTPDatasourceSpec;\n  onChange: (next: HTTPDatasourceSpec) => void;\n  isReadonly?: boolean;\n  initialSpecDirect: HTTPDatasourceSpec;\n  initialSpecProxy: HTTPDatasourceSpec;\n}\n\nexport function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement {\n  const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = props;\n  const strDirect = 'Direct access';\n  const strProxy = 'Proxy';\n\n  // utilitary function used for headers when renaming a property\n  // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.\n  const buildNewHeaders = (\n    oldHeaders: RequestHeaders | undefined,\n    oldName: string,\n    newName: string\n  ): RequestHeaders | undefined => {\n    if (oldHeaders === undefined) return oldHeaders;\n    const keys = Object.keys(oldHeaders);\n    const newHeaders = keys.reduce<Record<string, string>>((acc, val) => {\n      if (val === oldName) {\n        acc[newName] = oldHeaders[oldName] || '';\n      } else {\n        acc[val] = oldHeaders[val] || '';\n      }\n      return acc;\n    }, {});\n\n    return { ...newHeaders };\n  };\n\n  const tabs = [\n    {\n      label: strDirect,\n      content: (\n        <Controller\n          name=\"URL\"\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"URL\"\n              value={value.directUrl || ''}\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              InputProps={{\n                readOnly: isReadonly,\n              }}\n              InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n              onChange={(e) => {\n                field.onChange(e);\n                onChange(\n                  produce(value, (draft) => {\n                    draft.directUrl = e.target.value;\n                  })\n                );\n              }}\n            />\n          )}\n        />\n      ),\n    },\n    {\n      label: strProxy,\n      content: (\n        <>\n          <Controller\n            name=\"URL\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                fullWidth\n                label=\"URL\"\n                value={value.proxy?.spec.url || ''}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                InputProps={{\n                  readOnly: isReadonly,\n                }}\n                InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                onChange={(e) => {\n                  field.onChange(e);\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.url = e.target.value;\n                      }\n                    })\n                  );\n                }}\n                sx={{ mb: 2 }}\n              />\n            )}\n          />\n          <Typography variant=\"h4\" mb={2}>\n            Allowed endpoints\n          </Typography>\n          <Grid container spacing={2} mb={2}>\n            {value.proxy?.spec.allowedEndpoints && value.proxy?.spec.allowedEndpoints.length !== 0 ? (\n              value.proxy.spec.allowedEndpoints.map(({ endpointPattern, method }, i) => {\n                return (\n                  <Fragment key={i}>\n                    <Grid item xs={8}>\n                      <Controller\n                        name={`Endpoint pattern ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Endpoint pattern\"\n                            value={endpointPattern}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map(\n                                      (item, itemIndex) => {\n                                        if (i === itemIndex) {\n                                          return {\n                                            endpointPattern: e.target.value,\n                                            method: item.method,\n                                          };\n                                        } else {\n                                          return item;\n                                        }\n                                      }\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={3}>\n                      <Controller\n                        name={`Method ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            select\n                            fullWidth\n                            label=\"Method\"\n                            value={method}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map(\n                                      (item, itemIndex) => {\n                                        if (i === itemIndex) {\n                                          return {\n                                            endpointPattern: item.endpointPattern,\n                                            method: e.target.value,\n                                          };\n                                        } else {\n                                          return item;\n                                        }\n                                      }\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MenuItem value=\"GET\">GET</MenuItem>\n                            <MenuItem value=\"POST\">POST</MenuItem>\n                            <MenuItem value=\"PUT\">PUT</MenuItem>\n                            <MenuItem value=\"PATCH\">PATCH</MenuItem>\n                            <MenuItem value=\"DELETE\">DELETE</MenuItem>\n                          </TextField>\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={1}>\n                      <Controller\n                        name={`Remove Endpoint ${i}`}\n                        render={({ field }) => (\n                          <IconButton\n                            {...field}\n                            disabled={isReadonly}\n                            // Remove the given allowed endpoint from the list\n                            onClick={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = [\n                                      ...(draft.proxy.spec.allowedEndpoints?.filter((item, itemIndex) => {\n                                        return itemIndex !== i;\n                                      }) || []),\n                                    ];\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MinusIcon />\n                          </IconButton>\n                        )}\n                      />\n                    </Grid>\n                  </Fragment>\n                );\n              })\n            ) : (\n              <Grid item xs={4}>\n                <Typography sx={{ fontStyle: 'italic' }}>None</Typography>\n              </Grid>\n            )}\n            <Grid item xs={12} sx={{ paddingTop: '0px !important', paddingLeft: '5px !important' }}>\n              <IconButton\n                disabled={isReadonly}\n                // Add a new (empty) allowed endpoint to the list\n                onClick={() =>\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.allowedEndpoints = [\n                          ...(draft.proxy.spec.allowedEndpoints ?? []),\n                          { endpointPattern: '', method: '' },\n                        ];\n                      }\n                    })\n                  )\n                }\n              >\n                <PlusIcon />\n              </IconButton>\n            </Grid>\n          </Grid>\n          <Typography variant=\"h4\" mb={2}>\n            Request Headers\n          </Typography>\n          <Grid container spacing={2} mb={2}>\n            {value.proxy?.spec.headers &&\n              Object.keys(value.proxy.spec.headers).map((headerName, i) => {\n                return (\n                  <Fragment key={i}>\n                    <Grid item xs={4}>\n                      <Controller\n                        name={`Header name ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Header name\"\n                            value={headerName}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = buildNewHeaders(\n                                      draft.proxy.spec.headers,\n                                      headerName,\n                                      e.target.value\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={7}>\n                      <Controller\n                        name={`Header value ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Header value\"\n                            value={value.proxy?.spec.headers?.[headerName]}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = {\n                                      ...draft.proxy.spec.headers,\n                                      [headerName]: e.target.value,\n                                    };\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={1}>\n                      <Controller\n                        name={`Remove Header ${i}`}\n                        render={({ field }) => (\n                          <IconButton\n                            {...field}\n                            disabled={isReadonly}\n                            // Remove the given header from the list\n                            onClick={(e) => {\n                              field.onChange(e);\n                              const newHeaders = { ...value.proxy?.spec.headers };\n                              delete newHeaders[headerName];\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = newHeaders;\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MinusIcon />\n                          </IconButton>\n                        )}\n                      />\n                    </Grid>\n                  </Fragment>\n                );\n              })}\n            <Grid item xs={12} sx={{ paddingTop: '0px !important', paddingLeft: '5px !important' }}>\n              <IconButton\n                disabled={isReadonly}\n                // Add a new (empty) header to the list\n                onClick={() =>\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.headers = { ...draft.proxy.spec.headers, '': '' };\n                      }\n                    })\n                  )\n                }\n              >\n                <PlusIcon />\n              </IconButton>\n            </Grid>\n          </Grid>\n\n          <Controller\n            name=\"Secret\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                fullWidth\n                label=\"Secret\"\n                value={value.proxy?.spec.secret || ''}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                InputProps={{\n                  readOnly: isReadonly,\n                }}\n                InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                onChange={(e) => {\n                  field.onChange(e);\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.secret = e.target.value;\n                      }\n                    })\n                  );\n                }}\n              />\n            )}\n          />\n        </>\n      ),\n    },\n  ];\n\n  // Use of findIndex instead of providing hardcoded values to avoid desynchronisatio or\n  // bug in case the tabs get eventually swapped in the future.\n  const directModeId = tabs.findIndex((tab) => tab.label === strDirect);\n  const proxyModeId = tabs.findIndex((tab) => tab.label === strProxy);\n\n  // In \"update datasource\" case, set defaultTab to the mode that this datasource is currently relying on.\n  // Otherwise (create datasource), set defaultTab to Direct access.\n  const defaultTab = value.proxy ? proxyModeId : directModeId;\n\n  // For better user experience, save previous states in mind for both mode.\n  // This avoids losing everything when the user changes their mind back.\n  const [previousSpecDirect, setPreviousSpecDirect] = useState(initialSpecDirect);\n  const [previousSpecProxy, setPreviousSpecProxy] = useState(initialSpecProxy);\n\n  // When changing mode, remove previous mode's config + append default values for the new mode.\n  const handleModeChange = (v: number): void => {\n    if (tabs[v]?.label === strDirect) {\n      setPreviousSpecProxy(value);\n\n      // Copy all settings (for example, scrapeInterval), except 'proxy'\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { proxy, ...newValue } = value;\n      onChange({ ...newValue, directUrl: previousSpecDirect.directUrl });\n    } else if (tabs[v]?.label === strProxy) {\n      setPreviousSpecDirect(value);\n\n      // Copy all settings (for example, scrapeInterval), except 'directUrl'\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { directUrl, ...newValue } = value;\n      onChange({ ...newValue, proxy: previousSpecProxy.proxy });\n    }\n  };\n\n  return (\n    <>\n      <Typography variant=\"h4\" mt={2}>\n        HTTP Settings\n      </Typography>\n      <OptionsEditorRadios\n        isReadonly={isReadonly}\n        tabs={tabs}\n        defaultTab={defaultTab}\n        onModeChange={handleModeChange}\n      />\n    </>\n  );\n}\n"],"names":["Grid","IconButton","MenuItem","TextField","Typography","React","Fragment","useState","produce","Controller","MinusIcon","PlusIcon","OptionsEditorRadios","HTTPSettingsEditor","props","value","onChange","isReadonly","initialSpecDirect","initialSpecProxy","strDirect","strProxy","buildNewHeaders","oldHeaders","oldName","newName","undefined","keys","Object","newHeaders","reduce","acc","val","tabs","label","content","name","render","field","fieldState","fullWidth","directUrl","error","helperText","message","InputProps","readOnly","InputLabelProps","shrink","e","draft","target","proxy","spec","url","sx","mb","variant","container","spacing","allowedEndpoints","length","map","endpointPattern","method","i","item","xs","itemIndex","select","disabled","onClick","filter","fontStyle","paddingTop","paddingLeft","headers","headerName","secret","directModeId","findIndex","tab","proxyModeId","defaultTab","previousSpecDirect","setPreviousSpecDirect","previousSpecProxy","setPreviousSpecProxy","handleModeChange","v","newValue","mt","onModeChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HTTPSettingsEditor/HTTPSettingsEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { RequestHeaders, HTTPDatasourceSpec } from '@perses-dev/core';\nimport { Grid, IconButton, MenuItem, TextField, Typography } from '@mui/material';\nimport React, { Fragment, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Controller } from 'react-hook-form';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { OptionsEditorRadios } from '../OptionsEditorRadios';\n\nexport interface HTTPSettingsEditor {\n  value: HTTPDatasourceSpec;\n  onChange: (next: HTTPDatasourceSpec) => void;\n  isReadonly?: boolean;\n  initialSpecDirect: HTTPDatasourceSpec;\n  initialSpecProxy: HTTPDatasourceSpec;\n}\n\nexport function HTTPSettingsEditor(props: HTTPSettingsEditor): ReactElement {\n  const { value, onChange, isReadonly, initialSpecDirect, initialSpecProxy } = props;\n  const strDirect = 'Direct access';\n  const strProxy = 'Proxy';\n\n  // Initialize Proxy mode by default, if neither direct nor proxy mode is selected.\n  if (!value.directUrl && !value.proxy) {\n    Object.assign(value, initialSpecProxy);\n  }\n\n  // utilitary function used for headers when renaming a property\n  // -> TODO it would be cleaner to manipulate headers as an intermediary list instead, to avoid doing this.\n  const buildNewHeaders = (\n    oldHeaders: RequestHeaders | undefined,\n    oldName: string,\n    newName: string\n  ): RequestHeaders | undefined => {\n    if (oldHeaders === undefined) return oldHeaders;\n    const keys = Object.keys(oldHeaders);\n    const newHeaders = keys.reduce<Record<string, string>>((acc, val) => {\n      if (val === oldName) {\n        acc[newName] = oldHeaders[oldName] || '';\n      } else {\n        acc[val] = oldHeaders[val] || '';\n      }\n      return acc;\n    }, {});\n\n    return { ...newHeaders };\n  };\n\n  const tabs = [\n    {\n      label: strDirect,\n      content: (\n        <Controller\n          name=\"URL\"\n          render={({ field, fieldState }) => (\n            <TextField\n              {...field}\n              fullWidth\n              label=\"URL\"\n              value={value.directUrl || ''}\n              error={!!fieldState.error}\n              helperText={fieldState.error?.message}\n              InputProps={{\n                readOnly: isReadonly,\n              }}\n              InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n              onChange={(e) => {\n                field.onChange(e);\n                onChange(\n                  produce(value, (draft) => {\n                    draft.directUrl = e.target.value;\n                  })\n                );\n              }}\n            />\n          )}\n        />\n      ),\n    },\n    {\n      label: strProxy,\n      content: (\n        <>\n          <Controller\n            name=\"URL\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                fullWidth\n                label=\"URL\"\n                value={value.proxy?.spec.url || ''}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                InputProps={{\n                  readOnly: isReadonly,\n                }}\n                InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                onChange={(e) => {\n                  field.onChange(e);\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.url = e.target.value;\n                      }\n                    })\n                  );\n                }}\n                sx={{ mb: 2 }}\n              />\n            )}\n          />\n          <Typography variant=\"h4\" mb={2}>\n            Allowed endpoints\n          </Typography>\n          <Grid container spacing={2} mb={2}>\n            {value.proxy?.spec.allowedEndpoints && value.proxy?.spec.allowedEndpoints.length !== 0 ? (\n              value.proxy.spec.allowedEndpoints.map(({ endpointPattern, method }, i) => {\n                return (\n                  <Fragment key={i}>\n                    <Grid item xs={8}>\n                      <Controller\n                        name={`Endpoint pattern ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Endpoint pattern\"\n                            value={endpointPattern}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map(\n                                      (item, itemIndex) => {\n                                        if (i === itemIndex) {\n                                          return {\n                                            endpointPattern: e.target.value,\n                                            method: item.method,\n                                          };\n                                        } else {\n                                          return item;\n                                        }\n                                      }\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={3}>\n                      <Controller\n                        name={`Method ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            select\n                            fullWidth\n                            label=\"Method\"\n                            value={method}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = draft.proxy.spec.allowedEndpoints?.map(\n                                      (item, itemIndex) => {\n                                        if (i === itemIndex) {\n                                          return {\n                                            endpointPattern: item.endpointPattern,\n                                            method: e.target.value,\n                                          };\n                                        } else {\n                                          return item;\n                                        }\n                                      }\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MenuItem value=\"GET\">GET</MenuItem>\n                            <MenuItem value=\"POST\">POST</MenuItem>\n                            <MenuItem value=\"PUT\">PUT</MenuItem>\n                            <MenuItem value=\"PATCH\">PATCH</MenuItem>\n                            <MenuItem value=\"DELETE\">DELETE</MenuItem>\n                          </TextField>\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={1}>\n                      <Controller\n                        name={`Remove Endpoint ${i}`}\n                        render={({ field }) => (\n                          <IconButton\n                            {...field}\n                            disabled={isReadonly}\n                            // Remove the given allowed endpoint from the list\n                            onClick={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.allowedEndpoints = [\n                                      ...(draft.proxy.spec.allowedEndpoints?.filter((item, itemIndex) => {\n                                        return itemIndex !== i;\n                                      }) || []),\n                                    ];\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MinusIcon />\n                          </IconButton>\n                        )}\n                      />\n                    </Grid>\n                  </Fragment>\n                );\n              })\n            ) : (\n              <Grid item xs={4}>\n                <Typography sx={{ fontStyle: 'italic' }}>None</Typography>\n              </Grid>\n            )}\n            <Grid item xs={12} sx={{ paddingTop: '0px !important', paddingLeft: '5px !important' }}>\n              <IconButton\n                disabled={isReadonly}\n                // Add a new (empty) allowed endpoint to the list\n                onClick={() =>\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.allowedEndpoints = [\n                          ...(draft.proxy.spec.allowedEndpoints ?? []),\n                          { endpointPattern: '', method: '' },\n                        ];\n                      }\n                    })\n                  )\n                }\n              >\n                <PlusIcon />\n              </IconButton>\n            </Grid>\n          </Grid>\n          <Typography variant=\"h4\" mb={2}>\n            Request Headers\n          </Typography>\n          <Grid container spacing={2} mb={2}>\n            {value.proxy?.spec.headers &&\n              Object.keys(value.proxy.spec.headers).map((headerName, i) => {\n                return (\n                  <Fragment key={i}>\n                    <Grid item xs={4}>\n                      <Controller\n                        name={`Header name ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Header name\"\n                            value={headerName}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = buildNewHeaders(\n                                      draft.proxy.spec.headers,\n                                      headerName,\n                                      e.target.value\n                                    );\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={7}>\n                      <Controller\n                        name={`Header value ${i}`}\n                        render={({ field, fieldState }) => (\n                          <TextField\n                            {...field}\n                            fullWidth\n                            label=\"Header value\"\n                            value={value.proxy?.spec.headers?.[headerName]}\n                            error={!!fieldState.error}\n                            helperText={fieldState.error?.message}\n                            InputProps={{\n                              readOnly: isReadonly,\n                            }}\n                            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                            onChange={(e) => {\n                              field.onChange(e);\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = {\n                                      ...draft.proxy.spec.headers,\n                                      [headerName]: e.target.value,\n                                    };\n                                  }\n                                })\n                              );\n                            }}\n                          />\n                        )}\n                      />\n                    </Grid>\n                    <Grid item xs={1}>\n                      <Controller\n                        name={`Remove Header ${i}`}\n                        render={({ field }) => (\n                          <IconButton\n                            {...field}\n                            disabled={isReadonly}\n                            // Remove the given header from the list\n                            onClick={(e) => {\n                              field.onChange(e);\n                              const newHeaders = { ...value.proxy?.spec.headers };\n                              delete newHeaders[headerName];\n                              onChange(\n                                produce(value, (draft) => {\n                                  if (draft.proxy !== undefined) {\n                                    draft.proxy.spec.headers = newHeaders;\n                                  }\n                                })\n                              );\n                            }}\n                          >\n                            <MinusIcon />\n                          </IconButton>\n                        )}\n                      />\n                    </Grid>\n                  </Fragment>\n                );\n              })}\n            <Grid item xs={12} sx={{ paddingTop: '0px !important', paddingLeft: '5px !important' }}>\n              <IconButton\n                disabled={isReadonly}\n                // Add a new (empty) header to the list\n                onClick={() =>\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.headers = { ...draft.proxy.spec.headers, '': '' };\n                      }\n                    })\n                  )\n                }\n              >\n                <PlusIcon />\n              </IconButton>\n            </Grid>\n          </Grid>\n\n          <Controller\n            name=\"Secret\"\n            render={({ field, fieldState }) => (\n              <TextField\n                {...field}\n                fullWidth\n                label=\"Secret\"\n                value={value.proxy?.spec.secret || ''}\n                error={!!fieldState.error}\n                helperText={fieldState.error?.message}\n                InputProps={{\n                  readOnly: isReadonly,\n                }}\n                InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                onChange={(e) => {\n                  field.onChange(e);\n                  onChange(\n                    produce(value, (draft) => {\n                      if (draft.proxy !== undefined) {\n                        draft.proxy.spec.secret = e.target.value;\n                      }\n                    })\n                  );\n                }}\n              />\n            )}\n          />\n        </>\n      ),\n    },\n  ];\n\n  // Use of findIndex instead of providing hardcoded values to avoid desynchronisatio or\n  // bug in case the tabs get eventually swapped in the future.\n  const directModeId = tabs.findIndex((tab) => tab.label === strDirect);\n  const proxyModeId = tabs.findIndex((tab) => tab.label === strProxy);\n\n  // Set defaultTab to the mode that this datasource is currently relying on.\n  const defaultTab = value.proxy ? proxyModeId : directModeId;\n\n  // For better user experience, save previous states in mind for both mode.\n  // This avoids losing everything when the user changes their mind back.\n  const [previousSpecDirect, setPreviousSpecDirect] = useState(initialSpecDirect);\n  const [previousSpecProxy, setPreviousSpecProxy] = useState(initialSpecProxy);\n\n  // When changing mode, remove previous mode's config + append default values for the new mode.\n  const handleModeChange = (v: number): void => {\n    if (tabs[v]?.label === strDirect) {\n      setPreviousSpecProxy(value);\n\n      // Copy all settings (for example, scrapeInterval), except 'proxy'\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { proxy, ...newValue } = value;\n      onChange({ ...newValue, directUrl: previousSpecDirect.directUrl });\n    } else if (tabs[v]?.label === strProxy) {\n      setPreviousSpecDirect(value);\n\n      // Copy all settings (for example, scrapeInterval), except 'directUrl'\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { directUrl, ...newValue } = value;\n      onChange({ ...newValue, proxy: previousSpecProxy.proxy });\n    }\n  };\n\n  return (\n    <>\n      <Typography variant=\"h4\" mt={2}>\n        HTTP Settings\n      </Typography>\n      <OptionsEditorRadios\n        isReadonly={isReadonly}\n        tabs={tabs}\n        defaultTab={defaultTab}\n        onModeChange={handleModeChange}\n      />\n    </>\n  );\n}\n"],"names":["Grid","IconButton","MenuItem","TextField","Typography","React","Fragment","useState","produce","Controller","MinusIcon","PlusIcon","OptionsEditorRadios","HTTPSettingsEditor","props","value","onChange","isReadonly","initialSpecDirect","initialSpecProxy","strDirect","strProxy","directUrl","proxy","Object","assign","buildNewHeaders","oldHeaders","oldName","newName","undefined","keys","newHeaders","reduce","acc","val","tabs","label","content","name","render","field","fieldState","fullWidth","error","helperText","message","InputProps","readOnly","InputLabelProps","shrink","e","draft","target","spec","url","sx","mb","variant","container","spacing","allowedEndpoints","length","map","endpointPattern","method","i","item","xs","itemIndex","select","disabled","onClick","filter","fontStyle","paddingTop","paddingLeft","headers","headerName","secret","directModeId","findIndex","tab","proxyModeId","defaultTab","previousSpecDirect","setPreviousSpecDirect","previousSpecProxy","setPreviousSpecProxy","handleModeChange","v","newValue","mt","onModeChange"],"mappings":"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"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -28,7 +28,7 @@ function useDefaultQueryDefinition(queryTypes) {
     const { defaultPluginKinds } = usePluginRegistry();
     const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
     const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {
-        throwOnError: true,
+        useErrorBoundary: true,
         enabled: true
     });
     // This default query definition is used if no query is provided initially or when we add a new query

package/dist/components/MultiQueryEditor/MultiQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    throwOnError: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\nexport function MultiQueryEditor({ queryTypes, queries = [], onChange }: MultiQueryEditorProps): ReactElement {\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);\n\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","spec","name","defaultQueryPlugin","throwOnError","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","queries","onChange","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\nexport function MultiQueryEditor({ queryTypes, queries = [], onChange }: MultiQueryEditorProps): ReactElement {\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);\n\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","queries","onChange","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -19,14 +19,14 @@ import { MultiQueryEditor } from '../MultiQueryEditor';
 export function PanelSpecEditor(props) {
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
-    const { data: plugin, isPending, error } = usePlugin('Panel', kind);
+    const { data: plugin, isLoading, error } = usePlugin('Panel', kind);
     if (error) {
         return /*#__PURE__*/ _jsx(ErrorAlert, {
             error: error
         });
     }
     // TODO: Proper loading indicator
-    if (isPending) {
+    if (isLoading) {
         return null;
     }
     if (plugin === undefined) {

package/dist/components/PanelSpecEditor/PanelSpecEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { ReactElement } from 'react';\nimport { QueryCountProvider, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps): ReactElement | null {\n  const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isPending, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isPending) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n}\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","QueryCountProvider","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","control","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isPending","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","json","JSON","parse","queryCount","length"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,UAAU,EAAEC,WAAW,QAAQ,yBAAyB;AAE7E,SAAkBC,UAAU,QAAQ,kBAAkB;AAEtD,SAASC,kBAAkB,EAAEC,SAAS,QAAQ,gBAAgB;AAE9D,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,gBAAgB,QAAQ,sBAAsB;AAUvD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,OAAO,EAAEC,eAAe,EAAEC,YAAY,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGL;IACxF,MAAM,EAAEM,IAAI,EAAE,GAAGJ,gBAAgBK,IAAI,CAACC,MAAM;IAC5C,MAAM,EAAEC,MAAMD,MAAM,EAAEE,SAAS,EAAEC,KAAK,EAAE,GAAGf,UAAU,SAASU;IAE9D,IAAIK,OAAO;QACT,qBAAO,KAACpB;YAAWoB,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAIF,WAAWI,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,4BAA4B,EAAEC,eAAe,EAAE,GAAGP;IAC1D,IAAIQ,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;QACpBC,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,KAACzB;gBACCO,SAASA;gBACTmB,MAAK;gBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACxB;wBACCyB,YAAYf,OAAOgB,mBAAmB,IAAI,EAAE;wBAC5CC,SAASvB,gBAAgBK,IAAI,CAACkB,OAAO,IAAI,EAAE;wBAC3CC,UAAU,CAACD;4BACTH,MAAMI,QAAQ,CAACD;4BACfrB,gBAAgBqB;wBAClB;;;QAKV;IACF;IAEA,IAAIX,iCAAiCF,WAAW;QAC9CI,OAAOA,KAAKW,MAAM,CAChBb,6BAA6Bc,GAAG,CAAC,CAAC,EAAEV,KAAK,EAAEC,SAASU,sBAAsB,EAAE,GAAM,CAAA;gBAChFX;gBACAC,uBACE,KAACzB;oBACCO,SAASA;oBACTmB,MAAK;oBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACO;4BACCC,OAAO5B,gBAAgBK,IAAI,CAACC,MAAM,CAACD,IAAI;4BACvCmB,UAAU,CAACnB;gCACTe,MAAMI,QAAQ,CAACnB;gCACfF,mBAAmBE;4BACrB;;;YAKV,CAAA;IAEJ;IAEA,sDAAsD;IACtDS,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAAC1B;YAAYQ,SAASA;;IACjC;IACAe,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBACE,KAACzB;YACCO,SAASA;YACTmB,MAAK;YACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAC9B;oBACCuC,WAAU;oBACVD,OAAO5B;oBACPwB,UAAU,CAACM;wBACTV,MAAMI,QAAQ,CAACO,KAAKC,KAAK,CAACF;wBAC1B7B,aAAa6B;oBACf;;;IAKV;IAEA,qBACE,KAACrC;QAAmBwC,YAAY,AAACjC,CAAAA,gBAAgBK,IAAI,CAACkB,OAAO,IAAI,EAAE,AAAD,EAAGW,MAAM;kBACzE,cAAA,KAACvC;YAAoCmB,MAAMA;WAAnBA,KAAKoB,MAAM;;AAGzC"}
+{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { ReactElement } from 'react';\nimport { QueryCountProvider, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps): ReactElement | null {\n  const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n}\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","QueryCountProvider","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","control","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","json","JSON","parse","queryCount","length"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,UAAU,EAAEC,WAAW,QAAQ,yBAAyB;AAE7E,SAAkBC,UAAU,QAAQ,kBAAkB;AAEtD,SAASC,kBAAkB,EAAEC,SAAS,QAAQ,gBAAgB;AAE9D,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,gBAAgB,QAAQ,sBAAsB;AAUvD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,OAAO,EAAEC,eAAe,EAAEC,YAAY,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGL;IACxF,MAAM,EAAEM,IAAI,EAAE,GAAGJ,gBAAgBK,IAAI,CAACC,MAAM;IAC5C,MAAM,EAAEC,MAAMD,MAAM,EAAEE,SAAS,EAAEC,KAAK,EAAE,GAAGf,UAAU,SAASU;IAE9D,IAAIK,OAAO;QACT,qBAAO,KAACpB;YAAWoB,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAIF,WAAWI,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,4BAA4B,EAAEC,eAAe,EAAE,GAAGP;IAC1D,IAAIQ,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;QACpBC,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,KAACzB;gBACCO,SAASA;gBACTmB,MAAK;gBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACxB;wBACCyB,YAAYf,OAAOgB,mBAAmB,IAAI,EAAE;wBAC5CC,SAASvB,gBAAgBK,IAAI,CAACkB,OAAO,IAAI,EAAE;wBAC3CC,UAAU,CAACD;4BACTH,MAAMI,QAAQ,CAACD;4BACfrB,gBAAgBqB;wBAClB;;;QAKV;IACF;IAEA,IAAIX,iCAAiCF,WAAW;QAC9CI,OAAOA,KAAKW,MAAM,CAChBb,6BAA6Bc,GAAG,CAAC,CAAC,EAAEV,KAAK,EAAEC,SAASU,sBAAsB,EAAE,GAAM,CAAA;gBAChFX;gBACAC,uBACE,KAACzB;oBACCO,SAASA;oBACTmB,MAAK;oBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACO;4BACCC,OAAO5B,gBAAgBK,IAAI,CAACC,MAAM,CAACD,IAAI;4BACvCmB,UAAU,CAACnB;gCACTe,MAAMI,QAAQ,CAACnB;gCACfF,mBAAmBE;4BACrB;;;YAKV,CAAA;IAEJ;IAEA,sDAAsD;IACtDS,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAAC1B;YAAYQ,SAASA;;IACjC;IACAe,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBACE,KAACzB;YACCO,SAASA;YACTmB,MAAK;YACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAC9B;oBACCuC,WAAU;oBACVD,OAAO5B;oBACPwB,UAAU,CAACM;wBACTV,MAAMI,QAAQ,CAACO,KAAKC,KAAK,CAACF;wBAC1B7B,aAAa6B;oBACf;;;IAKV;IAEA,qBACE,KAACrC;QAAmBwC,YAAY,AAACjC,CAAAA,gBAAgBK,IAAI,CAACkB,OAAO,IAAI,EAAE,AAAD,EAAGW,MAAM;kBACzE,cAAA,KAACvC;YAAoCmB,MAAMA;WAAnBA,KAAKoB,MAAM;;AAGzC"}

package/dist/components/PluginRegistry/PluginRegistry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginRegistry/PluginRegistry.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { UnknownSpec, useEvent } from '@perses-dev/core';\nimport { useRef, useCallback, useMemo, ReactNode, ReactElement } from 'react';\nimport {\n  PluginModuleResource,\n  PluginType,\n  PluginImplementation,\n  Plugin,\n  PluginLoader,\n  DefaultPluginKinds,\n} from '../../model';\nimport { PluginRegistryContext } from '../../runtime';\nimport { usePluginIndexes, getTypeAndKindKey } from './plugin-indexes';\n\nexport interface PluginRegistryProps {\n  pluginLoader: PluginLoader;\n  defaultPluginKinds?: DefaultPluginKinds;\n  children?: ReactNode;\n}\n\n/**\n * PluginRegistryContext provider that keeps track of all available plugins and provides an API for getting them or\n * querying the metadata about them.\n */\nexport function PluginRegistry(props: PluginRegistryProps): ReactElement {\n  const {\n    pluginLoader: { getInstalledPlugins, importPluginModule },\n    children,\n    defaultPluginKinds,\n  } = props;\n\n  const getPluginIndexes = usePluginIndexes(getInstalledPlugins);\n\n  // De-dupe calls to import plugin modules\n  const importCache = useRef(new Map<PluginModuleResource, Promise<unknown>>());\n\n  // Do useEvent here since this accesses the importPluginModule prop and we want a stable reference to it for the\n  // callback below\n  const loadPluginModule = useEvent((resource: PluginModuleResource) => {\n    let request = importCache.current.get(resource);\n    if (request === undefined) {\n      request = importPluginModule(resource);\n      importCache.current.set(resource, request);\n\n      // Remove failed requests from the cache so they can potentially be retried\n      request.catch(() => importCache.current.delete(resource));\n    }\n    return request;\n  });\n\n  const getPlugin = useCallback(\n    async <T extends PluginType>(kind: T, name: string): Promise<PluginImplementation<T>> => {\n      // Get the indexes of the installed plugins\n      const pluginIndexes = await getPluginIndexes();\n\n      // Figure out what module the plugin is in by looking in the index\n      const typeAndKindKey = getTypeAndKindKey(kind, name);\n      const resource = pluginIndexes.pluginResourcesByNameAndKind.get(typeAndKindKey);\n      if (resource === undefined) {\n        throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);\n      }\n\n      // Treat the plugin module as a bunch of named exports that have plugins\n      const pluginModule = (await loadPluginModule(resource)) as Record<string, Plugin<UnknownSpec>>;\n\n      // We currently assume that plugin modules will have named exports that match the kinds they handle\n      const plugin = pluginModule[name];\n      if (plugin === undefined) {\n        throw new Error(\n          `The ${name} plugin for kind '${kind}' is missing from the ${resource.metadata.name} plugin module`\n        );\n      }\n\n      return plugin as PluginImplementation<T>;\n    },\n    [getPluginIndexes, loadPluginModule]\n  );\n\n  const listPluginMetadata = useCallback(\n    async (pluginTypes: string[]) => {\n      const pluginIndexes = await getPluginIndexes();\n      return pluginTypes.flatMap((type) => pluginIndexes.pluginMetadataByKind.get(type) ?? []);\n    },\n    [getPluginIndexes]\n  );\n\n  // Create the registry's context value and render\n  const context = useMemo(\n    () => ({ getPlugin, listPluginMetadata, defaultPluginKinds }),\n    [getPlugin, listPluginMetadata, defaultPluginKinds]\n  );\n  return <PluginRegistryContext.Provider value={context}>{children}</PluginRegistryContext.Provider>;\n}\n"],"names":["useEvent","useRef","useCallback","useMemo","PluginRegistryContext","usePluginIndexes","getTypeAndKindKey","PluginRegistry","props","pluginLoader","getInstalledPlugins","importPluginModule","children","defaultPluginKinds","getPluginIndexes","importCache","Map","loadPluginModule","resource","request","current","get","undefined","set","catch","delete","getPlugin","kind","name","pluginIndexes","typeAndKindKey","pluginResourcesByNameAndKind","Error","pluginModule","plugin","metadata","listPluginMetadata","pluginTypes","flatMap","type","pluginMetadataByKind","context","Provider","value"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAsBA,QAAQ,QAAQ,mBAAmB;AACzD,SAASC,MAAM,EAAEC,WAAW,EAAEC,OAAO,QAAiC,QAAQ;AAS9E,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,mBAAmB;AAQvE;;;CAGC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,cAAc,EAAEC,mBAAmB,EAAEC,kBAAkB,EAAE,EACzDC,QAAQ,EACRC,kBAAkB,EACnB,GAAGL;IAEJ,MAAMM,mBAAmBT,iBAAiBK;IAE1C,yCAAyC;IACzC,MAAMK,cAAcd,OAAO,IAAIe;IAE/B,gHAAgH;IAChH,iBAAiB;IACjB,MAAMC,mBAAmBjB,SAAS,CAACkB;QACjC,IAAIC,UAAUJ,YAAYK,OAAO,CAACC,GAAG,CAACH;QACtC,IAAIC,YAAYG,WAAW;YACzBH,UAAUR,mBAAmBO;YAC7BH,YAAYK,OAAO,CAACG,GAAG,CAACL,UAAUC;YAElC,2EAA2E;YAC3EA,QAAQK,KAAK,CAAC,IAAMT,YAAYK,OAAO,CAACK,MAAM,CAACP;QACjD;QACA,OAAOC;IACT;IAEA,MAAMO,YAAYxB,YAChB,OAA6ByB,MAASC;QACpC,2CAA2C;QAC3C,MAAMC,gBAAgB,MAAMf;QAE5B,kEAAkE;QAClE,MAAMgB,iBAAiBxB,kBAAkBqB,MAAMC;QAC/C,MAAMV,WAAWW,cAAcE,4BAA4B,CAACV,GAAG,CAACS;QAChE,IAAIZ,aAAaI,WAAW;YAC1B,MAAM,IAAIU,MAAM,CAAC,EAAE,EAAEJ,KAAK,kBAAkB,EAAED,KAAK,kBAAkB,CAAC;QACxE;QAEA,wEAAwE;QACxE,MAAMM,eAAgB,MAAMhB,iBAAiBC;QAE7C,mGAAmG;QACnG,MAAMgB,SAASD,YAAY,CAACL,KAAK;QACjC,IAAIM,WAAWZ,WAAW;YACxB,MAAM,IAAIU,MACR,CAAC,IAAI,EAAEJ,KAAK,kBAAkB,EAAED,KAAK,sBAAsB,EAAET,SAASiB,QAAQ,CAACP,IAAI,CAAC,cAAc,CAAC;QAEvG;QAEA,OAAOM;IACT,GACA;QAACpB;QAAkBG;KAAiB;IAGtC,MAAMmB,qBAAqBlC,YACzB,OAAOmC;QACL,MAAMR,gBAAgB,MAAMf;QAC5B,OAAOuB,YAAYC,OAAO,CAAC,CAACC,OAASV,cAAcW,oBAAoB,CAACnB,GAAG,CAACkB,SAAS,EAAE;IACzF,GACA;QAACzB;KAAiB;IAGpB,iDAAiD;IACjD,MAAM2B,UAAUtC,QACd,IAAO,CAAA;YAAEuB;YAAWU;YAAoBvB;QAAmB,CAAA,GAC3D;QAACa;QAAWU;QAAoBvB;KAAmB;IAErD,qBAAO,KAACT,sBAAsBsC,QAAQ;QAACC,OAAOF;kBAAU7B;;AAC1D"}
+{"version":3,"sources":["../../../src/components/PluginRegistry/PluginRegistry.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { UnknownSpec, useEvent } from '@perses-dev/core';\nimport { useRef, useCallback, useMemo, ReactNode, ReactElement } from 'react';\nimport {\n  PluginModuleResource,\n  PluginType,\n  PluginImplementation,\n  Plugin,\n  PluginLoader,\n  DefaultPluginKinds,\n} from '../../model';\nimport { PluginRegistryContext } from '../../runtime';\nimport { usePluginIndexes, getTypeAndKindKey } from './plugin-indexes';\n\nexport interface PluginRegistryProps {\n  pluginLoader: PluginLoader;\n  defaultPluginKinds?: DefaultPluginKinds;\n  children?: ReactNode;\n}\n\n/**\n * PluginRegistryContext provider that keeps track of all available plugins and provides an API for getting them or\n * querying the metadata about them.\n */\nexport function PluginRegistry(props: PluginRegistryProps): ReactElement {\n  const {\n    pluginLoader: { getInstalledPlugins, importPluginModule },\n    children,\n    defaultPluginKinds,\n  } = props;\n\n  const getPluginIndexes = usePluginIndexes(getInstalledPlugins);\n\n  // De-dupe calls to import plugin modules\n  const importCache = useRef(new Map<PluginModuleResource, Promise<unknown>>());\n\n  // Do useEvent here since this accesses the importPluginModule prop and we want a stable reference to it for the\n  // callback below\n  const loadPluginModule = useEvent((resource: PluginModuleResource) => {\n    let request = importCache.current.get(resource);\n    if (request === undefined) {\n      request = importPluginModule(resource);\n      importCache.current.set(resource, request);\n\n      // Remove failed requests from the cache so they can potentially be retried\n      request.catch(() => importCache.current.delete(resource));\n    }\n    return request;\n  });\n\n  const getPlugin = useCallback(\n    async <T extends PluginType>(kind: T, name: string): Promise<PluginImplementation<T>> => {\n      // Get the indexes of the installed plugins\n      const pluginIndexes = await getPluginIndexes();\n\n      // Figure out what module the plugin is in by looking in the index\n      const typeAndKindKey = getTypeAndKindKey(kind, name);\n      const resource = pluginIndexes.pluginResourcesByNameAndKind.get(typeAndKindKey);\n      if (resource === undefined) {\n        throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);\n      }\n\n      // Treat the plugin module as a bunch of named exports that have plugins\n      const pluginModule = (await loadPluginModule(resource)) as Record<string, Plugin<UnknownSpec>>;\n\n      // We currently assume that plugin modules will have named exports that match the kinds they handle\n      const plugin = pluginModule[name];\n      if (plugin === undefined) {\n        throw new Error(\n          `The ${name} plugin for kind '${kind}' is missing from the ${resource.metadata.name} plugin module`\n        );\n      }\n\n      return plugin as PluginImplementation<T>;\n    },\n    [getPluginIndexes, loadPluginModule]\n  );\n\n  const listPluginMetadata = useCallback(\n    async (pluginTypes: PluginType[]) => {\n      const pluginIndexes = await getPluginIndexes();\n      return pluginTypes.flatMap((type) => pluginIndexes.pluginMetadataByKind.get(type) ?? []);\n    },\n    [getPluginIndexes]\n  );\n\n  // Create the registry's context value and render\n  const context = useMemo(\n    () => ({ getPlugin, listPluginMetadata, defaultPluginKinds }),\n    [getPlugin, listPluginMetadata, defaultPluginKinds]\n  );\n  return <PluginRegistryContext.Provider value={context}>{children}</PluginRegistryContext.Provider>;\n}\n"],"names":["useEvent","useRef","useCallback","useMemo","PluginRegistryContext","usePluginIndexes","getTypeAndKindKey","PluginRegistry","props","pluginLoader","getInstalledPlugins","importPluginModule","children","defaultPluginKinds","getPluginIndexes","importCache","Map","loadPluginModule","resource","request","current","get","undefined","set","catch","delete","getPlugin","kind","name","pluginIndexes","typeAndKindKey","pluginResourcesByNameAndKind","Error","pluginModule","plugin","metadata","listPluginMetadata","pluginTypes","flatMap","type","pluginMetadataByKind","context","Provider","value"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAsBA,QAAQ,QAAQ,mBAAmB;AACzD,SAASC,MAAM,EAAEC,WAAW,EAAEC,OAAO,QAAiC,QAAQ;AAS9E,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,mBAAmB;AAQvE;;;CAGC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,cAAc,EAAEC,mBAAmB,EAAEC,kBAAkB,EAAE,EACzDC,QAAQ,EACRC,kBAAkB,EACnB,GAAGL;IAEJ,MAAMM,mBAAmBT,iBAAiBK;IAE1C,yCAAyC;IACzC,MAAMK,cAAcd,OAAO,IAAIe;IAE/B,gHAAgH;IAChH,iBAAiB;IACjB,MAAMC,mBAAmBjB,SAAS,CAACkB;QACjC,IAAIC,UAAUJ,YAAYK,OAAO,CAACC,GAAG,CAACH;QACtC,IAAIC,YAAYG,WAAW;YACzBH,UAAUR,mBAAmBO;YAC7BH,YAAYK,OAAO,CAACG,GAAG,CAACL,UAAUC;YAElC,2EAA2E;YAC3EA,QAAQK,KAAK,CAAC,IAAMT,YAAYK,OAAO,CAACK,MAAM,CAACP;QACjD;QACA,OAAOC;IACT;IAEA,MAAMO,YAAYxB,YAChB,OAA6ByB,MAASC;QACpC,2CAA2C;QAC3C,MAAMC,gBAAgB,MAAMf;QAE5B,kEAAkE;QAClE,MAAMgB,iBAAiBxB,kBAAkBqB,MAAMC;QAC/C,MAAMV,WAAWW,cAAcE,4BAA4B,CAACV,GAAG,CAACS;QAChE,IAAIZ,aAAaI,WAAW;YAC1B,MAAM,IAAIU,MAAM,CAAC,EAAE,EAAEJ,KAAK,kBAAkB,EAAED,KAAK,kBAAkB,CAAC;QACxE;QAEA,wEAAwE;QACxE,MAAMM,eAAgB,MAAMhB,iBAAiBC;QAE7C,mGAAmG;QACnG,MAAMgB,SAASD,YAAY,CAACL,KAAK;QACjC,IAAIM,WAAWZ,WAAW;YACxB,MAAM,IAAIU,MACR,CAAC,IAAI,EAAEJ,KAAK,kBAAkB,EAAED,KAAK,sBAAsB,EAAET,SAASiB,QAAQ,CAACP,IAAI,CAAC,cAAc,CAAC;QAEvG;QAEA,OAAOM;IACT,GACA;QAACpB;QAAkBG;KAAiB;IAGtC,MAAMmB,qBAAqBlC,YACzB,OAAOmC;QACL,MAAMR,gBAAgB,MAAMf;QAC5B,OAAOuB,YAAYC,OAAO,CAAC,CAACC,OAASV,cAAcW,oBAAoB,CAACnB,GAAG,CAACkB,SAAS,EAAE;IACzF,GACA;QAACzB;KAAiB;IAGpB,iDAAiD;IACjD,MAAM2B,UAAUtC,QACd,IAAO,CAAA;YAAEuB;YAAWU;YAAoBvB;QAAmB,CAAA,GAC3D;QAACa;QAAWU;QAAoBvB;KAAmB;IAErD,qBAAO,KAACT,sBAAsBsC,QAAQ;QAACC,OAAOF;kBAAU7B;;AAC1D"}

package/dist/components/PluginRegistry/plugin-indexes.d.ts

@@ -1,7 +1,7 @@
 import { PluginLoader, PluginMetadataWithModule, PluginModuleResource, PluginType } from '../../model';
 export interface PluginIndexes {
     pluginResourcesByNameAndKind: Map<string, PluginModuleResource>;
-    pluginMetadataByKind: Map<string, PluginMetadataWithModule[]>;
+    pluginMetadataByKind: Map<PluginType, PluginMetadataWithModule[]>;
 }
 /**
  * Returns an async callback for getting indexes of the installed plugin data.

package/dist/components/PluginRegistry/plugin-indexes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-indexes.d.ts","sourceRoot":"","sources":["../../../src/components/PluginRegistry/plugin-indexes.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvG,MAAM,WAAW,aAAa;IAE5B,4BAA4B,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAEhE,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,wBAAwB,EAAE,CAAC,CAAC;CAC/D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,mBAAmB,EAAE,YAAY,CAAC,qBAAqB,CAAC,GACvD,MAAM,OAAO,CAAC,aAAa,CAAC,CAuD9B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAExE"}
+{"version":3,"file":"plugin-indexes.d.ts","sourceRoot":"","sources":["../../../src/components/PluginRegistry/plugin-indexes.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvG,MAAM,WAAW,aAAa;IAE5B,4BAA4B,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAEhE,oBAAoB,EAAE,GAAG,CAAC,UAAU,EAAE,wBAAwB,EAAE,CAAC,CAAC;CACnE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,mBAAmB,EAAE,YAAY,CAAC,qBAAqB,CAAC,GACvD,MAAM,OAAO,CAAC,aAAa,CAAC,CAuD9B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAExE"}

package/dist/components/PluginRegistry/plugin-indexes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginRegistry/plugin-indexes.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEvent } from '@perses-dev/core';\nimport { useCallback, useRef } from 'react';\nimport { PluginLoader, PluginMetadataWithModule, PluginModuleResource, PluginType } from '../../model';\n\nexport interface PluginIndexes {\n  // Plugin resources by plugin type and kind (i.e. look up what module a plugin type and kind is in)\n  pluginResourcesByNameAndKind: Map<string, PluginModuleResource>;\n  // Plugin metadata by plugin type\n  pluginMetadataByKind: Map<string, PluginMetadataWithModule[]>;\n}\n\n/**\n * Returns an async callback for getting indexes of the installed plugin data.\n */\nexport function usePluginIndexes(\n  getInstalledPlugins: PluginLoader['getInstalledPlugins']\n): () => Promise<PluginIndexes> {\n  // Creates indexes from the installed plugins data (does useEvent because this accesses the getInstalledPlugins prop\n  // and we want a stable reference for the callback below)\n  const createPluginIndexes = useEvent(async (): Promise<PluginIndexes> => {\n    const installedPlugins = await getInstalledPlugins();\n\n    // Create the two indexes from the installed plugins\n    const pluginResourcesByNameAndKind = new Map<string, PluginModuleResource>();\n    const pluginMetadataByKind = new Map<string, PluginMetadataWithModule[]>();\n\n    for (const resource of installedPlugins) {\n      for (const pluginMetadata of resource.spec.plugins) {\n        const {\n          kind,\n          spec: { name },\n        } = pluginMetadata;\n\n        // Index the plugin by type and kind to point at the module that contains it\n        const key = getTypeAndKindKey(kind, name);\n        if (pluginResourcesByNameAndKind.has(key)) {\n          console.warn(`Got more than one ${kind} plugin for kind ${name}`);\n        }\n        pluginResourcesByNameAndKind.set(key, resource);\n\n        // Index the metadata by plugin type\n        let list = pluginMetadataByKind.get(kind);\n        if (list === undefined) {\n          list = [];\n          pluginMetadataByKind.set(kind, list);\n        }\n        list.push({ ...pluginMetadata, module: resource.metadata });\n      }\n    }\n\n    return {\n      pluginResourcesByNameAndKind,\n      pluginMetadataByKind,\n    };\n  });\n\n  // De-dupe creating plugin indexes (i.e. requests to get installed plugins)\n  const pluginIndexesCache = useRef<Promise<PluginIndexes> | undefined>(undefined);\n  const getPluginIndexes = useCallback(() => {\n    let request = pluginIndexesCache.current;\n    if (request === undefined) {\n      request = createPluginIndexes();\n      pluginIndexesCache.current = request;\n\n      // Remove failed requests from the cache so they can potentially be retried\n      request.catch(() => pluginIndexesCache.current === undefined);\n    }\n    return request;\n  }, [createPluginIndexes]);\n\n  return getPluginIndexes;\n}\n\n/**\n * Gets a unique key for a plugin type/kind that can be used as a cache key.\n */\nexport function getTypeAndKindKey(kind: PluginType, name: string): string {\n  return `${kind}:${name}`;\n}\n"],"names":["useEvent","useCallback","useRef","usePluginIndexes","getInstalledPlugins","createPluginIndexes","installedPlugins","pluginResourcesByNameAndKind","Map","pluginMetadataByKind","resource","pluginMetadata","spec","plugins","kind","name","key","getTypeAndKindKey","has","console","warn","set","list","get","undefined","push","module","metadata","pluginIndexesCache","getPluginIndexes","request","current","catch"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAU5C;;CAEC,GACD,OAAO,SAASC,iBACdC,mBAAwD;IAExD,oHAAoH;IACpH,yDAAyD;IACzD,MAAMC,sBAAsBL,SAAS;QACnC,MAAMM,mBAAmB,MAAMF;QAE/B,oDAAoD;QACpD,MAAMG,+BAA+B,IAAIC;QACzC,MAAMC,uBAAuB,IAAID;QAEjC,KAAK,MAAME,YAAYJ,iBAAkB;YACvC,KAAK,MAAMK,kBAAkBD,SAASE,IAAI,CAACC,OAAO,CAAE;gBAClD,MAAM,EACJC,IAAI,EACJF,MAAM,EAAEG,IAAI,EAAE,EACf,GAAGJ;gBAEJ,4EAA4E;gBAC5E,MAAMK,MAAMC,kBAAkBH,MAAMC;gBACpC,IAAIR,6BAA6BW,GAAG,CAACF,MAAM;oBACzCG,QAAQC,IAAI,CAAC,CAAC,kBAAkB,EAAEN,KAAK,iBAAiB,EAAEC,MAAM;gBAClE;gBACAR,6BAA6Bc,GAAG,CAACL,KAAKN;gBAEtC,oCAAoC;gBACpC,IAAIY,OAAOb,qBAAqBc,GAAG,CAACT;gBACpC,IAAIQ,SAASE,WAAW;oBACtBF,OAAO,EAAE;oBACTb,qBAAqBY,GAAG,CAACP,MAAMQ;gBACjC;gBACAA,KAAKG,IAAI,CAAC;oBAAE,GAAGd,cAAc;oBAAEe,QAAQhB,SAASiB,QAAQ;gBAAC;YAC3D;QACF;QAEA,OAAO;YACLpB;YACAE;QACF;IACF;IAEA,2EAA2E;IAC3E,MAAMmB,qBAAqB1B,OAA2CsB;IACtE,MAAMK,mBAAmB5B,YAAY;QACnC,IAAI6B,UAAUF,mBAAmBG,OAAO;QACxC,IAAID,YAAYN,WAAW;YACzBM,UAAUzB;YACVuB,mBAAmBG,OAAO,GAAGD;YAE7B,2EAA2E;YAC3EA,QAAQE,KAAK,CAAC,IAAMJ,mBAAmBG,OAAO,KAAKP;QACrD;QACA,OAAOM;IACT,GAAG;QAACzB;KAAoB;IAExB,OAAOwB;AACT;AAEA;;CAEC,GACD,OAAO,SAASZ,kBAAkBH,IAAgB,EAAEC,IAAY;IAC9D,OAAO,GAAGD,KAAK,CAAC,EAAEC,MAAM;AAC1B"}
+{"version":3,"sources":["../../../src/components/PluginRegistry/plugin-indexes.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEvent } from '@perses-dev/core';\nimport { useCallback, useRef } from 'react';\nimport { PluginLoader, PluginMetadataWithModule, PluginModuleResource, PluginType } from '../../model';\n\nexport interface PluginIndexes {\n  // Plugin resources by plugin type and kind (i.e. look up what module a plugin type and kind is in)\n  pluginResourcesByNameAndKind: Map<string, PluginModuleResource>;\n  // Plugin metadata by plugin type\n  pluginMetadataByKind: Map<PluginType, PluginMetadataWithModule[]>;\n}\n\n/**\n * Returns an async callback for getting indexes of the installed plugin data.\n */\nexport function usePluginIndexes(\n  getInstalledPlugins: PluginLoader['getInstalledPlugins']\n): () => Promise<PluginIndexes> {\n  // Creates indexes from the installed plugins data (does useEvent because this accesses the getInstalledPlugins prop\n  // and we want a stable reference for the callback below)\n  const createPluginIndexes = useEvent(async (): Promise<PluginIndexes> => {\n    const installedPlugins = await getInstalledPlugins();\n\n    // Create the two indexes from the installed plugins\n    const pluginResourcesByNameAndKind = new Map<string, PluginModuleResource>();\n    const pluginMetadataByKind = new Map<PluginType, PluginMetadataWithModule[]>();\n\n    for (const resource of installedPlugins) {\n      for (const pluginMetadata of resource.spec.plugins) {\n        const {\n          kind,\n          spec: { name },\n        } = pluginMetadata;\n\n        // Index the plugin by type and kind to point at the module that contains it\n        const key = getTypeAndKindKey(kind, name);\n        if (pluginResourcesByNameAndKind.has(key)) {\n          console.warn(`Got more than one ${kind} plugin for kind ${name}`);\n        }\n        pluginResourcesByNameAndKind.set(key, resource);\n\n        // Index the metadata by plugin type\n        let list = pluginMetadataByKind.get(kind);\n        if (list === undefined) {\n          list = [];\n          pluginMetadataByKind.set(kind, list);\n        }\n        list.push({ ...pluginMetadata, module: resource.metadata });\n      }\n    }\n\n    return {\n      pluginResourcesByNameAndKind,\n      pluginMetadataByKind,\n    };\n  });\n\n  // De-dupe creating plugin indexes (i.e. requests to get installed plugins)\n  const pluginIndexesCache = useRef<Promise<PluginIndexes> | undefined>(undefined);\n  const getPluginIndexes = useCallback(() => {\n    let request = pluginIndexesCache.current;\n    if (request === undefined) {\n      request = createPluginIndexes();\n      pluginIndexesCache.current = request;\n\n      // Remove failed requests from the cache so they can potentially be retried\n      request.catch(() => pluginIndexesCache.current === undefined);\n    }\n    return request;\n  }, [createPluginIndexes]);\n\n  return getPluginIndexes;\n}\n\n/**\n * Gets a unique key for a plugin type/kind that can be used as a cache key.\n */\nexport function getTypeAndKindKey(kind: PluginType, name: string): string {\n  return `${kind}:${name}`;\n}\n"],"names":["useEvent","useCallback","useRef","usePluginIndexes","getInstalledPlugins","createPluginIndexes","installedPlugins","pluginResourcesByNameAndKind","Map","pluginMetadataByKind","resource","pluginMetadata","spec","plugins","kind","name","key","getTypeAndKindKey","has","console","warn","set","list","get","undefined","push","module","metadata","pluginIndexesCache","getPluginIndexes","request","current","catch"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,WAAW,EAAEC,MAAM,QAAQ,QAAQ;AAU5C;;CAEC,GACD,OAAO,SAASC,iBACdC,mBAAwD;IAExD,oHAAoH;IACpH,yDAAyD;IACzD,MAAMC,sBAAsBL,SAAS;QACnC,MAAMM,mBAAmB,MAAMF;QAE/B,oDAAoD;QACpD,MAAMG,+BAA+B,IAAIC;QACzC,MAAMC,uBAAuB,IAAID;QAEjC,KAAK,MAAME,YAAYJ,iBAAkB;YACvC,KAAK,MAAMK,kBAAkBD,SAASE,IAAI,CAACC,OAAO,CAAE;gBAClD,MAAM,EACJC,IAAI,EACJF,MAAM,EAAEG,IAAI,EAAE,EACf,GAAGJ;gBAEJ,4EAA4E;gBAC5E,MAAMK,MAAMC,kBAAkBH,MAAMC;gBACpC,IAAIR,6BAA6BW,GAAG,CAACF,MAAM;oBACzCG,QAAQC,IAAI,CAAC,CAAC,kBAAkB,EAAEN,KAAK,iBAAiB,EAAEC,MAAM;gBAClE;gBACAR,6BAA6Bc,GAAG,CAACL,KAAKN;gBAEtC,oCAAoC;gBACpC,IAAIY,OAAOb,qBAAqBc,GAAG,CAACT;gBACpC,IAAIQ,SAASE,WAAW;oBACtBF,OAAO,EAAE;oBACTb,qBAAqBY,GAAG,CAACP,MAAMQ;gBACjC;gBACAA,KAAKG,IAAI,CAAC;oBAAE,GAAGd,cAAc;oBAAEe,QAAQhB,SAASiB,QAAQ;gBAAC;YAC3D;QACF;QAEA,OAAO;YACLpB;YACAE;QACF;IACF;IAEA,2EAA2E;IAC3E,MAAMmB,qBAAqB1B,OAA2CsB;IACtE,MAAMK,mBAAmB5B,YAAY;QACnC,IAAI6B,UAAUF,mBAAmBG,OAAO;QACxC,IAAID,YAAYN,WAAW;YACzBM,UAAUzB;YACVuB,mBAAmBG,OAAO,GAAGD;YAE7B,2EAA2E;YAC3EA,QAAQE,KAAK,CAAC,IAAMJ,mBAAmBG,OAAO,KAAKP;QACrD;QACA,OAAOM;IACT,GAAG;QAACzB;KAAoB;IAExB,OAAOwB;AACT;AAEA;;CAEC,GACD,OAAO,SAASZ,kBAAkBH,IAAgB,EAAEC,IAAY;IAC9D,OAAO,GAAGD,KAAK,CAAC,EAAEC,MAAM;AAC1B"}

package/dist/components/TimeRangeControls/TimeRangeControls.d.ts

@@ -7,8 +7,9 @@ interface TimeRangeControlsProps {
     showRefreshButton?: boolean;
     showRefreshInterval?: boolean;
     showCustomTimeRange?: boolean;
+    showZoomButtons?: boolean;
     timePresets?: TimeOption[];
 }
-export declare function TimeRangeControls({ heightPx, showTimeRangeSelector, showRefreshButton, showRefreshInterval, showCustomTimeRange, timePresets, }: TimeRangeControlsProps): ReactElement;
+export declare function TimeRangeControls({ heightPx, showTimeRangeSelector, showRefreshButton, showRefreshInterval, showCustomTimeRange, showZoomButtons, timePresets, }: TimeRangeControlsProps): ReactElement;
 export {};
 //# sourceMappingURL=TimeRangeControls.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,UAAU,EAIX,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAIlD,eAAO,MAAM,gCAAgC,EAAE,UAAU,EAOxD,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,qBAA4B,EAC5B,iBAAwB,EACxB,mBAA0B,EAC1B,mBAAmB,EACnB,WAAW,GACZ,EAAE,sBAAsB,GAAG,YAAY,CAuDvC"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAGL,UAAU,EAIX,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AASlD,eAAO,MAAM,gCAAgC,EAAE,UAAU,EAOxD,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,qBAA4B,EAC5B,iBAAwB,EACxB,mBAA0B,EAC1B,mBAAmB,EACnB,eAAsB,EACtB,WAAW,GACZ,EAAE,sBAAsB,GAAG,YAAY,CA0IvC"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -12,11 +12,16 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RefreshIcon from 'mdi-material-ui/Refresh';
+// eslint-disable-next-line import/no-duplicates
+import ZoomIn from 'mdi-material-ui/PlusCircleOutline';
+// eslint-disable-next-line import/no-duplicates
+import ZoomOut from 'mdi-material-ui/MinusCircleOutline';
 import { Stack } from '@mui/material';
 import { RefreshIntervalPicker, InfoTooltip, ToolbarIconButton, TimeRangeSelector, buildRelativeTimeOption } from '@perses-dev/components';
+import { parseDurationString } from '@perses-dev/core';
 import { useCallback } from 'react';
 import { TOOLTIP_TEXT } from '../../constants';
-import { useTimeRange, useShowCustomTimeRangeSetting, useTimeRangeOptionsSetting } from '../../runtime';
+import { useTimeRange, useShowCustomTimeRangeSetting, useTimeRangeOptionsSetting, useShowZoomRangeSetting } from '../../runtime';
 export const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
     {
         value: {
@@ -56,9 +61,10 @@ export const DEFAULT_REFRESH_INTERVAL_OPTIONS = [
     }
 ];
 const DEFAULT_HEIGHT = '34px';
-export function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, showCustomTimeRange, timePresets }) {
+export function TimeRangeControls({ heightPx, showTimeRangeSelector = true, showRefreshButton = true, showRefreshInterval = true, showCustomTimeRange, showZoomButtons = true, timePresets }) {
     const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();
     const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);
+    const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);
     const timePresetsValue = useTimeRangeOptionsSetting(timePresets);
     // Convert height to a string, then use the string for styling
     const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
@@ -72,6 +78,70 @@ export function TimeRangeControls({ heightPx, showTimeRangeSelector = true, show
     }, [
         setRefreshInterval
     ]);
+    const fromDurationToMillis = (strDuration)=>{
+        const duration = parseDurationString(strDuration);
+        const millis = // eslint-disable-next-line prettier/prettier
+        ((duration.seconds ?? 0) + (duration.minutes ?? 0) * 60 + (duration.hours ?? 0) * 3600 + (duration.days ?? 0) * 86400 + (duration.weeks ?? 0) * 7 * 86400 + (duration.months ?? 0) * 30.436875 * 86400 + // avg month duration is ok for zoom purposes
+        (duration.years ?? 0) * 365.2425 * 86400) * // avg year duration is ok for zoom purposes
+        // eslint-disable-next-line prettier/prettier
+        1000; // to milliseconds
+        return millis;
+    };
+    // Function to double current time range, adding 50% before current start and 50% after current end
+    const doubleTimeRange = ()=>{
+        let newStart, newEnd, extendEndsBy;
+        const now = new Date();
+        if (Object.hasOwn(timeRange, 'start')) {
+            // current range is absolute
+            const absVal = timeRange;
+            extendEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 2; // half it to add 50% before current start and after current end
+            newStart = new Date(absVal.start.getTime() - extendEndsBy);
+            newEnd = new Date(absVal.end.getTime() + extendEndsBy);
+        } else {
+            // current range is relative
+            const relVal = timeRange;
+            extendEndsBy = fromDurationToMillis(relVal.pastDuration) / 2;
+            newEnd = typeof relVal.end === 'undefined' ? now : new Date(relVal.end.getTime() + extendEndsBy);
+            newStart = new Date(newEnd.getTime() - extendEndsBy * 4);
+        }
+        if (newEnd.getTime() > now.getTime()) {
+            // if the new computed end is in the future
+            newEnd = now;
+            newStart.setTime(now.getTime() - extendEndsBy * 4);
+        }
+        if (newStart.getTime() < 1) {
+            newStart.setTime(1);
+        }
+        return {
+            start: newStart,
+            end: newEnd
+        };
+    };
+    // Function to half current time range, cutting 25% before current start and 25% after current end
+    const halfTimeRange = ()=>{
+        let newStart, newEnd;
+        if (Object.hasOwn(timeRange, 'start')) {
+            const absVal = timeRange;
+            const shrinkEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 4;
+            newStart = new Date(absVal.start.getTime() + shrinkEndsBy);
+            newEnd = new Date(absVal.end.getTime() - shrinkEndsBy);
+        } else {
+            const relVal = timeRange;
+            const shrinkEndsBy = fromDurationToMillis(relVal.pastDuration) / 4; // 25% of it to cut after current start and before current end
+            const endIsAbsolute = typeof relVal.end !== 'undefined';
+            newEnd = endIsAbsolute ? new Date(relVal.end.getTime() - shrinkEndsBy) : new Date();
+            newStart = new Date(newEnd.getTime() - shrinkEndsBy * 2);
+        }
+        if (newStart.getTime() >= newEnd.getTime() - 1000) {
+            newStart.setTime(newEnd.getTime() - 1000);
+        }
+        return {
+            start: newStart,
+            end: newEnd
+        };
+    };
+    const setHalfTimeRange = ()=>setTimeRange(halfTimeRange());
+    const setDoubleTimeRange = ()=>setTimeRange(doubleTimeRange());
     return /*#__PURE__*/ _jsxs(Stack, {
         direction: "row",
         spacing: 1,
@@ -83,6 +153,28 @@ export function TimeRangeControls({ heightPx, showTimeRangeSelector = true, show
                 height: height,
                 showCustomTimeRange: showCustomTimeRangeValue
             }),
+            showZoomInOutButtons && /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.zoomOut,
+                children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
+                    "aria-label": TOOLTIP_TEXT.zoomOut,
+                    onClick: setDoubleTimeRange,
+                    sx: {
+                        height
+                    },
+                    children: /*#__PURE__*/ _jsx(ZoomOut, {})
+                })
+            }),
+            showZoomInOutButtons && /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.zoomIn,
+                children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
+                    "aria-label": TOOLTIP_TEXT.zoomIn,
+                    onClick: setHalfTimeRange,
+                    sx: {
+                        height
+                    },
+                    children: /*#__PURE__*/ _jsx(ZoomIn, {})
+                })
+            }),
             showRefreshButton && /*#__PURE__*/ _jsx(InfoTooltip, {
                 description: TOOLTIP_TEXT.refresh,
                 children: /*#__PURE__*/ _jsx(ToolbarIconButton, {

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2024 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 RefreshIcon from 'mdi-material-ui/Refresh';\nimport { Stack } from '@mui/material';\nimport {\n  RefreshIntervalPicker,\n  InfoTooltip,\n  TimeOption,\n  ToolbarIconButton,\n  TimeRangeSelector,\n  buildRelativeTimeOption,\n} from '@perses-dev/components';\nimport { DurationString } from '@perses-dev/core';\nimport { ReactElement, useCallback } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useTimeRange, useShowCustomTimeRangeSetting, useTimeRangeOptionsSetting } from '../../runtime';\n\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '0s' }, display: 'Off' },\n  { value: { pastDuration: '5s' }, display: '5s' },\n  { value: { pastDuration: '10s' }, display: '10s' },\n  { value: { pastDuration: '15s' }, display: '15s' },\n  { value: { pastDuration: '30s' }, display: '30s' },\n  { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n  showTimeRangeSelector?: boolean;\n  showRefreshButton?: boolean;\n  showRefreshInterval?: boolean;\n  showCustomTimeRange?: boolean;\n  timePresets?: TimeOption[];\n}\n\nexport function TimeRangeControls({\n  heightPx,\n  showTimeRangeSelector = true,\n  showRefreshButton = true,\n  showRefreshInterval = true,\n  showCustomTimeRange,\n  timePresets,\n}: TimeRangeControlsProps): ReactElement {\n  const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n\n  const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);\n  const timePresetsValue = useTimeRangeOptionsSetting(timePresets);\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time preset if one does not match duration given in time range\n  if (\n    'pastDuration' in timeRange &&\n    !timePresetsValue.some((option) => option.value.pastDuration === timeRange['pastDuration'])\n  ) {\n    timePresetsValue.push(buildRelativeTimeOption(timeRange['pastDuration']));\n  }\n\n  // set the new refresh interval both in the dashboard context & as query param\n  const handleRefreshIntervalChange = useCallback(\n    (duration: DurationString) => {\n      setRefreshInterval(duration);\n    },\n    [setRefreshInterval]\n  );\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      {showTimeRangeSelector && (\n        <TimeRangeSelector\n          timeOptions={timePresetsValue}\n          value={timeRange}\n          onChange={setTimeRange}\n          height={height}\n          showCustomTimeRange={showCustomTimeRangeValue}\n        />\n      )}\n      {showRefreshButton && (\n        <InfoTooltip description={TOOLTIP_TEXT.refresh}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refresh} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshInterval && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>\n          <RefreshIntervalPicker\n            timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}\n            value={refreshInterval}\n            onChange={handleRefreshIntervalChange}\n            height={height}\n          />\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","Stack","RefreshIntervalPicker","InfoTooltip","ToolbarIconButton","TimeRangeSelector","buildRelativeTimeOption","useCallback","TOOLTIP_TEXT","useTimeRange","useShowCustomTimeRangeSetting","useTimeRangeOptionsSetting","DEFAULT_REFRESH_INTERVAL_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","showCustomTimeRange","timePresets","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","showCustomTimeRangeValue","timePresetsValue","height","undefined","some","option","push","handleRefreshIntervalChange","duration","direction","spacing","timeOptions","onChange","description","aria-label","onClick","sx"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,iBAAiB,0BAA0B;AAClD,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SACEC,qBAAqB,EACrBC,WAAW,EAEXC,iBAAiB,EACjBC,iBAAiB,EACjBC,uBAAuB,QAClB,yBAAyB;AAEhC,SAAuBC,WAAW,QAAQ,QAAQ;AAClD,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,YAAY,EAAEC,6BAA6B,EAAEC,0BAA0B,QAAQ,gBAAgB;AAExG,OAAO,MAAMC,mCAAiD;IAC5D;QAAEC,OAAO;YAAEC,cAAc;QAAK;QAAGC,SAAS;IAAM;IAChD;QAAEF,OAAO;YAAEC,cAAc;QAAK;QAAGC,SAAS;IAAK;IAC/C;QAAEF,OAAO;YAAEC,cAAc;QAAM;QAAGC,SAAS;IAAM;IACjD;QAAEF,OAAO;YAAEC,cAAc;QAAM;QAAGC,SAAS;IAAM;IACjD;QAAEF,OAAO;YAAEC,cAAc;QAAM;QAAGC,SAAS;IAAM;IACjD;QAAEF,OAAO;YAAEC,cAAc;QAAM;QAAGC,SAAS;IAAK;CACjD,CAAC;AAEF,MAAMC,iBAAiB;AAYvB,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,wBAAwB,IAAI,EAC5BC,oBAAoB,IAAI,EACxBC,sBAAsB,IAAI,EAC1BC,mBAAmB,EACnBC,WAAW,EACY;IACvB,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,OAAO,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGnB;IAElF,MAAMoB,2BAA2BnB,8BAA8BY;IAC/D,MAAMQ,mBAAmBnB,2BAA2BY;IAEpD,8DAA8D;IAC9D,MAAMQ,SAASb,aAAac,YAAYhB,iBAAiB,GAAGE,SAAS,EAAE,CAAC;IAExE,qEAAqE;IACrE,IACE,kBAAkBM,aAClB,CAACM,iBAAiBG,IAAI,CAAC,CAACC,SAAWA,OAAOrB,KAAK,CAACC,YAAY,KAAKU,SAAS,CAAC,eAAe,GAC1F;QACAM,iBAAiBK,IAAI,CAAC7B,wBAAwBkB,SAAS,CAAC,eAAe;IACzE;IAEA,8EAA8E;IAC9E,MAAMY,8BAA8B7B,YAClC,CAAC8B;QACCT,mBAAmBS;IACrB,GACA;QAACT;KAAmB;IAGtB,qBACE,MAAC3B;QAAMqC,WAAU;QAAMC,SAAS;;YAC7BpB,uCACC,KAACd;gBACCmC,aAAaV;gBACbjB,OAAOW;gBACPiB,UAAUhB;gBACVM,QAAQA;gBACRT,qBAAqBO;;YAGxBT,mCACC,KAACjB;gBAAYuC,aAAalC,aAAakB,OAAO;0BAC5C,cAAA,KAACtB;oBAAkBuC,cAAYnC,aAAakB,OAAO;oBAAEkB,SAASlB;oBAASmB,IAAI;wBAAEd;oBAAO;8BAClF,cAAA,KAAC/B;;;YAINqB,qCACC,KAAClB;gBAAYuC,aAAalC,aAAamB,eAAe;0BACpD,cAAA,KAACzB;oBACCsC,aAAa5B;oBACbC,OAAOc;oBACPc,UAAUL;oBACVL,QAAQA;;;;;AAMpB"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2024 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 RefreshIcon from 'mdi-material-ui/Refresh';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomIn from 'mdi-material-ui/PlusCircleOutline';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomOut from 'mdi-material-ui/MinusCircleOutline';\nimport { Stack } from '@mui/material';\nimport {\n  RefreshIntervalPicker,\n  InfoTooltip,\n  TimeOption,\n  ToolbarIconButton,\n  TimeRangeSelector,\n  buildRelativeTimeOption,\n} from '@perses-dev/components';\nimport { AbsoluteTimeRange, DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/core';\nimport { ReactElement, useCallback } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  useTimeRange,\n  useShowCustomTimeRangeSetting,\n  useTimeRangeOptionsSetting,\n  useShowZoomRangeSetting,\n} from '../../runtime';\n\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '0s' }, display: 'Off' },\n  { value: { pastDuration: '5s' }, display: '5s' },\n  { value: { pastDuration: '10s' }, display: '10s' },\n  { value: { pastDuration: '15s' }, display: '15s' },\n  { value: { pastDuration: '30s' }, display: '30s' },\n  { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n  showTimeRangeSelector?: boolean;\n  showRefreshButton?: boolean;\n  showRefreshInterval?: boolean;\n  showCustomTimeRange?: boolean;\n  showZoomButtons?: boolean;\n  timePresets?: TimeOption[];\n}\n\nexport function TimeRangeControls({\n  heightPx,\n  showTimeRangeSelector = true,\n  showRefreshButton = true,\n  showRefreshInterval = true,\n  showCustomTimeRange,\n  showZoomButtons = true,\n  timePresets,\n}: TimeRangeControlsProps): ReactElement {\n  const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n\n  const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);\n  const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);\n  const timePresetsValue = useTimeRangeOptionsSetting(timePresets);\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time preset if one does not match duration given in time range\n  if (\n    'pastDuration' in timeRange &&\n    !timePresetsValue.some((option) => option.value.pastDuration === timeRange['pastDuration'])\n  ) {\n    timePresetsValue.push(buildRelativeTimeOption(timeRange['pastDuration']));\n  }\n\n  // set the new refresh interval both in the dashboard context & as query param\n  const handleRefreshIntervalChange = useCallback(\n    (duration: DurationString) => {\n      setRefreshInterval(duration);\n    },\n    [setRefreshInterval]\n  );\n\n  const fromDurationToMillis = (strDuration: string): number => {\n    const duration = parseDurationString(strDuration);\n    const millis =\n      // eslint-disable-next-line prettier/prettier\n        ((duration.seconds ?? 0) +\n        (duration.minutes ?? 0) * 60 +\n        (duration.hours ?? 0) * 3600 +\n        (duration.days ?? 0) * 86400 +\n        (duration.weeks ?? 0) * 7 * 86400 +\n        (duration.months ?? 0) * 30.436875 * 86400 + // avg month duration is ok for zoom purposes\n        (duration.years ?? 0) * 365.2425 * 86400) * // avg year duration is ok for zoom purposes\n      // eslint-disable-next-line prettier/prettier\n        1000; // to milliseconds\n    return millis;\n  };\n\n  // Function to double current time range, adding 50% before current start and 50% after current end\n  const doubleTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd, extendEndsBy;\n    const now = new Date();\n    if (Object.hasOwn(timeRange, 'start')) {\n      // current range is absolute\n      const absVal = timeRange as AbsoluteTimeRange;\n      extendEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 2; // half it to add 50% before current start and after current end\n      newStart = new Date(absVal.start.getTime() - extendEndsBy);\n      newEnd = new Date(absVal.end.getTime() + extendEndsBy);\n    } else {\n      // current range is relative\n      const relVal = timeRange as RelativeTimeRange;\n      extendEndsBy = fromDurationToMillis(relVal.pastDuration) / 2;\n      newEnd = typeof relVal.end === 'undefined' ? now : new Date(relVal.end.getTime() + extendEndsBy);\n      newStart = new Date(newEnd.getTime() - extendEndsBy * 4);\n    }\n    if (newEnd.getTime() > now.getTime()) {\n      // if the new computed end is in the future\n      newEnd = now;\n      newStart.setTime(now.getTime() - extendEndsBy * 4);\n    }\n    if (newStart.getTime() < 1) {\n      newStart.setTime(1);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  // Function to half current time range, cutting 25% before current start and 25% after current end\n  const halfTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd;\n    if (Object.hasOwn(timeRange, 'start')) {\n      const absVal = timeRange as AbsoluteTimeRange;\n      const shrinkEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 4;\n      newStart = new Date(absVal.start.getTime() + shrinkEndsBy);\n      newEnd = new Date(absVal.end.getTime() - shrinkEndsBy);\n    } else {\n      const relVal = timeRange as RelativeTimeRange;\n      const shrinkEndsBy = fromDurationToMillis(relVal.pastDuration) / 4; // 25% of it to cut after current start and before current end\n      const endIsAbsolute = typeof relVal.end !== 'undefined';\n      newEnd = endIsAbsolute ? new Date(relVal.end!.getTime() - shrinkEndsBy) : new Date();\n      newStart = new Date(newEnd.getTime() - shrinkEndsBy * 2);\n    }\n    if (newStart.getTime() >= newEnd.getTime() - 1000) {\n      newStart.setTime(newEnd.getTime() - 1000);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  const setHalfTimeRange = (): void => setTimeRange(halfTimeRange());\n  const setDoubleTimeRange = (): void => setTimeRange(doubleTimeRange());\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      {showTimeRangeSelector && (\n        <TimeRangeSelector\n          timeOptions={timePresetsValue}\n          value={timeRange}\n          onChange={setTimeRange}\n          height={height}\n          showCustomTimeRange={showCustomTimeRangeValue}\n        />\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomOut}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomOut} onClick={setDoubleTimeRange} sx={{ height }}>\n            <ZoomOut />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomIn}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomIn} onClick={setHalfTimeRange} sx={{ height }}>\n            <ZoomIn />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshButton && (\n        <InfoTooltip description={TOOLTIP_TEXT.refresh}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refresh} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshInterval && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>\n          <RefreshIntervalPicker\n            timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}\n            value={refreshInterval}\n            onChange={handleRefreshIntervalChange}\n            height={height}\n          />\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","ZoomIn","ZoomOut","Stack","RefreshIntervalPicker","InfoTooltip","ToolbarIconButton","TimeRangeSelector","buildRelativeTimeOption","parseDurationString","useCallback","TOOLTIP_TEXT","useTimeRange","useShowCustomTimeRangeSetting","useTimeRangeOptionsSetting","useShowZoomRangeSetting","DEFAULT_REFRESH_INTERVAL_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","showCustomTimeRange","showZoomButtons","timePresets","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","showCustomTimeRangeValue","showZoomInOutButtons","timePresetsValue","height","undefined","some","option","push","handleRefreshIntervalChange","duration","fromDurationToMillis","strDuration","millis","seconds","minutes","hours","days","weeks","months","years","doubleTimeRange","newStart","newEnd","extendEndsBy","now","Date","Object","hasOwn","absVal","end","getTime","start","relVal","setTime","halfTimeRange","shrinkEndsBy","endIsAbsolute","setHalfTimeRange","setDoubleTimeRange","direction","spacing","timeOptions","onChange","description","zoomOut","aria-label","onClick","sx","zoomIn"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAa7E,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAsTtF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,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,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAa7E,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AA2TtF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,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,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}