From 95a3b5c5258bd8c9fd66c9546c00d7c340af4182 Mon Sep 17 00:00:00 2001
From: Daniel Gomez Blanco <mail@dangb.me>
Date: Mon, 15 Apr 2024 18:17:05 +0100
Subject: [PATCH 1/2] Append slash to copy destination in adService Dockerfile
 (#1530)

As described in Docker docs:

If multiple <src> resources are specified, either directly or due to the use of a wildcard, then <dest> must be a directory, and it must end with a slash /.

Having no slash at the end of this command may make Docker build fail under certain circumstances.

Co-authored-by: Austin Parker <austin@ap2.io>
---
 src/adservice/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/adservice/Dockerfile b/src/adservice/Dockerfile
index 2baceaa33d..d4904c46d4 100644
--- a/src/adservice/Dockerfile
+++ b/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

From 4d84a64c89a84ae8cf26d4a359ac5b142565f1f1 Mon Sep 17 00:00:00 2001
From: "Pal K. Klucsik" <krisztian.klucsik@dynatrace.com>
Date: Mon, 15 Apr 2024 22:35:14 +0200
Subject: [PATCH 2/2] [frontend] Pass down image optimization requests to
 imageprovider in checkoutitem component (#1529)

* [frontend] Pass down image optimization requests to imageprovider in checkoutitem component

* updating changelog

* Update CHANGELOG.md

---------

Co-authored-by: Austin Parker <austin@ap2.io>
Co-authored-by: Juliano Costa <julianocosta89@outlook.com>
---
 CHANGELOG.md                                  |  2 ++
 .../components/CheckoutItem/CheckoutItem.tsx  | 26 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0aa24b8468..93e8e93f58 100644
--- a/CHANGELOG.md
+++ b/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))
 
 ## 1.9.0
 
diff --git a/src/frontend/components/CheckoutItem/CheckoutItem.tsx b/src/frontend/components/CheckoutItem/CheckoutItem.tsx
index 40d2ee1607..8045356b97 100644
--- a/src/frontend/components/CheckoutItem/CheckoutItem.tsx
+++ b/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>