From 45412493894df9caa359c3acbda539db3b173bb6 Mon Sep 17 00:00:00 2001 From: "krisztian.klucsik" Date: Thu, 21 Mar 2024 14:05:43 +0100 Subject: [PATCH] slowload with flagd poc --- docker-compose.minimal.yml | 2 + docker-compose.yml | 8 +- src/flagd/demo.flagd.json | 9 + .../components/ProductCard/ProductCard.tsx | 42 ++- .../components/ProductList/ProductList.tsx | 14 +- src/frontend/package-lock.json | 239 ++++++++++++++++-- src/frontend/package.json | 5 + src/frontendproxy/envoy.tmpl.yaml | 14 + 8 files changed, 298 insertions(+), 35 deletions(-) diff --git a/docker-compose.minimal.yml b/docker-compose.minimal.yml index a158135b0b..a02caa7b77 100644 --- a/docker-compose.minimal.yml +++ b/docker-compose.minimal.yml @@ -209,6 +209,8 @@ services: - PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT - OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE - WEB_OTEL_SERVICE_NAME=frontend-web + - FLAGD_HOST + - FLAGD_PORT depends_on: adservice: condition: service_started diff --git a/docker-compose.yml b/docker-compose.yml index 34a394f8bd..5235984ccb 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -223,7 +223,7 @@ services: "file:./etc/flagd/demo.flagd.json" ] ports: - - 8013 + - "${FLAGD_PORT}" volumes: - ./src/flagd:/etc/flagd logging: @@ -290,6 +290,8 @@ services: - OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE - WEB_OTEL_SERVICE_NAME=frontend-web - OTEL_COLLECTOR_HOST + - FLAGD_HOST + - FLAGD_PORT depends_on: adservice: condition: service_started @@ -311,6 +313,8 @@ services: condition: service_started imageprovider: condition: service_started + flagd: + condition: service_started logging: *logging # Frontend Proxy (Envoy) @@ -344,6 +348,8 @@ services: - OTEL_COLLECTOR_PORT_HTTP - OTEL_RESOURCE_ATTRIBUTES - ENVOY_PORT + - FLAGD_HOST + - FLAGD_PORT depends_on: frontend: condition: service_started diff --git a/src/flagd/demo.flagd.json b/src/flagd/demo.flagd.json index 5234fcce55..27655ecd97 100644 --- a/src/flagd/demo.flagd.json +++ b/src/flagd/demo.flagd.json @@ -69,6 +69,15 @@ "off": false }, "defaultVariant": "off" + }, + "imageSlowLoad": { + "description": "slowLoading iamges in the frontend", + "state": "ENABLED", + "variants": { + "on": true, + "off": false + }, + "defaultVariant": "on" } } } diff --git a/src/frontend/components/ProductCard/ProductCard.tsx b/src/frontend/components/ProductCard/ProductCard.tsx index 467ac32f21..96f72df2e9 100644 --- a/src/frontend/components/ProductCard/ProductCard.tsx +++ b/src/frontend/components/ProductCard/ProductCard.tsx @@ -7,18 +7,43 @@ import ProductPrice from '../ProductPrice'; import * as S from './ProductCard.styled'; import { useState, useEffect } from 'react'; import { RequestInfo } from 'undici-types'; +import { useBooleanFlagValue, OpenFeature} from '@openfeature/react-sdk'; +import {FlagdWebProvider} from '@openfeature/flagd-web-provider' interface IProps { product: Product; } -function getImageWithHeaders(url: RequestInfo, headers: { - 'x-envoy-fault-delay-request': string - ; - }) { - return fetch(url, { headers }).then((res) => res.blob()); +async function getImageWithHeaders(url: RequestInfo, headers: Record) { + const res = await fetch(url, { headers }); + return await res.blob(); } +/** + * We connect to flagd through the envoy proxy, straight from the browser, for this we need to know the current hostname and port. + * During building and serverside rendering, these are undefined so we use some conditionals and default values. + */ +let hostname = ""; +let port = 80; +let tls = false; + +if (typeof window !== "undefined" && window.location) { + hostname = window.location.hostname; + port = window.location.port ? parseInt(window.location.port, 10) : 80; + tls = window.location.protocol === "https:"; +} + + +OpenFeature.setProvider(new FlagdWebProvider({ + host: hostname, + pathPrefix: "flagservice", + port: port, + tls: tls, + maxRetries: 3, + maxDelay: 10000, +})); + + const ProductCard = ({ product: { id, @@ -29,10 +54,13 @@ const ProductCard = ({ units: 0, nanos: 0, }, - }, + } }: IProps) => { - const headers = {'x-envoy-fault-delay-request':"5000", + + const imageSlowLoad = useBooleanFlagValue('imageSlowLoad', false); + const headers = {'x-envoy-fault-delay-request': imageSlowLoad ? "5000" : "1", 'Cache-Control': 'no-cache'} + const [imageSrc, setImageSrc] =useState(""); useEffect(() => { diff --git a/src/frontend/components/ProductList/ProductList.tsx b/src/frontend/components/ProductList/ProductList.tsx index 84820289a2..ca512ead9e 100644 --- a/src/frontend/components/ProductList/ProductList.tsx +++ b/src/frontend/components/ProductList/ProductList.tsx @@ -5,18 +5,22 @@ import { CypressFields } from '../../utils/Cypress'; import { Product } from '../../protos/demo'; import ProductCard from '../ProductCard'; import * as S from './ProductList.styled'; +import { OpenFeatureProvider, OpenFeature } from '@openfeature/react-sdk'; interface IProps { productList: Product[]; } const ProductList = ({ productList }: IProps) => { + const client = OpenFeature.getClient(); return ( - - {productList.map(product => ( - - ))} - + + + {productList.map(product => ( + + ))} + + ); }; diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 48cff87418..e7941dcb5c 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -9,6 +9,11 @@ "version": "0.1.0", "dependencies": { "@grpc/grpc-js": "1.9.13", + "@openfeature/flagd-provider": "^0.12.0", + "@openfeature/flagd-web-provider": "^0.6.0", + "@openfeature/react-sdk": "^0.2.2-experimental", + "@openfeature/server-sdk": "^1.13.2", + "@openfeature/web-sdk": "^1.0.0", "@opentelemetry/api": "1.7.0", "@opentelemetry/auto-instrumentations-node": "0.40.2", "@opentelemetry/auto-instrumentations-web": "0.34.0", @@ -79,6 +84,32 @@ "node": ">=6.9.0" } }, + "node_modules/@bufbuild/connect": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@bufbuild/connect/-/connect-0.13.0.tgz", + "integrity": "sha512-eZSMbVLyUFtXiZNORgCEvv580xKZeYQdMOWj2i/nxOcpXQcrEzTMTA7SZzWv4k4gveWCOSRoWmYDeOhfWXJv0g==", + "deprecated": "Connect has moved to its own org @connectrpc and has a stable v1. Run `npx @connectrpc/connect-migrate@latest` to update. See https://github.com/connectrpc/connect-es/releases/tag/v0.13.1 for details.", + "peerDependencies": { + "@bufbuild/protobuf": "^1.2.1" + } + }, + "node_modules/@bufbuild/connect-web": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@bufbuild/connect-web/-/connect-web-0.13.0.tgz", + "integrity": "sha512-Ys9VFDWYktD9yFQSLOlkpsD42LonDNMCysLCfjXFuxlupYuf4f7qg0zkT5bESyTfqk4xtRDSSGR3xygaj/ONIQ==", + "deprecated": "Connect has moved to its own org @connectrpc and has a stable v1. Run `npx @connectrpc/connect-migrate@latest` to update. See https://github.com/connectrpc/connect-es/releases/tag/v0.13.1 for details.", + "dependencies": { + "@bufbuild/connect": "0.13.0" + }, + "peerDependencies": { + "@bufbuild/protobuf": "^1.2.1" + } + }, + "node_modules/@bufbuild/protobuf": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.2.1.tgz", + "integrity": "sha512-cwwGvLGqvoaOZmoP5+i4v/rbW+rHkguvTehuZyM2p/xpmaNSdT2h3B7kHw33aiffv35t1XrYHIkdJSEkSEMJuA==" + }, "node_modules/@colors/colors": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", @@ -1059,6 +1090,126 @@ "node": ">= 8" } }, + "node_modules/@openfeature/core": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@openfeature/core/-/core-1.0.0.tgz", + "integrity": "sha512-xbtVVfZZQu0CZKql9KY8RWfM6Pm1dcoev0z15UL+MUxRnzNuAIM1gGX6FXztRousUvzq8D/y77Qs2hUppDAdcg==", + "peer": true + }, + "node_modules/@openfeature/flagd-core": { + "version": "0.1.11", + "resolved": "https://registry.npmjs.org/@openfeature/flagd-core/-/flagd-core-0.1.11.tgz", + "integrity": "sha512-tLIqTNTSb5UNQbfbm7nFUhPGe3TicjJUw42NgkWss76K+opwIuGS8eDzKWhshn3269W+3rLC6MA8iuZb6go8pQ==", + "dependencies": { + "ajv": "^8.12.0", + "imurmurhash": "0.1.4", + "json-logic-engine": "1.3.1", + "object-hash": "3.0.0", + "semver": "7.5.3", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@openfeature/core": ">=0.0.16" + } + }, + "node_modules/@openfeature/flagd-core/node_modules/ajv": { + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz", + "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/@openfeature/flagd-core/node_modules/json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==" + }, + "node_modules/@openfeature/flagd-core/node_modules/semver": { + "version": "7.5.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz", + "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@openfeature/flagd-provider": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@openfeature/flagd-provider/-/flagd-provider-0.12.0.tgz", + "integrity": "sha512-tshYSJXmjoV2OE7e5bUksPvoWSawC9J5Pke/lg4TET7oWo7kiMo4VoRzCHeN4wMNXjbin6Tvxr4yMtz365lbdQ==", + "dependencies": { + "@openfeature/flagd-core": "~0.1.10", + "@protobuf-ts/runtime-rpc": "2.9.0", + "lru-cache": "10.0.1", + "util": "0.12.5" + }, + "peerDependencies": { + "@grpc/grpc-js": "~1.8.0 || ~1.9.0 || ~1.10.0", + "@openfeature/server-sdk": "^1.13.0" + } + }, + "node_modules/@openfeature/flagd-provider/node_modules/lru-cache": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz", + "integrity": "sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==", + "engines": { + "node": "14 || >=16.14" + } + }, + "node_modules/@openfeature/flagd-web-provider": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@openfeature/flagd-web-provider/-/flagd-web-provider-0.6.0.tgz", + "integrity": "sha512-nGzOgyMzmlAf+Tn3tRrlqdZnPZvlJeCzMXXV3lQoAb1tbR79795n8UKR509Uk9FMMMLcaUEeNdgpg9miT5dsFw==", + "dependencies": { + "@bufbuild/connect": "0.13.0", + "@bufbuild/connect-web": "0.13.0", + "@bufbuild/protobuf": "1.2.1" + }, + "peerDependencies": { + "@openfeature/web-sdk": "^1.0.0" + } + }, + "node_modules/@openfeature/react-sdk": { + "version": "0.2.2-experimental", + "resolved": "https://registry.npmjs.org/@openfeature/react-sdk/-/react-sdk-0.2.2-experimental.tgz", + "integrity": "sha512-EwDL7pkNCpLsRhopOpeAyjnUeCq1scdSEWl2m3MnEYvj13v0ANHhum1zgE7O/8MXGJTUtr2qe17oMa/4UqCyfg==", + "peerDependencies": { + "@openfeature/web-sdk": ">=0.4.14", + "react": ">=16.8.0" + } + }, + "node_modules/@openfeature/server-sdk": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@openfeature/server-sdk/-/server-sdk-1.13.2.tgz", + "integrity": "sha512-FPZdeuu3AN/rWHcdyohXGb3C/pIYK+rJN+v4x67ZFue+PmR9Fydorl5PNbAIHq/v8Tbk3b6lIXzXaTish1njAQ==", + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "@openfeature/core": "1.0.0" + } + }, + "node_modules/@openfeature/web-sdk": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@openfeature/web-sdk/-/web-sdk-1.0.0.tgz", + "integrity": "sha512-+5xXe0z9RqSWw/oMz2hTkjQfoMgt8aHcLTg/dR9E5zEPU/aH2c1AAvQ6yOp/PhguUidEyQzyzUtZT+uRHcWtuQ==", + "peerDependencies": { + "@openfeature/core": "1.0.0" + } + }, "node_modules/@opentelemetry/api": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.7.0.tgz", @@ -2322,6 +2473,19 @@ "@opentelemetry/api": "^1.1.0" } }, + "node_modules/@protobuf-ts/runtime": { + "version": "2.9.4", + "resolved": "https://registry.npmjs.org/@protobuf-ts/runtime/-/runtime-2.9.4.tgz", + "integrity": "sha512-vHRFWtJJB/SiogWDF0ypoKfRIZ41Kq+G9cEFj6Qm1eQaAhJ1LDFvgZ7Ja4tb3iLOQhz0PaoPnnOijF1qmEqTxg==" + }, + "node_modules/@protobuf-ts/runtime-rpc": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@protobuf-ts/runtime-rpc/-/runtime-rpc-2.9.0.tgz", + "integrity": "sha512-h2S86+u2cNJACjzbBubbjKmNrnXkTmJ9yJHW4t7ZVS9xdV1C68blsVIh3Su4ghR8Nlj0459FuIUTsjWR8hA/7g==", + "dependencies": { + "@protobuf-ts/runtime": "^2.9.0" + } + }, "node_modules/@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", @@ -3366,7 +3530,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==", - "dev": true, "engines": { "node": ">= 0.4" }, @@ -3530,7 +3693,6 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz", "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==", - "dev": true, "dependencies": { "function-bind": "^1.1.2", "get-intrinsic": "^1.2.1", @@ -3978,7 +4140,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz", "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==", - "dev": true, "dependencies": { "get-intrinsic": "^1.2.1", "gopd": "^1.0.1", @@ -4767,8 +4928,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { "version": "3.3.2", @@ -4916,7 +5076,6 @@ "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==", - "dev": true, "dependencies": { "is-callable": "^1.1.3" } @@ -5038,7 +5197,6 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz", "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==", - "dev": true, "dependencies": { "function-bind": "^1.1.2", "has-proto": "^1.0.1", @@ -5211,7 +5369,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", - "dev": true, "dependencies": { "get-intrinsic": "^1.1.3" }, @@ -5253,7 +5410,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz", "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==", - "dev": true, "dependencies": { "get-intrinsic": "^1.2.2" }, @@ -5265,7 +5421,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz", "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==", - "dev": true, "engines": { "node": ">= 0.4" }, @@ -5277,7 +5432,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", - "dev": true, "engines": { "node": ">= 0.4" }, @@ -5289,7 +5443,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", - "dev": true, "dependencies": { "has-symbols": "^1.0.2" }, @@ -5415,7 +5568,6 @@ "version": "0.1.4", "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", - "dev": true, "engines": { "node": ">=0.8.19" } @@ -5442,8 +5594,7 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/ini": { "version": "2.0.0", @@ -5468,6 +5619,21 @@ "node": ">= 0.4" } }, + "node_modules/is-arguments": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", + "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", + "dependencies": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-array-buffer": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz", @@ -5534,7 +5700,6 @@ "version": "1.2.7", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==", - "dev": true, "engines": { "node": ">= 0.4" }, @@ -5613,7 +5778,6 @@ "version": "1.0.10", "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz", "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==", - "dev": true, "dependencies": { "has-tostringtag": "^1.0.0" }, @@ -5788,7 +5952,6 @@ "version": "1.1.12", "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz", "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==", - "dev": true, "dependencies": { "which-typed-array": "^1.1.11" }, @@ -5931,6 +6094,14 @@ "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", "dev": true }, + "node_modules/json-logic-engine": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/json-logic-engine/-/json-logic-engine-1.3.1.tgz", + "integrity": "sha512-ek2rHlbzVjsWG/5HM8P/ljYrYS5nDFYtSHk2r/U4oaUGKRWyZo7bDyDiLmYSfEmZp2LJMgnjVo2b0tHc+cqVHQ==", + "engines": { + "node": ">=12.22.7" + } + }, "node_modules/json-schema": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz", @@ -6418,6 +6589,14 @@ "node": ">=0.10.0" } }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "engines": { + "node": ">= 6" + } + }, "node_modules/object-inspect": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", @@ -6911,7 +7090,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", - "dev": true, "engines": { "node": ">=6" } @@ -7046,6 +7224,14 @@ "node": ">=0.10.0" } }, + "node_modules/require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/require-in-the-middle": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/require-in-the-middle/-/require-in-the-middle-7.2.0.tgz", @@ -7259,7 +7445,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz", "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==", - "dev": true, "dependencies": { "define-data-property": "^1.1.1", "get-intrinsic": "^1.2.1", @@ -7983,7 +8168,6 @@ "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", - "dev": true, "dependencies": { "punycode": "^2.1.0" } @@ -8006,6 +8190,18 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/util": { + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", + "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==", + "dependencies": { + "inherits": "^2.0.3", + "is-arguments": "^1.0.4", + "is-generator-function": "^1.0.7", + "is-typed-array": "^1.1.3", + "which-typed-array": "^1.1.2" + } + }, "node_modules/uuid": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", @@ -8122,7 +8318,6 @@ "version": "1.1.13", "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz", "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==", - "dev": true, "dependencies": { "available-typed-arrays": "^1.0.5", "call-bind": "^1.0.4", diff --git a/src/frontend/package.json b/src/frontend/package.json index 32e4fdcea4..d3138a87ff 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -12,6 +12,11 @@ }, "dependencies": { "@grpc/grpc-js": "1.9.13", + "@openfeature/flagd-provider": "^0.12.0", + "@openfeature/flagd-web-provider": "^0.6.0", + "@openfeature/react-sdk": "^0.2.2-experimental", + "@openfeature/server-sdk": "^1.13.2", + "@openfeature/web-sdk": "^1.0.0", "@opentelemetry/api": "1.7.0", "@opentelemetry/auto-instrumentations-node": "0.40.2", "@opentelemetry/auto-instrumentations-web": "0.34.0", diff --git a/src/frontendproxy/envoy.tmpl.yaml b/src/frontendproxy/envoy.tmpl.yaml index 2cdd0e32c1..060e195ec6 100644 --- a/src/frontendproxy/envoy.tmpl.yaml +++ b/src/frontendproxy/envoy.tmpl.yaml @@ -47,6 +47,8 @@ static_resources: route: { cluster: grafana } - match: { prefix: "/images" } route: { cluster: imageprovider, prefix_rewrite: "/" } + - match: { prefix: "/flagservice/" } + route: { cluster: flagservice, prefix_rewrite: "/" } - match: { prefix: "/" } route: { cluster: frontend } http_filters: @@ -117,6 +119,18 @@ static_resources: socket_address: address: ${IMAGE_PROVIDER_HOST} port_value: ${IMAGE_PROVIDER_PORT} + - name: flagservice + type: STRICT_DNS + lb_policy: ROUND_ROBIN + load_assignment: + cluster_name: flagservice + endpoints: + - lb_endpoints: + - endpoint: + address: + socket_address: + address: ${FLAGD_HOST} + port_value: ${FLAGD_PORT} - name: loadgen type: STRICT_DNS lb_policy: ROUND_ROBIN