From befdf0b0cab01410ce0466ed19fd92fe4c70cb93 Mon Sep 17 00:00:00 2001 From: Dev-Comfie Date: Fri, 21 Oct 2022 23:11:05 -0700 Subject: [PATCH 1/2] Improved code readability for the chRIS_store_ui_readme.html and added comments --- .../ChRIS_store_ui/ChRIS_store_ui_README.html | 687 +++++++++--------- 1 file changed, 349 insertions(+), 338 deletions(-) diff --git a/build/site/ChRISDocs/ChRIS_store_ui/ChRIS_store_ui_README.html b/build/site/ChRISDocs/ChRIS_store_ui/ChRIS_store_ui_README.html index d83b3f1..20e8fe6 100644 --- a/build/site/ChRISDocs/ChRIS_store_ui/ChRIS_store_ui_README.html +++ b/build/site/ChRISDocs/ChRIS_store_ui/ChRIS_store_ui_README.html @@ -8,349 +8,360 @@ + + + // QUICK TOUR OF THE CHRIS_STORE_UI_README.HTML + + // body section: The body section with an "article" class contains the navbar and the chRIS logo at the top, navbar items and links to different + // section of the page. body section contains 4 wrapper divs: + // The header (which contains the navigations) + // The div class body class which contains the the side nav pannel code + // The main which contains the main body code containing information about chRIS docs. + // The footer. + -
- -
-
-
- -
-
- -
- -
-

ChRIS logo ChRIS_store_ui

-
-
-
-

UI for the ChRIS Store.

-
-
-
-Homepage -
-
-
-

MIT License</a> Last Commit Stars Forks

-
-
-
-
-

Quickstart

-
-
-

First, get the ChRIS store backend running. -Assuming the backend is on http://localhost:8010/api/v1/:

-
-
-
-
docker run --rm -d --name chris_store_ui -p 3000:3000 -e REACT_APP_STORE_URL=http://localhost:8010/api/v1/ fnndsc/chris_store_ui:latest
-
-
-
-
-
-

Preconditions

-
-
-

Install latest Docker. Currently tested platforms:

-
- -
-
-
-

Optionally get the backend services up so you can fully test the UI against actual data

-
-
    -
  • -

    Install latest Docker Compose

    -
    • -
  • -

    On a Linux machine make sure to add your computer user to the docker group

    -
    • -
-
-
-

Then open a terminal and fire the backend services up:

-
-
-
-
$ git clone https://github.com/FNNDSC/ChRIS_store.git
-$ cd ChRIS_store
-$ ./make.sh up
-
-
-
-

You can later remove all the backend containers and release storage volumes with:

-
-
-
-
$ cd ChRIS_store
-$ ./make.sh down
-
-
-
-
-
-
-

Start UI development server

-
-
-

Using node and yarn package manager directly on the metal

-
-

Open a new terminal and type:

-
-
-
-
$ git clone https://github.com/FNNDSC/ChRIS_store_ui.git
-$ cd ChRIS_store_ui
-$ yarn install
-$ yarn start
-
-
-
-
-

Using docker

-
-

Open a new terminal and type:

-
-
-
-
$ git clone https://github.com/FNNDSC/ChRIS_store_ui.git
-$ cd ChRIS_store_ui
-$ docker run --rm -it -v "$(pwd):/home/localuser" -p 3000:3000 -u $(id -u):$(id -g) --name chris_store_ui fnndsc/chris_store_ui:dev
-
-
-
-

Open http://localhost:3000 to view it in the browser.

-
-
-

Precommit

-
-

Before each commit, a precommit script is run automatically to ensure all tests pass and all JavaScript code follows the Airbnb style guide.

-
-
-

Please note that if you are using the docker commands then you need to run git inside the container. -For instance open a new terminal and type:

-
-
-
-
$ docker exec -it chris_store_ui git status
-
-
-
-
-
-
-
-

Notes:

-
-
-
    -
  1. -

    Add .env.local, .env.local, .env.development.local, .env.test.local, .env.production.local file at root to change any local settings

    -
    2. -
-
-
-
-
-

Additional Notes from Create React App:

-
-
-

This project was bootstrapped with Create React App.

-
-
-
-
-

Run the interactive tests

-
-
-

Using node and yarn package manager directly on the metal

-
-

Open a new terminal and type:

-
-
-
-
$ yarn test
-
-
-
-
-

Using docker

-
-

Open a new terminal and type:

-
-
-
-
$ docker exec -it chris_store_ui yarn test
-
-
-
-

Launches the test runner in the interactive watch mode.

-
-
-

+

-
-
-

See the section about running tests for more information.

-
-
-
-
-
-

Build the ChRIS Store UI app for production

-
-
-
-
$ cd ChRIS_store_ui
-$ docker build -t local/chris_store_ui .
-
-
-
-

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!

-
-
-
-
-

Deploy and serve the ChRIS Store UI app

-
-
-
-
$ docker run --name chris_store_ui -p <desired port>:3000 -d local/chris_store_ui
-
-
-
-
-
-

Development and deployment of the ChRIS Store UI directly on the metal

-
-
-

Consult the Wiki here.

-
-
-
-
-

Learn More

-
-
-

Interested in contributing? -https://chrisproject.org/join-us

-
-
-

You can learn more in the Create React App documentation.

-
-
-

To learn React, check out the React documentation.

-
-
-
-
-
-
-
- - - + + + - + \ No newline at end of file From 48e88333795e149f2f73d32c53ec5a0bea625175 Mon Sep 17 00:00:00 2001 From: Dev-Comfie Date: Sun, 23 Oct 2022 05:44:06 -0700 Subject: [PATCH 2/2] Improved code readability for chRIS_ui_README.html and added comments --- .../ChRISDocs/ChRIS_ui/ChRIS_ui_README.html | 602 +++++++++--------- 1 file changed, 308 insertions(+), 294 deletions(-) diff --git a/build/site/ChRISDocs/ChRIS_ui/ChRIS_ui_README.html b/build/site/ChRISDocs/ChRIS_ui/ChRIS_ui_README.html index 84fbef5..62773de 100644 --- a/build/site/ChRISDocs/ChRIS_ui/ChRIS_ui_README.html +++ b/build/site/ChRISDocs/ChRIS_ui/ChRIS_ui_README.html @@ -7,320 +7,334 @@ + + + // QUick Tour of the Chris_ui_README.html code: + + + // This page was built using the Antora default UI + // Made up of three parts + // body section: The body section with an "article" class contains the navbar and the chRIS logo at the top, navbar items and links to different + // section of the page. body section contains 4 wrapper divs: + // The header (which contains the navigations) + // The div class body class which contains the the side nav pannel code + // The main which contains the main body code containing information about chRIS docs. + // The footer. + -
- +
+
+
+
-
- - -
-
- -
-
- -
- -
-

ChRIS logo ChRIS_ui

-
-
-
-

License Last Commit Code Size

-
-
-

This repository contains the reference UI for ChRIS, allowing users to create and interact with dynamic containerized workflows. -The ChRIS UI is written primarily in TypeScript and React, and uses the PatternFly React pattern library.

-
-
-
-Screenshot -
-
-
-
-
-

Try it now!

-
- ---- - - - - - - - - - - - - - - - - -
URLDescription

https://app.chrisproject.org

Stable

https://next.chrisproject.org

Latest (master)

-
-
-
-

Quickstart

-
-
-

First, get the ChRIS backend running. -Assuming the backend is on http://localhost:8000/api/v1/:

-
-
-
-
docker run --rm -d --name chris_ui -p 3000:3000 -e REACT_APP_CHRIS_UI_URL=http://localhost:8000/api/v1/ ghcr.io/fnndsc/chris_ui:latest
-
-
-
-

The ChRIS_ui is now running on http://localhost:3000/

-
-
-
-
-

Development

-
-
-

[0] Preconditions

-
-
    -
  1. -

    Install latest Docker for your platform.

    -
    -

    Currently tested platforms

    -
    -
    -
      -
    • -

      Ubuntu 18.04+ (typically 20.04+, and Pop!_OS)

      -
      • -
    • -

      Fedora 32+

      -
      • -
    • -

      Arch Linux

      -
      • -
    • -

      macOS 11.X+ (Big Sur)

      -
      • -
    -
    -
    2. -
  2. -

    Get the backend services up so you can fully test the UI against actual data.

    -
    -
      -
    • -

      Install latest Docker Compose

      -
      • -
    • -

      On a Linux machine make sure to add your computer user to the docker group

      -
      • -
    -
    -
    3. -
  3. -

    Open a terminal and start the backend services.

    -
    -
    -
     git clone https://github.com/FNNDSC/miniChRIS.git
- cd miniChRIS
- ./minichris.sh
-----+++<details>++++++<summary>++++++<strong>+++Alternatively, start the backend in development mode:
-     +++</strong>++++++</summary>+++ ### Get the backend running from ChRIS_ultron_backEnd ```bash $ git clone https://github.com/FNNDSC/ChRIS_ultron_backEnd.git $ cd ChRIS_ultron_backEnd $ ./make.sh -U -I -i ``` ### Tearing down the ChRIS backend You can later remove all the backend containers and release storage volumes with: ```bash $ cd ChRIS_ultron_backEnd $ sudo rm -r FS $ ./unmake.sh ```+++</details>+++
+      
    
+        
+        
    
+        
+        
    
+          
    ChRIS logo ChRIS_ui
    
+          
    
+            
    
+              
    
+                
    License Last Commit Code Size
    
+              
    
+              
    
+                
    This repository contains the reference UI for ChRIS, allowing users to create and interact with dynamic containerized workflows.
+                The ChRIS UI is written primarily in TypeScript and React, and uses the PatternFly React pattern library.
    
+              
    
+              
    
+                
    
+                  Screenshot
+                
    
+              
    
+            
    
+          
    
+          
    
+            
    Try it now!
    
+            
    
+              
+                +                  +                  +                
+                
+                  
+                    
+                    
+                  
+                
+                
+                  
+                    
+                    
+                  
+                  
+                    
+                    
+                  
+                
+              
    



    URLDescription
    https://app.chrisproject.org
    Stable
    https://next.chrisproject.org
    Latest (master)
    
+            
    
+          
    
+          
    
+            
    Quickstart
    
+            
    
+              
    
+                
    First, get the ChRIS backend running.
+                Assuming the backend is on http://localhost:8000/api/v1/:
    
+              
    
+              
    
+                
    
+                  
    docker run --rm -d --name chris_ui -p 3000:3000 -e REACT_APP_CHRIS_UI_URL=http://localhost:8000/api/v1/ ghcr.io/fnndsc/chris_ui:latest
    
+                
    
+              
    
+              
    
+                
    The ChRIS_ui is now running on http://localhost:3000/
    
+              
    
+            
    
+          
    
+          
    
+            
    Development
    
+            
    
+              
    
+                
    [0] Preconditions
    
+                
    
+                  
      
+                    
    1. 
+                      
      Install latest Docker for your platform.
      
+                      
      
+                        
      Currently tested platforms
      
+                      
      
+                      
      
+                        
        
+                          
      • 
+                            
        Ubuntu 18.04+ (typically 20.04+, and Pop!_OS)
        
+                            
        • 
+                            
      • 
+                            
        Fedora 32+
        
+                            
        • 
+                            
      • 
+                            
        Arch Linux
        
+                            
        • 
+                            
      • 
+                            
        macOS 11.X+ (Big Sur)
        
+                          
        • 
+                        
      
+                      
      
+                    
      2. 
+                    
    2. 
+                    
      Get the backend services up so you can fully test the UI against actual data.
      
+                    
      
+                      
        
+                        
      • 
+                          
        Install latest Docker Compose
        
+                        
        • 
+                        
      • 
+                          
        On a Linux machine make sure to add your computer user to the docker group
        
+                        
        • 
+                      
      
+                    
      
+                    
      3. 
+                    
    3. 
+                    
      Open a terminal and start the backend services.
      
+                    
      
+                      
      
+                        
       git clone https://github.com/FNNDSC/miniChRIS.git
+                        cd miniChRIS
+                        ./minichris.sh
+                        ----+++<details>++++++<summary>++++++<strong>+++Alternatively, start the backend in development mode:
+                            +++</strong>++++++</summary>+++ ### Get the backend running from ChRIS_ultron_backEnd ```bash $ git clone https://github.com/FNNDSC/ChRIS_ultron_backEnd.git $ cd ChRIS_ultron_backEnd $ ./make.sh -U -I -i ``` ### Tearing down the ChRIS backend You can later remove all the backend containers and release storage volumes with: ```bash $ cd ChRIS_ultron_backEnd $ sudo rm -r FS $ ./unmake.sh ```+++</details>+++
 
-See https://github.com/FNNDSC/miniChRIS[FNNDSC/miniChRIS] for details.
+                        See https://github.com/FNNDSC/miniChRIS[FNNDSC/miniChRIS] for details.
 
-=== [1] Configuring the backend URL
+                        === [1] Configuring the backend URL
 
-For development, it is recommended that you create either a `.env.local` or `.env.development.local` environment variables file in the root of the project.
-Copy the existing `.env` file to this new file.
-Changes to these files will be ignored by git.
+                        For development, it is recommended that you create either a `.env.local` or `.env.development.local` environment variables file in the root of the project.
+                        Copy the existing `.env` file to this new file.
+                        Changes to these files will be ignored by git.
 
-*There are four (4) major environment variables that need to be set.*
+                        *There are four (4) major environment variables that need to be set.*
 
-* Point `REACT_APP_CHRIS_UI_URL` to your local backend instance.
-By default (or if you copied the `.env` file) this is set to `+http://localhost:8000/api/v1/+`.
-* Point `REACT_APP_PFDCM_URL` to the URL of a running PFDCM instance.
-By default this is set to `+http://localhost:4005/+`.
-* Set `REACT_APP_PFDCM_CUBEKEY` and `REACT_APP_PFDCM_SWIFTKEY` to the aliases (or keys) given to CUBE and Swift while setting up PFDCM.
-By default these are both `local`.
-If you're unsure what to use, you can list CUBE and Swift keys using the PFDCM API, or ask for these keys.
+                        * Point `REACT_APP_CHRIS_UI_URL` to your local backend instance.
+                        By default (or if you copied the `.env` file) this is set to `+http://localhost:8000/api/v1/+`.
+                        * Point `REACT_APP_PFDCM_URL` to the URL of a running PFDCM instance.
+                        By default this is set to `+http://localhost:4005/+`.
+                        * Set `REACT_APP_PFDCM_CUBEKEY` and `REACT_APP_PFDCM_SWIFTKEY` to the aliases (or keys) given to CUBE and Swift while setting up PFDCM.
+                        By default these are both `local`.
+                        If you're unsure what to use, you can list CUBE and Swift keys using the PFDCM API, or ask for these keys.
 
-For details on how to set up PFDCM, refer to the https://github.com/FNNDSC/pfdcm[PFDCM readme].
+                        For details on how to set up PFDCM, refer to the https://github.com/FNNDSC/pfdcm[PFDCM readme].
 
-=== [2] Start UI development server
+                        === [2] Start UI development server
 
-You can follow any of these steps to start UI development server
+                        You can follow any of these steps to start UI development server
 
-* {blank}
-+
-==== Using `node` and `yarn` package manager directly on the metal
-+
-Open a new terminal on your system and follow these steps:
-+
-[,bash]
      
-
      
-
      
-
      
-
      
-
      $ git clone https://github.com/FNNDSC/ChRIS_ui.git
-$ cd ChRIS_ui
-$ npm i
-$ npm run dev
      
-
      
-
      
-
      4. 
-
    
-
    
-
    
-
    
-
    +
-More details can be found in the   https://github.com/FNNDSC/ChRIS_ui/wiki/Development-and-deployment-directly-on-the-metal[wiki].
-* {blank}
-+
-==== Using `docker`
-+
-Open a new terminal on your system and follow these steps:
-+
-[,bash]
    
-
    
-
    
-
    
-
    
-
    $ git clone https://github.com/FNNDSC/ChRIS_ui.git
-$ cd ChRIS_ui
-$ docker build -t fnndsc/chris_ui:dev -f Dockerfile_dev .
-$ docker run --rm -it -v $PWD:/home/localuser -p 3000:3000 -u $(id -u):$(id -g) --userns=host --name chris_ui fnndsc/chris_ui:dev
    
-
    
-
    
-
    
-
    
-
    +
-Open http://localhost:3000 to view it in the browser.
+                        * {blank}
+                        +
+                        ==== Using `node` and `yarn` package manager directly on the metal
+                        +
+                        Open a new terminal on your system and follow these steps:
+                        +
+                        [,bash]
    
+                      
    
+                    
    
+                    
    
+                      
    
+                        
    $ git clone https://github.com/FNNDSC/ChRIS_ui.git
+                        $ cd ChRIS_ui
+                        $ npm i
+                        $ npm run dev
    
+                      
    
+                    
    
+
    4. +
+
+
+
+ 
+
+                    More details can be found in the   https://github.com/FNNDSC/ChRIS_ui/wiki/Development-and-deployment-directly-on-the-metal[wiki].
+                    * {blank}
+                    +
+                    ==== Using `docker`
+                    +
+                    Open a new terminal on your system and follow these steps:
+                    +
+                    [,bash]
+
+
+
+
+ 
$ git clone https://github.com/FNNDSC/ChRIS_ui.git
+                    $ cd ChRIS_ui
+                    $ docker build -t fnndsc/chris_ui:dev -f Dockerfile_dev .
+                    $ docker run --rm -it -v $PWD:/home/localuser -p 3000:3000 -u $(id -u):$(id -g) --userns=host --name chris_ui fnndsc/chris_ui:dev
+
+
+
+
+ 
+
+                    Open http://localhost:3000 to view it in the browser.
 
-== Build the ChRIS UI app for production
+                    == Build the ChRIS UI app for production
 
-https://github.com/openshift/source-to-image#readme[Source-to-image] can be used to build this project.
+                    https://github.com/openshift/source-to-image#readme[Source-to-image] can be used to build this project.
 
-[,shell]
-
-
-
-

s2i build https://github.com/FNNDSC/ChRIS_ui quay.io/fedora/nodejs-16 s2ichrisui

-
-
-
-
== Learn More
+                    [,shell]
+
+
+
+

s2i build https://github.com/FNNDSC/ChRIS_ui quay.io/fedora/nodejs-16 s2ichrisui

+
+
+
+ 
== Learn More
 
-Interested in contributing?
-https://chrisproject.org/join-us
+                    Interested in contributing?
+                    https://chrisproject.org/join-us
 
-You can learn more in the https://facebook.github.io/create-react-app/docs/getting-started[Create React App documentation].
+                    You can learn more in the https://facebook.github.io/create-react-app/docs/getting-started[Create React App documentation].
 
-To learn React, check out the https://reactjs.org/[React documentation].
-
-
-
-
-
-
-
-
-
-
-

This page was built using the Antora default UI.

-

The source code for this UI is licensed under the terms of the MPL-2.0 license.

-
- - + To learn React, check out the https://reactjs.org/[React documentation]. + + + + + + + + + +
+

This page was built using the Antora default UI.

+

The source code for this UI is licensed under the terms of the MPL-2.0 license.

+
+ +