Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support new user analytics events in the Monitor Tab #943

Merged
Merged
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
<Field
component={[Function]}
name="service"
onChange={[Function]}
placeholder="Select A Service"
props={
Object {
Expand Down Expand Up @@ -57,6 +58,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `

<a
href="/search?end=1466424490000000&limit=20&lookback=1h&maxDuration&minDuration&service=s1&start=1466420890000000"
onClick={[Function]}
target="blank"
>
View all traces
Expand All @@ -70,6 +72,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
<Field
component={[Function]}
name="timeframe"
onChange={[Function]}
placeholder="Select A Timeframe"
props={
Object {
Expand All @@ -86,15 +89,15 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
"value": 3600000,
},
Object {
"label": "Last 2 hour",
"label": "Last 2 hours",
"value": 7200000,
},
Object {
"label": "Last 6 hour",
"label": "Last 6 hours",
"value": 21600000,
},
Object {
"label": "Last 12 hour",
"label": "Last 12 hours",
"value": 43200000,
},
Object {
Expand Down Expand Up @@ -418,6 +421,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
<Field
component={[Function]}
name="service"
onChange={[Function]}
placeholder="Select A Service"
props={
Object {
Expand Down Expand Up @@ -447,6 +451,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `

<a
href="/search?end=1466424490000000&limit=20&lookback=1h&maxDuration&minDuration&service=s1&start=1466420890000000"
onClick={[Function]}
target="blank"
>
View all traces
Expand All @@ -460,6 +465,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
<Field
component={[Function]}
name="timeframe"
onChange={[Function]}
placeholder="Select A Timeframe"
props={
Object {
Expand All @@ -476,15 +482,15 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
"value": 3600000,
},
Object {
"label": "Last 2 hour",
"label": "Last 2 hours",
"value": 7200000,
},
Object {
"label": "Last 6 hour",
"label": "Last 6 hours",
"value": 21600000,
},
Object {
"label": "Last 12 hour",
"label": "Last 12 hours",
"value": 43200000,
},
Object {
Expand Down Expand Up @@ -727,6 +733,7 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
<Field
component={[Function]}
name="service"
onChange={[Function]}
placeholder="Select A Service"
props={
Object {
Expand Down Expand Up @@ -756,6 +763,7 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `

<a
href="/search?end=1466424490000000&limit=20&lookback=1h&maxDuration&minDuration&service=s1&start=1466420890000000"
onClick={[Function]}
target="blank"
>
View all traces
Expand All @@ -769,6 +777,7 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
<Field
component={[Function]}
name="timeframe"
onChange={[Function]}
placeholder="Select A Timeframe"
props={
Object {
Expand All @@ -785,15 +794,15 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
"value": 3600000,
},
Object {
"label": "Last 2 hour",
"label": "Last 2 hours",
"value": 7200000,
},
Object {
"label": "Last 6 hour",
"label": "Last 6 hours",
"value": 21600000,
},
Object {
"label": "Last 12 hour",
"label": "Last 12 hours",
"value": 43200000,
},
Object {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
mapDispatchToProps,
getLoopbackInterval,
yAxisTickFormat,
timeFrameOptions,
} from '.';
import LoadingIndicator from '../../common/LoadingIndicator';
import MonitorATMEmptyState from '../EmptyState';
Expand All @@ -30,6 +31,7 @@ import {
serviceOpsMetrics,
serviceMetricsWithOneServiceLatency,
} from '../../../reducers/metrics.mock';
import * as track from './index.track';

const state = {
services: {},
Expand All @@ -40,12 +42,14 @@ const state = {
const props = mapStateToProps(state);

Date.now = jest.fn(() => 1487076708000); // Tue, 14 Feb 2017 12:51:48 GMT'
jest.mock('lodash/debounce', () => fn => fn);

describe('<MonitorATMServicesView>', () => {
let wrapper;
const mockFetchServices = jest.fn();
const mockFetchAllServiceMetrics = jest.fn();
const mockFetchAggregatedServiceMetrics = jest.fn();

beforeAll(() => {
Date.now = jest.fn(() => 1466424490000);
});
Expand Down Expand Up @@ -299,6 +303,43 @@ describe('<MonitorATMServicesView>', () => {
.prop('error')
).not.toBeNull();
});

it('Should track all events', () => {
const trackSelectServiceSpy = jest.spyOn(track, 'trackSelectService');
const trackViewAllTracesSpy = jest.spyOn(track, 'trackViewAllTraces');
const trackSelectTimeframeSpy = jest.spyOn(track, 'trackSelectTimeframe');
const trackSearchOperationSpy = jest.spyOn(track, 'trackSearchOperation');

const newValue = 'newValue';
const [timeFrameOption] = timeFrameOptions;

wrapper.setProps({
metrics: { ...originInitialState, serviceOpsMetrics },
});

wrapper.find('Search').simulate('change', { target: { value: newValue } });
expect(trackSearchOperationSpy).toHaveBeenCalledWith(newValue);

wrapper
.find('Field')
.first()
.simulate('change', null, newValue);
expect(trackSelectServiceSpy).toHaveBeenCalledWith(newValue);

wrapper
.find('Field')
.last()
.simulate('change', null, timeFrameOption.value);
expect(trackSelectTimeframeSpy).toHaveBeenCalledWith(timeFrameOption.label);

wrapper.find({ children: 'View all traces' }).simulate('click');
expect(trackViewAllTracesSpy).toHaveBeenCalled();

trackSelectServiceSpy.mockReset();
trackViewAllTracesSpy.mockReset();
trackSelectTimeframeSpy.mockReset();
trackSearchOperationSpy.mockReset();
});
});

describe('<MonitorATMServicesView> on page switch', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
// Copyright (c) 2022 Uber Technologies, Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import * as trackingUtils from '../../../utils/tracking';
import {
CATEGORY_SEARCH_OPERATION,
CATEGORY_SELECT_SERVICE,
CATEGORY_SELECT_TIMEFRAME,
CATEGORY_VIEW_ALL_TRACES,
trackSelectService,
trackSelectTimeframe,
trackViewAllTraces,
trackSearchOperation,
} from './index.track';

describe('ServicesView tracking', () => {
let trackEvent;

beforeAll(() => {
trackEvent = jest.spyOn(trackingUtils, 'trackEvent').mockImplementation();
});

beforeEach(() => {
trackEvent.mockClear();
});

it('trackViewAllTraces calls trackEvent with the match category and show action', () => {
trackViewAllTraces();
expect(trackEvent).toHaveBeenCalledWith(CATEGORY_VIEW_ALL_TRACES, expect.any(String));
});

it('trackSelectService calls trackEvent with the match category and show action', () => {
const serviceName = 'service-name';
trackSelectService(serviceName);
expect(trackEvent).toHaveBeenCalledWith(CATEGORY_SELECT_SERVICE, serviceName);
});

it('trackSelectTimeframe calls trackEvent with the match category and show action', () => {
const timeframe = 'some-timeframe';
trackSelectTimeframe(timeframe);
expect(trackEvent).toHaveBeenCalledWith(CATEGORY_SELECT_TIMEFRAME, timeframe);
});

it('trackSearchOperation calls trackEvent with the match category and show action', async () => {
const searchQuery = 'name';
trackSearchOperation(searchQuery);
expect(trackEvent).toHaveBeenCalledWith(CATEGORY_SEARCH_OPERATION, searchQuery);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// Copyright (c) 2022 The Jaeger Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import { trackEvent } from '../../../utils/tracking';

const SPM_CATEGORY_BASE = 'jaeger/ux/trace/spm';

export const CATEGORY_VIEW_ALL_TRACES = `${SPM_CATEGORY_BASE}/view-all-traces`;
export const CATEGORY_SELECT_SERVICE = `${SPM_CATEGORY_BASE}/select-service`;
export const CATEGORY_SELECT_TIMEFRAME = `${SPM_CATEGORY_BASE}/select-timeframe`;
export const CATEGORY_SEARCH_OPERATION = `${SPM_CATEGORY_BASE}/search-operation`;

export const trackViewAllTraces = () => trackEvent(CATEGORY_VIEW_ALL_TRACES, 'click');
export const trackSelectService = (service: string) => trackEvent(CATEGORY_SELECT_SERVICE, service);
export const trackSelectTimeframe = (timeframe: string) => trackEvent(CATEGORY_SELECT_TIMEFRAME, timeframe);
export const trackSearchOperation = (searchQuery: string) =>
trackEvent(CATEGORY_SEARCH_OPERATION, searchQuery);
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
import * as React from 'react';
import { Row, Col, Input, Alert } from 'antd';
import { ActionFunction, Action } from 'redux-actions';
import _debounce from 'lodash/debounce';
import _isEqual from 'lodash/isEqual';
import _isEmpty from 'lodash/isEmpty';
// @ts-ignore
Expand Down Expand Up @@ -44,6 +45,12 @@ import { convertToTimeUnit, convertTimeUnitToShortTerm, getSuitableTimeUnit } fr

import './index.css';
import { getConfigValue } from '../../../utils/config/get-config';
import {
trackSearchOperation,
trackSelectService,
trackSelectTimeframe,
trackViewAllTraces,
} from './index.track';

type StateType = {
graphWidth: number;
Expand All @@ -68,6 +75,8 @@ type TDispatchProps = {
fetchAllServiceMetrics: (serviceName: string, query: MetricsAPIQueryParams) => void;
};

const trackSearchOperationDebounced = _debounce(searchQuery => trackSearchOperation(searchQuery), 1000);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious, why is it necessary to introduce a delay here? Aren't events reported async in the background anyway?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is important to prevent dummy information reporting if user search for some specific name.
For example if the target name is "my-metrics" I attempt to track and send report only once with completed searching query, but without debounce there are 10 separate report requests with partial searching query will be send. The cause of this behaviour is that the onChange handler fires every time a new character is typed into the input, that's why these 10 reports are sent, without debounce:
"m"
"my"
"my-"
...
"my-metric"
"my-metrics"

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you saying a pending debounce gets canceled if another one is issued? That was not my understanding of the function.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, even if suppress logging of partial names, are the partial queries still being sent to the backend? Having 1-1 between queries and logs seems reasonable.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

regarding 1-st point - yes, you are right
regarding 2-nd point - the search field filters data only locally on front-end and doesn't sent any requests to the backend

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So on point 1 - if debounce merely delays, won't you still end up with the same incremental logs?


const Search = Input.Search;

const AdaptedVirtualSelect = reduxFormFieldAdapter({
Expand All @@ -77,11 +86,11 @@ const AdaptedVirtualSelect = reduxFormFieldAdapter({

const serviceFormSelector = formValueSelector('serviceForm');
const oneHourInMilliSeconds = 3600000;
const timeFrameOptions = [
export const timeFrameOptions = [
{ label: 'Last Hour', value: oneHourInMilliSeconds },
{ label: 'Last 2 hour', value: 2 * oneHourInMilliSeconds },
{ label: 'Last 6 hour', value: 6 * oneHourInMilliSeconds },
{ label: 'Last 12 hour', value: 12 * oneHourInMilliSeconds },
{ label: 'Last 2 hours', value: 2 * oneHourInMilliSeconds },
{ label: 'Last 6 hours', value: 6 * oneHourInMilliSeconds },
{ label: 'Last 12 hours', value: 12 * oneHourInMilliSeconds },
{ label: 'Last 24 hours', value: 24 * oneHourInMilliSeconds },
{ label: 'Last 2 days', value: 48 * oneHourInMilliSeconds },
];
Expand Down Expand Up @@ -258,6 +267,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
<Col span={6}>
<h2 className="service-selector-header">Choose service</h2>
<Field
onChange={(e: Event, newValue: string) => trackSelectService(newValue)}
name="service"
component={AdaptedVirtualSelect}
placeholder="Select A Service"
Expand All @@ -284,6 +294,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
selectedTimeFrame}000`
)}
target="blank"
onClick={trackViewAllTraces}
>
View all traces
</a>
Expand All @@ -294,6 +305,10 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
name="timeframe"
component={AdaptedVirtualSelect}
placeholder="Select A Timeframe"
onChange={(e: Event, value: number) => {
const { label } = timeFrameOptions.find(option => option.value === value)!;
trackSelectTimeframe(label);
}}
props={{
className: 'select-a-timeframe-input',
defaultValue: timeFrameOptions[0],
Expand Down Expand Up @@ -379,6 +394,8 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
searchOps: e.target.value,
serviceOpsMetrics: filteredData,
});

trackSearchOperationDebounced(e.target.value);
}}
/>
</Col>
Expand Down