Add DPS connection on device detail page if not lora

src/AzureIoTHub.Portal/Client/Pages/Devices/ConnectionStringDialog.razor

@@ -0,0 +1,80 @@
+@using Microsoft.AspNetCore.Authorization
+@using AzureIoTHub.Portal.Shared.Models.V10
+
+@inject HttpClient Http
+@inject ISnackbar Snackbar
+
+<div class="ConnectionString-dialog">
+    <MudDialog>
+        <DialogContent>
+            @if (loading)
+            {
+                <MudItem Class="custom-centered-container">
+                    <MudProgressCircular Class="custom-centered-item" Color="Color.Default" Indeterminate="true" />
+                </MudItem>
+            }
+            else
+            {
+                <MudCard Outlined="true">
+                    <MudCardContent>
+                        <MudGrid>
+                            <MudItem xs="12">
+                                <MudText Style="text-decoration:underline"><b>Service Endpoint</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.ProvisioningEndpoint" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" />
+                            </MudItem>
+                            <MudItem xs="12">
+                                <MudText Style="text-decoration:underline"><b>Registation Scope ID</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.ScopeID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" />
+                            </MudItem>
+                            <MudItem Class="mt-0" xs="12">
+                                <MudText Style="text-decoration:underline"><b>Device Id</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.RegistrationID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" />
+                            </MudItem>
+                            <MudItem Class="mt-0" xs="12">
+                                <MudText Style="text-decoration:underline"><b>Symmetric Key</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.SymmetricKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" />
+                            </MudItem>
+                        </MudGrid>
+                    </MudCardContent>
+                </MudCard>
+            }
+        </DialogContent>
+        <DialogActions>
+            <MudButton OnClick="Cancel">Cancel</MudButton>
+        </DialogActions>
+    </MudDialog>
+</div>
+
+@code {
+    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
+    [Parameter] public string deviceId { get; set; }
+    private EnrollmentCredentials Credentials;
+    private bool loading = true;
+
+    protected override async Task OnInitializedAsync()
+    {
+        try
+        {
+            await base.OnInitializedAsync();
+
+            Credentials = await this.Http.GetFromJsonAsync<EnrollmentCredentials>($"api/devices/{deviceId}/credentials");
+            loading = false;
+
+        }
+        catch (HttpRequestException e)
+        {
+            if (e.StatusCode == System.Net.HttpStatusCode.NotFound)
+            {
+                Snackbar.Add("Cannot obtain the connection string <br> because the enrollment group does not exist.", Severity.Error);
+            }
+            else
+            {
+                Snackbar.Add($"Something went wrong.", Severity.Error);
+            }
+
+            MudDialog.Close();
+        }
+    }
+
+    void Cancel() => MudDialog.Cancel();
+}

src/AzureIoTHub.Portal/Client/Pages/Devices/DeviceDetailPage.razor

@@ -12,6 +12,7 @@
 @inject HttpClient Http
 @inject ISnackbar Snackbar
 @inject NavigationManager NavManager
+@inject IDialogService DialogService
 
 <MudText Typo="Typo.h5" Color="Color.Primary" Class="mb-4">Device Details</MudText>
 <MudForm Model="@Device" @ref="form">
@@ -22,8 +23,14 @@
                     <MudCard>
                         <MudCardHeader>
                             <CardHeaderContent>
-                                <MudText Align="Align.Center" Typo="Typo.h5">@Device.DeviceID</MudText>
+                                <MudText Typo="Typo.h5">@Device.DeviceID</MudText>
                             </CardHeaderContent>
+                            <CardHeaderActions>
+                                @if (isLoaded && (!IsLoRa || !(Device is LoRaDeviceDetails)))
+                                {
+                                    <MudButton Variant="Variant.Text" Color="Color.Primary" StartIcon="@Icons.Filled.Cable" OnClick="ShowConnectionString">Connect</MudButton>
+                                }
+                            </CardHeaderActions>
                         </MudCardHeader>
                         <MudCardContent>
                             <div class="d-flex justify-center mb-4">
@@ -117,6 +124,8 @@
 
     private DeviceDetails Device { get; set; } = new DeviceDetails();
 
+    private bool isLoaded = false;
+
     private IEnumerable<DeviceModel> DeviceModelList { get; set; } = new List<DeviceModel>();
 
     private IEnumerable<DeviceModelCommand> Commands { get; set; }
@@ -132,6 +141,8 @@
         {
             Device = await Http.GetFromJsonAsync<DeviceDetails>($"{ApiUrlBase}/{DeviceID}");
         }
+
+        isLoaded = true;
     }
 
     /// <summary>
@@ -184,4 +195,13 @@
         return DeviceModelList
                     .Where(x => x.Name.StartsWith(value, StringComparison.InvariantCultureIgnoreCase));
     }
+
+    public void ShowConnectionString()
+    {
+        var parameters = new DialogParameters();
+        parameters.Add(nameof(ConnectionStringDialog.deviceId), this.DeviceID);
+
+        DialogService.Show<ConnectionStringDialog>("Device Credentials", parameters);
+    }
+
 }

src/AzureIoTHub.Portal/Client/Pages/Edge_Devices/EdgeDeviceDetailPage.razor

@@ -28,14 +28,12 @@
                     <MudCard>
                         <MudCardHeader>
                             <CardHeaderContent>
-                                <MudText Align="Align.Center" Typo="Typo.h5">@Gateway.DeviceId</MudText>
+                                <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>
-                        <MudCardContent>
-                            <div class="d-flex justify-center mb-4">
-                                <MudButton Variant="Variant.Filled" Color="Color.Dark" OnClick="ShowConnectionString">Connect</MudButton>
-                            </div>
-                        </MudCardContent>
                     </MudCard>
                 </MudItem>
 

src/AzureIoTHub.Portal/Server/Managers/DeviceProvisioningServiceManager.cs

@@ -145,6 +145,11 @@ private static string GenerateKey()
 
         private static string ComputeEnrollmentGroupName(string deviceType)
         {
+            if (string.IsNullOrEmpty(deviceType))
+            {
+                return "default";
+            }
+
             return deviceType.Trim()
                 .ToLowerInvariant()
                 .Replace(" ", "-");