Fix #586: Pass categories as an input for Ad service

[madhead]

Fixes #586.

Changes

1. Pass categories as an input for Ad service
2. Randomize the ad shown, in case there are multiple ads in a response.
3. I had to bump the TS target to ES2015 to be able to use Set. I hope this is OK for a demo.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: madhead / name: Siarhei (f889af9)

[julianocosta89]

LGTM

[cartersocha]

@madhead please make a changelog entry and I'll merge 🚀

[madhead]

@cartersocha, done.

[puckpuck]

When I run this I get empty app.ads.contextKeys

[julianocosta89]

When I run this I get empty app.ads.contextKeys

@puckpuck not all of the requests:

[mviitane]

I also tested this and most of the time app.ads.contextKeys is empty. I'd assume this is not how it should be.

[madhead]

@mviitane , @julianocosta89, @puckpuck

I agree, I saw those empty requests too, but didn't address them here.

I'm not an React expert, but the bigger problem here, IMO, is that AdProvider provides not only ads, but recommendations too, violating single responsibility principle. But wherever it is used, both ads and recommendations are requested.

Looking at three usages of this provider:

1. opentelemetry-demo/src/frontend/pages/cart/index.tsx

   Lines 17 to 25 in 9096420

   	<AdProvider productIds={items.map(({ productId }) => productId)}>
   	<Layout>
   	<S.Cart>
   	{(!!items.length && <CartDetail />) || <EmptyCart />}
   	<Recommendations />
   	</S.Cart>
   	<Footer />
   	</Layout>
   	</AdProvider>

   
   Cart only uses recommendations.

2. opentelemetry-demo/src/frontend/pages/product/[productId]/index.tsx

   Lines 51 to 84 in 32d1ee6

   	<AdProvider productIds={[productId, ...items.map(({ productId }) => productId)]}>
   	<Layout>
   	<S.ProductDetail data-cy={CypressFields.ProductDetail}>
   	<S.Container>
   	<S.Image $src={picture} data-cy={CypressFields.ProductPicture} />
   	<S.Details>
   	<S.Name data-cy={CypressFields.ProductName}>{name}</S.Name>
   	<S.Description data-cy={CypressFields.ProductDescription}>{description}</S.Description>
   	<S.ProductPrice>
   	<ProductPrice price={priceUsd} />
   	</S.ProductPrice>
   	<S.Text>Quantity</S.Text>
   	<Select
   	data-cy={CypressFields.ProductQuantity}
   	onChange={event => setQuantity(+event.target.value)}
   	value={quantity}
   	>
   	{quantityOptions.map(option => (
   	<option key={option} value={option}>
   	{option}
   	</option>
   	))}
   	</Select>
   	<S.AddToCart data-cy={CypressFields.ProductAddToCart} onClick={onAddItem}>
   	<Image src="/icons/Cart.svg" height="15px" width="15px" alt="cart" /> Add To Cart
   	</S.AddToCart>
   	</S.Details>
   	</S.Container>
   	<Recommendations />
   	</S.ProductDetail>
   	<Ad />
   	<Footer />
   	</Layout>
   	</AdProvider>

   
   Product page uses both ads and recommendations.

3. opentelemetry-demo/src/frontend/pages/cart/checkout/[orderId]/index.tsx

   Lines 19 to 43 in 9096420

   	<AdProvider productIds={items.map(({ item }) => item?.productId || '')}>
   	<Layout>
   	<S.Checkout>
   	<S.Container>
   	<S.Title>Your order is complete!</S.Title>
   	<S.Subtitle>We&apos;ve sent you a confirmation email.</S.Subtitle>
   	<S.ItemList>
   	{items.map(checkoutItem => (
   	<CheckoutItem key={checkoutItem.item.productId} checkoutItem={checkoutItem} address={shippingAddress!} />
   	))}
   	</S.ItemList>
   	<S.ButtonContainer>
   	<Link href="/">
   	<Button type="submit">Continue Shopping</Button>
   	</Link>
   	</S.ButtonContainer>
   	</S.Container>
   	<Recommendations />
   	</S.Checkout>
   	<Ad />
   	<Footer />
   	</Layout>
   	</AdProvider>

   
   Order page uses both ads and recommendations.

In some of this contexts the categories are inherently empty.

I would say, this should be fixed and split into two different provider components.

But, I could just "short-circuit" this call, what do you think? Like adding a check, a guard clause, "if the categories are empty, then just return an empty list of adds". Or something similar to remove this unneeded call. A dirty hack, but it should work.

Would it be ok?

[madhead]

I totally forgot about the load generator. It might be sending incorrect requests too. I've added both fixes, please check the PR now (beware of the cached images!).

[cartersocha]

@austinlparker we should test the build time increase from 3 new containers. One thing to keep in mind is that go doesn’t have an operator instrumentation option. We’d need to implement that with the Java service or replace Go

[cartersocha]

For the architecture docs and services table my bias would be to label the language Java not Kotlin for the fraud detection service

[julianocosta89]

@cartersocha I think your comments are regarding #457, and not this one😅

[cartersocha]

Lol the perils of mobile bulk reviews @julianocosta89. Thanks

[julianocosta89]

After the update we always get a context.

[puckpuck]

Confirmed this provides proper context keys on all requests types.