Add Flagd-ui to demo docs (#5332)

Co-authored-by: Juliano Costa <[email protected]>
Co-authored-by: Juliano Costa <[email protected]>

Author: maindotmarcell

.cspell/en-words.txt

@@ -26,6 +26,7 @@ checkoutservice
 Chronosphere
 classpath
 cncf
+configurator
 comms
 currencyservice
 daemonset
@@ -40,6 +41,7 @@ EMEA
 erlang
 errorf
 featureflagservice
+flagd
 frauddetectionservice
 frontendproxy
 github

content/en/docs/demo/architecture.md

@@ -19,6 +19,7 @@ cartservice(Cart Service):::dotnet
 checkoutservice(Checkout Service):::golang
 currencyservice(Currency Service):::cpp
 emailservice(Email Service):::ruby
+flagd(Flagd-ui):::typescript
 frauddetectionservice(Fraud Detection Service):::kotlin
 frontend(Frontend):::typescript
 frontendproxy(Frontend Proxy <br/>&#40Envoy&#41):::cpp
@@ -33,6 +34,7 @@ queue[(queue<br/>&#40Kafka&#41)]
 
 Internet -->|HTTP| frontendproxy
 frontendproxy -->|HTTP| frontend
+frontendproxy -->|HTTP| flagd
 loadgenerator -->|HTTP| frontendproxy
 frontendproxy -->|HTTP| imageprovider
 

content/en/docs/demo/docker-deployment.md

@@ -71,6 +71,7 @@ Once the images are built and containers are started you can access:
 - Jaeger UI: <http://localhost:8080/jaeger/ui/>
 - Tracetest UI: <http://localhost:11633/>, only when using
   `make run-tracetesting`
+- Flagd configurator UI: <http://localhost:8080/feature>
 
 ## Changing the demo's primary port number
 

content/en/docs/demo/feature-flags.md

@@ -4,14 +4,32 @@ aliases:
   - feature_flags
   - services/feature-flag
   - services/featureflagservice
-cSpell:ignore: flagd loadgenerator OLJCESPC7Z
+cSpell:ignore: loadgenerator OLJCESPC7Z
 ---
 
 The demo provides several feature flags that you can use to simulate different
 scenarios. These flags are managed by [`flagd`](https://flagd.dev), a simple
-feature flag service that supports [OpenFeature](https://openfeature.dev). Flag
-values are stored in the `src/flagd/demo.flagd.json` file. To enable a flag,
-change the `defaultVariant` value in the config file for a given flag to "on".
+feature flag service that supports [OpenFeature](https://openfeature.dev).
+
+Flag values can be changed through the user interface provided at
+<http://localhost:8080/feature> when running the demo. Changing the values
+through this user interface will be reflected in the flagd service.
+
+There are two options when it comes to changing the feature flags through the
+user interface:
+
+- **Basic View**: A user friendly view in which default variants (the same
+  options that need to be changed when configuring through the raw file) can be
+  selected and saved for each feature flag. Currently, the basic view does not
+  support fractional targeting.
+
+- **Advanced View**: A view in which the raw configuration JSON file is loaded
+  and can be edited within the browser. The view provides the flexibility that
+  comes with editing a raw JSON file, however it also provides schema checking
+  to ensure that the JSON is valid and that the provided configuration values
+  are correct.
+
+## Implemented feature flags
 
 | Feature Flag                        | Service(s)       | Description                                                                                               |
 | ----------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------- |

content/en/docs/demo/kubernetes-deployment.md

@@ -74,6 +74,7 @@ With the frontendproxy port-forward set up, you can access:
 - Grafana: <http://localhost:8080/grafana/>
 - Load Generator UI: <http://localhost:8080/loadgen/>
 - Jaeger UI: <http://localhost:8080/jaeger/ui/>
+- Flagd configurator UI: <http://localhost:8080/feature>
 
 ### Expose Demo components using service or ingress configurations
 

content/en/docs/demo/requirements/architecture.md

@@ -71,6 +71,8 @@ application written in Swift.
 Feature flagging is a crucial part of cloud native application development. The
 demo uses OpenFeature, a CNCF incubating project, to manage feature flags.
 
+Feature flags can be set through the flagd configurator user interface.
+
 ## Orchestration and Deployment
 
 All services should run on Kubernetes. The OpenTelemetry Collector should be

content/en/docs/demo/screenshots/flagd-configurator-advanced.png

@@ -33,3 +33,9 @@ aliases: [demo_screenshots]
 ## Load Generator UI
 
 ![load-generator-ui](load-generator-ui.png)
+
+## Flagd Configurator
+
+| Basic view                                           | Advanced view                                              |
+| ---------------------------------------------------- | ---------------------------------------------------------- |
+| ![flagd-ui-basic-view](flagd-configurator-basic.png) | ![flagd-ui-advanced-view](flagd-configurator-advanced.png) |

content/en/docs/demo/screenshots/flagd-configurator-basic.png

@@ -2,7 +2,6 @@
 title: Telemetry Features
 linkTitle: Telemetry Features
 aliases: [demo_features, features]
-cSpell:ignore: flagd
 ---
 
 ## OpenTelemetry

content/en/docs/demo/screenshots/index.md

@@ -2,7 +2,7 @@
 title: OpenTelemetry Distro
 linkTitle: Distro
 weight: 110
-cSpell:ignore: configurator distro distros loglevel
+cSpell:ignore: distro distros loglevel
 ---
 
 In order to make using OpenTelemetry and auto-instrumentation as quick as

content/en/docs/demo/telemetry-features/_index.md

@@ -3,8 +3,7 @@ title: PHP zero-code instrumentation
 linkTitle: PHP
 weight: 30
 aliases: [/docs/languages/php/automatic]
-# prettier-ignore
-cSpell:ignore: centos configurator democlass epel myapp pecl phar remi unindented userland
+cSpell:ignore: centos democlass epel myapp pecl phar remi unindented userland
 ---
 
 ## Requirements