Commit b4a03ce1 authored by Laura Schlimmer's avatar Laura Schlimmer
Browse files

work in progress

parent be4eb274

fnordmetric-webui/fnordmetric-webui-datepicker.js

+42 −15
Original line number Diff line number Diff line
@@ -16,23 +16,37 @@ if (FnordMetric.views === undefined) { 
  FnordMetric.views = {};

}



FnordMetric.util.DatePicker = function(elem, dp_input, callback) {

FnordMetric.util.DatePicker = function(elem, dp_input, viewport, callback) {

  var dp_widget = document.createElement("div");

  dp_widget.className = "datepicker_widget";

  elem.appendChild(dp_widget);



  var curr_day = new Date().getDay();

  var curr_date = new Date().getDate();

  var curr_month = new Date().getMonth();



  var selected_ts = new Date(

    parseInt(dp_input.getAttribute("id"), 10));

  //var selected_day = selected_ts.getDate();

  var selected_hours = 

    FnordMetric.util.appendLeadingZero(selected_ts.getHours());

  console.log("hours " + selected_ts.getHours());

  var selected_minutes = 

    FnordMetric.util.appendLeadingZero(selected_ts.getMinutes());



  var human_days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];





  function resetDatepicker() {

    dp_widget.innerHTML = "";

    dp_widget.className = "datepicker_widget";

  }



  function setDate(hours, minutes, day, month, year) {



  function onSelect(hours, minutes, day, month, year) {

    var hours = (hours.length > 0)? hours : selected_hours;

    var minutes = (minutes.length > 0)? minutes : selected_minutes;



    dp_input.value =

      FnordMetric.util.appendLeadingZero(month+1) + 

      "/" +
@@ -42,9 +56,10 @@ FnordMetric.util.DatePicker = function(elem, dp_input, callback) { 
      ":" + 

      FnordMetric.util.appendLeadingZero(minutes);



    var ts = new Date(year, (month+1), day, hours, minutes).getTime();

    var ts = new Date(year, month, day, hours, minutes).getTime();

    dp_input.setAttribute("timestamp", ts);

    callback(ts);

    resetDatepicker();

  }
@@ -58,19 +73,22 @@ FnordMetric.util.DatePicker = function(elem, dp_input, callback) { 
    separator.innerHTML = ":";



    var hour_input = document.createElement("input");

    //FIXME

    hour_input.placeholder = 12;

    hour_input.addEventListener('focus', function() {



    hour_input.placeholder = selected_hours;

    hour_input.addEventListener('focus', function(e) {

      e.preventDefault();

      timeInputFocus = true;

      FnordMetric.util.validatedTimeInput(this, "hour");

    }, false);



    var minute_input = document.createElement("input");

    //FIXME

    minute_input.placeholder = 30;

    minute_input.placeholder = selected_minutes;

    minute_input.addEventListener('focus', function() {

      timeInputFocus = true;

      FnordMetric.util.validatedTimeInput(this, "minute");

    }, false);





    input_container.appendChild(hour_input);

    input_container.appendChild(separator);

    input_container.appendChild(minute_input);
@@ -140,7 +158,7 @@ FnordMetric.util.DatePicker = function(elem, dp_input, callback) { 
        link.addEventListener('click', function(e) {

          e.preventDefault();

          resetDatepicker();

          setDate(

          onSelect(

            hour_input.value,

            minute_input.value,

            this.innerText, month, year);
@@ -169,7 +187,7 @@ FnordMetric.util.DatePicker = function(elem, dp_input, callback) { 
        link.addEventListener('click', function(e) {

          e.preventDefault();

          resetDatepicker();

          setDate(

          onSelect(

            hour_input.value,

            minute_input.value,

            this.innerText, month, year);
@@ -196,7 +214,7 @@ FnordMetric.util.DatePicker = function(elem, dp_input, callback) { 
          link.addEventListener('click', function(e) {

            e.preventDefault();

            resetDatepicker();

            setDate(

            onSelect(

              hour_input.value,

              minute_input.value,

              this.innerText, month, year);
@@ -216,8 +234,17 @@ FnordMetric.util.DatePicker = function(elem, dp_input, callback) { 
  }





  document.addEventListener('click', function() {

    console.log("close dateoicker");

    resetDatepicker();

  }, false);





  elem.addEventListener('click', function(e) {

    e.stopPropagation();

  });



  dp_input.addEventListener('focus', function() {

  dp_input.addEventListener('focus', function(event) {

    dp_widget.innerHTML = "";

    var now = new Date();

    var month = now.getMonth();
@@ -225,9 +252,9 @@ FnordMetric.util.DatePicker = function(elem, dp_input, callback) { 
    init(month, year)

  }, false);



  dp_input.addEventListener('blur', function() {

    //dp_widget.innerHTML = "";

  }, false);









};

fnordmetric-webui/fnordmetric-webui-metricpreviewwidget.js

+27 −17
Original line number Diff line number Diff line
@@ -36,6 +36,7 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) { 
    "columns" : null

  }



  var elems = {};



  function renderChart(chart) {

    if (chart != undefined) {
@@ -63,6 +64,7 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) { 
    FnordMetric.httpPost("/query", querystr, function(r) {

      if (r.status == 200) {

        var json = JSON.parse(r.response);

        console.log(json);

        if (json.charts != undefined) {

          renderChart(json.charts[0]);

        }
@@ -73,6 +75,16 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) { 
    });

  }



  function setInitialInputs(aggr_time, columns, timespan, end_time) {

    inputs.aggregation.time = 

      FnordMetric.util.toMilliSeconds(aggr_time);

    inputs.aggregation.step = aggr_time;

    inputs.time.mseconds_to_end = timespan;

    inputs.columns = columns;

    inputs.time.end = end_time;

  }





  function handleAggrAvailability(show, tw_select, step_select, group_btns) {

    /* show = "value" */

    if (show == "Value" || show == "Rollup") {
@@ -101,11 +113,6 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) { 


  }



  function onDateSubmit(ts) {

    inputs.time.end = ts;

    runQuery(FnordMetric.util.createQuery(inputs, metric));

  }



  function updateDateTimeElems(start, end, title, input) {

    var end_string = FnordMetric.util.getDateTimeString(end);
@@ -120,9 +127,16 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) { 


  }



  function onDateSubmit(ts) {

    inputs.time.end = ts;

    runQuery(FnordMetric.util.createQuery(inputs, metric));

    var start = ts - inputs.time.mseconds_to_end;

    updateDateTimeElems(start, ts, elems.timespan.title, null);

  }





  //FIXME works but seems to be ugly

  function updateEventHandler(elems, columns) {

  function updateEventHandler() {

    var columns = inputs.columns;

    elems.rollup.addEventListener('change', function() {

      inputs.show = this.value;

      handleAggrAvailability(
@@ -196,7 +210,6 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) { 




  function initElems(columns) {

    var elems = {};

    var now = Date.now();

    var initial_timespan;
@@ -268,9 +281,9 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) { 


    var datepicker = document.createElement("input");

    date_group.appendChild(datepicker);

    FnordMetric.util.DatePicker(date_group, datepicker, onDateSubmit);

    datepicker.value = FnordMetric.util.getDateTimeString(now);

    datepicker.setAttribute("id", now);

    FnordMetric.util.DatePicker(date_group, datepicker, elem, onDateSubmit);

    datepicker.value = FnordMetric.util.getDateTimeString(now);

    elems.date = datepicker;



    var timespan_group = document.createElement("div");
@@ -364,14 +377,11 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) { 
    secondary_controls.appendChild(updater_ttl);

    secondary_controls.appendChild(next_timespan);



    updateEventHandler(elems, columns);

    updateEventHandler();



    setInitialInputs(

      aggregate_options[0], columns, initial_timespan, datepicker.getAttribute("id"));



    inputs.aggregation.time = FnordMetric.util.toMilliSeconds(

      aggregate_options[0]);

    inputs.aggregation.step = inputs.aggregation.time;

    inputs.time.mseconds_to_end = initial_timespan;

    inputs.columns = columns;

    inputs.time.end = datepicker.getAttribute("id");



    handleAggrAvailability("Value", aggr_win, aggr_step, group_buttons);

fnordmetric-webui/fnordmetric-webui-util.js

+5 −5
Original line number Diff line number Diff line
@@ -438,11 +438,11 @@ FnordMetric.util.createQuery = function(inputs, metric) { 
  if (inputs.time.mseconds_to_end != null && inputs.time.end != null ) {

    var start = inputs.time.end - inputs.time.mseconds_to_end;

    where = 

      " where time > FROM_TIMESTAMP(" + start + ")" +

      " and time < FROM_TIMESTAMP(" + inputs.time.end +")";

      " where time > FROM_TIMESTAMP(" + Math.round(start / 1000) + ")" +

      " and time < FROM_TIMESTAMP(" + Math.round(inputs.time.end / 1000) +")";

    //console.log(where);

  }

  //query += where;

  query += where;



  if (hasAggr) {

    var columns = (inputs.group_by.length > 0) ?
@@ -450,8 +450,8 @@ FnordMetric.util.createQuery = function(inputs, metric) { 
    if (hasTimeWindow) {

      timewindow = 

        " GROUP OVER TIMEWINDOW(time, " +

        inputs.aggregation.time + ", " +

        inputs.aggregation.step + ")";

        Math.round(inputs.aggregation.time / 1000) + ", " +

        Math.round(inputs.aggregation.step / 1000) + ")";



      query += timewindow;

      group_by = " BY " + columns;

CRA Git | Maintained and supported by SUSTech CRA and CCSE