Skip to content

Commit

Permalink
[flagd-ui] improved flagd-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
maindotmarcell committed Oct 14, 2024
1 parent caa77b7 commit a33d686
Show file tree
Hide file tree
Showing 40 changed files with 1,259 additions and 595 deletions.
5 changes: 5 additions & 0 deletions .env
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 4 additions & 0 deletions .github/workflows/component-build-images.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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: ./
Expand Down
4 changes: 3 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ the release.
([#1727](https://github.com/open-telemetry/opentelemetry-demo/pull/1727))
* [chore] Fix binding for host's volume mount
([#1728](https://github.com/open-telemetry/opentelemetry-demo/pull/1728))
* [flagd-ui] Add UI for managing Flagd feature flags
([#1725](https://github.com/open-telemetry/opentelemetry-demo/pull/1725))

## 1.11.1

Expand Down Expand Up @@ -687,4 +689,4 @@ significant modifications will be credited to OpenTelemetry Authors.
* Added span attributes to frontend service
([#82](https://github.com/open-telemetry/opentelemetry-demo/pull/82))
* Rewrote shipping service in Rust
([#35](https://github.com/open-telemetry/opentelemetry-demo/issues/35))
([#35](https://github.com/open-telemetry/opentelemetry-demo/issues/35))
2 changes: 1 addition & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
33 changes: 32 additions & 1 deletion docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,8 @@ services:
- ENVOY_PORT
- FLAGD_HOST
- FLAGD_PORT
- FLAGD_UI_HOST
- FLAGD_UI_PORT
depends_on:
frontend:
condition: service_started
Expand All @@ -349,6 +351,8 @@ services:
condition: service_started
grafana:
condition: service_started
flagd-ui:
condition: service_started

# Imageprovider
imageprovider:
Expand Down Expand Up @@ -596,6 +600,33 @@ services:
- ./src/flagd:/etc/flagd
logging:
*logging

Check failure on line 603 in docker-compose.yml

View workflow job for this annotation

GitHub Actions / yamllint

603:1 [trailing-spaces] trailing spaces
#Flagd-ui, UI for configuring the feature flagging service

Check warning on line 604 in docker-compose.yml

View workflow job for this annotation

GitHub Actions / yamllint

604:4 [comments] missing starting space in comment
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:
Expand Down Expand Up @@ -768,7 +799,7 @@ services:
ports:
- "9200"
healthcheck:
test: curl -s http://localhost:9200/_cluster/health | grep '"status":"green"'
test: curl -s http://localhost:9200/_cluster/health | grep -q '"status":"green"'
start_period: 10s
interval: 5s
timeout: 10s
Expand Down
56 changes: 56 additions & 0 deletions src/flagd-ui/.dockerignore
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions src/flagd-ui/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"plugins": ["prettier-plugin-tailwindcss"]
}
37 changes: 32 additions & 5 deletions src/flagd-ui/Dockerfile
Original file line number Diff line number Diff line change
@@ -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"]
41 changes: 13 additions & 28 deletions src/flagd-ui/README.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,21 @@
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

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
# Flagd-ui

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
This application provides a user interface for configuring the feature flags of the flagd service.

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

To learn more about Next.js, take a look at the following resources:
## Running the application

- [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.
The application can be run with the rest of the demo using the documented docker compose or make commands.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Local development

## Deploy on Vercel
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:

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`.
105 changes: 0 additions & 105 deletions src/flagd-ui/data/output.json

This file was deleted.

7 changes: 6 additions & 1 deletion src/flagd-ui/next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
const nextConfig = {
experimental: {
instrumentationHook: true,
},
basePath: "/feature",
};

export default nextConfig;
Loading

0 comments on commit a33d686

Please sign in to comment.