@grafana/aws-sdk 0.2.0 → 0.3.0

package/dist/index.js

@@ -6,8 +6,8 @@ var React = require('react');
 var ui = require('@grafana/ui');
 var data = require('@grafana/data');
 var runtime = require('@grafana/runtime');
-var lodash = require('lodash');
 var experimental = require('@grafana/experimental');
+var lodash = require('lodash');
 var asyncQueryData = require('@grafana/async-query-data');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -2100,6 +2100,200 @@ var _createEmotion = createEmotion({
 }),
     css = _createEmotion.css;
 
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const NewConnectionConfig = (_a) => {
+  var _b = _a, {
+    isARNInstructionsOpen,
+    setIsARNInstructionsOpen,
+    awsAssumeRoleEnabled,
+    currentProvider,
+    awsAllowedAuthProviders,
+    skipHeader,
+    regions,
+    assumeRoleInstructionsStyle
+  } = _b, props = __objRest(_b, [
+    "isARNInstructionsOpen",
+    "setIsARNInstructionsOpen",
+    "awsAssumeRoleEnabled",
+    "currentProvider",
+    "awsAllowedAuthProviders",
+    "skipHeader",
+    "regions",
+    "assumeRoleInstructionsStyle"
+  ]);
+  var _a2, _b2, _c, _d, _e, _f, _g;
+  const options = props.options;
+  return /* @__PURE__ */ React__default["default"].createElement("div", { "data-testid": "connection-config" }, /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSection, { title: skipHeader ? "" : "Connection Details", "data-testid": "connection-config" }, /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSubSection, { title: "Authentication" }, /* @__PURE__ */ React__default["default"].createElement(
+    ui.Field,
+    {
+      label: "Authentication Provider",
+      description: "Specify which AWS credentials chain to use.",
+      htmlFor: "authProvider"
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      ui.Select,
+      {
+        id: "authProvider",
+        "aria-label": "Authentication Provider",
+        value: currentProvider,
+        options: awsAuthProviderOptions.filter((opt) => awsAllowedAuthProviders.includes(opt.value)),
+        defaultValue: options.jsonData.authType,
+        onChange: (option) => {
+          data.onUpdateDatasourceJsonDataOptionSelect(props, "authType")(option);
+        },
+        menuShouldPortal: true
+      }
+    )
+  ), options.jsonData.authType === "credentials" && /* @__PURE__ */ React__default["default"].createElement(
+    ui.Field,
+    {
+      label: "Credentials Profile Name",
+      description: "Credentials profile name, as specified in ~/.aws/credentials, leave blank for default.",
+      htmlFor: "credentialsProfileName"
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      ui.Input,
+      {
+        id: "credentialsProfileName",
+        placeholder: "default",
+        value: options.jsonData.profile,
+        onChange: data.onUpdateDatasourceJsonDataOption(props, "profile")
+      }
+    )
+  ), options.jsonData.authType === "keys" && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(ui.Field, { label: "Access Key ID", htmlFor: "accessKeyId" }, ((_a2 = props.options.secureJsonFields) == null ? void 0 : _a2.accessKey) ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, null, /* @__PURE__ */ React__default["default"].createElement(ui.Input, { disabled: true, placeholder: "Configured", id: "accessKeyId" }), /* @__PURE__ */ React__default["default"].createElement(
+    ui.ToolbarButton,
+    {
+      icon: "edit",
+      tooltip: "Edit Access Key ID",
+      type: "button",
+      onClick: data.onUpdateDatasourceResetOption(props, "accessKey")
+    }
+  )) : /* @__PURE__ */ React__default["default"].createElement(
+    ui.Input,
+    {
+      id: "accessKeyId",
+      value: (_c = (_b2 = options.secureJsonData) == null ? void 0 : _b2.accessKey) != null ? _c : "",
+      onChange: data.onUpdateDatasourceSecureJsonDataOption(props, "accessKey")
+    }
+  )), /* @__PURE__ */ React__default["default"].createElement(ui.Field, { label: "Secret Access Key", htmlFor: "secretKey" }, ((_d = props.options.secureJsonFields) == null ? void 0 : _d.secretKey) ? /* @__PURE__ */ React__default["default"].createElement(ui.ButtonGroup, null, /* @__PURE__ */ React__default["default"].createElement(ui.Input, { disabled: true, placeholder: "Configured" }), /* @__PURE__ */ React__default["default"].createElement(
+    ui.ToolbarButton,
+    {
+      id: "secretKey",
+      icon: "edit",
+      type: "button",
+      tooltip: "Edit Secret Access Key",
+      onClick: data.onUpdateDatasourceResetOption(props, "secretKey")
+    }
+  )) : /* @__PURE__ */ React__default["default"].createElement(
+    ui.Input,
+    {
+      id: "secretKey",
+      value: (_f = (_e = options.secureJsonData) == null ? void 0 : _e.secretKey) != null ? _f : "",
+      onChange: data.onUpdateDatasourceSecureJsonDataOption(props, "secretKey")
+    }
+  )))), /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSubSection, { title: "Assume Role" }, options.jsonData.authType === AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement("div", { className: assumeRoleInstructionsStyle }, /* @__PURE__ */ React__default["default"].createElement(
+    ui.Collapse,
+    {
+      label: "How to create an IAM role for grafana to assume:",
+      collapsible: true,
+      isOpen: isARNInstructionsOpen,
+      onToggle: () => setIsARNInstructionsOpen(!isARNInstructionsOpen)
+    },
+    /* @__PURE__ */ React__default["default"].createElement("ol", null, /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "1. Create a new IAM role in the AWS console, and select ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Another AWS account"), " as the", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Trusted entity"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "2. Enter the account ID of the Grafana account that has permission to assume this role:", /* @__PURE__ */ React__default["default"].createElement("code", null, " 008923505280 "), " and check the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Require external ID"), " box.")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "3. Enter the following external ID:", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, props.externalId || "External Id is currently unavailable"), " and click", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Next"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "4. Add any required permissions you would like Grafana to be able to access on your behalf. For more details on our permissions please", " ", /* @__PURE__ */ React__default["default"].createElement(
+      "a",
+      {
+        href: "https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/",
+        target: "_blank",
+        rel: "noreferrer"
+      },
+      "read through our documentation"
+    ), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "5. Give the role a name and description, and click ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Create role"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "6. Copy the ARN of the role you just created and paste it into the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Assume Role ARN"), " ", "field below.")))
+  )), awsAssumeRoleEnabled && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
+    ui.Field,
+    {
+      htmlFor: "assumeRoleArn",
+      label: "Assume Role ARN",
+      description: "Optional. Specifying the ARN of a role will ensure that the\n                  selected authentication provider is used to assume the role rather than the\n                  credentials directly."
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      ui.Input,
+      {
+        id: "assumeRoleArn",
+        placeholder: "arn:aws:iam:*",
+        value: options.jsonData.assumeRoleArn || "",
+        onChange: data.onUpdateDatasourceJsonDataOption(props, "assumeRoleArn")
+      }
+    )
+  ), options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement(
+    ui.Field,
+    {
+      htmlFor: "externalId",
+      label: "External ID",
+      description: "If you are assuming a role in another account, that has been created with an external ID, specify the external ID here."
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      ui.Input,
+      {
+        id: "externalId",
+        placeholder: "External ID",
+        value: options.jsonData.externalId || "",
+        onChange: data.onUpdateDatasourceJsonDataOption(props, "externalId")
+      }
+    )
+  ))), /* @__PURE__ */ React__default["default"].createElement(experimental.ConfigSubSection, { title: "Additional Settings" }, !props.skipEndpoint && options.jsonData.authType !== AwsAuthType.GrafanaAssumeRole && /* @__PURE__ */ React__default["default"].createElement(
+    ui.Field,
+    {
+      label: "Endpoint",
+      description: "Optionally, specify a custom endpoint for the service",
+      htmlFor: "endpoint"
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      ui.Input,
+      {
+        id: "endpoint",
+        placeholder: (_g = props.defaultEndpoint) != null ? _g : "https://{service}.{region}.amazonaws.com",
+        value: options.jsonData.endpoint || "",
+        onChange: data.onUpdateDatasourceJsonDataOption(props, "endpoint")
+      }
+    )
+  ), /* @__PURE__ */ React__default["default"].createElement(
+    ui.Field,
+    {
+      label: "Default Region",
+      description: "Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region.",
+      htmlFor: "defaultRegion"
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      ui.Select,
+      {
+        id: "defaultRegion",
+        "aria-label": "Default Region",
+        value: regions.find((region) => region.value === options.jsonData.defaultRegion),
+        options: regions,
+        defaultValue: options.jsonData.defaultRegion,
+        allowCustomValue: true,
+        onChange: data.onUpdateDatasourceJsonDataOptionSelect(props, "defaultRegion"),
+        formatCreateLabel: (r) => `Use region: ${r}`,
+        menuShouldPortal: true
+      }
+    )
+  )), props.children));
+};
+
 var __defProp$7 = Object.defineProperty;
 var __defProps$6 = Object.defineProperties;
 var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
@@ -2159,7 +2353,18 @@ const ConnectionConfig = (props) => {
   }, [loadRegions]);
   const inputWidth = inExperimentalAuthComponent ? "width-20" : "width-30";
   const styles = ui.useStyles2(getStyles);
-  return /* @__PURE__ */ React__default["default"].createElement(ui.FieldSet, { label: skipHeader ? "" : "Connection Details", "data-testid": "connection-config" }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React__default["default"].createElement(
+    NewConnectionConfig,
+    __spreadValues$7({
+      currentProvider,
+      awsAllowedAuthProviders,
+      isARNInstructionsOpen,
+      setIsARNInstructionsOpen,
+      awsAssumeRoleEnabled,
+      regions,
+      assumeRoleInstructionsStyle: styles.assumeRoleInstructions
+    }, props)
+  ) : /* @__PURE__ */ React__default["default"].createElement(ui.FieldSet, { label: skipHeader ? "" : "Connection Details", "data-testid": "connection-config" }, /* @__PURE__ */ React__default["default"].createElement(
     ui.InlineField,
     {
       label: "Authentication Provider",
@@ -2237,7 +2442,7 @@ const ConnectionConfig = (props) => {
       isOpen: isARNInstructionsOpen,
       onToggle: () => setIsARNInstructionsOpen(!isARNInstructionsOpen)
     },
-    /* @__PURE__ */ React__default["default"].createElement("ol", null, /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "1. Create a new IAM role in the AWS console, and select ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Another AWS account"), " as the", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Trusted entity"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "2. Enter the account ID of the Grafana account that has permission to assume this role:", /* @__PURE__ */ React__default["default"].createElement("code", null, " 008923505280 "), " and check the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Require external ID"), " box.")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "3. Enter the following external ID:", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, props.externalId || "External Id is currently unavailable"), " and click ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Next"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "4. Add any required permissions you would like Grafana to be able to access on your behalf. For more details on our permissions please", " ", /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement("ol", null, /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "1. Create a new IAM role in the AWS console, and select ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Another AWS account"), " as the", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Trusted entity"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "2. Enter the account ID of the Grafana account that has permission to assume this role:", /* @__PURE__ */ React__default["default"].createElement("code", null, " 008923505280 "), " and check the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Require external ID"), " box.")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "3. Enter the following external ID:", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, props.externalId || "External Id is currently unavailable"), " and click", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Next"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "4. Add any required permissions you would like Grafana to be able to access on your behalf. For more details on our permissions please", " ", /* @__PURE__ */ React__default["default"].createElement(
       "a",
       {
         href: "https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/",
@@ -2245,7 +2450,7 @@ const ConnectionConfig = (props) => {
         rel: "noreferrer"
       },
       "read through our documentation"
-    ), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "5. Give the role a name and description, and click ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Create role"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "6. Copy the ARN of the role you just created and paste it into the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Assume Role ARN"), " field below.")))
+    ), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "5. Give the role a name and description, and click ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Create role"), ".")), /* @__PURE__ */ React__default["default"].createElement("li", null, /* @__PURE__ */ React__default["default"].createElement("p", null, "6. Copy the ARN of the role you just created and paste it into the ", /* @__PURE__ */ React__default["default"].createElement("code", null, "Assume Role ARN"), " ", "field below.")))
   )), awsAssumeRoleEnabled && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
     ui.InlineField,
     {
@@ -2318,7 +2523,7 @@ const ConnectionConfig = (props) => {
         menuShouldPortal: true
       }
     )
-  ), props.children);
+  ), props.children));
 };
 function getStyles() {
   return {
@@ -2328,6 +2533,16 @@ function getStyles() {
   };
 }
 
+function Divider() {
+  const theme = ui.useTheme2();
+  return /* @__PURE__ */ React__default["default"].createElement(
+    "div",
+    {
+      style: { borderTop: `1px solid ${theme.colors.border.weak}`, margin: theme.spacing(2, 0), width: "100%" }
+    }
+  );
+}
+
 var __defProp$6 = Object.defineProperty;
 var __defProps$5 = Object.defineProperties;
 var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
@@ -2497,9 +2712,10 @@ function ResourceSelector(props) {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: props.label, labelWidth: props.labelWidth, tooltip: props.tooltip, hidden: props.hidden }, /* @__PURE__ */ React__default["default"].createElement("div", { "data-testid": props["data-testid"], title: props.title }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React__default["default"].createElement(
     ui.Select,
     __spreadProps$4(__spreadValues$5({}, props), {
+      id: props.id,
       "aria-label": props.label,
       options,
       onChange,
@@ -2508,7 +2724,29 @@ function ResourceSelector(props) {
       onOpenMenu: () => props.fetch && onClick(),
       menuShouldPortal: true
     })
-  )));
+  ) : /* @__PURE__ */ React__default["default"].createElement(
+    ui.InlineField,
+    {
+      label: props.label,
+      labelWidth: props.labelWidth,
+      tooltip: props.tooltip,
+      hidden: props.hidden,
+      htmlFor: props.id
+    },
+    /* @__PURE__ */ React__default["default"].createElement("div", { "data-testid": props["data-testid"], title: props.title }, /* @__PURE__ */ React__default["default"].createElement(
+      ui.Select,
+      __spreadProps$4(__spreadValues$5({}, props), {
+        id: props.id,
+        "aria-label": props.label,
+        options,
+        onChange,
+        isLoading,
+        className: props.className || "min-width-6",
+        onOpenMenu: () => props.fetch && onClick(),
+        menuShouldPortal: true
+      })
+    ))
+  ));
 }
 
 var __defProp$4 = Object.defineProperty;
@@ -2548,6 +2786,8 @@ function ConfigSelect(props) {
   return /* @__PURE__ */ React__default["default"].createElement(
     ResourceSelector,
     __spreadValues$4({
+      id: props.id,
+      newFormStylingEnabled: props.newFormStylingEnabled,
       label: props.label,
       "data-testid": props["data-testid"],
       onChange: props.onChange,
@@ -2705,14 +2945,25 @@ var __spreadValues$2 = (a, b) => {
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 function FormatSelect(props) {
+  var _a;
   const onChangeFormat = (e) => {
-    var _a;
+    var _a2;
     props.onChange(__spreadProps$2(__spreadValues$2({}, props.query), {
       format: e.value || 0
     }));
-    (_a = props.onRunQuery) == null ? void 0 : _a.call(props);
+    (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
   };
-  return /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Format as", labelWidth: 11 }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React__default["default"].createElement(
+    ui.Select,
+    {
+      "aria-label": "Format dataframes as",
+      id: (_a = props.id) != null ? _a : "formatAs",
+      options: props.options,
+      value: props.query.format,
+      onChange: onChangeFormat,
+      menuShouldPortal: true
+    }
+  ) : /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Format as", labelWidth: 11 }, /* @__PURE__ */ React__default["default"].createElement(
     ui.Select,
     {
       "aria-label": "Format as",
@@ -2722,7 +2973,7 @@ function FormatSelect(props) {
       className: "width-12",
       menuShouldPortal: true
     }
-  ));
+  )));
 }
 
 var __defProp$1 = Object.defineProperty;
@@ -2765,11 +3016,13 @@ const SelectableFillValueOptions = [
   }
 ];
 function FillValueSelect(props) {
-  var _a, _b, _c;
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Fill value", tooltip: "value to fill missing points" }, /* @__PURE__ */ React__default["default"].createElement(
+  var _a, _b, _c, _d, _e, _f;
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.newFormStylingEnabled ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(experimental.EditorField, { label: "Fill with", tooltip: "value to fill missing points", htmlFor: "fillWith" }, /* @__PURE__ */ React__default["default"].createElement(
     ui.Select,
     {
-      "aria-label": "Fill value",
+      id: "fillWith",
+      "aria-label": "Fill with",
+      "data-testid": "table-fill-with-select",
       options: SelectableFillValueOptions,
       value: (_b = (_a = props.query.fillMode) == null ? void 0 : _a.mode) != null ? _b : 0 /* Previous */,
       onChange: ({ value }) => {
@@ -2779,10 +3032,43 @@ function FillValueSelect(props) {
         }));
         (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
       },
+      menuShouldPortal: true
+    }
+  )), ((_c = props.query.fillMode) == null ? void 0 : _c.mode) === 2 /* Value */ && /* @__PURE__ */ React__default["default"].createElement(experimental.EditorField, { label: "Value", htmlFor: "valueToFill", width: 6 }, /* @__PURE__ */ React__default["default"].createElement(
+    ui.Input,
+    {
+      id: "valueToFill",
+      "aria-label": "Value",
+      type: "number",
+      value: props.query.fillMode.value,
+      onChange: ({ currentTarget }) => props.onChange(__spreadProps$1(__spreadValues$1({}, props.query), {
+        fillMode: {
+          mode: 2 /* Value */,
+          value: currentTarget.valueAsNumber
+        }
+      })),
+      onBlur: () => {
+        var _a2;
+        return (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
+      }
+    }
+  ))) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Fill value", tooltip: "value to fill missing points" }, /* @__PURE__ */ React__default["default"].createElement(
+    ui.Select,
+    {
+      "aria-label": "Fill value",
+      options: SelectableFillValueOptions,
+      value: (_e = (_d = props.query.fillMode) == null ? void 0 : _d.mode) != null ? _e : 0 /* Previous */,
+      onChange: ({ value }) => {
+        var _a2;
+        props.onChange(__spreadProps$1(__spreadValues$1({}, props.query), {
+          fillMode: __spreadProps$1(__spreadValues$1({}, props.query.fillMode), { mode: value })
+        }));
+        (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
+      },
       className: "width-12",
       menuShouldPortal: true
     }
-  )), ((_c = props.query.fillMode) == null ? void 0 : _c.mode) === 2 /* Value */ && /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Value", labelWidth: 11 }, /* @__PURE__ */ React__default["default"].createElement(
+  )), ((_f = props.query.fillMode) == null ? void 0 : _f.mode) === 2 /* Value */ && /* @__PURE__ */ React__default["default"].createElement(ui.InlineField, { label: "Value", labelWidth: 11 }, /* @__PURE__ */ React__default["default"].createElement(
     ui.Input,
     {
       type: "number",
@@ -2799,7 +3085,7 @@ function FillValueSelect(props) {
         return (_a2 = props.onRunQuery) == null ? void 0 : _a2.call(props);
       }
     }
-  )));
+  ))));
 }
 
 var __defProp = Object.defineProperty;
@@ -2864,6 +3150,7 @@ exports.AwsAuthType = AwsAuthType;
 exports.ConfigSelect = ConfigSelect;
 exports.ConnectionConfig = ConnectionConfig;
 exports.DEFAULT_LABEL_WIDTH = DEFAULT_LABEL_WIDTH;
+exports.Divider = Divider;
 exports.FillValueOptions = FillValueOptions;
 exports.FillValueSelect = FillValueSelect;
 exports.FormatSelect = FormatSelect;