METRON-2295 [UI] Displaying "No Data" message in the Alerts UI screen (subhashjha35 via sardell) closes apache/metron#1543
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;
+}
