Skip to content

Commit

Permalink
Add on edge device screen and allow file download
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivanropiteaux
ivanropiteaux committed Jun 1, 2023
1 parent e8164bc commit 4880943
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 36 deletions.
30 changes: 27 additions & 3 deletions src/AzureIoTHub.Portal.Client/Pages/Devices/ConnectionStringDialog.razor
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@using AzureIoTHub.Portal.Models.v10
@using AzureIoTHub.Portal.Shared.Models.v10
@using System.Text

@inject ClipboardService ClipboardService
@inject IDeviceClientService DeviceClientService
@inject IJSRuntime JS

<div class="ConnectionString-dialog">
<MudDialog>
Expand Down Expand Up @@ -38,15 +40,15 @@
{
<MudItem xs="12">
<MudText Style="text-decoration:underline"><b>Certificate Pem</b></MudText>
<MudTextField @bind-Value="@credentials.CertificateCredentials.CertificatePem" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(credentials.CertificateCredentials.CertificatePem))"/>
<MudTextField @bind-Value="@credentials.CertificateCredentials.CertificatePem" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPemFile"/>
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Public Key</b></MudText>
<MudTextField @bind-Value="@credentials.CertificateCredentials.PublicKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(credentials.CertificateCredentials.PublicKey))"/>
<MudTextField @bind-Value="@credentials.CertificateCredentials.PublicKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPublicKeyFile"/>
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Private Key</b></MudText>
<MudTextField @bind-Value="@credentials.CertificateCredentials.PrivateKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(credentials.CertificateCredentials.PrivateKey))"/>
<MudTextField @bind-Value="@credentials.CertificateCredentials.PrivateKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPrivateKeyFile"/>
</MudItem>
}
}
Expand Down Expand Up @@ -83,5 +85,27 @@
}
}

private async Task DownloadPemFile()
{
var stream = new DotNetStreamReference(stream: new MemoryStream(
Encoding.UTF8.GetBytes(credentials.CertificateCredentials.CertificatePem)));
await JS.InvokeVoidAsync("downloadFileFromStream", "certificate.pem", stream);
}

private async Task DownloadPublicKeyFile()
{
var stream = new DotNetStreamReference(stream: new MemoryStream(
Encoding.UTF8.GetBytes(credentials.CertificateCredentials.PublicKey)));
await JS.InvokeVoidAsync("downloadFileFromStream", "key.pub", stream);
}

private async Task DownloadPrivateKeyFile()
{
var stream = new DotNetStreamReference(stream: new MemoryStream(
Encoding.UTF8.GetBytes(credentials.CertificateCredentials.PrivateKey)));
await JS.InvokeVoidAsync("downloadFileFromStream", "key", stream);
}


void Cancel() => MudDialog.Cancel();
}
105 changes: 75 additions & 30 deletions src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/ConnectionStringDialog.razor
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@using AzureIoTHub.Portal.Models.v10
@using AzureIoTHub.Portal.Shared.Constants;

@using AzureIoTHub.Portal.Shared.Models.v10
@using AzureIoTHub.Portal.Models.v10
@using System.Text
@inject IJSRuntime JS
@inject ClipboardService ClipboardService
@inject IEdgeDeviceClientService EdgeDeviceClientService
@inject PortalSettings Portal
Expand All @@ -10,52 +11,75 @@
<MudCard Outlined="true">
<MudCardContent>
<MudGrid>
@if (Portal.CloudProvider.Equals(CloudProviders.Azure))
@if (Credentials.AuthenticationMode != null && AuthenticationMode.SymmetricKey.Equals(Credentials.AuthenticationMode))
{
<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" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.ProvisioningEndpoint))" />
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Registration Id</b></MudText>
<MudTextField @bind-Value="@Credentials.RegistrationID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.RegistrationID))" />
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Scope Id</b></MudText>
<MudTextField @bind-Value="@Credentials.ScopeID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.ScopeID))" />
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Symmetric Key</b></MudText>
<MudTextField @bind-Value="@Credentials.SymmetricKey" Variant="Variant.Text" InputType="InputType.Password" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricKey))" />
</MudItem>
@if (Credentials.SymmetricCredentials != null)
{
<MudItem xs="12">
<MudText Style="text-decoration:underline"><b>Service Endpoint</b></MudText>
<MudTextField @bind-Value="@Credentials.SymmetricCredentials.ProvisioningEndpoint" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricCredentials.ProvisioningEndpoint))"/>
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Registration Id</b></MudText>
<MudTextField @bind-Value="@Credentials.SymmetricCredentials.RegistrationID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricCredentials.RegistrationID))"/>
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Scope Id</b></MudText>
<MudTextField @bind-Value="@Credentials.SymmetricCredentials.ScopeID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricCredentials.ScopeID))"/>
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Symmetric Key</b></MudText>
<MudTextField @bind-Value="@Credentials.SymmetricCredentials.SymmetricKey" Variant="Variant.Text" InputType="InputType.Password" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricCredentials.SymmetricKey))"/>
</MudItem>
}
}
else if (Portal.CloudProvider.Equals(CloudProviders.AWS))
else
{
@if (Credentials.CertificateCredentials != null)
{
<MudItem xs="12">
<MudText Style="text-decoration:underline"><b>Certificate Pem</b></MudText>
<MudTextField @bind-Value="@Credentials.CertificateCredentials.CertificatePem" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPemFile"/>
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Public Key</b></MudText>
<MudTextField @bind-Value="@Credentials.CertificateCredentials.PublicKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPublicKeyFile"/>
</MudItem>
<MudItem Class="mt-0" xs="12">
<MudText Style="text-decoration:underline"><b>Private Key</b></MudText>
<MudTextField @bind-Value="@Credentials.CertificateCredentials.PrivateKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPrivateKeyFile"/>
</MudItem>
}

<div style="border-bottom:1px solid var(--mud-palette-lines-default);width: 90%;text-align: center;margin: auto;">
<span style="background-color: white;transform:translateY(10px);display: inline-block;padding: 0px 10px">OR</span>
</div>

<MudItem xs="12">
@if (string.IsNullOrEmpty(EnrollementScriptCommand))
{
<MudText>Quick connect</MudText>
<br />
<br/>
<MudAlert Severity="Severity.Normal">
Quiclky connect your Edge device on the platform by executing one command.
</MudAlert>
<br />
<br/>
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;display: block; margin-left: auto; margin-right: auto" OnClick="GetEnrollmentScriptCommand">Get the magic command</MudButton>
}
else
{
<br />
<br/>
<MudText Style="text-decoration:underline"><b>Operating system</b></MudText>
<MudSelect T="string" @bind-Value="@templateName" Text="Operating system" SelectedValuesChanged="GetEnrollmentScriptCommand">
<MudSelectItem Value="@("debian_11_bullseye")">Debian 11 (Bulleseye)</MudSelectItem>
<MudSelectItem Value="@("debian_11_bullseye")">Debian 11 (Bulleseye)</MudSelectItem>
</MudSelect>
<br />
<br/>
<MudAlert Severity="Severity.Info">
Copy this command line above and paste it into the device prompt.<br />
Copy this command line above and paste it into the device prompt.<br/>
<b>Note that you should have administrative rights on the device to execute the command.</b>
</MudAlert>
<br />
<MudTextField @bind-Value="@EnrollementScriptCommand" Style="text-overflow: ellipsis" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(EnrollementScriptCommand))" />
<br/>
<MudTextField @bind-Value="@EnrollementScriptCommand" Style="text-overflow: ellipsis" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(EnrollementScriptCommand))"/>
}
</MudItem>
}
Expand All @@ -76,7 +100,7 @@

[Parameter] public string deviceId { get; set; } = default!;

private SymmetricCredentials Credentials = new SymmetricCredentials();
private DeviceCredentials Credentials = new DeviceCredentials();

public string EnrollementScriptCommand { get; set; } = default!;

Expand All @@ -103,5 +127,26 @@
EnrollementScriptCommand = $"curl -s {url} | bash";
}

private async Task DownloadPemFile()
{
var stream = new DotNetStreamReference(stream: new MemoryStream(
Encoding.UTF8.GetBytes(Credentials.CertificateCredentials.CertificatePem)));
await JS.InvokeVoidAsync("downloadFileFromStream", "certificate.pem", stream);
}

private async Task DownloadPublicKeyFile()
{
var stream = new DotNetStreamReference(stream: new MemoryStream(
Encoding.UTF8.GetBytes(Credentials.CertificateCredentials.PublicKey)));
await JS.InvokeVoidAsync("downloadFileFromStream", "key.pub", stream);
}

private async Task DownloadPrivateKeyFile()
{
var stream = new DotNetStreamReference(stream: new MemoryStream(
Encoding.UTF8.GetBytes(Credentials.CertificateCredentials.PrivateKey)));
await JS.InvokeVoidAsync("downloadFileFromStream", "key", stream);
}

void Close() => MudDialog.Cancel();
}
4 changes: 2 additions & 2 deletions src/AzureIoTHub.Portal.Client/Services/EdgeDeviceClientService.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ public Task DeleteDevice(string deviceId)
return this.http.DeleteAsync($"api/edge/devices/{deviceId}");
}

public Task<SymmetricCredentials> GetEnrollmentCredentials(string deviceId)
public Task<DeviceCredentials> GetEnrollmentCredentials(string deviceId)
{
return this.http.GetFromJsonAsync<SymmetricCredentials>($"api/edge/devices/{deviceId}/credentials")!;
return this.http.GetFromJsonAsync<DeviceCredentials>($"api/edge/devices/{deviceId}/credentials")!;
}

public Task<string> GetEnrollmentScriptUrl(string deviceId, string templateName)
Expand Down
2 changes: 1 addition & 1 deletion src/AzureIoTHub.Portal.Client/Services/IEdgeDeviceClientService.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ public interface IEdgeDeviceClientService

Task DeleteDevice(string deviceId);

Task<SymmetricCredentials> GetEnrollmentCredentials(string deviceId);
Task<DeviceCredentials> GetEnrollmentCredentials(string deviceId);

Task<string> GetEnrollmentScriptUrl(string deviceId, string templateName);

Expand Down

0 comments on commit 4880943

Please sign in to comment.