Updated clean up script and fixed UI components

Author: ujwalbukka

README.md

@@ -54,7 +54,10 @@ Once the above script finishes successfully, go to the CodePipeline page, inside
 
 ## Steps to Clean-up
 
-Run the following helper script to clean up reference solution resources:
+Run the following helper script to clean up reference solution resources.
+Please make sure "jq" JSON processor installed in your environment before invoking below script.
+
+NOTE: Below script before deleting each resource, it will prompt for user confirmation. Please make sure in your AWS account you don't have resources/stacks with names similar to what this workshop has provisioned, otherwise it might cause accidental deletion of your resources. In such cases, you can manually delete the resource/stacks following below listed steps.
 
 ```bash
 ./cleanup.sh

cleanup.sh

@@ -75,7 +75,7 @@ else
     echo "skip_flag disabled. Script will pause for confirmation before deleting resources."
 fi
 
-delete_stack_after_confirming "serverless-saas-workshop-lab1"
+# delete_stack_after_confirming "serverless-saas-workshop-lab1"
 delete_stack_after_confirming "stack-pooled"
 
 echo "$(date) cleaning up platinum tenants..."
@@ -111,7 +111,7 @@ delete_stack_after_confirming "serverless-saas"
 delete_stack_after_confirming "serverless-saas-pipeline"
 
 delete_codecommit_repo_after_confirming "aws-saas-factory-ref-serverless-saas"
-delete_codecommit_repo_after_confirming "aws-serverless-saas-workshop"
+# delete_codecommit_repo_after_confirming "aws-serverless-saas-workshop"
 
 echo "$(date) cleaning up buckets..."
 for i in $(aws s3 ls | awk '{print $3}' | grep -E "^serverless-saas-*|^sam-bootstrap-*"); do

clients/Admin/src/app/views/tenants/create/create.component.html

@@ -54,12 +54,22 @@
               color="primary"
               (click)="(submit)"
               [disabled]="!tenantForm.valid"
+              type="submit"
+              *ngIf="!submitting"
             >
               Submit
             </button>
-            <button mat-raised-button color="warn" [routerLink]="['/list']">
+            <button mat-raised-button color="warn" [routerLink]="['/tenants']" type="button" *ngIf="!submitting">
               Cancel
             </button>
+            <mat-card *ngIf="submitting" style="display: flex; justify-content: center; align-items: center">
+              <mat-progress-spinner
+                color="primary"
+                mode="indeterminate"
+                diameter="15"
+                >
+              </mat-progress-spinner>
+            </mat-card>
           </div>
         </mat-card-footer>
       </mat-card-content>

clients/Admin/src/app/views/tenants/create/create.component.ts

@@ -42,10 +42,12 @@ export class CreateComponent implements OnInit {
 
     this.tenantSvc.post(this.tenantForm.value).subscribe({
       next: () => {
+        this.submitting = false;
         this.openErrorMessageSnackBar('Successfully created new tenant!');
         this.router.navigate(['tenants']);
       },
       error: (err) => {
+        this.submitting = false;
         this.openErrorMessageSnackBar('An unexpected error occurred!');
         console.error(err);
       },

clients/Application/src/app/views/orders/create/create.component.html

@@ -57,14 +57,15 @@
                   mat-raised-button
                   color="primary"
                   type="submit"
-                  [disabled]="!orderForm.valid"
+                  [disabled]="!orderForm.valid || !productQuantity"
                 >
                   Submit
                 </button>
                 <button
                   mat-raised-button
                   color="warn"
-                  [routerLink]="['orders']"
+                  [routerLink]="['/orders']"
+                  type="button"
                 >
                   Cancel
                 </button>

clients/Application/src/app/views/orders/create/create.component.ts

@@ -46,6 +46,12 @@ export class CreateComponent implements OnInit {
     return this.orderForm.get('name');
   }
 
+  get productQuantity() {
+    return this.orderProducts
+        .filter((p) => !!p.quantity).length > 0;
+  }
+
+
   add(op: LineItem) {
     const orderProduct = this.orderProducts.find(
       (p) => p?.product.productId === op.product.productId

clients/Application/src/app/views/orders/list/list.component.html

@@ -7,7 +7,7 @@ <h2>Order List</h2>
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef>Name</th>
           <td mat-cell *matCellDef="let element">
-            <a class="link" routerLink="/orders/detail/{{ element.orderId }}">
+            <a class="link" routerLink="/orders/detail/{{ element.shardId }}:{{ element.orderId }}">
               {{ element.orderName }}
             </a>
           </td>

clients/Application/src/app/views/products/edit/edit.component.html

@@ -1,8 +1,16 @@
 <div class="product-form">
-  <form [formGroup]="productForm!">
+  <form [formGroup]="productForm" (submit)="submit()">
     <mat-card class="card">
-      <mat-card-title>Create new Product</mat-card-title>
+      <mat-card-title>Edit Product</mat-card-title>
       <mat-card-content>
+        <mat-form-field>
+          <mat-label>Product ID</mat-label>
+          <input
+            matInput
+            value="{{ productId$ | async }}"
+            [readonly]="true"
+          />
+        </mat-form-field>
         <mat-form-field>
           <mat-label>Enter product name</mat-label>
           <input
@@ -25,17 +33,30 @@
           <mat-error *ngIf="price?.invalid">Price is required</mat-error>
         </mat-form-field>
         <mat-form-field>
-          <mat-label>Description</mat-label>
+          <mat-label>SKU</mat-label>
           <input
             matInput
             type="text"
-            formControlName="description"
-            placeholder="Enter product description"
+            formControlName="sku"
+            placeholder="Enter product sku"
           />
         </mat-form-field>
+        <mat-form-field>
+          <mat-label>Category</mat-label>
+          <mat-select formControlName="category" required>
+            <mat-option *ngFor="let category of categories" [value]="category">
+              {{ category }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
         <mat-card-footer>
           <div class="button-panel">
-            <button mat-raised-button color="primary" (click)="(submit)">
+            <button
+              mat-raised-button
+              color="primary"
+              (click)="(submit)"
+              [disabled]="!productForm.valid"
+            >
               Submit
             </button>
             <button mat-raised-button color="warn" (click)="cancel()">

clients/Application/src/app/views/products/edit/edit.component.scss

@@ -0,0 +1,28 @@
+.card {
+    margin: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .product-form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .mat-form-field {
+    display: flex;
+  }
+  
+  .button-panel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+  }
+  
+  button {
+    margin: 4px;
+  }
+  

clients/Application/src/app/views/products/edit/edit.component.ts

@@ -3,44 +3,50 @@
  * SPDX-License-Identifier: MIT-0
  */
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { Product } from '../models/product.interface';
 import { ProductService } from '../product.service';
+
 @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.scss'],
 })
 export class EditComponent implements OnInit {
-  productForm: FormGroup | undefined;
+  productForm: FormGroup;
+  categories: string[] = ['category1', 'category2', 'category3', 'category4'];
   product$: Observable<Product | undefined> | undefined;
   productId$: Observable<string> | undefined;
   productName$: Observable<string | undefined> | undefined;
 
   constructor(
-    private route: ActivatedRoute,
-    private router: Router,
+    private fb: FormBuilder,
     private productSvc: ProductService,
-    private fb: FormBuilder
-  ) {}
+    private router: Router,
+    private route: ActivatedRoute
+  ) {
+    this.productForm = this.fb.group({});
+  }
 
   ngOnInit(): void {
+    this.productForm = this.fb.group({
+      shardId: [],
+      productId: [],
+      name: ['', Validators.required],
+      price: ['', Validators.required],
+      sku: '',
+      category: '',
+    });
+
     this.productId$ = this.route.params.pipe(map((p) => p['productId']));
     this.product$ = this.productId$.pipe(
       switchMap((p) => this.productSvc.get(p))
     );
     this.productName$ = this.product$.pipe(map((p) => p?.name));
 
-    this.productForm = this.fb.group({
-      productId: [''],
-      name: [''],
-      price: [''],
-      description: [''],
-    });
-
     this.product$.subscribe((val) => {
       this.productForm?.patchValue({
         ...val,
@@ -57,7 +63,7 @@ export class EditComponent implements OnInit {
   }
 
   submit() {
-    this.productSvc.patch(this.productForm?.value).subscribe({
+    this.productSvc.put(this.productForm?.value).subscribe({
       next: () => this.router.navigate(['products']),
       error: (err) => console.error(err),
     });

clients/Application/src/app/views/products/list/list.component.html

@@ -6,7 +6,11 @@ <h2>Product List</h2>
         <!-- Name Column -->
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef>Name</th>
-          <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+          <td mat-cell *matCellDef="let element">
+            <a class="link" routerLink="/products/edit/{{ element.shardId }}:{{ element.productId }}">
+              {{ element.name }}
+            </a>
+          </td>
         </ng-container>
 
         <!-- Price Column -->

clients/Application/src/app/views/products/models/product.interface.ts

@@ -4,6 +4,7 @@
  */
 export interface Product {
   key: string;
+  shardId: string;
   productId: string;
   name: string;
   price: number;

clients/Application/src/app/views/products/product.service.ts

@@ -24,13 +24,13 @@ export class ProductService {
   }
 
   delete(product: Product) {
-    const url = `${this.baseUrl}/product/${product.productId}`;
+    const url = `${this.baseUrl}/product/${product.shardId}:${product.productId}`;
     return this.http.delete<Product>(url);
   }
 
-  patch(product: Product) {
-    const url = `${this.baseUrl}/product/${product.productId}`;
-    return this.http.patch<Product>(url, product);
+  put(product: Product) {
+    const url = `${this.baseUrl}/product/${product.shardId}:${product.productId}`;
+    return this.http.put<Product>(url, product);
   }
 
   post(product: Product) {

server/OrderService/order_service.py

@@ -6,6 +6,7 @@
 import logger
 import metrics_manager
 import order_service_dal
+from decimal import Decimal
 from types import SimpleNamespace
 from aws_lambda_powertools import Tracer
 tracer = Tracer()
@@ -31,7 +32,7 @@ def create_order(event, context):
     tracer.put_annotation(key="TenantId", value=tenantId)
 
     logger.log_with_tenant_context(event, "Request received to create a order")
-    payload = json.loads(event['body'], object_hook=lambda d: SimpleNamespace(**d))
+    payload = json.loads(event['body'], object_hook=lambda d: SimpleNamespace(**d), parse_float=Decimal)
     order = order_service_dal.create_order(event, payload)
     logger.log_with_tenant_context(event, "Request completed to create a order")
     metrics_manager.record_metric(event, "OrderCreated", "Count", 1)
@@ -43,7 +44,7 @@ def update_order(event, context):
     tracer.put_annotation(key="TenantId", value=tenantId)
 
     logger.log_with_tenant_context(event, "Request received to update a order")
-    payload = json.loads(event['body'], object_hook=lambda d: SimpleNamespace(**d))
+    payload = json.loads(event['body'], object_hook=lambda d: SimpleNamespace(**d), parse_float=Decimal)
     params = event['pathParameters']
     key = params['id']
     order = order_service_dal.update_order(event, payload, key)

server/ProductService/product_service.py

@@ -6,6 +6,7 @@
 import logger
 import metrics_manager
 import product_service_dal
+from decimal import Decimal
 from aws_lambda_powertools import Tracer
 from types import SimpleNamespace
 tracer = Tracer()
@@ -32,7 +33,7 @@ def create_product(event, context):
     tracer.put_annotation(key="TenantId", value=tenantId)
 
     logger.log_with_tenant_context(event, "Request received to create a product")
-    payload = json.loads(event['body'], object_hook=lambda d: SimpleNamespace(**d))
+    payload = json.loads(event['body'], object_hook=lambda d: SimpleNamespace(**d), parse_float=Decimal)
     product = product_service_dal.create_product(event, payload)
     logger.log_with_tenant_context(event, "Request completed to create a product")
     metrics_manager.record_metric(event, "ProductCreated", "Count", 1)
@@ -44,7 +45,7 @@ def update_product(event, context):
     tracer.put_annotation(key="TenantId", value=tenantId)
 
     logger.log_with_tenant_context(event, "Request received to update a product")
-    payload = json.loads(event['body'], object_hook=lambda d: SimpleNamespace(**d))
+    payload = json.loads(event['body'], object_hook=lambda d: SimpleNamespace(**d), parse_float=Decimal)
     params = event['pathParameters']
     key = params['id']
     product = product_service_dal.update_product(event, payload, key)