feat: add Flipt to playground (#293)

Author: lukas-reining

.gitignore

@@ -45,3 +45,5 @@ Thumbs.db
 # yalc stuff
 .yalc
 yalc.lock
+
+config/flipt/flipt.db

README.md

@@ -28,6 +28,7 @@ If you're brand new to feature flagging, consider reviewing the [What are featur
   - [Harness](#harness)
   - [LaunchDarkly](#launchdarkly)
   - [Flagsmith](#flagsmith)
+  - [Flipt](#flipt)
 - [Experimenting beyond the demo](#experimenting-beyond-the-demo)
   - [Evaluation context](#evaluation-context)
 - [Troubleshooting](#troubleshooting)
@@ -420,6 +421,13 @@ Now that everything is configured, you should be able to [start the demo](#how-t
 Now that everything is configured, you should be able to [start the demo](#how-to-run-the-demo). Once it's started, select `flagsmith` from the provider list located at the bottom right of your screen. You should now be able to control the demo app via Flagsmith!
 </details>
 
+### Flipt
+
+[Flipt](https://www.flipt.io/) is an open-source feature management platform that's fully self-hosted.
+It's easy to set up, has no seat limits, and is built for developers from scale-ups to enterprises.
+
+After [starting the demo](#how-to-run-the-demo), the Flipt UI is available at [http://localhost:8080](http://localhost:8080).
+
 ## Experimenting beyond the demo
 
 ### Evaluation context

config/flipt/flipt.yml

@@ -0,0 +1,79 @@
+version: "1.2"
+namespace: default
+flags:
+  - key: new-welcome-message
+    name: new-welcome-message
+    type: BOOLEAN_FLAG_TYPE
+    description: Controls the welcome banner message
+    enabled: true
+    rollouts:
+      - threshold:
+          percentage: 100
+          value: true
+  - key: hex-color
+    name: hex-color
+    type: VARIANT_FLAG_TYPE
+    description: Controls the UI color
+    enabled: true
+    variants:
+      - key: c05543
+        name: red
+      - key: 2f5230
+        name: green
+      - key: 0d507b
+        name: blue
+      - key: d4ac0d
+        name: yellow
+    rules:
+      - segment: Signed-In-Users
+        distributions:
+          - variant: d4ac0d
+            rollout: 100
+      - segment: All-Users
+        distributions:
+          - variant: 2f5230
+            rollout: 100
+  - key: use-remote-fib-service
+    name: use-remote-fib-service
+    type: BOOLEAN_FLAG_TYPE
+    description: Controls whether the remote fib service is used
+    enabled: true
+    rollouts:
+      - segment:
+          key: Signed-In-Users
+          value: true
+      - segment:
+          key: All-Users
+  - key: fib-algo
+    name: fib-algo
+    type: VARIANT_FLAG_TYPE
+    description: The algorithm to calculate the fibbonaci sequence
+    enabled: true
+    variants:
+      - key: binet
+        name: binet
+      - key: memo
+        name: memo
+      - key: loop
+        name: loop
+      - key: recursive
+        name: recursive
+    rules:
+      - segment: All-Users
+        distributions:
+          - variant: memo
+            rollout: 100
+segments:
+  - key: All-Users
+    name: All Users
+    description: All users are matched
+    match_type: ALL_MATCH_TYPE
+  - key: Signed-In-Users
+    name: Signed In Users
+    description: Users that are signed in
+    constraints:
+      - type: STRING_COMPARISON_TYPE
+        property: email
+        operator: suffix
+        value: '@faas.com'
+    match_type: ALL_MATCH_TYPE

docker-compose.yaml

@@ -23,6 +23,8 @@ services:
       - GO_FEATURE_FLAG_URL=http://go-feature-flag:1031
       - GO_FEATURE_FLAG_WEB_URL=http://localhost:1031
       - FIB_SERVICE_URL=http://fib-service:30001
+      - FLIPT_URL=http://flipt:8080
+      - FLIPT_WEB_URL=http://localhost:8080
       - FIB_SERVICE_USER
       - FIB_SERVICE_PASS
       # Provider values come from the .env
@@ -59,6 +61,7 @@ services:
       - OTEL_EXPORTER_JAEGER_AGENT_PORT=6832
       - OTEL_SERVICE_NAME=fibonacci-service
       - GO_FEATURE_FLAG_URL=http://go-feature-flag:1031
+      - FLIPT_URL=http://flipt:8080
       - FIB_SERVICE_USER
       - FIB_SERVICE_PASS
       # Provider values come from the .env
@@ -129,5 +132,34 @@ services:
     ports:
       - "1031:1031"
 
+  init_flipt:
+    image: docker.flipt.io/flipt/flipt:v1.42.0
+    command: ["./flipt", "import", "/var/opt/flipt/flipt.yml"]
+    environment:
+      FLIPT_LOG_LEVEL: debug
+      FLIPT_META_TELEMETRY_ENABLED: false
+      FLIPT_DB_URL: "/var/opt/flipt/flipt.db"
+    volumes:
+      - "./config/flipt/flipt.yml:/var/opt/flipt/flipt.yml"
+      - "flipt:/var/opt/flipt"
+
+  flipt:
+    image: docker.flipt.io/flipt/flipt:v1.42.0
+    command: ["./flipt", "--force-migrate"]
+    environment:
+      FLIPT_CORS_ENABLED: true
+      FLIPT_TRACING_ENABLED: true
+      FLIPT_TRACING_EXPORTER: otlp
+      FLIPT_TRACING_OTLP_ENDPOINT: "otel-collector:4317"
+      FLIPT_DB_URL: "/var/opt/flipt/flipt.db"
+    volumes:
+      - "./config/flipt/flipt.yml:/var/opt/flipt/flipt.yml"
+      - "flipt:/var/opt/flipt"
+    depends_on:
+      - init_flipt
+    ports:
+      - '8080:8080'
+
 volumes:
   flagd-flags:
+  flipt:

package-lock.json

@@ -26,6 +26,8 @@
     "@openfeature/env-var-provider": "^0.3.0",
     "@openfeature/flagd-provider": "^0.13.0",
     "@openfeature/flagd-web-provider": "^0.7.0",
+    "@openfeature/flipt-provider": "^0.1.0",
+    "@openfeature/flipt-web-provider": "^0.1.0",
     "@openfeature/go-feature-flag-provider": "^0.7.0",
     "@openfeature/go-feature-flag-web-provider": "^0.2.0",
     "@openfeature/nestjs-sdk": "^0.1.3-experimental",

package.json

@@ -19,13 +19,15 @@ import {
   FLAGD_OFREP_PROVIDER_ID,
   FLAGD_PROVIDER_ID,
   FLAGSMITH_PROVIDER_ID,
+  FLIPT_PROVIDER_ID,
   GO_OFREP_PROVIDER_ID,
   GO_PROVIDER_ID,
   HARNESS_PROVIDER_ID,
   ProviderId,
   SPLIT_PROVIDER_ID,
 } from '@openfeature/utils';
 import { OFREPProvider } from '@openfeature/ofrep-provider';
+import { FliptProvider } from '@openfeature/flipt-provider';
 
 type ProviderMap = Record<
   ProviderId,
@@ -114,14 +116,14 @@ export class ProviderService {
           endpoint: process.env.GO_FEATURE_FLAG_URL as string,
         }),
       available: () => !!process.env.GO_FEATURE_FLAG_URL,
-      url: process.env.GO_FEATURE_FLAG_WEB_URL as string
+      url: process.env.GO_FEATURE_FLAG_WEB_URL as string,
     },
     [GO_OFREP_PROVIDER_ID]: {
       factory: () => {
         return new OFREPProvider({ baseUrl: process.env.GO_FEATURE_FLAG_URL as string });
       },
       available: () => !!process.env.GO_FEATURE_FLAG_URL,
-      url: process.env.GO_FEATURE_FLAG_WEB_URL as string
+      url: process.env.GO_FEATURE_FLAG_WEB_URL as string,
     },
     [FLAGSMITH_PROVIDER_ID]: {
       factory: () => {
@@ -162,6 +164,13 @@ export class ProviderService {
       available: () => !!process.env.HARNESS_KEY && !!process.env.HARNESS_KEY_WEB,
       webCredential: process.env.HARNESS_KEY_WEB,
     },
+    [FLIPT_PROVIDER_ID]: {
+      factory: () => {
+        return new FliptProvider('default', { url: process.env.FLIPT_URL as string });
+      },
+      available: () => !!process.env.FLIPT_URL,
+      url: process.env.FLIPT_WEB_URL,
+    },
   };
 
   constructor() {
@@ -206,7 +215,7 @@ export class ProviderService {
           host: p[1].host,
           port: p[1].port,
           tls: p[1].tls,
-          url: p[1].url
+          url: p[1].url,
         };
       });
   }

packages/provider/src/lib/provider.service.ts

@@ -6,6 +6,7 @@ import {
   FLAGD_OFREP_PROVIDER_ID,
   FLAGD_PROVIDER_ID,
   FLAGSMITH_PROVIDER_ID,
+  FLIPT_PROVIDER_ID,
   GO_OFREP_PROVIDER_ID,
   GO_PROVIDER_ID,
   HARNESS_PROVIDER_ID,
@@ -33,6 +34,7 @@ import { styledFib3rSteps } from './demos/fib3r/tour';
 import { JSON_UPDATED } from './types';
 import { getData } from './utils';
 import { GoFeatureFlagWebProvider } from '@openfeature/go-feature-flag-web-provider';
+import { FliptWebProvider } from '@openfeature/flipt-web-provider';
 
 type ProviderMap = Record<
   string,
@@ -130,6 +132,12 @@ export class Demos extends Component<
         return new SplitWebProvider(this.getProviderCredential(SPLIT_PROVIDER_ID));
       },
     },
+    [FLIPT_PROVIDER_ID]: {
+      factory: () => {
+        const fliptConfig = this.state.availableProviders.find((p) => p.id === FLIPT_PROVIDER_ID);
+        return new FliptWebProvider('default', { url: fliptConfig?.url });
+      },
+    },
   };
 
   constructor(props: Record<string, never>) {

packages/ui/src/app/demos.tsx

@@ -8,6 +8,7 @@ export const SPLIT_PROVIDER_ID = 'split';
 export const CB_PROVIDER_ID = 'cloudbees';
 export const FLAGSMITH_PROVIDER_ID = 'flagsmith';
 export const HARNESS_PROVIDER_ID = 'harness';
+export const FLIPT_PROVIDER_ID = 'flipt';
 
 export type ProviderId =
   | typeof ENV_PROVIDER_ID
@@ -19,7 +20,8 @@ export type ProviderId =
   | typeof SPLIT_PROVIDER_ID
   | typeof CB_PROVIDER_ID
   | typeof FLAGSMITH_PROVIDER_ID
-  | typeof HARNESS_PROVIDER_ID;
+  | typeof HARNESS_PROVIDER_ID
+  | typeof FLIPT_PROVIDER_ID;
 
 export interface AvailableProvider {
   id: ProviderId;