Merge pull request open-telemetry#1725 from maindotmarcell/add-flagd-ui

Add flagd UI

Author: julianocosta89

.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}

.github/workflows/component-build-images.yml

@@ -111,6 +111,10 @@ jobs:
             tag_suffix: shippingservice
             context: ./
             setup-qemu: true
+          - file: ./src/flagd-ui/Dockerfile
+            tag_suffix: flagdui
+            context: ./
+            setup-qemu: true
           - file: ./test/tracetesting/Dockerfile
             tag_suffix: traceBasedTests
             context: ./

CHANGELOG.md

@@ -23,6 +23,8 @@ the release.
 * [frontend] fix imageSlowLoad headers not applied
   to 1.8.0 together with other dependencies
   ([#1733](https://github.com/open-telemetry/opentelemetry-demo/pull/1733))
+* [flagd-ui] Add UI for managing Flagd feature flags
+  ([#1725](https://github.com/open-telemetry/opentelemetry-demo/pull/1725))
 
 ## 1.11.1
 

Makefile

@@ -134,7 +134,7 @@ start:
 	@echo "Go to http://localhost:8080/jaeger/ui for the Jaeger UI."
 	@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:

docker-compose.yml

@@ -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:
@@ -597,6 +601,33 @@ services:
     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:
     image: ${IMAGE_NAME}:${DEMO_VERSION}-kafka

src/flagd-ui/.dockerignore

@@ -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/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

src/flagd-ui/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# 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

src/flagd-ui/.prettierrc

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

src/flagd-ui/Dockerfile

@@ -0,0 +1,33 @@
+# 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/README.md

@@ -0,0 +1,25 @@
+# Flagd-ui
+
+This application provides a user interface for configuring the feature
+flags of the flagd service.
+
+This is a [Next.js](https://nextjs.org/) project.
+
+## Running the application
+
+The application can be run with the rest of the demo using the documented
+docker compose or make commands.
+
+## Local development
+
+To run the app locally for development you must copy
+`src/flagd/demo.flagd.json` into `src/flagd-ui/data/demo.flagd.json`
+(create the directory and file if they do not exist yet). Make sure you're
+in the `src/flagd-ui` directory and run
+the following command:
+
+```bash
+npm run dev
+```
+
+Then you must navigate to `localhost:4000/feature`.

src/flagd-ui/next.config.mjs

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