diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js index 6c4905fca..3a4ad12ff 100644 --- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js +++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js @@ -13,6 +13,28 @@ import { HourMinute } from "./HourMinute"; import "./index.css"; +const OffsetBadge = ({ startDate, endDate, prefixLabel }) => { + if (!startDate) startDate = moment().seconds(0); + + const days = endDate.diff(startDate, "days"); + const hours = endDate.diff(startDate, "hours") % 24; + const minutes = endDate.diff(startDate, "minutes") % 60; + + return ( + + {days <= 0 && hours <= 0 && minutes <= 0 ? "now" : prefixLabel} + {days > 0 ? `${days}d ` : null} + {hours > 0 ? `${hours}h ` : null} + {minutes > 0 ? `${minutes}m ` : null} + + ); +}; +OffsetBadge.propTypes = { + startDate: PropTypes.instanceOf(moment), + endDate: PropTypes.instanceOf(moment).isRequired, + prefixLabel: PropTypes.string.isRequired +}; + const Tab = ({ title, active, onClick }) => (