@grafana/ui/dist/esm/components/RefreshPicker/RefreshPicker.mjs

Grafana Components Library

import { jsxs, jsx } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import { formatDuration } from 'date-fns/formatDuration';
import { memo } from 'react';
import { parseDuration } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { t } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { ButtonGroup } from '../Button/ButtonGroup.mjs';
import { ButtonSelect } from '../Dropdown/ButtonSelect.mjs';
import { ToolbarButton } from '../ToolbarButton/ToolbarButton.mjs';

"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 = memo((props) => {
  var _a;
  const {
    intervals,
    onRefresh,
    onIntervalChanged,
    value,
    tooltip,
    isLoading,
    isLive,
    text,
    loadingText,
    noIntervalPicker,
    showAutoInterval,
    width,
    primary,
    isOnCanvas
  } = props;
  const styles = 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 = t(
    "refresh-picker.aria-label.duration-selected",
    "Choose refresh time interval with current interval {{durationAriaLabel}} selected",
    { durationAriaLabel }
  );
  const ariaLabelChooseIntervalMessage = t(
    "refresh-picker.aria-label.choose-interval",
    "Auto refresh turned off. Choose refresh time interval"
  );
  const ariaLabel = selectedValue.value === "" ? ariaLabelChooseIntervalMessage : ariaLabelDurationSelectedMessage;
  const tooltipIntervalSelected = t("refresh-picker.tooltip.interval-selected", "Set auto refresh interval");
  const tooltipAutoRefreshOff = t("refresh-picker.tooltip.turned-off", "Auto refresh off");
  const tooltipAutoRefresh = selectedValue.value === "" ? tooltipAutoRefreshOff : tooltipIntervalSelected;
  return /* @__PURE__ */ jsxs(ButtonGroup, { className: "refresh-picker", children: [
    /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        "aria-label": loadingText && isLoading ? loadingText : text,
        tooltip,
        onClick: onRefresh,
        variant,
        icon: isLoading ? "spinner" : "sync",
        style: width ? { width } : void 0,
        "data-testid": selectors.components.RefreshPicker.runButtonV2,
        children: /* @__PURE__ */ jsxs("span", { className: styles.textWrapper, children: [
          /* @__PURE__ */ jsx(
            "span",
            {
              className: cx(styles.text, {
                [styles.hideText]: Boolean(loadingText && isLoading)
              }),
              children: text
            }
          ),
          /* @__PURE__ */ jsx(
            "span",
            {
              className: cx(styles.text, {
                [styles.hideText]: !loadingText || !isLoading
              }),
              children: loadingText
            }
          )
        ] })
      }
    ),
    !noIntervalPicker && /* @__PURE__ */ jsx(
      ButtonSelect,
      {
        className: css({
          borderTopLeftRadius: "unset",
          borderBottomLeftRadius: "unset"
        }),
        value: selectedValue,
        options,
        onChange: handleChangeSelect,
        variant,
        "data-testid": 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: t("refresh-picker.live-option.label", "Live"),
        value: option
      };
    case offOption.value:
      return {
        label: t("refresh-picker.off-option.label", "Off"),
        value: option
      };
    case autoOption.value:
      return {
        label: 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 = parseDuration(interval);
    const ariaLabel = 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({
    display: "grid",
    gridTemplateColumns: "1fr",
    gridTemplateRows: "1fr"
  }),
  text: css({
    gridColumnStart: 1,
    gridRowStart: 1
  }),
  hideText: css({
    visibility: "hidden"
  })
});

export { RefreshPicker, defaultIntervals, intervalsToOptions, translateOption };
//# sourceMappingURL=RefreshPicker.mjs.map