Add more time ranges (#971)

* Add more time ranges to SPM Add 5,15 and 30 minutes time ranges to the monitor tab Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * Add more time ranges to search traces form Add 5,15 and 30 minutes time ranges to the traces search form Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * refactor time frame options and fix default value Signed-off-by: Gabriel Bernal <gbernal@redhat.com> * make timeframe options readable and consistent Signed-off-by: Gabriel Bernal <gbernal@redhat.com>
jaegertracing · Jul 14, 2022 · d39db46 · d39db46
1 parent dc936a6
commit d39db46
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 4 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
@@ -84,6 +84,18 @@ exports[`<MonitorATMServicesView> ATM snapshot test 1`] = `
               },
               "disabled": null,
               "options": Array [
+                Object {
+                  "label": "Last 5 minutes",
+                  "value": 300000,
+                },
+                Object {
+                  "label": "Last 15 minutes",
+                  "value": 900000,
+                },
+                Object {
+                  "label": "Last 30 minutes",
+                  "value": 1800000,
+                },
                 Object {
                   "label": "Last Hour",
                   "value": 3600000,
@@ -477,6 +489,18 @@ exports[`<MonitorATMServicesView> ATM snapshot test with no metrics 1`] = `
               },
               "disabled": null,
               "options": Array [
+                Object {
+                  "label": "Last 5 minutes",
+                  "value": 300000,
+                },
+                Object {
+                  "label": "Last 15 minutes",
+                  "value": 900000,
+                },
+                Object {
+                  "label": "Last 30 minutes",
+                  "value": 1800000,
+                },
                 Object {
                   "label": "Last Hour",
                   "value": 3600000,
@@ -789,6 +813,18 @@ exports[`<MonitorATMServicesView> render one service latency 1`] = `
               },
               "disabled": null,
               "options": Array [
+                Object {
+                  "label": "Last 5 minutes",
+                  "value": 300000,
+                },
+                Object {
+                  "label": "Last 15 minutes",
+                  "value": 900000,
+                },
+                Object {
+                  "label": "Last 30 minutes",
+                  "value": 1800000,
+                },
                 Object {
                   "label": "Last Hour",
                   "value": 3600000,

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.css
@@ -55,7 +55,7 @@ limitations under the License.
 
 .select-a-timeframe-input {
   font-size: 14px;
-  width: 128px;
+  width: 135px;
 }
 
 .over-the-last {

diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
@@ -86,7 +86,11 @@ const AdaptedVirtualSelect = reduxFormFieldAdapter({
 
 const serviceFormSelector = formValueSelector('serviceForm');
 const oneHourInMilliSeconds = 3600000;
+const oneMinuteInMilliSeconds = 60000;
 export const timeFrameOptions = [
+  { label: 'Last 5 minutes', value: 5 * oneMinuteInMilliSeconds },
+  { label: 'Last 15 minutes', value: 15 * oneMinuteInMilliSeconds },
+  { label: 'Last 30 minutes', value: 30 * oneMinuteInMilliSeconds },
   { label: 'Last Hour', value: oneHourInMilliSeconds },
   { label: 'Last 2 hours', value: 2 * oneHourInMilliSeconds },
   { label: 'Last 6 hours', value: 6 * oneHourInMilliSeconds },
@@ -311,7 +315,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
                 }}
                 props={{
                   className: 'select-a-timeframe-input',
-                  defaultValue: timeFrameOptions[0],
+                  defaultValue: timeFrameOptions[3],
                   value: selectedTimeFrame,
                   disabled: metrics.operationMetricsLoading,
                   clearable: false,

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js
@@ -83,6 +83,18 @@ export function lookbackToTimestamp(lookback, from) {
 }
 
 const lookbackOptions = [
+  {
+    label: '5 Minutes',
+    value: '5m',
+  },
+  {
+    label: '15 Minutes',
+    value: '15m',
+  },
+  {
+    label: '30 Minutes',
+    value: '30m',
+  },
   {
     label: 'Hour',
     value: '1h',

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.test.js
@@ -175,6 +175,18 @@ describe('lookback utils', () => {
 
   describe('optionsWithinMaxLookback', () => {
     const threeHoursOfExpectedOptions = [
+      {
+        label: '5 Minutes',
+        value: '5m',
+      },
+      {
+        label: '15 Minutes',
+        value: '15m',
+      },
+      {
+        label: '30 Minutes',
+        value: '30m',
+      },
       {
         label: 'Hour',
         value: '1h',
@@ -198,7 +210,7 @@ describe('lookback utils', () => {
     });
 
     it('returns options within config.search.maxLookback', () => {
-      const configValue = threeHoursOfExpectedOptions[2];
+      const configValue = threeHoursOfExpectedOptions[threeHoursOfExpectedOptions.length - 1];
       const options = optionsWithinMaxLookback(configValue);
 
       expect(options.length).toBe(threeHoursOfExpectedOptions.length);
@@ -228,7 +240,8 @@ describe('lookback utils', () => {
         label: '180 minutes is equivalent to 3 hours',
         value: '180m',
       };
-      const expectedOptions = [threeHoursOfExpectedOptions[0], threeHoursOfExpectedOptions[1], configValue];
+
+      const expectedOptions = [...threeHoursOfExpectedOptions.slice(0, -1), configValue];
       const options = optionsWithinMaxLookback(configValue);
 
       expect(options.length).toBe(expectedOptions.length);