(SPM) Add span kind selector (#2012)

## Which problem is this PR solving? - Resolves jaegertracing/jaeger#4035 - Related to jaegertracing/jaeger#3898 ## Description of the changes - Add a span kind filter to the Monitor tab. - As span kinds are an attribute of a span, much like the service name, I thought it made sense to add the dropdown filter next to the service filter. - I'm not a designer so open to ideas on how to make this better! ## How was this change tested? - Manually tested as per the following screen recording. - Update tests. https://github.com/jaegertracing/jaeger-ui/assets/26584478/2d8ee49f-e30c-4438-9e92-9012814c495d ## Checklist - [x] I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md - [x] I have signed all commits - [x] I have added unit tests for the new functionality - [x] I have run lint and test steps successfully - for `jaeger`: `make lint test` - for `jaeger-ui`: `yarn lint` and `yarn test` --------- Signed-off-by: albertteoh <[email protected]> Signed-off-by: Albert Teoh <[email protected]> Co-authored-by: Albert Teoh <[email protected]>
jaegertracing · Dec 4, 2023 · 8d132ea · 8d132ea
1 parent 5855da2
commit 8d132ea
Show file tree

Hide file tree

Showing 7 changed files with 252 additions and 13 deletions.
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/Monitor/ServicesView/__snapshots__/index.test.js.snap
@@ -12,7 +12,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         <h2
           className="service-selector-header"
         >
-          Choose service
+          Service
         </h2>
         <Field
           component={[Function]}
@@ -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"
@@ -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]}
@@ -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"
@@ -752,7 +862,7 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
         <h2
           className="service-selector-header"
         >
-          Choose service
+          Service
         </h2>
         <Field
           component={[Function]}
@@ -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"

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
@@ -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;
 }
 

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
@@ -21,6 +21,7 @@ import {
   getLoopbackInterval,
   yAxisTickFormat,
   timeFrameOptions,
+  spanKindOptions,
 } from '.';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import MonitorATMEmptyState from '../EmptyState';
@@ -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({
@@ -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);
 
@@ -316,6 +322,7 @@ describe('<MonitorATMServicesView>', () => {
 
     trackSelectServiceSpy.mockReset();
     trackViewAllTracesSpy.mockReset();
+    trackSelectSpanKindSpy.mockReset();
     trackSelectTimeframeSpy.mockReset();
     trackSearchOperationSpy.mockReset();
   });
@@ -361,6 +368,7 @@ describe('mapStateToProps()', () => {
       metrics: originInitialState,
       services: [],
       selectedService: 's1',
+      selectedSpanKind: 'server',
       selectedTimeFrame: 3600000,
     });
   });

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.test.js
@@ -18,7 +18,9 @@ import {
   CATEGORY_SELECT_SERVICE,
   CATEGORY_SELECT_TIMEFRAME,
   CATEGORY_VIEW_ALL_TRACES,
+  CATEGORY_SELECT_SPAN_KIND,
   trackSelectService,
+  trackSelectSpanKind,
   trackSelectTimeframe,
   trackViewAllTraces,
   trackSearchOperation,
@@ -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);

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx
@@ -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);