From e1613fd39e4a01f410b57f2f33bf277c747c1e33 Mon Sep 17 00:00:00 2001 From: Gabriel Bernal Date: Wed, 13 Jul 2022 11:00:27 +0200 Subject: [PATCH 1/4] Add more time ranges to SPM Add 5,15 and 30 minutes time ranges to the monitor tab Signed-off-by: Gabriel Bernal --- .../__snapshots__/index.test.js.snap | 48 ++++++++++++++++--- .../components/Monitor/ServicesView/index.css | 2 +- .../components/Monitor/ServicesView/index.tsx | 4 ++ 3 files changed, 47 insertions(+), 7 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 1cfd5b5abb..01bae17e70 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 @@ -79,11 +79,23 @@ exports[` ATM snapshot test 1`] = ` "className": "select-a-timeframe-input", "clearable": false, "defaultValue": Object { - "label": "Last Hour", - "value": 3600000, + "label": "Last 5 minutes", + "value": 300000, }, "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, @@ -472,11 +484,23 @@ exports[` ATM snapshot test with no metrics 1`] = ` "className": "select-a-timeframe-input", "clearable": false, "defaultValue": Object { - "label": "Last Hour", - "value": 3600000, + "label": "Last 5 minutes", + "value": 300000, }, "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, @@ -784,11 +808,23 @@ exports[` render one service latency 1`] = ` "className": "select-a-timeframe-input", "clearable": false, "defaultValue": Object { - "label": "Last Hour", - "value": 3600000, + "label": "Last 5 minutes", + "value": 300000, }, "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 index f04b2eba0c..402be9b896 100644 --- 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 index c1ac3f8f71..c9ab6f713f 100644 --- 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 fiveMinutesInMilliSeconds = 300000; export const timeFrameOptions = [ + { label: 'Last 5 minutes', value: fiveMinutesInMilliSeconds }, + { label: 'Last 15 minutes', value: fiveMinutesInMilliSeconds * 3 }, + { label: 'Last 30 minutes', value: fiveMinutesInMilliSeconds * 6 }, { label: 'Last Hour', value: oneHourInMilliSeconds }, { label: 'Last 2 hours', value: 2 * oneHourInMilliSeconds }, { label: 'Last 6 hours', value: 6 * oneHourInMilliSeconds }, From 084bbe15872900b7b0a03ea205be3e05dbbd8aab Mon Sep 17 00:00:00 2001 From: Gabriel Bernal Date: Wed, 13 Jul 2022 11:09:55 +0200 Subject: [PATCH 2/4] 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 --- .../components/SearchTracePage/SearchForm.js | 12 ++++++++++++ .../SearchTracePage/SearchForm.test.js | 17 +++++++++++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js index ee3e487f2c..150c2a7f8c 100644 --- 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 index fd109de365..72a9f7982e 100644 --- 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); From c4619126a66fa556f36aefeff943c9b222d522a8 Mon Sep 17 00:00:00 2001 From: Gabriel Bernal Date: Thu, 14 Jul 2022 10:44:22 +0200 Subject: [PATCH 3/4] refactor time frame options and fix default value Signed-off-by: Gabriel Bernal --- .../ServicesView/__snapshots__/index.test.js.snap | 12 ++++++------ .../src/components/Monitor/ServicesView/index.tsx | 10 +++++----- 2 files changed, 11 insertions(+), 11 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 01bae17e70..0f3ab5c305 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 @@ -79,8 +79,8 @@ exports[` ATM snapshot test 1`] = ` "className": "select-a-timeframe-input", "clearable": false, "defaultValue": Object { - "label": "Last 5 minutes", - "value": 300000, + "label": "Last Hour", + "value": 3600000, }, "disabled": null, "options": Array [ @@ -484,8 +484,8 @@ exports[` ATM snapshot test with no metrics 1`] = ` "className": "select-a-timeframe-input", "clearable": false, "defaultValue": Object { - "label": "Last 5 minutes", - "value": 300000, + "label": "Last Hour", + "value": 3600000, }, "disabled": null, "options": Array [ @@ -808,8 +808,8 @@ exports[` render one service latency 1`] = ` "className": "select-a-timeframe-input", "clearable": false, "defaultValue": Object { - "label": "Last 5 minutes", - "value": 300000, + "label": "Last Hour", + "value": 3600000, }, "disabled": null, "options": Array [ diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx index c9ab6f713f..e5cfe56b0f 100644 --- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx +++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx @@ -86,11 +86,11 @@ const AdaptedVirtualSelect = reduxFormFieldAdapter({ const serviceFormSelector = formValueSelector('serviceForm'); const oneHourInMilliSeconds = 3600000; -const fiveMinutesInMilliSeconds = 300000; +const oneMinuteInMilliSeconds = 60000; export const timeFrameOptions = [ - { label: 'Last 5 minutes', value: fiveMinutesInMilliSeconds }, - { label: 'Last 15 minutes', value: fiveMinutesInMilliSeconds * 3 }, - { label: 'Last 30 minutes', value: fiveMinutesInMilliSeconds * 6 }, + { label: 'Last 5 minutes', value: oneMinuteInMilliSeconds * 5 }, + { label: 'Last 15 minutes', value: oneMinuteInMilliSeconds * 15 }, + { label: 'Last 30 minutes', value: oneMinuteInMilliSeconds * 30 }, { label: 'Last Hour', value: oneHourInMilliSeconds }, { label: 'Last 2 hours', value: 2 * oneHourInMilliSeconds }, { label: 'Last 6 hours', value: 6 * oneHourInMilliSeconds }, @@ -315,7 +315,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent Date: Thu, 14 Jul 2022 20:24:57 +0200 Subject: [PATCH 4/4] make timeframe options readable and consistent Signed-off-by: Gabriel Bernal --- .../jaeger-ui/src/components/Monitor/ServicesView/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx index e5cfe56b0f..7cdac180fb 100644 --- a/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx +++ b/packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx @@ -88,9 +88,9 @@ const serviceFormSelector = formValueSelector('serviceForm'); const oneHourInMilliSeconds = 3600000; const oneMinuteInMilliSeconds = 60000; export const timeFrameOptions = [ - { label: 'Last 5 minutes', value: oneMinuteInMilliSeconds * 5 }, - { label: 'Last 15 minutes', value: oneMinuteInMilliSeconds * 15 }, - { label: 'Last 30 minutes', value: oneMinuteInMilliSeconds * 30 }, + { 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 },