init commit

README.md

@@ -1 +1,5 @@
-# cumulocity-thinedge-web-app
+# cumulocity-thinedge-web-app
+
+ToDo before run:
+- change URL in package.json
+- run 'npm init'

app.module.ts

@@ -0,0 +1,95 @@
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule as NgRouterModule } from '@angular/router';
+import { UpgradeModule as NgUpgradeModule } from '@angular/upgrade/static';
+
+import { CoreModule, RouterModule, HOOK_ONCE_ROUTE, ViewContext } from '@c8y/ngx-components';
+import { AssetsNavigatorModule } from '@c8y/ngx-components/assets-navigator';
+import { DeviceConfigurationModule } from '@c8y/ngx-components/device-configuration';
+import { DeviceListsModule } from '@c8y/ngx-components/device-lists';
+import { ImpactProtocolModule } from '@c8y/ngx-components/protocol-impact';
+import { OpcuaProtocolModule } from '@c8y/ngx-components/protocol-opcua';
+import { RepositoryModule } from '@c8y/ngx-components/repository';
+import { TrustedCertificatesModule } from '@c8y/ngx-components/trusted-certificates';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+
+import { DockerComponent } from './components/docker-comp/docker.component';
+import { AnalyticsComponent } from './components/analytics/analytics.component';
+import { AnalyticsEPLComponent } from './components/analytics/apamaepl/apamaepl.component';
+import { AnalyticsBuilderComponent } from './components/analytics/analyticsbuilder/apamaAB.component';
+import { DockerGuard } from './components/helper/docker.guard';
+import { AnalyticsGuard } from './components/helper/analytics.guard';
+
+import {
+  DashboardUpgradeModule,
+  HybridAppModule,
+  UpgradeModule,
+  UPGRADE_ROUTES
+} from '@c8y/ngx-components/upgrade';
+
+@NgModule({
+  imports: [
+    // Upgrade module must be the first
+    UpgradeModule,
+    BrowserAnimationsModule,
+    RouterModule.forRoot(),
+    NgRouterModule.forRoot([
+      ...UPGRADE_ROUTES
+    ], { enableTracing: false, useHash: true }),
+    CoreModule.forRoot(),
+    AssetsNavigatorModule.config({
+      smartGroups: true
+    }),
+    OpcuaProtocolModule,
+    ImpactProtocolModule,
+    TrustedCertificatesModule,
+    DeviceConfigurationModule,
+    DeviceListsModule,
+    NgUpgradeModule,
+    DashboardUpgradeModule,
+    RepositoryModule,
+    BsDropdownModule
+  ],
+  declarations: [
+    AnalyticsComponent, 
+    DockerComponent,
+    AnalyticsEPLComponent,
+    AnalyticsBuilderComponent
+  ],
+  entryComponents: [
+    AnalyticsComponent,  
+    DockerComponent
+  ],
+
+  providers: [
+    DockerGuard, 
+    AnalyticsGuard,
+    { 
+    provide: HOOK_ONCE_ROUTE,          // 1.
+    useValue: [{                       // 2.                  
+      context: ViewContext.Device,     // 3.
+      path: 'analytics',                   // 4.
+      component: AnalyticsComponent,       // 5.
+      label: 'Analytics',                  // 6.
+      priority: 100,
+      icon: 'diamond',      
+      canActivate: [AnalyticsGuard]
+    },{                      
+      context: ViewContext.Device,     // 3.
+      path: 'docker',                   // 4.
+      component: DockerComponent,       // 5.
+      label: 'Docker',                  // 6.
+      priority: 100,
+      icon: 'cubes',
+      canActivate: [DockerGuard]
+    }], 
+    multi: true
+  }]
+
+
+})
+export class AppModule extends HybridAppModule {
+  constructor(protected upgrade: NgUpgradeModule) {
+    super();
+  }
+}

components/analytics/analytics.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/analytics.component.html

@@ -0,0 +1,23 @@
+<div class="row">
+  <h1>
+    <i class="c8y-icon c8y-icon-duocolor c8y-icon-apama-epl"></i>
+    Apama EPL Apps
+  </h1>
+</div>
+
+<div class="row" style="margin-top: 2em">
+  <app-analytics-epl></app-analytics-epl>
+</div>
+
+<div class="row">
+  <h1>
+    <i class="c8y-icon c8y-icon-duocolor c8y-icon-analytics-builder"></i>
+    Apama Analytics Builder
+  </h1>
+</div>
+
+<div class="row" style="margin-top: 2em">
+  <app-analytics-builder></app-analytics-builder>
+</div>
+
+

components/analytics/analytics.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { FetchClient } from "@c8y/client";
+
+@Component({
+    selector: 'app-analytics',
+    templateUrl: "./analytics.component.html",
+    styleUrls: ['./analytics.component.css']
+  })
+
+  export class AnalyticsComponent implements OnInit {
+    epl_data: any;
+    aBuilder_data: any;
+    constructor(public route: ActivatedRoute,
+                private fetchClient: FetchClient) {}        // 1
+
+     ngOnInit() {
+         this.fetchClient.fetch('service/cep/eplfiles').then((response) => { //try...
+            response.json().then( (data) => {
+                this.epl_data = data["eplfiles"];
+           //     console.log(this.epl_data);
+            } );  
+
+         } ,(error) => { //...catch
+            console.log(error);
+         }  );    
+
+         this.fetchClient.fetch('service/cep/analyticsbuilder').then((response) => { //try...
+            response.json().then( (data) => {
+                this.aBuilder_data = data["analyticsbuilder"];
+          //      console.log(this.aBuilder_data);
+            } );  
+
+         } ,(error) => { //...catch
+            console.log(error);
+         }  ); 
+     }
+  }

components/analytics/analyticsbuilder/apamaAB.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/analyticsbuilder/apamaAB.component.html

@@ -0,0 +1,55 @@
+<div class="card-group interact-grid">
+  <div *ngFor="let model of aBuilder_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-analytic-model c8y-icon-duocolor"></i>
+          </div>
+          <div class="text-truncate card-title" title="Analyse">
+            {{ model.name }}
+          </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/analyticsbuilder/apamaAB.component.ts

@@ -0,0 +1,141 @@
+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-analytics-builder',
+    templateUrl: "./apamaAB.component.html",
+    styleUrls: ['./apamaAB.component.css']
+  })
+
+  export class AnalyticsBuilderComponent implements OnInit {
+    aBuilder_models: any;
+    aBuilder_data: any;
+
+    modelUrl: string;
+    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"];
+
+        const indexObj = data["self"].indexOf("/inventory/");
+        this.modelUrl = data["self"].slice(0,indexObj) + "/apps/apamaanalyticsbuilder";   
+
+        this.fetchABModels();
+        this.fetchThinEdgeModel();
+
+     }
+
+     fetchABModels(){
+      this.fetchClient.fetch('service/cep/analyticsbuilder').then((response) => { //try...
+        response.json().then( (data) => {
+            this.aBuilder_data = data["analyticsBuilderModelRepresentations"];
+        } );  
+
+     } ,(error) => { //...catch
+        console.log(error);
+     }  ); 
+     }
+
+     fetchThinEdgeModel(){
+      this.fetchClient.fetch("inventory/managedObjects/" + this.deviceId).then(
+        (response) => {
+          //try...
+          response.json().then((data) => {
+            this.aBuilder_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.aBuilder_models.length; i++) {
+          if (model.name == this.aBuilder_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.aBuilder_data.findIndex((obj => obj.id == model.id));
+
+        if (trigger && !isActive){
+          console.log("switch ON");
+          this.switchModelOn(model);
+          this.aBuilder_data[objIndex].state = "active";
+        }else if(!trigger && isActive){
+          console.log("switch OFF");
+          this.switchModelOff(model);
+          this.aBuilder_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: "AnalyticsBuilder",
+              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: "AnalyticsBuilder",
+              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);
+          } );
+
+     }
+
+  }