@perses-dev/prometheus-plugin 0.38.0 → 0.40.0

package/dist/plugins/PrometheusDatasourceEditor/PrometheusDatasourceEditor.js

@@ -0,0 +1,404 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { OptionsEditorRadios } from '@perses-dev/plugin-system';
+import { Grid, IconButton, TextField, Typography } from '@mui/material';
+import React, { Fragment, useState } from 'react';
+import MinusIcon from 'mdi-material-ui/Minus';
+import PlusIcon from 'mdi-material-ui/Plus';
+import { DEFAULT_SCRAPE_INTERVAL } from './types';
+export function PrometheusDatasourceEditor(props) {
+    var _value_proxy, _value_proxy1, _value_proxy2, _value_proxy3;
+    const { value , onChange , isReadonly  } = props;
+    const strDirect = 'Direct access';
+    const strProxy = 'Proxy';
+    // TODO refactor with useImmer to avoid doing so much destructuring? feasibility & performances to be checked
+    // utilitary function used for headers when renaming a property
+    // -> TODO it would be cleaner to manipulate headers as a list instead, to avoid doing this.
+    //    This could be a pure frontend trick, but change in the backend datamodel should also be considered
+    const buildNewHeaders = (oldHeaders, oldName, newName)=>{
+        if (oldHeaders === undefined) return oldHeaders;
+        const keys = Object.keys(oldHeaders);
+        const newHeaders = keys.reduce((acc, val)=>{
+            if (val === oldName) {
+                acc[newName] = oldHeaders[oldName] || '';
+            } else {
+                acc[val] = oldHeaders[val] || '';
+            }
+            return acc;
+        }, {});
+        return {
+            ...newHeaders
+        };
+    };
+    const tabs = [
+        {
+            label: strDirect,
+            content: /*#__PURE__*/ _jsx(_Fragment, {
+                children: /*#__PURE__*/ _jsx(TextField, {
+                    fullWidth: true,
+                    label: "URL",
+                    value: value.directUrl || '',
+                    InputProps: {
+                        readOnly: isReadonly
+                    },
+                    InputLabelProps: {
+                        shrink: isReadonly ? true : undefined
+                    },
+                    onChange: (e)=>onChange({
+                            ...value,
+                            directUrl: e.target.value
+                        })
+                })
+            })
+        },
+        {
+            label: strProxy,
+            content: /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        fullWidth: true,
+                        label: "URL",
+                        value: ((_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.url) || '',
+                        InputProps: {
+                            readOnly: isReadonly
+                        },
+                        InputLabelProps: {
+                            shrink: isReadonly ? true : undefined
+                        },
+                        onChange: (e)=>onChange({
+                                ...value,
+                                ...value.proxy && {
+                                    proxy: {
+                                        ...value.proxy,
+                                        spec: {
+                                            ...value.proxy.spec,
+                                            url: e.target.value
+                                        }
+                                    }
+                                }
+                            })
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h4",
+                        mt: 2,
+                        mb: 1,
+                        children: "Allowed endpoints"
+                    }),
+                    /*#__PURE__*/ _jsx(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: ((_value_proxy1 = value.proxy) === null || _value_proxy1 === void 0 ? void 0 : _value_proxy1.spec.allowedEndpoints) ? value.proxy.spec.allowedEndpoints.map(({ endpointPattern , method  }, i)=>{
+                            return /*#__PURE__*/ _jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Grid, {
+                                        item: true,
+                                        xs: 8,
+                                        children: /*#__PURE__*/ _jsx(TextField, {
+                                            disabled: true,
+                                            fullWidth: true,
+                                            label: "Endpoint pattern",
+                                            value: endpointPattern,
+                                            InputProps: {
+                                                readOnly: isReadonly
+                                            },
+                                            InputLabelProps: {
+                                                shrink: isReadonly ? true : undefined
+                                            }
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(Grid, {
+                                        item: true,
+                                        xs: 4,
+                                        children: /*#__PURE__*/ _jsx(TextField, {
+                                            disabled: true,
+                                            fullWidth: true,
+                                            label: "URL",
+                                            value: method,
+                                            InputProps: {
+                                                readOnly: isReadonly
+                                            },
+                                            InputLabelProps: {
+                                                shrink: isReadonly ? true : undefined
+                                            }
+                                        })
+                                    })
+                                ]
+                            }, i);
+                        }) : /*#__PURE__*/ _jsxs(Grid, {
+                            item: true,
+                            xs: 4,
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    children: "None"
+                                }),
+                                " "
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h4",
+                        mb: 1,
+                        children: "Request Headers"
+                    }),
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: [
+                            ((_value_proxy2 = value.proxy) === null || _value_proxy2 === void 0 ? void 0 : _value_proxy2.spec.headers) && Object.keys(value.proxy.spec.headers).map((headerName, i)=>{
+                                var _value_proxy_spec_headers, _value_proxy;
+                                return /*#__PURE__*/ _jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Grid, {
+                                            item: true,
+                                            xs: 4,
+                                            children: /*#__PURE__*/ _jsx(TextField, {
+                                                fullWidth: true,
+                                                label: "Header name",
+                                                value: headerName,
+                                                InputProps: {
+                                                    readOnly: isReadonly
+                                                },
+                                                InputLabelProps: {
+                                                    shrink: isReadonly ? true : undefined
+                                                },
+                                                onChange: (e)=>onChange({
+                                                        ...value,
+                                                        ...value.proxy && {
+                                                            proxy: {
+                                                                ...value.proxy,
+                                                                spec: {
+                                                                    ...value.proxy.spec,
+                                                                    headers: buildNewHeaders(value.proxy.spec.headers, headerName, e.target.value)
+                                                                }
+                                                            }
+                                                        }
+                                                    })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Grid, {
+                                            item: true,
+                                            xs: 7,
+                                            children: /*#__PURE__*/ _jsx(TextField, {
+                                                fullWidth: true,
+                                                label: "Header value",
+                                                value: (_value_proxy_spec_headers = (_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.headers) === null || _value_proxy_spec_headers === void 0 ? void 0 : _value_proxy_spec_headers[headerName],
+                                                InputProps: {
+                                                    readOnly: isReadonly
+                                                },
+                                                InputLabelProps: {
+                                                    shrink: isReadonly ? true : undefined
+                                                },
+                                                onChange: (e)=>onChange({
+                                                        ...value,
+                                                        ...value.proxy && {
+                                                            proxy: {
+                                                                ...value.proxy,
+                                                                spec: {
+                                                                    ...value.proxy.spec,
+                                                                    headers: {
+                                                                        ...value.proxy.spec.headers,
+                                                                        [headerName]: e.target.value
+                                                                    }
+                                                                }
+                                                            }
+                                                        }
+                                                    })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Grid, {
+                                            item: true,
+                                            xs: 1,
+                                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                                disabled: isReadonly,
+                                                onClick: ()=>{
+                                                    var _value_proxy;
+                                                    const newHeaders = {
+                                                        ...(_value_proxy = value.proxy) === null || _value_proxy === void 0 ? void 0 : _value_proxy.spec.headers
+                                                    };
+                                                    delete newHeaders[headerName];
+                                                    onChange({
+                                                        ...value,
+                                                        ...value.proxy && {
+                                                            proxy: {
+                                                                ...value.proxy,
+                                                                spec: {
+                                                                    ...value.proxy.spec,
+                                                                    headers: newHeaders
+                                                                }
+                                                            }
+                                                        }
+                                                    });
+                                                },
+                                                children: /*#__PURE__*/ _jsx(MinusIcon, {})
+                                            })
+                                        })
+                                    ]
+                                }, i);
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 12,
+                                sx: {
+                                    paddingTop: '5px !important'
+                                },
+                                children: /*#__PURE__*/ _jsx(IconButton, {
+                                    disabled: isReadonly,
+                                    onClick: ()=>onChange({
+                                            ...value,
+                                            ...value.proxy && {
+                                                proxy: {
+                                                    ...value.proxy,
+                                                    spec: {
+                                                        ...value.proxy.spec,
+                                                        headers: {
+                                                            ...value.proxy.spec.headers,
+                                                            '': ''
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }),
+                                    children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        fullWidth: true,
+                        label: "Secret",
+                        value: ((_value_proxy3 = value.proxy) === null || _value_proxy3 === void 0 ? void 0 : _value_proxy3.spec.secret) || '',
+                        InputProps: {
+                            readOnly: isReadonly
+                        },
+                        InputLabelProps: {
+                            shrink: isReadonly ? true : undefined
+                        },
+                        onChange: (e)=>onChange({
+                                ...value,
+                                ...value.proxy && {
+                                    proxy: {
+                                        ...value.proxy,
+                                        spec: {
+                                            ...value.proxy.spec,
+                                            secret: e.target.value
+                                        }
+                                    }
+                                }
+                            })
+                    })
+                ]
+            })
+        }
+    ];
+    // Use of findIndex instead of providing hardcoded values to avoid desynchronisatio or
+    // bug in case the tabs get eventually swapped in the future.
+    const directModeId = tabs.findIndex((tab)=>tab.label == strDirect);
+    const proxyModeId = tabs.findIndex((tab)=>tab.label == strProxy);
+    // In "update datasource" case, set defaultTab to the mode that this datasource is currently relying on.
+    // Otherwise (create datasource), set defaultTab to Direct access.
+    const defaultTab = value.proxy ? proxyModeId : directModeId;
+    const initialSpecDirect = {
+        directUrl: ''
+    };
+    const initialSpecProxy = {
+        proxy: {
+            kind: 'HTTPProxy',
+            spec: {
+                allowedEndpoints: [
+                    // hardcoded list of allowed endpoints for now since those are enforced by the backend
+                    {
+                        endpointPattern: '/api/v1/labels',
+                        method: 'POST'
+                    },
+                    {
+                        endpointPattern: '/api/v1/series',
+                        method: 'POST'
+                    },
+                    {
+                        endpointPattern: '/api/v1/metadata',
+                        method: 'GET'
+                    },
+                    {
+                        endpointPattern: '/api/v1/query',
+                        method: 'POST'
+                    },
+                    {
+                        endpointPattern: '/api/v1/query_range',
+                        method: 'POST'
+                    },
+                    {
+                        endpointPattern: '/api/v1/label/([a-zA-Z0-9_-]+)/values',
+                        method: 'GET'
+                    }
+                ],
+                url: ''
+            }
+        }
+    };
+    // For better user experience, save previous states in mind for both mode.
+    // This avoids losing everything when the user changes their mind back.
+    const [previousSpecDirect, setPreviousSpecDirect] = useState(initialSpecDirect);
+    const [previousSpecProxy, setPreviousSpecProxy] = useState(initialSpecProxy);
+    // When changing mode, remove previous mode's config + append default values for the new mode.
+    const handleModeChange = (v)=>{
+        var _tabs_v, _tabs_v1;
+        if (((_tabs_v = tabs[v]) === null || _tabs_v === void 0 ? void 0 : _tabs_v.label) == strDirect) {
+            setPreviousSpecProxy(value);
+            onChange(previousSpecDirect);
+        } else if (((_tabs_v1 = tabs[v]) === null || _tabs_v1 === void 0 ? void 0 : _tabs_v1.label) == strProxy) {
+            setPreviousSpecDirect(value);
+            onChange(previousSpecProxy);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h4",
+                mb: 1,
+                children: "General Settings"
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                fullWidth: true,
+                label: "Scrape Interval",
+                value: value.scrapeInterval || '',
+                placeholder: `Default: ${DEFAULT_SCRAPE_INTERVAL}`,
+                InputProps: {
+                    readOnly: isReadonly
+                },
+                InputLabelProps: {
+                    shrink: isReadonly ? true : undefined
+                },
+                onChange: (e)=>onChange({
+                        ...value,
+                        scrapeInterval: e.target.value
+                    })
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h4",
+                mt: 2,
+                children: "HTTP Settings"
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorRadios, {
+                isReadonly: isReadonly,
+                tabs: tabs,
+                defaultTab: defaultTab,
+                onModeChange: handleModeChange
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=PrometheusDatasourceEditor.js.map

package/dist/plugins/PrometheusDatasourceEditor/PrometheusDatasourceEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/PrometheusDatasourceEditor/PrometheusDatasourceEditor.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 { DurationString, RequestHeaders } from '@perses-dev/core';\nimport { OptionsEditorRadios } from '@perses-dev/plugin-system';\nimport { Grid, IconButton, TextField, Typography } from '@mui/material';\nimport React, { Fragment, useState } from 'react';\nimport MinusIcon from 'mdi-material-ui/Minus';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from './types';\n\nexport interface PrometheusDatasourceEditorProps {\n  value: PrometheusDatasourceSpec;\n  onChange: (next: PrometheusDatasourceSpec) => void;\n  isReadonly?: boolean;\n}\n\nexport function PrometheusDatasourceEditor(props: PrometheusDatasourceEditorProps) {\n  const { value, onChange, isReadonly } = props;\n  const strDirect = 'Direct access';\n  const strProxy = 'Proxy';\n\n  // TODO refactor with useImmer to avoid doing so much destructuring? feasibility & performances to be checked\n\n  // utilitary function used for headers when renaming a property\n  // -> TODO it would be cleaner to manipulate headers as a list instead, to avoid doing this.\n  //    This could be a pure frontend trick, but change in the backend datamodel should also be considered\n  const buildNewHeaders = (oldHeaders: RequestHeaders | undefined, oldName: string, newName: string) => {\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        <>\n          <TextField\n            fullWidth\n            label=\"URL\"\n            value={value.directUrl || ''}\n            InputProps={{\n              readOnly: isReadonly,\n            }}\n            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n            onChange={(e) => onChange({ ...value, directUrl: e.target.value })}\n          />\n        </>\n      ),\n    },\n    {\n      label: strProxy,\n      content: (\n        <>\n          <TextField\n            fullWidth\n            label=\"URL\"\n            value={value.proxy?.spec.url || ''}\n            InputProps={{\n              readOnly: isReadonly,\n            }}\n            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                ...(value.proxy && {\n                  proxy: {\n                    ...value.proxy,\n                    spec: {\n                      ...value.proxy.spec,\n                      url: e.target.value,\n                    },\n                  },\n                }),\n              })\n            }\n          />\n          <Typography variant=\"h4\" mt={2} mb={1}>\n            Allowed endpoints\n          </Typography>\n          <Grid container spacing={2} mb={2}>\n            {value.proxy?.spec.allowedEndpoints ? (\n              value.proxy.spec.allowedEndpoints.map(({ endpointPattern, method }, i) => {\n                return (\n                  <Fragment key={i}>\n                    <Grid item xs={8}>\n                      <TextField\n                        disabled // at the moment the allowed endpoints cannot be modified (enforced by backend)\n                        fullWidth\n                        label=\"Endpoint pattern\"\n                        value={endpointPattern}\n                        InputProps={{\n                          readOnly: isReadonly,\n                        }}\n                        InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                      />\n                    </Grid>\n                    <Grid item xs={4}>\n                      <TextField\n                        disabled // at the moment the allowed endpoints cannot be modified (enforced by backend)\n                        fullWidth\n                        label=\"URL\"\n                        value={method}\n                        InputProps={{\n                          readOnly: isReadonly,\n                        }}\n                        InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                      />\n                    </Grid>\n                  </Fragment>\n                );\n              })\n            ) : (\n              <Grid item xs={4}>\n                <Typography>None</Typography> {/* TODO: in edit mode, allow user to add endpoints */}\n              </Grid>\n            )}\n          </Grid>\n          <Typography variant=\"h4\" mb={1}>\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                      <TextField\n                        fullWidth\n                        label=\"Header name\"\n                        value={headerName}\n                        InputProps={{\n                          readOnly: isReadonly,\n                        }}\n                        InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                        onChange={(e) =>\n                          onChange({\n                            ...value,\n                            ...(value.proxy && {\n                              proxy: {\n                                ...value.proxy,\n                                spec: {\n                                  ...value.proxy.spec,\n                                  headers: buildNewHeaders(value.proxy.spec.headers, headerName, e.target.value),\n                                },\n                              },\n                            }),\n                          })\n                        }\n                      />\n                    </Grid>\n                    <Grid item xs={7}>\n                      <TextField\n                        fullWidth\n                        label=\"Header value\"\n                        value={value.proxy?.spec.headers?.[headerName]}\n                        InputProps={{\n                          readOnly: isReadonly,\n                        }}\n                        InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n                        onChange={(e) =>\n                          onChange({\n                            ...value,\n                            ...(value.proxy && {\n                              proxy: {\n                                ...value.proxy,\n                                spec: {\n                                  ...value.proxy.spec,\n                                  headers: { ...value.proxy.spec.headers, [headerName]: e.target.value },\n                                },\n                              },\n                            }),\n                          })\n                        }\n                      />\n                    </Grid>\n                    <Grid item xs={1}>\n                      <IconButton\n                        disabled={isReadonly}\n                        onClick={() => {\n                          const newHeaders = { ...value.proxy?.spec.headers };\n                          delete newHeaders[headerName];\n                          onChange({\n                            ...value,\n                            ...(value.proxy && {\n                              proxy: {\n                                ...value.proxy,\n                                spec: {\n                                  ...value.proxy.spec,\n                                  headers: newHeaders,\n                                },\n                              },\n                            }),\n                          });\n                        }}\n                      >\n                        <MinusIcon />\n                      </IconButton>\n                    </Grid>\n                  </Fragment>\n                );\n              })}\n            <Grid item xs={12} sx={{ paddingTop: '5px !important' }}>\n              <IconButton\n                disabled={isReadonly}\n                onClick={() =>\n                  onChange({\n                    ...value,\n                    ...(value.proxy && {\n                      proxy: {\n                        ...value.proxy,\n                        spec: {\n                          ...value.proxy.spec,\n                          headers: { ...value.proxy.spec.headers, '': '' },\n                        },\n                      },\n                    }),\n                  })\n                }\n              >\n                <PlusIcon />\n              </IconButton>\n            </Grid>\n          </Grid>\n          <TextField\n            fullWidth\n            label=\"Secret\"\n            value={value.proxy?.spec.secret || ''}\n            InputProps={{\n              readOnly: isReadonly,\n            }}\n            InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                ...(value.proxy && {\n                  proxy: {\n                    ...value.proxy,\n                    spec: {\n                      ...value.proxy.spec,\n                      secret: e.target.value,\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  const initialSpecDirect: PrometheusDatasourceSpec = {\n    directUrl: '',\n  };\n\n  const initialSpecProxy: PrometheusDatasourceSpec = {\n    proxy: {\n      kind: 'HTTPProxy',\n      spec: {\n        allowedEndpoints: [\n          // hardcoded list of allowed endpoints for now since those are enforced by the backend\n          {\n            endpointPattern: '/api/v1/labels',\n            method: 'POST',\n          },\n          {\n            endpointPattern: '/api/v1/series',\n            method: 'POST',\n          },\n          {\n            endpointPattern: '/api/v1/metadata',\n            method: 'GET',\n          },\n          {\n            endpointPattern: '/api/v1/query',\n            method: 'POST',\n          },\n          {\n            endpointPattern: '/api/v1/query_range',\n            method: 'POST',\n          },\n          {\n            endpointPattern: '/api/v1/label/([a-zA-Z0-9_-]+)/values',\n            method: 'GET',\n          },\n        ],\n        url: '',\n      },\n    },\n  };\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) => {\n    if (tabs[v]?.label == strDirect) {\n      setPreviousSpecProxy(value);\n      onChange(previousSpecDirect);\n    } else if (tabs[v]?.label == strProxy) {\n      setPreviousSpecDirect(value);\n      onChange(previousSpecProxy);\n    }\n  };\n\n  return (\n    <>\n      <Typography variant=\"h4\" mb={1}>\n        General Settings\n      </Typography>\n      <TextField\n        fullWidth\n        label=\"Scrape Interval\"\n        value={value.scrapeInterval || ''}\n        placeholder={`Default: ${DEFAULT_SCRAPE_INTERVAL}`}\n        InputProps={{\n          readOnly: isReadonly,\n        }}\n        InputLabelProps={{ shrink: isReadonly ? true : undefined }}\n        onChange={(e) => onChange({ ...value, scrapeInterval: e.target.value as DurationString })}\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":["OptionsEditorRadios","Grid","IconButton","TextField","Typography","React","Fragment","useState","MinusIcon","PlusIcon","DEFAULT_SCRAPE_INTERVAL","PrometheusDatasourceEditor","props","value","onChange","isReadonly","strDirect","strProxy","buildNewHeaders","oldHeaders","oldName","newName","undefined","keys","Object","newHeaders","reduce","acc","val","tabs","label","content","fullWidth","directUrl","InputProps","readOnly","InputLabelProps","shrink","e","target","proxy","spec","url","variant","mt","mb","container","spacing","allowedEndpoints","map","endpointPattern","method","i","item","xs","disabled","headers","headerName","onClick","sx","paddingTop","secret","directModeId","findIndex","tab","proxyModeId","defaultTab","initialSpecDirect","initialSpecProxy","kind","previousSpecDirect","setPreviousSpecDirect","previousSpecProxy","setPreviousSpecProxy","handleModeChange","v","scrapeInterval","placeholder","onModeChange"],"mappings":"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"}

package/dist/plugins/PrometheusDatasourceEditor/index.d.ts

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

package/dist/plugins/PrometheusDatasourceEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/PrometheusDatasourceEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,SAAS,CAAC"}

package/dist/plugins/PrometheusDatasourceEditor/index.js

@@ -0,0 +1,16 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './PrometheusDatasourceEditor';
+export * from './types';
+
+//# sourceMappingURL=index.js.map

package/dist/plugins/PrometheusDatasourceEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/PrometheusDatasourceEditor/index.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\nexport * from './PrometheusDatasourceEditor';\nexport * from './types';\n"],"names":[],"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,cAAc,+BAA+B;AAC7C,cAAc,UAAU"}

package/dist/plugins/PrometheusDatasourceEditor/types.d.ts

@@ -0,0 +1,22 @@
+import { DurationString, RequestHeaders } from '@perses-dev/core';
+export declare const DEFAULT_SCRAPE_INTERVAL: DurationString;
+export interface PrometheusDatasourceSpec {
+    directUrl?: string;
+    proxy?: HTTPProxy;
+    scrapeInterval?: DurationString;
+}
+export interface HTTPProxy {
+    kind: 'HTTPProxy';
+    spec: HTTPProxySpec;
+}
+export interface HTTPProxySpec {
+    url: string;
+    allowedEndpoints?: HTTPAllowedEndpoint[];
+    headers?: RequestHeaders;
+    secret?: string;
+}
+export interface HTTPAllowedEndpoint {
+    endpointPattern: string;
+    method: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/plugins/PrometheusDatasourceEditor/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/plugins/PrometheusDatasourceEditor/types.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElE,eAAO,MAAM,uBAAuB,EAAE,cAAqB,CAAC;AAG5D,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC;CACrB;AACD,MAAM,WAAW,aAAa;IAG5B,GAAG,EAAE,MAAM,CAAC;IAGZ,gBAAgB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAEzC,OAAO,CAAC,EAAE,cAAc,CAAC;IAGzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/plugins/PrometheusDatasourceEditor/types.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export const DEFAULT_SCRAPE_INTERVAL = '1m';
+
+//# sourceMappingURL=types.js.map

package/dist/plugins/PrometheusDatasourceEditor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/PrometheusDatasourceEditor/types.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 { DurationString, RequestHeaders } from '@perses-dev/core';\n\nexport const DEFAULT_SCRAPE_INTERVAL: DurationString = '1m';\n\n// TODO: unify this one with the other PrometheusDatasourceSpec used for datasource store manipulation\nexport interface PrometheusDatasourceSpec {\n  directUrl?: string;\n  proxy?: HTTPProxy;\n  scrapeInterval?: DurationString; // default to 1m\n}\n\nexport interface HTTPProxy {\n  kind: 'HTTPProxy';\n  spec: HTTPProxySpec;\n}\nexport interface HTTPProxySpec {\n  // url is the url of the datasource. It is not the url of the proxy.\n  // The Perses server is the proxy, so it needs to know where to redirect the request.\n  url: string;\n  // allowedEndpoints is a list of tuples of http methods and http endpoints that will be accessible.\n  // Leave it empty if you don't want to restrict the access to the datasource.\n  allowedEndpoints?: HTTPAllowedEndpoint[];\n  // headers can be used to provide additional headers that need to be forwarded when requesting the datasource\n  headers?: RequestHeaders;\n  // secret is the name of the secret that should be used for the proxy or discovery configuration\n  // It will contain any sensitive information such as password, token, certificate.\n  secret?: string;\n}\n\nexport interface HTTPAllowedEndpoint {\n  endpointPattern: string;\n  method: string;\n}\n"],"names":["DEFAULT_SCRAPE_INTERVAL"],"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;AAIjC,OAAO,MAAMA,0BAA0C,KAAK"}

package/dist/plugins/prometheus-datasource.d.ts

@@ -1,9 +1,11 @@
-import { RequestHeaders } from '@perses-dev/core';
+import { DurationString, RequestHeaders } from '@perses-dev/core';
 import { DatasourcePlugin } from '@perses-dev/plugin-system';
 import { PrometheusClient } from '../model';
+import { PrometheusDatasourceSpec as PrometheusDatasourceSpecFull } from './PrometheusDatasourceEditor';
 export interface PrometheusDatasourceSpec {
-    direct_url?: string;
+    directUrl?: string;
     headers?: RequestHeaders;
+    scrapeInterval?: DurationString;
 }
-export declare const PrometheusDatasource: DatasourcePlugin<PrometheusDatasourceSpec, PrometheusClient>;
+export declare const PrometheusDatasource: DatasourcePlugin<PrometheusDatasourceSpecFull, PrometheusClient>;
 //# sourceMappingURL=prometheus-datasource.d.ts.map

package/dist/plugins/prometheus-datasource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prometheus-datasource.d.ts","sourceRoot":"","sources":["../../src/plugins/prometheus-datasource.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAqD,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE/F,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AA2BD,eAAO,MAAM,oBAAoB,EAAE,gBAAgB,CAAC,wBAAwB,EAAE,gBAAgB,CAI7F,CAAC"}
+{"version":3,"file":"prometheus-datasource.d.ts","sourceRoot":"","sources":["../../src/plugins/prometheus-datasource.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA6B,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAqD,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC/F,OAAO,EAEL,wBAAwB,IAAI,4BAA4B,EACzD,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AA0ED,eAAO,MAAM,oBAAoB,EAAE,gBAAgB,CAAC,4BAA4B,EAAE,gBAAgB,CAKjG,CAAC"}

package/dist/plugins/prometheus-datasource.js

@@ -11,15 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { instantQuery, rangeQuery, labelNames, labelValues } from '../model';
+import { PrometheusDatasourceEditor } from './PrometheusDatasourceEditor';
 /**
  * Creates a PrometheusClient for a specific datasource spec.
  */ const createClient = (spec, options)=>{
-    const { direct_url , headers: specHeaders  } = spec;
+    const { directUrl , headers: specHeaders  } = spec;
     const { proxyUrl  } = options;
     // Use the direct URL if specified, but fallback to the proxyUrl by default if not specified
-    const datasourceUrl = direct_url !== null && direct_url !== void 0 ? direct_url : proxyUrl;
+    const datasourceUrl = directUrl !== null && directUrl !== void 0 ? directUrl : proxyUrl;
     if (datasourceUrl === undefined) {
-        throw new Error('No URL specified for Prometheus client. You can use direct_url in the spec to configure it.');
+        throw new Error('No URL specified for Prometheus client. You can use directUrl in the spec to configure it.');
     }
     // Could think about this becoming a class, although it definitely doesn't have to be
     return {
@@ -44,11 +45,55 @@ import { instantQuery, rangeQuery, labelNames, labelValues } from '../model';
             })
     };
 };
+const getBuiltinVariableDefinitions = ()=>{
+    return [
+        {
+            kind: 'BuiltinVariable',
+            spec: {
+                name: '__interval',
+                value: ()=>'$__interval',
+                source: 'Prometheus',
+                display: {
+                    name: '__interval',
+                    description: 'Interval that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',
+                    hidden: true
+                }
+            }
+        },
+        {
+            kind: 'BuiltinVariable',
+            spec: {
+                name: '__interval_ms',
+                value: ()=>'$__interval_ms',
+                source: 'Prometheus',
+                display: {
+                    name: '__interval_ms',
+                    description: 'Interval in millisecond that can be used to group by time in queries. When there are more data points than can be shown on a graph then queries can be made more efficient by grouping by a larger interval.',
+                    hidden: true
+                }
+            }
+        },
+        {
+            kind: 'BuiltinVariable',
+            spec: {
+                name: '__rate_interval',
+                value: ()=>'$__rate_interval',
+                source: 'Prometheus',
+                display: {
+                    name: '__rate_interval',
+                    description: "Interval at least four times the value of the scrape interval. It avoids problems specific to Prometheus when using 'rate' and 'increase' functions.",
+                    hidden: true
+                }
+            }
+        }
+    ];
+};
 export const PrometheusDatasource = {
     createClient,
-    OptionsEditorComponent: ()=>null,
+    getBuiltinVariableDefinitions,
+    OptionsEditorComponent: PrometheusDatasourceEditor,
     createInitialOptions: ()=>({
-            direct_url: ''
+            directUrl: ''
         })
 };