[UI] Remove Deprecated Katib UI (#2179)

* [UI] Remove Deprecated Katib UI

* Fix UI Developer doc

Author: andreyvelich

.dockerignore

@@ -4,5 +4,3 @@ docs
 manifests
 pkg/ui/*/frontend/node_modules
 pkg/ui/*/frontend/build
-pkg/new-ui/*/frontend/node_modules
-pkg/new-ui/*/frontend/build

.github/workflows/e2e-test-darts-cifar10.yaml

@@ -3,7 +3,7 @@ name: E2E Test with darts-cnn-cifar10
 on:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/e2e-test-enas-cifar10.yaml

@@ -3,7 +3,7 @@ name: E2E Test with enas-cnn-cifar10
 on:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/e2e-test-mxnet-mnist.yaml

@@ -3,7 +3,7 @@ name: E2E Test with mxnet-mnist
 on:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/e2e-test-pytorch-mnist.yaml

@@ -3,7 +3,7 @@ name: E2E Test with pytorch-mnist
 on:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/e2e-test-simple-pbt.yaml

@@ -3,7 +3,7 @@ name: E2E Test with simple-pbt
 on:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/e2e-test-tf-mnist-with-summaries.yaml

@@ -3,7 +3,7 @@ name: E2E Test with tf-mnist-with-summaries
 on:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/publish-algorithm-images.yaml

@@ -4,7 +4,7 @@ on:
   push:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 jobs:
   algorithm:

.github/workflows/publish-core-images.yaml

@@ -25,7 +25,7 @@ jobs:
           - component-name: katib-db-manager
             dockerfile: cmd/db-manager/v1beta1/Dockerfile
           - component-name: katib-ui
-            dockerfile: cmd/new-ui/v1beta1/Dockerfile
+            dockerfile: cmd/ui/v1beta1/Dockerfile
           - component-name: cert-generator
             dockerfile: cmd/cert-generator/v1beta1/Dockerfile
           - component-name: file-metrics-collector

.github/workflows/publish-trial-images.yaml

@@ -4,7 +4,7 @@ on:
   push:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 jobs:
   trial:

.github/workflows/test-go.yaml

@@ -3,7 +3,7 @@ name: Go Test
 on:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/test-lint.yaml

@@ -3,7 +3,7 @@ name: Lint Files
 on:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/test-node.yaml

@@ -3,7 +3,7 @@ name: Frontend Test
 on:
   pull_request:
     paths:
-      - pkg/new-ui/v1beta1/frontend/**
+      - pkg/ui/v1beta1/frontend/**
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -25,12 +25,12 @@ jobs:
 
       - name: Format katib code
         run: |
-          npm install prettier --prefix ./pkg/new-ui/v1beta1/frontend
+          npm install prettier --prefix ./pkg/ui/v1beta1/frontend
           make prettier-check
 
       - name: Lint katib code
         run: |
-          cd pkg/new-ui/v1beta1/frontend
+          cd pkg/ui/v1beta1/frontend
           npm run lint-check
 
   frontend-unit-tests:
@@ -48,7 +48,7 @@ jobs:
 
       - name: Fetch Kubeflow and install common code dependencies
         run: |
-          COMMIT=$(cat pkg/new-ui/v1beta1/frontend/COMMIT)
+          COMMIT=$(cat pkg/ui/v1beta1/frontend/COMMIT)
           cd /tmp && git clone https://github.com/kubeflow/kubeflow.git
           cd kubeflow
           git checkout $COMMIT
@@ -59,13 +59,13 @@ jobs:
 
       - name: Install KWA dependencies
         run: |
-          cd pkg/new-ui/v1beta1/frontend
+          cd pkg/ui/v1beta1/frontend
           npm i
           npm link kubeflow
 
       - name: Run unit tests
         run: |
-          cd pkg/new-ui/v1beta1/frontend
+          cd pkg/ui/v1beta1/frontend
           npm run test:prod
 
   frontend-ui-tests:
@@ -81,7 +81,7 @@ jobs:
 
       - name: Fetch Kubeflow and install common code dependencies
         run: |
-          COMMIT=$(cat pkg/new-ui/v1beta1/frontend/COMMIT)
+          COMMIT=$(cat pkg/ui/v1beta1/frontend/COMMIT)
           cd /tmp && git clone https://github.com/kubeflow/kubeflow.git
           cd kubeflow
           git checkout $COMMIT
@@ -91,11 +91,11 @@ jobs:
           npm link ./dist/kubeflow
       - name: Install KWA dependencies
         run: |
-          cd pkg/new-ui/v1beta1/frontend
+          cd pkg/ui/v1beta1/frontend
           npm i
           npm link kubeflow
       - name: Serve UI & run Cypress tests in Chrome and Firefox
         run: |
-          cd pkg/new-ui/v1beta1/frontend
+          cd pkg/ui/v1beta1/frontend
           npm run start & npx wait-on http://localhost:4200
           npm run ui-test-ci-all

.github/workflows/test-python.yaml

@@ -3,7 +3,7 @@ name: Python Test
 on:
   pull_request:
     paths-ignore:
-      - "pkg/new-ui/v1beta1/frontend/**"
+      - "pkg/ui/v1beta1/frontend/**"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

Makefile

@@ -143,7 +143,7 @@ endif
 
 # Prettier UI format check for Katib v1beta1.
 prettier-check:
-	npm run format:check --prefix pkg/new-ui/v1beta1/frontend
+	npm run format:check --prefix pkg/ui/v1beta1/frontend
 
 # Update boilerplate for the source code.
 update-boilerplate:

cmd/new-ui/v1beta1/Dockerfile

@@ -1,13 +1,40 @@
-# Build the Katib UI.
-FROM node:12.18.1 AS npm-build
+# --- Clone the kubeflow/kubeflow code ---
+FROM ubuntu AS fetch-kubeflow-kubeflow
 
-# Build frontend.
-ADD /pkg/ui/v1beta1/frontend /frontend
-RUN cd /frontend && npm ci
-RUN cd /frontend && npm run build
-RUN rm -rf /frontend/node_modules
+RUN apt-get update && apt-get install git -y
 
-# Build backend.
+WORKDIR /kf
+COPY ./pkg/ui/v1beta1/frontend/COMMIT ./
+RUN git clone https://github.com/kubeflow/kubeflow.git && \
+    COMMIT=$(cat ./COMMIT) && \
+    cd kubeflow && \
+    git checkout $COMMIT
+
+# --- Build the frontend kubeflow library ---
+FROM node:12 AS frontend-kubeflow-lib
+
+WORKDIR /src
+
+ARG LIB=/kf/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib
+COPY --from=fetch-kubeflow-kubeflow $LIB/package*.json ./
+RUN npm ci
+
+COPY --from=fetch-kubeflow-kubeflow $LIB/ ./
+RUN npm run build
+
+# --- Build the frontend ---
+FROM node:12 AS frontend
+
+WORKDIR /src
+COPY ./pkg/ui/v1beta1/frontend/package*.json ./
+RUN npm ci
+
+COPY ./pkg/ui/v1beta1/frontend/ .
+COPY --from=frontend-kubeflow-lib /src/dist/kubeflow/ ./node_modules/kubeflow/
+
+RUN npm run build:prod
+
+# --- Build the backend ---
 FROM golang:alpine AS go-build
 
 ARG TARGETARCH
@@ -24,11 +51,11 @@ COPY cmd/ cmd/
 COPY pkg/ pkg/
 
 # Build the binary.
-RUN CGO_ENABLED=0 GOOS=linux GOARCH=${TARGETARCH} go build -a -o katib-ui ./cmd/ui/v1beta1
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=${TARGETARCH} go build -a -o katib-ui  ./cmd/ui/v1beta1
 
-# Copy the backend and frontend into a thin image.
+# --- Compose the web app ---
 FROM alpine:3.15
 WORKDIR /app
 COPY --from=go-build /go/src/github.com/kubeflow/katib/katib-ui /app/
-COPY --from=npm-build /frontend/build /app/build
+COPY --from=frontend /src/dist/static /app/build/static/
 ENTRYPOINT ["./katib-ui"]