How to use the @grafana/ui/src/utils/rangeutil.describeTimeRange function in @grafana/ui

if (!this.dashboard.isTimezoneUtc()) {
      time.from.local();
      time.to.local();
      if (isDateTime(timeRaw.from)) {
        timeRaw.from.local();
      }
      if (isDateTime(timeRaw.to)) {
        timeRaw.to.local();
      }
      this.isUtc = false;
    } else {
      this.isUtc = true;
    }

    this.rangeString = rangeUtil.describeTimeRange(timeRaw);
    this.absolute = { fromJs: time.from.toDate(), toJs: time.to.toDate() };
    this.tooltip = this.dashboard.formatDate(time.from) + ' <br>to<br>';
    this.tooltip += this.dashboard.formatDate(time.to);
    this.timeRaw = timeRaw;
    this.isAbsolute = isDateTime(this.timeRaw.to);
  }

if (!this.dashboard.isTimezoneUtc()) {
      time.from.local();
      time.to.local();
      if (moment.isMoment(timeRaw.from)) {
        timeRaw.from.local();
      }
      if (moment.isMoment(timeRaw.to)) {
        timeRaw.to.local();
      }
      this.isUtc = false;
    } else {
      this.isUtc = true;
    }

    this.rangeString = rangeUtil.describeTimeRange(timeRaw);
    this.absolute = { fromJs: time.from.toDate(), toJs: time.to.toDate() };
    this.tooltip = this.dashboard.formatDate(time.from) + ' <br>to<br>';
    this.tooltip += this.dashboard.formatDate(time.to);
    this.timeRaw = timeRaw;
    this.isAbsolute = moment.isMoment(this.timeRaw.to);
  }

handleClickRelativeOption = range => {
    const { onChangeTime } = this.props;
    const rangeString = rangeUtil.describeTimeRange(range);
    const rawRange = {
      from: range.from,
      to: range.to,
    };
    this.setState(
      {
        toRaw: rawRange.to,
        fromRaw: rawRange.from,
        isOpen: false,
        rangeString,
      },
      () => {
        if (onChangeTime) {
          onChangeTime(rawRange);
        }
      }

state.initialRange &&
      state.initialRange.from === props.range.raw.from &&
      state.initialRange.to === props.range.raw.to
    ) {
      return state;
    }

    const { range } = props;
    const rawRange = getRaw(range, props.timeZone);

    return {
      ...state,
      fromRaw: rawRange.from,
      toRaw: rawRange.to,
      initialRange: range.raw,
      rangeString: rangeUtil.describeTimeRange(range.raw),
    };
  }

constructor(props) {
    super(props);

    const { range, timeZone, isOpen } = props;
    const rawRange = getRaw(range, timeZone);

    this.state = {
      isOpen: isOpen,
      isUtc: timeZone === 'utc',
      rangeString: rangeUtil.describeTimeRange(range.raw),
      fromRaw: rawRange.from,
      toRaw: rawRange.to,
      initialRange: range.raw,
      refreshInterval: '',
    };
  }

state => {
        const { toRaw, fromRaw } = this.state;
        rawRange = {
          from: fromRaw,
          to: toRaw,
        };

        if (rawRange.from.indexOf('now') === -1) {
          rawRange.from = timeZone === 'utc' ? toUtc(rawRange.from, TIME_FORMAT) : dateTime(rawRange.from, TIME_FORMAT);
        }

        if (rawRange.to.indexOf('now') === -1) {
          rawRange.to = timeZone === 'utc' ? toUtc(rawRange.to, TIME_FORMAT) : dateTime(rawRange.to, TIME_FORMAT);
        }

        const rangeString = rangeUtil.describeTimeRange(rawRange);
        return {
          isOpen: false,
          rangeString,
        };
      },
      () => {