[metron] branch master updated: METRON-2295 [UI] Displaying " No Data" message in the Alerts UI screen (subhashjha35 via sardell) closes apache/metron#1543

[sa...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

sardell pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/metron.git


The following commit(s) were added to refs/heads/master by this push:
     new df6e181  METRON-2295 [UI] Displaying "No Data" message in the Alerts UI screen (subhashjha35 via sardell) closes apache/metron#1543
df6e181 is described below

commit df6e18154c508cd803095d31f8ff9cf96e05406b
Author: subhashjha35 <su...@gmail.com>
AuthorDate: Thu Oct 31 14:46:11 2019 -0500

    METRON-2295 [UI] Displaying &quot;No Data&quot; message in the Alerts UI screen (subhashjha35 via sardell) closes apache/metron#1543
---
 .../alerts-list/table-view/table-view.component.html    |  7 +++++++
 .../alerts-list/table-view/table-view.component.scss    | 17 +++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.html b/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.html
index 96898c3..aef1d0f 100644
--- a/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.html
+++ b/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.html
@@ -23,6 +23,7 @@
       <th width="25"><input id="select-deselect-all" class="fontawesome-checkbox" type="checkbox" (click)="selectAllRows($event)"><label for="select-deselect-all"></label></th>
     </tr>
     </thead>
+
     <tbody>
     <ng-container *ngFor="let alert of alerts; let alertIndex = index;">
 
@@ -166,6 +167,12 @@
     </ng-container>
     </tbody>
   </table>
+  <div class="below-table-area">
+    <div class="no-result-box" *ngIf="alerts.length===0">
+      <h3>No Result</h3>
+      <span>Press <span class = "text-secondary fa fa-search find-btn"></span> button to fetch Alerts. Also check your filters.</span>
+    </div>
+  </div>
 </div>
 
 <div class="col-md-3 offset-md-5">
diff --git a/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.scss b/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.scss
index f648ab2..fac9b12 100644
--- a/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.scss
+++ b/metron-interface/metron-alerts/src/app/alerts/alerts-list/table-view/table-view.component.scss
@@ -38,3 +38,20 @@
   padding: 0.3rem 3px;
 }
 
+.below-table-area {
+  display: flex;
+  justify-content: center;
+}
+
+.no-result-box {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  width: 200px;
+  height: 70px;
+  text-align: center;
+}
+
+.find-btn::before {
+  color: #32ABDF;
+}