[Frontend] Global img provider (#1571)

* Add a global image loader * update next to 13.0.0 * remove px from width/hegihts nubmers * bump versions * bump versions * bump versions * remove unecessary spaces * fix distorted iamge, add some extra memory for stability * add changelog * fix checks
open-telemetry · May 15, 2024 · a82287d · a82287d
1 parent f909932
commit a82287d
Show file tree

Hide file tree

Showing 14 changed files with 292 additions and 309 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -37,6 +37,8 @@ the release.
   ([#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))
+* [frontend] Fix imageloading issues on optimized images. bump next.js version
+  ([#1571](https://github.com/open-telemetry/opentelemetry-demo/pull/1571))
 
 ## 1.9.0
 

diff --git a/docker-compose.minimal.yml b/docker-compose.minimal.yml
@@ -188,7 +188,7 @@ services:
     deploy:
       resources:
         limits:
-          memory: 200M
+          memory: 250M
     restart: unless-stopped
     ports:
       - "${FRONTEND_PORT}"

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -257,7 +257,7 @@ services:
     deploy:
       resources:
         limits:
-          memory: 200M
+          memory: 250M
     restart: unless-stopped
     ports:
       - "${FRONTEND_PORT}"

diff --git a/src/frontend/components/CartDropdown/CartDropdown.styled.ts b/src/frontend/components/CartDropdown/CartDropdown.styled.ts
@@ -56,8 +56,8 @@ export const Item = styled.div`
 `;
 
 export const ItemImage = styled(Image).attrs({
-  width: '80px',
-  height: '80px',
+  width: '80',
+  height: '80',
 })`
   border-radius: 5px;
 `;

diff --git a/src/frontend/components/CartIcon/CartIcon.styled.ts b/src/frontend/components/CartIcon/CartIcon.styled.ts
@@ -16,8 +16,8 @@ export const CartIcon = styled.a`
 `;
 
 export const Icon = styled(Image).attrs({
-  width: '24px',
-  height: '24px',
+  width: '24',
+  height: '24',
 })`
   margin-bottom: 3px;
 `;

diff --git a/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts b/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts
@@ -79,8 +79,8 @@ export const Status = styled.div`
 `;
 
 export const ItemImage = styled(Image).attrs({
-  width: '80px',
-  height: '80px',
+  width: '80',
+  height: '80',
 })`
   border-radius: 5px;
 `;

diff --git a/src/frontend/components/CheckoutItem/CheckoutItem.tsx b/src/frontend/components/CheckoutItem/CheckoutItem.tsx
@@ -14,30 +14,6 @@ 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: {
@@ -53,7 +29,7 @@ const CheckoutItem = ({
   return (
     <S.CheckoutItem data-cy={CypressFields.CheckoutItem}>
       <S.ItemDetails>
-        <S.ItemImage src={"/images/products/" + picture} alt={name} loader={imageLoader}/>
+        <S.ItemImage src={"/images/products/" + picture} alt={name}/>
         <S.Details>
           <S.ItemName>{name}</S.ItemName>
           <p>Quantity: {quantity}</p>

diff --git a/src/frontend/components/Header/Header.styled.ts b/src/frontend/components/Header/Header.styled.ts
@@ -40,10 +40,6 @@ export const NavBarBrand = styled(Link)`
   display: flex;
   align-items: center;
   padding: 0;
-
-  img {
-    height: 30px;
-  }
 `;
 
 export const BrandImg = styled.img.attrs({

diff --git a/src/frontend/components/Header/Header.tsx b/src/frontend/components/Header/Header.tsx
@@ -11,7 +11,7 @@ const Header = () => {
       <S.NavBar>
         <S.Container>
           <S.NavBarBrand href="/">
-            <a><S.BrandImg /></a>
+            <S.BrandImg />
           </S.NavBarBrand>
           <S.Controls>
             <CurrencySwitcher />

diff --git a/src/frontend/next.config.js b/src/frontend/next.config.js
@@ -57,6 +57,10 @@ const nextConfig = {
     NEXT_PUBLIC_OTEL_SERVICE_NAME: OTEL_SERVICE_NAME,
     NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT,
   },
+  images: {
+    loader: "custom",
+    loaderFile: "./utils/imageLoader.js"
+  }
 };
 
 module.exports = nextConfig;