github.com/siglens/siglens@v0.0.0-20240328180423-f7ce9ae441ed/static/component/time-picker/time-picker.js (about)

     1  (function ($) {
     2    $.fn.timeTicker = function (options) {
     3      var defaults = {
     4        spanName: "Time Picker"
     5      };
     6      let setting = $.extend(defaults, options || {});
     7      this
     8        .append(`<button class="btn dropdown-toggle" type="button" id="date-picker-btn" data-toggle="dropdown" aria-haspopup="true"
     9                              aria-expanded="false" data-bs-toggle="dropdown" title="Pick the time window">
    10                              <span id="span-time-value">${setting.spanName}</span>
    11                              <img class="dropdown-arrow orange" src="assets/arrow-btn.svg">
    12                              <img class="dropdown-arrow blue" src="assets/up-arrow-btn-light-theme.svg">
    13                          </button>
    14                          <div class="dropdown-menu daterangepicker dropdown-time-picker" aria-labelledby="index-btn" id="daterangepicker">
    15                              <p class="dt-header">Search the last</p>
    16                              <div class="ranges">
    17                                  <div class="inner-range">
    18                                      <div id="now-5m" class="range-item ">5 Mins</div>
    19                                      <div id="now-3h" class="range-item">3 Hrs</div>
    20                                      <div id="now-2d" class="range-item">2 Days</div>
    21                                  </div>
    22                                  <div class="inner-range">
    23                                      <div id="now-15m" class="range-item">15 Mins</div>
    24                                      <div id="now-6h" class="range-item">6 Hrs</div>
    25                                      <div id="now-7d" class="range-item">7 Days</div>
    26                                  </div>
    27                                  <div class="inner-range">
    28                                      <div id="now-30m" class="range-item">30 Mins</div>
    29                                      <div id="now-12h" class="range-item">12 Hrs</div>
    30                                      <div id="now-30d" class="range-item">30 Days</div>
    31                                  </div>
    32                                  <div class="inner-range">
    33                                      <div id="now-1h" class="range-item">1 Hr</div>
    34                                      <div id="now-24h" class="range-item">24 Hrs</div>
    35                                      <div id="now-90d" class="range-item">90 Days</div>
    36                                  </div>
    37                                  <hr>
    38                                  </hr>
    39                                  <div class="dt-header">Custom Search <span id="reset-timepicker" type="reset">Reset</span>
    40                                  </div>
    41                                  <div id="daterange-from"> <span id="dt-from-text"> From</span> <br />
    42                                      <input type="date" id="date-start" />
    43                                      <input type="time" id="time-start" value="00:00" />
    44                                  </div>
    45                                  <div id="daterange-to"> <span id="dt-to-text"> To </span> <br />
    46                                      <input type="date" id="date-end">
    47                                      <input type="time" id="time-end" value="00:00">
    48                                  </div>
    49                                  <div class="drp-buttons">
    50                                      <button class="applyBtn btn btn-sm btn-primary" id="customrange-btn" type="button">Apply</button>
    51                                  </div>
    52                              </div>
    53                          </div>`);
    54      $("#date-picker-btn").on("click", showDatePickerHandler);
    55      $("#reset-timepicker").on("click", resetDatePickerHandler);
    56  
    57      $(".panelEditor-container #date-start").on("change", getStartDateHandler);
    58      $(".panelEditor-container #date-end").on("change", getEndDateHandler);
    59      $(".panelEditor-container #time-start").on("change", getStartTimeHandler);
    60      $(".panelEditor-container #time-end").on("change", getEndTimeHandler);
    61      $(".panelEditor-container #customrange-btn").on(
    62        "click",
    63        customRangeHandler
    64      );
    65      $(document).mouseup(function (e) {
    66          var pickerInfo = $("#daterangepicker");
    67          if (!pickerInfo.is(e.target) && pickerInfo.has(e.target).length === 0) {
    68            $("#daterangepicker").hide();
    69            $("#date-picker-btn").removeClass("active");
    70            $("#daterangepicker").removeClass("show");
    71          }
    72      });
    73      $("#daterangepicker").on("click", timePickerHandler);
    74      $("#date-start").on("change", getStartDateHandler);
    75      $("#date-end").on("change", getEndDateHandler);
    76  
    77      $("#time-start").on("change", getStartTimeHandler);
    78      $("#time-end").on("change", getEndTimeHandler);
    79      $("#customrange-btn").on("click", customRangeHandler);
    80  
    81      $(".range-item").on("click", rangeItemHandler);
    82      $(".db-range-item").on("click", dashboardRangeItemHandler);
    83  
    84  function timePickerHandler(){
    85      $("#daterangepicker").addClass("show");
    86  }
    87  function showDatePickerHandler(evt) {
    88    evt.stopPropagation();
    89    if(!$("#daterangepicker").hasClass("show")){
    90      $("#daterangepicker").addClass("show");
    91       $("#daterangepicker").show();
    92       $(evt.currentTarget).toggleClass("active");
    93    }else{
    94      $("#daterangepicker").hide();
    95      $("#date-picker-btn").removeClass("active");
    96      $("#daterangepicker").removeClass("show");
    97    }
    98  }
    99  
   100  function resetDatePickerHandler(evt) {
   101    evt.stopPropagation();
   102    resetCustomDateRange();
   103    $.each($(".range-item.active"), function () {
   104      $(this).removeClass("active");
   105    });
   106  }
   107  function getStartDateHandler(evt) {
   108    let inputDate = new Date(this.value);
   109    filterStartDate = inputDate.getTime();
   110    $(this).addClass("active");
   111    Cookies.set("customStartDate", this.value);
   112  }
   113  
   114  function getEndDateHandler(evt) {
   115    let inputDate = new Date(this.value);
   116    filterEndDate = inputDate.getTime();
   117    $(this).addClass("active");
   118    Cookies.set("customEndDate", this.value);
   119  }
   120  
   121  function getStartTimeHandler() {
   122    let selectedTime = $(this).val();
   123    let temp =
   124      (Number(selectedTime.split(":")[0]) * 60 +
   125        Number(selectedTime.split(":")[1])) *
   126      60 *
   127      1000;
   128    //check if filterStartDate is a number or now-*
   129    if (!isNaN(filterStartDate)) {
   130      filterStartDate = filterStartDate + temp;
   131    } else {
   132      let start = new Date();
   133      start.setUTCHours(0, 0, 0, 0);
   134      filterStartDate = start.getTime() + temp;
   135    }
   136    $(this).addClass("active");
   137    Cookies.set("customStartTime", selectedTime);
   138  }
   139  
   140  function getEndTimeHandler() {
   141    let selectedTime = $(this).val();
   142    let temp =
   143      (Number(selectedTime.split(":")[0]) * 60 +
   144        Number(selectedTime.split(":")[1])) *
   145      60 *
   146      1000;
   147    if (!isNaN(filterEndDate)) {
   148      filterEndDate = filterEndDate + temp;
   149    } else {
   150      let start = new Date();
   151      start.setUTCHours(0, 0, 0, 0);
   152      filterEndDate = start.getTime() + temp;
   153    }
   154    $(this).addClass("active");
   155    Cookies.set("customEndTime", selectedTime);
   156  }
   157  
   158  function customRangeHandler(evt) {
   159    $.each($(".range-item.active"), function () {
   160      $(this).removeClass("active");
   161    });
   162    $.each($(".db-range-item.active"), function () {
   163      $(this).removeClass("active");
   164    });
   165    datePickerHandler(filterStartDate, filterEndDate, "custom");
   166  
   167    if (currentPanel) {
   168      if (currentPanel.queryData) {
   169        if (
   170          currentPanel.chartType === "Line Chart" &&
   171          currentPanel.queryType === "metrics"
   172        ) {
   173          currentPanel.queryData.start = filterStartDate.toString();
   174          currentPanel.queryData.end = filterEndDate.toString();
   175        } else {
   176          currentPanel.queryData.startEpoch = filterStartDate;
   177          currentPanel.queryData.endEpoch = filterEndDate;
   178        }
   179      }
   180    } else if (
   181      $(`#viewPanel-container`).css("display").toLowerCase() !== "none"
   182    ) {
   183      // if user is on view panel screen
   184      // get panel-index by attribute
   185      let panelIndex = $(`#viewPanel-container .panel`).attr("panel-index");
   186      // if panel has some stored query data, reset it
   187      if (localPanels[panelIndex].queryData) {
   188        delete localPanels[panelIndex].queryRes;
   189        if (
   190          localPanels[panelIndex].chartType === "Line Chart" &&
   191          localPanels[panelIndex].queryType === "metrics"
   192        ) {
   193          localPanels[panelIndex].queryData.start = filterStartDate.toString();
   194          localPanels[panelIndex].queryData.end = filterEndDate.toString();
   195        } else {
   196          localPanels[panelIndex].queryData.startEpoch = filterStartDate;
   197          localPanels[panelIndex].queryData.endEpoch = filterEndDate;
   198        }
   199      }
   200      displayPanelView(panelIndex);
   201    } else if (!currentPanel) {
   202      // if user is on dashboard screen
   203      localPanels.forEach((panel) => {
   204        delete panel.queryRes;
   205        if (panel.queryData) {
   206          if (panel.chartType === "Line Chart" && panel.queryType === "metrics") {
   207            panel.queryData.start = filterStartDate.toString();
   208            panel.queryData.end = filterEndDate.toString();
   209          } else {
   210            panel.queryData.startEpoch = filterStartDate;
   211            panel.queryData.endEpoch = filterEndDate;
   212          }
   213        }
   214      });
   215      displayPanels();
   216    }
   217  }
   218  
   219  function rangeItemHandler(evt) {
   220    resetCustomDateRange();
   221    $.each($(".range-item.active"), function () {
   222      $(this).removeClass("active");
   223    });
   224    $(evt.currentTarget).addClass("active");
   225    datePickerHandler($(this).attr("id"), "now", $(this).attr("id"));
   226  }
   227  
   228  function dashboardRangeItemHandler(evt) {
   229    resetCustomDateRange();
   230    $.each($(".db-range-item.active"), function () {
   231      $(this).removeClass("active");
   232    });
   233    $(evt.currentTarget).addClass("active");
   234    datePickerHandler($(this).attr("id"), "now", $(this).attr("id"));
   235  
   236    // if user is on edit panel screen
   237    if (currentPanel) {
   238      if (currentPanel.queryData) {
   239        if (
   240          currentPanel.chartType === "Line Chart" &&
   241          currentPanel.queryType === "metrics"
   242        ) {
   243          currentPanel.queryData.start = filterStartDate.toString();
   244          currentPanel.queryData.end = filterEndDate.toString();
   245        } else {
   246          currentPanel.queryData.startEpoch = filterStartDate;
   247          currentPanel.queryData.endEpoch = filterEndDate;
   248        }
   249      }
   250    } else if (
   251      $(`#viewPanel-container`).css("display").toLowerCase() !== "none"
   252    ) {
   253      // if user is on view panel screen
   254      // get panel-index by attribute
   255      let panelIndex = $(`#viewPanel-container .panel`).attr("panel-index");
   256      // if panel has some stored query data, reset it
   257      if (localPanels[panelIndex].queryData) {
   258        delete localPanels[panelIndex].queryRes;
   259        if (
   260          localPanels[panelIndex].chartType === "Line Chart" &&
   261          localPanels[panelIndex].queryType === "metrics"
   262        ) {
   263          localPanels[panelIndex].queryData.start = filterStartDate.toString();
   264          localPanels[panelIndex].queryData.end = filterEndDate.toString();
   265        } else {
   266          localPanels[panelIndex].queryData.startEpoch = filterStartDate;
   267          localPanels[panelIndex].queryData.endEpoch = filterEndDate;
   268        }
   269      }
   270      displayPanelView(panelIndex);
   271    } else if (!currentPanel) {
   272      // if user is on dashboard screen
   273      localPanels.forEach((panel) => {
   274        delete panel.queryRes;
   275        if (panel.queryData) {
   276          if (panel.chartType === "Line Chart" && panel.queryType === "metrics") {
   277            panel.queryData.start = filterStartDate.toString();
   278            panel.queryData.end = filterEndDate.toString();
   279          } else {
   280            panel.queryData.startEpoch = filterStartDate;
   281            panel.queryData.endEpoch = filterEndDate;
   282          }
   283        }
   284      });
   285  
   286      displayPanels();
   287    }
   288  }
   289  function resetCustomDateRange() {
   290    // clear custom selections
   291    $("#date-start").val("");
   292    $("#date-end").val("");
   293    $("#time-start").val("00:00");
   294    $("#time-end").val("00:00");
   295    $("#date-start").removeClass("active");
   296    $("#date-end").removeClass("active");
   297    $("#time-start").removeClass("active");
   298    $("#time-end").removeClass("active");
   299    Cookies.remove("customStartDate");
   300    Cookies.remove("customEndDate");
   301    Cookies.remove("customStartTime");
   302    Cookies.remove("customEndTime");
   303    $("#daterangepicker").removeClass("show");
   304    $("#daterangepicker").removeClass("active");
   305    $("#daterangepicker").hide();
   306    $("#date-picker-btn").removeClass("active");
   307  }
   308  
   309      return this;
   310    };
   311  })(jQuery);