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 }) => (
  • {
    { silenceFormStore.data.startsAt = moment(val); @@ -64,8 +86,10 @@ const TabContentEnd = observer(({ silenceFormStore }) => {
    { silenceFormStore.data.endsAt = moment(val); @@ -162,17 +186,42 @@ const DateTimeSelect = observer(
      + Starts + + + } active={this.tab.current === TabNames.Start} onClick={this.tab.setStart} /> + Ends + + + } active={this.tab.current === TabNames.End} onClick={this.tab.setEnd} /> + Duration + + + } active={this.tab.current === TabNames.Duration} onClick={this.tab.setDuration} />