Skip to content

Commit

Permalink
Merge branch 'master' into unique-over-histogram
Browse files Browse the repository at this point in the history
  • Loading branch information
@r0goyal
r0goyal committed Jul 27, 2016
2 parents 2d23bcc + fb88514 commit f0d134f
Show file tree
Hide file tree
Showing 7 changed files with 260 additions and 149 deletions.
114 changes: 88 additions & 26 deletions foxtrot-server/src/main/resources/console/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,13 +368,26 @@ <h4 class="modal-title" id="setupPieChartModalLabel">Setup Donut Chart</h4>
<input type="text" class="form-control tile-title" placeholder="Give a title" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="pie_rt"><strong>Timeframe (minutes)</strong></label>
<div class="col-sm-8">
<input type="number" min="5" max="10080" class="form-control refresh-period" placeholder="Between 5 mins and 10080 mins (7 days)" required id="pie_rt">
<div class="help-block with-errors">Between 5 mins and 10080 mins (7 days)</div>
<div class="form-group">
<label class="col-sm-4 control-label"><strong>Time Unit</strong></label>
<div class="col-sm-8">
<select class="selectpicker tile-time-unit">
<option value="minutes" selected="selected">Minute</option>
<option value="hours">Hour</option>
<option value="days">Day</option>
</select>
<div class="help-block with-errors">Select time unit resolution</div>
</div>
</div>

<div class="form-group">
<label class="col-sm-4 control-label"><strong>Timeframe</strong></label>

<div class="col-sm-8">
<input type="number" min="5" max="10080" class="form-control tile-time-value" required>
<div class="help-block with-errors">Enter a number</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="pie_field"><strong>Event Type Field</strong></label>
<div class="col-sm-8">
Expand Down Expand Up @@ -468,7 +481,7 @@ <h4 class="modal-title" id="setupBarChartModalLabel">Setup Bar Chart</h4>
<div class="form-group">
<label class="col-sm-4 control-label"><strong>Table</strong></label>
<div class="col-sm-8">
<select class="selectpicker tile-table" data-style="btn-warning"></select>
<select class="selectpicker tile-table" data-style="btn-warning" required></select>
</div>
</div>
<div class="form-group">
Expand All @@ -477,13 +490,26 @@ <h4 class="modal-title" id="setupBarChartModalLabel">Setup Bar Chart</h4>
<input type="text" class="form-control tile-title" placeholder="Give a title" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="bar_rt"><strong>Timeframe (minutes)</strong></label>
<div class="col-sm-8">
<input type="number" min="5" max="10080" class="form-control refresh-period" placeholder="Between 5 mins and 10080 mins (7 days)" required id="bar_rt">
<div class="help-block with-errors">Between 5 mins and 10080 mins (7 days)</div>
<div class="form-group">
<label class="col-sm-4 control-label"><strong>Time Unit</strong></label>
<div class="col-sm-8">
<select class="selectpicker tile-time-unit">
<option value="minutes" selected="selected">Minute</option>
<option value="hours">Hour</option>
<option value="days">Day</option>
</select>
<div class="help-block with-errors">Select time unit resolution</div>
</div>
</div>

<div class="form-group">
<label class="col-sm-4 control-label"><strong>Timeframe</strong></label>

<div class="col-sm-8">
<input type="number" min="5" max="10080" class="form-control tile-time-value" required>
<div class="help-block with-errors">Enter a number</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="bar-chart-field"><strong>Event Type Field</strong></label>
<div class="col-sm-8">
Expand Down Expand Up @@ -556,15 +582,23 @@ <h4 class="modal-title" id="setupHistogramModalLabel">Setup Histogram</h4>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="histogram_rt"><strong>Timeframe
(minutes)</strong></label>

<label class="col-sm-4 control-label"><strong>Time Unit</strong></label>
<div class="col-sm-8">
<input type="number" min="5" max="10080" class="form-control refresh-period"
placeholder="Between 5 mins and 10080 mins (7 days)" required
id="histogram_rt">
<select class="selectpicker tile-time-unit">
<option value="minutes" selected="selected">Minute</option>
<option value="hours">Hour</option>
<option value="days">Day</option>
</select>
<div class="help-block with-errors">Select time unit resolution</div>
</div>
</div>

<div class="form-group">
<label class="col-sm-4 control-label"><strong>Timeframe</strong></label>

<div class="help-block with-errors">Between 5 mins and 10080 mins (7 days)</div>
<div class="col-sm-8">
<input type="number" min="5" max="10080" class="form-control tile-time-value" required>
<div class="help-block with-errors">Enter a number</div>
</div>
</div>
<div class="form-group">
Expand Down Expand Up @@ -648,13 +682,28 @@ <h4 class="modal-title" id="setupStackedBarChartModalLabel">Setup Stacked Bar Ch
<input type="text" class="form-control tile-title" placeholder="Give a title" required>
</div>
</div>

<div class="form-group">
<label class="col-sm-4 control-label" for="stacked_bar_rt"><strong>Timeframe (minutes)</strong></label>
<label class="col-sm-4 control-label"><strong>Time Unit</strong></label>
<div class="col-sm-8">
<input type="number" min="5" max="10080" class="form-control refresh-period" placeholder="Between 5 mins and 10080 mins (7 days)" required id="stacked_bar_rt">
<div class="help-block with-errors">Between 5 mins and 10080 mins (7 days)</div>
<select class="selectpicker tile-time-unit">
<option value="minutes" selected="selected">Minute</option>
<option value="hours">Hour</option>
<option value="days">Day</option>
</select>
<div class="help-block with-errors">Select time unit resolution</div>
</div>
</div>

<div class="form-group">
<label class="col-sm-4 control-label"><strong>Timeframe</strong></label>

<div class="col-sm-8">
<input type="number" min="5" max="10080" class="form-control tile-time-value" required>
<div class="help-block with-errors">Enter a number</div>
</div>
</div>

<div class="form-group">
<label class="col-sm-4 control-label" for="pie_rt"><strong>Field to classify</strong></label>
<div class="col-sm-8">
Expand Down Expand Up @@ -708,10 +757,23 @@ <h4 class="modal-title" id="setupStatsTrendChartModalLabel">Setup Stats Trend Ch
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="statstrend_rt"><strong>Timeframe (minutes)</strong></label>
<label class="col-sm-4 control-label"><strong>Time Unit</strong></label>
<div class="col-sm-8">
<select class="selectpicker tile-time-unit">
<option value="minutes" selected="selected">Minute</option>
<option value="hours">Hour</option>
<option value="days">Day</option>
</select>
<div class="help-block with-errors">Select time unit resolution</div>
</div>
</div>

<div class="form-group">
<label class="col-sm-4 control-label"><strong>Timeframe</strong></label>

<div class="col-sm-8">
<input type="number" min="5" max="10080" class="form-control refresh-period" placeholder="Between 5 mins and 10080 mins (7 days)" required id="statstrend_rt">
<div class="help-block with-errors">Between 5 mins and 10080 mins (7 days)</div>
<input type="number" min="5" max="10080" class="form-control tile-time-value" required>
<div class="help-block with-errors">Enter a number</div>
</div>
</div>
<div class="form-group">
Expand Down
44 changes: 31 additions & 13 deletions foxtrot-server/src/main/resources/console/js/periodhelper.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
function periodFromWindow(periodString) {
if(periodString == "custom") {
return "minutes";
function periodFromWindow(periodUnit, customPeriodString) {
if (!customPeriodString) {
return "days";
}

if (customPeriodString == "custom") {
return periodUnit;
}
if(periodString === "1d") {
if (customPeriodString === "1d") {
return "hours";
}
if(periodString.endsWith("d")) {
if (customPeriodString.endsWith("d")) {
return "days";
}
return "minutes";
return "days";
}

function timeValue(period, selectedPeriodString) {
function timeValue(periodUnit, periodValue, selectedPeriodString) {
var timestamp = new Date().getTime();
if(selectedPeriodString === "custom") {
if (selectedPeriodString === "custom") {
return {
field: "_timestamp",
operator: "last",
duration: period + "m",
duration: periodValue + periodUnit,
currentTime: timestamp
};
}
Expand All @@ -27,9 +31,23 @@ function timeValue(period, selectedPeriodString) {
};
}

function getPeriodString(period, selectedPeriodString) {
if(selectedPeriodString === "custom") {
return (period >= 60) ? ((period / 60) + "h"): (period + "m");
function getPeriodString(periodUnit, periodValue, selectedPeriodString) {
if (selectedPeriodString === "custom") {
return periodValue + periodUnit;
}
return selectedPeriodString;
}
}

function axisTimeFormat(periodUnit, customPeriod) {
var period = periodFromWindow(periodUnit, customPeriod);

if (period == "hours" || period == "minutes") {
return "%H:%M %e %b";
}

if (period == "days") {
return "%e %b";
}

return "%e %b";
}
41 changes: 28 additions & 13 deletions foxtrot-server/src/main/resources/console/js/tiles/bar-tile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ function BarTile() {
//Instance properties
this.eventTypeFieldName = null;
this.selectedValues = null;
this.period = 0;
this.periodUnit = "minutes";
this.periodValue = 0;
this.customPeriod = "custom";
this.selectedFilters = null;
this.uniqueValues = [];
this.uiFilteredValues;
Expand All @@ -46,7 +48,7 @@ BarTile.prototype.render = function (data, animate) {
} else {
chartLabel = parent.find(".pielabel");
}
chartLabel.text(getPeriodString(this.period, tileElement.find(".period-select").val()));
chartLabel.text(getPeriodString(this.periodUnit, this.periodValue, this.customPeriod));

var canvas = null;
var legendArea = null;
Expand Down Expand Up @@ -168,7 +170,7 @@ BarTile.prototype.getQuery = function () {
if (this.eventTypeFieldName && this.period != 0) {
var timestamp = new Date().getTime();
var filters = [];
filters.push(timeValue(this.period, $("#" + this.id).find(".period-select").val()));
filters.push(timeValue(this.periodUnit, this.periodValue, this.customPeriod));
if (this.selectedValues) {
filters.push({
field: this.eventTypeFieldName,
Expand All @@ -195,7 +197,7 @@ BarTile.prototype.getQuery = function () {
};

BarTile.prototype.isSetupDone = function () {
return this.eventTypeFieldName && this.period != 0;
return this.eventTypeFieldName && this.periodValue != 0 && this.periodUnit;
};

BarTile.prototype.configChanged = function () {
Expand All @@ -206,7 +208,9 @@ BarTile.prototype.configChanged = function () {
}
this.title = modal.find(".tile-title").val();

this.period = parseInt(modal.find(".refresh-period").val());
this.periodUnit = modal.find(".tile-time-unit").first().val();
this.periodValue = parseInt(modal.find(".tile-time-value").first().val());
this.customPeriod = $("#" + this.id).find(".period-select").val();
this.eventTypeFieldName = modal.find(".bar-chart-field").val();
this.title = modal.find(".tile-title").val();
var values = modal.find(".selected-values").val();
Expand Down Expand Up @@ -270,19 +274,22 @@ BarTile.prototype.populateSetupDialog = function () {
var selected_table_tag = modal.find(".tile-table").first();
selected_table_tag.on("change", this.loadFieldList.bind(this));

modal.find(".tile-time-unit").first().val(this.periodUnit);
modal.find(".tile-time-unit").first().selectpicker("refresh");
modal.find(".tile-time-value").first().val(this.periodValue);

modal.find(".refresh-period").val(( 0 != this.period) ? this.period : "");
if (this.selectedValues) {
modal.find(".selected-values").val(this.selectedValues.join(", "));
}
if (this.selectedFilters) {
modal.find(".selected-filters").val(JSON.stringify(this.selectedFilters));
}
modal.find(".bar-show-legend").prop('checked', this.showLegend);
}
};

BarTile.prototype.registerSpecificData = function (representation) {
representation['period'] = this.period;
representation['periodUnit'] = this.periodUnit;
representation['periodValue'] = this.periodValue;
representation['eventTypeFieldName'] = this.eventTypeFieldName;
representation['selectedValues'] = this.selectedValues;
representation['showLegend'] = this.showLegend;
Expand All @@ -292,7 +299,15 @@ BarTile.prototype.registerSpecificData = function (representation) {
};

BarTile.prototype.loadSpecificData = function (representation) {
this.period = representation['period'];
this.periodUnit = representation['periodUnit'];
if (!this.periodUnit) {
this.periodUnit = "minutes";
}
if (representation['period']) {
this.periodValue = representation['period'];
} else {
this.periodValue = representation['periodValue'];
}
this.eventTypeFieldName = representation['eventTypeFieldName'];
this.selectedValues = representation['selectedValues'];
if (representation.hasOwnProperty('selectedFilters')) {
Expand All @@ -305,7 +320,7 @@ BarTile.prototype.loadSpecificData = function (representation) {

BarTile.prototype.isValueVisible = function (value) {
return !this.uiFilteredValues || this.uiFilteredValues.hasOwnProperty(value);
}
};

BarTile.prototype.getUniqueValues = function () {
var options = [];
Expand All @@ -321,14 +336,14 @@ BarTile.prototype.getUniqueValues = function () {
);
}
return options;
}
};

BarTile.prototype.filterValues = function (values) {
if (!values || values.length == 0) {
values = this.uniqueValues;
}
this.uiFilteredValues = new Object();
this.uiFilteredValues = {};
for (var i = 0; i < values.length; i++) {
this.uiFilteredValues[values[i]] = 1;
}
}
};
Loading

0 comments on commit f0d134f

Please sign in to comment.