Switched from BYON to CNBI mockup

Gkrumbach07 commented 2 years ago

This is replacing the old PR that got all weird from merging

Related Issues and Dependencies

https://github.com/thoth-station/opendatahub-cnbi/issues/17

This introduces a breaking change

No

This should yield a new module release

No

This Pull Request implements

convert add image modal to to a page
add breadcrumbs
add dropdown for different image adding methods
update state management to use useReducer
added more columns to image table
validation blocks submit button
error header when api fails to respond after submit (500 code)
small changes to wording
form for using existing images uses dropdown that pulls from api to get image streams
component picker got an upgrade
- now uses modals to add packages and not inline
- can edit, add, delete, or disable packages from being installed

Description

This PR adds the complete UI of the mockup. The backend still doesn't work for 2/3 of the image building options, however the forms can still be completed, but just wont create an image. There are some deviations from the mockup as I felt they were more user friendly.

Deviations from the mockup

did not include an export option (not part of MVP)
Add component table uses a modal to add and edit new and existing packages instead of inline editing
Add component table does not have a filter dropdown, instead it just has a search bar for name
pagination on the table was moved to the bottom
.bin import option is not supported (not part of MVP) so it is disabled

Other notes to consider for later versions

naming and folder structure still uses BYON and is a little confusing
I had to update some api calls to be able to get the proper image stream labels for grouping images together and validation. This could change if image streams are not used (instead using CRs).
not sure if the grouping is correct for image dropdown
There are a few TODOs about efficiency, validation, api connections, and other unknown factors that will need to be addressed.
Pattern-fly has some issues with tooltips that create some errors when react is in strict mode (dont worry about this)
Currently no Thoth API integration for validation
and some components got long, so maybe clean this up in a later commit

sesheta commented 2 years ago

Skipping CI for Draft Pull Request. If you want CI signal for your change, please convert it to an actual PR. You can still manually trigger a test run with /test all

Gkrumbach07 commented 2 years ago

now need to clean up git history

Gkrumbach07 commented 2 years ago

/reopen

sesheta commented 2 years ago

@Gkrumbach07: Reopened this PR.

In response to [this](https://github.com/thoth-station/odh-dashboard/pull/4#issuecomment-1302691313): >/reopen Instructions for interacting with me using PR comments are available [here](https://git.k8s.io/community/contributors/guide/pull-requests.md). If you have questions or suggestions related to my behavior, please file an issue against the [kubernetes/test-infra](https://github.com/kubernetes/test-infra/issues/new?title=Prow%20issue:) repository.

Gkrumbach07 commented 2 years ago

Ok... it should be all set now. taking it off of WIP

codificat commented 2 years ago

I'm getting this when trying to run npm run dev to test it: the backend doesn't start:

[dev:backend ] [2022-11-04 13:18:03.717 +0000] ERROR (2412 on cnbi.example.net): ERR_AVVIO_PLUGIN_TIMEOUT: plugin did not start in time: (fastify) => __awaiter(void 0, void 0, void 0, function* () { -- var _a, _b, _c, _d, _e, _f;. You may have forgotten to call 'done' function or to resolve a Promise
[dev:backend ]     Error: ERR_AVVIO_PLUGIN_TIMEOUT: plugin did not start in time: (fastify) => __awaiter(void 0, void 0, void 0, function* () { -- var _a, _b, _c, _d, _e, _f;. You may have forgotten to call 'done' function or to resolve a Promise
[dev:backend ]         at Timeout._onTimeout (/home/fedora/odh-dashboard/backend/node_modules/avvio/plugin.js:123:19)
[dev:backend ]         at listOnTimeout (internal/timers.js:557:17)
[dev:backend ]         at processTimers (internal/timers.js:500:7)
[dev:backend ] [nodemon] app crashed - waiting for file changes before starting...

Gkrumbach07 commented 2 years ago

@codificat

I'm getting this when trying to run npm run dev to test it: the backend doesn't start:

I think that error is coming from what is already in main. I get the error without my code changes on top of it. I was developing on top of the working commit which is one behind https://github.com/thoth-station/odh-dashboard/commit/2b3cdfda467789fcb604a9f7eefb0252204a5ec4

UPDATE Latest commit of https://github.com/opendatahub-io/odh-dashboard works. Will rebase our commits on top to sync

codificat commented 2 years ago

This works great now.

Including showing up custom images created by the meteor-operator:

imatge

/lgtm /approve

sesheta commented 2 years ago

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: codificat

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files: - ~~[OWNERS](https://github.com/thoth-station/odh-dashboard/blob/main/OWNERS)~~ [codificat] Approvers can indicate their approval by writing `/approve` in a comment Approvers can cancel approval by writing `/approve cancel` in a comment

thoth-station / odh-dashboard