Merge pull request #62 from ck-c8y/feat-migration-1020

feat: migrate ui to c8y version 1020

Author: reubenmiller

.gitignore

@@ -20,3 +20,7 @@ tests/data/apps/app4.tar.gz
 
 # MacOS
 .DS_Store
+.angular
+
+# test files
+attic

package-lock.json

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

ui/.browserslistrc

@@ -0,0 +1,111 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "tedge-container-plugin-ui": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "less"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@c8y/devkit:build",
+          "options": {
+            "outputPath": "dist/tedge-container-plugin-ui",
+            "main": "./main.ts",
+            "polyfills": ["zone.js"],
+            "tsConfig": "tsconfig.json",
+            "inlineStyleLanguage": "less",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.less"],
+            "scripts": [],
+            "aot": false,
+            "allowedCommonJsDependencies": [
+              "regenerator-runtime/runtime",
+              "@cordobo/qrcode",
+              "zone.js",
+              "chroma-js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all",
+              "buildOptimizer": false
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@c8y/devkit:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "tedge-container-plugin-ui:build:production"
+            },
+            "development": {
+              "buildTarget": "tedge-container-plugin-ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@c8y/devkit:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": ["zone.js", "zone.js/testing"],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "less",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.less"],
+            "scripts": []
+          }
+        },
+        "deploy": {
+          "builder": "@c8y/devkit:deploy",
+          "configurations": {
+            "production": {
+              "buildTarget": "tedge-container-plugin-ui:build:production"
+            },
+            "development": {
+              "buildTarget": "tedge-container-plugin-ui:build:development"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "compile-i18n": {
+          "builder": "@c8y/devkit:compile-i18n"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "7d223acb-751a-477e-88d3-2b250d6465dd"
+  }
+}

ui/angular.json

@@ -1,14 +1,17 @@
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BootstrapComponent, CoreModule, RouterModule } from '@c8y/ngx-components';
-import { CockpitDashboardModule } from '@c8y/ngx-components/context-dashboard';
+import {
+  BootstrapComponent,
+  CoreModule,
+  RouterModule,
+} from '@c8y/ngx-components';
 
 @NgModule({
   imports: [
     BrowserAnimationsModule,
     RouterModule.forRoot([]),
     CoreModule.forRoot(),
   ],
-  bootstrap: [BootstrapComponent]
+  bootstrap: [BootstrapComponent],
 })
 export class AppModule {}

ui/app.module.ts

@@ -0,0 +1,18 @@
+import './polyfills';
+
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+import './locales/de.po';
+
+declare const __MODE__: string;
+if (__MODE__ === 'production') {
+  enableProdMode();
+}
+
+export function bootstrap() {
+  return platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch(err => console.error(err));
+}

ui/bootstrap.ts

@@ -0,0 +1,78 @@
+import { EnvironmentOptions } from '@c8y/devkit/dist/options';
+import { author, description, version, license } from './package.json';
+
+const asset = process.env['npm_config_asset'];
+const isApp = asset == 'app' ? true : false;
+
+console.log('Building asset:', asset, asset == 'app', isApp);
+
+export default {
+  runTime: {
+    author,
+    description,
+    license,
+    version,
+    name: 'tedge-container-mgmt',
+    contextPath: 'sag-ps-pkg-tedge-container-mgmt',
+    key: 'sag-ps-pkg-tedge-container-mgmt-key',
+    contentSecurityPolicy:
+      "base-uri 'none'; default-src 'self' 'unsafe-inline' http: https: ws: wss:; connect-src 'self' http: https: ws: wss:;  script-src 'self' *.bugherd.com *.twitter.com *.twimg.com *.aptrinsic.com 'unsafe-inline' 'unsafe-eval' data:; style-src * 'unsafe-inline' blob:; img-src * data: blob:; font-src * data:; frame-src *; worker-src 'self' blob:;",
+    dynamicOptionsUrl: '/apps/public/public-options/options.json',
+    remotes: {
+      'container-plugin': ['ContainerManagementModule'],
+      'Group-plugin': ['GroupManagementModule'],
+      'Container-Info-plugin': ['ContainerInfoModule'],
+    },
+    tabsHorizontal: true,
+    noAppSwitcher: false,
+    // comment the following properties to create a standalone app
+    // comment begin
+    // package: 'plugin',
+    // isPackage: !isApp,
+    package: 'blueprint',
+    isPackage: true,
+    exports: [
+      {
+        name: 'Container Info Tab',
+        module: 'ContainerInfoModule',
+        path: './src/container-info/container-info.module.ts',
+        description:
+          'Adds a tab to a container service to display all relevant container information.',
+      },
+      {
+        name: 'Container Management Tab',
+        module: 'ContainerManagementModule',
+        path: './src/container-management/container-management.module.ts',
+        description:
+          'Adds a tab to a device to monitor the installed containers',
+      },
+      {
+        name: 'Container Group Management Tab',
+        module: 'GroupManagementModule',
+        path: './src/group-management/group-management.module.ts',
+        description:
+          'Adds a tab to the device to monitor container groups (aka. docker compose).',
+      },
+    ],
+    // comment end
+  },
+  buildTime: {
+    federation: [
+      '@angular/animations',
+      '@angular/cdk',
+      '@angular/common',
+      '@angular/compiler',
+      '@angular/core',
+      '@angular/forms',
+      '@angular/platform-browser',
+      '@angular/platform-browser-dynamic',
+      '@angular/router',
+      '@angular/upgrade',
+      '@c8y/client',
+      '@c8y/ngx-components',
+      'ngx-bootstrap',
+      '@ngx-translate/core',
+      '@ngx-formly/core',
+    ],
+  },
+} as const satisfies EnvironmentOptions;

ui/cumulocity.config.ts

@@ -0,0 +1,22 @@
+import './i18n';
+import { applyOptions, loadOptions } from '@c8y/bootstrap';
+
+const barHolder: HTMLElement = document.querySelector('body > .init-load');
+export const removeProgress = () =>
+  barHolder && barHolder.parentNode.removeChild(barHolder);
+
+applicationSetup();
+
+async function applicationSetup() {
+  const options = await applyOptions({
+    ...(await loadOptions()),
+  });
+
+  const mod = await import(
+    './bootstrap'
+  );
+  const bootstrapApp =
+    mod.bootstrap || (window as any).bootstrap || (() => null);
+
+  return Promise.resolve(bootstrapApp(options)).then(removeProgress);
+}