From 7696bbaeef872a4cbe8508d18cb4c979e80c749c Mon Sep 17 00:00:00 2001 From: Timmy Luong Date: Wed, 14 Jul 2021 17:16:26 -0700 Subject: [PATCH 1/2] fix: separate prefix and suffix from tickPrefix and tickSuffix --- cypress/e2e/shared/explorer.test.ts | 15 +++--- src/visualization/types/Gauge/Gauge.tsx | 15 ++---- src/visualization/types/Gauge/options.tsx | 57 +++++++---------------- 3 files changed, 31 insertions(+), 56 deletions(-) diff --git a/cypress/e2e/shared/explorer.test.ts b/cypress/e2e/shared/explorer.test.ts index f5b637dabd..634d472111 100644 --- a/cypress/e2e/shared/explorer.test.ts +++ b/cypress/e2e/shared/explorer.test.ts @@ -207,7 +207,8 @@ describe('DataExplorer', () => { cy.getByTestID(`view-type--gauge`).click() cy.getByTestID('cog-cell--button').click() }) - it('can add prefix and suffix values', () => { + + it('can add prefix and suffix labels', () => { cy.get('.view-options').within(() => { cy.getByTestID('prefix-input') .click() @@ -225,18 +226,20 @@ describe('DataExplorer', () => { .should('have.length', 0) }) }) - it('can add and remove tick values', () => { + it('can add and remove tick labels', () => { cy.get('.view-options').within(() => { - cy.getByTestID('tickprefix-input') + cy.getByTestID('tick-prefix-input') .click() + .type('mph') .invoke('val') - .should('equal', '') + .should('equal', 'mph') .getByTestID('input-field--error') .should('have.length', 0) - cy.getByTestID('ticksuffix-input') + cy.getByTestID('tick-suffix-input') .click() + .type('mph') .invoke('val') - .should('equal', '') + .should('equal', 'mph') .getByTestID('input-field--error') .should('have.length', 0) }) diff --git a/src/visualization/types/Gauge/Gauge.tsx b/src/visualization/types/Gauge/Gauge.tsx index 8df3b16ab0..db2ec2999c 100644 --- a/src/visualization/types/Gauge/Gauge.tsx +++ b/src/visualization/types/Gauge/Gauge.tsx @@ -278,7 +278,6 @@ class Gauge extends Component { maxValue ) => { const {tickPrefix, tickSuffix, decimalPlaces} = this.props - let {prefix, suffix} = this.props const {degree, lineCount, labelColor, labelFontSize} = this.props.theme const tickSplit = Math.abs(maxValue - minValue) / lineCount @@ -289,16 +288,12 @@ class Gauge extends Component { maxValue, ] - if (tickPrefix === 'true') { - prefix = '' - } - - if (tickSuffix === 'true') { - suffix = '' - } - const labels = tickValues.map(tick => - formatStatValue(tick, {decimalPlaces, prefix, suffix}) + formatStatValue(tick, { + decimalPlaces, + prefix: tickPrefix, + suffix: tickSuffix, + }) ) const startDegree = degree * 135 diff --git a/src/visualization/types/Gauge/options.tsx b/src/visualization/types/Gauge/options.tsx index 2d45b4ed7e..851a8639a3 100644 --- a/src/visualization/types/Gauge/options.tsx +++ b/src/visualization/types/Gauge/options.tsx @@ -4,16 +4,10 @@ import { Grid, Columns, Form, - Toggle, AutoInput, AutoInputMode, Input, InputType, - InputToggleType, - InputLabel, - FlexBox, - AlignItems, - ComponentSize, } from '@influxdata/clockface' import ThresholdsSettings from 'src/visualization/components/internal/ThresholdsSettings' @@ -46,13 +40,14 @@ const GaugeOptions: FC = ({properties, update}) => { setDigits(2) } } + return ( - + = ({properties, update}) => { - + = ({properties, update}) => { - - + { - update({tickPrefix: val === 'false' || !!!val}) + onChange={evt => { + update({tickPrefix: evt.target.value}) }} - size={ComponentSize.ExtraSmall} + placeholder="%, MPH, etc." /> - - Optional Prefix - - + - - + { - update({tickSuffix: val === 'false' || !!!val}) + onChange={evt => { + update({tickSuffix: evt.target.value}) }} - size={ComponentSize.ExtraSmall} + placeholder="%, MPH, etc." /> - - Optional Suffix - - + {properties.decimalPlaces && ( From 27fafae419f69202ac1d7a84cb3facdd340bf726 Mon Sep 17 00:00:00 2001 From: Timmy Luong Date: Wed, 14 Jul 2021 19:28:48 -0700 Subject: [PATCH 2/2] test: update e2e tests for gauge --- cypress/e2e/shared/explorer.test.ts | 171 +++++++++++++++++++++------- 1 file changed, 131 insertions(+), 40 deletions(-) diff --git a/cypress/e2e/shared/explorer.test.ts b/cypress/e2e/shared/explorer.test.ts index 634d472111..8213f65d0e 100644 --- a/cypress/e2e/shared/explorer.test.ts +++ b/cypress/e2e/shared/explorer.test.ts @@ -201,48 +201,139 @@ describe('DataExplorer', () => { }) }) - describe('optional suffix and prefix in gauge', () => { - beforeEach(() => { - cy.getByTestID('view-type--dropdown').click() - cy.getByTestID(`view-type--gauge`).click() - cy.getByTestID('cog-cell--button').click() - }) + describe('optional prefix and suffix in gauge', () => { + const prefix = 'speed: ' + const suffix = ' mph' + it('can add prefix and suffix labels when using Giraffe gauge', () => { + cy.setFeatureFlags({useGiraffeGraphs: true}) + cy.writeData(lines(10)) + cy.get('@defaultBucketListSelector').then( + (defaultBucketListSelector: string) => { + cy.getByTestID('view-type--dropdown').click() + cy.getByTestID(`view-type--gauge`).click() - it('can add prefix and suffix labels', () => { - cy.get('.view-options').within(() => { - cy.getByTestID('prefix-input') - .click() - .type('mph') - .invoke('val') - .should('equal', 'mph') - .getByTestID('input-field--error') - .should('have.length', 0) - cy.getByTestID('suffix-input') - .click() - .type('mph') - .invoke('val') - .should('equal', 'mph') - .getByTestID('input-field--error') - .should('have.length', 0) - }) + cy.getByTestID('query-builder').should('exist') + cy.getByTestID('selector-list _monitoring').should('be.visible') + cy.getByTestID('selector-list _monitoring').click() + + cy.getByTestID(defaultBucketListSelector).should('be.visible') + cy.getByTestID(defaultBucketListSelector).click() + + cy.getByTestID('selector-list m').should('be.visible') + cy.getByTestID('selector-list m').clickAttached() + + cy.getByTestID('selector-list v').should('be.visible') + cy.getByTestID('selector-list v').clickAttached() + + cy.getByTestID('selector-list tv1').clickAttached() + + cy.getByTestID('selector-list mean') + .scrollIntoView() + .should('be.visible') + .click({force: true}) + + cy.getByTestID('time-machine-submit-button').click() + cy.get('canvas.giraffe-gauge').should('be.visible') + + cy.getByTestID('cog-cell--button').click() + cy.get('.view-options').within(() => { + cy.getByTestID('prefix-input') + .click() + .type(`${prefix}`) + .invoke('val') + .should('equal', prefix) + .getByTestID('input-field--error') + .should('have.length', 0) + cy.getByTestID('suffix-input') + .click() + .type(`${suffix}`) + .invoke('val') + .should('equal', suffix) + .getByTestID('input-field--error') + .should('have.length', 0) + cy.getByTestID('tick-prefix-input') + .click() + .type(`${prefix}`) + .invoke('val') + .should('equal', prefix) + .getByTestID('input-field--error') + .should('have.length', 0) + cy.getByTestID('tick-suffix-input') + .click() + .type(`${suffix}`) + .invoke('val') + .should('equal', suffix) + .getByTestID('input-field--error') + .should('have.length', 0) + }) + } + ) }) - it('can add and remove tick labels', () => { - cy.get('.view-options').within(() => { - cy.getByTestID('tick-prefix-input') - .click() - .type('mph') - .invoke('val') - .should('equal', 'mph') - .getByTestID('input-field--error') - .should('have.length', 0) - cy.getByTestID('tick-suffix-input') - .click() - .type('mph') - .invoke('val') - .should('equal', 'mph') - .getByTestID('input-field--error') - .should('have.length', 0) - }) + + it('can add prefix and suffix labels when using original built-in gauge', () => { + cy.setFeatureFlags({useGiraffeGraphs: false}) + cy.writeData(lines(10)) + cy.get('@defaultBucketListSelector').then( + (defaultBucketListSelector: string) => { + cy.getByTestID('view-type--dropdown').click() + cy.getByTestID(`view-type--gauge`).click() + + cy.getByTestID('query-builder').should('exist') + cy.getByTestID('selector-list _monitoring').should('be.visible') + cy.getByTestID('selector-list _monitoring').click() + + cy.getByTestID(defaultBucketListSelector).should('be.visible') + cy.getByTestID(defaultBucketListSelector).click() + + cy.getByTestID('selector-list m').should('be.visible') + cy.getByTestID('selector-list m').clickAttached() + + cy.getByTestID('selector-list v').should('be.visible') + cy.getByTestID('selector-list v').clickAttached() + + cy.getByTestID('selector-list tv1').clickAttached() + + cy.getByTestID('selector-list mean') + .scrollIntoView() + .should('be.visible') + .click({force: true}) + + cy.getByTestID('time-machine-submit-button').click() + cy.get('canvas.gauge').should('be.visible') + + cy.getByTestID('cog-cell--button').click() + cy.get('.view-options').within(() => { + cy.getByTestID('prefix-input') + .click() + .type(`${prefix}`) + .invoke('val') + .should('equal', prefix) + .getByTestID('input-field--error') + .should('have.length', 0) + cy.getByTestID('suffix-input') + .click() + .type(`${suffix}`) + .invoke('val') + .should('equal', suffix) + .getByTestID('input-field--error') + .should('have.length', 0) + cy.getByTestID('tick-prefix-input') + .click() + .type(`${prefix}`) + .invoke('val') + .should('equal', prefix) + .getByTestID('input-field--error') + .should('have.length', 0) + cy.getByTestID('tick-suffix-input') + .click() + .type(`${suffix}`) + .invoke('val') + .should('equal', suffix) + .getByTestID('input-field--error') + .should('have.length', 0) + }) + } + ) }) })