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

Grafana Components Library

{"version":3,"file":"RefreshPicker.cjs","sources":["../../../../src/components/RefreshPicker/RefreshPicker.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { formatDuration } from 'date-fns/formatDuration';\nimport { memo } from 'react';\n\nimport { type GrafanaTheme2, type SelectableValue, parseDuration } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { ButtonGroup } from '../Button/ButtonGroup';\nimport { ButtonSelect } from '../Dropdown/ButtonSelect';\nimport { ToolbarButton, type ToolbarButtonVariant } from '../ToolbarButton/ToolbarButton';\n\n// Default intervals used in the refresh picker component\nexport const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];\n\nexport interface Props {\n  intervals?: string[];\n  onRefresh?: () => void;\n  onIntervalChanged: (interval: string) => void;\n  value?: string;\n  tooltip?: string;\n  isLoading?: boolean;\n  isLive?: boolean;\n  text?: string;\n  loadingText?: string;\n  noIntervalPicker?: boolean;\n  showAutoInterval?: boolean;\n  width?: string;\n  primary?: boolean;\n  isOnCanvas?: boolean;\n}\n\nconst offOption = {\n  label: 'Off',\n  value: '',\n  ariaLabel: 'Off',\n};\nconst liveOption = {\n  label: 'Live',\n  value: 'LIVE',\n  ariaLabel: 'Live',\n};\nconst autoOption = {\n  label: 'Auto',\n  value: 'auto',\n  ariaLabel: 'Auto',\n};\n\n/**\n * This component is used on dashboards to refresh visualizations.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-refreshpicker--docs\n */\nconst RefreshPickerComponent = memo((props: Props) => {\n  const {\n    intervals,\n    onRefresh,\n    onIntervalChanged,\n    value,\n    tooltip,\n    isLoading,\n    isLive,\n    text,\n    loadingText,\n    noIntervalPicker,\n    showAutoInterval,\n    width,\n    primary,\n    isOnCanvas,\n  } = props;\n  const styles = useStyles2(getStyles);\n  const currentValue = value || '';\n  const options = intervalsToOptions({ intervals, showAutoInterval });\n  const option = options.find(({ value }) => value === currentValue);\n  const translatedOffOption = translateOption(offOption.value);\n  let selectedValue = option || translatedOffOption;\n  const handleChangeSelect = (item: SelectableValue<string>) => {\n    if (onIntervalChanged && item.value != null) {\n      onIntervalChanged(item.value);\n    }\n  };\n\n  const getVariant = (): ToolbarButtonVariant => {\n    if (isLive) {\n      return 'primary';\n    }\n\n    if (primary) {\n      return 'primary';\n    }\n\n    return isOnCanvas ? 'canvas' : 'default';\n  };\n  const variant = getVariant();\n\n  if (selectedValue.label === translatedOffOption.label) {\n    selectedValue = { value: '' };\n  }\n\n  const durationAriaLabel = selectedValue.ariaLabel ?? selectedValue.label;\n  const ariaLabelDurationSelectedMessage = t(\n    'refresh-picker.aria-label.duration-selected',\n    'Choose refresh time interval with current interval {{durationAriaLabel}} selected',\n    { durationAriaLabel }\n  );\n  const ariaLabelChooseIntervalMessage = t(\n    'refresh-picker.aria-label.choose-interval',\n    'Auto refresh turned off. Choose refresh time interval'\n  );\n  const ariaLabel = selectedValue.value === '' ? ariaLabelChooseIntervalMessage : ariaLabelDurationSelectedMessage;\n\n  const tooltipIntervalSelected = t('refresh-picker.tooltip.interval-selected', 'Set auto refresh interval');\n  const tooltipAutoRefreshOff = t('refresh-picker.tooltip.turned-off', 'Auto refresh off');\n  const tooltipAutoRefresh = selectedValue.value === '' ? tooltipAutoRefreshOff : tooltipIntervalSelected;\n\n  return (\n    <ButtonGroup className=\"refresh-picker\">\n      <ToolbarButton\n        aria-label={loadingText && isLoading ? loadingText : text}\n        tooltip={tooltip}\n        onClick={onRefresh}\n        variant={variant}\n        icon={isLoading ? 'spinner' : 'sync'}\n        style={width ? { width } : undefined}\n        data-testid={selectors.components.RefreshPicker.runButtonV2}\n      >\n        <span className={styles.textWrapper}>\n          <span\n            className={cx(styles.text, {\n              [styles.hideText]: Boolean(loadingText && isLoading),\n            })}\n          >\n            {text}\n          </span>\n          <span\n            className={cx(styles.text, {\n              [styles.hideText]: !loadingText || !isLoading,\n            })}\n          >\n            {loadingText}\n          </span>\n        </span>\n      </ToolbarButton>\n      {!noIntervalPicker && (\n        <ButtonSelect\n          className={css({\n            borderTopLeftRadius: 'unset',\n            borderBottomLeftRadius: 'unset',\n          })}\n          value={selectedValue}\n          options={options}\n          onChange={handleChangeSelect}\n          variant={variant}\n          data-testid={selectors.components.RefreshPicker.intervalButtonV2}\n          aria-label={ariaLabel}\n          tooltip={tooltipAutoRefresh}\n        />\n      )}\n    </ButtonGroup>\n  );\n});\n\nRefreshPickerComponent.displayName = 'RefreshPicker';\n\nexport const RefreshPicker = Object.assign(RefreshPickerComponent, {\n  isLive: (refreshInterval?: string): boolean => refreshInterval === liveOption.value,\n  liveOption,\n  offOption,\n  autoOption,\n});\n\nexport const translateOption = (option: string): SelectableValue<string> => {\n  switch (option) {\n    case liveOption.value:\n      return {\n        label: t('refresh-picker.live-option.label', 'Live'),\n        value: option,\n      };\n    case offOption.value:\n      return {\n        label: t('refresh-picker.off-option.label', 'Off'),\n        value: option,\n      };\n    case autoOption.value:\n      return {\n        label: t('refresh-picker.auto-option.label', 'Auto'),\n        value: option,\n      };\n  }\n  return {\n    label: option,\n    value: option,\n  };\n};\n\nexport const intervalsToOptions = ({\n  intervals = defaultIntervals,\n  showAutoInterval = false,\n}: { intervals?: string[]; showAutoInterval?: boolean } = {}): Array<SelectableValue<string>> => {\n  const options: Array<SelectableValue<string>> = intervals.map((interval) => {\n    const duration = parseDuration(interval);\n    const ariaLabel = formatDuration(duration);\n\n    return {\n      label: interval,\n      value: interval,\n      ariaLabel: ariaLabel,\n    };\n  });\n\n  if (showAutoInterval) {\n    options.unshift(translateOption(autoOption.value));\n  }\n  options.unshift(translateOption(offOption.value));\n  return options;\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  textWrapper: css({\n    display: 'grid',\n    gridTemplateColumns: '1fr',\n    gridTemplateRows: '1fr',\n  }),\n  text: css({\n    gridColumnStart: 1,\n    gridRowStart: 1,\n  }),\n  hideText: css({\n    visibility: 'hidden',\n  }),\n});\n"],"names":["memo","useStyles2","value","t","jsxs","ButtonGroup","jsx","ToolbarButton","selectors","cx","ButtonSelect","css","parseDuration","formatDuration"],"mappings":";;;;;;;;;;;;;;;;;AAcO,MAAM,gBAAA,GAAmB,CAAC,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,IAAA,EAAM,IAAA,EAAM,IAAI;AAmB/F,MAAM,SAAA,GAAY;AAAA,EAChB,KAAA,EAAO,KAAA;AAAA,EACP,KAAA,EAAO,EAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAA;AACA,MAAM,UAAA,GAAa;AAAA,EACjB,KAAA,EAAO,MAAA;AAAA,EACP,KAAA,EAAO,MAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAA;AACA,MAAM,UAAA,GAAa;AAAA,EACjB,KAAA,EAAO,MAAA;AAAA,EACP,KAAA,EAAO,MAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAA;AAOA,MAAM,sBAAA,GAAyBA,UAAA,CAAK,CAAC,KAAA,KAAiB;AAtDtD,EAAA,IAAA,EAAA;AAuDE,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,gBAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,MAAA,GAASC,wBAAW,SAAS,CAAA;AACnC,EAAA,MAAM,eAAe,KAAA,IAAS,EAAA;AAC9B,EAAA,MAAM,OAAA,GAAU,kBAAA,CAAmB,EAAE,SAAA,EAAW,kBAAkB,CAAA;AAClE,EAAA,MAAM,MAAA,GAAS,QAAQ,IAAA,CAAK,CAAC,EAAE,KAAA,EAAAC,MAAAA,EAAM,KAAMA,MAAAA,KAAU,YAAY,CAAA;AACjE,EAAA,MAAM,mBAAA,GAAsB,eAAA,CAAgB,SAAA,CAAU,KAAK,CAAA;AAC3D,EAAA,IAAI,gBAAgB,MAAA,IAAU,mBAAA;AAC9B,EAAA,MAAM,kBAAA,GAAqB,CAAC,IAAA,KAAkC;AAC5D,IAAA,IAAI,iBAAA,IAAqB,IAAA,CAAK,KAAA,IAAS,IAAA,EAAM;AAC3C,MAAA,iBAAA,CAAkB,KAAK,KAAK,CAAA;AAAA,IAC9B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAA4B;AAC7C,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,OAAO,SAAA;AAAA,IACT;AAEA,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,OAAO,SAAA;AAAA,IACT;AAEA,IAAA,OAAO,aAAa,QAAA,GAAW,SAAA;AAAA,EACjC,CAAA;AACA,EAAA,MAAM,UAAU,UAAA,EAAW;AAE3B,EAAA,IAAI,aAAA,CAAc,KAAA,KAAU,mBAAA,CAAoB,KAAA,EAAO;AACrD,IAAA,aAAA,GAAgB,EAAE,OAAO,EAAA,EAAG;AAAA,EAC9B;AAEA,EAAA,MAAM,iBAAA,GAAA,CAAoB,EAAA,GAAA,aAAA,CAAc,SAAA,KAAd,IAAA,GAAA,EAAA,GAA2B,aAAA,CAAc,KAAA;AACnE,EAAA,MAAM,gCAAA,GAAmCC,MAAA;AAAA,IACvC,6CAAA;AAAA,IACA,mFAAA;AAAA,IACA,EAAE,iBAAA;AAAkB,GACtB;AACA,EAAA,MAAM,8BAAA,GAAiCA,MAAA;AAAA,IACrC,2CAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,SAAA,GAAY,aAAA,CAAc,KAAA,KAAU,EAAA,GAAK,8BAAA,GAAiC,gCAAA;AAEhF,EAAA,MAAM,uBAAA,GAA0BA,MAAA,CAAE,0CAAA,EAA4C,2BAA2B,CAAA;AACzG,EAAA,MAAM,qBAAA,GAAwBA,MAAA,CAAE,mCAAA,EAAqC,kBAAkB,CAAA;AACvF,EAAA,MAAM,kBAAA,GAAqB,aAAA,CAAc,KAAA,KAAU,EAAA,GAAK,qBAAA,GAAwB,uBAAA;AAEhF,EAAA,uBACEC,eAAA,CAACC,uBAAA,EAAA,EAAY,SAAA,EAAU,gBAAA,EACrB,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,2BAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,WAAA,IAAe,SAAA,GAAY,WAAA,GAAc,IAAA;AAAA,QACrD,OAAA;AAAA,QACA,OAAA,EAAS,SAAA;AAAA,QACT,OAAA;AAAA,QACA,IAAA,EAAM,YAAY,SAAA,GAAY,MAAA;AAAA,QAC9B,KAAA,EAAO,KAAA,GAAQ,EAAE,KAAA,EAAM,GAAI,KAAA,CAAA;AAAA,QAC3B,aAAA,EAAaC,sBAAA,CAAU,UAAA,CAAW,aAAA,CAAc,WAAA;AAAA,QAEhD,QAAA,kBAAAJ,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,WAAA,EACtB,QAAA,EAAA;AAAA,0BAAAE,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWG,MAAA,CAAG,MAAA,CAAO,IAAA,EAAM;AAAA,gBACzB,CAAC,MAAA,CAAO,QAAQ,GAAG,OAAA,CAAQ,eAAe,SAAS;AAAA,eACpD,CAAA;AAAA,cAEA,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BACAH,cAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWG,MAAA,CAAG,MAAA,CAAO,IAAA,EAAM;AAAA,gBACzB,CAAC,MAAA,CAAO,QAAQ,GAAG,CAAC,eAAe,CAAC;AAAA,eACrC,CAAA;AAAA,cAEA,QAAA,EAAA;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA,KACF;AAAA,IACC,CAAC,gBAAA,oBACAH,cAAA;AAAA,MAACI,yBAAA;AAAA,MAAA;AAAA,QACC,WAAWC,OAAA,CAAI;AAAA,UACb,mBAAA,EAAqB,OAAA;AAAA,UACrB,sBAAA,EAAwB;AAAA,SACzB,CAAA;AAAA,QACD,KAAA,EAAO,aAAA;AAAA,QACP,OAAA;AAAA,QACA,QAAA,EAAU,kBAAA;AAAA,QACV,OAAA;AAAA,QACA,aAAA,EAAaH,sBAAA,CAAU,UAAA,CAAW,aAAA,CAAc,gBAAA;AAAA,QAChD,YAAA,EAAY,SAAA;AAAA,QACZ,OAAA,EAAS;AAAA;AAAA;AACX,GAAA,EAEJ,CAAA;AAEJ,CAAC,CAAA;AAED,sBAAA,CAAuB,WAAA,GAAc,eAAA;AAE9B,MAAM,aAAA,GAAgB,MAAA,CAAO,MAAA,CAAO,sBAAA,EAAwB;AAAA,EACjE,MAAA,EAAQ,CAAC,eAAA,KAAsC,eAAA,KAAoB,UAAA,CAAW,KAAA;AAAA,EAC9E,UAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAC;AAEM,MAAM,eAAA,GAAkB,CAAC,MAAA,KAA4C;AAC1E,EAAA,QAAQ,MAAA;AAAQ,IACd,KAAK,UAAA,CAAW,KAAA;AACd,MAAA,OAAO;AAAA,QACL,KAAA,EAAOL,MAAA,CAAE,kCAAA,EAAoC,MAAM,CAAA;AAAA,QACnD,KAAA,EAAO;AAAA,OACT;AAAA,IACF,KAAK,SAAA,CAAU,KAAA;AACb,MAAA,OAAO;AAAA,QACL,KAAA,EAAOA,MAAA,CAAE,iCAAA,EAAmC,KAAK,CAAA;AAAA,QACjD,KAAA,EAAO;AAAA,OACT;AAAA,IACF,KAAK,UAAA,CAAW,KAAA;AACd,MAAA,OAAO;AAAA,QACL,KAAA,EAAOA,MAAA,CAAE,kCAAA,EAAoC,MAAM,CAAA;AAAA,QACnD,KAAA,EAAO;AAAA,OACT;AAAA;AAEJ,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,MAAA;AAAA,IACP,KAAA,EAAO;AAAA,GACT;AACF;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC,SAAA,GAAY,gBAAA;AAAA,EACZ,gBAAA,GAAmB;AACrB,CAAA,GAA0D,EAAC,KAAsC;AAC/F,EAAA,MAAM,OAAA,GAA0C,SAAA,CAAU,GAAA,CAAI,CAAC,QAAA,KAAa;AAC1E,IAAA,MAAM,QAAA,GAAWS,mBAAc,QAAQ,CAAA;AACvC,IAAA,MAAM,SAAA,GAAYC,8BAAe,QAAQ,CAAA;AAEzC,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,QAAA;AAAA,MACP,KAAA,EAAO,QAAA;AAAA,MACP;AAAA,KACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,IAAI,gBAAA,EAAkB;AACpB,IAAA,OAAA,CAAQ,OAAA,CAAQ,eAAA,CAAgB,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,EACnD;AACA,EAAA,OAAA,CAAQ,OAAA,CAAQ,eAAA,CAAgB,SAAA,CAAU,KAAK,CAAC,CAAA;AAChD,EAAA,OAAO,OAAA;AACT;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,MAA0B;AAAA,EAC3C,aAAaF,OAAA,CAAI;AAAA,IACf,OAAA,EAAS,MAAA;AAAA,IACT,mBAAA,EAAqB,KAAA;AAAA,IACrB,gBAAA,EAAkB;AAAA,GACnB,CAAA;AAAA,EACD,MAAMA,OAAA,CAAI;AAAA,IACR,eAAA,EAAiB,CAAA;AAAA,IACjB,YAAA,EAAc;AAAA,GACf,CAAA;AAAA,EACD,UAAUA,OAAA,CAAI;AAAA,IACZ,UAAA,EAAY;AAAA,GACb;AACH,CAAA,CAAA;;;;;;;"}