Add flagd UI

[maindotmarcell]

Changes

We're adding a user interface to the demo, through which users of the demo can update the Flagd feature flag configuration file in a more user friendly way.

Finished changes

• Created the flagd-ui directory
  • Initialized a Next.js application
  • Created a basic view in which users can set flags in a user friendly way
  • Created an advanced view in which users can interact with the json directly from the app (includes json schema checking to ensure that the file stays valid)
  • Created a navigation bar to be able to navigate easily between the views
  • Instrumented with OpenTelemetry automatic instrumentation
  • Added Dockerfile
• Made necessary changes to docker-compose.yaml (config file is mounted as a volume)
• Made changes to the frontend-proxy configuration so this UI is accessible at :8080/feature

Suggested roadmap for future contributions

• Support for fractional targeting
• Solution for compatibility with flagd sidecar containers for general usage (outside of the demo)

Merge Requirements

For new features contributions, please make sure you have completed the following
essential items:

• CHANGELOG.md updated to document new feature additions
• Appropriate documentation updates in the docs
• Appropriate Helm chart updates in the helm-charts

Maintainers will not merge until the above have been completed. If you're unsure
which docs need to be changed ping the
@open-telemetry/demo-approvers.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: maindotmarcell / name: Marcell Münnich (d6f2639)
• ✅ login: bornav (5e5ea33)

[beeme1mr]

Hey @maindotmarcell, I'm Mike from the OpenFeature team. Thanks for getting this started! Please let me know if you need our support.

By the way, I've been experimenting with a flagd compatible rule builder React component. Perhaps I could contribute to that once the initial version is live.

[maindotmarcell]

Hi @beeme1mr, sounds awesome! Thanks for letting me know, we could definitely add something like a rule builder to this eventually :)

[mviitane]

Hi @maindotmarcell, there are some failing checks related to markdown-lint, sanity, and license. Could you fix those so we can proceed with the PR?

[klucsik]

With 1.11.1 images, and built-from-source frontend-proxy and flagd-ui images it works fine at my side. I checked the flags from frontend: As soon as I saved in the Ui, a new EvenStream request ran, fetching the fresh flag values.

Basic view:

Advanced view:

[rogercoll]

Thanks for adding this, that's such a nice new feature!

I cannot provide my review from the code perspective (nextjs), but from the microservice project structure it looks good overall.

Could you add the microservice in the .github/workflow files too? This is needed for the image generation. You can find some examples in https://github.com/open-telemetry/opentelemetry-demo/blob/main/.github/workflows/component-build-images.yml#L38

Feel free to ping me on CNCF's Slack if you need any help/guidance with the CI part

[maindotmarcell]

@rogercoll Thank you for the feedback! Good point, I'll add the service in the workflows :)

[maindotmarcell]

@rogercoll I added the changes to the workflow, could you please check if this is correct please? 🙏

[rogercoll]

Code structure lgtm, please @open-telemetry/demo-approvers could you help to review the Typescript part?

Thanks!

[julianocosta89]

Hello @maindotmarcell 👋🏽
Thank you for this PR, the /feature is something a lot of users wanted back.

I've left a couple of comments in your PR, mainly asking you to keep the changes to the flagd-ui service only, this makes easier to review further and keep track of what you are actually adding.

One main thing that I've noticed is that you are only using the @vercel/otel instrumentation, so I've left a suggestion to get rid of all other OTel dependencies.

And last but not least, if you could change the exporter http to grpc that would make the .env file nicer.

Ah, one last thing, remember to update the package-lock.json file whenever updating the deps. Saying because I've already missed that some time ago 😊

[maindotmarcell]

@julianocosta89 I've addressed all the changes you requested. Applied everything with the exception of changing otel exporter from http to grpc as for now I could only get it working with http. Let me know if you have any additional remarks :)

[julianocosta89]

Hey @maindotmarcell thanks for taking care of the comments.

I've added a couple of minor ones.
Also are you able to merge main into your PR and take a look at the merge conflicts?

I saw that in the docker-compose.yml file you have some changes that are not from your PR, I believe merging main here will solve that.

[julianocosta89]

Great work @maindotmarcell!
Thanks for your patience while addressing all comments.

[julianocosta89]

@maindotmarcell would you be able to resolve the changelog conflict?
I'll merge the PR after that.

[maindotmarcell]

@julianocosta89 Awesome! just did it :)