Merge branch 'main' into kafka-queue-problems-featureflag

CHANGELOG.md

@@ -19,6 +19,8 @@ the release.
   ([#1519](https://github.com/open-telemetry/opentelemetry-demo/pull/1519))
 * [flagd] export flagd traces to otel collector
   ([#1522](https://github.com/open-telemetry/opentelemetry-demo/pull/1522))
+* [frontend] Pass down image optimization requests to imageprovider
+  ([#1522](https://github.com/open-telemetry/opentelemetry-demo/pull/1522))
 * [kafka] add kafkaQueueProblems feature flag
   ([#1528](https://github.com/open-telemetry/opentelemetry-demo/pull/1528))
 

src/adservice/Dockerfile

@@ -6,7 +6,7 @@ FROM eclipse-temurin:21-jdk as builder
 
 WORKDIR /usr/src/app/
 
-COPY ./src/adservice/gradlew* ./src/adservice/settings.gradle* ./src/adservice/build.gradle .
+COPY ./src/adservice/gradlew* ./src/adservice/settings.gradle* ./src/adservice/build.gradle ./
 COPY ./src/adservice/gradle ./gradle
 
 RUN ./gradlew

src/frontend/components/CheckoutItem/CheckoutItem.tsx

@@ -14,6 +14,30 @@ interface IProps {
   address: Address;
 }
 
+interface ImageLoaderProps {
+  src: string;
+  width: number;
+  quality?: number;
+}
+/**
+ * We connect to imageprovider 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 protocol = "http";
+
+if (typeof window !== "undefined" && window.location) {
+  hostname = window.location.hostname;
+  port = window.location.port ? parseInt(window.location.port, 10) : (window.location.protocol === "https:" ? 443 : 80);
+  protocol = window.location.protocol.slice(0, -1); // Remove trailing ':'
+}
+const imageLoader = ({ src, width, quality }: ImageLoaderProps): string => {
+  // We pass down the optimization request to the iamgeprovider service here, without this, nextJs would trz to use internal optimizer which is not working with the external imageprovider.
+  return `${protocol}://${hostname}:${port}/${src}?w=${width}&q=${quality || 75}`;
+}
+
+
 const CheckoutItem = ({
   checkoutItem: {
     item: {
@@ -29,7 +53,7 @@ const CheckoutItem = ({
   return (
     <S.CheckoutItem data-cy={CypressFields.CheckoutItem}>
       <S.ItemDetails>
-        <S.ItemImage src={"/images/products/" + picture} alt={name} />
+        <S.ItemImage src={"/images/products/" + picture} alt={name} loader={imageLoader}/>
         <S.Details>
           <S.ItemName>{name}</S.ItemName>
           <p>Quantity: {quantity}</p>