Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix device search panel #46

Merged
merged 4 commits into from
Dec 8, 2021
Merged

Fix device search panel #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
49db51c
Gestion des exceptions dans la fonction filtre du search panel.
audserraCGI Dec 8, 2021
fa47a87
Rajout de LocationCode dans l'objet DeviceListItem
audserraCGI Dec 8, 2021
e92fba3
Suppression AppEUI et AppKey dans search panel
audserraCGI Dec 8, 2021
ea878ab
Suppression commentaires
audserraCGI Dec 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 73 additions & 61 deletions src/AzureIoTHub.Portal/Client/Pages/Devices/DeviceListPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,25 @@
</MudCardHeader>
<MudCardContent>
<MudGrid>
<MudItem xs="12">
<MudTextField @bind-Value="searchString" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
<MudItem md="6" sm="12">
<MudItem xs="12" Class="custom-form" Style="margin-top:1em;margin-bottom:1em;">
<MudItem md="2" sm="12">
<MudText>DeviceID : </MudText>
</MudItem>
<MudItem md="10" sm="12">
<MudTextField @bind-Value="searchID" Placeholder="DeviceID" Class="mb-2"></MudTextField>
</MudItem>
</MudItem>
<MudItem xs="12" Class="custom-form" Style="margin-top:1em;margin-bottom:1em;">
<MudItem md="2" sm="12">
<MudText>Location : </MudText>
</MudItem>
<MudItem md="10" sm="12">
<MudTextField @bind-Value="searchLocation" Placeholder="Location" Margin="Margin.Dense"></MudTextField>
</MudItem>
</MudItem>
</MudItem>
<MudItem xs="6">
<MudItem md="6" sm="12">
<MudText>Status : </MudText>
<MudRadioGroup @bind-SelectedOption="@searchStatus" Style="display:flex;align-items:baseline">
<MudItem md="4" sm="12">
Expand All @@ -34,7 +49,7 @@
<MudRadio Option="@("")" Color="Color.Secondary">All</MudRadio>
</MudItem>
</MudRadioGroup>
<MudDivider />
<MudDivider Style="margin-top:1em;margin-bottom:1em;" />
<MudText>Connection state : </MudText>
<MudRadioGroup @bind-SelectedOption="@searchState" Style="display:flex;align-items:baseline">
<MudItem md="4" sm="12">
Expand All @@ -48,37 +63,12 @@
</MudItem>
</MudRadioGroup>
</MudItem>

<MudItem xs=6>
<MudItem xs="12" Class="custom-form">
<MudItem md="2" sm="12">
<MudText>Location : </MudText>
</MudItem>
<MudItem md="10" sm="12">
<MudTextField @bind-Value="searchLocation" Placeholder="Location" Margin="Margin.Dense"></MudTextField>
</MudItem>
</MudItem>
<MudItem xs="12" Class="custom-form">
<MudItem md="2" sm="12">
<MudText>AppEUI : </MudText>
</MudItem>
<MudItem md="10" sm="12" Class="custom-form">
<MudTextField @bind-Value="searchAppEUI" Placeholder="AppEUI" Margin="Margin.Dense"></MudTextField>
</MudItem>
</MudItem>
<MudItem xs="12" Class="custom-form">
<MudItem md="2" sm="12">
<MudText>AppKey : </MudText>
</MudItem>
<MudItem md="10" sm="12">
<MudTextField @bind-Value="searchAppKey" Placeholder="AppKey" Margin="Margin.Dense"></MudTextField>
</MudItem>
</MudItem>
</MudItem>
</MudGrid>

</MudCardContent>
<MudCardActions>
<MudSpacer></MudSpacer>
<MudButton Variant="Variant.Outlined" Color="Color.Success" Style="margin:0.5em;">Search</MudButton>
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;" OnClick="Reset">Reset</MudButton>
</MudCardActions>
</MudCard>
Expand Down Expand Up @@ -118,7 +108,7 @@
<MudTh Style="text-align: center">Delete</MudTh>
</HeaderContent>
<RowTemplate>
<MudTd Style="text-align: center">
<MudTd Style="text-align: center">
<img height="25" src="@context.ImageUrl" />
</MudTd>
<MudTd DataLabel="Device" Style="word-break: break-all;">
Expand All @@ -134,9 +124,9 @@
{
<MudIcon Icon="@Icons.Filled.Error" Color="Color.Error" />
}
</MudTd>
<MudTd DataLabel="Connection" Style="text-align: center">
</MudTd>

<MudTd DataLabel="Connection" Style="text-align: center">
@if (context.IsConnected)
{
<MudIcon Icon="@Icons.Filled.Wifi" Color="Color.Success" />
Expand All @@ -145,20 +135,20 @@
{
<MudIcon Icon="@Icons.Filled.WifiOff" Color="Color.Error" />
}
</MudTd>
<MudTd DataLabel="LAT" Style="text-align: center">@context.LastActivityDate</MudTd>
<MudTd DataLabel="Details" Style="text-align: center">
<a href="devices/@context.DeviceID"><MudIconButton Icon="@Icons.Filled.Visibility" Color="Color.Default" /></a>
</MudTd>
<MudTd DataLabel="Delete" Style="text-align: center">
<MudIconButton Color="Color.Default" Icon="@Icons.Material.Filled.Delete" Size="Size.Medium" OnClick="@(e => DeleteDevice(context))"></MudIconButton>
</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager PageSizeOptions="@pageSizeOptions"></MudTablePager>
</PagerContent>
</MudTable>
</MudItem>
</MudTd>
<MudTd DataLabel="LAT" Style="text-align: center">@context.LastActivityDate</MudTd>
<MudTd DataLabel="Details" Style="text-align: center">
<a href="devices/@context.DeviceID"><MudIconButton Icon="@Icons.Filled.Visibility" Color="Color.Default" /></a>
</MudTd>
<MudTd DataLabel="Delete" Style="text-align: center">
<MudIconButton Color="Color.Default" Icon="@Icons.Material.Filled.Delete" Size="Size.Medium" OnClick="@(e => DeleteDevice(context))"></MudIconButton>
</MudTd>
</RowTemplate>
<PagerContent>
<MudTablePager PageSizeOptions="@pageSizeOptions"></MudTablePager>
</PagerContent>
</MudTable>
</MudItem>
}
<MudItem xs="12">
<a href="devices/new"><MudFab Color="Color.Secondary" Icon="@Icons.Material.Filled.Add" Label="Add a new device" /></a>
Expand All @@ -168,7 +158,7 @@

@code {
private DeviceListItem[] result;
private string searchString = "";
private string searchID = "";
private string searchStatus = "";
private string searchState = "";
private string searchLocation = "";
Expand Down Expand Up @@ -205,7 +195,7 @@
/// <returns></returns>
private void Reset()
{
searchString = "";
searchID = "";
searchStatus = "";
searchState = "";
searchLocation = "";
Expand Down Expand Up @@ -234,23 +224,45 @@
}

/// <summary>
/// Filter the list of devices, based on fields set in the search panel
/// Filters the list of devices, based on fields set in the search panel
/// </summary>
/// <param name="item"></param>
/// <returns></returns>
/// <param name="item">Device represented in the current row</param>
/// <returns>Boolean</returns>
private bool FilterFunc(DeviceListItem item)
{
bool flagName = string.IsNullOrWhiteSpace(searchString) || item.DeviceID.Contains(searchString, StringComparison.OrdinalIgnoreCase);
bool flagStatus = string.IsNullOrWhiteSpace(searchStatus) || item.IsEnabled.ToString().Contains(searchStatus, StringComparison.OrdinalIgnoreCase);
bool flagState = string.IsNullOrWhiteSpace(searchState) || item.IsConnected.ToString().Contains(searchState, StringComparison.OrdinalIgnoreCase);
bool flagLocation = string.IsNullOrWhiteSpace(searchLocation) || item.LocationCode.Contains(searchLocation, StringComparison.OrdinalIgnoreCase);
bool flagAppEUI = string.IsNullOrWhiteSpace(searchAppEUI) || item.AppEUI.Contains(searchAppEUI, StringComparison.OrdinalIgnoreCase);
bool flagAppKey = string.IsNullOrWhiteSpace(searchAppKey) || item.AppKey.Contains(searchAppKey, StringComparison.OrdinalIgnoreCase);
bool flagID = checkFlag(item.DeviceID, searchID);
bool flagStatus = checkFlag(item.IsEnabled.ToString(), searchStatus);
bool flagState = checkFlag(item.IsConnected.ToString(), searchState);
bool flagLocation = checkFlag(item.LocationCode, searchLocation);
bool flagAppEUI = checkFlag(item.AppEUI, searchAppEUI);
bool flagAppKey = checkFlag(item.AppKey, searchAppKey);

// Current row is shown only if all the flags are true
if (flagName && flagStatus && flagState && flagLocation && flagAppEUI && flagAppKey)
if (flagID && flagStatus && flagState && flagLocation && flagAppEUI && flagAppKey)
return true;

return false;
}

/// <summary>
/// Checks if the specific device value matches the search criteria
/// </summary>
/// <param name="deviceValue">Device attribute being compared</param>
/// <param name="searchString">Field value in the search panel</param>
/// <returns>True if it matches of field is empty</returns>
private bool checkFlag(string deviceValue, string searchString)
{
bool flag;
try
{
flag = string.IsNullOrWhiteSpace(searchString) || deviceValue.Contains(searchString, StringComparison.OrdinalIgnoreCase);
}

//May happen if the device attribute is set to null
catch (NullReferenceException)
{
flag = false;
}
return flag;
}
}
1 change: 1 addition & 0 deletions src/AzureIoTHub.Portal/Server/Mappers/DeviceTwinMapper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ public DeviceListItem CreateDeviceListItem(Twin twin)
ImageUrl = this.deviceModelImageManager.ComputeImageUri(Helpers.DeviceHelper.RetrieveTagValue(twin, nameof(DeviceDetails.ModelId))),
IsConnected = twin.ConnectionState == DeviceConnectionState.Connected,
IsEnabled = twin.Status == DeviceStatus.Enabled,
LocationCode = Helpers.DeviceHelper.RetrieveTagValue(twin, nameof(DeviceDetails.LocationCode)),
LastActivityDate = twin.LastActivityTime.GetValueOrDefault(DateTime.MinValue)
};
}
Expand Down