added dialog to name extension

analytics-ui/src/analytics-extension.module.ts

@@ -12,7 +12,7 @@ import {
 import { BinaryFileDownloadModule } from "@c8y/ngx-components/binary-file-download";
 import { DefaultSubscriptionsModule } from "@c8y/ngx-components/default-subscriptions";
 import { BsDropdownModule } from "ngx-bootstrap/dropdown";
-import { AnalyticsExtensionWizardComponent } from "./wizard/analytics-extension-wizard.component";
+import { AddExtensionWizardComponent } from "./wizard/add-extension-wizard.component";
 import { AnalyticsExtensionCardComponent } from "./analytics/manage/extension-card.component";
 import { AnalyticsExtensionComponent } from "./analytics/manage/extension.component";
 import { AnalyticsService } from "./shared/analytics.service";
@@ -22,6 +22,7 @@ import { BlockGridComponent } from "./analytics/list/block.component";
 import { AnalyticsAddExtensionComponent } from "./analytics/manage/extension-add.component";
 import { SampleGridComponent } from "./sample/list/sample.component";
 import { HttpClientModule } from "@angular/common/http";
+import { NameExtensionComponent } from "./wizard/name-extension-modal.component";
 
 const routes: Route[] = [
   {
@@ -54,15 +55,16 @@ const routes: Route[] = [
     AnalyticsExtensionComponent,
     AnalyticsExtensionCardComponent,
     AnalyticsAddExtensionComponent,
-    AnalyticsExtensionWizardComponent,
+    AddExtensionWizardComponent,
+    NameExtensionComponent,
     BlockGridComponent,
     SampleGridComponent,
   ],
   entryComponents: [
     AnalyticsExtensionComponent,
     AnalyticsExtensionCardComponent,
     AnalyticsAddExtensionComponent,
-    AnalyticsExtensionWizardComponent,
+    AnalyticsExtensionCardComponent,
     BlockGridComponent,
     SampleGridComponent,
   ],
@@ -71,7 +73,7 @@ const routes: Route[] = [
     hookNavigator(AnalyticsNavigationFactory),
     hookWizard({
       wizardId: "uploadAnalyticsExtention",
-      component: AnalyticsExtensionWizardComponent,
+      component: AnalyticsExtensionCardComponent,
       name: "Upload analytics extension",
       c8yIcon: "upload",
     }),

analytics-ui/src/sample/list/sample.component.html

@@ -41,6 +41,7 @@
       [pagination]="pagination"
       [selectable]="'true'"
       [actionControls]="actionControls"
+      [bulkActionControls]="bulkActionControls"
     >
     </c8y-data-grid>
   </div>

analytics-ui/src/sample/list/sample.component.ts

@@ -27,12 +27,16 @@ import {
 import {
   ActionControl,
   AlertService,
+  BulkActionControl,
   Column,
   ColumnDataType,
   Pagination,
+  gettext,
 } from "@c8y/ngx-components";
 import { AnalyticsService } from "../../shared/analytics.service";
 import { CEP_Block } from "../../shared/analytics.model";
+import { BsModalService } from "ngx-bootstrap/modal";
+import { NameExtensionComponent } from "../../wizard/name-extension-modal.component";
 
 @Component({
   selector: "c8y-sample-grid",
@@ -44,8 +48,9 @@ export class SampleGridComponent implements OnInit {
   showConfigSample: boolean = false;
   refresh: EventEmitter<any> = new EventEmitter<any>();
 
-  samples: Partial<CEP_Block>[] = [];
+  samples: any[] = [];
   actionControls: ActionControl[] = [];
+  bulkActionControls: BulkActionControl[] = [];
 
   titleSample: string = "AnalyticsBuilder Community Samples";
 
@@ -54,7 +59,13 @@ export class SampleGridComponent implements OnInit {
       name: "name",
       header: "Name",
       path: "name",
-      filterable: false,
+      dataType: ColumnDataType.TextLong,
+      visible: true,
+    },
+    {
+      name: "url",
+      header: "URL",
+      path: "url",
       dataType: ColumnDataType.TextLong,
       visible: true,
     },
@@ -67,14 +78,46 @@ export class SampleGridComponent implements OnInit {
 
   constructor(
     public analyticsService: AnalyticsService,
-    public alertService: AlertService
+    public alertService: AlertService,
+    private bsModalService: BsModalService,
   ) {}
 
   async ngOnInit() {
     await this.loadSamples();
     this.refresh.subscribe(() => {
       this.loadSamples();
     });
+
+    this.bulkActionControls.push(
+      {
+        type: "CREATE",
+        text: "Create Extension",
+        icon: "export",
+        callback: this.createExtension.bind(this),
+      },
+    );
+  }
+
+  public async createExtension(ids: string[]) {
+
+    const initialState = {};
+    const modalRef = this.bsModalService.show(NameExtensionComponent, {
+      initialState,
+    });
+    modalRef.content.closeSubject.subscribe(async (conf) => {
+      console.log("Configuration after edit:", conf);
+      if (conf) {
+        const response =
+          await this.analyticsService.createExtensionsZIP(conf.name, ids);
+        if (response) {
+          this.alertService.success(gettext(`Created extension ${conf.name}.zip successfully‚`));
+        } else {
+          this.alertService.danger(
+            gettext("Failed to create extension")
+          );
+        }
+      }
+    });
   }
 
   async loadSamples() {

analytics-ui/src/shared/analytics.service.ts

@@ -78,6 +78,13 @@ export class AnalyticsService {
     }
     return result;
   }
+
+
+  async createExtensionsZIP(name: string, monitors: string[]): Promise<any> {
+    const result = {};
+    return result;
+  }
+
   async getWebExtensions(customFilter: any = {}): Promise<IManagedObject[]> {
     return (await this.getExtensions(customFilter)).data;
   }
@@ -138,6 +145,7 @@ export class AnalyticsService {
       .pipe(
         map((data) => {
           const name = _.values(data);
+          name.forEach( b => b.id = b.sha)
           return name ;
         }),
       ).toPromise();

analytics-ui/src/wizard/analytics-extension-wizard.component.ts → analytics-ui/src/wizard/add-extension-wizard.component.ts

@@ -13,7 +13,7 @@ import { AnalyticsService } from '../shared/analytics.service';
       [canGoBack]="true"
     ></extension-add>`
   })
-  export class AnalyticsExtensionWizardComponent {
+  export class AddExtensionWizardComponent {
     headerText: string = gettext('Upload analytics extension');
     successText: string = gettext('Extension created');
 

analytics-ui/src/wizard/name-extension-modal.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, OnInit, Output } from "@angular/core";
+import { ModalLabels } from "@c8y/ngx-components";
+import { Subject } from "rxjs";
+import { FormlyFieldConfig } from "@ngx-formly/core";
+import { FormGroup } from "@angular/forms";
+
+@Component({
+  selector: "name-extension-modal",
+  template: `<c8y-modal
+    title="Edit properties extension"
+    (onClose)="onSave($event)"
+    (onDismiss)="onDismiss($event)"
+    [labels]="labels"
+    [headerClasses]="'modal-header dialog-header'"
+  >
+    <div class="card-block">
+      <div [formGroup]="configFormly">
+        <formly-form
+          [form]="configFormly"
+          [fields]="configFormlyFields"
+          [model]="configuration"
+        ></formly-form>
+      </div>
+    </div>
+  </c8y-modal>`,
+})
+export class NameExtensionComponent implements OnInit {
+  @Output() closeSubject: Subject<any> = new Subject();
+  configuration: any = {};
+
+  configFormlyFields: FormlyFieldConfig[] = [];
+  configFormly: FormGroup = new FormGroup({});
+  labels: ModalLabels = { ok: "Save", cancel: "Dismiss" };
+
+  ngOnInit(): void {
+    this.configFormlyFields = [
+      {
+        className: "col-lg-12",
+        key: "name",
+        type: "input",
+        wrappers: ["c8y-form-field"],
+        templateOptions: {
+          label: "Name Extension",
+          required: true,
+        },
+      },
+    ];
+  }
+
+  onDismiss(event) {
+    console.log("Dismiss");
+    this.closeSubject.next(undefined);
+  }
+
+  onSave(event) {
+    console.log("Save");
+    this.closeSubject.next(this.configuration);
+  }
+
+}