You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ji...@apache.org on 2019/05/20 17:18:44 UTC
[incubator-pinot] branch master updated: [TE] frontend -
harleyjj/screenshot - update screenshot route to match new Anomalies route
(#4194)
This is an automated email from the ASF dual-hosted git repository.
jihao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-pinot.git
The following commit(s) were added to refs/heads/master by this push:
new 45c59f6 [TE] frontend - harleyjj/screenshot - update screenshot route to match new Anomalies route (#4194)
45c59f6 is described below
commit 45c59f618c7feea0e50eeb579d604c21404b83b7
Author: Harley Jackson <hj...@linkedin.com>
AuthorDate: Mon May 20 10:18:39 2019 -0700
[TE] frontend - harleyjj/screenshot - update screenshot route to match new Anomalies route (#4194)
Please note that the file thirdeye/thirdeye-pinot/src/main/resources/scripts/getGraphPnj.js must be updated for the screenshot to function with the upgrades in this PR. getGraphPnj.js updates will be in a separate pull request
Updates screenshot graph to new format consistent with the rest of Thirdeye
Updates comments in Anomaly Summary component
---
.../pods/components/anomaly-summary/component.js | 8 +-
.../pods/components/timeseries-chart/component.js | 21 ++-
.../app/pods/screenshot/controller.js | 191 +++++++++++++--------
.../thirdeye-frontend/app/pods/screenshot/route.js | 30 +++-
.../app/pods/screenshot/template.hbs | 20 +--
5 files changed, 176 insertions(+), 94 deletions(-)
diff --git a/thirdeye/thirdeye-frontend/app/pods/components/anomaly-summary/component.js b/thirdeye/thirdeye-frontend/app/pods/components/anomaly-summary/component.js
index 6e90868..2d1e7eb 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/anomaly-summary/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/anomaly-summary/component.js
@@ -25,7 +25,7 @@ import columns from 'thirdeye-frontend/shared/anomaliesTableColumns';
import moment from 'moment';
import _ from 'lodash';
-const TABLE_DATE_FORMAT = 'MMM DD, hh:mm A'; // format for anomaly table
+const TABLE_DATE_FORMAT = 'MMM DD, hh:mm A'; // format for anomaly table and legend
export default Component.extend({
/**
@@ -45,15 +45,15 @@ export default Component.extend({
*/
anomalyData: {},
/**
- * Anomaly data, fetched using the anomalyId
+ * current time series
*/
current: null,
/**
- * Anomaly data, fetched using the anomalyId
+ * predicted time series
*/
predicted: null,
/**
- * List of associated classes
+ * imported color mapping for graph
*/
colorMapping: colorMapping,
zoom: {
diff --git a/thirdeye/thirdeye-frontend/app/pods/components/timeseries-chart/component.js b/thirdeye/thirdeye-frontend/app/pods/components/timeseries-chart/component.js
index 92d014c..dacb827 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/timeseries-chart/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/timeseries-chart/component.js
@@ -1,4 +1,4 @@
-import { debounce } from '@ember/runloop';
+import { debounce, later } from '@ember/runloop';
import Component from '@ember/component';
import c3 from 'c3';
import d3 from 'd3';
@@ -210,6 +210,25 @@ export default Component.extend({
}
},
+ didRender(){
+ this._super(...arguments);
+
+ later(() => {
+ this.notifyPhantomJS();
+ });
+ },
+
+ /**
+ * Checks if the page is being viewed from phantomJS
+ * and notifies it that the page is rendered and ready
+ * for a screenshot
+ */
+ notifyPhantomJS() {
+ if (typeof window.callPhantom === 'function') {
+ window.callPhantom({message: 'ready'});
+ }
+ },
+
didInsertElement() {
this._super(...arguments);
diff --git a/thirdeye/thirdeye-frontend/app/pods/screenshot/controller.js b/thirdeye/thirdeye-frontend/app/pods/screenshot/controller.js
index 2a19853..0072ad4 100644
--- a/thirdeye/thirdeye-frontend/app/pods/screenshot/controller.js
+++ b/thirdeye/thirdeye-frontend/app/pods/screenshot/controller.js
@@ -1,93 +1,136 @@
-import { alias } from '@ember/object/computed';
-import { computed } from '@ember/object';
+import { colorMapping, makeTime } from 'thirdeye-frontend/utils/rca-utils';
+import {
+ get,
+ computed,
+ getProperties
+} from '@ember/object';
import Controller from '@ember/controller';
+import { humanizeFloat } from 'thirdeye-frontend/utils/utils';
import moment from 'moment';
+import _ from 'lodash';
-export default Controller.extend({
- // Default Legend text and color
- legendText: {
- dotted: {
- text: 'Expected',
- color: 'orange'
- },
- solid: {
- text: 'Current',
- color: 'blue'
- }
- },
+const TABLE_DATE_FORMAT = 'MMM DD, hh:mm A'; // format for anomaly table and legend
+export default Controller.extend({
/**
- * Padding to be added to the graph
+ * Anomaly data, fetched using the anomalyId
*/
- screenshotPadding: {
- left: 50,
- right: 100
- },
+ anomalyData: {},
+ /**
+ * current time series
+ */
+ current: null,
+ /**
+ * predicted time series
+ */
+ predicted: null,
+ /**
+ * imported color mapping for graph
+ */
+ colorMapping: colorMapping,
- // Displaying points for screenshot for n < 100
- point: computed('anomaly.dates', function() {
- const datesCount = this.get('anomaly.dates.length');
- return {
- show: datesCount <= 100
- };
- }),
+ zoom: {
+ enabled: false,
+ rescale: true
+ },
- // Primary Anomaly details
- anomaly: alias('model.anomalyDetailsList.firstObject'),
+ // legend and point are for the graph
+ legend: {
+ show: true,
+ position: 'right'
+ },
- // Name of the metric for legend
- metricName: alias('anomaly.metric'),
+ point: {
+ show: false
+ },
- /** Data Massaging the anomaly for the graph component
- * @returns {Object}
- */
- primaryMetric: computed(
- 'anomaly',
- 'metricName',
+ anomaly: computed(
+ 'anomalyData',
function() {
- const metricName = this.get('metricName');
- const anomaly = this.get('anomaly');
- return Object.assign(
- {},
- anomaly,
- {
- metricName,
- regions: [{
- start: anomaly.anomalyRegionStart,
- end: anomaly.anomalyRegionEnd
- }]
- }
- );
+ return !_.isEmpty(get(this, 'anomalyData'));
}
),
- /**
- * Formats dates into ms unix
- * @returns {Array}
- */
- dates: computed('anomaly.dates.@each', function() {
- const dates = this.getWithDefault('anomaly.dates', []);
- const unixDates = dates.map((date) => moment(date).valueOf());
+ series: computed(
+ 'anomalyData',
+ 'current',
+ 'predicted',
+ function () {
+ const {
+ anomalyData, current, predicted
+ } = getProperties(this, 'anomalyData', 'current', 'predicted');
- return ['date', ...unixDates];
- }),
+ const series = {};
- current: alias('anomaly.currentValues'),
- expected: alias('anomaly.baselineValues'),
+ if (!_.isEmpty(anomalyData)) {
+ const key = this._formatAnomaly(anomalyData);
+ series[key] = {
+ timestamps: [anomalyData.startTime, anomalyData.endTime],
+ values: [1, 1],
+ type: 'region',
+ color: 'orange'
+ };
+ }
- /**
- * Data Massages current and expected values for the graph component
- * @returns {Array}
- */
- columns: computed(
- 'current',
- 'expected',
- 'metricName',
- function() {
- const metricName = this.get('metricName');
- const currentColumn = [`${metricName}-current`, ...this.get('current')];
- const expectedColumn = [`${metricName}-expected`, ...this.get('expected')];
- return [currentColumn, expectedColumn];
+ if (current && !_.isEmpty(current.value)) {
+ series['current'] = {
+ timestamps: current.timestamp,
+ values: current.value,
+ type: 'line',
+ color: 'blue'
+ };
+ }
+
+ if (predicted && !_.isEmpty(predicted.value)) {
+ series['predicted'] = {
+ timestamps: predicted.timestamp,
+ values: predicted.value,
+ type: 'line',
+ color: 'orange'
+ };
+ }
+ return series;
}
- )
+ ),
+
+ axis: computed(
+ 'anomalyData',
+ function () {
+ const anomalyData = get(this, 'anomalyData');
+
+ return {
+ y: {
+ show: true,
+ tick: {
+ format: function(d){return humanizeFloat(d);}
+ }
+ },
+ y2: {
+ show: false,
+ min: 0,
+ max: 1
+ },
+ x: {
+ type: 'timeseries',
+ show: true,
+ min: anomalyData.startTime,
+ max: anomalyData.endTime,
+ tick: {
+ fit: false,
+ format: (d) => {
+ const t = makeTime(d);
+ if (t.valueOf() === t.clone().startOf('day').valueOf()) {
+ return t.format('MMM D (ddd)');
+ }
+ return t.format('h:mm a');
+ }
+ }
+ }
+ };
+ }
+ ),
+
+ _formatAnomaly(anomaly) {
+ return `${moment(anomaly.startTime).format(TABLE_DATE_FORMAT)}`;
+ }
});
diff --git a/thirdeye/thirdeye-frontend/app/pods/screenshot/route.js b/thirdeye/thirdeye-frontend/app/pods/screenshot/route.js
index a4e25d0..e50b118 100644
--- a/thirdeye/thirdeye-frontend/app/pods/screenshot/route.js
+++ b/thirdeye/thirdeye-frontend/app/pods/screenshot/route.js
@@ -1,13 +1,39 @@
import Route from '@ember/routing/route';
import { checkStatus } from 'thirdeye-frontend/utils/utils';
import fetch from 'fetch';
+import RSVP from "rsvp";
import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
export default Route.extend(UnauthenticatedRouteMixin, {
model(params) {
const { anomaly_id: id} = params;
- const url = `/anomalies/search/anomalyIds/1/1/1?anomalyIds=${id}&functionName=`;
+ const anomalyUrl = `/dashboard/anomalies/view/${id}`;
- return fetch(url).then(checkStatus);
+ return fetch(anomalyUrl)
+ .then(checkStatus)
+ .then(res => {
+ const timeZone = 'America/Los_Angeles';
+ const currentUrl = `/rootcause/metric/timeseries?urn=${res.metricUrn}&start=${res.startTime}&end=${res.endTime}&offset=current&timezone=${timeZone}`;
+ const predictedUrl = `/detection/predicted-baseline/${id}?start=${res.startTime}&end=${res.endTime}`;
+ const timeseriesHash = {
+ current: fetch(currentUrl).then(res => checkStatus(res, 'get', true)),
+ predicted: fetch(predictedUrl).then(res => checkStatus(res, 'get', true)),
+ anomalyData: res
+ };
+ return RSVP.hash(timeseriesHash);
+ });
+ },
+
+ /**
+ * Sets current, predicted, and anomalyData
+ * @return {undefined}
+ */
+ setupController(controller, model) {
+ this._super(...arguments);
+ controller.setProperties({
+ current: model.current,
+ predicted: model.predicted,
+ anomalyData: model.anomalyData
+ });
}
});
diff --git a/thirdeye/thirdeye-frontend/app/pods/screenshot/template.hbs b/thirdeye/thirdeye-frontend/app/pods/screenshot/template.hbs
index 69f009a..6209582 100644
--- a/thirdeye/thirdeye-frontend/app/pods/screenshot/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/screenshot/template.hbs
@@ -1,19 +1,13 @@
{{#if anomaly}}
<div class="card-container card-container--padding">
- {{anomaly-graph
- primaryMetric=primaryMetric
- isLoading=false
- showSubchart=false
- showLegend=false
- legendText=legendText
- enableZoom=true
- componentId='anomaly-screenshot'
- showGraphLegend=false
- height=400
- chartDates=dates
- primaryMetricColumn=columns
+ {{timeseries-chart
+ series=series
+ colorMapping=colorMapping
+ axis=axis
+ zoom=zoom
+ subchart=subchart
+ legend=legend
point=point
- padding=screenshotPadding
}}
</div>
{{/if}}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org