From 583e44e403f0e5b4173d2c63500b20bc9ac40b7a Mon Sep 17 00:00:00 2001 From: anana Date: Wed, 22 Nov 2023 17:25:09 +0200 Subject: [PATCH] Adding the histogram & table to the hello world --- .../advanced_hello_world_ui/package-lock.json | 361 ++++++++ .../src/advanced_hello_world_ui/package.json | 11 + .../src/advanced_hello_world_ui/sms-ui-suite | 1 + .../app/hello-world/constants/constants.ts | 4 + .../general-route-module.component.html | 34 +- .../general-route-module.component.ts | 772 +++++++++++++++++- .../general-route-module.module.ts | 29 +- .../generic-histogram.component.html | 32 + .../generic-histogram.component.scss | 27 + .../generic-histogram.component.ts | 139 ++++ .../interfaces/histogram-data.interface.ts | 12 + .../interfaces/table-info.interface.ts | 24 + .../inventory-general-table.component.html | 12 + .../inventory-general-table.component.scss | 0 .../inventory-general-table.component.ts | 177 ++++ .../app/hello-world/services/utils.service.ts | 84 ++ .../src/advanced_hello_world_ui/tsconfig.json | 6 +- 17 files changed, 1714 insertions(+), 11 deletions(-) create mode 160000 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/sms-ui-suite create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/constants/constants.ts create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.html create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.scss create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.ts create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/interfaces/histogram-data.interface.ts create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/interfaces/table-info.interface.ts create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.html create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.scss create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.ts create mode 100644 plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/services/utils.service.ts diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/package-lock.json b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/package-lock.json index 8b3968267..74b5b46dc 100644 --- a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/package-lock.json +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/package-lock.json @@ -8,6 +8,9 @@ "name": "hello-world-ui", "version": "0.0.0", "dependencies": { + "@ag-grid-community/all-modules": "^26.2.0", + "@ag-grid-community/angular": "^26.2.0", + "@ag-grid-community/core": "^26.2.1", "@angular-architects/module-federation": "^14.3.12", "@angular/animations": "~13.3.0", "@angular/common": "~13.3.0", @@ -17,7 +20,15 @@ "@angular/platform-browser": "~13.3.0", "@angular/platform-browser-dynamic": "~13.3.0", "@angular/router": "~13.3.0", + "@fortawesome/fontawesome-free": "^5.14.0", + "@ng-select/ng-select": "^8.3.0", + "ag-charts-angular": "^7.3.0", + "ag-charts-community": "^7.3.0", + "ag-grid-angular": "^26.2.0", + "ag-grid-community": "^26.2.0", + "angular2-csv": "0.2.5", "ngx-bootstrap": "^5.6.2", + "ngx-clipboard": "^12.3.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" @@ -38,6 +49,65 @@ "typescript": "~4.6.2" } }, + "node_modules/@ag-grid-community/all-modules": { + "version": "26.2.1", + "resolved": "https://registry.npmjs.org/@ag-grid-community/all-modules/-/all-modules-26.2.1.tgz", + "integrity": "sha512-zO8PFBSiChQEmJLmWe/gaKhDOPvOR+4yWlTmfIBTWZ/j/zhJSeCNHor6WQGakgfONrNOq0P6yQjVu0d7JFi7mA==", + "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", + "dependencies": { + "@ag-grid-community/client-side-row-model": "~26.2.0", + "@ag-grid-community/core": "~26.2.0", + "@ag-grid-community/csv-export": "~26.2.0", + "@ag-grid-community/infinite-row-model": "~26.2.0" + } + }, + "node_modules/@ag-grid-community/angular": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/@ag-grid-community/angular/-/angular-26.2.0.tgz", + "integrity": "sha512-/Vx/dhZB7GBjp6tDQ80d9ppjsrvF274y7y5tfDhTynJRtqELtRnHGPl+ZsSz03AP8kYp5EsHl1nwQo4/96cmYg==", + "dependencies": { + "tslib": "^1.10.0" + }, + "peerDependencies": { + "@ag-grid-community/core": "~26.2.0", + "@angular/common": ">= 8.0.0", + "@angular/core": ">= 8.0.0" + } + }, + "node_modules/@ag-grid-community/angular/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, + "node_modules/@ag-grid-community/client-side-row-model": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/@ag-grid-community/client-side-row-model/-/client-side-row-model-26.2.0.tgz", + "integrity": "sha512-kW5lMsK5WEXaqZMfHbLRj+EvxLhPW6qtDv61PyDcv+/91lwm2p5dT/iUBppavSwJDiNul+wntpyIlTulZgokwA==", + "dependencies": { + "@ag-grid-community/core": "~26.2.0" + } + }, + "node_modules/@ag-grid-community/core": { + "version": "26.2.1", + "resolved": "https://registry.npmjs.org/@ag-grid-community/core/-/core-26.2.1.tgz", + "integrity": "sha512-E2e3rZoZ90QtgO320kmlrm7kFbzFkCyrvCWYUQshJJU/UzCqr6DffVAXTaeehPNLzHBybANxWbSbFab9LQLIwQ==" + }, + "node_modules/@ag-grid-community/csv-export": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/@ag-grid-community/csv-export/-/csv-export-26.2.0.tgz", + "integrity": "sha512-2QqzmYIqqXpPwvIiIpWXV9VWKVK5mLdZI3RVnZdgWGCyTD0OAqWPgqY5LapVpyxGfE/oUm7s9O7ux7EFiTdEcA==", + "dependencies": { + "@ag-grid-community/core": "~26.2.0" + } + }, + "node_modules/@ag-grid-community/infinite-row-model": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/@ag-grid-community/infinite-row-model/-/infinite-row-model-26.2.0.tgz", + "integrity": "sha512-wA4qSYD/XdvrjVQ6gdENaX++QlQufndWJonl7oVCPzxw7fO3H1i8DFpfr2fe/BXwrcDM1LeJ5HM6jzIuKIrddg==", + "dependencies": { + "@ag-grid-community/core": "~26.2.0" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -700,6 +770,27 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/http": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.7.tgz", + "integrity": "sha512-9XrvXFVuHsAfVlIbM6Em2EouKiRyV2y4nPA+dAUd/9uB9i/i+FzZlmmeSIvP7ePnm6QyAC6nlvy9FMQYwvrtNA==", + "deprecated": "Package no longer supported. Use @angular/common instead, see https://angular.io/guide/deprecations#angularhttp", + "peer": true, + "dependencies": { + "tslib": "^1.7.1" + }, + "peerDependencies": { + "@angular/core": "4.4.7", + "@angular/platform-browser": "4.4.7", + "rxjs": "^5.0.1" + } + }, + "node_modules/@angular/http/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "peer": true + }, "node_modules/@angular/platform-browser": { "version": "13.3.12", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.12.tgz", @@ -2622,6 +2713,15 @@ "node": ">=10.0.0" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -2724,6 +2824,23 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "node_modules/@ng-select/ng-select": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-8.3.0.tgz", + "integrity": "sha512-AwAuDs+86++D2kEsik2/ZiQuRk0khd1HESofOm1yMBwbzsw+xLSyVOMml/OehDFSOxli7fAkk07wYtzAhxSB3Q==", + "dependencies": { + "tslib": "^2.3.1" + }, + "engines": { + "node": ">= 12.20.0", + "npm": ">= 6.0.0" + }, + "peerDependencies": { + "@angular/common": ">=13.0.0 <14.0.0", + "@angular/core": ">=13.0.0 <14.0.0", + "@angular/forms": ">=13.0.0 <14.0.0" + } + }, "node_modules/@ngtools/webpack": { "version": "13.3.10", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.3.10.tgz", @@ -3355,6 +3472,47 @@ "node": ">=8.9.0" } }, + "node_modules/ag-charts-angular": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/ag-charts-angular/-/ag-charts-angular-7.3.0.tgz", + "integrity": "sha512-5xhMqUvTWUPOymBte6w1mn8D+JuAPB2gu5UD390xQSJ2SeTD5c0IrmHBrymsAg1vMNHDkqDm7vVcp+XnCKpxMQ==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": ">=12.0.0", + "@angular/core": ">=12.0.0", + "ag-charts-community": "~7.3.0" + } + }, + "node_modules/ag-charts-community": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-7.3.0.tgz", + "integrity": "sha512-118U6YsCMia6iZHaN06zT19rr2SYa92WB73pMVCKQlp2H3c19uKQ6Y6DfKG/nIfNUzFXZLHBwKIdZXsMWJdZww==" + }, + "node_modules/ag-grid-angular": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-26.2.0.tgz", + "integrity": "sha512-IJYNniJkQXQhEMdsZ50MFMY80K3PQGsh4Jh1Nu7G1Det5Pq2QNPgZ/FwNucsxYDPn32VICVVlUEQTwtEl63FZQ==", + "dependencies": { + "tslib": "^1.10.0" + }, + "peerDependencies": { + "@angular/common": ">= 8.0.0", + "@angular/core": ">= 8.0.0", + "ag-grid-community": "~26.2.0" + } + }, + "node_modules/ag-grid-angular/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, + "node_modules/ag-grid-community": { + "version": "26.2.1", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-26.2.1.tgz", + "integrity": "sha512-aChSGNdPkBda4BhOUUEAmAkRlIG7rFU8UTXx3NPStavrCOHKLDRV90djIKuiXfM6ONBqKmeqw2as0yuLnSN8dw==" + }, "node_modules/agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", @@ -3448,6 +3606,16 @@ "ajv": "^8.8.2" } }, + "node_modules/angular2-csv": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/angular2-csv/-/angular2-csv-0.2.5.tgz", + "integrity": "sha512-LabElzVwBRVJCawtuqC6wJN0HbWYjPVvbaqimAeCFubvm0HH74xI9w7hXtHy4p08RtduCZorjoa5iLQAM2PlZA==", + "peerDependencies": { + "@angular/core": "^2.0.0||^4.0.0", + "@angular/http": "^2.0.0||^4.0.0", + "rxjs": "^5.0.0" + } + }, "node_modules/ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", @@ -8355,6 +8523,44 @@ "rxjs": ">= 6.0.0" } }, + "node_modules/ngx-clipboard": { + "version": "12.3.1", + "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-12.3.1.tgz", + "integrity": "sha512-qrUmkfYXEBQZQ4wNKno8yw5eOSxtdkzCPFFPil/XVVc93MNIKUme8aLbS3TEMB4PGsxopjbuTAzV7fptiSOIww==", + "dependencies": { + "ngx-window-token": "^2.0.0", + "tslib": "^1.9.0" + }, + "peerDependencies": { + "@angular/common": ">=6.0.0", + "@angular/core": ">=6.0.0" + } + }, + "node_modules/ngx-clipboard/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, + "node_modules/ngx-window-token": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ngx-window-token/-/ngx-window-token-2.0.1.tgz", + "integrity": "sha512-rvqdqJEfnWXQFU5fyfYt06E10tR/UtFOYdF3QebfcOh5VIJhnTKiprX8e4B9OrX7WEVFm9BT8uV72xXcEgsaKA==", + "dependencies": { + "tslib": "^1.9.0" + }, + "engines": { + "node": ">=6.9.x" + }, + "peerDependencies": { + "@angular/common": ">=6.0.0 || >=7.0.0 || >=8.0.0", + "@angular/core": ">=6.0.0 || >=7.0.0 || >=8.0.0" + } + }, + "node_modules/ngx-window-token/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", @@ -12256,6 +12462,61 @@ } }, "dependencies": { + "@ag-grid-community/all-modules": { + "version": "26.2.1", + "resolved": "https://registry.npmjs.org/@ag-grid-community/all-modules/-/all-modules-26.2.1.tgz", + "integrity": "sha512-zO8PFBSiChQEmJLmWe/gaKhDOPvOR+4yWlTmfIBTWZ/j/zhJSeCNHor6WQGakgfONrNOq0P6yQjVu0d7JFi7mA==", + "requires": { + "@ag-grid-community/client-side-row-model": "~26.2.0", + "@ag-grid-community/core": "~26.2.0", + "@ag-grid-community/csv-export": "~26.2.0", + "@ag-grid-community/infinite-row-model": "~26.2.0" + } + }, + "@ag-grid-community/angular": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/@ag-grid-community/angular/-/angular-26.2.0.tgz", + "integrity": "sha512-/Vx/dhZB7GBjp6tDQ80d9ppjsrvF274y7y5tfDhTynJRtqELtRnHGPl+ZsSz03AP8kYp5EsHl1nwQo4/96cmYg==", + "requires": { + "tslib": "^1.10.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, + "@ag-grid-community/client-side-row-model": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/@ag-grid-community/client-side-row-model/-/client-side-row-model-26.2.0.tgz", + "integrity": "sha512-kW5lMsK5WEXaqZMfHbLRj+EvxLhPW6qtDv61PyDcv+/91lwm2p5dT/iUBppavSwJDiNul+wntpyIlTulZgokwA==", + "requires": { + "@ag-grid-community/core": "~26.2.0" + } + }, + "@ag-grid-community/core": { + "version": "26.2.1", + "resolved": "https://registry.npmjs.org/@ag-grid-community/core/-/core-26.2.1.tgz", + "integrity": "sha512-E2e3rZoZ90QtgO320kmlrm7kFbzFkCyrvCWYUQshJJU/UzCqr6DffVAXTaeehPNLzHBybANxWbSbFab9LQLIwQ==" + }, + "@ag-grid-community/csv-export": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/@ag-grid-community/csv-export/-/csv-export-26.2.0.tgz", + "integrity": "sha512-2QqzmYIqqXpPwvIiIpWXV9VWKVK5mLdZI3RVnZdgWGCyTD0OAqWPgqY5LapVpyxGfE/oUm7s9O7ux7EFiTdEcA==", + "requires": { + "@ag-grid-community/core": "~26.2.0" + } + }, + "@ag-grid-community/infinite-row-model": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/@ag-grid-community/infinite-row-model/-/infinite-row-model-26.2.0.tgz", + "integrity": "sha512-wA4qSYD/XdvrjVQ6gdENaX++QlQufndWJonl7oVCPzxw7fO3H1i8DFpfr2fe/BXwrcDM1LeJ5HM6jzIuKIrddg==", + "requires": { + "@ag-grid-community/core": "~26.2.0" + } + }, "@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -12716,6 +12977,23 @@ "tslib": "^2.3.0" } }, + "@angular/http": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.7.tgz", + "integrity": "sha512-9XrvXFVuHsAfVlIbM6Em2EouKiRyV2y4nPA+dAUd/9uB9i/i+FzZlmmeSIvP7ePnm6QyAC6nlvy9FMQYwvrtNA==", + "peer": true, + "requires": { + "tslib": "^1.7.1" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "peer": true + } + } + }, "@angular/platform-browser": { "version": "13.3.12", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.12.tgz", @@ -14077,6 +14355,11 @@ "integrity": "sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==", "dev": true }, + "@fortawesome/fontawesome-free": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz", + "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==" + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -14163,6 +14446,14 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, + "@ng-select/ng-select": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-8.3.0.tgz", + "integrity": "sha512-AwAuDs+86++D2kEsik2/ZiQuRk0khd1HESofOm1yMBwbzsw+xLSyVOMml/OehDFSOxli7fAkk07wYtzAhxSB3Q==", + "requires": { + "tslib": "^2.3.1" + } + }, "@ngtools/webpack": { "version": "13.3.10", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.3.10.tgz", @@ -14736,6 +15027,39 @@ } } }, + "ag-charts-angular": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/ag-charts-angular/-/ag-charts-angular-7.3.0.tgz", + "integrity": "sha512-5xhMqUvTWUPOymBte6w1mn8D+JuAPB2gu5UD390xQSJ2SeTD5c0IrmHBrymsAg1vMNHDkqDm7vVcp+XnCKpxMQ==", + "requires": { + "tslib": "^2.3.0" + } + }, + "ag-charts-community": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-7.3.0.tgz", + "integrity": "sha512-118U6YsCMia6iZHaN06zT19rr2SYa92WB73pMVCKQlp2H3c19uKQ6Y6DfKG/nIfNUzFXZLHBwKIdZXsMWJdZww==" + }, + "ag-grid-angular": { + "version": "26.2.0", + "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-26.2.0.tgz", + "integrity": "sha512-IJYNniJkQXQhEMdsZ50MFMY80K3PQGsh4Jh1Nu7G1Det5Pq2QNPgZ/FwNucsxYDPn32VICVVlUEQTwtEl63FZQ==", + "requires": { + "tslib": "^1.10.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, + "ag-grid-community": { + "version": "26.2.1", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-26.2.1.tgz", + "integrity": "sha512-aChSGNdPkBda4BhOUUEAmAkRlIG7rFU8UTXx3NPStavrCOHKLDRV90djIKuiXfM6ONBqKmeqw2as0yuLnSN8dw==" + }, "agent-base": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", @@ -14804,6 +15128,12 @@ "fast-deep-equal": "^3.1.3" } }, + "angular2-csv": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/angular2-csv/-/angular2-csv-0.2.5.tgz", + "integrity": "sha512-LabElzVwBRVJCawtuqC6wJN0HbWYjPVvbaqimAeCFubvm0HH74xI9w7hXtHy4p08RtduCZorjoa5iLQAM2PlZA==", + "requires": {} + }, "ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", @@ -18414,6 +18744,37 @@ "webpack-merge": "^5.0.0" } }, + "ngx-clipboard": { + "version": "12.3.1", + "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-12.3.1.tgz", + "integrity": "sha512-qrUmkfYXEBQZQ4wNKno8yw5eOSxtdkzCPFFPil/XVVc93MNIKUme8aLbS3TEMB4PGsxopjbuTAzV7fptiSOIww==", + "requires": { + "ngx-window-token": "^2.0.0", + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, + "ngx-window-token": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ngx-window-token/-/ngx-window-token-2.0.1.tgz", + "integrity": "sha512-rvqdqJEfnWXQFU5fyfYt06E10tR/UtFOYdF3QebfcOh5VIJhnTKiprX8e4B9OrX7WEVFm9BT8uV72xXcEgsaKA==", + "requires": { + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "nice-napi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz", diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/package.json b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/package.json index b1297aa3c..b6c6f8fd8 100644 --- a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/package.json +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/package.json @@ -11,6 +11,16 @@ }, "private": true, "dependencies": { + "@ag-grid-community/all-modules": "^26.2.0", + "@ag-grid-community/angular": "^26.2.0", + "@ag-grid-community/core": "^26.2.1", + "@fortawesome/fontawesome-free": "^5.14.0", + "@ng-select/ng-select": "^8.3.0", + "ag-charts-angular": "^7.3.0", + "ag-charts-community": "^7.3.0", + "ag-grid-angular": "^26.2.0", + "ag-grid-community": "^26.2.0", + "angular2-csv": "0.2.5", "@angular-architects/module-federation": "^14.3.12", "@angular/animations": "~13.3.0", "@angular/common": "~13.3.0", @@ -21,6 +31,7 @@ "@angular/platform-browser-dynamic": "~13.3.0", "@angular/router": "~13.3.0", "ngx-bootstrap": "^5.6.2", + "ngx-clipboard": "^12.3.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/sms-ui-suite b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/sms-ui-suite new file mode 160000 index 000000000..2cf30bdc7 --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/sms-ui-suite @@ -0,0 +1 @@ +Subproject commit 2cf30bdc7c07271f0a074b28d90eb5567de7b4b4 diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/constants/constants.ts b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/constants/constants.ts new file mode 100644 index 000000000..efda2caf2 --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/constants/constants.ts @@ -0,0 +1,4 @@ +export class Constants { + public static readonly OCCURRENCES_VALUE_FILTER_THRESHOLD = 10 + public static readonly CSV_ICON = 'fas fa-download' +} diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.component.html b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.component.html index 8deff5888..7b43ab105 100644 --- a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.component.html +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.component.html @@ -1 +1,33 @@ -

general-route-module works!

+ +
+
+ +
+
+ +
+
+ + + + + + + +
+ +
+ + + + + diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.component.ts b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.component.ts index 4d8ecd5e4..173be4611 100644 --- a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.component.ts +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {ITableInfo} from "../interfaces/table-info.interface"; +import {UtilsService} from "../services/utils.service"; @Component({ selector: 'app-general-route-module', @@ -7,9 +9,775 @@ import { Component, OnInit } from '@angular/core'; }) export class GeneralRouteModuleComponent implements OnInit { - constructor() { } + + /** + * @VARIABLES + */ + public componentInfo: ITableInfo = { + "condition": "Redfish Health", + "tab_name": "HGX GPU SXM DRAM Power", + "path": "hgx_gpu_sxm_dram_power", + "component_type": "table_and_graph", + "api": { + "path": "/api/redfish/health/hgx_gpu_sensors_histogram_info?sensor_group_name=HGX_GPU_SXM_DRAM_Power" + } + } + public data; + public isReady: boolean; + public isReloading: boolean; + public table_Data; + + + constructor() { + } ngOnInit(): void { + this.loadData() + } + + public loadData(fromManualRefresh = false): void { + if (!fromManualRefresh) { + this.isReady = false; + } + this.isReloading = true; + setTimeout(()=>{ + this.data = { + "raws_data": [ + [ + "BMC ID", + "SXM 1 DRAM 0 Power 0 (W)", + "SXM 2 DRAM 0 Power 0 (W)", + "SXM 3 DRAM 0 Power 0 (W)", + "SXM 4 DRAM 0 Power 0 (W)", + "SXM 5 DRAM 0 Power 0 (W)", + "SXM 6 DRAM 0 Power 0 (W)", + "SXM 7 DRAM 0 Power 0 (W)", + "SXM 8 DRAM 0 Power 0 (W)" + ], + [ + "10.141.137.163:55000", + 43, + 40, + 41, + 31, + 39, + 41, + 37, + 45 + ], + [ + "10.141.137.163:55001", + 45, + 39, + 35, + 40, + 37, + 31, + 39, + 45 + ], + [ + "10.141.137.163:55002", + 43, + 40, + 45, + 32, + 30, + 33, + 43, + 46 + ], + [ + "10.141.137.163:55003", + 38, + 40, + 43, + 33, + 34, + 36, + 39, + 35 + ], + [ + "10.141.137.163:55004", + 35, + 46, + 41, + 38, + 30, + 30, + 35, + 32 + ], + [ + "10.141.137.163:55005", + 43, + 42, + 45, + 40, + 31, + 36, + 33, + 46 + ], + [ + "10.141.137.164:55000", + 46, + 36, + 31, + 35, + 44, + 42, + 43, + 46 + ], + [ + "10.141.137.164:55001", + 35, + 42, + 33, + 39, + 40, + 36, + 45, + 40 + ], + [ + "10.141.137.164:55002", + 33, + 37, + 35, + 44, + 46, + 34, + 37, + 36 + ], + [ + "10.141.137.164:55003", + 39, + 34, + 33, + 37, + 41, + 44, + 38, + 30 + ], + [ + "10.141.137.164:55004", + 46, + 38, + 41, + 46, + 46, + 41, + 40, + 30 + ], + [ + "10.141.137.164:55005", + 38, + 37, + 32, + 43, + 36, + 40, + 40, + 45 + ], + [ + "10.141.215.5:55000", + 35, + 34, + 41, + 34, + 38, + 39, + 35, + 39 + ], + [ + "10.141.215.5:55001", + 32, + 44, + 34, + 40, + 37, + 37, + 40, + 36 + ], + [ + "10.141.215.5:55002", + 39, + 31, + 30, + 45, + 37, + 31, + 34, + 45 + ], + [ + "10.141.215.5:55003", + 32, + 39, + 39, + 34, + 33, + 39, + 30, + 39 + ], + [ + "10.141.215.5:55004", + 44, + 38, + 43, + 43, + 37, + 35, + 35, + 39 + ], + [ + "10.141.215.5:55005", + 34, + 30, + 44, + 30, + 30, + 32, + 36, + 31 + ], + [ + "10.141.215.6:55000", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.215.6:55001", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.215.6:55002", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.215.6:55003", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.215.6:55004", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.215.6:55005", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55000", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55001", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55002", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55003", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55004", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55005", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55006", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55007", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55008", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55009", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.141.24.10:55010", + 37, + 44, + 38, + 35, + 40, + 43, + 36, + 33 + ], + [ + "10.235.4.6:55001", + 31, + 34, + 36, + 39, + 33, + 38, + 40, + 35 + ] + ], + "graph_data": { + "histogram": { + "data": [ + 30, + 30, + 30, + 30, + 30, + 30, + 30, + 30, + 30, + 30, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 31, + 32, + 32, + 32, + 32, + 32, + 32, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 33, + 34, + 34, + 34, + 34, + 34, + 34, + 34, + 34, + 34, + 34, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 35, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 36, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 37, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 38, + 39, + 39, + 39, + 39, + 39, + 39, + 39, + 39, + 39, + 39, + 39, + 39, + 39, + 39, + 39, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 40, + 41, + 41, + 41, + 41, + 41, + 41, + 41, + 42, + 42, + 42, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 43, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 44, + 45, + 45, + 45, + 45, + 45, + 45, + 45, + 45, + 45, + 46, + 46, + 46, + 46, + 46, + 46, + 46, + 46, + 46 + ], + "bins_count": 10, + "filterable_columns": [ + "SXM 1 DRAM 0 Power 0 (W)", + "SXM 2 DRAM 0 Power 0 (W)", + "SXM 3 DRAM 0 Power 0 (W)", + "SXM 4 DRAM 0 Power 0 (W)", + "SXM 5 DRAM 0 Power 0 (W)", + "SXM 6 DRAM 0 Power 0 (W)", + "SXM 7 DRAM 0 Power 0 (W)", + "SXM 8 DRAM 0 Power 0 (W)" + ], + "xlable": "DRAM_Power (Watt)", + "ylable": "Number of GPUs", + "graph_title": "HGX_GPU_SXM_DRAM_Power", + "bar_color_range": { + "normal": [ + -100, + 100000000 + ], + "warning": [ + -100000, + -1000 + ], + "critical": [ + -1000000, + -100001 + ] + } + } + } + }; + this.table_Data = Array.isArray(this.data['raws_data'][0])? UtilsService.parseListOfListData(this.data['raws_data']) : this.data['raws_data'] + this.isReady = true; + this.isReloading = false; + }, 1000) } } diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.module.ts b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.module.ts index 1d8b3a08a..a9c479337 100644 --- a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.module.ts +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/general-route-module/general-route-module.module.ts @@ -1,18 +1,35 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { GeneralRouteModuleComponent } from './general-route-module.component'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {GeneralRouteModuleComponent} from './general-route-module.component'; import {GeneralRouteModuleRoutingModule} from "./general-route-module-routing.module"; import {DynamicMenuItemsService} from "./services/dynamic-menu-items.service"; - +import {InventoryGeneralTableComponent} from "../inventory-general-table/inventory-general-table.component"; +import {GenericHistogramComponent} from "../generic-histogram/generic-histogram.component"; +import {DevicesContextMenuModule} from "../devices-context-menu/devices-context-menu.module"; +import {XCoreAgGridModule} from "../../../../sms-ui-suite/x-core-ag-grid/x-core-ag-grid.module"; +import {SpinnerModule} from "../../../../sms-ui-suite/sms-spinner/spinner.module"; +import {AgChartsAngularModule} from "ag-charts-angular"; +import {SmsCardModule} from "../../../../sms-ui-suite/sms-card/sms-card.module"; +import {FormsModule} from "@angular/forms"; +import {SmsDropdownSelectModule} from "../../../../sms-ui-suite/sms-dropdown-select/sms-dropdown-select.module"; @NgModule({ declarations: [ - GeneralRouteModuleComponent + GeneralRouteModuleComponent, + InventoryGeneralTableComponent, + GenericHistogramComponent ], imports: [ CommonModule, - GeneralRouteModuleRoutingModule + GeneralRouteModuleRoutingModule, + DevicesContextMenuModule, + XCoreAgGridModule, + SpinnerModule, + AgChartsAngularModule, + SmsCardModule, + FormsModule, + SmsDropdownSelectModule ] }) export class GeneralRouteModuleModule { diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.html b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.html new file mode 100644 index 000000000..df216ac27 --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.html @@ -0,0 +1,32 @@ +
+
+
+
Columns
+
+ +
+
+
+
+
+
Bins
+ +
+
+
+
+
+ +
+
diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.scss b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.scss new file mode 100644 index 000000000..173dcbeb0 --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.scss @@ -0,0 +1,27 @@ +.top-controls-wrapper { + padding-top: 10px; + .flex { + display: flex; + + .bins-label { + align-self: center; + margin-right: 5px; + } + + .bins-input { + padding: 6px 6px; + } + } + + .filterable-columns-wrapper { + width: 60%; + + .dropdown-wrapper { + flex-grow: 1; + } + } +} + +.chart-wrapper { + height: 400px; +} diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.ts b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.ts new file mode 100644 index 000000000..3c410c167 --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/generic-histogram/generic-histogram.component.ts @@ -0,0 +1,139 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {IHistogramData} from "../interfaces/histogram-data.interface"; + +@Component({ + selector: 'app-generic-histogram', + templateUrl: './generic-histogram.component.html', + styleUrls: ['./generic-histogram.component.scss'] +}) +export class GenericHistogramComponent implements OnInit { + + /** + * @Input + */ + @Input() histogramData: IHistogramData; + @Input() rawData; + /** + * @VARIABLES + */ + public chartOptions; + public isReady: boolean; + public binsCount = 10; + public filteredColumns; + public ALL_COLUMN_FILTER = 'All'; + + constructor() { + } + + ngOnInit(): void { + if (this.histogramData.filterable_columns?.length) { + this.filteredColumns = [this.filterableColumns[0]]; + } + if(this.histogramData.bins_count) { + this.binsCount = this.histogramData.bins_count; + } + this.initChartOptions(); + } + + private initChartOptions(): void { + let series = this.histogramData.filterable_columns?.length && !this.isAllFilterableColumnsSelected()? this.filteredColumns.map(column => { + return { + type: 'histogram', + xKey: column.name, + xName: this.histogramData.xlable, + highlightStyle: {item: {fill: '#76B900FF'}}, + strokeWidth: 0, + binCount: this.binsCount, + } + }): + [ + { + type: 'histogram', + xKey: 'value', + xName: this.histogramData.xlable, + fill: '#76B900FF', + highlightStyle: {item: {fill: '#76B900FF'}}, + strokeWidth: 0, + binCount: this.binsCount, + } + ] + this.chartOptions = { + data: this.getChartData(), + theme: { + palette: { + fills: ['rgba(253, 127, 111, 0.5)', 'rgba(126, 176, 213, 0.5)', 'rgba(196, 130, 25, 0.5)', 'rgba(77, 114, 10, 0.5)', + 'rgba(28, 239, 245, 0.5)', 'rgba(255, 238, 101, 0.5)', 'rgba(90, 77, 176, 0.5)', 'rgba(108, 54, 80, 0.5)', + 'rgba(139, 211, 199, 0.5)', 'rgba(2, 255, 155, 0.5)', 'rgba(35, 98, 143, 0.5)', 'rgba(148, 12, 144, 0.5)', + 'rgba(255, 127, 0, 0.5)', 'rgba(143, 35, 35, 0.5)', 'rgba(157, 204, 0, 0.5)', 'rgba(0, 51, 128, 0.5)'], + strokes: [] + }, + }, + series: series, + legend: { + enabled: !!(this.histogramData.filterable_columns?.length && !this.isAllFilterableColumnsSelected()), + position: 'top' + }, + axes: [ + { + type: 'number', + position: 'bottom', + title: { text: this.histogramData.xlable }, + gridStyle: { + visible: false + } + }, + { + type: 'number', + position: 'left', + title: { text: this.histogramData.ylable }, + }, + ] + }; + } + + private getChartData() { + if (!this.histogramData.filterable_columns || this.isAllFilterableColumnsSelected()) { + return this.histogramData.data.map(value => {return {value: value}}); + } else { + return this.rawData + } + } + + public numberOnly(event): boolean { + const charCode = (event.which) ? event.which : event.keyCode; + if (charCode > 31 && (charCode < 48 || charCode > 57)) { + return false; + } + return true; + } + + public binsCountChanged(event) { + this.initChartOptions(); + } + + private isAllFilterableColumnsSelected() { + return this.filteredColumns.map(item => item.name).includes(this.ALL_COLUMN_FILTER); + } + + public get filterableColumns() { + return [{name: this.ALL_COLUMN_FILTER}].concat(this.histogramData.filterable_columns.map(column => { + return {name: column}; + })); + } + + public onFilteredColumnChanged(event) { + let newFilteredColumns; + if(event.length == 0 || (!this.isAllFilterableColumnsSelected() && event.map(item => item.name).includes(this.ALL_COLUMN_FILTER))) { + newFilteredColumns = [{name: this.ALL_COLUMN_FILTER}] + } else if (event.length > 1 && this.isAllFilterableColumnsSelected()){ + newFilteredColumns = event.filter(column => column.name != this.ALL_COLUMN_FILTER); + } else { + newFilteredColumns = event; + } + if (JSON.stringify(this.filteredColumns) !== JSON.stringify(newFilteredColumns)) { + this.filteredColumns = newFilteredColumns; + } + this.initChartOptions() + } + +} diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/interfaces/histogram-data.interface.ts b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/interfaces/histogram-data.interface.ts new file mode 100644 index 000000000..e309262d9 --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/interfaces/histogram-data.interface.ts @@ -0,0 +1,12 @@ + +export interface IHistogramData { + bar_color_range: { + [p: string]: [number, number] + } + bins_count: number, + data: number[], + graph_title: string, + xlable: string, + ylable: string, + filterable_columns: string[] +} diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/interfaces/table-info.interface.ts b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/interfaces/table-info.interface.ts new file mode 100644 index 000000000..5cded5f05 --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/interfaces/table-info.interface.ts @@ -0,0 +1,24 @@ + +export interface ITableInfo { + api: { + path: string, + params?: [{ param_name: string, param_type: string, is_optional: boolean }], + label_of_table?: string, + popup_data?: {column_name: string, popup_name: string}[] + }, + component_type: string, + condition: string, + groups_api?: string, + path: string, + tab_name: string, +} + +export interface IDynamicTablesData { + tables_data: ITableInfo[], + tables_order: { + [p: string] : string[] + }, + condition_icons: { + [p: string] : string + } +} diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.html b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.html new file mode 100644 index 000000000..fc92e7300 --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.html @@ -0,0 +1,12 @@ + + + + + + diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.scss b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.ts b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.ts new file mode 100644 index 000000000..9e9bd98ba --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/inventory-general-table/inventory-general-table.component.ts @@ -0,0 +1,177 @@ +/** + * @MODULES + */ +import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +/** + * @COMPONENTS + */ +import {XCoreAgGridComponent} from "../../../../sms-ui-suite/x-core-ag-grid/x-core-ag-grid.component"; + +/** + * @CONSTANTS + */ + +import {ITableInfo} from "../interfaces/table-info.interface"; +import {BehaviorSubject} from "rxjs"; +import { + XCoreAgGridOptions +} from "../../../../sms-ui-suite/x-core-ag-grid/x-core-ag-grid-options/x-core-ag-grid-options"; +import {XCoreAgGridConstants} from "../../../../sms-ui-suite/x-core-ag-grid/constants/x-core-ag-grid.constants"; +import {UtilsService} from "../services/utils.service"; +import {Constants} from "../constants/constants"; + +@Component({ + selector: 'app-inventory-general-table', + templateUrl: './inventory-general-table.component.html', + styleUrls: ['./inventory-general-table.component.scss'] +}) +export class InventoryGeneralTableComponent implements OnInit { + /** + * @INPUTS + */ + @Input('data') data; + @Input('tableName') tableName: string; + @Input() componentInfo: ITableInfo; + @Input() rightAdditionalTemplate; + @Input() isDataLoading: boolean; + @Input() presentObjectAsGroupHeader: boolean; + @Input() autoSize: boolean = true; + + /** + * @OUTPUTS + */ + @Output() onRowSelectionChange: EventEmitter = new EventEmitter(); + + /** + * @CHILDREN + */ + @ViewChild('inventoryTable', {static: false}) inventoryTable: XCoreAgGridComponent; + + /** + * @VARIABLES + */ + public tableData; + public tableOptions: XCoreAgGridOptions = new XCoreAgGridOptions(); + public isReady: boolean = false; + public valuesOccurrencesMap; + + constructor(private cdr: ChangeDetectorRef) { + this.tableOptions = new XCoreAgGridOptions(); + } + + ngOnInit(): void { + } + + ngOnChanges(changes) { + if (changes.data && typeof changes.data.currentValue != 'undefined') { + this.prepareTable(changes.data.firstChange); + } + } + + ngOnDestroy() { + this.cdr.detectChanges(); + } + + private prepareTable(isFirstChange?: boolean) { + this.isReady = false; + if (this.data) { + this.tableData = this.data; + this.valuesOccurrencesMap = UtilsService.prepareValuesOccurrencesMap(this.tableData); + this.prepareTableOptions(isFirstChange); + this.isReady = true; + } else { + this.isReady = true; + } + } + + /** + * @desc this function used to create XCoreAgGridOptions by looping over json and creat column for each key + * @private + */ + private prepareTableOptions(isFirstChange?: boolean): void { + const options = { + [XCoreAgGridConstants.paginationPageSize]: "20", + [XCoreAgGridConstants.columnDefs]: [] + }; + if (!this.data.length) { + return; + } + let firstRow = this.data[0]; + Object.keys(firstRow).forEach((key) => { + if (!Array.isArray(firstRow[key])) { + if (typeof firstRow[key] == 'object' && firstRow[key]) { + if (this.presentObjectAsGroupHeader) { + let groupedColumn = { + [XCoreAgGridConstants.headerName]: key, + [XCoreAgGridConstants.children]: [] + } + Object.keys(firstRow[key]).forEach((subKey) => { + groupedColumn[XCoreAgGridConstants.children].push({ + [XCoreAgGridConstants.field]: key, + [XCoreAgGridConstants.headerName]: subKey, + [XCoreAgGridConstants.filter]: (this.valuesOccurrencesMap[key][subKey] && this.valuesOccurrencesMap[key][subKey] <= Constants.OCCURRENCES_VALUE_FILTER_THRESHOLD) ? + XCoreAgGridConstants.checkboxFilter : true, + [XCoreAgGridConstants.valueGetter]: (params) => { + return params.data[params.colDef.field][subKey]; + } + }) + }) + options[XCoreAgGridConstants.columnDefs].push(groupedColumn); + } else { + Object.keys(firstRow[key]).forEach((subKey) => { + options[XCoreAgGridConstants.columnDefs].push({ + [XCoreAgGridConstants.field]: key, + [XCoreAgGridConstants.headerName]: subKey, + [XCoreAgGridConstants.filter]: (this.valuesOccurrencesMap[key][subKey] && this.valuesOccurrencesMap[key][subKey] <= Constants.OCCURRENCES_VALUE_FILTER_THRESHOLD) ? + XCoreAgGridConstants.checkboxFilter : true, + [XCoreAgGridConstants.valueGetter]: (params) => { + return params.data[params.colDef.field][subKey]; + } + }) + }) + } + } else { + options[XCoreAgGridConstants.columnDefs].push({ + [XCoreAgGridConstants.field]: key, + [XCoreAgGridConstants.headerName]: key, + [XCoreAgGridConstants.filter]: (this.valuesOccurrencesMap[key] && this.valuesOccurrencesMap[key] <= Constants.OCCURRENCES_VALUE_FILTER_THRESHOLD) ? + XCoreAgGridConstants.checkboxFilter : true, + [XCoreAgGridConstants.valueGetter]: (params) => { + return params.data[params.colDef.field]; + } + }) + } + } + }) + Object.assign(this.tableOptions.gridOptions, options); + Object.assign(this.tableOptions.extraOptions, { + [XCoreAgGridConstants.quickInputFilter]: true, + [XCoreAgGridConstants.rightAdditionalControlsTemplate]: this.rightAdditionalTemplate, + [XCoreAgGridConstants.tableName]: this.tableName || `${this.componentInfo.condition}_${this.componentInfo.path}_data_table`, + [XCoreAgGridConstants.exportToCSV]: true, + [XCoreAgGridConstants.exportToCSVIcon]: Constants.CSV_ICON + }); + if (this.autoSize) { + Object.assign(this.tableOptions.extraOptions, { + [XCoreAgGridConstants.autoSizeColumns]: {skipHeader: false,} + }); + } + if (isFirstChange) { + Object.assign(this.tableOptions.extraOptions, { + [XCoreAgGridConstants.selectRowByKey]: new BehaviorSubject(false) + }); + } + setTimeout(() => { + if (!isFirstChange) { + if (this.inventoryTable.agGridHelpers.gridApi) { + this.inventoryTable.agGridHelpers.updateColumnDefsAfterRendered(this.tableOptions, this.inventoryTable, null, true); + } + } + }) + } + + public onRowSelection(event): void { + this.onRowSelectionChange.emit(event); + } + +} diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/services/utils.service.ts b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/services/utils.service.ts new file mode 100644 index 000000000..fafd44e13 --- /dev/null +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/src/app/hello-world/services/utils.service.ts @@ -0,0 +1,84 @@ +import {Injectable} from '@angular/core'; + + +@Injectable({ + providedIn: 'root' +}) +export class UtilsService { + + constructor() { + } + + /** + * This function takes list of dictionaries and returns a map of [column name -> number of distinct values] + * @param data : list of dictionaries + */ + public static prepareValuesOccurrencesMap(data){ + let occurrencesMap; + let valuesMap: {[p: string]: Set | any} = {}; + if (data.length) { + data.forEach(dataRow => { + Object.keys(dataRow).forEach((key) => { + if(typeof dataRow[key] == 'object' && dataRow[key]){ + if (!valuesMap[key]) { + valuesMap[key] = {}; + } + Object.keys(dataRow[key]).forEach(subKey => { + if (!valuesMap[key][subKey]) { + valuesMap[key][subKey] = new Set(); + } + valuesMap[key][subKey].add(dataRow[key][subKey]) + }) + } else { + if (!valuesMap[key]){ + valuesMap[key] = new Set(); + } + valuesMap[key].add(dataRow[key]); + } + }); + }) + occurrencesMap = {} + Object.keys(valuesMap).forEach(key => { + if(typeof data[0][key] == 'object'){ + occurrencesMap[key] = {}; + Object.keys(valuesMap[key]).forEach(subKey => { + occurrencesMap[key][subKey] = valuesMap[key][subKey].size + }) + } else { + occurrencesMap[key] = valuesMap[key].size + } + }) + } + return occurrencesMap; + } + + /** + * For performance reasons, some tables APIs return data as list of lists; + * the first list presents the column names, the other items present data. + * This function takes list of lists and returns them as list of dictionaries. + * @param data : list of lists + */ + public static parseListOfListData(data) { + let headers = data[0]; + let rows = data.slice(1); + rows = rows.map(row => { + let dict = {} + row.forEach((value, index) => { + dict[headers[index]] = value; + }) + return dict; + }) + return rows; + } + + public static downloadFile(url: string): void { + let link = document.createElement("a"); + link.download = window.name; + link.href = url; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } + + +} diff --git a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/tsconfig.json b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/tsconfig.json index a199ccc94..081b5a9fd 100644 --- a/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/tsconfig.json +++ b/plugins/advanced_hello_world_plugin/src/advanced_hello_world_ui/tsconfig.json @@ -4,9 +4,11 @@ "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, - "strict": true, - "noImplicitOverride": false, + "strict": false, + "noImplicitOverride": true, + "noImplicitAny": false, "strictPropertyInitialization": false, + "strictNullChecks": false, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true,