update analytics component

components/analytics/analytics.component.html

@@ -20,4 +20,15 @@ <h1>
   <app-analytics-builder></app-analytics-builder>
 </div>
 
+<div class="row">
+  <h1>
+    <i class="c8y-icon c8y-icon-duocolor c8y-icon-apama-machine-learning"></i>
+    Predictive Analytics
+  </h1>
+</div>
+
+<div class="row" style="margin-top: 2em">
+  <app-predictive-analytics></app-predictive-analytics>
+</div>
+
 

components/analytics/analyticsbuilder/apamaAB.component.ts

@@ -14,7 +14,6 @@ import { Alert, AlertService } from '@c8y/ngx-components';
     aBuilder_models: any;
     aBuilder_data: any;
 
-    modelUrl: string;
     deviceId: string;
 
     constructor(public route: ActivatedRoute,
@@ -26,9 +25,6 @@ import { Alert, AlertService } from '@c8y/ngx-components';
         var data = this.route.snapshot.parent.data.contextData;
         this.deviceId = data["id"];
 
-        const indexObj = data["self"].indexOf("/inventory/");
-        this.modelUrl = data["self"].slice(0,indexObj) + "/apps/apamaanalyticsbuilder";   
-
         this.fetchABModels();
         this.fetchThinEdgeModel();
 

components/analytics/predictiveanalytics/predictive.component.css

@@ -0,0 +1,12 @@
+.card{
+    width: 28em;
+  }
+
+  .card:hover {
+      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+    }
+
+  .card-title{
+      text-overflow: ellipsis;
+  }
+

components/analytics/predictiveanalytics/predictive.component.html

@@ -0,0 +1,55 @@
+<div class="card-group interact-grid">
+  <div *ngFor="let model of ML_data">
+    <div class="col-md-4">
+      <div class="card">
+        <div class="card-actions">
+          <div class="dropdown settings" dropdown>
+            <button
+              type="button"
+              title="Actions"
+              dropdownToggle
+              class="dropdown-toggle c8y-dropdown"
+            >
+              <i c8yIcon="ellipsis-v" class="fa fw fa-ellipsis-v"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
+              <li>
+                <a href="{{this.modelUrl}}#/eplapps" target="_blank">
+                  <i c8yIcon="edit"></i> Edit
+              </a>
+            </li>
+            </ul>
+          </div>
+        </div>
+        <!-- Card Header -->
+        <div class="card-header separator">
+          <div class="card-icon">
+            <i class="c8y-icon c8y-icon-duocolor c8y-icon-aris"></i>
+          </div>
+          <div class="text-truncate card-title" title="Analyse">
+            {{ model.modelName }}
+          </div>
+
+        </div>
+        <!-- Card Body -->
+        <div class="card-block text-left p-4">
+          <b class="card-text">Description: </b>
+          <p class="card-text">{{ model.description }}</p>
+        </div>
+        <!-- Body end -->
+
+        <!-- Card Footer -->
+        <div class="card-footer separator text-right">
+          <label class="c8y-switch" title="Switch on/off">
+            Active
+            <input #myCheckbox type="checkbox" 
+                [checked]="isModelStatusActive(model)"
+                (click)="switchModelOnOff(model,$event,myCheckbox.checked)" id="switcher" />
+            <span></span>
+          </label>
+        </div>
+        <!-- Footer end -->
+      </div>
+    </div>
+  </div>
+</div>

components/analytics/predictiveanalytics/predictive.component.ts

@@ -0,0 +1,151 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { OperationService, IOperation, FetchClient } from '@c8y/client';
+import { Alert, AlertService } from '@c8y/ngx-components';
+
+@Component({
+    selector: 'app-predictive-analytics',
+    templateUrl: "./predictive.component.html",
+    styleUrls: ['./predictive.component.css']
+  })
+
+  export class PredictiveAnalyticsComponent implements OnInit {
+    ML_models: any;
+    ML_data: any;
+
+    deviceId: string;
+
+    constructor(public route: ActivatedRoute,
+                private fetchClient: FetchClient,
+                private ops: OperationService,
+                private alert: AlertService) {}        // 1
+
+     ngOnInit() {
+        var data = this.route.snapshot.parent.data.contextData;
+        this.deviceId = data["id"];
+
+        this.fetchMLModels();
+        this.fetchThinEdgeModel();
+
+     }
+
+     fetchMLModels(){
+      this.ML_data = [];
+      this.fetchClient.fetch('/service/zementis/models').then((response) => { //try...
+        response.json().then( (data) => {
+            //this.ML_data = data["models"];
+            for(var i = 0; i < data["models"].length; i++) {
+              this.fetchClient.fetch('/service/zementis/model/' + data["models"][i]).then((response) => { //try...
+                response.json().then( (model) => {
+                    console.log(model);
+                    this.ML_data.push(model);
+
+                });  
+
+              } ,(error) => { //...catch
+                 console.log(error);
+              }  ); 
+            }
+
+        } );  
+
+     } ,(error) => { //...catch
+        console.log(error);
+     }  ); 
+     }
+
+     fetchThinEdgeModel(){
+      this.fetchClient.fetch("inventory/managedObjects/" + this.deviceId).then(
+        (response) => {
+          //try...
+          response.json().then((data) => {
+            this.ML_models = data["c8y_ThinEdge_Model"];     
+          //  console.log(this.epl_models); //thin edge models
+          });
+        },
+        (error) => {
+          //...catch
+          console.log(error);
+        }
+      );
+     }
+
+     isModelStatusActive(model):boolean{
+        for(var i = 0; i < this.ML_models.length; i++) {
+          if (model.name == this.ML_models[i].name){
+            return true;
+          }
+        }
+        return false;
+       }
+
+       switchModelOnOff(model: any, event: any, trigger: any){
+        //console.log(model); // {}   
+        //console.log(trigger); // {} 
+        var isActive = this.isModelStatusActive(model);
+
+        const objIndex = this.ML_data.findIndex((obj => obj.id == model.id));
+
+        if (trigger && !isActive){
+          console.log("switch ON");
+          this.switchModelOn(model);
+          this.ML_data[objIndex].state = "active";
+        }else if(!trigger && isActive){
+          console.log("switch OFF");
+          this.switchModelOff(model);
+          this.ML_data[objIndex].state = "inactive";
+        }else if ((trigger && isActive) || (!trigger && !isActive) ){
+          console.log("Try to prevent check.");
+          event.preventDefault();
+        }
+
+     }
+
+     switchModelOn(model: any){
+        const modelOnOperation: IOperation = {
+            deviceId: this.deviceId,
+            c8y_ThinEdge_Model: {
+              name: model.name,
+              type: "PredictiveAnalytics",
+              id: model.id,
+              order: "load"
+            },
+            description: `Load model '${model.name}'`
+        };
+        this.sendOperation(modelOnOperation);
+    }
+    switchModelOff(model: any){
+        const modelOffOperation: IOperation = {
+            deviceId: this.deviceId,
+            c8y_ThinEdge_Model: {
+              name: model.name,
+              type: "PredictiveAnalytics",
+              id: model.id,
+              order: "delete"
+            },
+            description: `Delete model '${model.name}'`
+          };
+          this.sendOperation(modelOffOperation);
+    }
+
+    sendOperation(operation){
+        this.ops.create(operation).then(result => {
+            const myAlert:Alert = {
+              text :`${operation.description}`, 
+              type: "info",
+              timeout : 8000
+            };
+            this.alert.add(myAlert);
+          },error => {
+            const myAlert:Alert = {
+              text : "Error creating operation. " + JSON.stringify(error), 
+              type: "danger",
+              timeout : 8000
+            };
+            this.alert.add(myAlert);
+          } );
+
+     }
+
+  }