@grafana/ui/dist/cjs/components/RefreshPicker/RefreshPicker.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var formatDuration = require('date-fns/formatDuration');
var React = require('react');
var data = require('@grafana/data');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var ButtonGroup = require('../Button/ButtonGroup.cjs');
var ButtonSelect = require('../Dropdown/ButtonSelect.cjs');
var ToolbarButton = require('../ToolbarButton/ToolbarButton.cjs');

"use strict";
const defaultIntervals = ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"];
const offOption = {
  label: "Off",
  value: "",
  ariaLabel: "Off"
};
const liveOption = {
  label: "Live",
  value: "LIVE",
  ariaLabel: "Live"
};
const autoOption = {
  label: "Auto",
  value: "auto",
  ariaLabel: "Auto"
};
const RefreshPickerComponent = React.memo((props) => {
  var _a;
  const {
    intervals,
    onRefresh,
    onIntervalChanged,
    value,
    tooltip,
    isLoading,
    isLive,
    text,
    loadingText,
    noIntervalPicker,
    showAutoInterval,
    width,
    primary,
    isOnCanvas
  } = props;
  const styles = ThemeContext.useStyles2(getStyles);
  const currentValue = value || "";
  const options = intervalsToOptions({ intervals, showAutoInterval });
  const option = options.find(({ value: value2 }) => value2 === currentValue);
  const translatedOffOption = translateOption(offOption.value);
  let selectedValue = option || translatedOffOption;
  const handleChangeSelect = (item) => {
    if (onIntervalChanged && item.value != null) {
      onIntervalChanged(item.value);
    }
  };
  const getVariant = () => {
    if (isLive) {
      return "primary";
    }
    if (primary) {
      return "primary";
    }
    return isOnCanvas ? "canvas" : "default";
  };
  const variant = getVariant();
  if (selectedValue.label === translatedOffOption.label) {
    selectedValue = { value: "" };
  }
  const durationAriaLabel = (_a = selectedValue.ariaLabel) != null ? _a : selectedValue.label;
  const ariaLabelDurationSelectedMessage = i18n.t(
    "refresh-picker.aria-label.duration-selected",
    "Choose refresh time interval with current interval {{durationAriaLabel}} selected",
    { durationAriaLabel }
  );
  const ariaLabelChooseIntervalMessage = i18n.t(
    "refresh-picker.aria-label.choose-interval",
    "Auto refresh turned off. Choose refresh time interval"
  );
  const ariaLabel = selectedValue.value === "" ? ariaLabelChooseIntervalMessage : ariaLabelDurationSelectedMessage;
  const tooltipIntervalSelected = i18n.t("refresh-picker.tooltip.interval-selected", "Set auto refresh interval");
  const tooltipAutoRefreshOff = i18n.t("refresh-picker.tooltip.turned-off", "Auto refresh off");
  const tooltipAutoRefresh = selectedValue.value === "" ? tooltipAutoRefreshOff : tooltipIntervalSelected;
  return /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup.ButtonGroup, { className: "refresh-picker", children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      ToolbarButton.ToolbarButton,
      {
        "aria-label": loadingText && isLoading ? loadingText : text,
        tooltip,
        onClick: onRefresh,
        variant,
        icon: isLoading ? "spinner" : "sync",
        style: width ? { width } : void 0,
        "data-testid": e2eSelectors.selectors.components.RefreshPicker.runButtonV2,
        children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.textWrapper, children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            "span",
            {
              className: css.cx(styles.text, {
                [styles.hideText]: Boolean(loadingText && isLoading)
              }),
              children: text
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            "span",
            {
              className: css.cx(styles.text, {
                [styles.hideText]: !loadingText || !isLoading
              }),
              children: loadingText
            }
          )
        ] })
      }
    ),
    !noIntervalPicker && /* @__PURE__ */ jsxRuntime.jsx(
      ButtonSelect.ButtonSelect,
      {
        className: css.css({
          borderTopLeftRadius: "unset",
          borderBottomLeftRadius: "unset"
        }),
        value: selectedValue,
        options,
        onChange: handleChangeSelect,
        variant,
        "data-testid": e2eSelectors.selectors.components.RefreshPicker.intervalButtonV2,
        "aria-label": ariaLabel,
        tooltip: tooltipAutoRefresh
      }
    )
  ] });
});
RefreshPickerComponent.displayName = "RefreshPicker";
const RefreshPicker = Object.assign(RefreshPickerComponent, {
  isLive: (refreshInterval) => refreshInterval === liveOption.value,
  liveOption,
  offOption,
  autoOption
});
const translateOption = (option) => {
  switch (option) {
    case liveOption.value:
      return {
        label: i18n.t("refresh-picker.live-option.label", "Live"),
        value: option
      };
    case offOption.value:
      return {
        label: i18n.t("refresh-picker.off-option.label", "Off"),
        value: option
      };
    case autoOption.value:
      return {
        label: i18n.t("refresh-picker.auto-option.label", "Auto"),
        value: option
      };
  }
  return {
    label: option,
    value: option
  };
};
const intervalsToOptions = ({
  intervals = defaultIntervals,
  showAutoInterval = false
} = {}) => {
  const options = intervals.map((interval) => {
    const duration = data.parseDuration(interval);
    const ariaLabel = formatDuration.formatDuration(duration);
    return {
      label: interval,
      value: interval,
      ariaLabel
    };
  });
  if (showAutoInterval) {
    options.unshift(translateOption(autoOption.value));
  }
  options.unshift(translateOption(offOption.value));
  return options;
};
const getStyles = (theme) => ({
  textWrapper: css.css({
    display: "grid",
    gridTemplateColumns: "1fr",
    gridTemplateRows: "1fr"
  }),
  text: css.css({
    gridColumnStart: 1,
    gridRowStart: 1
  }),
  hideText: css.css({
    visibility: "hidden"
  })
});

exports.RefreshPicker = RefreshPicker;
exports.defaultIntervals = defaultIntervals;
exports.intervalsToOptions = intervalsToOptions;
exports.translateOption = translateOption;
//# sourceMappingURL=RefreshPicker.cjs.map