Resolve comments

jaegertracing · Oct 28, 2021 · a234513 · a234513
1 parent a4ba580
commit a234513
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 79 deletions.
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/index.test.js.snap b/packages/jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/index.test.js.snap
@@ -21,6 +21,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
         placeholder="Select A Service"
         props={
           Object {
+            "className": "select-a-service-input",
             "clearable": false,
             "disabled": null,
             "options": Array [
@@ -34,10 +35,6 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
               },
             ],
             "required": true,
-            "style": Object {
-              "fontSize": 14,
-              "width": "100%",
-            },
             "value": "s1",
           }
         }
@@ -53,7 +50,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
       <p
         className="operations-metrics-text"
       >
-        Aggregation of all "
+        95th percentile aggregation of all "
         s1
         " metrics in selected timeframe.
          
@@ -75,6 +72,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
         placeholder="Select A Timeframe"
         props={
           Object {
+            "className": "select-a-timeframe-input",
             "clearable": false,
             "defaultValue": Object {
               "label": "Last Hour",
@@ -108,10 +106,6 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
               },
             ],
             "required": true,
-            "style": Object {
-              "fontSize": 14,
-              "width": 128,
-            },
             "value": 3600000,
           }
         }
@@ -176,7 +170,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
             },
           ]
         }
-        name="Latency"
+        name="Latency, ms"
         showHorizontalLines={true}
         showLegend={true}
         width={300}
@@ -207,7 +201,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
             "serviceName": "cartservice",
           }
         }
-        name="Error rate %"
+        name="Error rate, %"
         width={300}
         yDomain={
           Array [
@@ -242,7 +236,7 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
             "serviceName": "cartservice",
           }
         }
-        name="Requests"
+        name="Requests rate, req/s"
         showHorizontalLines={true}
         width={300}
       />
@@ -261,44 +255,29 @@ exports[`<MonitoringATMServicesView> ATM snapshot test 1`] = `
         <h2
           className="table-header"
         >
-          Operations under 
+          95th percentile operations metrics under 
           s1
         </h2>
          
         <span
-          style={
-            Object {
-              "fontSize": 14,
-              "fontWeight": 400,
-            }
-          }
+          className="over-the-last"
         >
-          Over the last 
-           hour
+          Over the 
+          last hour
         </span>
       </Col>
       <Col
+        className="select-operation-column"
         span={8}
-        style={
-          Object {
-            "display": "inline-flex",
-            "justifyContent": "flex-end",
-          }
-        }
       >
         <Search
+          className="select-operation-input"
           disabled={false}
           enterButton={false}
           inputPrefixCls="ant-input"
           onChange={[Function]}
           placeholder="Search operation"
           prefixCls="ant-input-search"
-          style={
-            Object {
-              "fontSize": 14,
-              "width": 218,
-            }
-          }
           value=""
         />
       </Col>

diff --git a/.../jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/serviceGraph.test.js.snap b/.../jaeger-ui/src/components/Monitoring/ServicesView/__snapshots__/serviceGraph.test.js.snap
@@ -161,7 +161,7 @@ exports[`<ServiceGraph> Base graph should be displayed  1`] = `
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />
@@ -275,7 +275,7 @@ exports[`<ServiceGraph> Base graph with custom color should be displayed 1`] = `
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />
@@ -393,7 +393,7 @@ exports[`<ServiceGraph> Base graph with horizontal lines should be displayed 1`]
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />
@@ -507,7 +507,7 @@ exports[`<ServiceGraph> Base graph with legends should be displayed 1`] = `
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />
@@ -642,7 +642,7 @@ exports[`<ServiceGraph> Crosshair map test 1`] = `
       <div
         style={
           Object {
-            "width": 70,
+            "width": 140,
           }
         }
       />

diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.css b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.css
@@ -33,6 +33,8 @@ limitations under the License.
 .timeframe-selector {
   display: inline-flex;
   justify-content: flex-end;
+  position: absolute;
+  bottom: 14px;
 }
 
 .operation-table-block {
@@ -45,3 +47,28 @@ limitations under the License.
   font-size: 18;
   font-weight: 700;
 }
+
+.select-a-service-input {
+  font-size: 14px;
+  width: 100%;
+}
+
+.select-a-timeframe-input {
+  font-size: 14px;
+  width: 128px;
+}
+
+.over-the-last {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.select-operation-column {
+  display: inline-flex;
+  justify-content: flex-end;
+}
+
+.select-operation-input {
+  font-size: 14px;
+  width: 218px;
+}
diff --git a/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js b/packages/jaeger-ui/src/components/Monitoring/ServicesView/index.test.js
@@ -18,6 +18,7 @@ import {
   MonitoringATMServicesViewImpl as MonitoringATMServicesView,
   mapStateToProps,
   mapDispatchToProps,
+  getLoopbackInterval,
 } from '.';
 import LoadingIndicator from '../../common/LoadingIndicator';
 import MonitoringATMEmptyState from '../EmptyState';
@@ -74,6 +75,7 @@ describe('<MonitoringATMServicesView>', () => {
     expect(mockFetchAggregatedServiceMetrics).not.toHaveBeenCalled();
     wrapper.setProps({
       services: ['s1', 's2'],
+      selectedService: 's1',
       metrics: {
         ...originInitialState,
         serviceMetrics,
@@ -160,3 +162,17 @@ describe('mapDispatchToProps()', () => {
     });
   });
 });
+
+describe('getLoopbackInterval()', () => {
+  it('undefined value', () => {
+    expect(getLoopbackInterval()).toBe('');
+  });
+
+  it('timeframe NOT exists', () => {
+    expect(getLoopbackInterval(111)).toBe('');
+  });
+
+  it('timeframe exists', () => {
+    expect(getLoopbackInterval(48 * 3600000)).toBe('last 2 days');
+  });
+});