IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 23:55:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

grafana/ui: Fix RelativeTimeRange supported formats (#44535)

Browse Source 
* remove link to docs site

* extract tooltip to component

* text and formatting

* use div instead of p
This commit is contained in:
Peter Holmberg 2022-02-03 10:13:19 +01:00 committed by GitHub
parent f38f10416a
commit 3314178a0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
View File

@ -18,6 +18,7 @@ import {
import { Field } from '../../Forms/Field';
import { getInputStyles, Input } from '../../Input/Input';
import { Icon } from '../../Icon/Icon';
import { Tooltip } from '../../Tooltip/Tooltip';
/**
* @internal
@ -115,14 +116,13 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps): Re
</CustomScrollbar>
<div className={styles.rightSide}>
<div className={styles.title}>
<TimePickerTitle>Specify time range</TimePickerTitle>
<div className={styles.description}>
Specify a relative time range, for more information see{' '}
<a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/">
docs <Icon name="external-link-alt" />
</a>
.
</div>
<TimePickerTitle>
<Tooltip content={<TooltipContent />} placement="bottom" theme="info">
<div>
Specify time range <Icon name="info-circle" />
</div>
</Tooltip>
</TimePickerTitle>
</div>
<Field label="From" invalid={!from.validation.isValid} error={from.validation.errorMessage}>
<Input
@ -152,6 +152,38 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps): Re
);
}
const TooltipContent = () => {
const styles = useStyles2(toolTipStyles);
return (
<>
<div className={styles.supported}>
Supported formats: <code className={styles.tooltip}>now-[digit]s/m/h/d/w</code>
</div>
<div>Example: to select a time range from 10 minutes ago to now</div>
<code className={styles.tooltip}>From: now-10m To: now</code>
<div className={styles.link}>
For more information see{' '}
<a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/">
docs <Icon name="external-link-alt" />
</a>
.
</div>
</>
);
};
const toolTipStyles = (theme: GrafanaTheme2) => ({
supported: css`
margin-bottom: ${theme.spacing(1)};
`,
tooltip: css`
margin: 0;
`,
link: css`
margin-top: ${theme.spacing(1)};
`,
});
const getStyles = (fromError?: string, toError?: string) => (theme: GrafanaTheme2) => {
const inputStyles = getInputStyles({ theme, invalid: false });
const bodyMinimumHeight = 250;