changed styling

Cumulocity-IoT · Dec 12, 2023 · 617ab4a · 617ab4a
1 parent 6f73d75
commit 617ab4a
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 17 deletions.
diff --git a/analytics-ui/src/monitoring/extension-monitoring.component.html b/analytics-ui/src/monitoring/extension-monitoring.component.html
@@ -16,8 +16,9 @@
   </c8y-breadcrumb-item>
 </c8y-breadcrumb>
 <div class="card card--fullpage">
-  <!-- <div class="card-header separator">
-  </div> -->
+  <div class="card-header separator">
+    <span>Safe Mode</span>
+  </div>
   <div class="inner-scroll">
     <div class="card-block separator">
       <p>
@@ -45,21 +46,42 @@
         >
       </p>
     </div>
-    <div class="card-block separator">
-      <div class="legend">Latest Alarms</div>
-      <!-- <c8y-form-group>
-        <label for="name">Search</label>
+    <div class="legend form-block p-l-24 p-r-24">Latest Alarms</div>
+    <div class="card-block">
+      <c8y-form-group>
         <form class="form-inline">
-          <input
+          <!-- <label for="name">Search</label>
+         <input
             [(ngModel)]="searchString"
             type="text"
             id="name"
             formControlName="name"
             class="form-control"
-          />
-          <button type="submit" (click)="search()" class="btn btn-primary">Search</button>
+          /> -->
+          <label
+            *ngFor="let stat of AlarmStatus | keyvalue"
+            class="c8y-radio radio-inline"
+            title="{{ stat.value }}"
+          >
+            <input
+              type="radio"
+              checked="checked"
+              name="c8y-group"
+              value="{{ stat.value }}"
+              [(ngModel)]="status"
+            />
+            <span></span>
+            <span>{{ stat.value }}</span>
+          </label>
+          <button
+            type="submit"
+            (click)="search()"
+            class="btn btn-primary btn-sm m-b-8"
+          >
+            Search
+          </button>
         </form>
-      </c8y-form-group> -->
+      </c8y-form-group>
       <div style="height: 450px; overflow: auto">
         <div class="card-block">
           <div class="timeline-list list-condensed">
@@ -79,7 +101,9 @@
                     <div class="col-sm-9">
                       <label class="small" translate>Severity&nbsp;</label>
                       <span>{{ alarm.severity }}</span>
-                      <label class="small" translate>&nbsp;&nbsp;Type&nbsp;</label>
+                      <label class="small" translate
+                        >&nbsp;&nbsp;Type&nbsp;</label
+                      >
                       <span>{{ alarm.type }}</span>
                       <br />
                       <span>{{ alarm.text }}</span>
@@ -92,6 +116,11 @@
                 </div>
               </div>
             </div>
+            <c8y-ui-empty-state *ngIf="(alarms$ | async)?.data.length == 0"
+              [icon]="'alarm'"
+              [title]="'No alarms found.' | translate"
+              [horizontal]="true"
+            ></c8y-ui-empty-state>
           </div>
         </div>
       </div>

diff --git a/analytics-ui/src/monitoring/extension-monitoring.component.ts b/analytics-ui/src/monitoring/extension-monitoring.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Output, ViewEncapsulation } from "@angular/core";
 import { BehaviorSubject, Observable, Subject, of } from "rxjs";
-import { AlarmService, IAlarm, IResultList } from "@c8y/client";
+import { AlarmService, AlarmStatus, IAlarm, IResultList } from "@c8y/client";
 import { shareReplay, switchMap, tap } from "rxjs/operators";
 import { BsModalRef } from "ngx-bootstrap/modal";
 import { AnalyticsService } from "../shared/analytics.service";
@@ -11,13 +11,14 @@ import { AnalyticsService } from "../shared/analytics.service";
   encapsulation: ViewEncapsulation.None,
 })
 export class ExtensionMonitoringComponent implements OnInit {
-
   cepId: string;
   @Output() closeSubject: Subject<void> = new Subject();
   alarms$: Observable<IResultList<IAlarm>>;
   nextPage$: BehaviorSubject<any> = new BehaviorSubject({ direction: 0 });
   currentPage: number = 1;
   searchString: string;
+  status: AlarmStatus;
+  AlarmStatus = AlarmStatus;
 
   constructor(
     private alarmService: AlarmService,
@@ -36,9 +37,14 @@ export class ExtensionMonitoringComponent implements OnInit {
     };
     this.alarms$ = this.nextPage$.pipe(
       tap((options) => {
-        this.currentPage = this.currentPage + options.direction;
-        if (this.currentPage < 1) this.currentPage = 1;
-        filter["currentPage"] = this.currentPage;
+        if (options.direction) {
+          this.currentPage = this.currentPage + options.direction;
+          if (this.currentPage < 1) this.currentPage = 1;
+          filter["currentPage"] = this.currentPage;
+        }
+        if (options.status) {
+          filter["status"] = options.status;
+        }
       }),
       switchMap(() => this.alarmService.list(filter)),
       shareReplay()
@@ -51,6 +57,10 @@ export class ExtensionMonitoringComponent implements OnInit {
   }
 
   nextPage(direction: number) {
-    this.nextPage$.next({direction});
+    this.nextPage$.next({ direction });
+  }
+
+  search() {
+    this.nextPage$.next({ status:this.status });
   }
 }