Skip to content

Commit

Permalink
Support new user analytics events in the Monitor Tab (#943)
Browse files Browse the repository at this point in the history
* Added new SPM tracing events tracking

Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* Added tests for new SPM events

Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* reworked tracking categories & actions names

Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* fixed license block dates; moved debounce from tracking module to component

Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* Fix monitor tab crashing (#946)

Signed-off-by: nofar9792 <nofar.cohen@logz.io>
Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* Add repository to package.json (#949)

Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* Preparing release v1.23.0 (#947)

* Preparing release v1.23.0

Signed-off-by: Pavol Loffay <p.loffay@gmail.com>

* Fix

Signed-off-by: Pavol Loffay <p.loffay@gmail.com>

* Fix

Signed-off-by: Pavol Loffay <p.loffay@gmail.com>

* Fix

Signed-off-by: Pavol Loffay <p.loffay@gmail.com>

* Fix

Signed-off-by: Pavol Loffay <p.loffay@gmail.com>
Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* Bump github/codeql-action from 1 to 2 (#938)

Bumps [github/codeql-action](https://github.com/github/codeql-action) from 1 to 2.
- [Release notes](https://github.com/github/codeql-action/releases)
- [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md)
- [Commits](github/codeql-action@v1...v2)

---
updated-dependencies:
- dependency-name: github/codeql-action
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* Clarify development setup

For #952

Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* Use red on scatterplot for traces if any spans have an error=true tag (#951)

* Use red on scatterplot for traces if any spans have an error=true tag

Signed-off-by: Ed Snible <snible@us.ibm.com>

* Used 'yarn prettier' to appease 'yarn lint'

Signed-off-by: Ed Snible <snible@us.ibm.com>
Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

* Updated sorting events tracking

Signed-off-by: VladislavBryukhanov <gfedcba625@gmail.com>

Co-authored-by: nofar9792 <nofar.cohen@logz.io>
Co-authored-by: Yuri Shkuro <yurishkuro@users.noreply.github.com>
Co-authored-by: Pavol Loffay <p.loffay@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Ed Snible <esnible@acm.org>
  • Loading branch information
6 people committed May 30, 2022
1 parent c15ab14 commit e55b3a6
Show file tree
Hide file tree
Showing 10 changed files with 323 additions and 29 deletions.
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);
25 changes: 21 additions & 4 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
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);

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

0 comments on commit e55b3a6

Please sign in to comment.