added tab to show loaded blocks

app.module.ts

@@ -3,7 +3,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule as ngRouterModule } from '@angular/router';
 import { BootstrapComponent, CoreModule, RouterModule } from '@c8y/ngx-components';
 import { BsModalRef } from 'ngx-bootstrap/modal';
-import { AnalyticsExtensionModule } from './src/service-anabuild.module';
+import { AnalyticsExtensionModule } from './src/analytics-extension.module';
 
 
 @NgModule({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytics-extension",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "Extends the standard Cumulocity administration web application with a dialog to add Analytics Builder extensions.",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
     "application": {
       "name": "Analytics Extension",
       "contextPath": "sag-ps-pkg-analytics-extension",
-      "key": "sag-ps-pkg-analytics-extension-pluginn-key",
+      "key": "sag-ps-pkg-analytics-extension-plugin-key",
       "globalTitle": "Analytics Builder Extension Plugin",
       "tabsHorizontal": true,
       "isPackage": true,
@@ -67,7 +67,7 @@
         {
           "name": "Analytics Builder Extension",
           "module": "AnalyticsExtensionModule",
-          "path": "./src/service-anabuild.module",
+          "path": "./src/analytics-extension.module",
           "description": "Adds Extensions for the Analytics Builder"
         }
       ],

src/service-anabuild.module.ts → src/analytics-extension.module.ts

@@ -1,47 +1,61 @@
-import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { RouterModule as ngRouterModule } from '@angular/router';
+import { Route, RouterModule as ngRouterModule } from '@angular/router';
 import {
   CoreModule,
-  RouterModule,
   hookNavigator,
   hookRoute,
+  hookTab,
   hookWizard,
+  RouterModule
 } from "@c8y/ngx-components";
 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 { AnalyticsAddExtensionComponent } from "./analytics/analytics-add-extension.component";
-import { AnalyticsExtensionCardComponent } from "./analytics/analytics-extension-card.component";
-import { AnalyticsComponent } from "./analytics/analytics.component";
+import { AnalyticsExtensionCardComponent } from "./analytics/manage/extension-card.component";
+import { AnalyticsExtensionComponent } from "./analytics/manage/extension.component";
 import { AnalyticsService } from "./shared/analytics.service";
-import { AnalyticsNavigationFactory } from "./factories/analytics-navigation.factory";
+import { AnalyticsNavigationFactory } from "./shared/analytics-navigation.factory";
+import { AnalyticsTabFactory } from "./shared/tab.factory";
+import { BlockGridComponent } from "./analytics/list/block.component";
+import { AnalyticsAddExtensionComponent } from "./analytics/manage/extension-add.component";
 
+const routes: Route[] = [
+  {
+    path: "sag-ps-pkg-analytics-extension/manage",
+    component: AnalyticsExtensionComponent,
+  },
+  {
+    path: "sag-ps-pkg-analytics-extension/list",
+    component: BlockGridComponent,
+  },
+];
 @NgModule({
   imports: [
     CoreModule,
-    CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    RouterModule.forRoot(),
-    ngRouterModule.forRoot([], { enableTracing: false, useHash: true }),
     BinaryFileDownloadModule,
     BsDropdownModule.forRoot(),
+    //ngRouterModule.forRoot([], { enableTracing: false, useHash: true }),
+    RouterModule.forRoot(),
+    //RouterModule.forChild(routes),
     DefaultSubscriptionsModule,
   ],
   declarations: [
-    AnalyticsComponent,
+    AnalyticsExtensionComponent,
     AnalyticsExtensionCardComponent,
     AnalyticsAddExtensionComponent,
     AnalyticsExtensionWizardComponent,
+    BlockGridComponent,
   ],
   entryComponents: [
-    AnalyticsComponent,
+    AnalyticsExtensionComponent,
     AnalyticsExtensionCardComponent,
     AnalyticsAddExtensionComponent,
     AnalyticsExtensionWizardComponent,
+    BlockGridComponent,
   ],
   providers: [
     AnalyticsService,
@@ -53,9 +67,15 @@ import { AnalyticsNavigationFactory } from "./factories/analytics-navigation.fac
       c8yIcon: "upload",
     }),
     hookRoute({
-      path: "sag-ps-pkg-analytics-extensions",
-      component: AnalyticsComponent,
+      path: "sag-ps-pkg-analytics-extension/manage",
+      component: AnalyticsExtensionComponent,
+    }),
+    hookRoute({
+      //path: "list",
+      path: "sag-ps-pkg-analytics-extension/list",
+      component: BlockGridComponent,
     }),
+    hookTab(AnalyticsTabFactory),
   ],
 })
 export class AnalyticsExtensionModule {

src/analytics/list/block.component.html

@@ -0,0 +1,55 @@
+<!--
+  ~ Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
+  ~ and/or its subsidiaries and/or its affiliates and/or their licensors.
+  ~
+  ~ SPDX-License-Identifier: Apache-2.0
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  ~ @authors Christof Strack
+  -->
+
+<c8y-title translate>AnalyticsBuilder Blocks</c8y-title>
+<c8y-action-bar-item [placement]="'right'">
+  <button
+    class="btn btn-link"
+    title="{{ 'Refresh' | translate }}"
+    (click)="loadBlocks()"
+  >
+    <i c8yIcon="refresh"></i>
+    {{ "Refresh" | translate }}
+  </button>
+
+</c8y-action-bar-item>
+<div class="card">
+  <div class="card-block">
+    <c8y-data-grid
+      [title]="titleBlock | translate"
+      [selectable]="'true'"
+      [columns]="columnsBlocks"
+      [rows]="blocks"
+      [pagination]="pagination"
+      [actionControls]="actionControls"
+
+    >
+    </c8y-data-grid>
+  </div>
+  <div class="card-block col-md-offset-5 bg-white">
+    <div class="c8y-empty-state" *ngIf="blocks.length === 0">
+      <h1 [c8yIcon]="'file-text'"></h1>
+      <p>
+        <strong>No blocks loaded.</strong><br />
+      </p>
+    </div>
+  </div>
+</div>

src/analytics/list/block.component.ts

@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
+ * and/or its subsidiaries and/or its affiliates and/or their licensors.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @authors Christof Strack
+ */
+import {
+  Component,
+  OnInit,
+  ViewEncapsulation,
+} from "@angular/core";
+import {
+  ActionControl,
+  AlertService,
+  Column,
+  ColumnDataType,
+  Pagination,
+} from "@c8y/ngx-components";
+import { BsModalService } from "ngx-bootstrap/modal";
+import { AnalyticsService } from "../../shared/analytics.service";
+import { Block } from "../../shared/analytics.model";
+
+@Component({
+  selector: "c8y-block-grid",
+  templateUrl: "block.component.html",
+  encapsulation: ViewEncapsulation.None,
+})
+export class BlockGridComponent implements OnInit {
+
+  showConfigBlock: boolean = false;
+
+  blocks: Block[] = [];
+  actionControls: ActionControl[] = [];
+
+  titleBlock: string = "AnalyticsBuilder Blocks";
+
+  columnsBlocks: Column[] = [
+    {
+      name: "name",
+      header: "Name",
+      path: "name",
+      filterable: false,
+      dataType: ColumnDataType.TextShort,
+      visible: true,
+    },
+    {
+      header: "Category",
+      name: "category",
+      path: "category",
+      filterable: true,
+    },
+    {
+      header: "Custom Block",
+      name: "custom",
+      path: "custom",
+      filterable: true,
+      sortable: false,
+    },
+  ];
+
+  pagination: Pagination = {
+    pageSize: 3,
+    currentPage: 1,
+  };
+
+  constructor(
+    public analyticsService: AnalyticsService,
+    public alertService: AlertService,
+    private bsModalService: BsModalService
+  ) {}
+
+  async ngOnInit() {
+    await this.loadBlocks();
+  }
+
+  async  loadBlocks() {
+    this.blocks = await this.analyticsService.getBlocks();
+  }
+
+  ngOnDestroy() {
+  }
+}

src/analytics/analytics-add-extension.component.ts → src/analytics/manage/extension-add.component.ts

@@ -2,12 +2,12 @@ import { Component, Input, ViewChild } from '@angular/core';
 import { ApplicationService, IApplication, IManagedObject } from '@c8y/client';
 import { AlertService, DropAreaComponent, WizardComponent } from '@c8y/ngx-components';
 import { BehaviorSubject } from 'rxjs';
-import { ERROR_MESSAGES } from '../shared/analytics.constants';
-import { AnalyticsService } from '../shared/analytics.service';
+import { ERROR_MESSAGES } from '../../shared/analytics.constants';
+import { AnalyticsService } from '../../shared/analytics.service';
 
 @Component({
-  selector: 'analytics-add-extension',
-  templateUrl: './analytics-add-extension.component.html'
+  selector: 'extension-add',
+  templateUrl: './extension-add.component.html'
 })
 export class AnalyticsAddExtensionComponent {
   @Input() headerText: string;

src/analytics/analytics-extension-card.component.ts → src/analytics/manage/extension-card.component.ts

@@ -2,11 +2,11 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { IManagedObject } from '@c8y/client';
 import { AlertService } from '@c8y/ngx-components';
-import { AnalyticsService } from '../shared//analytics.service';
+import { AnalyticsService } from '../../shared/analytics.service';
 
 @Component({
-  selector: 'analytics-extension-card',
-  templateUrl: './analytics-extension-card.component.html'
+  selector: 'extension-card',
+  templateUrl: './extension-card.component.html'
 })
 export class AnalyticsExtensionCardComponent implements OnInit {
   @Input() app: IManagedObject;

src/analytics/analytics.component.html → src/analytics/manage/extension.component.html

@@ -75,10 +75,10 @@ <h3 translate>No extension to display.</h3>
     </div>
   </div>
   <div *ngFor="let app of extensions$ | async" class="col-xs-12 col-sm-4 col-md-3">
-    <analytics-extension-card
+    <extension-card
       (onAppDeleted)="loadExtensions()"
       [app]="app"
       class="d-contents"
-    ></analytics-extension-card>
+    ></extension-card>
   </div>
 </div>

src/analytics/analytics.component.ts → src/analytics/manage/extension.component.ts

@@ -3,16 +3,16 @@ import { IManagedObject } from '@c8y/client';
 import { WizardConfig, WizardModalService } from '@c8y/ngx-components';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { shareReplay, switchMap, tap } from 'rxjs/operators';
-import { AnalyticsService } from '../shared/analytics.service';
+import { AnalyticsService } from '../../shared/analytics.service';
 import { ModalOptions } from 'ngx-bootstrap/modal';
 
 
 @Component({
-  selector: 'analytics',
-  templateUrl: './analytics.component.html',
-  styleUrls: ['./analytics.component.css']
+  selector: 'extension',
+  templateUrl: './extension.component.html',
+  styleUrls: ['./extension.component.css']
 })
-export class AnalyticsComponent implements OnInit {
+export class AnalyticsExtensionComponent implements OnInit {
   reloading: boolean = false;
   reload$: BehaviorSubject<void> = new BehaviorSubject(null);