consolidated status and monitoring tab

README.md

@@ -8,7 +8,6 @@
   - [Options for custom extension](#options-for-custom-extension)
 - [Samples repositories and building custom extensions](#samples-repositories-and-building-custom-extensions)
 - [Monitoring](#monitoring)
-- [Status](#status)
 - [Installation](#installation-of-plugin-as-community-plugin)
 - [Build Instructions](#build-instructions)
 - [Analytics Builder Extension Backend](#analytics-builder-extension-backend)
@@ -85,18 +84,9 @@ The modal dialog provides the option:
 
 On the monitoring tab you can view the latest alarms and events for the Streaming Analytics Engine. This is especially helpful if after an upload of a new extension no extension is loaded. 
 
-
-![Monitoring](resources/images/monitoring.png)
-
-
-## Status
-
-On the status tab you can check the status of the Analytics Streaming Engine. This is especially helpful if after an upload of a new extension no extension is loaded. 
-
 The property `is_safe_mode` is an indication if the engine was started in [Safe Mode](https://cumulocity.com/guides/streaming-analytics/troubleshooting/#safe-mode-on-startup), i.e. without loading any extension. In this case you have to delete the latest uploaded extension and restart the engine again.
 
-![Monitoring](resources/images/status.png)
-
+![Monitoring](resources/images/monitoring.png)
 
 ## Installation of plugin as community plugin
 

analytics-ui/src/monitoring/engine-monitoring.component.html

@@ -123,7 +123,7 @@ <h4>Latest events</h4>
             </div>
             <div class="list-item-body">
               <div class="row">
-                <div class="col-sm-9">
+                <div class="col-sm-12">
                   <label class="small" translate>&nbsp;&nbsp;Type&nbsp;</label>
                   <span>{{ event.type }}</span>
                   <br />
@@ -160,4 +160,47 @@ <h4>Latest events</h4>
       </div>
     </div>
   </div>
+  <div class="inner-scroll bg-level-0">
+    <div class="card-header separator sticky-top large-padding"><h4>Safe Mode</h4></div>
+    <div class="card-block large-padding bg-inherit overflow-visible">
+      <p>
+        <span
+          >If no extension is loaded after deploying your latest extension
+          please try to delete this extension and restart the Streaming
+          Analytics again.</span
+        >
+      </p>
+      <p>
+        <span>
+          When extensions can't be loaded because of errors, the Streaming
+          Analytics engine starts in
+          <a
+            href="https://cumulocity.com/guides/streaming-analytics/troubleshooting/#safe-mode-on-startup"
+            target="_blank"
+            >Safe Mode</a
+          >.</span
+        >
+      </p>
+      <p>
+        <span>
+          To recover from this situation you have to delete the defective
+          extension.</span
+        >
+      </p>
+    </div>
+  </div>
+  <div class="inner-scroll bg-level-0">
+    <div class="card-header separator sticky-top large-padding">
+      <h4>CEP Engine Status</h4>
+    </div>
+    <div class="card-block large-padding bg-inherit overflow-visible">
+      <c8y-properties-list
+        *ngIf="(cepCtrlStatusLabels$ | async).length > 0"
+        [title]="'CEP Engine Status'"
+        [emptyLabel]="'--'"
+        [properties]="cepCtrlStatusLabels$ | async"
+      >
+      </c8y-properties-list>
+    </div>
+  </div>
 </div>

analytics-ui/src/monitoring/engine-monitoring.component.ts

@@ -11,6 +11,7 @@ import { BsModalRef } from 'ngx-bootstrap/modal';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { shareReplay, switchMap, tap } from 'rxjs/operators';
 import { AnalyticsService } from '../shared';
+import { HumanizePipe, PropertiesListItem } from '@c8y/ngx-components';
 
 @Component({
   selector: 'a17t-engine-monitoring',
@@ -19,6 +20,8 @@ import { AnalyticsService } from '../shared';
 })
 export class EngineMonitoringComponent implements OnInit {
   cepId: string;
+  cepCtrlStatusLabels$: BehaviorSubject<PropertiesListItem[]> =
+  new BehaviorSubject<PropertiesListItem[]>([]);
   @Output() closeSubject: Subject<void> = new Subject();
   alarms$: Observable<IResultList<IAlarm>>;
   events$: Observable<IResultList<IEvent>>;
@@ -41,9 +44,26 @@ export class EngineMonitoringComponent implements OnInit {
   ) {}
 
   async ngOnInit(): Promise<void> {
+    const humanize = new HumanizePipe();
+
     this.init();
     this.cepId = await this.analyticsService.getCEP_Id();
-    this.cepCtrlStatus = await this.analyticsService.getCEP_Status();
+    const cepCtrlStatus = await this.analyticsService.getCEP_Status();
+    const cepCtrlStatusLabels = [];
+    Object.keys(cepCtrlStatus).forEach((key) => {
+      if (
+        ['number_extensions', 'is_safe_mode', 'microservice_name'].includes(key)
+      ) {
+        cepCtrlStatusLabels.push({
+          label: humanize.transform(key),
+          type: 'string',
+          value: cepCtrlStatus[key]
+        });
+      }
+    });
+    this.cepCtrlStatusLabels$.next(cepCtrlStatusLabels);
+
+
     const filterAlarm: object = {
       pageSize: 5,
       source: this.cepId,

analytics-ui/src/shared/analytics-tab.factory.ts

@@ -56,13 +56,13 @@ export class AnalyticsTabFactory implements TabFactory {
         icon: 'monitoring',
         orientation: 'horizontal'
       } as Tab);
-      tabs.push({
-        path: 'sag-ps-pkg-analytics-extension/status',
-        priority: 890,
-        label: 'Status',
-        icon: 'info',
-        orientation: 'horizontal'
-      } as Tab);
+    //   tabs.push({
+    //     path: 'sag-ps-pkg-analytics-extension/status',
+    //     priority: 890,
+    //     label: 'Status',
+    //     icon: 'info',
+    //     orientation: 'horizontal'
+    //   } as Tab);
     }
     return tabs;
   }