@grafana/ui
Version:
Grafana Components Library
312 lines (307 loc) • 12.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
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 mixins = require('../../../themes/mixins.cjs');
var FilterInput = require('../../FilterInput/FilterInput.cjs');
var Icon = require('../../Icon/Icon.cjs');
var TextLink = require('../../Link/TextLink.cjs');
var TimePickerFooter = require('./TimePickerFooter.cjs');
var TimePickerTitle = require('./TimePickerTitle.cjs');
var TimeRangeContent = require('./TimeRangeContent.cjs');
var TimeRangeList = require('./TimeRangeList.cjs');
var mapper = require('./mapper.cjs');
"use strict";
const TimePickerContentWithScreenSize = (props) => {
const {
quickOptions = [],
isReversed,
isFullscreen,
hideQuickRanges,
timeZone,
fiscalYearStartMonth,
value,
onChange,
history,
showHistory,
className,
hideTimeZone,
onChangeTimeZone,
onChangeFiscalYearStartMonth
} = props;
const isHistoryEmpty = !(history == null ? void 0 : history.length);
const isContainerTall = isFullscreen && showHistory || !isFullscreen && (showHistory && !isHistoryEmpty || !hideQuickRanges);
const styles = ThemeContext.useStyles2(getStyles, isReversed, hideQuickRanges, isContainerTall, isFullscreen);
const historyOptions = mapToHistoryOptions(history, timeZone);
const baseTimeOption = useTimeOption(value.raw, quickOptions);
const [searchTerm, setSearchQuery] = React.useState("");
const { filteredQuickOptions, customTimeOption } = React.useMemo(() => {
const filtered = quickOptions.filter((o) => o.display.toLowerCase().includes(searchTerm.toLowerCase()));
const customTimeOption2 = data.isValidGrafanaDuration(searchTerm) && data.rangeUtil.describeTextRange(searchTerm);
if (customTimeOption2) {
const alreadyExists = filtered.some((o) => o.from === customTimeOption2.from && o.to === customTimeOption2.to);
if (!alreadyExists) {
return { filteredQuickOptions: [customTimeOption2, ...filtered], customTimeOption: customTimeOption2 };
}
}
return { filteredQuickOptions: filtered, customTimeOption: void 0 };
}, [searchTerm, quickOptions]);
const timeOption = customTimeOption || baseTimeOption;
const onChangeTimeOption = (timeOption2) => {
return onChange(mapper.mapOptionToTimeRange(timeOption2));
};
return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: "TimePickerContent", className: css.cx(styles.container, className), children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
(!isFullscreen || !hideQuickRanges) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.rightSide, children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.timeRangeFilter, children: /* @__PURE__ */ jsxRuntime.jsx(
FilterInput.FilterInput,
{
width: 0,
value: searchTerm,
onChange: setSearchQuery,
escapeRegex: false,
placeholder: i18n.t("time-picker.content.filter-placeholder", "Search quick ranges")
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.scrollContent, children: [
!isFullscreen && /* @__PURE__ */ jsxRuntime.jsx(NarrowScreenForm, { ...props, historyOptions }),
!hideQuickRanges && /* @__PURE__ */ jsxRuntime.jsx(TimeRangeList.TimeRangeList, { options: filteredQuickOptions, onChange: onChangeTimeOption, value: timeOption })
] })
] }),
isFullscreen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.leftSide, children: /* @__PURE__ */ jsxRuntime.jsx(FullScreenForm, { ...props, historyOptions }) })
] }),
!hideTimeZone && isFullscreen && /* @__PURE__ */ jsxRuntime.jsx(
TimePickerFooter.TimePickerFooter,
{
timeZone,
fiscalYearStartMonth,
onChangeTimeZone,
onChangeFiscalYearStartMonth
}
)
] });
};
const TimePickerContent = (props) => {
const { widthOverride } = props;
const theme = ThemeContext.useTheme2();
const isFullscreen = (widthOverride || window.innerWidth) >= theme.breakpoints.values.lg;
return /* @__PURE__ */ jsxRuntime.jsx(TimePickerContentWithScreenSize, { ...props, isFullscreen });
};
const NarrowScreenForm = (props) => {
const { value, hideQuickRanges, onChange, timeZone, historyOptions = [], showHistory, onError, weekStart } = props;
const styles = ThemeContext.useStyles2(getNarrowScreenStyles);
const isAbsolute = data.isDateTime(value.raw.from) || data.isDateTime(value.raw.to);
const [collapsedFlag, setCollapsedFlag] = React.useState(!isAbsolute);
const collapsed = hideQuickRanges ? false : collapsedFlag;
const onChangeTimeOption = (timeOption) => {
return onChange(mapper.mapOptionToTimeRange(timeOption, timeZone));
};
return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.header, children: /* @__PURE__ */ jsxRuntime.jsxs(
"button",
{
type: "button",
className: styles.expandButton,
onClick: () => {
if (!hideQuickRanges) {
setCollapsedFlag(!collapsed);
}
},
"data-testid": e2eSelectors.selectors.components.TimePicker.absoluteTimeRangeTitle,
"aria-expanded": !collapsed,
"aria-controls": "expanded-timerange",
children: [
/* @__PURE__ */ jsxRuntime.jsx(TimePickerTitle.TimePickerTitle, { children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "time-picker.absolute.title", children: "Absolute time range" }) }),
!hideQuickRanges && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: !collapsed ? "angle-up" : "angle-down" })
]
}
) }),
!collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, id: "expanded-timerange", children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.form, children: /* @__PURE__ */ jsxRuntime.jsx(
TimeRangeContent.TimeRangeContent,
{
value,
onApply: onChange,
timeZone,
isFullscreen: false,
onError,
weekStart
}
) }),
showHistory && /* @__PURE__ */ jsxRuntime.jsx(
TimeRangeList.TimeRangeList,
{
title: i18n.t("time-picker.absolute.recent-title", "Recently used absolute ranges"),
options: historyOptions,
onChange: onChangeTimeOption,
placeholderEmpty: null
}
)
] })
] });
};
const FullScreenForm = (props) => {
const { onChange, value, timeZone, fiscalYearStartMonth, isReversed, historyOptions, onError, weekStart } = props;
const styles = ThemeContext.useStyles2(getFullScreenStyles, props.hideQuickRanges);
const onChangeTimeOption = (timeOption) => {
return onChange(mapper.mapOptionToTimeRange(timeOption, timeZone));
};
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.title, "data-testid": e2eSelectors.selectors.components.TimePicker.absoluteTimeRangeTitle, children: /* @__PURE__ */ jsxRuntime.jsx(TimePickerTitle.TimePickerTitle, { children: /* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "time-picker.absolute.title", children: "Absolute time range" }) }) }),
/* @__PURE__ */ jsxRuntime.jsx(
TimeRangeContent.TimeRangeContent,
{
value,
timeZone,
fiscalYearStartMonth,
onApply: onChange,
isFullscreen: true,
isReversed,
onError,
weekStart
}
)
] }),
props.showHistory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.recent, children: /* @__PURE__ */ jsxRuntime.jsx(
TimeRangeList.TimeRangeList,
{
title: i18n.t("time-picker.absolute.recent-title", "Recently used absolute ranges"),
options: historyOptions || [],
onChange: onChangeTimeOption,
placeholderEmpty: /* @__PURE__ */ jsxRuntime.jsx(EmptyRecentList, {})
}
) })
] });
};
const EmptyRecentList = React.memo(() => {
const styles = ThemeContext.useStyles2(getEmptyListStyles);
const emptyRecentListText = i18n.t(
"time-picker.content.empty-recent-list-info",
"It looks like you haven't used this time picker before. As soon as you enter some time intervals, recently used intervals will appear here."
);
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyRecentListText }) }),
/* @__PURE__ */ jsxRuntime.jsx(i18n.Trans, { i18nKey: "time-picker.content.empty-recent-list-docs", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsx(TextLink.TextLink, { href: "https://grafana.com/docs/grafana/latest/dashboards/time-range-controls", external: true, children: "Read the documentation" }),
/* @__PURE__ */ jsxRuntime.jsx("span", { children: " to find out more about how to enter custom time ranges." })
] }) })
] });
});
function mapToHistoryOptions(ranges, timeZone) {
if (!Array.isArray(ranges) || ranges.length === 0) {
return [];
}
return ranges.map((range) => mapper.mapRangeToTimeOption(range, timeZone));
}
EmptyRecentList.displayName = "EmptyRecentList";
const useTimeOption = (raw, quickOptions) => {
return React.useMemo(() => {
if (!data.rangeUtil.isRelativeTimeRange(raw)) {
return;
}
return quickOptions.find((option) => {
return option.from === raw.from && option.to === raw.to;
});
}, [raw, quickOptions]);
};
const getStyles = (theme, isReversed, hideQuickRanges, isContainerTall, isFullscreen) => ({
container: css.css({
background: theme.colors.background.elevated,
boxShadow: theme.shadows.z3,
width: `${isFullscreen ? "546px" : "262px"}`,
borderRadius: theme.shape.radius.lg,
border: `1px solid ${theme.colors.border.weak}`,
[`${isReversed ? "left" : "right"}`]: 0,
display: "flex",
flexDirection: "column"
}),
body: css.css({
display: "flex",
flexDirection: "row-reverse",
height: `${isContainerTall ? "381px" : "217px"}`,
maxHeight: "100vh"
}),
leftSide: css.css({
display: "flex",
flexDirection: "column",
borderRight: `${isReversed ? "none" : `1px solid ${theme.colors.border.weak}`}`,
width: `${!hideQuickRanges ? "60%" : "100%"}`,
overflow: "auto",
scrollbarWidth: "thin",
order: isReversed ? 1 : 0
}),
rightSide: css.css({
width: `${isFullscreen ? "40%" : "100%"}; !important`,
borderRight: isReversed ? `1px solid ${theme.colors.border.weak}` : "none",
display: "flex",
flexDirection: "column"
}),
timeRangeFilter: css.css({
padding: theme.spacing(1)
}),
spacing: css.css({
marginTop: "16px"
}),
scrollContent: css.css({
overflowY: "auto",
scrollbarWidth: "thin"
})
});
const getNarrowScreenStyles = (theme) => ({
header: css.css({
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderBottom: `1px solid ${theme.colors.border.weak}`,
padding: "7px 9px 7px 9px"
}),
expandButton: css.css({
backgroundColor: "transparent",
border: "none",
display: "flex",
width: "100%",
"&:focus-visible": mixins.getFocusStyles(theme)
}),
body: css.css({
borderBottom: `1px solid ${theme.colors.border.weak}`
}),
form: css.css({
padding: "7px 9px 7px 9px"
})
});
const getFullScreenStyles = (theme, hideQuickRanges) => ({
container: css.css({
paddingTop: "9px",
paddingLeft: "11px",
paddingRight: !hideQuickRanges ? "20%" : "11px"
}),
title: css.css({
marginBottom: "11px"
}),
recent: css.css({
flexGrow: 1,
display: "flex",
flexDirection: "column",
justifyContent: "flex-end",
paddingTop: theme.spacing(1)
})
});
const getEmptyListStyles = (theme) => ({
container: css.css({
padding: "12px",
margin: "12px",
"a, span": {
fontSize: "13px"
}
})
});
exports.TimePickerContent = TimePickerContent;
exports.TimePickerContentWithScreenSize = TimePickerContentWithScreenSize;
//# sourceMappingURL=TimePickerContent.cjs.map