[frontend] Slowloading of images (#1515)

* [frontend] Add FeatureFlag Provider to client side, add http fault filter to envoy, add slowloading featureflag

* refactor web sdk usage

Signed-off-by: Michael Beemer <beeme1mr@users.noreply.github.com>

---------

Signed-off-by: Michael Beemer <beeme1mr@users.noreply.github.com>
Co-authored-by: Michael Beemer <beeme1mr@users.noreply.github.com>

Author: klucsik

CHANGELOG.md

@@ -35,6 +35,8 @@ the release.
   ([#1553](https://github.com/open-telemetry/opentelemetry-demo/pull/1553))
 * [loadgenerator] Fix feature flag hooks setter method
   ([#1556](https://github.com/open-telemetry/opentelemetry-demo/pull/1556))
+* [frontend] Slowloading of images based on imageSlowLoad flag
+  ([#1515](https://github.com/open-telemetry/opentelemetry-demo/pull/1486))
 
 ## 1.9.0
 

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

docker-compose.yml

@@ -279,6 +279,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
@@ -300,6 +302,8 @@ services:
         condition: service_started
       imageprovider:
         condition: service_started
+      flagd:
+        condition: service_started
     logging: *logging
 
   # Frontend Proxy (Envoy)
@@ -333,6 +337,8 @@ services:
       - OTEL_COLLECTOR_PORT_HTTP
       - OTEL_RESOURCE_ATTRIBUTES
       - ENVOY_PORT
+      - FLAGD_HOST
+      - FLAGD_PORT
     depends_on:
       frontend:
         condition: service_started

src/flagd/demo.flagd.json

@@ -96,6 +96,16 @@
         "off": 0
       },
       "defaultVariant": "off"
+    },
+    "imageSlowLoad": {
+      "description": "slow loading images in the frontend",
+      "state": "ENABLED",
+      "variants": {
+        "10sec": 10000,
+        "5sec": 5000,
+        "off": 0
+      },
+      "defaultVariant": "off"
     }
   }
 }

src/frontend/components/ProductCard/ProductCard.tsx

@@ -5,11 +5,19 @@ import { CypressFields } from '../../utils/Cypress';
 import { Product } from '../../protos/demo';
 import ProductPrice from '../ProductPrice';
 import * as S from './ProductCard.styled';
+import { useState, useEffect } from 'react';
+import { RequestInfo } from 'undici-types';
+import { useNumberFlagValue } from '@openfeature/react-sdk';
 
 interface IProps {
   product: Product;
 }
 
+async function getImageWithHeaders(url: RequestInfo, headers: Record<string, string>) {
+  const res = await fetch(url, { headers });
+  return await res.blob();
+}
+
 const ProductCard = ({
   product: {
     id,
@@ -22,10 +30,20 @@ const ProductCard = ({
     },
   },
 }: IProps) => {
+  const imageSlowLoad = useNumberFlagValue('imageSlowLoad', 0);
+  const [imageSrc, setImageSrc] = useState<string>('');
+
+  useEffect(() => {
+    const headers = { 'x-envoy-fault-delay-request': imageSlowLoad.toString(), 'Cache-Control': 'no-cache' };
+    getImageWithHeaders('/images/products/' + picture, headers).then(blob => {
+      setImageSrc(URL.createObjectURL(blob));
+    });
+  }, [picture, imageSlowLoad]);
+
   return (
     <S.Link href={`/product/${id}`}>
       <S.ProductCard data-cy={CypressFields.ProductCard}>
-        <S.Image $src={"/images/products/" + picture} />
+        <S.Image $src={imageSrc} />
         <div>
           <S.ProductName>{name}</S.ProductName>
           <S.ProductPrice>