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.

Sign up for GitHub

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

(SPM) Add span kind selector #2012

Merged
merged 13 commits into from
Dec 4, 2023
Merged

(SPM) Add span kind selector #2012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f2552cb
Add span kind selector
albertteoh Dec 2, 2023
7b86eca
Rename single word to two words
albertteoh Dec 2, 2023
49c0401
Update snapshots and test
albertteoh Dec 2, 2023
78937f0
Merge branch 'main' into add-span-kind-selector
albertteoh Dec 2, 2023
c6bade9
Fix import formatting
albertteoh Dec 2, 2023
3cb5605
yarn prettier
albertteoh Dec 2, 2023
07e3c26
Remove redundant 'Choose' from title
Dec 2, 2023
46989de
Default to 'server'
Dec 2, 2023
ccd6cc7
Remove optionality in API query param fields
Dec 2, 2023
62a71da
Add behavioural tests for spanKind selector
Dec 3, 2023
c1ed381
Fix import formatting
Dec 3, 2023
71c43af
Fix import formatting
Dec 3, 2023
ff1ab7b
yarn prettier
Dec 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 168 additions & 3 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
<h2
className="service-selector-header"
>
Choose service
Service
</h2>
<Field
component={[Function]}
Expand Down Expand Up @@ -42,6 +42,61 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
</Option>
</Field>
</Col>
<Col
span={6}
>
<h2
className="span-kind-selector-header"
>
Span Kind
</h2>
<Field
component={[Function]}
name="spanKind"
onChange={[Function]}
placeholder="Select A Span Kind"
props={
Object {
"className": "span-kind-selector",
"defaultValue": "server",
"disabled": null,
"loading": null,
"value": "server",
}
}
>
<Option
key="client"
value="client"
>
Client
</Option>
<Option
key="server"
value="server"
>
Server
</Option>
<Option
key="internal"
value="internal"
>
Internal
</Option>
<Option
key="producer"
value="producer"
>
Producer
</Option>
<Option
key="consumer"
value="consumer"
>
Consumer
</Option>
</Field>
</Col>
</Row>
<Row
align="middle"
Expand Down Expand Up @@ -429,7 +484,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
<h2
className="service-selector-header"
>
Choose service
Service
</h2>
<Field
component={[Function]}
Expand All @@ -446,6 +501,61 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
}
/>
</Col>
<Col
span={6}
>
<h2
className="span-kind-selector-header"
>
Span Kind
</h2>
<Field
component={[Function]}
name="spanKind"
onChange={[Function]}
placeholder="Select A Span Kind"
props={
Object {
"className": "span-kind-selector",
"defaultValue": "server",
"disabled": null,
"loading": null,
"value": "server",
}
}
>
<Option
key="client"
value="client"
>
Client
</Option>
<Option
key="server"
value="server"
>
Server
</Option>
<Option
key="internal"
value="internal"
>
Internal
</Option>
<Option
key="producer"
value="producer"
>
Producer
</Option>
<Option
key="consumer"
value="consumer"
>
Consumer
</Option>
</Field>
</Col>
</Row>
<Row
align="middle"
Expand Down Expand Up @@ -752,7 +862,7 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
<h2
className="service-selector-header"
>
Choose service
Service
</h2>
<Field
component={[Function]}
Expand All @@ -769,6 +879,61 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
}
/>
</Col>
<Col
span={6}
>
<h2
className="span-kind-selector-header"
>
Span Kind
</h2>
<Field
component={[Function]}
name="spanKind"
onChange={[Function]}
placeholder="Select A Span Kind"
props={
Object {
"className": "span-kind-selector",
"defaultValue": "server",
"disabled": null,
"loading": null,
"value": "server",
}
}
>
<Option
key="client"
value="client"
>
Client
</Option>
<Option
key="server"
value="server"
>
Server
</Option>
<Option
key="internal"
value="internal"
>
Internal
</Option>
<Option
key="producer"
value="producer"
>
Producer
</Option>
<Option
key="consumer"
value="consumer"
>
Consumer
</Option>
</Field>
</Col>
</Row>
<Row
align="middle"
Expand Down
12 changes: 11 additions & 1 deletion packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,20 @@ limitations under the License.
font-weight: 800;
}

.span-kind-selector-header {
padding-left: 10px;
font-size: 18px;
font-weight: 800;
}

.span-kind-selector {
padding-left: 10px;
}

.operations-metrics-text {
margin-top: 17px;
margin-bottom: 14px;
font-size: 14;
font-size: 14px;
font-weight: 400;
}

Expand Down
8 changes: 8 additions & 0 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
getLoopbackInterval,
yAxisTickFormat,
timeFrameOptions,
spanKindOptions,
} from '.';
import LoadingIndicator from '../../common/LoadingIndicator';
import MonitorATMEmptyState from '../EmptyState';
Expand Down Expand Up @@ -292,10 +293,12 @@ describe('<MonitorATMServicesView>', () => {
it('Should track all events', () => {
const trackSelectServiceSpy = jest.spyOn(track, 'trackSelectService');
const trackViewAllTracesSpy = jest.spyOn(track, 'trackViewAllTraces');
const trackSelectSpanKindSpy = jest.spyOn(track, 'trackSelectSpanKind');
const trackSelectTimeframeSpy = jest.spyOn(track, 'trackSelectTimeframe');
const trackSearchOperationSpy = jest.spyOn(track, 'trackSearchOperation');

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

wrapper.setProps({
Expand All @@ -308,6 +311,9 @@ describe('<MonitorATMServicesView>', () => {
wrapper.find('Field').first().simulate('change', null, newValue);
expect(trackSelectServiceSpy).toHaveBeenCalledWith(newValue);

wrapper.find({ name: 'spanKind' }).simulate('change', null, spanKindOption.value);
expect(trackSelectSpanKindSpy).toHaveBeenCalledWith(spanKindOption.label);

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

Expand All @@ -316,6 +322,7 @@ describe('<MonitorATMServicesView>', () => {

trackSelectServiceSpy.mockReset();
trackViewAllTracesSpy.mockReset();
trackSelectSpanKindSpy.mockReset();
trackSelectTimeframeSpy.mockReset();
trackSearchOperationSpy.mockReset();
});
Expand Down Expand Up @@ -361,6 +368,7 @@ describe('mapStateToProps()', () => {
metrics: originInitialState,
services: [],
selectedService: 's1',
selectedSpanKind: 'server',
Copy link
Member

Choose a reason for hiding this comment

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

do we have behavioral tests? It would be good to have tests simulating a change in span kind

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yup, I could do better with test coverage; added behavioural tests in: 62a71da.

selectedTimeFrame: 3600000,
});
});
Expand Down
8 changes: 8 additions & 0 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ import {
CATEGORY_SELECT_SERVICE,
CATEGORY_SELECT_TIMEFRAME,
CATEGORY_VIEW_ALL_TRACES,
CATEGORY_SELECT_SPAN_KIND,
trackSelectService,
trackSelectSpanKind,
trackSelectTimeframe,
trackViewAllTraces,
trackSearchOperation,
Expand Down Expand Up @@ -46,6 +48,12 @@ describe('ServicesView tracking', () => {
expect(trackEvent).toHaveBeenCalledWith(CATEGORY_SELECT_SERVICE, serviceName);
});

it('trackSelectSpanKind calls trackEvent with the match category and show action', () => {
const spanKind = 'producer';
trackSelectSpanKind(spanKind);
expect(trackEvent).toHaveBeenCalledWith(CATEGORY_SELECT_SPAN_KIND, spanKind);
});

it('trackSelectTimeframe calls trackEvent with the match category and show action', () => {
const timeframe = 'some-timeframe';
trackSelectTimeframe(timeframe);
Expand Down
2 changes: 2 additions & 0 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,13 @@ 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_SPAN_KIND = `${SPM_CATEGORY_BASE}/select-span-kind`;
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 trackSelectSpanKind = (spanKind: string) => trackEvent(CATEGORY_SELECT_SPAN_KIND, spanKind);
export const trackSelectTimeframe = (timeframe: string) => trackEvent(CATEGORY_SELECT_TIMEFRAME, timeframe);
export const trackSearchOperation = (searchQuery: string) =>
trackEvent(CATEGORY_SEARCH_OPERATION, searchQuery);
Loading
Loading