Giter VIP home page Giter VIP logo

odahu-ui's Introduction

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Development How-To

UI Application communicates with next backends

  • All /api/* requests are handled by API Server
  • All /service-catalog/* requests are handled by service catalog
  • All /model/* requests are handled by Istio (istio-ingress in particular)

In production all required routing are managed by reverse-proxy server.

But in development after npm start your development server can handle only static files. So that development server starts with a proxy middleware and plays role of reverse proxy by itself. Proxy rules are described in ./src/setupProxy.js. You should provide required backends according the rules in that file. If you have deployed ODAHU system in kubernetes cluster then simplest way to do that:

# Example for API Server
kubectl port-forward svc/odahu-flow-api 5000:80 -n odahu-flow

odahu-ui's People

Contributors

vlad-tokarev avatar mcdoker18 avatar keshamin avatar gennadiyshpak avatar yuratyhun avatar karbyshevds avatar lev-titov avatar bpylypenko avatar easokol avatar

Stargazers

Dmitrii Suslov avatar  avatar  avatar  avatar  avatar  avatar

Watchers

Dmitrii Suslov avatar  avatar James Cloos avatar Oleh Mykolaishyn avatar

odahu-ui's Issues

Feedback tab

We have to create a feedback tab on the model deployment view to allow a user leaving of model feedback.

doesn't sort instances by links

description
doesn't sort by:
Toolchain, VCS ID for Model Trainings
Integration for Model Packagings
and Image pull connection ID for Model Deployment

when you try to sort by any of these columns for the first time, most possibly, it would change the order of entities but not as you expect. And if you try again to change the order, it wouldn't work.

image

Ununified model deployment default/min parameter values for odahu UI and odahu server

default and min values on UI should be unified with odahu server default values for model deployment:

model deployment:

default value of Liveness probe initial delay is 10, should be 2
default value of Readiness probe initial delay is 10, should be 2
min value of Liveness probe initial delay is 1, should be 0
min value of Readiness probe initial delay is 1, should be 0

VIEW, EDIT, YAML headers shifted right during edit on "EDIT" & "YAML" tabs of connections

description
exactly during the edit of connection with long keySecret or privateKey

steps to reproduce

  1. Create a new git connection
  2. Start to edit the connection on EDIT tab
  3. Proceed to Specification page of Edit Connection tab
  4. Put standard (long) SSH private key and press NEXT

expected behavior
no changes in headers

actual behavior
VIEW, EDIT, YAML headers shifted far along right during Review
and after moving to VIEW tab after SUBMIT (also relevant if edit on YAML tab).

screenshots
image
image

Implement UI for ModelRoute

  • User adds more than one ModelDeployment for ModelRoute and tune their weights (traffic shares)
  • User adds one model as mirror (all traffic can be duplicated)
  • Grafana Board with useful metrics

the "404 Not Found" status code is returned on the "PLAY" tab when the deployment is not Ready or Ready but not for a long enough time

Description
the "404 Not Found" status code is returned on the "PLAY" tab when the deployment is not ready or ready but not for a long enough time.

Preconditions

  • the packaging docker image is ready

Steps to Reproduce

  1. Create a deployment.
  2. Wait until deployment is Ready.
  3. Click on the deployment name on the list.
  4. Go from "VIEW" tab to the "PLAY" tab.

Actual result
the "404 Not Found" status code is returned, even though the Deployment is already ready.

Expected result
It should show that it's loading 🔄 until the "PLAY" page from the Service Catalog will be ready.

Attachments
image

Logs must be more fresh

Logs must be more fresh
We should add button "refresh" to manual forcing the refreshing logs or decrease pull period for logs

Create package button in a training view

We have to add the Create package button in the training view.

After click on the button, UI will be redirected to the "New Package" view. The training artefact will be used as default value for "artefactName" field.

number of selected entities is bigger than actually exists

Describe the bug
when you started to select (checkbox) entities and someone else deleted these entities the number of selected wouldn't change and checkboxes would work wrongly. more in gif, screenshots

Precondition
exists several trainings

To Reproduce

  1. checkbox several (1-2) entities
  2. Open a new tab with odahu UI
  3. delete one entity that was selected in step (1)
  4. return to the first tab
  5. wait until this tab self-refreshes state (without the deleted entity in step (3))

Expected behavior
the number of selected should change to the real number of selected

Actual behavior
the number of selected didn't change and checkboxes behavior yourself as there is still exists deleted entity.

Screenshot
checkbox

Makes changes to diagrams of dashboard

  1. the diagrams shouldn't go out their frames
  2. add a legend for pie charts
  3. take out axes for pie charts
  4. the diagrams at dashboard doesn't update after making changes at another browser tab.
    image

diff roles permissions

  • 'odahu-viewer' – can do any GET requests to all API resources
  • 'odahu-flow-scientist' – can run, delete, change any trainings, packagers, deployment, but can only read
    connections and integrations
  • 'odahu-admin' – can make any requests to API

For a viewer:

  • no buttons as +new, clone, delete;
  • take out checkboxes for Connections, Model Trainings, Model Packagings, Model Deployments
  • no edit tab for Connections, Model Trainings, Model Packagings, Model Deployments

for a scientist:

  • no buttons as +new, clone, delete for Connections
  • take out checkboxes for Connections
  • no edit tab for Connections

for an admin:

  • add buttons as +new, clone, delete for Toolchains, Packagers
  • add edit tab for Toolchains, Packagers
  • and add checkboxes for Toolchains, Packagers

not masked keySecret or password during `review` of connection creation

To Reproduce

  1. go to Connections panel
  2. press + New button
  3. fill in required fields and press NEXT
  4. on Specification page fill in the required fields and press NEXT

Expected behavior
you see maskes instead of actual values for Password or keySecret fields on REVIEW page

Actual behavior
you can see unmasked Password or keySecret fields on REVIEW page

Screenshots
MicrosoftTeams-image

Sort on the tables

We have to add a field on the table, which allow to sort entities by text(id, names, images and so on)

entities list should not move during sorting

description
when you sort the entities at UI and they have names with different length, and don't fit on one page (more than 5 entities).
The table head starts to move quite drastically during sorting.

proposal
improve UX and appearance by stabilizing tables of entities

screenshot
table sorting

Deployment logs

As User I need to see deployment logs including container logs & knative sheduling logs in one window the same way as it works for training & packaging tabs.

This will require:

  • add required knative logs to odahu index
  • create proper kibana requests to display all stages of deployment lifecycle logs
  • add logs tab that will embed kibana as it's done for training & packaging tabs

doesn't show changes of description of pack, train on YAML tab

Description:
After a train/pack has been changed and you move to another tab (e.g. view, edit) and comes back. the old description is shown

Steps to Reproduce:

  1. Make valid changes (for resources or artifactName) on YAML tab in desc. of train.
  2. Submit button. ("Model Training submitted" shown).
  3. Move on VIEW tab of this training.
  4. Move back on YAML tab.

Expected Result:
The updated description of the training is shown.

Actual Result:
Shown description of training before changes.

Remove extra spaces from string params

ODAHU API doesn't accept values that start or end with spaces. This spaces should be removed on client side or|and on backend.
This should be applied to all string params.

add asterisks (*) to the mandatory fields for filling

The list of forms and required fields for each form.

ODAHU Entities:

  • Connections

  • Model Trainings

  • Model Packagings

  • Model Deployments

  • Connections:

    ID, Type fields for all connections.
    image

    • git type:
      Git SSH URL, SSH private key
      image

    • docker type:
      URI, Username, Password
      image

    • gcs type:
      Project, URI, Service account secret
      image

    • azureblob type:
      URI, SAS Token
      image

    • s3 type:
      URI, Region, Access Key ID, Access Key Secret
      image

    • ecr type
      URI, Access Key ID, Access Key Secret
      image

  • Model Training:

    • Metadata step:
      ID, Model name, Model version, Toolchain, Output connection
      image
    • Specification step:
      Entrypoint
      if Data section is specified, for every data entry,
      the Connection ID and Target Path are required fields:
      image
      if Environment variables or Hyper Parameters are specified,
      for every entry the Name and Value are required fields:
      image
      image
  • Model Packaging:

    • Metadata step:
      ID, Output Connection ID, Integration
      image
    • Specification step:
      Artifact
      if Target entry is specified, Name and Connection ID are required fields.
      if Arguments entry is specified, Name and Value are required fields.
      image
  • Model Deployment:

    • Metadata step:
      ID, Image pull connection ID
      image
    • Specification step:
      Predictor, Docker image, Minimum replicas, Maximum replicas
      image

PublicAccessNotPermitted Error when you follow a link on Web UI for feedback storage on Azure

Describtion
on UI, when you try to move from ODAHU components (bento menu) > Feedback storage you get this:
image

or when you try to follow the Web UI link:
image

To Reproduce

  1. Open Web UI
  2. Click on ODAHU components (bento menu, 9 dots)
  3. Click on Feedback storage button

Expected behavior
you went to portal.azure.com and directory where the connection or feedback is pointing (where the data stored ).

Actual behavior
you get the error PublicAccessNotPermitted

Attachment
image

Environment

  • cloud provider: Microsoft Azure

help asks to pass SAS Token/service account whereas it needs a base64 token

To Reproduce

  1. go to Connections panel
  2. press + New button
  3. select Type as azureblob
  4. fill in required fields and press NEXT

Expected behavior
you should be asked to pass keySecret which is in based64 format

Actual behavior
you are asked for SAS Token on Azure:
image

and for service account on GCP type: gcs:
image

and update comment for ecr and s3 types on AWS:
image

when you create deploy pre-filled `predictor` field shows warning that `Predictor is required field`

Description
When you create deploy (through + New button) pre-filled predictor field shows warning that Predictor is required field.

Precondition

  • have succeeded packaging

Steps to Reproduce

  1. Go to 'Deployments' on sidebar.
  2. Click on '+ New' button.
  3. Fill required fields on 'Metadata' step and click NEXT.
  4. Check that Predictor is the pre-filled field.
  5. Select docker image of succeeded packaging and click NEXT.
  6. Pay attention what said under Predictor field

Actual result
Pre-filled Predictor value is not selected for field.

Expected result
Pre-filled Predictor value is placed into the field and you can proceed with Model Deployment creation.

Attachments
image

Web UI for Inference APIs

As User I need additional tab in deployment view that will display model info and allow to submit data to deployed model and see the response (maybe the same way as it works in service-registry)

cannot open the view of the Toolchain/Packager

description
when you're on Toolchain tab and try to open the view of the toolchain/packager by clicking on the ti name (link), it shows that you're trying to open the link <cluster name>/toolchains/item/<instance name> but at the end, it brings you to <cluster name>/toolchains/item/undefined/View

expected behavior
it should bring you to the view of the toolchain/packager instance view

actual behavior
it opens the tab <cluster name>/toolchains/item/undefined/View and if you try to move to YAML tab, forth and back, it continues to add undefined for example:
image

screenshot
image

transfer to wrong mlflow run from Model Training VIEW tab.

Description
when clicking on artefacts of training on VIEW tab under Results, it redirects to mlflow only to wine trainings and no matter which training I was viewing.

PreCondition

  • exists succeeded training on Training panel
  • exists several entries of experiment on mlflow, <cluster link>/mlflow/#/

To Reproduce
Steps to reproduce the behavior:

  1. Click on the name of training (go to the training VIEW tab)
  2. Click on the Run ID button

Expected behavior
you should see the <model training name> > Run...
the link should be <cluster link>/mlflow/#/experiments/5/runs/ffb06e2ec0df40f78a5e41b9a7a2279b
image

Actual behavior
you see the first training name that were run on cluster and your Run id
the link is <cluster link>/mlflow/#/experiments/0/runs/ffb06e2ec0df40f78a5e41b9a7a2279b
image

GIT settings: 'develop' self-refilling value

Description
For the creation of model training in Specification, when you completely delete Reference for GIT Settings then develop is refilled back.

To Reproduce
Steps to reproduce the behavior:

  1. On the sidebar, go to 'Trainings'
  2. Click on '+ New',
  3. Fill required fields and press 'NEXT'
  4. At the GIT Settings delete the value for Reference field

Expected behavior
When you completely delete reference it should be empty.

Actual behavior
When you delete reference it returns 'develop' value.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.