Contains changes for Local monitoring demo

Dockerfile

@@ -1,40 +1,26 @@
 FROM node:16 AS builder
 
-WORKDIR /builder
-
-RUN npm config set legacy-peer-deps true
-
-COPY package.json ./
-
-RUN npm install 
+WORKDIR /app
 
 COPY . ./
 
-COPY deploy.sh /deploy.sh
-
-RUN ./deploy.sh -c
-
-FROM registry.access.redhat.com/ubi8/nginx-118
+RUN npm config set legacy-peer-deps true \
+  && npm install \
+  && KRUIZE_UI_ENV=production npm run build
 
-USER root
+FROM nginx:latest
 
-COPY --from=builder /builder/dist/* /usr/share/nginx/html
+RUN rm /etc/nginx/conf.d/default.conf \
+  &&mkdir -p /var/cache/nginx/client_temp /var/run/nginx \
+  && chown -R nginx:nginx /var/cache/nginx /var/run/nginx \
+  && touch /var/run/nginx.pid \
+  && chown nginx:nginx /var/run/nginx.pid
 
-#RUN rm -rf /etc/nginx/conf.d/default.conf
+# Switch to the non-root user
+USER nginx
 
-#COPY ./nginx.conf /etc/nginx/conf.d
-
-#USER default
+COPY --from=builder /app/dist/* /usr/share/nginx/html/
 
 EXPOSE 80
 
-# WORKDIR /etc/nginx
-
-# RUN cp nginx.conf /tmp
-# RUN sed -i 's|listen       \[::\]:8080 default_server|listen       8080|' /tmp/nginx.conf
-# RUN sed -i 's|listen       8080 default_server;||' /tmp/nginx.conf
-# RUN cat /tmp/nginx.conf >nginx.conf
-
-
-
-#ENTRYPOINT ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,68 +1,26 @@
-# kruize-ui
+# Kruize-UI
 
-This repository contains the code for Kruize Autotune user interface. The objective behind creating the UI is to enable newbies to explore and contribute to Autotune and simplify the initial steps of starting an Autotune experiment. The UI significantly reduces the burden on user to understand, operate and work with Autotune. Not only this it also helps better explain and present what remarkable optimizations Autotune can bring to site reliability engineering.
+This repository contains the code for Kruize user interface. The objective behind creating the UI is to enable users to explore and contribute to Kruize. The UI significantly reduces the burden on user to understand, operate and work with Kruize. Not only this it also helps better represent the remarkable optimizations Kruize can bring to your optimization usecases.
 
-## Quick Start
-
-### Clone Repository
+This application is built using [Patternfly and React](https://www.patternfly.org/v4/get-started/developers)
 
-```
-git clone [email protected]:kruize/kruize-ui.git
-```
+## Before You Start
 
-### Go to the kruize folder
-
-```
-cd kruize-ui
-```
+Kruize UI needs Kruize server running locally. You can setup Kruize [from here](https://github.com/kruize/kruize-demos/tree/main/remote_monitoring_demo). 
 
-### Switch to mvp_demo branch
+Also, make sure you have [`Node.js`](https://nodejs.org/en/) and [`npm`](https://www.npmjs.com/) installed. Check the currently maintained versions at https://nodejs.org/en/about/releases/.
 
-```
-git fetch origin
-git checkout -b mvp_demo origin/mvp_demo
-```
-
-### Install Node Package Manager
+## Quick Start
 
 ```
+git clone [email protected]:kruize/kruize-ui.git
+cd kruize-ui
 npm install
+export CLUSTER_IP=$(minikube ip) 
+export KRUIZE_PORT=$(kubectl -n monitoring  get svc kruize --no-headers -o=custom-columns=PORT:.spec.ports[*].nodePort 2>/dev/null)
+npm run start:dev
 ```
 
-### Run the UI
-
-To run the kruize ui you can select any of the 2 options :
-
-1. Native way<br />
-   If you are starting the UI for the very first time, it is suggested to
-   Latest Node.js source code can be downloaded from [here](https://nodejs.org/en/download/).
-   To run the Kruize-ui: clone the repository and then execute the following command to run the launch script locally.<br />
-
-```
-./deploy.sh -d
-```
-
-<br />
-
-2. Containerized way<br />
-
-We make use of nginx as a default react server for the UI.
-Create the image using the following command<br />
-
-```
- docker build -t kruize-ui .
-
-```
-
-Run the application using the following command
-
-```
-docker run --rm -it -p 8080:8080 kruize-ui
-```
-
-here ui-demo is the image name.<br />
-Use http://localhost:8080/ to view the UI in Browser.
-
 ## Code Origin
 
-This repository uses the patternfly-react-seed base code as copied from [Patternfly Seed](https://github.com/patternfly/patternfly-react-seed).
+This repository uses the patternfly-react-seed base code as taken from [Patternfly Seed](https://github.com/patternfly/patternfly-react-seed).

deploy.sh

@@ -1,20 +1,83 @@
 #!/bin/bash
+
+export KRUIZE_UI_IMAGE="quay.io/kruize/kruize-ui:0.0.1"
+KRUIZE_UI_MANIFEST_FILE="kruize-ui-nginx-setup.yaml"
+MANIFEST_TEMPLATE="./manifests/templates/kruize-ui-nginx-setup-template.yaml"
+
+launch_to_kube_with_image=false
+is_image_set=false
+image_name=""
+
+POD_NAME="kruize-ui-nginx-pod"
+SERVICE_NAME="kruize-ui-nginx-service"
+NAMESPACE="monitoring"
+
 function start_gui_dev_mode() {
     if ! command -v npm
     then
         echo "npm is NOT Installed on your machine."	
     else
     source getotps.sh
 	 npm run build
-     npm run start
+     npm run start:dev
     fi
 }
 
 function start_gui_docker_mode() {
     npm run build
 }
 
-while getopts ":dc" gopts;
+# Check the status of a pod
+function check_pod_status() {
+    local status=$(kubectl get pods -n "$NAMESPACE" "$POD_NAME" -o jsonpath='{.status.phase}')
+
+    if [[ "${status}" == "Running" ]]; then
+        echo "Pod ${POD_NAME} is running."
+    else
+        echo "Pod ${POD_NAME} is not running. Status: ${status}. Exiting"
+        exit 1
+    fi
+}
+
+function launch_gui_kube_mode() {
+    if [ -f "./manifests/dynamic/kruize-ui-nginx-setup.yaml" ]; then
+        # Remove existing deployments
+        kubectl delete -f ./manifests/dynamic/
+    fi
+
+    if ${is_image_set}; then
+        unset KRUIZE_UI_IMAGE
+        export KRUIZE_UI_IMAGE="${image_name}"
+    fi
+
+    export KRUIZE_UI_NAMESPACE="${NAMESPACE}"
+
+    envsubst < ./manifests/templates/kruize-ui-nginx-setup-template.yaml > "./manifests/dynamic/${KRUIZE_UI_MANIFEST_FILE}"
+
+    echo ${manifest_file_content}
+
+    # Re-Launch the UI deployment
+    kubectl apply -f ./manifests/dynamic/
+
+    # Sleep for 10 secs for UI to come up
+    echo -n "Waiting for 10 secs for UI pod to start "
+    for ((i = 0; i < 10; i++)); do
+        echo -n "."
+        sleep 1
+    done
+
+    echo " Done."
+    echo "Checking pod status"
+    check_pod_status
+
+    port=$(kubectl -n ${NAMESPACE} get services | grep "${SERVICE_NAME}" | awk '{print $5}' | cut -d':' -f2 | cut -d'/' -f1)
+
+    echo "Kruize UI is running on port: ${port}"
+}
+
+
+
+while getopts ":dcki:e:" gopts;
     do
         case ${gopts} in 
         d)  
@@ -25,8 +88,34 @@ while getopts ":dc" gopts;
             start_gui_docker_mode
             echo "docker mode"
             ;;
+        k)
+            launch_to_kube_with_image=true
+            echo "Launching to Kubernetes"
+            ;;
+        i)
+            is_image_set=true
+            image_name="${OPTARG}"
+            ;;
+        e)
+            case "${OPTARG}" in
+                minikube)
+                    NAMESPACE="monitoring"
+                    ;;
+                openshift)
+                    NAMESPACE="openshift-tuning"
+                    ;;
+                *)
+                    echo "Invalid value for option -e. Use 'minikube' or 'openshift'."
+                    exit 1
+                    ;;
+            esac
+            ;;
         \?) 
-            echo "exit, use d or c options"
+            echo "exit, use d, c, or k (with i for passing image) options"
             ;;
         esac
     done
+
+if ${launch_to_kube_with_image}; then
+    launch_gui_kube_mode
+fi