feat(monitor-ci/415): cleanup UI docs for cloud vs oss (#6621)

* chore: cleanup scripts for remocal versus oss, and update readme.

* feat(415): get oss-e2es running locally

* chore: remove old, unused artifact directories

Author: wiedld

.circleci/config.yml

@@ -158,12 +158,6 @@ jobs:
       - store_artifacts:
           path: monitor-ci/test-artifacts/results/cloud-e2e
           destination: test_artifacts/results/cloud-e2e
-      - store_artifacts:
-          path: monitor-ci/test-artifacts/results/cloud-e2e-firefox
-          destination: test_artifacts/results/cloud-e2e-firefox
-      - store_artifacts:
-          path: monitor-ci/test-artifacts/results/cloud-e2e-k8s-idpe
-          destination: test_artifacts/results/cloud-e2e-k8s-idpe
       - store_artifacts:
           path: monitor-ci/test-artifacts/results/cloud-lighthouse
           destination: test_artifacts/results/cloud-lighthouse

README.md

@@ -33,35 +33,63 @@ To upgrade a single package named `packageName`:
 yarn upgrade packageName
 ```
 
-## Testing
-
-Tests can be run via command line with `yarn test`, from within the `/ui` directory. For more detailed reporting, use `yarn test -- --reporters=verbose`.
+## Unit Testing
+
+Unit tests can be run via command line with `yarn test`, from within the `/ui` directory. For more detailed reporting, use `yarn test -- --reporters=verbose`.
+
+
+## Local dev
+
+**cloud platform**
+1. From k8s-idpe, start the remocal service with loopback to your local ui changes.
+    1. have your remocal instance build and deployed. See [docs here](https://docs.influxdata.io/development/remocal/getting-started/).
+    1. `make remocal-dev APPS=ui DETACHED=1`
+1. From the ui directory. Build the local dev server:
+    1. set env vars for `PUBLIC` (your remocal url)
+    1. `yarn install && yarn start:dev:remocal`
+    1. `yarn link` different javascript libraries (e.g. giraffe, clockface, flux-lsp) as needed.
+        * note that the flux-lsp wasm build produces an output directory which contains a package.json for the release. Make sure to `yarn link` to this directory.
+
+**oss platform**
+1. From oss/influxdb repo, start the backend service.
+    1. setup service following the [contributing guide](https://github.com/influxdata/influxdb/blob/master/CONTRIBUTING.md#how-to-build-influxdb-from-source).
+    1. run the service, goto browser `localhost:8086`
+    1. create a login/password. (Remember these!)
+    1. **CAVEAT**: influxdb/oss does not have live reload.
+        * instead, run `make` and restart influxdb
+1. From the ui directory. Build the local dev server:
+    1. `yarn install && yarn start:dev:oss`
+    1. goto browser `localhost:8080`
+    1. the same login/password pair should work.
+    1. **CAVEAT**: live reload does not work, so you need to refresh the browser page.
 
 ## Cypress Testing
 
-e2e tests:
-For the end to end tests to run properly, the server needs to be running in the e2e testing mode with the in-memory data store.
-From the influxdb directory:
-`$ ./bin/darwin/influxd --assets-path=ui/build --e2e-testing --store=memory`
+**cloud platform**
+1. have your local dev running (see above).
+1. `export NS=<your-remocal-namespace>`
+1. run cypress test:
+    * `yarn test:e2e:remocal` to test on tsm storage
+    * `yarn test:e2e:remocal:iox` to test on iox storage
 
-**monitor-ci**
-From the ui directory. Build the javascript with
-`$ yarn start`
-To run Cypress locally with monitor-ci:
-`$ yarn cy:dev`
+**oss platform**
+1. have your local dev running (see above).
+    * Make sure to start your oss backend service with `--e2e-testing` flag.
+1. run cypress test:
+    * `yarn test:e2e:oss`
 
-**k8s-idpe**
-From the ui directory. Build the javascript with
-`$ yarn start:kind`
-To run Cypress locally with k8s-idpe:
-`$ yarn test:e2e:kind`
+**Generating Test Reports**
+* to run all tests [in series] locally, and generate a report: `yarn test:e2e:<whatever>:report`
+    * e.g. `yarn test:e2e:remocal:report`, `yarn test:e2e:remocal:iox:report`, `yarn test:e2e:oss:report`
+* this will run in headless mode, so no browser will be shown. Just a stdout waiting as each test runs.
+    * **WARNING**: This takes a long time, unlike CI which runs in parallel.
+* after all tests complete, it will automatically open a test result viewer.
+* any screenshots or vids will be saved in `cypress/videos` and `cypress/screenshots`
 
-## Starting Dev Server
 
-Running `/ui` locally depends on `monitor-ci` or `k8s-idpe`.
+## What is oats?
+Oats is how we automatically generate our typescript definitions based open the openapi contract. See [here for more details](https://github.com/influxdata/oats). After one of the `yarn generate` scripts are run, the typescript definitions are usually output to `./src/client/`.
 
-- [Monitor-ci Quickstart](https://github.com/influxdata/monitor-ci#quickstart-for-local-development)
-- [Remocal Quickstart](https://docs.influxdata.io/development/remocal/development/#ui-development)
 
 ## Zuora Form
 

cypress/support/commands.ts

@@ -107,7 +107,6 @@ Cypress.Commands.add(
 )
 
 // login via the purple OSS screen by typing in username/password
-// this is only used if you're using monitor-ci + DEV_MODE_CLOUD=0
 export const loginViaOSS = (username: string, password: string) => {
   cy.visit('/')
   cy.get('#login').type(username)
@@ -1000,7 +999,8 @@ export const setupUser = (useIox: boolean = false): Cypress.Chainable<any> => {
 
 export const flush = (): Cypress.Chainable<Cypress.Response<any>> => {
   const defaultUser = Cypress.env('defaultUser')
-  if (defaultUser) {
+  const isOssLocalTesting = Cypress.env(DEX_URL_VAR) === 'OSS'
+  if (defaultUser && !isOssLocalTesting) {
     return cy
       .request({method: 'POST', url: `/debug/flush?user=${defaultUser}`})
       .then(response => {
@@ -1009,13 +1009,12 @@ export const flush = (): Cypress.Chainable<Cypress.Response<any>> => {
           .log(`flushed user ${defaultUser} successfully`)
           .then(() => response)
       })
-  } else {
-    // this isn't really needed - just need to return a chainable cypress obj
-    return cy.request({method: 'GET', url: '/debug/flush'}).then(response => {
-      expect(response.status).to.eq(200)
-      return response
-    })
   }
+
+  return cy.request({method: 'GET', url: '/debug/flush'}).then(response => {
+    expect(response.status).to.eq(200)
+    return response
+  })
 }
 
 /**

package.json

@@ -17,11 +17,11 @@
   },
   "scripts": {
     "start": "yarn install && yarn generate && cross-env TS_NODE_PROJECT=\"webpack.tsconfig.json\" && yarn run start:dev",
-    "start:cloud": "yarn install && yarn generate && cross-env TS_NODE_PROJECT=\"webpack.tsconfig.json\" && yarn run start:dev-cloud",
     "start:dev": "webpack-dev-server --config ./webpack.dev.ts",
-    "start:dev-cloud": "cross-env CLOUD_LOGOUT_URL=http://localhost:8080/api/v2/signout CLOUD_URL=http://localhost:4000 webpack-dev-server --config ./webpack.dev.ts",
+    "start:dev:oss": "yarn start:dev",
+    "start:dev:remocal": "NODE_ENV=development UI_SHA=local_dev_mode BASE_PATH=/ API_BASE_PATH=/ PORT=8080 PUBLIC=${PUBLIC:-https://twodotoh.a.influxcloud.dev.local/} CLOUD_URL=/auth yarn start",
+    "start:kind": "echo 'please start using `yarn start:dev:remocal`' && yarn start:dev:remocal",
     "start:docker": "yarn generate && yarn run start:dev",
-    "start:kind": "NODE_ENV=development UI_SHA=local_dev_mode BASE_PATH=/ API_BASE_PATH=/ PORT=8080 PUBLIC=${PUBLIC:-https://twodotoh.a.influxcloud.dev.local/} CLOUD_URL=/auth yarn start",
     "build": "yarn install --silent && yarn build:ci",
     "build:ci": "yarn generate && webpack --config webpack.prod.ts",
     "build:fast": "webpack --config webpack.fast.ts",
@@ -31,14 +31,16 @@
     "test:watch": "jest --watch --verbose false",
     "test:update": "jest --updateSnapshot",
     "test:debug": "node --inspect-brk $(npm bin)/jest --runInBand --watch --verbose false",
-    "test:e2e": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=junit-results/test-output-[hash].xml'",
-    "test:e2e:ci": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=https://localhost:443 cypress run --parallel --browser chrome --reporter junit --reporter-options 'mochaFile=junit-results/test-output-[hash].xml'",
-    "test:e2e:report": "junit-viewer --results=junit-results --save-file=cypress/site/junit-report.html",
-    "test:e2e:clean": "rm junit-results/*.xml",
-    "test:e2e:all": "yarn test:e2e:clean && yarn test:e2e; yarn test:e2e:report;",
-    "test:e2e:kind": "CYPRESS_dexUrl=http://dex-twodotoh.a.influxcloud.dev.local CYPRESS_baseUrl=https://twodotoh.a.influxcloud.dev.local CYPRESS_password=password cypress open --browser chrome --config chromeWebSecurity=false",
-    "test:e2e:remocal": "CYPRESS_dexUrl=https://dex-${NS}.remocal.influxdev.co CYPRESS_baseUrl=https://${NS}.remocal.influxdev.co CYPRESS_password=password cypress open --browser chrome --config chromeWebSecurity=false",
+    "test:e2e:open": "CYPRESS_password=password cypress open --browser chrome --config chromeWebSecurity=false",
+    "test:e2e:closed": "CYPRESS_password=password cypress run --browser chrome --config chromeWebSecurity=false --reporter junit --reporter-options 'mochaFile=junit-results/test-output-[hash].xml'",
+    "test:e2e:report": "junit-viewer --results=junit-results --save-file=junit-results/junit-report.html && open ./junit-results/junit-report.html",
+    "test:e2e:clean": "rm -rf cypress/screenshots && rm -rf cypress/videos && rm -f junit-results/*",
+    "test:e2e:oss": "CYPRESS_dexUrl=OSS CYPRESS_baseUrl=http://localhost:8080 yarn test:e2e:open -- --config testFiles='{oss,shared}/**/*.*'",
+    "test:e2e:oss:report": "yarn test:e2e:clean && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=http://localhost:8080 yarn test:e2e:closed -- --config testFiles='{oss,shared}/**/*.*'; yarn test:e2e:report;",
+    "test:e2e:remocal": "CYPRESS_dexUrl=https://dex-${NS}.remocal.influxdev.co CYPRESS_baseUrl=https://${NS}.remocal.influxdev.co yarn test:e2e:open -- --config testFiles='{cloud,shared}/**/*.*'",
     "test:e2e:remocal:iox": "CYPRESS_useIox=true yarn test:e2e:remocal",
+    "test:e2e:remocal:report": "yarn test:e2e:clean && CYPRESS_dexUrl=https://dex-${NS}.remocal.influxdev.co CYPRESS_baseUrl=https://${NS}.remocal.influxdev.co yarn test:e2e:closed -- --config testFiles='{cloud,shared}/**/*.*'; yarn test:e2e:report;",
+    "test:e2e:remocal:iox:report": "CYPRESS_useIox=true yarn test:e2e:remocal:report",
     "test:circleci": "yarn run test:ci --runInBand",
     "test:ci": "JEST_JUNIT_OUTPUT_DIR=\"./coverage\" jest --ci --coverage",
     "lint": "yarn tsc && yarn prettier && yarn eslint",
@@ -50,9 +52,6 @@
     "prettier:fix": "pretty-quick --config .prettierrc.json --write '{src,cypress}/**/*.{ts,tsx}'",
     "tsc": "tsc -p ./tsconfig.json --noEmit --pretty --skipLibCheck",
     "tsc:watch": "yarn tsc --watch",
-    "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
-    "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
-    "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
     "generate": "export SHA=db14de0d91be00e75eb946d768e88d771b20a2a9 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-local-cloud": "export REMOTE=../openapi/ && yarn generate-meta-cloud",

webpack.dev.ts

@@ -28,6 +28,7 @@ module.exports = mergeDev(commonDev, {
     proxy: {
       '/api/v2': 'http://localhost:8086',
       '/debug/flush': 'http://localhost:8086',
+      '/debug/provision': 'http://localhost:8086',
       '/oauth': 'http://localhost:8086',
       '/health': 'http://localhost:8086',
     },