From f0afdb2ac7f37107291a484515ac02f9745b1047 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Wed, 12 Aug 2020 11:11:07 -0700 Subject: [PATCH 1/5] fix: file upload (#19258) * test(wip): upload data from file * test(wip): add file upload status * chore(wip): move line protocol out of redux * feat(wip): pull out getters into components * chore: update cypress * refactor: move line protocol out of redux and into buckets * test: remove useless tests * chore: remove yarn lock * fix: prettier * fix: lint * fix: explicitly return to the load data page * chore: manually create WritePrecision enum * test: remove big data file --- ui/cypress/e2e/buckets.test.ts | 94 +++++- ui/cypress/fixtures/data.txt | 20 ++ ui/package.json | 2 +- .../buckets/components/BucketCardActions.tsx | 1 - .../lineProtocol/EnterManuallyButtons.tsx | 66 ++++ .../lineProtocol/LineProtocol.creators.ts | 45 +++ .../lineProtocol/LineProtocol.reducer.ts | 66 ++++ .../lineProtocol/LineProtocol.thunks.ts | 50 +++ .../LineProtocolFooterButtons.tsx | 46 +++ .../lineProtocol}/LineProtocolHelperText.tsx | 0 .../lineProtocol/LineProtocolWizard.tsx | 71 +++++ .../lineProtocol/UploadFileButtons.tsx | 53 ++++ .../lineProtocol/configure/DragAndDrop.tsx | 194 ++++++++++++ .../configure/DragAndDropButtons.tsx | 65 ++++ .../configure/DragAndDropHeader.tsx | 34 ++ .../lineProtocol/configure/DragInfo.tsx | 15 + .../lineProtocol/configure/LineProtocol.tsx | 28 ++ .../configure/LineProtocolTabs.tsx | 59 ++++ .../configure/PrecisionDropdown.tsx | 2 +- .../lineProtocol}/configure/Tab.tsx | 0 .../lineProtocol/configure/TabBody.tsx | 49 +++ .../lineProtocol}/configure/TabSelector.tsx | 2 +- .../lineProtocol/verify/StatusIndicator.tsx | 59 ++++ ui/src/buckets/containers/BucketsIndex.tsx | 2 +- ui/src/dataLoaders/actions/dataLoaders.ts | 86 ----- .../lineProtocolWizard/LineProtocolWizard.tsx | 149 --------- .../configure/LineProtocol.test.tsx | 37 --- .../configure/LineProtocol.tsx | 93 ------ .../configure/LineProtocolTabs.test.tsx | 34 -- .../configure/LineProtocolTabs.tsx | 107 ------- .../lineProtocolWizard/configure/TabBody.tsx | 95 ------ .../verify/LineProtocolStepSwitcher.tsx | 34 -- .../verify/LineProtocolVerifyStep.tsx | 39 --- .../verify/StatusIndicator.test.tsx | 29 -- .../verify/StatusIndicator.tsx | 78 ----- ui/src/dataLoaders/reducers/dataLoaders.ts | 37 --- ui/src/shared/components/DragAndDrop.scss | 189 +++++------ ui/src/shared/components/DragAndDrop.tsx | 3 +- ui/src/types/buckets.ts | 9 + ui/src/types/dataLoaders.ts | 14 - ui/src/types/flux.ts | 1 + ui/yarn.lock | 293 +++++++++--------- 42 files changed, 1260 insertions(+), 1090 deletions(-) create mode 100644 ui/cypress/fixtures/data.txt create mode 100644 ui/src/buckets/components/lineProtocol/EnterManuallyButtons.tsx create mode 100644 ui/src/buckets/components/lineProtocol/LineProtocol.creators.ts create mode 100644 ui/src/buckets/components/lineProtocol/LineProtocol.reducer.ts create mode 100644 ui/src/buckets/components/lineProtocol/LineProtocol.thunks.ts create mode 100644 ui/src/buckets/components/lineProtocol/LineProtocolFooterButtons.tsx rename ui/src/{dataLoaders/components/lineProtocolWizard => buckets/components/lineProtocol}/LineProtocolHelperText.tsx (100%) create mode 100644 ui/src/buckets/components/lineProtocol/LineProtocolWizard.tsx create mode 100644 ui/src/buckets/components/lineProtocol/UploadFileButtons.tsx create mode 100644 ui/src/buckets/components/lineProtocol/configure/DragAndDrop.tsx create mode 100644 ui/src/buckets/components/lineProtocol/configure/DragAndDropButtons.tsx create mode 100644 ui/src/buckets/components/lineProtocol/configure/DragAndDropHeader.tsx create mode 100644 ui/src/buckets/components/lineProtocol/configure/DragInfo.tsx create mode 100644 ui/src/buckets/components/lineProtocol/configure/LineProtocol.tsx create mode 100644 ui/src/buckets/components/lineProtocol/configure/LineProtocolTabs.tsx rename ui/src/{dataLoaders/components/lineProtocolWizard => buckets/components/lineProtocol}/configure/PrecisionDropdown.tsx (97%) rename ui/src/{dataLoaders/components/lineProtocolWizard => buckets/components/lineProtocol}/configure/Tab.tsx (100%) create mode 100644 ui/src/buckets/components/lineProtocol/configure/TabBody.tsx rename ui/src/{dataLoaders/components/lineProtocolWizard => buckets/components/lineProtocol}/configure/TabSelector.tsx (91%) create mode 100644 ui/src/buckets/components/lineProtocol/verify/StatusIndicator.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/LineProtocolWizard.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/configure/LineProtocol.test.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/configure/LineProtocol.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/configure/LineProtocolTabs.test.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/configure/LineProtocolTabs.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/configure/TabBody.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/verify/LineProtocolStepSwitcher.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/verify/LineProtocolVerifyStep.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/verify/StatusIndicator.test.tsx delete mode 100644 ui/src/dataLoaders/components/lineProtocolWizard/verify/StatusIndicator.tsx diff --git a/ui/cypress/e2e/buckets.test.ts b/ui/cypress/e2e/buckets.test.ts index b20fb18d58..54211ab482 100644 --- a/ui/cypress/e2e/buckets.test.ts +++ b/ui/cypress/e2e/buckets.test.ts @@ -278,8 +278,8 @@ describe('Buckets', () => { }) }) - describe('add data', () => { - it('writing data to buckets', () => { + describe('add data', function() { + it('can write data to buckets', () => { cy.get('@org').then(({id: orgID}: Organization) => { // writing a well-formed line is accepted cy.getByTestID('add-data--button').click() @@ -293,31 +293,97 @@ describe('Buckets', () => { cy.getByTestID('bucket-add-line-protocol').click() cy.getByTestID('Enter Manually').click() + cy.getByTestID('lp-write-data--button').should('be.disabled') cy.getByTestID('line-protocol--text-area').type('m1,t1=v1 v=1.0') - cy.getByTestID('next').click() - cy.getByTestID('line-protocol--status').should('have.class', 'success') - cy.getByTestID('next').click() + cy.getByTestID('lp-write-data--button').click() + cy.getByTestID('line-protocol--status').contains('Success') + cy.getByTestID('lp-close--button').click() // writing a poorly-formed line errors cy.getByTestID('add-data--button').click() cy.getByTestID('bucket-add-line-protocol').click() cy.getByTestID('Enter Manually').click() cy.getByTestID('line-protocol--text-area').type('invalid invalid') - cy.getByTestID('next').click() - cy.getByTestID('line-protocol--status').should('have.class', 'error') - cy.getByTestID('next').click() + cy.getByTestID('lp-write-data--button').click() + cy.getByTestID('line-protocol--status').contains('Unable') + cy.getByTestID('lp-cancel--button').click() // writing a well-formed line with millisecond precision is accepted - cy.getByTestID('add-data--button').click() - cy.getByTestID('bucket-add-line-protocol').click() - cy.getByTestID('Enter Manually').click() cy.getByTestID('wizard-step--lp-precision--dropdown').click() cy.getByTestID('wizard-step--lp-precision-ms').click() const now = Date.now() cy.getByTestID('line-protocol--text-area').type(`m2,t2=v2 v=2.0 ${now}`) - cy.getByTestID('next').click() - cy.getByTestID('line-protocol--status').should('have.class', 'success') - cy.getByTestID('next').click() + cy.getByTestID('lp-write-data--button').click() + cy.getByTestID('line-protocol--status').contains('Success') + }) + }) + + it('upload a file and write data', () => { + cy.getByTestID('add-data--button').click() + cy.getByTestID('bucket-add-line-protocol').click() + cy.getByTestID('Upload File').click() + + // When a file is larger than 10MB + const bigFile = 'data-big.txt' + const type = 'plain/text' + const testFile = new File( + ['a'.repeat(1e7) + 'just a bit over 10mb'], + bigFile, + {type} + ) + const event = {dataTransfer: {files: [testFile]}, force: true} + cy.getByTestID('drag-and-drop--input') + .trigger('dragover', event) + .trigger('drop', event) + + cy.getByTestID('dnd--header-error').contains(bigFile) + cy.getByTestID('cancel-upload--button').click() + + cy.getByTestID('wizard-step--lp-precision--dropdown').click() + cy.getByTestID('wizard-step--lp-precision-ms').click() + cy.getByTestID('wizard-step--lp-precision--dropdown').contains( + 'Milliseconds' + ) + + // When a file is the correct size + const smallFile = 'data.txt' + cy.fixture(smallFile, 'base64') + .then(Cypress.Blob.base64StringToBlob) + .then(blob => { + const type = 'plain/text' + const testFile = new File([blob], smallFile, {type}) + const event = {dataTransfer: {files: [testFile]}, force: true} + cy.getByTestID('drag-and-drop--input') + .trigger('dragover', event) + .trigger('drop', event) + }) + + cy.getByTestID('write-data--button').click() + cy.getByTestID('lp-close--button').click() + + // navigate to data explorer to see data + cy.getByTestID('nav-item-data-explorer').click({force: true}) + cy.getByTestID('timerange-dropdown').click() + cy.getByTestID('dropdown-item-customtimerange').click() + + // time range start + cy.getByTestID('timerange--input') + .first() + .clear() + .type('2020-08-06 00:00:00.000') + + // time range stop + cy.getByTestID('timerange--input') + .last() + .clear() + .type('2020-08-08 00:00:00.000') + + cy.getByTestID('daterange--apply-btn').click() + + cy.fixture('user.json').then(({bucket}) => { + cy.getByTestID(`selector-list ${bucket}`).click() + // mymeasurement comes from fixtures/data.txt + cy.getByTestID('selector-list mymeasurement').should('exist') }) }) }) diff --git a/ui/cypress/fixtures/data.txt b/ui/cypress/fixtures/data.txt new file mode 100644 index 0000000000..b1c8efb855 --- /dev/null +++ b/ui/cypress/fixtures/data.txt @@ -0,0 +1,20 @@ +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113000 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113001 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113002 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113003 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113004 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113005 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113006 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113007 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113008 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113009 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113010 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113011 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113012 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113013 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113014 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113015 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113016 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113017 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113018 +mymeasurement,tag1=value1,tag2=value2 fieldkey="fieldvalue" 1596817113019 diff --git a/ui/package.json b/ui/package.json index 3837c5f52f..d694986835 100644 --- a/ui/package.json +++ b/ui/package.json @@ -86,7 +86,7 @@ "clean-webpack-plugin": "^3.0.0", "cross-env": "^5.2.0", "css-loader": "^3.1.0", - "cypress": "4.7.0", + "cypress": "4.12.1", "cypress-file-upload": "^4.0.7", "cypress-pipe": "^1.5.0", "cypress-plugin-tab": "^1.0.5", diff --git a/ui/src/buckets/components/BucketCardActions.tsx b/ui/src/buckets/components/BucketCardActions.tsx index 78dd41ae3a..8ee98d1d32 100644 --- a/ui/src/buckets/components/BucketCardActions.tsx +++ b/ui/src/buckets/components/BucketCardActions.tsx @@ -73,7 +73,6 @@ const BucketCardActions: FC = ({ const handleAddLineProtocol = () => { onSetDataLoadersBucket(orgID, bucket.name, bucket.id) - onSetDataLoadersType(DataLoaderType.LineProtocol) history.push( `/orgs/${orgID}/load-data/buckets/${bucket.id}/line-protocols/new` ) diff --git a/ui/src/buckets/components/lineProtocol/EnterManuallyButtons.tsx b/ui/src/buckets/components/lineProtocol/EnterManuallyButtons.tsx new file mode 100644 index 0000000000..8176b4be5f --- /dev/null +++ b/ui/src/buckets/components/lineProtocol/EnterManuallyButtons.tsx @@ -0,0 +1,66 @@ +// Libraries +import React, {FC, useContext} from 'react' + +// Components +import {Context} from './LineProtocolWizard' +import { + Button, + ButtonType, + ComponentColor, + ComponentSize, + ComponentStatus, +} from '@influxdata/clockface' + +// Types +import {RemoteDataState} from 'src/types' + +interface Props { + onSubmit: () => void + onCancel: () => void + onClose: () => void +} + +const EnterManuallyButtons: FC = ({onSubmit, onCancel, onClose}) => { + const [{writeStatus, body}] = useContext(Context) + const status = body ? ComponentStatus.Default : ComponentStatus.Disabled + + if (writeStatus === RemoteDataState.Error) { + return ( +