From e4207d048112708760b559f430b10542c8b33b0e Mon Sep 17 00:00:00 2001 From: RRM123 Date: Mon, 28 Mar 2022 21:31:13 -0400 Subject: [PATCH 1/5] Consolidated UI Developer Docs Resolves #258 Signed-off-by: RRM123 --- README.md | 27 ++++++++---- dashboard/origin-mlx/OLD_README.md | 8 ---- dashboard/origin-mlx/README.md | 31 ++++++++++++- dashboard/origin-mlx/developer-guide.md | 58 +------------------------ 4 files changed, 50 insertions(+), 74 deletions(-) delete mode 100644 dashboard/origin-mlx/OLD_README.md diff --git a/README.md b/README.md index f17e2550..316b62a5 100644 --- a/README.md +++ b/README.md @@ -13,11 +13,6 @@ Allows upload, registration, execution, and deployment of: - Datasets - Notebooks -For more details about the project please follow this [announcement blog post](https://lfaidata.foundation/blog/2021/09/28/machine-learning-exchange-mlx/). - - - - Additionally it provides: - Automated sample pipeline code generation to execute registered models, datasets and notebooks @@ -28,6 +23,12 @@ Additionally it provides: - Serving engine by [KFServing](https://github.com/kubeflow/kfserving) - Model Metadata schemas +For more details about the project please follow this [announcement blog post](https://lfaidata.foundation/blog/2021/09/28/machine-learning-exchange-mlx/). + + + + + ## 1. Deployment @@ -67,13 +68,21 @@ oc get route -n istio-system ## 3. Import Data and AI Assets in MLX Catalog -[Import data and AI assets using MLX's catalog importer](/docs/import-assets.md) +For information on how to import data and AI assets using MLX's catalog importer, use this [guide](/docs/import-assets.md). ## 4. Use MLX -[MLX Usage Instructions](/docs/usage-steps.md) - -## 5. Troubleshooting +For information on how to use MLX and create assets check out this [guide](/docs/usage-steps.md). + +## 5. How to Contribute + +Contributions can be made to either the UI or API. + +For information about adding new features, bug fixing, communication +or UI and API setup, please refer to this [document](CONTRIBUTING.md). + + +## 6. Troubleshooting [MLX Troubleshooting Instructions](/docs/troubleshooting.md) diff --git a/dashboard/origin-mlx/OLD_README.md b/dashboard/origin-mlx/OLD_README.md deleted file mode 100644 index fb6ea1f3..00000000 --- a/dashboard/origin-mlx/OLD_README.md +++ /dev/null @@ -1,8 +0,0 @@ -# Machine Learning Exchange - -Machine Learning Exchange is -- A consistent way for data scientists to consume multiple phases and projects in AI lifecycle -- A consistent way for operators to be able to operate across AI lifecycle -- A composable layer, so different parts of the AI lifecycle can be snapped together like legos -- A one-stop shop for people interested in training, validating, deploying and monitoring AI models -- A place where AI practioners can share their reusable assets for parts of AI lifecycle \ No newline at end of file diff --git a/dashboard/origin-mlx/README.md b/dashboard/origin-mlx/README.md index 0fb85415..b142e9b3 100644 --- a/dashboard/origin-mlx/README.md +++ b/dashboard/origin-mlx/README.md @@ -4,6 +4,8 @@ This repo contains the code for the front end UI of the Machine Learning Exchange project. +### Starting the MLX UI locally + To run this app, you'll need a current version of Node.js installed. 1. First, clone this repo: @@ -72,6 +74,8 @@ docker push /: ``` ## (Re-)Deploy to Kubernetes Cluster +For information on how to deploy MLX on a Kubernetes Cluster or OpenShift on IBM Cloud, check out the guide [here](../../docs/mlx-setup.md). +Once the clusters have been deployed, they will need to be redeployed for UI work. Change the Docker image tag in the deployment spec server/mlx-ui.yml from image: ibmandrewbutler/open-ui:add-homepage to image: /: and then run: @@ -79,8 +83,33 @@ Change the Docker image tag in the deployment spec server/mlx-ui.yml from image: kubectl delete -f ./dashboard/origin-mlx/mlx-ui.yml kubectl apply -f ./dashboard/origin-mlx/mlx-ui.yml ``` +Change the image in /manifests/base/mlx-deployments/mlx-ui.yaml under the container with the name mlx-ui at spec.template.spec.containers +``` +kubectl delete -f /manifests/base/mlx-deployments/mlx-ui.yaml +kubectl apply -f /manifests/base/mlx-deployments/mlx-ui.yaml +``` ## UI Development with Docker Compose +For information on how to get started with Docker Compose, and it's appropriate setup, check out the +[Quick Start Guide](../../quickstart/README.md). + +To bring up the Docker Compose stack run: +```Bash +docker compose --project-name mlx up +``` +Don't forget to bring the stack down with: +```Bash +docker compose --project-name mlx down +``` +To bring up the stack without the UI run: +```Bash +docker compose --project-name mlx_no_ui up minio miniosetup mysql mlx-api catalog +``` +Once finished, run: +```Bash +docker compose --project-name mlx_no_ui down +``` + You can test most code changes without a Kubernetes cluster. A K8s cluster is only required to `run` the generated sample pipeline code. Running the Quickstart with @@ -116,7 +145,7 @@ docker compose rm -v -f docker volume prune -f ``` -### Terminal 2 - Start the UI server +### Terminal 2 - Start the MLX UI locally with Docker API Navigate to the UI source folder: diff --git a/dashboard/origin-mlx/developer-guide.md b/dashboard/origin-mlx/developer-guide.md index 549ea5cf..4e1a52d8 100644 --- a/dashboard/origin-mlx/developer-guide.md +++ b/dashboard/origin-mlx/developer-guide.md @@ -23,62 +23,6 @@ Lifecycle Methods: Each component has several “lifecycle methods” that you can override to run code at particular times in the process. Putting functions in different lifecycle methods will cause the function to be run at a specific point in a component's lifecycle. An example of this is running a function after a component is being unmounted (removed or refreshed). -## Startup - -General Startup Instructions: https://github.com/machine-learning-exchange/mlx/tree/main/dashboard/origin-mlx - -### Starting the MLX UI locally - -To run this app, you'll need a current version of Node.js installed. - -1. First, clone this repo: -```Bash -git clone https://github.com/machine-learning-exchange/mlx.git -``` - -2. Next, install the dependencies by running this command from within the newly created directory: -```Bash -npm install -``` - -3. Start the app with the following command: -```Bash -npm start -``` - -4. The app should now be accessible in your web browser at: -``` -http://localhost:3000 -``` - -### Starting the MLX UI locally with Docker API -``` -git clone https://github.com/machine-learning-exchange/mlx.git -cd mlx/ -cd dashboard/origin-mlx/ -rm -rf package-lock.json  -npm install -export REACT_APP_API="localhost:8080" -export REACT_APP_RUN="false" -export REACT_APP_UPLOAD="true" -export REACT_APP_DISABLE_LOGIN="true" -npm start -``` - -### Building an MLX UI Image - -``` -cd dashboard/origin-mlx -docker build -t /: -f Dockerfile . -docker push /: -``` - -### Change the UI image on a cluster deployment -Change the image in /manifests/base/mlx-deployments/mlx-ui.yaml under the container with the name mlx-ui at spec.template.spec.containers -``` -kubectl delete -f /manifests/base/mlx-deployments/mlx-ui.yaml -kubectl apply -f /manifests/base/mlx-deployments/mlx-ui.yaml -``` ## UI File Structure @@ -133,3 +77,5 @@ src/styles/ contains most (>90%) of the page styling in css. If the style needs src/lib/api/ contains all of the calls to the MLX API. If some API call is going wrong, it will likely be an issue in this folder. + +For more information on UI Development Setup go [here](README.md) \ No newline at end of file From e2c76cdf88d824482cd9abd1b6bf7e088ba5be19 Mon Sep 17 00:00:00 2001 From: RRM123 Date: Mon, 28 Mar 2022 21:39:43 -0400 Subject: [PATCH 2/5] Made README.md point to developer-guide.md. Resolves #258 Signed-off-by: RRM123 --- dashboard/origin-mlx/README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/dashboard/origin-mlx/README.md b/dashboard/origin-mlx/README.md index b142e9b3..d5447c6e 100644 --- a/dashboard/origin-mlx/README.md +++ b/dashboard/origin-mlx/README.md @@ -214,6 +214,9 @@ which matches a previous request and the difference of the time between the two To invalidate or hard reset the cache, navigate to the settings page (clicking the three dots at the bottom of the sidebar) and click on the `Reset Cache` button. +# Development Guidlines: +For information on UI code structure, design principles, etc. check out the [MLX Developer Guide](developer-guide.md). + # Project Overview: ![MLX Overview](src/images/image1.png) From 2cd7708ac21a84f7eb766d3369544bdb386699da Mon Sep 17 00:00:00 2001 From: RRM123 <40575227+RRM123@users.noreply.github.com> Date: Mon, 4 Apr 2022 19:40:30 -0400 Subject: [PATCH 3/5] Update README.md --- dashboard/origin-mlx/README.md | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/dashboard/origin-mlx/README.md b/dashboard/origin-mlx/README.md index d5447c6e..181a3c56 100644 --- a/dashboard/origin-mlx/README.md +++ b/dashboard/origin-mlx/README.md @@ -90,26 +90,13 @@ kubectl apply -f /manifests/base/mlx-deployments/mlx-ui.yaml ``` ## UI Development with Docker Compose -For information on how to get started with Docker Compose, and it's appropriate setup, check out the -[Quick Start Guide](../../quickstart/README.md). +For information on how to get started with Docker Compose before making any changes to the UI code, check out the [Quick Start Guide](../../quickstart/README.md) and take a look at the [docker-compose.yaml](../../quickstart/docker-compose.yaml) file to understand how the individual services like ```mysql```, ```minio```, ```mlx-api```, ```mlx-ui```, etc. are working together. -To bring up the Docker Compose stack run: +The Docker Compose stack can be brought up and taken down by running the following commands. The ```--project-name``` tag takes in the following argument as the name of the docker compose stack, which can be viewed using [Docker Desktop](https://www.docker.com/products/docker-desktop/): ```Bash docker compose --project-name mlx up -``` -Don't forget to bring the stack down with: -```Bash docker compose --project-name mlx down ``` -To bring up the stack without the UI run: -```Bash -docker compose --project-name mlx_no_ui up minio miniosetup mysql mlx-api catalog -``` -Once finished, run: -```Bash -docker compose --project-name mlx_no_ui down -``` - You can test most code changes without a Kubernetes cluster. A K8s cluster is only required to `run` the generated sample pipeline code. Running the Quickstart with From 5edd3e8521a687582b0369f623a4fa560b801489 Mon Sep 17 00:00:00 2001 From: RRM123 <40575227+RRM123@users.noreply.github.com> Date: Wed, 20 Apr 2022 21:33:58 -0400 Subject: [PATCH 4/5] Update README.md Signed-off-by: @RRM123 --- dashboard/origin-mlx/README.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/dashboard/origin-mlx/README.md b/dashboard/origin-mlx/README.md index 181a3c56..5a9a38d1 100644 --- a/dashboard/origin-mlx/README.md +++ b/dashboard/origin-mlx/README.md @@ -75,7 +75,7 @@ docker push /: ## (Re-)Deploy to Kubernetes Cluster For information on how to deploy MLX on a Kubernetes Cluster or OpenShift on IBM Cloud, check out the guide [here](../../docs/mlx-setup.md). -Once the clusters have been deployed, they will need to be redeployed for UI work. +Once the cluster has been deployed, the MLX UI will need to be redeployed after changes to the UI code have been made. Change the Docker image tag in the deployment spec server/mlx-ui.yml from image: ibmandrewbutler/open-ui:add-homepage to image: /: and then run: @@ -83,16 +83,21 @@ Change the Docker image tag in the deployment spec server/mlx-ui.yml from image: kubectl delete -f ./dashboard/origin-mlx/mlx-ui.yml kubectl apply -f ./dashboard/origin-mlx/mlx-ui.yml ``` -Change the image in /manifests/base/mlx-deployments/mlx-ui.yaml under the container with the name mlx-ui at spec.template.spec.containers +Change the image in `./dashboard/origin-mlx/mlx-ui.yml` or `./manifests/base/mlx-deployments/mlx-ui.yaml` under the container with the name mlx-ui at spec.template.spec.containers. Either: ``` kubectl delete -f /manifests/base/mlx-deployments/mlx-ui.yaml kubectl apply -f /manifests/base/mlx-deployments/mlx-ui.yaml ``` +or +``` +kubectl delete -f /dashboard/origin-mlx/mlx-ui.yml +kubectl apply -f /dashboard/origin-mlx/mlx-ui.yml +``` ## UI Development with Docker Compose -For information on how to get started with Docker Compose before making any changes to the UI code, check out the [Quick Start Guide](../../quickstart/README.md) and take a look at the [docker-compose.yaml](../../quickstart/docker-compose.yaml) file to understand how the individual services like ```mysql```, ```minio```, ```mlx-api```, ```mlx-ui```, etc. are working together. +For information on how to get started with Docker Compose before making any changes to the UI code, check out the [Quick Start Guide](../../quickstart/README.md) and take a look at the [docker-compose.yaml](../../quickstart/docker-compose.yaml) file to understand how the individual services like `mysql`, `minio`, `mlx-api`, `mlx-ui`, etc. are working together. -The Docker Compose stack can be brought up and taken down by running the following commands. The ```--project-name``` tag takes in the following argument as the name of the docker compose stack, which can be viewed using [Docker Desktop](https://www.docker.com/products/docker-desktop/): +The Docker Compose stack can be brought up and taken down by running the following commands. The `--project-name` tag keeps the docker compose network and the volumes (stored assets) separate from the quickstart for development. Each docker compose project has separate network and volumes which can be viewed using [Docker Desktop](https://www.docker.com/products/docker-desktop/): ```Bash docker compose --project-name mlx up docker compose --project-name mlx down @@ -132,7 +137,7 @@ docker compose rm -v -f docker volume prune -f ``` -### Terminal 2 - Start the MLX UI locally with Docker API +### Terminal 2 - Start the MLX UI locally Navigate to the UI source folder: @@ -202,7 +207,7 @@ which matches a previous request and the difference of the time between the two To invalidate or hard reset the cache, navigate to the settings page (clicking the three dots at the bottom of the sidebar) and click on the `Reset Cache` button. # Development Guidlines: -For information on UI code structure, design principles, etc. check out the [MLX Developer Guide](developer-guide.md). +For information on UI code structure, design principles, etc. check out the [MLX UI Developer Guide](developer-guide.md). # Project Overview: From 921536baf2bfb4fe572a5ad35194fb2280d4c4f9 Mon Sep 17 00:00:00 2001 From: RRM123 <40575227+RRM123@users.noreply.github.com> Date: Wed, 20 Apr 2022 21:34:35 -0400 Subject: [PATCH 5/5] Update developer-guide.md Signed-off-by: @RRM123 --- dashboard/origin-mlx/developer-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/origin-mlx/developer-guide.md b/dashboard/origin-mlx/developer-guide.md index 4e1a52d8..453a89d8 100644 --- a/dashboard/origin-mlx/developer-guide.md +++ b/dashboard/origin-mlx/developer-guide.md @@ -78,4 +78,4 @@ src/styles/ contains most (>90%) of the page styling in css. If the style needs src/lib/api/ contains all of the calls to the MLX API. If some API call is going wrong, it will likely be an issue in this folder. -For more information on UI Development Setup go [here](README.md) \ No newline at end of file +For more information on UI Setup and Deployment go [here](README.md)