add react ui to containerlab

.gitlab/ci/.build-binaries.yml

@@ -16,5 +16,6 @@ build-all-binaries:
           - artifacts/venv-manager
           - artifacts/inventory-manager
           - artifacts/plugin-registry
+          - artifacts/react-ui
         expire_in: 1 week
     <<: *build-binaries

.gitlab/ci/.build-container-images.yml

@@ -75,6 +75,16 @@ build-inventory-manager-image:
         - docker push "$INVENTORY_MANAGER_IMAGE_NAME:$CI_COMMIT_REF_SLUG"
     <<: *build
 
+build-react-ui-image:
+    script:
+        - REACT_UI_IMAGE_NAME="${CI_REGISTRY_IMAGE}/react-ui"
+        - docker buildx build -t "$REACT_UI_IMAGE_NAME:$CI_COMMIT_SHA" -f "${CI_PROJECT_DIR}/react-ui/docker/webserver/Dockerfile" ./react-ui
+        - docker push "$REACT_UI_IMAGE_NAME:$CI_COMMIT_SHA"
+        - docker tag "$REACT_UI_IMAGE_NAME:$CI_COMMIT_SHA" "$REACT_UI_IMAGE_NAME:$CI_COMMIT_REF_SLUG"
+        - docker push "$REACT_UI_IMAGE_NAME:$CI_COMMIT_REF_SLUG"
+    <<: *build
+    
+
 build-integration-test-images:
     needs: ["build-controller-image"]
     script:

.gitlab/ci/.react-ui.yml

-build-react-ui:
-  stage: build
-  
\ No newline at end of file

Makefile

@@ -60,7 +60,7 @@ lint-fix: install-tools
 
 build: pre build-gosdn build-gosdnc build-plugin-registry build-venv-manager build-arista-routing-engine-app build-hostname-checker-app build-basic-interface-monitoring-app build-inventory-manager
 
-containerize-all: containerize-gosdn containerize-gosdnc containerize-plugin-registry containerize-venv-manager containerize-arista-routing-engine-app containerize-inventory-manager
+containerize-all: containerize-gosdn containerize-gosdnc containerize-plugin-registry containerize-venv-manager containerize-arista-routing-engine-app containerize-inventory-manager containerize-react-ui
 
 generate-all-certs: pre generate-root-ca generate-gosdn-certs generate-gnmi-target-certs
 

dev_env_data/clab/gosdn_slim.clab.yaml

@@ -13,6 +13,13 @@ topology:
       image: plugin-registry
       mgmt-ipv4: 172.100.0.16
 
+    react-ui:
+      kind: linux
+      image: react-ui
+      ports:
+        - 127.0.0.1:8088:80
+      mgmt-ipv4: 172.100.0.6
+
     gosdn:
       kind: linux
       image: gosdn

dev_env_data/docker-compose/basic_docker-compose.yml

@@ -75,5 +75,10 @@ services:
     command:
       start --cert /etc/gnmi-target/ssl/certs/gnmi-target-selfsigned.crt --key /etc/gnmi-target/ssl/private/gnmi-target-selfsigned.key --ca_file /etc/gnmi-target/ssl/ca.crt
 
+  react-ui:
+    image: react-ui
+    ports:
+      - 127.0.0.1:8088:80
+
 volumes:
     mongo-db-basic:

makefiles/container/Makefile

@@ -25,3 +25,6 @@ containerize-ws-events-app:
 
 containerize-inventory-manager:
 	docker buildx build --rm -t venv-manager --load -f applications/inventory-manager/inventory-manager.Dockerfile .
+
+containerize-react-ui:
+	docker buildx build --rm --load -t react-ui -f react-ui/docker/webserver/Dockerfile .

plugin-registry/plugin-registry.Dockerfile

@@ -4,8 +4,9 @@ ARG GITLAB_PROXY
 
 FROM ${GITLAB_PROXY}golang:$GOLANG_VERSION-bookworm as builder
 WORKDIR /plugin-registry/
-RUN apt-get update
-RUN apt-get -y install --no-install-recommends zip
+RUN apt-get update && \
+    apt-get -y install --no-install-recommends zip && \
+    rm -rf /var/lib/apt/lists/*
 COPY . .
 RUN --mount=type=cache,target=/root/go/pkg/mod \
     --mount=type=cache,target=/root/.cache/go-build \
@@ -21,4 +22,4 @@ WORKDIR /app/
 COPY --from=builder /plugin-registry/artifacts/plugin-registry .
 COPY --from=builder /plugin-registry/plugin-registry/plugins ./plugins
 COPY --from=builder /plugin-registry/dev_env_data/plugin-registry/plugin-store.json ./plugin-store.json
-ENTRYPOINT ["./plugin-registry", "-socket", "55057"]
+ENTRYPOINT ["./plugin-registry", "-socket", "55057"]
\ No newline at end of file

react-ui/.dockerignore

+node_modules/
+dist/
+vite/
+tmp/
+.vscode/
\ No newline at end of file

react-ui/docker/webserver/Dockerfile

-FROM nginx:alpine3.20
+FROM node:alpine3.20 as builder
+
+COPY  ./api/openapiv2/gosdn_northbound.swagger.json /app/api/openapiv2/gosdn_northbound.swagger.json
+COPY ./react-ui /app/react-ui
+
+RUN cd /app/react-ui && yarn && yarn build
 
-COPY dist /usr/share/nginx/html
-COPY docker/webserver/nginx.conf /etc/nginx/nginx.conf 
\ No newline at end of file
+
+# webserver
+FROM nginx:alpine3.20
+COPY --from=builder /app/react-ui/dist /usr/share/nginx/html
+COPY --from=builder /app/react-ui/docker/webserver/nginx.conf /etc/nginx/nginx.conf 
+EXPOSE 80
\ No newline at end of file

react-ui/docker/webserver/nginx.conf

@@ -41,7 +41,6 @@ http {
 
         #access_log  logs/host.access.log  main;
 
-
         location ^~ /api/ {
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;

react-ui/scripts/build.sh

@@ -7,7 +7,7 @@ docker run --rm \
     -w /app \
     -u $(id -u):$(id -g) \
     $IMAGE \
-    yarn install && yarn build
+    yarn && yarn build
 
 if [ $? -ne 0 ]; then
     echo "Error while building frontend app"

react-ui/vite.config.mjs

@@ -8,10 +8,11 @@ export default defineConfig({
     },
     // develop server
     server: {
+        host: true,
         port: 3000,
         proxy: {
             '/api': {
-                target: 'http://127.0.0.1:8080',
+                target: 'http://clab-gosdn_csbi_arista_base-gosdn:8080',
                 changeOrigin: true,
                 secure: false,
                 rewrite: (path) => path.replace(/^\/api/, ''),