From 7995d9802bf8741150c70ae44ef81145b725754a Mon Sep 17 00:00:00 2001
From: ben salim <salim.benahben@cgi.com>
Date: Thu, 9 Dec 2021 09:43:45 +0100
Subject: [PATCH 1/2] fix #34

---
 .../Client/Pages/Gateways/Logs.razor          | 60 ++++++++++++++++---
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/AzureIoTHub.Portal/Client/Pages/Gateways/Logs.razor b/src/AzureIoTHub.Portal/Client/Pages/Gateways/Logs.razor
index 9cd7414c2..2629e8567 100644
--- a/src/AzureIoTHub.Portal/Client/Pages/Gateways/Logs.razor
+++ b/src/AzureIoTHub.Portal/Client/Pages/Gateways/Logs.razor
@@ -5,12 +5,34 @@
 
 <MudDialog>
     <DialogContent>
-        <MudCard Outlined="true" Style="width:700px">
+        <MudCard Outlined="true" >
             <MudCardContent>
-                <MudText>Status : @info.Status</MudText>
-                <MudItem xs="12" sm="12" md="20">
-                    <MudTextField Disabled="true" Value="@Indent(info.Payload)" Variant="Variant.Text" Lines="25"></MudTextField>
-                </MudItem>
+
+                <MudItem xs="12">
+                <MudTable Items="@payloads" Dense=true Breakpoint="Breakpoint.Sm" Hover=true Bordered=true Striped=true>
+                    <ColGroup>
+                        <col style="width: 20%;" />
+                        <col style="width: 10%;" />
+                        <col style="width: 30%;" />
+                    </ColGroup>
+
+                    <HeaderContent>
+                        <MudTh Style="text-align: center">Time stamp</MudTh>
+                        <MudTh Style="text-align: center">Log level</MudTh>
+                        <MudTh Style="text-align: center">Text</MudTh>
+                    </HeaderContent>
+                    <RowTemplate>
+                        <MudTd DataLabel="Device" Style="word-break: break-all;">
+                            @context.TimeStamp
+                        </MudTd>
+                        <MudTd DataLabel="Type" Style="text-align: center">@context.LogLevel</MudTd>
+                        <MudTd DataLabel="NbDevices" Style="text-align: center;word-break: break-all;">@context.Text</MudTd>
+                    </RowTemplate>
+                    <PagerContent>
+                        <MudTablePager PageSizeOptions="@pageSizeOptions"></MudTablePager>
+                    </PagerContent>
+                </MudTable>
+            </MudItem>
             </MudCardContent>
         </MudCard>
     </DialogContent>
@@ -22,14 +44,36 @@
 @code {
     [CascadingParameter] MudDialogInstance MudDialog { get; set; }
     [Parameter] public C2Dresult info { get; set; }
+    private List<PayloadModel> payloads;
+    private int[] pageSizeOptions = new int[] { 3, 5 , 10};
 
     void Cancel() => MudDialog.Cancel();
 
-    private dynamic Indent(string payload)
+    protected override  void OnInitialized()
     {
-        dynamic payloadGlo = JsonConvert.DeserializeObject(payload);
+        this.payloads = new();
+
+        dynamic payloadGlo = JsonConvert.DeserializeObject(info.Payload);
         string payloadModule = payloadGlo[0].payload;
         dynamic payloadFinal = JsonConvert.DeserializeObject(payloadModule);
-        return payloadFinal;
+
+        foreach (var item in payloadFinal)
+        {
+            this.payloads.Add(new PayloadModel
+                {
+                    Text = item.text,
+                    LogLevel = item.loglevel,
+                    Id = item.id,
+                    TimeStamp = item.timestamp
+                });
+        }
+    }
+
+    private class PayloadModel
+    {
+        public string Id{ get; set; }
+        public string Text{ get; set; }
+        public int LogLevel{ get; set; }
+        public DateTime TimeStamp{ get; set; }
     }
 }

From 5bc1a798ec592ee36abe1b316b321f12526bb736 Mon Sep 17 00:00:00 2001
From: ben salim <salim.benahben@cgi.com>
Date: Thu, 9 Dec 2021 09:43:45 +0100
Subject: [PATCH 2/2] fix #34

---
 .../Client/Pages/Gateways/Logs.razor          | 60 ++++++++++++++++---
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/AzureIoTHub.Portal/Client/Pages/Gateways/Logs.razor b/src/AzureIoTHub.Portal/Client/Pages/Gateways/Logs.razor
index 9cd7414c2..2629e8567 100644
--- a/src/AzureIoTHub.Portal/Client/Pages/Gateways/Logs.razor
+++ b/src/AzureIoTHub.Portal/Client/Pages/Gateways/Logs.razor
@@ -5,12 +5,34 @@
 
 <MudDialog>
     <DialogContent>
-        <MudCard Outlined="true" Style="width:700px">
+        <MudCard Outlined="true" >
             <MudCardContent>
-                <MudText>Status : @info.Status</MudText>
-                <MudItem xs="12" sm="12" md="20">
-                    <MudTextField Disabled="true" Value="@Indent(info.Payload)" Variant="Variant.Text" Lines="25"></MudTextField>
-                </MudItem>
+
+                <MudItem xs="12">
+                <MudTable Items="@payloads" Dense=true Breakpoint="Breakpoint.Sm" Hover=true Bordered=true Striped=true>
+                    <ColGroup>
+                        <col style="width: 20%;" />
+                        <col style="width: 10%;" />
+                        <col style="width: 30%;" />
+                    </ColGroup>
+
+                    <HeaderContent>
+                        <MudTh Style="text-align: center">Time stamp</MudTh>
+                        <MudTh Style="text-align: center">Log level</MudTh>
+                        <MudTh Style="text-align: center">Text</MudTh>
+                    </HeaderContent>
+                    <RowTemplate>
+                        <MudTd DataLabel="Device" Style="word-break: break-all;">
+                            @context.TimeStamp
+                        </MudTd>
+                        <MudTd DataLabel="Type" Style="text-align: center">@context.LogLevel</MudTd>
+                        <MudTd DataLabel="NbDevices" Style="text-align: center;word-break: break-all;">@context.Text</MudTd>
+                    </RowTemplate>
+                    <PagerContent>
+                        <MudTablePager PageSizeOptions="@pageSizeOptions"></MudTablePager>
+                    </PagerContent>
+                </MudTable>
+            </MudItem>
             </MudCardContent>
         </MudCard>
     </DialogContent>
@@ -22,14 +44,36 @@
 @code {
     [CascadingParameter] MudDialogInstance MudDialog { get; set; }
     [Parameter] public C2Dresult info { get; set; }
+    private List<PayloadModel> payloads;
+    private int[] pageSizeOptions = new int[] { 3, 5 , 10};
 
     void Cancel() => MudDialog.Cancel();
 
-    private dynamic Indent(string payload)
+    protected override  void OnInitialized()
     {
-        dynamic payloadGlo = JsonConvert.DeserializeObject(payload);
+        this.payloads = new();
+
+        dynamic payloadGlo = JsonConvert.DeserializeObject(info.Payload);
         string payloadModule = payloadGlo[0].payload;
         dynamic payloadFinal = JsonConvert.DeserializeObject(payloadModule);
-        return payloadFinal;
+
+        foreach (var item in payloadFinal)
+        {
+            this.payloads.Add(new PayloadModel
+                {
+                    Text = item.text,
+                    LogLevel = item.loglevel,
+                    Id = item.id,
+                    TimeStamp = item.timestamp
+                });
+        }
+    }
+
+    private class PayloadModel
+    {
+        public string Id{ get; set; }
+        public string Text{ get; set; }
+        public int LogLevel{ get; set; }
+        public DateTime TimeStamp{ get; set; }
     }
 }