[flagd-ui] improved flagd-ui

Author: maindotmarcell

.env

@@ -129,6 +129,11 @@ SHIPPING_SERVICE_DOCKERFILE=./src/shippingservice/Dockerfile
 FLAGD_HOST=flagd
 FLAGD_PORT=8013
 
+#flagd-ui
+FLAGD_UI_HOST=flagd-ui
+FLAGD_UI_PORT=4000
+FLAGD_UI_DOCKERFILE=./src/flagd-ui/Dockerfile
+
 # Kafka
 KAFKA_SERVICE_PORT=9092
 KAFKA_SERVICE_ADDR=kafka:${KAFKA_SERVICE_PORT}

CHANGELOG.md

@@ -135,6 +135,7 @@ start:
 	@echo "Go to http://localhost:8080/grafana/ for the Grafana UI."
 	@echo "Go to http://localhost:8080/loadgen/ for the Load Generator UI."
 	@echo "Go to https://opentelemetry.io/docs/demo/feature-flags/ to learn how to change feature flags."
+	@echo "Go to http://localhost:8080/feature/ to to change feature flags."
 
 .PHONY: start-minimal
 start-minimal:
@@ -146,6 +147,7 @@ start-minimal:
 	@echo "Go to http://localhost:8080/grafana/ for the Grafana UI."
 	@echo "Go to http://localhost:8080/loadgen/ for the Load Generator UI."
 	@echo "Go to https://opentelemetry.io/docs/demo/feature-flags/ to learn how to change feature flags."
+	@echo "Go to http://localhost:8080/feature/ to to change feature flags."
 
 .PHONY: stop
 stop:

Makefile

@@ -182,7 +182,7 @@ services:
       - CURRENCY_SERVICE_PORT
       - VERSION=${IMAGE_VERSION}
       - OTEL_EXPORTER_OTLP_ENDPOINT
-      - OTEL_RESOURCE_ATTRIBUTES=${OTEL_RESOURCE_ATTRIBUTES},service.name=currencyservice   # The C++ SDK does not support OTEL_SERVICE_NAME
+      - OTEL_RESOURCE_ATTRIBUTES=${OTEL_RESOURCE_ATTRIBUTES},service.name=currencyservice # The C++ SDK does not support OTEL_SERVICE_NAME
     depends_on:
       otelcol:
         condition: service_started
@@ -340,6 +340,8 @@ services:
       - ENVOY_PORT
       - FLAGD_HOST
       - FLAGD_PORT
+      - FLAGD_UI_HOST
+      - FLAGD_UI_PORT
     depends_on:
       frontend:
         condition: service_started
@@ -349,6 +351,8 @@ services:
         condition: service_started
       grafana:
         condition: service_started
+      flagd-ui:
+        condition: service_started
 
   # Imageprovider
   imageprovider:
@@ -517,7 +521,7 @@ services:
     deploy:
       resources:
         limits:
-          memory: 500M               # This is high to enable supporting the recommendationCache feature flag use case
+          memory: 500M # This is high to enable supporting the recommendationCache feature flag use case
     restart: unless-stopped
     ports:
       - "${RECOMMENDATION_SERVICE_PORT}"
@@ -585,17 +589,39 @@ services:
       - FLAGD_METRICS_EXPORTER=otel
       - OTEL_RESOURCE_ATTRIBUTES
       - OTEL_SERVICE_NAME=flagd
-    command: [
-      "start",
-      "--uri",
-      "file:./etc/flagd/demo.flagd.json"
-    ]
+    command: ["start", "--uri", "file:./etc/flagd/demo.flagd.json"]
     ports:
       - 8013
     volumes:
       - ./src/flagd:/etc/flagd
-    logging:
-      *logging
+    logging: *logging
+
+  #Flagd-ui, UI for configuring the feature flagging service
+  flagd-ui:
+    image: ${IMAGE_NAME}:${DEMO_VERSION}-flagd-ui
+    container_name: flagd-ui
+    build:
+      context: ./
+      dockerfile: ${FLAGD_UI_DOCKERFILE}
+    deploy:
+      resources:
+        limits:
+          memory: 150M
+    restart: unless-stopped
+    environment:
+      - OTEL_EXPORTER_OTLP_ENDPOINT=http://${OTEL_COLLECTOR_HOST}:${OTEL_COLLECTOR_PORT_HTTP}
+      - OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE
+      - OTEL_RESOURCE_ATTRIBUTES
+      - OTEL_SERVICE_NAME=flagd-ui
+    ports:
+      - "${FLAGD_UI_PORT}"
+    depends_on:
+      otelcol:
+        condition: service_started
+      flagd:
+        condition: service_started
+    volumes:
+      - ./src/flagd:/app/data
 
   # Kafka used by Checkout, Accounting, and Fraud Detection services
   kafka:
@@ -640,7 +666,6 @@ services:
       - "${VALKEY_PORT}"
     logging: *logging
 
-
   # ********************
   # Telemetry Components
   # ********************
@@ -660,7 +685,7 @@ services:
           memory: 400M
     restart: unless-stopped
     ports:
-      - "${JAEGER_SERVICE_PORT}"         # Jaeger UI
+      - "${JAEGER_SERVICE_PORT}" # Jaeger UI
       - "${OTEL_COLLECTOR_PORT_GRPC}"
     environment:
       - METRICS_STORAGE_TYPE=prometheus
@@ -693,7 +718,11 @@ services:
         limits:
           memory: 200M
     restart: unless-stopped
-    command: [ "--config=/etc/otelcol-config.yml", "--config=/etc/otelcol-config-extras.yml" ]
+    command:
+      [
+        "--config=/etc/otelcol-config.yml",
+        "--config=/etc/otelcol-config-extras.yml",
+      ]
     user: 0:0
     volumes:
       - ${HOST_FILESYSTEM}:/hostfs:ro

docker-compose.yml

@@ -0,0 +1,56 @@
+# Dependency directories
+node_modules
+/.pnp
+.pnp.js
+
+# Next.js build output
+.next
+out
+
+# Testing
+/coverage
+
+# Production
+/build
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local env files
+.env*.local
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# IDE/Editor folders
+.idea
+.vscode
+
+# OS generated files
+Thumbs.db
+
+# Temporary files
+*.swp
+*.swo
+
+# Git related
+.git
+.gitignore
+
+# Docker related
+Dockerfile
+.dockerignore
+
+# Other
+README.md
+*.log

src/flagd-ui/.dockerignore

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

src/flagd-ui/.prettierrc

@@ -1,6 +1,33 @@
-FROM node:20.15.1-slim
-WORKDIR /data
-COPY . .
-RUN npm install
-CMD [ "/bin/bash -c 'npm run dev'" ]
+# Copyright The OpenTelemetry Authors
+# SPDX-License-Identifier: Apache-2.0
 
+FROM node:20 AS builder
+
+WORKDIR /app
+
+COPY ./src/flagd-ui/package*.json ./
+
+RUN npm ci
+
+COPY ./src/flagd-ui/. ./
+
+RUN npm run build
+
+# -----------------------------------------------------------------------------
+
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY ./src/flagd-ui/package*.json ./
+
+RUN npm ci --only=production
+
+COPY --from=builder /app/src/instrumentation.ts ./instrumentation.ts
+COPY --from=builder /app/next.config.mjs ./next.config.mjs
+
+COPY --from=builder /app/.next ./.next
+
+EXPOSE 4000
+
+CMD ["npm", "start"]

src/flagd-ui/Dockerfile

@@ -1,3 +1,5 @@
+# Flagd-ui
+
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started
@@ -13,24 +15,3 @@ pnpm dev
 # or
 bun dev
 ```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

src/flagd-ui/README.md

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  experimental: {
+    instrumentationHook: true,
+  },
+  basePath: "/feature",
+};
 
 export default nextConfig;