opendatahub-io / odh-dashboard

Dashboard for ODH

Open Data Hub Dashboard

A dashboard for Open Data Hub components, featuring user flows to navigate and interact with the various component parts of the stack.

Contributing

Contributing encompasses repository specific requirements.

Documentation

Read more about the Dashboard in one of our documentation links.

• Dev setup & Requirements
• Dashboard documentation

odh-dashboard's Issues

Ability to add components deployed in other namespaces

Is your feature request related to a problem? Please describe.
the dashboard seems to be limited to the namespace where it's deployed.

Describe the solution you'd like
All components deployed by the operator should be included, independent of the namespace they're deployed to

operate-first/apps#12
operate-first/apps#13

BYON - Add ability to import custom notebook images.

As a user of ODH I would like to have the ability to important my own custom image as shown in the mockups below. This issue covers the importing of a notebook displaying it in the table.

https://marvelapp.com/prototype/6dcfc3h/screen/85139857

Add GitHub ISSUE_TEMPLATE and PULL_REQUEST_TEMPLATE

[BYON] Implement GET /notebook REST endpoint.

Implement the /notebook input for GET to retrieve the list of custom note book images. This should return a list of custom note book images according to the REST API specification.

[KFNBC] Provide suitable error message for with inability of NB server to start

The system must provide suitable error messages related to the inability to start NB server sessions and enable the user to recover and try again immediately

Mockup for this issue can be found here:

https://marvelapp.com/prototype/28dc5af6/screen/78116147

• Add UI to display the error to the user.
• Add UI backend code to get the status and the error.
• Integrate with KFNB controller.

Update Nodejs backend to support Post, Put, and Delete.

Currently we do not support POST, PUT, and DELETE from the UI on the NodeJS backend. This is due to security settings found here:

odh-dashboard/backend/src/utils/responseUtils.ts

Line 3 in 0d98f10

export const addCORSHeader = (req: FastifyRequest, reply: FastifyReply): void => {

We need to update the CORs headers so we can successfully support the REST commands above. Once this is done we should update our current UI / backend api to use the correct REST commands.

[BYON] Enable toggle broken when clicked repeatedly

Describe the bug
On first click on the enable toggle, proper payload is sent out. Any consecutive click doesn't behave properly and doesn't toggle

Steps To Reproduce
Steps to reproduce the behavior:

1. Go to Settings -> Notebook Images
2. Have enabled image
3. Click on Enable to disable image
4. See image disabled
5. Click on Enable again to enable image back
6. See image stay disabled
7. Repeat for how long you'd like

Expected behavior
It toggles the visibility properly and every time.

Additional context

true-2022-04-12_15.15.46.mp4

/cc @dlabaj

Add CI test to require that every input and clickable element has a unique id attribute

Is your feature request related to a problem? Please describe.
To support automated testing of the Dashboard UI, there should be a test to required that every input and clickable element has an id attribute to ensure that it is easy to find using xpath.

Describe the solution you'd like
This id attribute name or header should be "static" and unique so that the name does not change each release can be search with relative precision when the same element appears multiple times in the page

Describe alternatives you've considered
CI test would be best so it could be run against every PR

Additional context
N/A

Implement PUT notebook image

Implement the /notebook input for PUT to modify a custom note book images.

Update frontend unit testing to use React Testing Library

Frontend unit testing should be updated to use react testing library instead of enzyme.

[BYON] Enable toggle is enabled on images being imported/validated

Describe the bug
Enable toggle should be clickable only if the phase is Succeeded, in any other phase it should be disabled.

Steps To Reproduce
Steps to reproduce the behavior:

1. Settings -> Notebook Images
2. Import new image
3. Observe phase Importing
4. See that enable toggle is clickable
5. Wait for phase to turn into Validating
6. See that enable toggle is still clickable

Expected behavior
Visibility should be changeable only on image in Succeeded state

Additional context

true-2022-04-12_13.37.41.mp4

/cc @dlabaj

All links point to JuypterHub

All "Launch " links point to JupyterHUb route

define available components via openshift labels on the routes

I can't tell if you are already doing this from the code: Was thinking it might be elegant to have the dash just look for available routes by a special odh label. That would also make it easy to customize with additional routes for a customer, if desired.

I see you have a sort of javascript database of attributes. Conceivably it could all be stored in configmaps created by the operator, which also could be extended by adding custom configmaps.

converge red-hat-data-services fork

Most of the active development seems to be happening in https://github.com/red-hat-data-services/odh-dashboard which is as of now 39 commits ahead of this upstream version.
The red-hat-data-services fork can expose additional content like tutorials via the data directory.
This is useful for other installations of ODH, like https://www.operate-first.cloud/

Unfortunately, the configuration of the widgets in the data directory is maintained right in the repository, which makes it hard to install a version with a different set of widgets

[BYON] Design REST API for BYON

Design the rest API for BYON. This is needed to get agreement on what should be implemented between the backend and frontend.

Disappeared commits

Describe the bug
PRs #39 and #38 were merged into master but they are missing. It messed up my fork repo... Where did those commits go?

Expected behavior
Commits should not disappear

/cc @cfchase @jeff-phillips-18

[KFNBC] Integrate listing the images in project view.

Integrate listing KFNBC images in the project view being done in the prototype branch.

[KFNBC] User name check against dedicated-admins membership does not match against Google auth user with [email protected]

Describe the bug
When logging into the cluster via Google Authentication, the user is created with <ORG USERNAME>@<Google Apps Org Domain> as their ocp username. When the full username is added to the dedicated-admins groups the Dashboard won't enable settings due to it finding the user use <ORG USERNAME> without the domain

I am not sure if this is restricted to Google as the Identity Provider

Steps To Reproduce
Steps to reproduce the behavior:

1. Add an OCP identity provider with Google for authentication
2. Add the Google user to the dedicated-admins group
3. Login to the ODH Dashboard and see that admin Settings are not visible in the UI
4. Check the OCP users to confirm that they do exists oc get users <ORG USERNAME>@<Google Apps Org Domain>

Expected behavior
The dedicated-admins user membership check works based on the actual OCP user name that is created

Workaround (if any)
Add the shortname for the user to the dedicated-admins group

Open Data Hub Version
BYON notebook build

Dashboard Version
v1.0.11

OpenShift Version
Version #: 4.10
Provider: OpenShift Dedicated

Additional context
Add any other context about the problem here.

How to build the image?

Please provide a how-to for building the application image (so that we can setup automation for it in the future)

Add ability for ISV Data to be installed via operator.

Currently the ISV data (application definitions, getting started markdown, quickstarts, and documentation resources) exist in yaml files that are checked into the odh-dashboard repo and installed/read locally on the odh-dashboard pod. 

These yaml files should be installed separately by the operator so that they can be easily updated and new ISVs can be added without rereleasing and deploying the dashboard.

The following PRs need to be updated to get this feature into ODH.

#97
opendatahub-io/odh-manifests#482

Add ability to have Cluster Settings for ODH Administrators

An ODH administrator would like to have the ability to have cluster settings where they can set, enable, and disable specific features. These features include things such as PVC, set idle times for their netbooks, etc. See the mockup below:

https://marvelapp.com/prototype/8jb2bb8/screen/85378714

In order to support these features, we need to add the ability to show the Cluster Settings section when an ODH administrator is logged into the ODH Dashboard.

[KFNBC] Add backend / controller integration support for size

Integrate the backend and controller for KFNBC image sizes.

• Controller code is ready and available.
• UI Backend code has been added to talk to the controller.

BYON - Add the ability to edit custom notebook image package details.

As a user of ODH I would like to have the ability to modify the package description for my own custom image as shown in the mockups below.

https://marvelapp.com/prototype/6dcfc3h/screen/85139857

Change Thriftserver icon to differentiate from Spark

Context: #32 (comment)

Add feature flag for enabling telemetry in the Dashboard

Is your feature request related to a problem? Please describe.
Telemetry is enabled downstream but should be disabled by default for ODH Dashboard deployments

Describe the solution you'd like
Add a feature flag to enabled/disable telemetry

Describe alternatives you've considered
Add an optional build flag that can be toggled to include it in the image

Additional context
N/A

Backport BYON Image stream from Red Hat DataService to ODH.

Back port image stream BYON features from https://github.com/red-hat-data-services/odh-dashboard to https://github.com/opendatahub-io/odh-dashboard/ .

While doing this make sure image stream version of BYON is available along with the pipelines version.

Replace Superset PNG with SVG

[BYON] Implement POST /notebook endpoint

Implement the /notebook input for POST to import a custom note book image. This should import the specified notebook image according to the REST API specification.

Add ability to set the PVC size in cluster settings.

An ODH administrator would like to have the ability to set the PVC size in cluster settings. See the mockup below:

https://marvelapp.com/prototype/8jb2bb8/screen/85378714

Details surrounding the implementation of this issue include:

• The default PVC size should be 20GB.
• Min PVC size: 1 GiB
• Max PVC size: 16384 BiB
• No decimals values allowed.
• The config map to edit in the ODH namespace is "singleuser_pvc_size"

Add support for dynamically loading the branding assests for ODH

Is your feature request related to a problem? Please describe.
In order to support the use of ODH in the downstream component, we should support the dynamic loading of branding assets for the dashboard.

Describe the solution you'd like
Ideally this would be supported at build time to allow us to easily override assets for ODH branding vs downstream

Describe alternatives you've considered
N/A

Additional context
N/A

Implement GET single notebook image

Implement the /notebook/{notebookId} input for GET to retrieve the list of a single custom note book image.

S3 Browser

Manipulating object storage data from a notebook is not intuitive and requires code for basic operations (upload, copy, delete,...). Several solutions can be implemented at Jupyter level:

• https://github.com/IBM/jupyterlab-s3-browser
• https://github.com/danielfrg/s3contents

An S3 browser could also be implemented at the ODH UI level.

That's open for discussion (other solutions, pros, cons, comments,...)

Simplify deployment

If you remove the namespaceentries from install/odh/base/kustomization.yamland install/odh/base/role_binding.yaml, the overlay called default is not needed for a standard ODH deployment and you can directly add:

- kustomizeConfig:
        repoRef:
          name: dashboard
          path: install/odh
      name: odh-dashboard

and

    - name: dashboard
      uri: 'https://github.com/opendatahub-io/odh-dashboard/tarball/master'

to the ODH instance YAML.
That's much easier imho than the deploy.sh script, plus it's the "standard" way to deploy an ODH component, which will make it easier to merge this as a standard component in a next release. namespace is not needed as the operator will take care of the deployment of all components in the right one.
I did not make a PR yet as I did not know what was the intent behind the deploy script, but I can easily as it's already implemented in my fork.

Enable ODH Dashboard Admin & User groups

Is your feature request related to a problem? Please describe.
In order to support administrative features in the dashboard, we should enable support for authenticated admin and users groups for the Dashboard

Describe the solution you'd like
Enable default admin & user groups for the dashboard

Describe alternatives you've considered
N/A

Additional context
N/A

[KFNB] Integrate starting and stopping notebooks

Integrate KFNBC with project view being done in the prototype branch. This will provide the ability to start and stop notebooks.

[KFNBC] Backend / controller integration support for GPU

Integrate the UI backend and the controller to KFNBC GPU.

• Controller code is ready and available.
• UI Backend code has been added to talk to the controller.

[KFNBC] UI - Add KFNB controller support to dashboard

We need to be able to support KFNB controller by displaying a tile to the user and allowing them to do the following:

Requirements:

• Add notebooks panel / tile to the ODH dashboard (only visible if notebooks CRD exists).
• Create route to KFNB page.
• Create initial page with UI from protoype / spawner
• Create a notebook object (only name and image). (API docs are missing)
• Create the corresponding route to expose the notebook pod.
• Add screen that displays the UI for KFNBC similar to the spawner UI for juypter hub.
  -- Images - Done (#254)
  -- Sizes - In progress (#238)
  -- GPUs (if applicable) - In progress #158 #264
  -- Environment variables - Included in Notebook object
  -- Secrets - In Progress (#256)
• Add ability to start and stop the notebook based on mockup below.
• Culling notebook support for current notebooks being added here #120 should also be supported for KFNBC.
• #273

Mockups for KFNBC: https://marvelapp.com/prototype/90ii3fd/screen/85876386

Refactor frontend Redux Implementation

Is your feature request related to a problem? Please describe.
Instead of using createStore, combineReducers and apply redux-thunk middleware manually, I think it would be helpful to import @reduxjs/toolkit. It contains configureStore function which will do all the things above and it contains other functions like createAsyncThunk to help better create async redux functions. Maybe it would be easier to develop and maintain the redux store of the project in the future?

Describe the solution you'd like
Refactor store, actions, reducers of redux with @reduxjs/toolkit.

Implement DELETE notebook image.

Implement the /notebook/{notebookId} input for DELETE to delete a custom note book images.

BYON - Add support for reading custom notebook validation pipeline status

As the custom notebook is progressing through the validation pipeline, we need to be able to get the current status of the pipeline status during each step until validation has completed (un)successfully.

Reference: open-services-group/byon#18

Add Backend REST API unit testing

Currently we do not have Unit tests to test our backend API. Using Fastify HTTP injection and jest we would like to add unit tests to verify our REST API. Unit testing should test all the routes that we have in our REST API. The following article details how to setup Fastify and Jest for REST API testing: https://jaywolfe.dev/blog/setup-a-fastify-app-with-jest-tests-the-right-way/

BYON - List, Filter / Search custom notebook images.

As a user of ODH I would like the ability to search / filter the list of notebook images displayed in the custom notebook image table.

https://marvelapp.com/prototype/6dcfc3h/screen/85139863

Explore allowing an administrator to enable/disable ODH components from UI

With access to the kfdef file, we could allow authorized users to update the installed components of Open Data Hub. This would require authentication through "Login with OpenShift" and verify they have access. You could allow users to customize kfdef fields with a forms wizard.

Requirements:

• Allow users to Login with OpenShift
• Allow components to be correctly:
  • installed
  • updated
  • uninstalled

[BYON] API authentication

ODH Dashboard part responsible for BYON should be available to authenticated users only. This seems to be supported for frontend, though we need to ensure the backend REST API endpoints are available to authenticated users only as well. Since the API is open to the internet, anybody can initiate an import potentially adding malicious or phishing (same name as other already available images) images... This should be mitigated.

/cc @LaVLaS @dlabaj

Revisit kustomize templates.

Should we use kustomize edit set namespace or vars (https://kubernetes-sigs.github.io/kustomize/api-reference/kustomization/vars/) instead of this?

Originally posted by @vpavlin in #13

Add the ability cull notebooks in Cluster Settings.

An ODH administrator would like to have the ability to cull their own notebooks in cluster settings. See the mockup below:

https://marvelapp.com/prototype/8jb2bb8/screen/85378714

Details surrounding the implementation of this issue include:

• Notebooks that are not culled will remain up forever.
• Value is stored in seconds.

[BYON] Add support for notebook image inspection or validation when Pipelines are not installed

Is your feature request related to a problem? Please describe.
The BYON UI should gracefully handle environments where Pipelines are not installed.

Possible Solution
If the cluster does not have Pipelines, the UI should:

• Disable/Hide the 'Status' column since verification can not be performed
  --OR--
• Fallback to a k8s native object (Job?) that can perform minimal verification/introspection

Describe alternatives you've considered
N/A

Additional context
N/A

Add ability to process markdown/rdoc and display as documentation/tutorials

We should restructure the dashboard to include internal documentation. A user with no JS knowledge should be able to create a document that is parsed and adds documentation to a the navbar menu and a set of well formatted documentation. That documentation, links specific to the ODH installation, and may also include code or notebooks.

Component logos are misaligned

Some component logos are not centered properly

Rename master branch to main branch