2.1.1 release

README.md

@@ -11,7 +11,7 @@ Application Builder is an open-source tool for you to create web applications 
 * **Enhanced dashboard catalog:** Now you can create dashboard based on device group and asset/device type using pre-design dashboard templates.
 * **Dashboard catalog reloaded:** Experience the next level with our latest dashboard templates for Predictive Maintenance, Smart Field Services, and Smart Billing—Now with one-click Microservice installation!
 * **Enhanced Branding:** Various improvement in overall branding.
-* **Cumulocity upgrade:** Application Builder is now based on Cumulocity 1018.0.125
+* **Cumulocity upgrade:** Application Builder is now based on Cumulocity 1018.0.x
 * **Various bug fixes**
 
 ## Features

builder/app-builder-upgrade/app-builder-upgrade.service.ts

@@ -33,7 +33,7 @@ import { AppBuilderConfig, VersionInfo } from "./app-builder-upgrade.model";
 import { AppIdService } from "../app-id.service";
 import { catchError, delay, first } from "rxjs/operators";
 import * as semver from "semver";
-import { IApplication } from "@c8y/client";
+import { FetchClient, IApplication } from "@c8y/client";
 import * as _ from 'lodash';
 import { WidgetCatalogService } from "./../widget-catalog/widget-catalog.service";
 import { WidgetCatalog, WidgetModel } from "./../widget-catalog/widget-catalog.model";
@@ -62,25 +62,44 @@ export class AppBuilderUpgradeService {
  public appVersion: string = appVersion;
  public newVersion: boolean = false;
  public errorReported = false;
+ private readonly CUMULOCITY_COMMUNITY_MS_HEALTH_URL = '/service/c8y-community-utils/health';
 
  constructor(private http: HttpClient, public rendererFactory: RendererFactory2, @Inject(DOCUMENT) private _document: Document,
- private modalService: BsModalService, private progressIndicatorService: ProgressIndicatorService,
+ private modalService: BsModalService, private progressIndicatorService: ProgressIndicatorService, private client: FetchClient,
  private appService: ApplicationService, private externalService: AppBuilderExternalAssetsService,
  private settingService: SettingsService, private userService: UserService, private appStateService: AppStateService,
- appIdService: AppIdService, private alertService: AlertService, private widgetCatalogService: WidgetCatalogService) {
- this.GATEWAY_URL_GitHubAsset = this.externalService.getURL('GITHUB', 'gatewayURL_GitHubAsset');
+ private appIdService: AppIdService, private alertService: AlertService, private widgetCatalogService: WidgetCatalogService) {
+
+ this.GATEWAY_URL_GitHubAsset = 'service/c8y-community-utils/githubAsset?path=';
+ this.GATEWAY_URL_GitHubAPI_FallBack = this.externalService.getURL('GITHUB', 'gatewayURL_Github_Fallback');
  this.GATEWAY_URL_GitHubAPI = this.externalService.getURL('GITHUB', 'gatewayURL_Github');
- this.GATEWAY_URL_Labcase = this.externalService.getURL('DBCATALOG', 'gatewayURL');
+ this.GATEWAY_URL_Labcase = 'service/c8y-community-utils/labcaseAsset?id=';
  this.GATEWAY_URL_GitHubAPI_FallBack = this.externalService.getURL('GITHUB', 'gatewayURL_Github_Fallback');
- this.GATEWAY_URL_GitHubAsset_FallBack = this.externalService.getURL('GITHUB', 'gatewayURL_GitHubAsset_Fallback');
- this.GATEWAY_URL_Labcase_FallBack = this.externalService.getURL('DBCATALOG', 'gatewayURL_Fallback');
+ this.GATEWAY_URL_GitHubAsset_FallBack = 'service/c8y-community-utils/githubAsset?path=';
+ this.GATEWAY_URL_Labcase_FallBack = 'service/c8y-community-utils/labcaseAsset?id=';
+
 
- appIdService.appIdDelayedUntilAfterLogin$.pipe(first()).subscribe(() => {
+ // this.GATEWAY_URL_GitHubAsset = this.externalService.getURL('GITHUB', 'gatewayURL_GitHubAsset');
+ // this.GATEWAY_URL_Labcase = this.externalService.getURL('DBCATALOG', 'gatewayURL');
+ // this.GATEWAY_URL_GitHubAsset_FallBack = this.externalService.getURL('GITHUB', 'gatewayURL_GitHubAsset_Fallback');
+ // this.GATEWAY_URL_Labcase_FallBack = this.externalService.getURL('DBCATALOG', 'gatewayURL_Fallback');
+
+ this.appIdService.appIdDelayedUntilAfterLogin$.pipe(first()).subscribe(() => {
  this.userHasAdminRights = userService.hasRole(appStateService.currentUser.value, "ROLE_APPLICATION_MANAGEMENT_ADMIN")
  this.appStateService.currentApplication.subscribe(app => {
  this.currentApp = app;
  this.verifyPlugins();
  });
+
+ this.getCumulocityCommunityMSHealth().then(response => {
+ if(response && response.status === "UP") {
+ this.appIdService.isCommunityMSExist = true;
+ } else {
+ this.appIdService.isCommunityMSExist = false;
+ }
+ }).catch(err => {
+ this.appIdService.isCommunityMSExist = false;
+ })
  });
  }
 
@@ -235,14 +254,16 @@ export class AppBuilderUpgradeService {
  this.errorReported = true;
  return;
  }
+ if(!this.appIdService.isCommunityMSExist) {
+ this.widgetCatalogService.loadErrorMessageDialog();
+ this.errorReported = true;
+ return;
+ }
  this.progressIndicatorService.setProgress(40);
  let appC8yJson;
  let binaryFile;
  try {
- const data: ArrayBuffer = await this.downloadBinary(binaryLocation, isGithub);
- const blob = new Blob([data], {
- type: 'application/zip'
- });
+ const blob = await this.downloadBinary(binaryLocation, isGithub);
  binaryFile = new File([blob], fileName, { type: "'application/zip'" })
  this.progressIndicatorService.setProgress(50);
  this.progressIndicatorService.setProgress(60);
@@ -335,25 +356,24 @@ export class AppBuilderUpgradeService {
  });
  }
  }
- private downloadBinary(binaryId: string, isGithub: boolean): Promise<ArrayBuffer> {
- let url = `${this.GATEWAY_URL_GitHubAsset}${binaryId}`;
- if (!isGithub) {
- url = `${this.GATEWAY_URL_Labcase}${binaryId}`
+ private async downloadBinary(binaryId: string, isGithub: boolean): Promise<any> {
+ if(this.appIdService.isCommunityMSExist) {
+ let url = `${this.GATEWAY_URL_GitHubAsset}${binaryId}`;
+ if (!isGithub) {
+ url = `${this.GATEWAY_URL_Labcase}${binaryId}`
+ }
+ const response = await this.client.fetch(`${url}`);
+ if(response && response.ok) {
+ return (await response.blob());
+ } else {
+ this.alertService.danger("Unable to download binary! Please try after sometime. If problem persists, please contact the administrator.");
+ }
+
+ } else {
+ this.hideProgressModalDialog();
+ this.widgetCatalogService.loadErrorMessageDialog();
+
  }
- return this.http.get(url, {
- responseType: 'arraybuffer'
- })
- .pipe(catchError(err => {
- console.log('App Builder Upgrade Binary: Error in primary endpoint! using fallback...');
- let url = `${this.GATEWAY_URL_GitHubAsset_FallBack}${binaryId}`;
- if (!isGithub) {
- url = `${this.GATEWAY_URL_Labcase_FallBack}${binaryId}`
- }
- return this.http.get(url, {
- responseType: 'arraybuffer'
- })
- }))
- .toPromise();
  }
 
  fetchAppBuilderConfig(): Observable<AppBuilderConfig> {
@@ -443,22 +463,14 @@ export class AppBuilderUpgradeService {
  this.progressIndicatorService.setProgress(10);
  let binary = null;
  let fileName = '';
+ let blob = null;
  if (pluginBinary.binaryLink && pluginBinary.binaryLink !== '') {
- binary = await new Promise(resolve => this.widgetCatalogService.downloadBinary(pluginBinary.binaryLink)
- .subscribe(binaryData => resolve(binaryData), error => {
- this.logError();
- })) as any;
+ blob = await this.widgetCatalogService.downloadBinary(pluginBinary.binaryLink); 
  fileName = pluginBinary.binaryLink.replace(/^.*[\\\/]/, '');
  } else {
- binary = await new Promise(resolve => this.widgetCatalogService.downloadBinaryFromLabcase(pluginBinary.link)
- .subscribe(binaryData => resolve(binaryData), error => {
- this.logError();
- })) as any;
+ blob = await this.widgetCatalogService.downloadBinaryFromLabcase(pluginBinary.link)
  fileName = pluginBinary.fileName;
  }
- const blob = new Blob([binary], {
- type: 'application/zip'
- });
  const fileOfBlob = new File([blob], fileName);
  await this.widgetCatalogService.installPackage(fileOfBlob);
  appConfigUpdated = true;
@@ -617,4 +629,7 @@ export class AppBuilderUpgradeService {
  const major = '>=' + semver.major(widget.installedVersion) + '.0.0';
  return semver.satisfies(widget.version, major);
  }
+ async getCumulocityCommunityMSHealth() {
+ return (await (await this.client.fetch(`${this.CUMULOCITY_COMMUNITY_MS_HEALTH_URL}`)).json());
+ } 
 }

builder/app-id.service.ts

@@ -30,6 +30,8 @@ export class AppIdService {
  /** same as the appId$ but the value is pended until after the user logs in */
  readonly appIdDelayedUntilAfterLogin$: Observable<string|undefined>;
 
+ isCommunityMSExist = false;
+
  constructor(router: Router, appStateService: AppStateService) {
  router.events.pipe(
  filter(event => event instanceof ActivationEnd),

builder/branding/standard-theme.ts

@@ -97,6 +97,7 @@ export function standardTheme(branding: any) {
  --c8y-component-spinner-color:${_lighter_text_Hex};
  --c8y-component-color-text-muted: ${_text_Hex};
  --c8y-component-background-hover: ${_lighter_primary_Hex_1_1};
+ --c8y-dropdown-background-default: ${_lighter_primary_Hex};
 
  --c8y-level-0: ${_lighter_primary_Hex};
  --c8y-level-1-custom: ${_lighter_primary_Hex_1_1};

builder/template-catalog/template-catalog.component.ts

@@ -22,7 +22,7 @@ import { DeviceSelectorModalComponent } from "../utils/device-selector-modal/dev
 import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";
 import { DependencyDescription, TemplateCatalogEntry, TemplateDetails } from "./template-catalog.model";
 import { TemplateCatalogService } from "./template-catalog.service";
-import { AlertService, DynamicComponentDefinition, DynamicComponentService } from "@c8y/ngx-components";
+import { AlertService, DynamicComponentDefinition, DynamicComponentService, PluginsService } from "@c8y/ngx-components";
 import { Subject, Subscription, interval } from "rxjs";
 import { ProgressIndicatorModalComponent } from "../utils/progress-indicator-modal/progress-indicator-modal.component";
 
@@ -31,6 +31,7 @@ import { catchError } from "rxjs/operators";
 import { AccessRightsService } from "../../builder/access-rights.service";
 import { ProgressIndicatorService } from "../../builder/utils/progress-indicator-modal/progress-indicator.service";
 import { ApplicationBinaryService } from "../../builder/application-binary.service";
+import { AlertMessageModalComponent } from "../../builder/utils/alert-message-modal/alert-message-modal.component";
 
 
 enum TemplateCatalogStep {
@@ -101,7 +102,7 @@ export class TemplateCatalogModalComponent implements OnInit {
  constructor(private modalService: BsModalService, private modalRef: BsModalRef, private appService: ApplicationService,
  private catalogService: TemplateCatalogService, private componentService: DynamicComponentService,
  private alertService: AlertService, private widgetCatalogService: WidgetCatalogService,
- private applicationBinaryService: ApplicationBinaryService,
+ private applicationBinaryService: ApplicationBinaryService, private pluginsService: PluginsService,
  private accessRightsService: AccessRightsService, private progressIndicatorService: ProgressIndicatorService) {
  this.onSave = new Subject();
  this.onCancel = new Subject();
@@ -325,15 +326,13 @@ export class TemplateCatalogModalComponent implements OnInit {
  }
  });
  this.catalogService.downloadBinary(dependency.link)
- .subscribe(async data => {
+ .then(async blob => {
  let createdApp = null;
  this.microserviceDownloadProgress$.unsubscribe();
  try {
  this.progressIndicatorService.setProgress(40);
  this.progressIndicatorService.setMessage(`Installing ${dependency.title}`);
- const blob = new Blob([data], {
- type: 'application/zip'
- });
+
  const fileName = dependency.link.replace(/^.*[\\\/]/, '');
  const fileOfBlob = new File([blob], fileName);
 
@@ -358,10 +357,15 @@ export class TemplateCatalogModalComponent implements OnInit {
  this.alertService.danger("There is some technical error! Please try after sometime.");
  console.error(ex.message);
  }
+ }).catch(err => {
+ this.hideProgressModalDialog();
+ this.loadErrorMessageDialog();
  });
 
  } else { // installing plugin
- const widgetBinaryFound = this.appList.find(app => app.manifest?.isPackage && (app.name.toLowerCase() === dependency.title?.toLowerCase() ||
+
+ const packageList = await this.pluginsService.listPackages(); 
+ const widgetBinaryFound = packageList.find(app => (app.name.toLowerCase() === dependency.title?.toLowerCase() ||
  (app.contextPath && app.contextPath?.toLowerCase() === dependency?.contextPath?.toLowerCase())));
  this.showProgressModalDialog(`Installing ${dependency.title}`);
  this.progressIndicatorService.setProgress(10);
@@ -380,11 +384,8 @@ export class TemplateCatalogModalComponent implements OnInit {
  } else {
  this.progressIndicatorService.setProgress(10);
  this.catalogService.downloadBinary(dependency.link)
- .subscribe(data => {
+ .then(blob => {
  this.progressIndicatorService.setProgress(20);
- const blob = new Blob([data], {
- type: 'application/zip'
- });
  const fileName = dependency.link.replace(/^.*[\\\/]/, '');
  const fileOfBlob = new File([blob], fileName);
  this.widgetCatalogService.installPackage(fileOfBlob).then(async () => {
@@ -396,6 +397,9 @@ export class TemplateCatalogModalComponent implements OnInit {
  this.alertService.danger("There is some technical error! Please try after sometime.");
  console.error(error);
  });
+ }).catch(err => {
+ this.hideProgressModalDialog();
+ this.loadErrorMessageDialog();
  });
  }
  }
@@ -460,4 +464,19 @@ export class TemplateCatalogModalComponent implements OnInit {
  }
 
  }
+ private loadErrorMessageDialog() {
+ const alertMessage = {
+ title: 'Microservice needed!',
+ description: `'Cumulocity Community Utils' microservice is not installed or subscribed. Please download the microservice, then install and subscribe to it by navigating to Administration -> Ecosystems -> Microservices. `,
+ type: 'danger',
+ externalLink: "https://labcase.softwareag.com/storage/d/a02221e54739758ccb1ab839ce09e2cc",
+ externalLinkLabel: "Download the microservice now.",
+ alertType: 'info' //info|confirm
+ }
+ this.alertModalDialog(alertMessage);
+ }
+
+ alertModalDialog(message: any): BsModalRef {
+ return this.modalService.show(AlertMessageModalComponent, { class: 'c8y-wizard', initialState: { message } });
+ }
 }