From 9a39c9e50e20de88db3dbdfbe832bb70a3dd43e5 Mon Sep 17 00:00:00 2001
From: Kevin BEAUGRAND <9513635+kbeaugrand@users.noreply.github.com>
Date: Mon, 28 Mar 2022 17:18:32 +0200
Subject: [PATCH] Visual changes on IoT Edge pages (#504)

* Visual changes on EdgeDeviceDetailPage

* Added an error snackbar

Co-authored-by: Audrey Serra <audrey.serra@cgi.com>
---
 .../Edge_Devices/EdgeDeviceDetailPage.razor   | 322 +++++++++---------
 1 file changed, 170 insertions(+), 152 deletions(-)

diff --git a/src/AzureIoTHub.Portal/Client/Pages/Edge_Devices/EdgeDeviceDetailPage.razor b/src/AzureIoTHub.Portal/Client/Pages/Edge_Devices/EdgeDeviceDetailPage.razor
index 8266aa7d3..0affc480a 100644
--- a/src/AzureIoTHub.Portal/Client/Pages/Edge_Devices/EdgeDeviceDetailPage.razor
+++ b/src/AzureIoTHub.Portal/Client/Pages/Edge_Devices/EdgeDeviceDetailPage.razor
@@ -13,163 +13,173 @@
 
 <MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">Edge Device Details</MudText>
 
-<MudTabs Elevation="1" Rounded="true" PanelClass="mt-6">
-    <MudTabPanel Text="General">
+@if (loading)
+{
+    <MudGrid>
+        <MudItem xs="12">
+            <MudProgressCircular Color="Color.Default" Indeterminate="true" />
+        </MudItem>
+    </MudGrid>
+}
+else
+{
+    <MudForm Model="@Gateway">
         <MudGrid>
-            @if (loading)
-            {
-                <MudItem Class="custom-centered-container">
-                    <MudProgressCircular Class="custom-centered-item" Color="Color.Default" Indeterminate="true" />
+            <MudItem xs="12" sm="4" md="3">
+                <MudCard>
+                    <MudCardHeader>
+                        <CardHeaderContent>
+                            <MudText Typo="Typo.h5" Align="Align.Center">@Gateway.DeviceId</MudText>
+                        </CardHeaderContent>
+                    </MudCardHeader>
+                    <MudCardActions Class="pb-4 pl-4 justify-center">
+                        <MudButton Variant="Variant.Outlined" Color="Color.Primary" StartIcon="@Icons.Filled.Cable" OnClick="ShowConnectionString">Connect</MudButton>
+                    </MudCardActions>
+                </MudCard>
+                <MudItem xs="12" Class="d-flex justify-space-around py-2 px-1 mt-4">
+                    @if (processingDelete)
+                    {
+                        <MudButton Variant="Variant.Filled" Color="Color.Error" Class="mx-1" Disabled="true">
+                            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />Processing
+                        </MudButton>
+                    }
+                    else
+                    {
+                        <MudButton Variant="Variant.Filled" Class="mx-1" Color="Color.Error" OnClick="ShowDeleteModal">Delete edge device</MudButton>
+                    }
+                    @if (processingUpdate)
+                    {
+                        <MudButton Variant="Variant.Filled" Class="mx-1" Color="Color.Primary" Disabled="true">
+                            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />Processing
+                        </MudButton>
+                    }
+                    else
+                    {
+                        <MudButton Variant="Variant.Filled" Class="mx-1" Color="Color.Primary" OnClick="UpdateDevice">Save Changes</MudButton>
+                    }
                 </MudItem>
-            }
-            else
-            {
-                <MudItem xs="12" sm="4" md="3">
-                    <MudCard>
-                        <MudCardHeader>
-                            <CardHeaderContent>
-                                <MudText Typo="Typo.h5">@Gateway.DeviceId</MudText>
-                            </CardHeaderContent>
-                            <CardHeaderActions>
-                                <MudButton Variant="Variant.Text" Color="Color.Primary" StartIcon="@Icons.Filled.Cable" OnClick="ShowConnectionString">Connect</MudButton>
-                            </CardHeaderActions>
-                        </MudCardHeader>
-                    </MudCard>
-                </MudItem>
-
-                <MudItem xs="12" sm="8" md="9">
-                    <MudCard>
-                        <EditForm Model="@Gateway" OnValidSubmit="UpdateDevice">
-                            <DataAnnotationsValidator />
-                            <MudCardContent>
-                                <MudText Typo="Typo.h6" Class="mb-6">Edge Device Details</MudText>
-                                <MudGrid>
-                                    <MudItem xs="12" md="6">
-                                        <MudTextField @bind-Value="@Gateway.Type" Label="Type" Variant="Variant.Outlined" ReadOnly="true" Required="true" />
-                                    </MudItem>
-                                    <MudItem xs="12" md="6">
-                                        <MudSelect T="string" @bind-Value="@Gateway.Environment" Label="Environment" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined">
-                                            <MudSelectItem Value="@("Development")" />
-                                            <MudSelectItem Value="@("Production")" />
-                                            <MudSelectItem Value="@("Industry")" />
-                                        </MudSelect>
-                                    </MudItem>
-                                    <MudItem xs="12" md="6">
-                                        <MudText>
-                                            <b>Status</b>
-                                        </MudText>
-                                        <MudSwitch @bind-Checked="Gateway.Status" Color="Color.Secondary" Converter="@(new CustomStringToBoolConverter())">
-                                            @if (Gateway.Status == "Enabled")
-                                            {
-                                            <MudText Typo="Typo.body2">The device <b>can</b> connect to the platform.</MudText>
-                                            }
-                                            else
-                                            {
-                                            <MudText Typo="Typo.body2">The device <b>cannot</b> connect to the platform.</MudText>
-                                            }
-                                    </MudSwitch>
-                                </MudItem>
-
-                                <MudItem xs="12" md="6">
-                                    <MudText>
-                                        <b>Runtime response</b>
-                                    </MudText>
-                                    @if (Gateway.RuntimeResponse == "running")
-                                        {
-                                            <MudIcon Icon="@Icons.Filled.CheckCircle" Color="Color.Success" />
-                                        }
-                                        else
-                                        {
-                                            <MudItem>
-                                                <MudIcon Icon="@Icons.Filled.Error" Color="Color.Error" />
-                                            </MudItem>
-                                        }
-                                    </MudItem>
-
-                                    <MudSpacer />
-
-                                    <MudItem xs="12" md="6">
-                                        <MudTextField @bind-Value="@Gateway.NbDevices" Label="Nbr of connected devices" Variant="Variant.Outlined" ReadOnly="true" />
-                                    </MudItem>
-                                    <MudItem xs="12" md="6">
-                                        <MudTextField @bind-Value="@Gateway.NbModules" Label="Nbr of desired modules" Variant="Variant.Outlined" ReadOnly="true" />
-                                    </MudItem>
-
-                                    <MudItem xs="12">
-                                        <MudText Typo="Typo.h6" Class="mb-6">Last deployment</MudText>
-                                        <MudGrid>
-                                            <MudItem xs="12" md="4">
-                                                <MudTextField @bind-Value="@Gateway.LastDeployment.Name" Label="Name" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
-                                            </MudItem>
-                                            <MudItem xs="12" md="4">
-                                                <MudTextField @bind-Value="@Gateway.LastDeployment.DateCreation" Label="Date" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
-                                            </MudItem>
-                                            <MudItem xs="12" md="4">
-                                                <MudTextField @bind-Value="@Gateway.LastDeployment.Status" Label="Status" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
+            </MudItem>
+            <MudItem xs="12" sm="8" md="9">
+                <MudTabs Elevation="1" Rounded="true" PanelClass="mt-6">
+                    <MudTabPanel Text="General">
+                        <MudExpansionPanels MultiExpansion="true">
+                            <MudGrid>
+                                <MudItem xs="12">
+                                    <MudExpansionPanel Text="Edge Device Details" IsInitiallyExpanded="true">
+                                        <TitleContent><MudText Typo="Typo.h6">Edge Device Details</MudText></TitleContent>
+                                        <ChildContent>
+                                            <MudGrid>
+                                                <MudItem xs="12" md="6">
+                                                    <MudTextField @bind-Value="@Gateway.Type" Label="Type" Variant="Variant.Outlined" ReadOnly="true" Required="true" />
+                                                </MudItem>
+                                                <MudItem xs="12" md="6">
+                                                    <MudSelect T="string" @bind-Value="@Gateway.Environment" Label="Environment" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined">
+                                                        <MudSelectItem Value="@("Development")" />
+                                                        <MudSelectItem Value="@("Production")" />
+                                                        <MudSelectItem Value="@("Industry")" />
+                                                    </MudSelect>
+                                                </MudItem>
+                                                <MudItem xs="12" md="6">
+                                                    <MudText>
+                                                        <b>Status</b>
+                                                    </MudText>
+                                                    <MudSwitch @bind-Checked="Gateway.Status" Color="Color.Secondary" Converter="@(new CustomStringToBoolConverter())">
+                                                        @if (Gateway.Status == "Enabled")
+                                                        {
+                                                        <MudText Typo="Typo.body2">The device <b>can</b> connect to the platform.</MudText>
+                                                        }
+                                                        else
+                                                        {
+                                                        <MudText Typo="Typo.body2">The device <b>cannot</b> connect to the platform.</MudText>
+                                                        }
+                                                </MudSwitch>
                                             </MudItem>
-                                        </MudGrid>
-                                    </MudItem>
 
-                                </MudGrid>
-                            </MudCardContent>
-                            <MudCardActions Class="pb-4 pl-4">
-
-                                @if (processingDelete)
-                                {
-                                    <MudButton Variant="Variant.Filled" Color="Color.Error" Class="ml-auto" @onclick="ShowDeleteModal" Disabled="true">
-                                        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
-                                        Processing
-                                    </MudButton>
-                                }
-                                else
-                                {
-                                    <MudButton Variant="Variant.Filled" Color="Color.Error" Class="ml-auto" @onclick="ShowDeleteModal">Delete Edge Device</MudButton>
-                                }
-
-                                @if (processingUpdate)
-                                {
-                                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-4" Disabled="true">
-                                        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true" />
-                                        Processing
-                                    </MudButton>
-                                }
-                                else
-                                {
-                                    <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-4">Save Changes</MudButton>
-                                }
-                            </MudCardActions>
-                        </EditForm>
-                    </MudCard>
-                </MudItem>
-                <MudItem xs="12">
-                    <MudTable Items="@Gateway.Modules" Dense=true Breakpoint="Breakpoint.Sm" Hover=true Bordered=true Striped=true>
-                        <ColGroup>
-                            <col style="width: 40%;" />
-                            <col style="width: 10%;" />
-                            <col style="width: 10%;" />
-                            <col style="width: 20%;" />
-                        </ColGroup>
-                        <HeaderContent>
-                            <MudTh Style="text-align: center">Module Name</MudTh>
-                            <MudTh Style="text-align: center">Version</MudTh>
-                            <MudTh Style="text-align: center">Status</MudTh>
-                            <MudTh Style="text-align: center"></MudTh>
-                        </HeaderContent>
-                        <RowTemplate>
-                            <MudTd DataLabel="Module Name" Style="word-break: break-all;">@context.ModuleName</MudTd>
-                            <MudTd DataLabel="Version" Style="text-align: center">@context.Version</MudTd>
-                            <MudTd DataLabel="Status" Style="text-align: center">@context.Status</MudTd>
-                            <MudTd DataLabel="Device" Style="text-align: center">
-                                <MudButton Variant="Variant.Filled" Class="btn" Color="Color.Dark" Disabled="btn_disable" OnClick="@(async () => await OnMethod(context,"GetModuleLogs") )">logs</MudButton>
-                                <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="btn_disable" OnClick="@(async () => await OnMethod(context,"RestartModule") )">reboot</MudButton>
-                            </MudTd>
-                        </RowTemplate>
-                    </MudTable>
-                </MudItem>
-            }
+                                            <MudItem xs="12" md="6">
+                                                <MudText>
+                                                    <b>Runtime response</b>
+                                                </MudText>
+                                                @if (Gateway.RuntimeResponse == "running")
+                                                    {
+                                                        <MudIcon Icon="@Icons.Filled.CheckCircle" Color="Color.Success" />
+                                                    }
+                                                    else
+                                                    {
+                                                        <MudItem>
+                                                            <MudIcon Icon="@Icons.Filled.Error" Color="Color.Error" />
+                                                        </MudItem>
+                                                    }
+                                                </MudItem>
+                                                <MudItem xs="12" md="6">
+                                                    <MudTextField @bind-Value="@Gateway.NbDevices" Label="Nbr of connected devices" Variant="Variant.Outlined" ReadOnly="true" />
+                                                </MudItem>
+                                                <MudItem xs="12" md="6">
+                                                    <MudTextField @bind-Value="@Gateway.NbModules" Label="Nbr of desired modules" Variant="Variant.Outlined" ReadOnly="true" />
+                                                </MudItem>
+                                            </MudGrid>
+                                        </ChildContent>
+                                    </MudExpansionPanel>
+                                </MudItem>
+                            </MudGrid>
+                            <MudGrid>
+                                <MudItem xs="12">
+                                    <MudExpansionPanel Text="Tags">
+                                        <TitleContent><MudText Typo="Typo.h6">Last deployment</MudText></TitleContent>
+                                        <ChildContent>
+                                            <MudGrid>
+                                                <MudItem xs="12" md="4">
+                                                    <MudTextField @bind-Value="@Gateway.LastDeployment.Name" Label="Name" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
+                                                </MudItem>
+                                                <MudItem xs="12" md="4">
+                                                    <MudTextField @bind-Value="@Gateway.LastDeployment.DateCreation" Label="Date" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
+                                                </MudItem>
+                                                <MudItem xs="12" md="4">
+                                                    <MudTextField @bind-Value="@Gateway.LastDeployment.Status" Label="Status" Variant="Variant.Outlined" Margin="Margin.Dense" Disabled="true" />
+                                                </MudItem>
+                                            </MudGrid>
+                                        </ChildContent>
+                                    </MudExpansionPanel>
+                                </MudItem>
+                            </MudGrid>
+                            <MudGrid>
+                                <MudItem xs="12">
+                                    <MudExpansionPanel Text="Modules">
+                                        <TitleContent><MudText Typo="Typo.h6">Modules</MudText></TitleContent>
+                                        <ChildContent>
+                                            <MudTable Items="@Gateway.Modules" Dense=true Hover=true Bordered=true Striped=true Elevation=0>
+                                                <ColGroup>
+                                                    <col style="width: 40%;" />
+                                                    <col style="width: 10%;" />
+                                                    <col style="width: 10%;" />
+                                                    <col style="width: 20%;" />
+                                                </ColGroup>
+                                                <HeaderContent>
+                                                    <MudTh Style="text-align: center">Module Name</MudTh>
+                                                    <MudTh Style="text-align: center">Version</MudTh>
+                                                    <MudTh Style="text-align: center">Status</MudTh>
+                                                    <MudTh Style="text-align: center"></MudTh>
+                                                </HeaderContent>
+                                                <RowTemplate>
+                                                    <MudTd DataLabel="Module Name" Style="word-break: break-all;">@context.ModuleName</MudTd>
+                                                    <MudTd DataLabel="Version" Style="text-align: center">@context.Version</MudTd>
+                                                    <MudTd DataLabel="Status" Style="text-align: center">@context.Status</MudTd>
+                                                    <MudTd DataLabel="Device" Style="text-align: center">
+                                                        <MudButton Variant="Variant.Filled" Class="btn" Color="Color.Dark" Disabled="btn_disable" OnClick="@(async () => await OnMethod(context,"GetModuleLogs") )">logs</MudButton>
+                                                        <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="btn_disable" OnClick="@(async () => await OnMethod(context,"RestartModule") )">reboot</MudButton>
+                                                    </MudTd>
+                                                </RowTemplate>
+                                            </MudTable>
+                                        </ChildContent>
+                                    </MudExpansionPanel>
+                                </MudItem>
+                            </MudGrid>
+                        </MudExpansionPanels>
+                    </MudTabPanel>
+                </MudTabs>
+            </MudItem>
         </MudGrid>
-    </MudTabPanel>
-</MudTabs>
+    </MudForm>
+}
 
 @code {
     [Parameter]
@@ -207,6 +217,14 @@
         {
             Snackbar.Add($"Device {Gateway.DeviceId} has been successfully updated!", Severity.Success);
         }
+        else if (result.StatusCode == System.Net.HttpStatusCode.BadRequest)
+        {
+            Snackbar.Add("One or more validation errors occurred", Severity.Error);
+        }
+        else
+        {
+            Snackbar.Add("Something unexpected occurred", Severity.Warning);
+        }
 
         processingUpdate = false;
     }