From f2552cba879cbaa4b24d8167122ab4fb5c8673e6 Mon Sep 17 00:00:00 2001
From: albertteoh <see.kwang.teoh@gmail.com>
Date: Sat, 2 Dec 2023 18:16:59 +1100
Subject: [PATCH 01/12] Add span kind selector

Signed-off-by: albertteoh <see.kwang.teoh@gmail.com>
---
 .../components/Monitor/ServicesView/index.css | 12 ++++-
 .../Monitor/ServicesView/index.track.tsx      |  2 +
 .../components/Monitor/ServicesView/index.tsx | 46 +++++++++++++++++--
 packages/jaeger-ui/src/types/metrics.tsx      |  4 +-
 scripts/draft-release.py                      | 39 +++++++++++-----
 5 files changed, 85 insertions(+), 18 deletions(-)
 mode change 100644 => 100755 scripts/draft-release.py

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
index d3ffa40990..bdd04a2a9c 100644
--- 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;
 }
 
+.spankind-selector-header {
+  padding-left: 10px;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.spankind-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.track.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx
index 0ae66ad4b9..ef9810929c 100644
--- 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_SPANKIND = `${SPM_CATEGORY_BASE}/select-spankind`;
 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_SPANKIND, spankind);
 export const trackSelectTimeframe = (timeframe: string) => trackEvent(CATEGORY_SELECT_TIMEFRAME, timeframe);
 export const trackSearchOperation = (searchQuery: string) =>
   trackEvent(CATEGORY_SEARCH_OPERATION, searchQuery);
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index e22a42bd6f..24fef609c4 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -36,7 +36,7 @@ import {
   MetricsReduxState,
   Points,
   ServiceMetricsObject,
-  ServiceOpsMetrics,
+  ServiceOpsMetrics, spanKinds,
 } from '../../../types/metrics';
 import prefixUrl from '../../../utils/prefix-url';
 import { convertToTimeUnit, convertTimeUnitToShortTerm, getSuitableTimeUnit } from '../../../utils/date';
@@ -45,7 +45,7 @@ import './index.css';
 import { getConfigValue } from '../../../utils/config/get-config';
 import {
   trackSearchOperation,
-  trackSelectService,
+  trackSelectService, trackSelectSpankind,
   trackSelectTimeframe,
   trackViewAllTraces,
 } from './index.track';
@@ -64,6 +64,7 @@ type TReduxProps = {
   servicesLoading: boolean;
   metrics: MetricsReduxState;
   selectedService: string;
+  selectedSpankind: spanKinds;
   selectedTimeFrame: number;
 };
 
@@ -94,6 +95,10 @@ export const timeFrameOptions = [
   { label: 'Last 24 hours', value: 24 * oneHourInMilliSeconds },
   { label: 'Last 2 days', value: 48 * oneHourInMilliSeconds },
 ];
+export const spankindOptions = [
+  { label: 'Server', value: 'server' },
+  { label: 'Client', value: 'client' },
+]
 
 // export for tests
 export const getLoopbackInterval = (interval: number) => {
@@ -166,9 +171,9 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
   }
 
   componentDidUpdate(prevProps: TProps) {
-    const { selectedService, selectedTimeFrame, services } = this.props;
+    const { selectedService, selectedSpankind, selectedTimeFrame, services } = this.props;
 
-    if (prevProps.selectedService !== selectedService || prevProps.selectedTimeFrame !== selectedTimeFrame) {
+    if (prevProps.selectedService !== selectedService || prevProps.selectedSpankind !== selectedSpankind || prevProps.selectedTimeFrame !== selectedTimeFrame) {
       this.fetchMetrics();
     } else if (!_isEqual(prevProps.services, services)) {
       this.fetchMetrics();
@@ -198,9 +203,11 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
     }
   }
 
+
   fetchMetrics() {
     const {
       selectedService,
+      selectedSpankind,
       selectedTimeFrame,
       fetchAllServiceMetrics,
       fetchAggregatedServiceMetrics,
@@ -210,6 +217,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
 
     if (currentService) {
       this.endTime = Date.now();
+      store.set('lastAtmSearchSpankind', selectedSpankind);
       store.set('lastAtmSearchTimeframe', selectedTimeFrame);
       store.set('lastAtmSearchService', this.getSelectedService());
 
@@ -219,6 +227,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
         lookback: selectedTimeFrame,
         step: 60 * 1000,
         ratePer: 10 * 60 * 1000,
+        spanKind: selectedSpankind,
       };
 
       fetchAllServiceMetrics(currentService, metricQueryPayload);
@@ -234,7 +243,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
   }
 
   render() {
-    const { services, metrics, selectedTimeFrame, servicesLoading } = this.props;
+    const { services, metrics, selectedSpankind, selectedTimeFrame, servicesLoading } = this.props;
     const serviceLatencies = metrics.serviceMetrics ? metrics.serviceMetrics.service_latencies : null;
     const displayTimeUnit = calcDisplayTimeUnit(serviceLatencies);
     const serviceErrorRate = metrics.serviceMetrics ? metrics.serviceMetrics.service_error_rate : null;
@@ -287,6 +296,31 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
                 ))}
               </Field>
             </Col>
+            <Col span={6}>
+              <h2 className="spankind-selector-header">Choose kind</h2>
+              <Field
+                  name="spankind"
+                  component={reduxFormFieldAdapter({ AntInputComponent: SearchableSelect })}
+                  placeholder="Select A Span Kind"
+                  onChange={(e, value: string) => {
+                    const { label } = spankindOptions.find(option => option.value === value)!;
+                    trackSelectSpankind(label);
+                  }}
+                  props={{
+                    className: 'spankind-selector',
+                    defaultValue: spankindOptions[0],
+                    value: selectedSpankind,
+                    disabled: metrics.operationMetricsLoading,
+                    loading: metrics.operationMetricsLoading,
+                  }}
+              >
+                {spankindOptions.map(option => (
+                    <Option key={option.value} value={option.value}>
+                      {option.label}
+                    </Option>
+                ))}
+              </Field>
+            </Col>
           </Row>
           <Row align="middle">
             <Col span={16}>
@@ -435,6 +469,8 @@ export function mapStateToProps(state: ReduxState): TReduxProps {
     servicesLoading: services.loading,
     metrics,
     selectedService: serviceFormSelector(state, 'service') || store.get('lastAtmSearchService'),
+    selectedSpankind:
+        serviceFormSelector(state, 'spankind') || store.get('lastAtmSearchSpankind') || 'server',
     selectedTimeFrame:
       serviceFormSelector(state, 'timeframe') || store.get('lastAtmSearchTimeframe') || oneHourInMilliSeconds,
   };
diff --git a/packages/jaeger-ui/src/types/metrics.tsx b/packages/jaeger-ui/src/types/metrics.tsx
index af694cf050..4ce9209e89 100644
--- a/packages/jaeger-ui/src/types/metrics.tsx
+++ b/packages/jaeger-ui/src/types/metrics.tsx
@@ -23,6 +23,8 @@ export type AvailableOpsMetrics =
   | 'service_operation_latencies'
   | 'service_operation_error_rate';
 
+export type spanKinds = 'unspecified' | 'internal' | 'server' | 'client' | 'producer' | 'consumer'
+
 export type MetricsAPIQueryParams = {
   quantile: number;
   groupByOperation?: boolean;
@@ -30,7 +32,7 @@ export type MetricsAPIQueryParams = {
   lookback?: number;
   step?: number;
   ratePer?: number;
-  spanKind?: 'unspecified' | 'internal' | 'server' | 'client' | 'producer' | 'consumer';
+  spanKind?: spanKinds;
 };
 
 export type LableObject = {
diff --git a/scripts/draft-release.py b/scripts/draft-release.py
old mode 100644
new mode 100755
index af0b4c962d..5e21990c7b
--- a/scripts/draft-release.py
+++ b/scripts/draft-release.py
@@ -1,18 +1,22 @@
+#!/usr/bin/env python3
+
+import argparse
 import re
 import subprocess
 
 
-release_header_pattern = re.compile(r"## (v[\d]+\.[\d]+\.[\d]) \([\d]{4}-[\d]{2}-[\d]{2}\)", flags=0)
+release_header_pattern = re.compile(r".*(\d+\.\d+\.\d) \(\d{4}-\d{2}-\d{2}\)", flags=0)
+underline_pattern = re.compile(r"^[-]+$", flags=0)
 
 
-def main():
+def main(title, repo):
     changelog_text, version = get_changelog()
     print(changelog_text)
     output_string = subprocess.check_output(
-        ["gh", "release", "create", version,
+        ["gh", "release", "create", f"v{version}",
          "--draft",
-         "--title", f"Jaeger UI {version}",
-         "--repo", "jaegertracing/jaeger-ui",
+         "--title", f"{title} v{version}",
+         "--repo", f"jaegertracing/{repo}",
          "-F", "-"],
         input=changelog_text,
         text=True,
@@ -27,21 +31,34 @@ def get_changelog():
     version = ""
     with open("CHANGELOG.md") as f:
         for line in f:
-            m = release_header_pattern.match(line)
+            release_header_match = release_header_pattern.match(line)
 
-            if m is not None:
+            if release_header_match is not None:
                 # Found the first release.
                 if not in_changelog_text:
                     in_changelog_text = True
-                    version = m.group(1)
+                    version = release_header_match.group(1)
                 else:
                     # Found the next release.
                     break
-            elif in_changelog_text:
-                changelog_text += line
+            else:
+                underline_match = underline_pattern.match(line)
+                if underline_match is not None:
+                    continue
+                elif in_changelog_text:
+                    changelog_text += line
 
     return changelog_text, version
 
 
 if __name__ == "__main__":
-    main()
+    parser = argparse.ArgumentParser(description='List changes based on git log for release notes.')
+
+    parser.add_argument('--title', type=str, default='Release',
+                        help='The title of the release. (default: Release)')
+    parser.add_argument('--repo', type=str, default='jaeger',
+                        help='The repository name where the draft release will be created. (default: jaeger)')
+
+    args = parser.parse_args()
+
+    main(args.title, args.repo)

From 7b86eca964f6d55eb89e44204651f75e1be48685 Mon Sep 17 00:00:00 2001
From: albertteoh <see.kwang.teoh@gmail.com>
Date: Sat, 2 Dec 2023 18:20:23 +1100
Subject: [PATCH 02/12] Rename single word to two words

Signed-off-by: albertteoh <see.kwang.teoh@gmail.com>
---
 .../components/Monitor/ServicesView/index.css |  4 +-
 .../Monitor/ServicesView/index.track.tsx      |  4 +-
 .../components/Monitor/ServicesView/index.tsx | 38 +++++++++----------
 3 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
index bdd04a2a9c..0e50c1c1bf 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
@@ -23,13 +23,13 @@ limitations under the License.
   font-weight: 800;
 }
 
-.spankind-selector-header {
+.span-kind-selector-header {
   padding-left: 10px;
   font-size: 18px;
   font-weight: 800;
 }
 
-.spankind-selector {
+.span-kind-selector {
   padding-left: 10px;
 }
 
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx
index ef9810929c..680e3aac08 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.tsx
@@ -18,13 +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_SPANKIND = `${SPM_CATEGORY_BASE}/select-spankind`;
+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_SPANKIND, spankind);
+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);
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index 24fef609c4..d11219271c 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -45,7 +45,7 @@ import './index.css';
 import { getConfigValue } from '../../../utils/config/get-config';
 import {
   trackSearchOperation,
-  trackSelectService, trackSelectSpankind,
+  trackSelectService, trackSelectSpanKind,
   trackSelectTimeframe,
   trackViewAllTraces,
 } from './index.track';
@@ -64,7 +64,7 @@ type TReduxProps = {
   servicesLoading: boolean;
   metrics: MetricsReduxState;
   selectedService: string;
-  selectedSpankind: spanKinds;
+  selectedSpanKind: spanKinds;
   selectedTimeFrame: number;
 };
 
@@ -95,7 +95,7 @@ export const timeFrameOptions = [
   { label: 'Last 24 hours', value: 24 * oneHourInMilliSeconds },
   { label: 'Last 2 days', value: 48 * oneHourInMilliSeconds },
 ];
-export const spankindOptions = [
+export const spanKindOptions = [
   { label: 'Server', value: 'server' },
   { label: 'Client', value: 'client' },
 ]
@@ -171,9 +171,9 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
   }
 
   componentDidUpdate(prevProps: TProps) {
-    const { selectedService, selectedSpankind, selectedTimeFrame, services } = this.props;
+    const { selectedService, selectedSpanKind, selectedTimeFrame, services } = this.props;
 
-    if (prevProps.selectedService !== selectedService || prevProps.selectedSpankind !== selectedSpankind || prevProps.selectedTimeFrame !== selectedTimeFrame) {
+    if (prevProps.selectedService !== selectedService || prevProps.selectedSpanKind !== selectedSpanKind || prevProps.selectedTimeFrame !== selectedTimeFrame) {
       this.fetchMetrics();
     } else if (!_isEqual(prevProps.services, services)) {
       this.fetchMetrics();
@@ -207,7 +207,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
   fetchMetrics() {
     const {
       selectedService,
-      selectedSpankind,
+      selectedSpanKind,
       selectedTimeFrame,
       fetchAllServiceMetrics,
       fetchAggregatedServiceMetrics,
@@ -217,7 +217,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
 
     if (currentService) {
       this.endTime = Date.now();
-      store.set('lastAtmSearchSpankind', selectedSpankind);
+      store.set('lastAtmSearchSpanKind', selectedSpanKind);
       store.set('lastAtmSearchTimeframe', selectedTimeFrame);
       store.set('lastAtmSearchService', this.getSelectedService());
 
@@ -227,7 +227,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
         lookback: selectedTimeFrame,
         step: 60 * 1000,
         ratePer: 10 * 60 * 1000,
-        spanKind: selectedSpankind,
+        spanKind: selectedSpanKind,
       };
 
       fetchAllServiceMetrics(currentService, metricQueryPayload);
@@ -243,7 +243,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
   }
 
   render() {
-    const { services, metrics, selectedSpankind, selectedTimeFrame, servicesLoading } = this.props;
+    const { services, metrics, selectedSpanKind, selectedTimeFrame, servicesLoading } = this.props;
     const serviceLatencies = metrics.serviceMetrics ? metrics.serviceMetrics.service_latencies : null;
     const displayTimeUnit = calcDisplayTimeUnit(serviceLatencies);
     const serviceErrorRate = metrics.serviceMetrics ? metrics.serviceMetrics.service_error_rate : null;
@@ -297,24 +297,24 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
               </Field>
             </Col>
             <Col span={6}>
-              <h2 className="spankind-selector-header">Choose kind</h2>
+              <h2 className="span-kind-selector-header">Choose kind</h2>
               <Field
-                  name="spankind"
+                  name="spanKind"
                   component={reduxFormFieldAdapter({ AntInputComponent: SearchableSelect })}
                   placeholder="Select A Span Kind"
                   onChange={(e, value: string) => {
-                    const { label } = spankindOptions.find(option => option.value === value)!;
-                    trackSelectSpankind(label);
+                    const { label } = spanKindOptions.find(option => option.value === value)!;
+                    trackSelectSpanKind(label);
                   }}
                   props={{
-                    className: 'spankind-selector',
-                    defaultValue: spankindOptions[0],
-                    value: selectedSpankind,
+                    className: 'span-kind-selector',
+                    defaultValue: spanKindOptions[0],
+                    value: selectedSpanKind,
                     disabled: metrics.operationMetricsLoading,
                     loading: metrics.operationMetricsLoading,
                   }}
               >
-                {spankindOptions.map(option => (
+                {spanKindOptions.map(option => (
                     <Option key={option.value} value={option.value}>
                       {option.label}
                     </Option>
@@ -469,8 +469,8 @@ export function mapStateToProps(state: ReduxState): TReduxProps {
     servicesLoading: services.loading,
     metrics,
     selectedService: serviceFormSelector(state, 'service') || store.get('lastAtmSearchService'),
-    selectedSpankind:
-        serviceFormSelector(state, 'spankind') || store.get('lastAtmSearchSpankind') || 'server',
+    selectedSpanKind:
+        serviceFormSelector(state, 'spanKind') || store.get('lastAtmSearchSpanKind') || 'server',
     selectedTimeFrame:
       serviceFormSelector(state, 'timeframe') || store.get('lastAtmSearchTimeframe') || oneHourInMilliSeconds,
   };

From 49c0401469a7396abbea035d84c8d17bf8d73338 Mon Sep 17 00:00:00 2001
From: albertteoh <see.kwang.teoh@gmail.com>
Date: Sat, 2 Dec 2023 22:39:23 +1100
Subject: [PATCH 03/12] Update snapshots and test

Signed-off-by: albertteoh <see.kwang.teoh@gmail.com>
---
 .../__snapshots__/index.test.js.snap          | 174 ++++++++++++++++++
 .../Monitor/ServicesView/index.test.js        |   1 +
 .../components/Monitor/ServicesView/index.tsx |   5 +-
 3 files changed, 179 insertions(+), 1 deletion(-)

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
index 512a5226cf..a2885d04f2 100644
--- 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
@@ -42,6 +42,64 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
           </Option>
         </Field>
       </Col>
+      <Col
+        span={6}
+      >
+        <h2
+          className="span-kind-selector-header"
+        >
+          Choose kind
+        </h2>
+        <Field
+          component={[Function]}
+          name="spanKind"
+          onChange={[Function]}
+          placeholder="Select A Span Kind"
+          props={
+            Object {
+              "className": "span-kind-selector",
+              "defaultValue": Object {
+                "label": "Client",
+                "value": "client",
+              },
+              "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"
@@ -446,6 +504,64 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
           }
         />
       </Col>
+      <Col
+        span={6}
+      >
+        <h2
+          className="span-kind-selector-header"
+        >
+          Choose kind
+        </h2>
+        <Field
+          component={[Function]}
+          name="spanKind"
+          onChange={[Function]}
+          placeholder="Select A Span Kind"
+          props={
+            Object {
+              "className": "span-kind-selector",
+              "defaultValue": Object {
+                "label": "Client",
+                "value": "client",
+              },
+              "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"
@@ -769,6 +885,64 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
           }
         />
       </Col>
+      <Col
+        span={6}
+      >
+        <h2
+          className="span-kind-selector-header"
+        >
+          Choose kind
+        </h2>
+        <Field
+          component={[Function]}
+          name="spanKind"
+          onChange={[Function]}
+          placeholder="Select A Span Kind"
+          props={
+            Object {
+              "className": "span-kind-selector",
+              "defaultValue": Object {
+                "label": "Client",
+                "value": "client",
+              },
+              "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.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
index 0442148dde..e19d2797c8 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
@@ -361,6 +361,7 @@ describe('mapStateToProps()', () => {
       metrics: originInitialState,
       services: [],
       selectedService: 's1',
+      selectedSpanKind: 'server',
       selectedTimeFrame: 3600000,
     });
   });
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index d11219271c..ab8b7c2eed 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -96,8 +96,11 @@ export const timeFrameOptions = [
   { label: 'Last 2 days', value: 48 * oneHourInMilliSeconds },
 ];
 export const spanKindOptions = [
-  { label: 'Server', value: 'server' },
   { label: 'Client', value: 'client' },
+  { label: 'Server', value: 'server' },
+  { label: 'Internal', value: 'internal' },
+  { label: 'Producer', value: 'producer' },
+  { label: 'Consumer', value: 'consumer' },
 ]
 
 // export for tests

From c6bade92d8ec19164adeb2278758b45752b158d9 Mon Sep 17 00:00:00 2001
From: albertteoh <see.kwang.teoh@gmail.com>
Date: Sat, 2 Dec 2023 22:44:47 +1100
Subject: [PATCH 04/12] Fix import formatting

Signed-off-by: albertteoh <see.kwang.teoh@gmail.com>
---
 .../jaeger-ui/src/components/Monitor/ServicesView/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index ab8b7c2eed..0b5248bac0 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -36,7 +36,8 @@ import {
   MetricsReduxState,
   Points,
   ServiceMetricsObject,
-  ServiceOpsMetrics, spanKinds,
+  ServiceOpsMetrics,
+  spanKinds,
 } from '../../../types/metrics';
 import prefixUrl from '../../../utils/prefix-url';
 import { convertToTimeUnit, convertTimeUnitToShortTerm, getSuitableTimeUnit } from '../../../utils/date';
@@ -45,7 +46,8 @@ import './index.css';
 import { getConfigValue } from '../../../utils/config/get-config';
 import {
   trackSearchOperation,
-  trackSelectService, trackSelectSpanKind,
+  trackSelectService,
+  trackSelectSpanKind,
   trackSelectTimeframe,
   trackViewAllTraces,
 } from './index.track';

From 3cb56053335190a25eac2a7bd240c9b730f77f2e Mon Sep 17 00:00:00 2001
From: albertteoh <see.kwang.teoh@gmail.com>
Date: Sat, 2 Dec 2023 23:04:34 +1100
Subject: [PATCH 05/12] yarn prettier

Signed-off-by: albertteoh <see.kwang.teoh@gmail.com>
---
 .../components/Monitor/ServicesView/index.tsx | 45 ++++++++++---------
 packages/jaeger-ui/src/types/metrics.tsx      |  2 +-
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index 0b5248bac0..b7d0166112 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -103,7 +103,7 @@ export const spanKindOptions = [
   { label: 'Internal', value: 'internal' },
   { label: 'Producer', value: 'producer' },
   { label: 'Consumer', value: 'consumer' },
-]
+];
 
 // export for tests
 export const getLoopbackInterval = (interval: number) => {
@@ -178,7 +178,11 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
   componentDidUpdate(prevProps: TProps) {
     const { selectedService, selectedSpanKind, selectedTimeFrame, services } = this.props;
 
-    if (prevProps.selectedService !== selectedService || prevProps.selectedSpanKind !== selectedSpanKind || prevProps.selectedTimeFrame !== selectedTimeFrame) {
+    if (
+      prevProps.selectedService !== selectedService ||
+      prevProps.selectedSpanKind !== selectedSpanKind ||
+      prevProps.selectedTimeFrame !== selectedTimeFrame
+    ) {
       this.fetchMetrics();
     } else if (!_isEqual(prevProps.services, services)) {
       this.fetchMetrics();
@@ -208,7 +212,6 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
     }
   }
 
-
   fetchMetrics() {
     const {
       selectedService,
@@ -304,25 +307,25 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
             <Col span={6}>
               <h2 className="span-kind-selector-header">Choose kind</h2>
               <Field
-                  name="spanKind"
-                  component={reduxFormFieldAdapter({ AntInputComponent: SearchableSelect })}
-                  placeholder="Select A Span Kind"
-                  onChange={(e, value: string) => {
-                    const { label } = spanKindOptions.find(option => option.value === value)!;
-                    trackSelectSpanKind(label);
-                  }}
-                  props={{
-                    className: 'span-kind-selector',
-                    defaultValue: spanKindOptions[0],
-                    value: selectedSpanKind,
-                    disabled: metrics.operationMetricsLoading,
-                    loading: metrics.operationMetricsLoading,
-                  }}
+                name="spanKind"
+                component={reduxFormFieldAdapter({ AntInputComponent: SearchableSelect })}
+                placeholder="Select A Span Kind"
+                onChange={(e, value: string) => {
+                  const { label } = spanKindOptions.find(option => option.value === value)!;
+                  trackSelectSpanKind(label);
+                }}
+                props={{
+                  className: 'span-kind-selector',
+                  defaultValue: spanKindOptions[0],
+                  value: selectedSpanKind,
+                  disabled: metrics.operationMetricsLoading,
+                  loading: metrics.operationMetricsLoading,
+                }}
               >
                 {spanKindOptions.map(option => (
-                    <Option key={option.value} value={option.value}>
-                      {option.label}
-                    </Option>
+                  <Option key={option.value} value={option.value}>
+                    {option.label}
+                  </Option>
                 ))}
               </Field>
             </Col>
@@ -475,7 +478,7 @@ export function mapStateToProps(state: ReduxState): TReduxProps {
     metrics,
     selectedService: serviceFormSelector(state, 'service') || store.get('lastAtmSearchService'),
     selectedSpanKind:
-        serviceFormSelector(state, 'spanKind') || store.get('lastAtmSearchSpanKind') || 'server',
+      serviceFormSelector(state, 'spanKind') || store.get('lastAtmSearchSpanKind') || 'server',
     selectedTimeFrame:
       serviceFormSelector(state, 'timeframe') || store.get('lastAtmSearchTimeframe') || oneHourInMilliSeconds,
   };
diff --git a/packages/jaeger-ui/src/types/metrics.tsx b/packages/jaeger-ui/src/types/metrics.tsx
index 4ce9209e89..f616a86c0b 100644
--- a/packages/jaeger-ui/src/types/metrics.tsx
+++ b/packages/jaeger-ui/src/types/metrics.tsx
@@ -23,7 +23,7 @@ export type AvailableOpsMetrics =
   | 'service_operation_latencies'
   | 'service_operation_error_rate';
 
-export type spanKinds = 'unspecified' | 'internal' | 'server' | 'client' | 'producer' | 'consumer'
+export type spanKinds = 'unspecified' | 'internal' | 'server' | 'client' | 'producer' | 'consumer';
 
 export type MetricsAPIQueryParams = {
   quantile: number;

From 07e3c26244e78643a3d194cf38693988d2e7639c Mon Sep 17 00:00:00 2001
From: Albert Teoh <albert@packsmith.io>
Date: Sun, 3 Dec 2023 07:55:05 +1100
Subject: [PATCH 06/12] Remove redundant 'Choose' from title

Signed-off-by: Albert Teoh <albert@packsmith.io>
---
 .../ServicesView/__snapshots__/index.test.js.snap    | 12 ++++++------
 .../src/components/Monitor/ServicesView/index.tsx    |  4 ++--
 2 files changed, 8 insertions(+), 8 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
index a2885d04f2..17a1837ea4 100644
--- 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]}
@@ -48,7 +48,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
         <h2
           className="span-kind-selector-header"
         >
-          Choose kind
+          Span Kind
         </h2>
         <Field
           component={[Function]}
@@ -487,7 +487,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
         <h2
           className="service-selector-header"
         >
-          Choose service
+          Service
         </h2>
         <Field
           component={[Function]}
@@ -510,7 +510,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
         <h2
           className="span-kind-selector-header"
         >
-          Choose kind
+          Span Kind
         </h2>
         <Field
           component={[Function]}
@@ -868,7 +868,7 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
         <h2
           className="service-selector-header"
         >
-          Choose service
+          Service
         </h2>
         <Field
           component={[Function]}
@@ -891,7 +891,7 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
         <h2
           className="span-kind-selector-header"
         >
-          Choose kind
+          Span Kind
         </h2>
         <Field
           component={[Function]}
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index b7d0166112..967131352f 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -284,7 +284,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
         <div className="service-view-container">
           <Row>
             <Col span={6}>
-              <h2 className="service-selector-header">Choose service</h2>
+              <h2 className="service-selector-header">Service</h2>
               <Field
                 onChange={(e, newValue: string) => trackSelectService(newValue)}
                 name="service"
@@ -305,7 +305,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
               </Field>
             </Col>
             <Col span={6}>
-              <h2 className="span-kind-selector-header">Choose kind</h2>
+              <h2 className="span-kind-selector-header">Span Kind</h2>
               <Field
                 name="spanKind"
                 component={reduxFormFieldAdapter({ AntInputComponent: SearchableSelect })}

From 46989deae9944f243b7c267fe197c64e23246dc7 Mon Sep 17 00:00:00 2001
From: Albert Teoh <albert@packsmith.io>
Date: Sun, 3 Dec 2023 07:56:58 +1100
Subject: [PATCH 07/12] Default to 'server'

Signed-off-by: Albert Teoh <albert@packsmith.io>
---
 .../ServicesView/__snapshots__/index.test.js.snap | 15 +++------------
 .../src/components/Monitor/ServicesView/index.tsx |  2 +-
 2 files changed, 4 insertions(+), 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
index 17a1837ea4..498d0c9169 100644
--- 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
@@ -58,10 +58,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
           props={
             Object {
               "className": "span-kind-selector",
-              "defaultValue": Object {
-                "label": "Client",
-                "value": "client",
-              },
+              "defaultValue": "server",
               "disabled": null,
               "loading": null,
               "value": "server",
@@ -520,10 +517,7 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
           props={
             Object {
               "className": "span-kind-selector",
-              "defaultValue": Object {
-                "label": "Client",
-                "value": "client",
-              },
+              "defaultValue": "server",
               "disabled": null,
               "loading": null,
               "value": "server",
@@ -901,10 +895,7 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
           props={
             Object {
               "className": "span-kind-selector",
-              "defaultValue": Object {
-                "label": "Client",
-                "value": "client",
-              },
+              "defaultValue": "server",
               "disabled": null,
               "loading": null,
               "value": "server",
diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
index 967131352f..8ce0b037b6 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -316,7 +316,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
                 }}
                 props={{
                   className: 'span-kind-selector',
-                  defaultValue: spanKindOptions[0],
+                  defaultValue: 'server',
                   value: selectedSpanKind,
                   disabled: metrics.operationMetricsLoading,
                   loading: metrics.operationMetricsLoading,

From ccd6cc76fc4f4d34178978ce7b3a4f03aaab0182 Mon Sep 17 00:00:00 2001
From: Albert Teoh <albert@packsmith.io>
Date: Sun, 3 Dec 2023 08:00:03 +1100
Subject: [PATCH 08/12] Remove optionality in API query param fields

Signed-off-by: Albert Teoh <albert@packsmith.io>
---
 packages/jaeger-ui/src/types/metrics.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/jaeger-ui/src/types/metrics.tsx b/packages/jaeger-ui/src/types/metrics.tsx
index f616a86c0b..bef57b0d58 100644
--- a/packages/jaeger-ui/src/types/metrics.tsx
+++ b/packages/jaeger-ui/src/types/metrics.tsx
@@ -28,11 +28,11 @@ export type spanKinds = 'unspecified' | 'internal' | 'server' | 'client' | 'prod
 export type MetricsAPIQueryParams = {
   quantile: number;
   groupByOperation?: boolean;
-  endTs?: number;
-  lookback?: number;
-  step?: number;
-  ratePer?: number;
-  spanKind?: spanKinds;
+  endTs: number;
+  lookback: number;
+  step: number;
+  ratePer: number;
+  spanKind: spanKinds;
 };
 
 export type LableObject = {

From 62a71dae01304c159731e6f54661db13c1dfeff9 Mon Sep 17 00:00:00 2001
From: Albert Teoh <albert@packsmith.io>
Date: Sun, 3 Dec 2023 15:27:43 +1100
Subject: [PATCH 09/12] Add behavioural tests for spanKind selector

Signed-off-by: Albert Teoh <albert@packsmith.io>
---
 .../src/components/Monitor/ServicesView/index.test.js    | 8 +++++++-
 .../components/Monitor/ServicesView/index.track.test.js  | 9 ++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
index e19d2797c8..ee3823f476 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
@@ -20,7 +20,7 @@ import {
   mapDispatchToProps,
   getLoopbackInterval,
   yAxisTickFormat,
-  timeFrameOptions,
+  timeFrameOptions, spanKindOptions,
 } from '.';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import MonitorATMEmptyState from '../EmptyState';
@@ -292,10 +292,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 +310,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 +321,7 @@ describe('<MonitorATMServicesView>', () => {
 
     trackSelectServiceSpy.mockReset();
     trackViewAllTracesSpy.mockReset();
+    trackSelectSpanKindSpy.mockReset();
     trackSelectTimeframeSpy.mockReset();
     trackSearchOperationSpy.mockReset();
   });
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
index 515a7a58f8..0e6706da04 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.track.test.js
@@ -19,9 +19,10 @@ import {
   CATEGORY_SELECT_TIMEFRAME,
   CATEGORY_VIEW_ALL_TRACES,
   trackSelectService,
+  trackSelectSpanKind,
   trackSelectTimeframe,
   trackViewAllTraces,
-  trackSearchOperation,
+  trackSearchOperation, CATEGORY_SELECT_SPAN_KIND,
 } from './index.track';
 
 describe('ServicesView tracking', () => {
@@ -46,6 +47,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);

From c1ed381777b10083501a3f9da7a83ccdb0f8314f Mon Sep 17 00:00:00 2001
From: Albert Teoh <albert@packsmith.io>
Date: Sun, 3 Dec 2023 15:29:30 +1100
Subject: [PATCH 10/12] Fix import formatting

Signed-off-by: Albert Teoh <albert@packsmith.io>
---
 .../src/components/Monitor/ServicesView/index.track.test.js    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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
index 0e6706da04..c784444f16 100644
--- 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,11 +18,12 @@ import {
   CATEGORY_SELECT_SERVICE,
   CATEGORY_SELECT_TIMEFRAME,
   CATEGORY_VIEW_ALL_TRACES,
+  CATEGORY_SELECT_SPAN_KIND,
   trackSelectService,
   trackSelectSpanKind,
   trackSelectTimeframe,
   trackViewAllTraces,
-  trackSearchOperation, CATEGORY_SELECT_SPAN_KIND,
+  trackSearchOperation,
 } from './index.track';
 
 describe('ServicesView tracking', () => {

From 71c43af4174de852f389fc0605ba35318b0f8ba7 Mon Sep 17 00:00:00 2001
From: Albert Teoh <albert@packsmith.io>
Date: Sun, 3 Dec 2023 15:30:57 +1100
Subject: [PATCH 11/12] Fix import formatting

Signed-off-by: Albert Teoh <albert@packsmith.io>
---
 .../src/components/Monitor/ServicesView/index.test.js          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
index ee3823f476..189b5d8261 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
@@ -20,7 +20,8 @@ import {
   mapDispatchToProps,
   getLoopbackInterval,
   yAxisTickFormat,
-  timeFrameOptions, spanKindOptions,
+  timeFrameOptions,
+  spanKindOptions,
 } from '.';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import MonitorATMEmptyState from '../EmptyState';

From ff1ab7bf45dfcde9e1642eb2362dd5052d4bd6ae Mon Sep 17 00:00:00 2001
From: Albert Teoh <albert@packsmith.io>
Date: Sun, 3 Dec 2023 15:33:31 +1100
Subject: [PATCH 12/12] yarn prettier

Signed-off-by: Albert Teoh <albert@packsmith.io>
---
 .../jaeger-ui/src/components/Monitor/ServicesView/index.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
index 189b5d8261..48c12ad90b 100644
--- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
+++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js
@@ -311,7 +311,7 @@ describe('<MonitorATMServicesView>', () => {
     wrapper.find('Field').first().simulate('change', null, newValue);
     expect(trackSelectServiceSpy).toHaveBeenCalledWith(newValue);
 
-    wrapper.find({ name: "spanKind" }).simulate('change', null, spanKindOption.value);
+    wrapper.find({ name: 'spanKind' }).simulate('change', null, spanKindOption.value);
     expect(trackSelectSpanKindSpy).toHaveBeenCalledWith(spanKindOption.label);
 
     wrapper.find('Field').last().simulate('change', null, timeFrameOption.value);