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

.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/.prettierrc

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

src/flagd-ui/Dockerfile

@@ -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/README.md

@@ -1,36 +1,25 @@
-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).
+# Flagd-ui
 
-## Getting Started
+This application provides a user interface for configuring the feature
+flags of the flagd service.
 
-First, run the development server:
+This is a [Next.js](https://nextjs.org/) project.
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-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.
+## Running the application
 
-## Learn More
+The application can be run with the rest of the demo using the documented
+docker compose or make commands.
 
-To learn more about Next.js, take a look at the following resources:
+## Local development
 
-- [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.
+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:
 
-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.
+```bash
+npm run dev
+```
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Then you must navigate to `localhost:4000/feature`.

src/flagd-ui/data/output.json

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