From e002a3b828214ccc226a7051b2ca8d243dc28e58 Mon Sep 17 00:00:00 2001
From: Kevin BEAUGRAND <contact@kbeaugrand.fr>
Date: Tue, 23 May 2023 13:47:42 +0200
Subject: [PATCH] Fix #2099 + fix issue when creating a ne edge device

---
 .../Components/Devices/EditDevice.razor       | 106 +++++++++---------
 .../DeviceModels/CreateDeviceModelPage.razor  |  46 ++++----
 .../DeviceModels/DeviceModelDetailPage.razor  |  78 ++++++-------
 .../EdgeDevices/CreateEdgeDevicePage.razor    |  56 ++++-----
 .../EdgeDevices/EdgeDeviceDetailPage.razor    |  63 ++++++-----
 .../EdgeModels/CreateEdgeModelsPage.razor     |   4 +-
 .../EdgeModels/EdgeModelDetailPage.razor      |   4 +-
 .../Models/v1.0/IoTEdgeDevice.cs              |   2 +-
 .../EdgeDevices/CreateEdgeDevicePageTest.cs   |   2 +-
 .../EdgeDevices/EdgeDeviceDetailPageTests.cs  |  38 +++++++
 .../EdgeModels/EdgeModelDetailPageTest.cs     |   4 +-
 11 files changed, 228 insertions(+), 175 deletions(-)

diff --git a/src/AzureIoTHub.Portal.Client/Components/Devices/EditDevice.razor b/src/AzureIoTHub.Portal.Client/Components/Devices/EditDevice.razor
index 1ba801cc9..f63ed6d21 100644
--- a/src/AzureIoTHub.Portal.Client/Components/Devices/EditDevice.razor
+++ b/src/AzureIoTHub.Portal.Client/Components/Devices/EditDevice.razor
@@ -38,7 +38,9 @@
                 </MudCardHeader>
                 <MudCardContent>
                     <div class="d-flex justify-center mb-4">
-                        <MudAvatar Image="@Device.ImageUrl?.ToString()" Style="height:100px; width: auto; border-radius: 0; background: transparent " />
+                        <MudAvatar Style="height:100px; width: auto; border-radius: 0; background: transparent">
+                            <MudImage Src="@Device.ImageUrl?.ToString()" />
+                        </MudAvatar>
                     </div>
                 </MudCardContent>
                 @if (context.Equals(CreateEditMode.Edit))
@@ -99,18 +101,18 @@
                                                     {
                                                         <MudAutocomplete T="IDeviceModel"
                                                                          id="@nameof(DeviceDetails.ModelId)"
-                                                                 @bind-Value="DeviceModel"
-                                                                 SearchFunc="@Search"
-                                                                 Label="Model*"
-                                                                 Dense=true
-                                                                 For=@(() => this.DeviceModel)
-                                                                 Variant="Variant.Outlined"
-                                                                 ToStringFunc="@(x => x?.Name)"
-                                                                 ResetValueOnEmptyText=true
-                                                                 Immediate=true
-                                                                 Clearable=true
-                                                                 CoerceText=true
-                                                                 CoerceValue=false>
+                                                        @bind-Value="DeviceModel"
+                                                                         SearchFunc="@Search"
+                                                                         Label="Model*"
+                                                                         Dense=true
+                                                                         For=@(() => this.DeviceModel)
+                                                                         Variant="Variant.Outlined"
+                                                                         ToStringFunc="@(x => x?.Name)"
+                                                                         ResetValueOnEmptyText=true
+                                                                         Immediate=true
+                                                                         Clearable=true
+                                                                         CoerceText=true
+                                                                         CoerceValue=false>
                                                             <ItemTemplate>
                                                                 @context.Name
                                                                 <MudText Typo="Typo.subtitle1" Class="mud-input-helper-text">
@@ -133,22 +135,22 @@
                                                     {
                                                         <MudTextField @bind-Value="@Device.DeviceID"
                                                                       id=@nameof(LoRaDeviceDetails.DeviceID)
-                                                              Label="Device ID / DevEUI"
-                                                              Variant="Variant.Outlined"
-                                                              Validation=@(loraValidator.ValidateValue)
-                                                              For="@(()=> Device.DeviceID)"
-                                                              Mask="@maskLoRaDeviceID"
-                                                              HelperText="Device EUI must contain 16 hexadecimal characters (numbers from 0 to 9 and/or letters from A to F)" />
+                                                                      Label="Device ID / DevEUI"
+                                                                      Variant="Variant.Outlined"
+                                                                      Validation=@(loraValidator.ValidateValue)
+                                                                      For="@(()=> Device.DeviceID)"
+                                                                      Mask="@maskLoRaDeviceID"
+                                                                      HelperText="Device EUI must contain 16 hexadecimal characters (numbers from 0 to 9 and/or letters from A to F)" />
                                                     }
                                                     else
                                                     {
                                                         <MudTextField @bind-Value="@Device.DeviceID"
                                                                       id=@nameof(DeviceDetails.DeviceID)
-                                                              Label="Device ID"
-                                                              Variant="Variant.Outlined"
-                                                              Validation=@(standardValidator.ValidateValue)
-                                                              For="@(()=> Device.DeviceID)"
-                                                              HelperText="The device identifier should be of ASCII 7-bit alphanumeric characters plus certain special characters" />
+                                                                      Label="Device ID"
+                                                                      Variant="Variant.Outlined"
+                                                                      Validation=@(standardValidator.ValidateValue)
+                                                                      For="@(()=> Device.DeviceID)"
+                                                                      HelperText="The device identifier should be of ASCII 7-bit alphanumeric characters plus certain special characters" />
                                                     }
                                                 </MudItem>
                                             }
@@ -157,12 +159,12 @@
                                                 <MudItem xs="12" md="6">
                                                     <MudTextField @bind-Value="@Device.DeviceID"
                                                                   id=@nameof(DeviceDetails.DeviceID)
-                                                              Label="Device ID"
-                                                              Variant="Variant.Outlined"
-                                                              For="@(()=> Device.DeviceID)"
-                                                              Required="true"
-                                                              ReadOnly="true"
-                                                              HelperText="DeviceID must contain 16 hexadecimal characters (numbers from 0 to 9 and/or letters from A to F)" />
+                                                                  Label="Device ID"
+                                                                  Variant="Variant.Outlined"
+                                                                  For="@(()=> Device.DeviceID)"
+                                                                  Required="true"
+                                                                  ReadOnly="true"
+                                                                  HelperText="DeviceID must contain 16 hexadecimal characters (numbers from 0 to 9 and/or letters from A to F)" />
                                                 </MudItem>
                                             }
 
@@ -214,8 +216,8 @@
                                                 {
                                                     <MudItem xs="12" md="6">
                                                         <MudTextField @bind-Value="Device.Tags[tag.Name]" Label="@tag.Label"
-                                                              Required="@tag.Required"
-                                                              Variant="Variant.Outlined" />
+                                                                      Required="@tag.Required"
+                                                                      Variant="Variant.Outlined" />
                                                     </MudItem>
                                                 }
                                                 else if (context.Equals(CreateEditMode.Edit))
@@ -226,8 +228,8 @@
                                                             Device.Tags.Add(tag.Name, "");
                                                         }
                                                         <MudTextField @bind-Value="Device.Tags[tag.Name]" Label="@tag.Label"
-                                                              Required="@tag.Required"
-                                                              Variant="Variant.Outlined" />
+                                                                      Required="@tag.Required"
+                                                                      Variant="Variant.Outlined" />
                                                     </MudItem>
                                                 }
                                             }
@@ -277,37 +279,37 @@
                                                         case DevicePropertyType.Double:
                                                             <MudItem xs="12" md="4">
                                                                 <MudTextField @bind-Value="item.Value"
-                                                              Label="@item.DisplayName"
-                                                              Variant="Variant.Outlined"
-                                                              Validation=@((string c) => string.IsNullOrEmpty(c) || double.TryParse(c, out var result))
-                                                              Clearable="true" />
+                                                                              Label="@item.DisplayName"
+                                                                              Variant="Variant.Outlined"
+                                                                              Validation=@((string c) => string.IsNullOrEmpty(c) || double.TryParse(c, out var result))
+                                                                              Clearable="true" />
                                                             </MudItem>
                                                             break;
                                                         case DevicePropertyType.Float:
                                                             <MudItem xs="12" md="4">
                                                                 <MudTextField @bind-Value="item.Value"
-                                                              Label="@item.DisplayName"
-                                                              Variant="Variant.Outlined"
-                                                              Validation=@((string c) => string.IsNullOrEmpty(c) || float.TryParse(c, out var result))
-                                                              Clearable="true" />
+                                                                              Label="@item.DisplayName"
+                                                                              Variant="Variant.Outlined"
+                                                                              Validation=@((string c) => string.IsNullOrEmpty(c) || float.TryParse(c, out var result))
+                                                                              Clearable="true" />
                                                             </MudItem>
                                                             break;
                                                         case DevicePropertyType.Integer:
                                                             <MudItem xs="12" md="4">
                                                                 <MudTextField @bind-Value="item.Value"
-                                                              Label="@item.DisplayName"
-                                                              Variant="Variant.Outlined"
-                                                              Validation=@((string c) => string.IsNullOrEmpty(c) || int.TryParse(c, out var result))
-                                                              Clearable="true" />
+                                                                              Label="@item.DisplayName"
+                                                                              Variant="Variant.Outlined"
+                                                                              Validation=@((string c) => string.IsNullOrEmpty(c) || int.TryParse(c, out var result))
+                                                                              Clearable="true" />
                                                             </MudItem>
                                                             break;
                                                         case DevicePropertyType.Long:
                                                             <MudItem xs="12" md="4">
                                                                 <MudTextField @bind-Value="item.Value"
-                                                              Label="@item.DisplayName"
-                                                              Variant="Variant.Outlined"
-                                                              Validation=@((string c) => string.IsNullOrEmpty(c) || long.TryParse(c, out var result))
-                                                              Clearable="true" />
+                                                                              Label="@item.DisplayName"
+                                                                              Variant="Variant.Outlined"
+                                                                              Validation=@((string c) => string.IsNullOrEmpty(c) || long.TryParse(c, out var result))
+                                                                              Clearable="true" />
                                                             </MudItem>
                                                             break;
                                                         case DevicePropertyType.String:
@@ -712,9 +714,9 @@
                 PageNumber = 0,
                 PageSize = 100,
                 OrderBy = new string[]
-                {
+                    {
                     string.Empty
-                }
+                    }
             };
         return (await DeviceModelsClientService.GetDeviceModels(filter)).Items.ToList<IDeviceModel>();
     }
diff --git a/src/AzureIoTHub.Portal.Client/Pages/DeviceModels/CreateDeviceModelPage.razor b/src/AzureIoTHub.Portal.Client/Pages/DeviceModels/CreateDeviceModelPage.razor
index ca55dead3..731ef9696 100644
--- a/src/AzureIoTHub.Portal.Client/Pages/DeviceModels/CreateDeviceModelPage.razor
+++ b/src/AzureIoTHub.Portal.Client/Pages/DeviceModels/CreateDeviceModelPage.razor
@@ -22,7 +22,9 @@
             <MudCard>
                 <MudCardContent>
                     <div class="d-flex justify-center mb-4">
-                        <MudAvatar Image="@imageDataUrl" Style="height:100px; width: auto; border-radius: 0; background: transparent " />
+                        <MudAvatar Style="height:100px; width: auto; border-radius: 0; background: transparent">
+                            <MudImage Src="@imageDataUrl"/>
+                        </MudAvatar>
                     </div>
                 </MudCardContent>
                 <MudCardActions Class="d-flex justify-center">
@@ -94,35 +96,35 @@
                                                         <MudGrid id="@($"property-{item.Name}")">
                                                             <MudItem md="4" xs="12">
                                                                 <MudTextField id="@nameof(item.DisplayName)"
-                                                                      @bind-Value="@item.DisplayName"
-                                                                      Label="Display name"
-                                                                      Variant="Variant.Outlined"
-                                                                      For="@(()=> item.DisplayName)"
-                                                                      Required="true" />
+                                                                @bind-Value="@item.DisplayName"
+                                                                              Label="Display name"
+                                                                              Variant="Variant.Outlined"
+                                                                              For="@(()=> item.DisplayName)"
+                                                                              Required="true" />
                                                             </MudItem>
                                                             <MudItem md="3" xs="12">
                                                                 <MudTextField id="@nameof(item.Name)" @bind-Value="@item.Name"
-                                                                      Label="Name"
-                                                                      Variant="Variant.Outlined"
-                                                                      For="@(()=> item.Name)"
-                                                                      Required="true" />
+                                                                              Label="Name"
+                                                                              Variant="Variant.Outlined"
+                                                                              For="@(()=> item.Name)"
+                                                                              Required="true" />
                                                             </MudItem>
                                                             <MudItem md="1" xs="12">
                                                                 <MudNumericField id="@nameof(item.Order)"
-                                                                         @bind-Value="@item.Order"
-                                                                         Label="Order"
-                                                                         Variant="Variant.Outlined"
-                                                                         Min=0
-                                                                         For="@(()=> item.Order)"
-                                                                         Required="true" />
+                                                                @bind-Value="@item.Order"
+                                                                                 Label="Order"
+                                                                                 Variant="Variant.Outlined"
+                                                                                 Min=0
+                                                                                 For="@(()=> item.Order)"
+                                                                                 Required="true" />
                                                             </MudItem>
                                                             <MudItem md="2" xs="6">
                                                                 <MudSelect id="@nameof(item.PropertyType)"
-                                                                   @bind-Value="@item.PropertyType"
-                                                                   Label="Type"
-                                                                   Variant="Variant.Outlined"
-                                                                   For="@(()=> item.PropertyType)"
-                                                                   Required="true">
+                                                                @bind-Value="@item.PropertyType"
+                                                                           Label="Type"
+                                                                           Variant="Variant.Outlined"
+                                                                           For="@(()=> item.PropertyType)"
+                                                                           Required="true">
                                                                     @foreach (DevicePropertyType item in Enum.GetValues(typeof(DevicePropertyType)))
                                                                     {
                                                                         <MudSelectItem Value="@item">@item</MudSelectItem>
@@ -163,7 +165,7 @@
                 {
                     <MudTabPanel Class="LoRaWANTab" Text="LoRaWAN" Style=@(this.CheckLoRaValidation() ? "color: red": "")>
                         <CreateLoraDeviceModel LoRaDeviceModel="@(Model as LoRaDeviceModelDto)"
-                                           Commands="Commands" />
+                                               Commands="Commands" />
                     </MudTabPanel>
                 }
             </MudTabs>
diff --git a/src/AzureIoTHub.Portal.Client/Pages/DeviceModels/DeviceModelDetailPage.razor b/src/AzureIoTHub.Portal.Client/Pages/DeviceModels/DeviceModelDetailPage.razor
index 3814afd4c..42694ae3c 100644
--- a/src/AzureIoTHub.Portal.Client/Pages/DeviceModels/DeviceModelDetailPage.razor
+++ b/src/AzureIoTHub.Portal.Client/Pages/DeviceModels/DeviceModelDetailPage.razor
@@ -15,10 +15,10 @@
 @inject ILoRaWanDeviceModelsClientService LoRaWanDeviceModelsClientService
 
 <MudTooltip Text="Return" Placement="Placement.Left">
-    <MudFab StartIcon="@Icons.Material.Outlined.ArrowBack" Color="Color.Secondary" Size="Size.Small" OnClick="Return" id="returnButton" />       
+    <MudFab StartIcon="@Icons.Material.Outlined.ArrowBack" Color="Color.Secondary" Size="Size.Small" OnClick="Return" id="returnButton" />
 </MudTooltip>
 <MudTooltip Placement="Placement.Top">
-<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">  Device Model</MudText>
+    <MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">  Device Model</MudText>
 </MudTooltip>
 
 <MudForm Model="@Model" @ref="form" id="form">
@@ -27,7 +27,9 @@
             <MudCard>
                 <MudCardContent>
                     <div class="d-flex justify-center mb-4">
-                        <MudAvatar Image="@imageDataUrl" Style="height:100px; width: auto; border-radius: 0; background: transparent " />
+                        <MudAvatar style="height:100px; width: auto; border-radius: 0; background: transparent">
+                            <MudImage Src="@imageDataUrl" />
+                        </MudAvatar>
                     </div>
                 </MudCardContent>
                 <MudCardActions Class="d-flex justify-center">
@@ -84,49 +86,49 @@
                                                     <MudGrid id="@($"property-{item.Name}")">
                                                         <MudItem md="4" xs="12">
                                                             <MudTextField id="@nameof(item.DisplayName)"
-                                                              @bind-Value="@item.DisplayName"
-                                                              Label="Display name"
-                                                              Variant="Variant.Outlined"
-                                                              For="@(()=> item.DisplayName)"
-                                                              Required="true" />
+                                                            @bind-Value="@item.DisplayName"
+                                                                          Label="Display name"
+                                                                          Variant="Variant.Outlined"
+                                                                          For="@(()=> item.DisplayName)"
+                                                                          Required="true" />
                                                         </MudItem>
                                                         <MudItem md="3" xs="12">
                                                             <MudTextField id="@nameof(item.Name)" @bind-Value="@item.Name"
-                                                              Label="Name"
-                                                              Variant="Variant.Outlined"
-                                                              For="@(()=> item.Name)"
-                                                              Required="true" />
+                                                                          Label="Name"
+                                                                          Variant="Variant.Outlined"
+                                                                          For="@(()=> item.Name)"
+                                                                          Required="true" />
                                                         </MudItem>
                                                         <MudItem md="1" xs="12">
                                                             <MudNumericField id="@nameof(item.Order)"
-                                                                 @bind-Value="@item.Order"
-                                                                 Label="Order"
-                                                                 Variant="Variant.Outlined"
-                                                                 Min=0
-                                                                 For="@(()=> item.Order)"
-                                                                 Required="true" />
+                                                            @bind-Value="@item.Order"
+                                                                             Label="Order"
+                                                                             Variant="Variant.Outlined"
+                                                                             Min=0
+                                                                             For="@(()=> item.Order)"
+                                                                             Required="true" />
                                                         </MudItem>
                                                         <MudItem md="2" xs="6">
                                                             <MudSelect id="@nameof(item.PropertyType)"
-                                                           @bind-Value="@item.PropertyType"
-                                                           Label="Type"
-                                                           Variant="Variant.Outlined"
-                                                           For="@(()=> item.PropertyType)"
-                                                           Required="true">
+                                                            @bind-Value="@item.PropertyType"
+                                                                       Label="Type"
+                                                                       Variant="Variant.Outlined"
+                                                                       For="@(()=> item.PropertyType)"
+                                                                       Required="true">
                                                                 @foreach (DevicePropertyType item in Enum.GetValues(typeof(DevicePropertyType)))
                                                                 {
-                                                        <MudSelectItem Value="@item">@item</MudSelectItem>
+                                                                    <MudSelectItem Value="@item">@item</MudSelectItem>
                                                                 }
-                                                </MudSelect>
-                                            </MudItem>
-                                            <MudItem md="1" xs="3">
-                                                <MudSwitch id="@nameof(item.IsWritable)" @bind-Checked="@item.IsWritable" Color="Color.Secondary" />
-                                                <MudInputLabel>Writable</MudInputLabel>
-                                            </MudItem>
-                                            <MudItem md="1" xs="3">
-                                                <MudIconButton id="DeletePropertyButton" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => Properties.Remove(item))">Remove</MudIconButton>
-                                            </MudItem>
-                                        </MudGrid>
+                                                            </MudSelect>
+                                                        </MudItem>
+                                                        <MudItem md="1" xs="3">
+                                                            <MudSwitch id="@nameof(item.IsWritable)" @bind-Checked="@item.IsWritable" Color="Color.Secondary" />
+                                                            <MudInputLabel>Writable</MudInputLabel>
+                                                        </MudItem>
+                                                        <MudItem md="1" xs="3">
+                                                            <MudIconButton id="DeletePropertyButton" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => Properties.Remove(item))">Remove</MudIconButton>
+                                                        </MudItem>
+                                                    </MudGrid>
                                                 }
                                             </MudItem>
                                         </ChildContent>
@@ -152,7 +154,7 @@
                 {
                     <MudTabPanel Text="LoRaWAN" Style=@(this.CheckLoRaValidation() ? "color: red": "")>
                         <EditLoraDeviceModel LoRaDeviceModel="@(Model as LoRaDeviceModelDto)"
-                                             Commands="Commands"/>
+                                             Commands="Commands" />
                     </MudTabPanel>
                 }
             </MudTabs>
@@ -319,7 +321,7 @@
             }
 
             // Check validation error in commands
-            foreach(var cmd in Commands)
+            foreach (var cmd in Commands)
             {
                 if (!CommandValidator.Validate(cmd).IsValid)
                     cmdValidationError = true;
@@ -382,7 +384,7 @@
         {
             isProcessing = false;
         }
-        
+
     }
 
     private async Task DeleteDeviceModel()
@@ -406,4 +408,4 @@
         // Go back to the list of devices after the deletion
         NavigationManager.NavigateTo("device-models");
     }
- }
+}
diff --git a/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/CreateEdgeDevicePage.razor b/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/CreateEdgeDevicePage.razor
index bfe6c2051..9b9e71c1d 100644
--- a/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/CreateEdgeDevicePage.razor
+++ b/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/CreateEdgeDevicePage.razor
@@ -25,7 +25,9 @@
                     </MudCardHeader>
                     <MudCardContent>
                         <div class="d-flex justify-center mb-4">
-                            <MudAvatar id="@(nameof(IoTEdgeDevice.ImageUrl))" Image="@EdgeDevice.ImageUrl?.ToString()" Style="height:100px; width: auto; border-radius: 0; background: transparent " />
+                            <MudAvatar Style="height:100px; width: auto; border-radius: 0; background: transparent">
+                                <MudImage Src="@edgeModel?.ImageUrl?.ToString()" id="@(nameof(IoTEdgeDevice.ImageUrl))" />
+                            </MudAvatar>
                         </div>
                     </MudCardContent>
                 </MudCard>
@@ -51,26 +53,26 @@
                                         <ChildContent>
                                             <MudGrid>
                                                 <MudItem xs="12" md="6">
-                                                @if (duplicateDevice)
+                                                    @if (duplicateDevice)
                                                 {
                                                     <EdgeDeviceToDuplicateSelector />
                                                 }
                                                 else
                                                 {
                                                     <MudAutocomplete T="IoTEdgeModel"
-                                                                 id="@nameof(IoTEdgeModel.ModelId)"
-                                                                 @bind-Value="edgeModel"
-                                                                 SearchFunc="@Search"
-                                                                 Label="Model*"
-                                                                 Dense=true
-                                                                 For=@(() => this.edgeModel)
-                                                                 Variant="Variant.Outlined"
-                                                                 ToStringFunc="@(x => x?.Name)"
-                                                                 ResetValueOnEmptyText=true
-                                                                 Immediate=true
-                                                                 Clearable=true
-                                                                 CoerceText=true
-                                                                 CoerceValue=false>
+                                                                     id="@nameof(IoTEdgeModel.ModelId)"
+                                                                     @bind-Value="edgeModel"
+                                                                     SearchFunc="@Search"
+                                                                     Label="Model*"
+                                                                     Dense=true
+                                                                     For=@(() => this.edgeModel)
+                                                                     Variant="Variant.Outlined"
+                                                                     ToStringFunc="@(x => x?.Name)"
+                                                                     ResetValueOnEmptyText=true
+                                                                     Immediate=true
+                                                                     Clearable=true
+                                                                     CoerceText=true
+                                                                     CoerceValue=false>
                                                         <ItemTemplate>
                                                             @context.Name
                                                             <MudText Typo="Typo.subtitle1" Class="mud-input-helper-text">
@@ -86,7 +88,7 @@
 
                                             </MudItem>
                                             <MudItem xs="12" md="6">
-                                                    <MudTextField @bind-Value="@EdgeDevice.DeviceId"
+                                                <MudTextField @bind-Value="@EdgeDevice.DeviceId"
                                                               id=@nameof(IoTEdgeDevice.DeviceId)
                                                               Label="Device ID"
                                                               Variant="Variant.Outlined"
@@ -134,8 +136,8 @@
                                             {
                                                 <MudItem xs="12" md="6">
                                                     <MudTextField @bind-Value="EdgeDevice.Tags[tag.Name]" id="@tag.Name" Label="@tag.Label"
-                                                              Required="@tag.Required"
-                                                              Variant="Variant.Outlined" />
+                                                                  Required="@tag.Required"
+                                                                  Variant="Variant.Outlined" />
                                                 </MudItem>
                                             }
                                         </MudGrid>
@@ -154,7 +156,7 @@
                                 </MudExpansionPanel>
                             </MudItem>
                         </MudGrid>
-                        
+
                     </MudExpansionPanels>
                 </MudTabPanel>
             </MudTabs>
@@ -306,18 +308,18 @@
         if (string.IsNullOrEmpty(value))
             return edgeModelList
                     .Select(m => new IoTEdgeModel
-                    {
-                        ModelId = m.ModelId,
-                        Name = m.Name
-                    });;
+                        {
+                            ModelId = m.ModelId,
+                            Name = m.Name
+                        }); ;
 
         return edgeModelList
                     .Where(x => x.Name.Contains(value, StringComparison.InvariantCultureIgnoreCase))
                     .Select(m => new IoTEdgeModel
-                    {
-                        ModelId = m.ModelId,
-                        Name = m.Name
-                    });
+                        {
+                            ModelId = m.ModelId,
+                            Name = m.Name
+                        });
     }
 
     internal async Task ChangeModel(IoTEdgeModel edgeModel)
diff --git a/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/EdgeDeviceDetailPage.razor b/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/EdgeDeviceDetailPage.razor
index 7f9e17d5f..f8c3f77eb 100644
--- a/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/EdgeDeviceDetailPage.razor
+++ b/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/EdgeDeviceDetailPage.razor
@@ -13,10 +13,10 @@
 @inject IDeviceTagSettingsClientService DeviceTagSettingsClientService
 
 <MudTooltip Text="Return" Placement="Placement.Left">
-    <MudFab StartIcon="@Icons.Material.Outlined.ArrowBack" Color="Color.Secondary" Size="Size.Small" OnClick="Return" id = "returnButton"/>       
+    <MudFab StartIcon="@Icons.Material.Outlined.ArrowBack" Color="Color.Secondary" Size="Size.Small" OnClick="Return" id="returnButton" />
 </MudTooltip>
 <MudTooltip Placement="Placement.Top">
-<MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">  Edge Device Details</MudText>
+    <MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">  Edge Device Details</MudText>
 </MudTooltip>
 
 <MudForm Model="@edgeDevice" @ref="form">
@@ -27,15 +27,17 @@
                     <CardHeaderContent>
                         <MudText Typo="Typo.body2" Class="mb-6" id=@nameof(IoTEdgeModel.Name)>Model: <b>@edgeModel.Name</b></MudText>
                         <MudText Typo="Typo.h5" Class="overflow-ellipsis" Align="Align.Center">@(string.IsNullOrEmpty(edgeDevice.DeviceName) ? edgeDevice.DeviceId : edgeDevice.DeviceName)</MudText>
-                    </CardHeaderContent>
-                </MudCardHeader>
-                <MudCardContent>
-                    <div class="d-flex justify-center mb-4">
-                        <MudAvatar Image="@edgeDevice.ImageUrl?.ToString()" Style="height:100px; width: auto; border-radius: 0; background: transparent " />
-                    </div>
-                </MudCardContent>
-                <MudCardActions Class="pb-4 pl-4 justify-center">
-                    @if (isLoaded)
+                        </CardHeaderContent>
+                    </MudCardHeader>
+                    <MudCardContent>
+                        <div class="d-flex justify-center mb-4">
+                            <MudAvatar Style="height:100px; width: auto; border-radius: 0; background: transparent">
+                                <MudImage Src="@edgeModel?.ImageUrl?.ToString()" />
+                            </MudAvatar>
+                        </div>
+                    </MudCardContent>
+                    <MudCardActions Class="pb-4 pl-4 justify-center">
+                        @if (isLoaded)
                     {
                         <MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Cable" OnClick="ShowConnectionString" id="connectButton">Connect</MudButton>
                     }
@@ -121,22 +123,23 @@
                         </MudGrid>
                         <MudGrid>
                             <MudItem xs="12">
-                                <MudExpansionPanel Text="Tags">
+                                <MudExpansionPanel Text="Last deployment">
                                     <TitleContent><MudText Typo="Typo.h6">Last deployment</MudText></TitleContent>
                                     <ChildContent>
-                                    @if (edgeDevice.LastDeployment != null){                                                                                   
-                                        <MudGrid>
-                                            <MudItem xs="12" md="4">
-                                                <MudTextField @bind-Value="@edgeDevice.LastDeployment.Name" Label="Name" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
-                                            </MudItem>
-                                            <MudItem xs="12" md="4">
-                                                <MudTextField @bind-Value="@edgeDevice.LastDeployment.DateCreation" Label="Date" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
-                                            </MudItem>
-                                            <MudItem xs="12" md="4">
-                                                <MudTextField @bind-Value="@edgeDevice.LastDeployment.Status" Label="Status" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
-                                            </MudItem>
-                                        </MudGrid>
-                                     }
+                                        @if (edgeDevice.LastDeployment != null)
+                                        {
+                                            <MudGrid>
+                                                <MudItem xs="12" md="4">
+                                                    <MudTextField id="lastDeploymentName" @bind-Value="@edgeDevice.LastDeployment.Name" Label="Name" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
+                                                </MudItem>
+                                                <MudItem xs="12" md="4">
+                                                    <MudTextField id="lastDeploymentDate" @bind-Value="@edgeDevice.LastDeployment.DateCreation" Label="Date" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
+                                                </MudItem>
+                                                <MudItem xs="12" md="4">
+                                                    <MudTextField id="lastDeploymentStatus" @bind-Value="@edgeDevice.LastDeployment.Status" Label="Status" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
+                                                </MudItem>
+                                            </MudGrid>
+                                        }
                                     </ChildContent>
                                 </MudExpansionPanel>
                             </MudItem>
@@ -188,8 +191,8 @@
                                                         edgeDevice.Tags.Add(tag.Name, "");
                                                     }
                                                     <MudTextField @bind-Value="edgeDevice.Tags[tag.Name]" Label="@tag.Label"
-                                                              Required="@tag.Required"
-                                                              Variant="Variant.Outlined" />
+                                                                  Required="@tag.Required"
+                                                                  Variant="Variant.Outlined" />
                                                 </MudItem>
                                             }
                                         </MudGrid>
@@ -387,16 +390,16 @@
 
     public async Task ShowConnectionString()
     {
-        var parameters = new DialogParameters {{nameof(ConnectionStringDialog.deviceId), this.deviceId}};
+        var parameters = new DialogParameters { { nameof(ConnectionStringDialog.deviceId), this.deviceId } };
 
-        _ =  await DialogService.Show<ConnectionStringDialog>("Edge Device Connection String", parameters).Result;
+        _ = await DialogService.Show<ConnectionStringDialog>("Edge Device Connection String", parameters).Result;
     }
 
     public async Task ShowDeleteModal()
     {
         isProcessing = true;
 
-        var parameter = new DialogParameters {{nameof(edgeDevice.DeviceId), edgeDevice.DeviceId}};
+        var parameter = new DialogParameters { { nameof(edgeDevice.DeviceId), edgeDevice.DeviceId } };
 
         var result = await DialogService.Show<EdgeDeviceDeleteConfirmationDialog>("Edge device deletion confirmation", parameter).Result;
 
diff --git a/src/AzureIoTHub.Portal.Client/Pages/EdgeModels/CreateEdgeModelsPage.razor b/src/AzureIoTHub.Portal.Client/Pages/EdgeModels/CreateEdgeModelsPage.razor
index 0fba80663..10cc8c650 100644
--- a/src/AzureIoTHub.Portal.Client/Pages/EdgeModels/CreateEdgeModelsPage.razor
+++ b/src/AzureIoTHub.Portal.Client/Pages/EdgeModels/CreateEdgeModelsPage.razor
@@ -21,7 +21,9 @@
             <MudCard>
                 <MudCardContent>
                     <div class="d-flex justify-center mb-4">
-                        <MudAvatar Image="@imageDataUrl" id="@(nameof(IoTEdgeModel.ImageUrl))" Style="height:100px; width: auto; border-radius: 0; background: transparent " />
+                        <MudAvatar Style="height:100px; width: auto; border-radius: 0; background: transparent">
+                            <MudImage Src="@imageDataUrl" id="@(nameof(IoTEdgeModel.ImageUrl))" />
+                        </MudAvatar>
                     </div>
                 </MudCardContent>
                 <MudCardActions Class="d-flex justify-center">
diff --git a/src/AzureIoTHub.Portal.Client/Pages/EdgeModels/EdgeModelDetailPage.razor b/src/AzureIoTHub.Portal.Client/Pages/EdgeModels/EdgeModelDetailPage.razor
index 1d199a89d..eea4b846c 100644
--- a/src/AzureIoTHub.Portal.Client/Pages/EdgeModels/EdgeModelDetailPage.razor
+++ b/src/AzureIoTHub.Portal.Client/Pages/EdgeModels/EdgeModelDetailPage.razor
@@ -27,7 +27,9 @@
             <MudCard>
                 <MudCardContent>
                     <div class="d-flex justify-center mb-4">
-                        <MudAvatar Image="@imageDataUrl" id="@(nameof(IoTEdgeModel.ImageUrl))" Style="height:100px; width: auto; border-radius: 0; background: transparent " />
+                        <MudAvatar Style="height:100px; width: auto; border-radius: 0; background: transparent">
+                            <MudImage Src="@imageDataUrl" id="@(nameof(IoTEdgeModel.ImageUrl))" />
+                        </MudAvatar>
                     </div>
                 </MudCardContent>
                 <MudCardActions Class="d-flex justify-center">
diff --git a/src/AzureIoTHub.Portal.Shared/Models/v1.0/IoTEdgeDevice.cs b/src/AzureIoTHub.Portal.Shared/Models/v1.0/IoTEdgeDevice.cs
index f2326e5d1..448abefbd 100644
--- a/src/AzureIoTHub.Portal.Shared/Models/v1.0/IoTEdgeDevice.cs
+++ b/src/AzureIoTHub.Portal.Shared/Models/v1.0/IoTEdgeDevice.cs
@@ -69,7 +69,7 @@ public class IoTEdgeDevice
         /// <summary>
         /// The IoT Edge configuraton.
         /// </summary>
-        public ConfigItem LastDeployment { get; set; } = new ConfigItem();
+        public ConfigItem LastDeployment { get; set; }
 
         /// <summary>
         /// The IoT Edge modules.
diff --git a/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeDevices/CreateEdgeDevicePageTest.cs b/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeDevices/CreateEdgeDevicePageTest.cs
index ac771f91f..29d07c8f7 100644
--- a/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeDevices/CreateEdgeDevicePageTest.cs
+++ b/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeDevices/CreateEdgeDevicePageTest.cs
@@ -342,7 +342,7 @@ public async Task ChangeEdgeModelShouldDisplayModelImage()
             await cut.Instance.ChangeModel(edgeModel);
 
             // Assert
-            Assert.IsFalse(string.IsNullOrEmpty(ModelImageElement.InnerHtml));
+            Assert.AreEqual(edgeModel.ImageUrl, ModelImageElement.Attributes["src"].Value);
             cut.WaitForAssertion(() => MockRepository.VerifyAll());
         }
 
diff --git a/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeDevices/EdgeDeviceDetailPageTests.cs b/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeDevices/EdgeDeviceDetailPageTests.cs
index 6788d4ad8..586f1174d 100644
--- a/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeDevices/EdgeDeviceDetailPageTests.cs
+++ b/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeDevices/EdgeDeviceDetailPageTests.cs
@@ -21,6 +21,7 @@ namespace AzureIoTHub.Portal.Tests.Unit.Client.Pages.EdgeDevices
     using MudBlazor.Services;
     using NUnit.Framework;
     using UnitTests.Mocks;
+    using AutoFixture;
 
     [TestFixture]
     public class EdgeDeviceDetailPageTests : BlazorUnitTest
@@ -358,6 +359,43 @@ public void EdgeDeviceDetailPageShouldProcessProblemDetailsExceptionWhenIssueOcc
             cut.WaitForAssertion(() => MockRepository.VerifyAll());
         }
 
+        [Test]
+        public void EdgeDeviceDetailPageShouldDisplayLastDeploymentStatus()
+        {
+            // Arrange
+            var mockIoTEdgeModule = new IoTEdgeModule()
+            {
+                ModuleName = Guid.NewGuid().ToString()
+            };
+
+            var mockIoTEdgeDevice = new IoTEdgeDevice()
+            {
+                DeviceId = this.mockdeviceId,
+                ConnectionState = "Connected",
+                Modules= new List<IoTEdgeModule>(){mockIoTEdgeModule},
+                ModelId = Guid.NewGuid().ToString(),
+                LastDeployment = Fixture.Create<ConfigItem>()
+            };
+
+            _ = this.mockEdgeDeviceClientService.Setup(service => service.GetDevice(this.mockdeviceId))
+                .ReturnsAsync(mockIoTEdgeDevice);
+
+            _ = this.mockIEdgeModelClientService
+                .Setup(service => service.GetIoTEdgeModel(It.Is<string>(x => x.Equals(mockIoTEdgeDevice.ModelId, StringComparison.Ordinal))))
+                .ReturnsAsync(new IoTEdgeModel());
+
+            _ = this.mockDeviceTagSettingsClientService.Setup(service => service.GetDeviceTags()).ReturnsAsync(new List<DeviceTagDto>());
+
+            // Act
+            var cut = RenderComponent<EdgeDeviceDetailPage>(ComponentParameter.CreateParameter("deviceId", this.mockdeviceId));
+
+            // Assert
+            cut.WaitForAssertion(() => Assert.AreEqual(mockIoTEdgeDevice.LastDeployment.Name, cut.WaitForElement("#lastDeploymentName").GetAttribute("value")));
+            cut.WaitForAssertion(() => Assert.AreEqual(mockIoTEdgeDevice.LastDeployment.DateCreation.Date, DateTime.TryParse(cut.WaitForElement("#lastDeploymentDate").GetAttribute("value"), out var dateTime) ? dateTime : null));
+            cut.WaitForAssertion(() => Assert.AreEqual(mockIoTEdgeDevice.LastDeployment.Status, cut.WaitForElement("#lastDeploymentStatus").GetAttribute("value")));
+            cut.WaitForAssertion(() => MockRepository.VerifyAll());
+        }
+
         [Test]
         public void ClickOnLogsShouldDisplayLogs()
         {
diff --git a/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeModels/EdgeModelDetailPageTest.cs b/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeModels/EdgeModelDetailPageTest.cs
index 5bbdc22c9..929428907 100644
--- a/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeModels/EdgeModelDetailPageTest.cs
+++ b/src/AzureIoTHub.Portal.Tests.Unit/Client/Pages/EdgeModels/EdgeModelDetailPageTest.cs
@@ -359,7 +359,7 @@ public void DeleteAvatarShouldRemoveTheImage()
             // Act
             var cut = RenderComponent<EdgeModelDetailPage>(ComponentParameter.CreateParameter("ModelID", this.mockEdgeModleId));
 
-            cut.WaitForAssertion(() => Assert.AreEqual(1, cut.Find($"#{nameof(IoTEdgeModel.ImageUrl)}").ChildElementCount));
+            cut.WaitForAssertion(() => Assert.IsFalse(string.IsNullOrEmpty(cut.Find($"#{nameof(IoTEdgeModel.ImageUrl)}").Attributes["src"]?.Value)));
 
             var avatar = cut.WaitForElement($"#{nameof(IoTEdgeModel.ImageUrl)}");
             Assert.IsNotNull(avatar);
@@ -368,7 +368,7 @@ public void DeleteAvatarShouldRemoveTheImage()
             deleteAvatarBtn.Click();
 
             // Assert
-            cut.WaitForAssertion(() => Assert.AreEqual(0, cut.Find($"#{nameof(IoTEdgeModel.ImageUrl)}").ChildElementCount));
+            cut.WaitForAssertion(() => Assert.IsTrue(string.IsNullOrEmpty(cut.Find($"#{nameof(IoTEdgeModel.ImageUrl)}").Attributes["src"]?.Value)));
             cut.WaitForAssertion(() => MockRepository.VerifyAll());
         }