UI: Make KWA's main table responsive and add toolbar

[elenzio9]

In this PR:

• Add a top row toolbar with the title of the app and the button to create a new Experiment.
• Replace the card with a responsive table that shows the items. The component also has a paginator.
• Update Dockerfile and README file to check out to the commit in master branch from the Kubeflow repository that includes the corresponding changes.

Here the new look of the app:

Related PR: kubeflow/kubeflow#6316

Signed-off-by: Elena Zioga elena@arrikto.com

[coveralls]

Coverage decreased (-0.1%) to 73.324% when pulling 7937173 on arrikto:feature-elena-kwa-responsive-table into 6de74e9 on kubeflow:master.

[tenzen-y]

@kimwnasptd Can you help with reviewing this PR?

/assign @kimwnasptd

[andreyvelich]

Thanks a lot for these PRs @elenzio9 !

@elenzio9 @kimwnasptd Please can you confirm that after these changes, users can still use Katib UI standalone without Kubeflow Central Dashboard ?
Ref Issue: #1437

[elenzio9]

Thanks a lot for these PRs @elenzio9 !

You're welcome!

@elenzio9 @kimwnasptd Please can you confirm that after these changes, users can still use Katib UI standalone without Kubeflow Central Dashboard ? Ref Issue: #1437

I guess you're wondering about this part: https://github.com/kubeflow/katib/pull/1982/files#diff-7119d58aceadee83917f133f98cc4e10036ea1a44e09061ed70f406c675d14faR1. I can confirm that the lib-namespace-select element, that is the namespace dropdown, is available in standalone mode after these changes. So users will be able to select a namespace if the Kubeflow Central Dashboard is not present.

[kimwnasptd]

/lgtm
/approve

[johnugeorge]

/approve

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: elenzio9, johnugeorge, kimwnasptd

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 [johnugeorge]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaowei-su]

Hi @elenzio9 , it seems that after this PR change the old UI dockerfile can't build locally. Please check the error msg below

> frontend@0.1.0 build /frontend
> react-scripts build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve './objectWithoutPropertiesLoose' in '/frontend/node_modules/@babel/runtime/helpers/esm'
Did you mean 'objectWithoutPropertiesLoose.js'?
BREAKING CHANGE: The request './objectWithoutPropertiesLoose' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the frontend@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-11-01T19_28_04_914Z-debug.log

could you help take a look? thanks

[tenzen-y]

@shaowei-su I fixed Charmed Katib / Test in #1987.

[shaowei-su]

I see, is the old UI build (https://github.com/kubeflow/katib/tree/master/cmd/ui/v1beta1) fully deprecated now? we unfortunately still rely on it due to the issue we are facing described here: #1967

[tenzen-y]

I see, is the old UI build (https://github.com/kubeflow/katib/tree/master/cmd/ui/v1beta1) fully deprecated now? We unfortunately still rely on it due to the issue we are facing described here: #1967

Yes, we plan to remove the old UI codes for the next katib release.

ref: #1984 (comment)

[shaowei-su]

Got it, btw @tenzen-y are you able to reproduce #1967?

[tenzen-y]

Got it, btw @tenzen-y are you able to reproduce #1967?

Thanks for reminding me of that.
I replied to that issue.