jina-ai / dashboard

Interactive UI for analyzing Jina logs, designing Flows and viewing Hub images
https://dashboard.jina.ai
Apache License 2.0
118 stars 61 forks source link

feat(pod): change pod boolean props UI to switch button (issue #243) #280

Closed franquil closed 3 years ago

franquil commented 3 years ago

My first PR which targets to fix the issue #243 .

A couple of things need to be clarified:

Thanks in advance.

PR checklist

Docs

Tests

Typing

Styling

franquil commented 3 years ago

Does anyone have an idea about why the checks failed at 'ref-issue-to-pr'? Error:

Error: GraphqlError: Resource not accessible by integration
Error: Resource not accessible by integration
franquil commented 3 years ago

Does anyone have an idea about why the checks failed at 'ref-issue-to-pr'? Error:

Error: GraphqlError: Resource not accessible by integration
Error: Resource not accessible by integration

The error was gone after a new submitting.

BastinJafari commented 3 years ago

Hey @franquil, thank you very much for your interest in contributing!

Regarding UI Frameworks, we want to switch to Material, so it would be nice to use that. Regarding Testing. We use Cypress for integration tests. If you like, we can schedule a Pair Programming session and I can show you how to do it. You can write me in Jina's Community Slack under Bastin Jafari

franquil commented 3 years ago

Hey @franquil, thank you very much for your interest in contributing!

Regarding UI Frameworks, we want to switch to Material, so it would be nice to use that. Regarding Testing. We use Cypress for integration tests. If you like, we can schedule a Pair Programming session and I can show you how to do it. You can write me in Jina's Community Slack under Bastin Jafari

Hi @BastinJafari , thanks for your reply. I notice Bootstrap rather than Material framework is used in this repo. It sounds like a much bigger task, is there a road map or open issues concerning it?

In terms of the testing, is there a plan to adopt a component-level (or unit) test? I tried Cypress tests locally, there's a timeout issue when connecting local server that consistently occurred. I'd like to have a look at it on another day. Thanks for offering your help.

By the way, could you or someone else review this PR?

Thanks.

BastinJafari commented 3 years ago

We have a roadmap:

http://roadmap.jina.ai/

it doesn't mention the use of MaterialUI though.

I would say forget the integration of Material, for now. We should do that. But this PR still needs integration tests. Can you make a screenshot of the error or paste it?

franquil commented 3 years ago

We have a roadmap:

http://roadmap.jina.ai/

it doesn't mention the use of MaterialUI though.

I would say forget the integration of Material, for now. We should do that. But this PR still needs integration tests. Can you make a screenshot of the error or paste it?

@BastinJafari Here's the process to reproduce the errors:

docker run -p 8000:8000 -p 5555:5555 jinaai/jina:master-daemon
cd dashboard
npm run dev
npm run cy:run

My laptop environment:

# docker
Docker version 19.03.6
# linux
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.2 LTS
Release:        20.04
Codename:       focal

The error:

> dashboard-v1@1.1.0 cy:run
> percy exec -- npx cypress run

 ›   Warning: Skipping visual tests. PERCY_TOKEN was not provided.

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    6.8.0                                                                              │
  │ Browser:    Electron 87 (headless)                                                             │
  │ Specs:      6 found (views/flowview.ts, views/helpView.ts, views/hubView.ts, views/logsView.ts │
  │             , visual-tests/flowDesign.ts, visual-tests/helpPage.ts)                            │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  views/flowview.ts                                                               (1 of 6)

  The Flow Page
    1) "before each" hook for "should have a working settings button"
    2) "after each" hook for "should have a working settings button"

  0 passing (1m)
  2 failing

  1) The Flow Page
       "before each" hook for "should have a working settings button":
     CypressError: Timed out after waiting `60000ms` for your remote page to load.

Your page did not fire its `load` event within `60000ms`.

You can try increasing the `pageLoadTimeout` value in `/home/frank/playground/jina/dashboard/cypress.json` to wait longer.

Browsers will not fire the `load` event until all stylesheets and scripts are done downloading.

When this `load` event occurs, Cypress will continue running commands.

Because this error occurred during a `before each` hook we are skipping the remaining tests in the current suite: `The Flow Page`
      at timedOutWaitingForPageLoad (http://localhost:3000/__cypress/runner/cypress_runner.js:158187:13)
      at http://localhost:3000/__cypress/runner/cypress_runner.js:159171:16
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:10765:23)
      at http://localhost:3000/__cypress/runner/cypress_runner.js:5887:41
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:10765:23)
      at Promise._settlePromiseFromHandler (http://localhost:3000/__cypress/runner/cypress_runner.js:8700:31)
      at Promise._settlePromise (http://localhost:3000/__cypress/runner/cypress_runner.js:8757:18)
      at Promise._settlePromise0 (http://localhost:3000/__cypress/runner/cypress_runner.js:8802:10)
      at Promise._settlePromises (http://localhost:3000/__cypress/runner/cypress_runner.js:8878:18)
      at _drainQueueStep (http://localhost:3000/__cypress/runner/cypress_runner.js:5472:12)
      at _drainQueue (http://localhost:3000/__cypress/runner/cypress_runner.js:5465:9)
      at Async.../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:3000/__cypress/runner/cypress_runner.js:5481:5)
      at Async.drainQueues (http://localhost:3000/__cypress/runner/cypress_runner.js:5351:14)
  From Your Spec Code:
      at Context.eval (http://localhost:3000/__cypress/tests?p=cypress/integration/views/flowview.ts:185:12)

  2) The Flow Page
       "after each" hook for "should have a working settings button":
     CypressError: Cypress command timeout of `4000ms` exceeded.

Because this error occurred during a `after each` hook we are skipping all of the remaining tests.
      at cypressErr (http://localhost:3000/__cypress/runner/cypress_runner.js:174213:18)
      at Object.errByPath (http://localhost:3000/__cypress/runner/cypress_runner.js:174264:10)
      at http://localhost:3000/__cypress/runner/cypress_runner.js:175857:29

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        5                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      4                                                                                │
  │ Screenshots:  2                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     1 minute, 4 seconds                                                              │
  │ Spec Ran:     views/flowview.ts                                                                │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

Similar errors occurred at the Help Page, Hub Page and Log Page etc. Taking the error of Help Page as an example:

 The Help Page
    1) "before all" hook for "should redirect to /help"

  2) "after all" hook: collectBackendCoverage for "should redirect to /help"

  0 passing (1m)
  2 failing

  1) The Help Page
       "before all" hook for "should redirect to /help":
     CypressError: Timed out after waiting `60000ms` for your remote page to load.

Your page did not fire its `load` event within `60000ms`.

You can try increasing the `pageLoadTimeout` value in `/home/frank/playground/jina/dashboard/cypress.json` to wait longer.

Browsers will not fire the `load` event until all stylesheets and scripts are done downloading.

When this `load` event occurs, Cypress will continue running commands.

Because this error occurred during a `before all` hook we are skipping the remaining tests in the current suite: `The Help Page`
      at timedOutWaitingForPageLoad (http://localhost:3000/__cypress/runner/cypress_runner.js:158187:13)
      at http://localhost:3000/__cypress/runner/cypress_runner.js:159171:16
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:10765:23)
      at http://localhost:3000/__cypress/runner/cypress_runner.js:5887:41
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:10765:23)
      at Promise._settlePromiseFromHandler (http://localhost:3000/__cypress/runner/cypress_runner.js:8700:31)
      at Promise._settlePromise (http://localhost:3000/__cypress/runner/cypress_runner.js:8757:18)
      at Promise._settlePromise0 (http://localhost:3000/__cypress/runner/cypress_runner.js:8802:10)
      at Promise._settlePromises (http://localhost:3000/__cypress/runner/cypress_runner.js:8878:18)
      at _drainQueueStep (http://localhost:3000/__cypress/runner/cypress_runner.js:5472:12)
      at _drainQueue (http://localhost:3000/__cypress/runner/cypress_runner.js:5465:9)
      at Async.../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:3000/__cypress/runner/cypress_runner.js:5481:5)
      at Async.drainQueues (http://localhost:3000/__cypress/runner/cypress_runner.js:5351:14)
  From Your Spec Code:
      at Context.eval (http://localhost:3000/__cypress/tests?p=cypress/integration/views/helpView.ts:98:12)

  2) The Help Page
       "after all" hook: collectBackendCoverage for "should redirect to /help":
     CypressError: Cypress command timeout of `4000ms` exceeded.

Because this error occurred during a `after all` hook we are skipping all of the remaining tests.
      at cypressErr (http://localhost:3000/__cypress/runner/cypress_runner.js:174213:18)
      at Object.errByPath (http://localhost:3000/__cypress/runner/cypress_runner.js:174264:10)
      at http://localhost:3000/__cypress/runner/cypress_runner.js:175857:29

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        14                                                                               │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      13                                                                               │
  │ Screenshots:  2                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     1 minute, 4 seconds                                                              │
  │ Spec Ran:     views/helpView.ts                                                                │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘

Occationally, some of the tests can be passed. But most of times the timeout issue would occur.

Thanks for offering your help.

BastinJafari commented 3 years ago

It's weird, I can't reproduce the error on your branch on my machine. The page under localhost:3000 normally loads?

Could you try npm run cy:dev instead and see if you can learn anything from that?

franquil commented 3 years ago

It's weird, I can't reproduce the error on your branch on my machine. The page under localhost:3000 normally loads?

Could you try npm run cy:dev instead and see if you can learn anything from that?

Hi @BastinJafari , I figured out what caused the timeout issue, now the tests can run as normal. It seems that there're external resources (hosted on cloudfalre or googleapi etc) that failed to load in time, after setting HTTP_PROXY, the errors are gone. (By the way, I'm based in China. The connection to some worldwide servers are not stable sometimes.)

A couple of integration tests are added. Let me know if there're changes needed. Thanks.

Roshanjossey commented 3 years ago

Hi @franquil, good job figuring out the issue. Yeah, we have resources like fonts, icons etc hosted on CDNs. But now, I see value in packaging it along with the build.

BastinJafari commented 3 years ago

Very nice PR! Just had a question and some minor comments