68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { css } from '@emotion/css';
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
import { useStyles2 } from '@grafana/ui';
|
|
|
|
import { TimeOptions } from '../../types/time';
|
|
|
|
export function PromDurationDocs() {
|
|
const styles = useStyles2(getPromDurationStyles);
|
|
return (
|
|
<div>
|
|
Prometheus duration format consist of a number followed by a time unit.
|
|
<br />
|
|
Different units can be combined for more granularity.
|
|
<hr />
|
|
<div className={styles.list}>
|
|
<div className={styles.header}>
|
|
<div>Symbol</div>
|
|
<div>Time unit</div>
|
|
<div>Example</div>
|
|
</div>
|
|
<PromDurationDocsTimeUnit unit={TimeOptions.seconds} name="seconds" example="20s" />
|
|
<PromDurationDocsTimeUnit unit={TimeOptions.minutes} name="minutes" example="10m" />
|
|
<PromDurationDocsTimeUnit unit={TimeOptions.hours} name="hours" example="4h" />
|
|
<PromDurationDocsTimeUnit unit={TimeOptions.days} name="days" example="3d" />
|
|
<PromDurationDocsTimeUnit unit={TimeOptions.weeks} name="weeks" example="2w" />
|
|
<div className={styles.examples}>
|
|
<div>Multiple units combined</div>
|
|
<code>1m30s, 2h30m20s, 1w2d</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PromDurationDocsTimeUnit({ unit, name, example }: { unit: TimeOptions; name: string; example: string }) {
|
|
const styles = useStyles2(getPromDurationStyles);
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.unit}>{unit}</div>
|
|
<div>{name}</div>
|
|
<code>{example}</code>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const getPromDurationStyles = (theme: GrafanaTheme2) => ({
|
|
unit: css({
|
|
fontWeight: theme.typography.fontWeightBold,
|
|
}),
|
|
list: css({
|
|
display: 'grid',
|
|
gridTemplateColumns: 'max-content 1fr 2fr',
|
|
gap: theme.spacing(1, 3),
|
|
}),
|
|
header: css({
|
|
display: 'contents',
|
|
fontWeight: theme.typography.fontWeightBold,
|
|
}),
|
|
examples: css({
|
|
display: 'contents',
|
|
'& > div': {
|
|
gridColumn: '1 / span 2',
|
|
},
|
|
}),
|
|
});
|