mgr/dashboard: update to angular v15

- The scss import was broken because of the ~ symbol. Looks like its not
needed.

- Login username/password label was somehow broken because of the
placeholder class and color. instead of applying the color through a
class I applied the color directly to the attribute and it worked

- Typescript 4.9 uses ES2022 and it complaints about using some items
  before its initialization. There were other typescript fixes need to
be delivered because of this change.

- Reverting back the badge to rectangular shape (because I feel like the
  round leaves out some empty spaces)

Fixes: https://tracker.ceph.com/issues/62844
Signed-off-by: Nizamudeen A <nia@redhat.com>

src/pybind/mgr/dashboard/frontend/package.json

@@ -44,24 +44,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "14.3.0",
-    "@angular/common": "14.3.0",
-    "@angular/compiler": "14.3.0",
-    "@angular/core": "14.3.0",
-    "@angular/forms": "14.3.0",
-    "@angular/localize": "14.3.0",
-    "@angular/platform-browser": "14.3.0",
-    "@angular/platform-browser-dynamic": "14.3.0",
-    "@angular/router": "14.3.0",
+    "@angular/animations": "15.2.9",
+    "@angular/common": "15.2.9",
+    "@angular/compiler": "15.2.9",
+    "@angular/core": "15.2.9",
+    "@angular/forms": "15.2.9",
+    "@angular/localize": "15.2.9",
+    "@angular/platform-browser": "15.2.9",
+    "@angular/platform-browser-dynamic": "15.2.9",
+    "@angular/router": "15.2.9",
     "@circlon/angular-tree-component": "10.0.0",
-    "@ng-bootstrap/ng-bootstrap": "12.1.2",
+    "@ng-bootstrap/ng-bootstrap": "14.2.0",
     "@ngx-formly/bootstrap": "6.1.1",
     "@ngx-formly/core": "6.1.1",
     "@popperjs/core": "2.10.2",
     "@swimlane/ngx-datatable": "18.0.0",
     "@types/file-saver": "2.0.1",
     "async-mutex": "0.2.4",
-    "bootstrap": "5.0.0",
+    "bootstrap": "5.2.3",
     "chart.js": "2.9.4",
     "detect-browser": "5.2.0",
     "file-saver": "2.0.2",
@@ -72,31 +72,31 @@
     "ng-click-outside": "7.0.0",
     "ng2-charts": "2.4.2",
     "ngx-pipe-function": "1.0.0",
-    "ngx-toastr": "14.3.0",
+    "ngx-toastr": "17.0.2",
     "rxjs": "6.6.3",
     "simplebar-angular": "2.3.6",
     "swagger-ui": "4.12.0",
     "tslib": "2.3.1",
     "zone.js": "0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.2.11",
+    "@angular-devkit/build-angular": "15.2.9",
     "@angular-eslint/builder": "13.5.0",
     "@angular-eslint/eslint-plugin": "13.5.0",
     "@angular-eslint/eslint-plugin-template": "13.5.0",
     "@angular-eslint/schematics": "13.5.0",
     "@angular-eslint/template-parser": "13.5.0",
-    "@angular/cli": "14.2.11",
-    "@angular/compiler-cli": "14.3.0",
-    "@angular/language-service": "14.3.0",
+    "@angular/cli": "15.2.9",
+    "@angular/compiler-cli": "15.2.9",
+    "@angular/language-service": "15.2.9",
     "@applitools/eyes-cypress": "3.22.5",
     "@compodoc/compodoc": "1.1.18",
     "@cypress/browserify-preprocessor": "3.0.2",
     "@types/brace-expansion": "1.1.0",
     "@types/cypress-cucumber-preprocessor": "4.0.1",
     "@types/jest": "28.1.3",
     "@types/lodash": "4.14.161",
-    "@types/node": "12.12.62",
+    "@types/node": "18.17.12",
     "@types/swagger-ui": "3.52.0",
     "@typescript-eslint/eslint-plugin": "5.27.1",
     "@typescript-eslint/parser": "5.27.1",
@@ -129,9 +129,9 @@
     "table": "6.8.0",
     "transifex-i18ntool": "1.1.0",
     "ts-node": "9.0.0",
-    "typescript": "4.6.4"
+    "typescript": "4.9.5"
   },
   "cypress-cucumber-preprocessor": {
     "stepDefinitions": "cypress/e2e/common"
   }
-}
+}

src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts

@@ -452,8 +452,7 @@ const routes: Routes = [
   imports: [
     RouterModule.forRoot(routes, {
       useHash: true,
-      preloadingStrategy: PreloadAllModules,
-      relativeLinkResolution: 'legacy'
+      preloadingStrategy: PreloadAllModules
     })
   ],
   exports: [RouterModule],

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-setting/iscsi-setting.component.ts

@@ -21,10 +21,10 @@ export class IscsiSettingComponent implements OnInit {
   ngOnInit() {
     const validators: ValidatorFn[] = [];
     if ('min' in this.limits) {
-      validators.push(Validators.min(this.limits['min']));
+      validators.push(Validators.min(Number(this.limits['min'])));
     }
     if ('max' in this.limits) {
-      validators.push(Validators.max(this.limits['max']));
+      validators.push(Validators.max(Number(this.limits['max'])));
     }
     this.settingsForm.get(this.setting).setValidators(validators);
   }

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/prometheus/rules-list/rules-list.component.ts

@@ -18,7 +18,7 @@ import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.s
 })
 export class RulesListComponent extends PrometheusListHelper implements OnInit {
   columns: CdTableColumn[];
-  expandedRow: PrometheusRule;
+  declare expandedRow: PrometheusRule;
   selection = new CdTableSelection();
 
   /**

src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts

@@ -41,109 +41,8 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
   maxConvertedValueUnits?: string;
 
   chartDataUnits: string;
-  chartData: any = {
-    dataset: [
-      {
-        label: '',
-        data: [{ x: 0, y: 0 }],
-        tension: 0.2,
-        pointBackgroundColor: this.cssHelper.propertyValue('chart-color-strong-blue'),
-        backgroundColor: this.cssHelper.propertyValue('chart-color-translucent-blue'),
-        borderColor: this.cssHelper.propertyValue('chart-color-strong-blue'),
-        borderWidth: 1
-      },
-      {
-        label: '',
-        data: [],
-        tension: 0.2,
-        pointBackgroundColor: this.cssHelper.propertyValue('chart-color-orange'),
-        backgroundColor: this.cssHelper.propertyValue('chart-color-translucent-yellow'),
-        borderColor: this.cssHelper.propertyValue('chart-color-orange'),
-        borderWidth: 1
-      }
-    ]
-  };
-
-  options: any = {
-    responsive: true,
-    maintainAspectRatio: false,
-    animation: false,
-    elements: {
-      point: {
-        radius: 0
-      }
-    },
-    legend: {
-      display: false
-    },
-    tooltips: {
-      mode: 'index',
-      custom: function (tooltipModel: { x: number; y: number }) {
-        tooltipModel.x = 10;
-        tooltipModel.y = 0;
-      }.bind(this),
-      intersect: false,
-      displayColors: true,
-      backgroundColor: this.cssHelper.propertyValue('chart-color-tooltip-background'),
-      callbacks: {
-        title: function (tooltipItem: any): any {
-          return tooltipItem[0].xLabel;
-        },
-        label: (tooltipItems: any, data: any) => {
-          return (
-            ' ' +
-            data.datasets[tooltipItems.datasetIndex].label +
-            ' - ' +
-            tooltipItems.value +
-            ' ' +
-            this.chartDataUnits
-          );
-        }
-      }
-    },
-    hover: {
-      intersect: false
-    },
-    scales: {
-      xAxes: [
-        {
-          display: false,
-          type: 'time',
-          gridLines: {
-            display: false
-          },
-          time: {
-            tooltipFormat: 'DD/MM/YYYY - HH:mm:ss'
-          }
-        }
-      ],
-      yAxes: [
-        {
-          afterFit: (scaleInstance: any) => (scaleInstance.width = 100),
-          gridLines: {
-            display: false
-          },
-          ticks: {
-            beginAtZero: true,
-            maxTicksLimit: 4,
-            callback: (value: any) => {
-              if (value === 0) {
-                return null;
-              }
-              return this.convertUnits(value);
-            }
-          }
-        }
-      ]
-    },
-    plugins: {
-      borderArea: true,
-      chartAreaBorder: {
-        borderColor: this.cssHelper.propertyValue('chart-color-slight-dark-gray'),
-        borderWidth: 1
-      }
-    }
-  };
+  chartData: any = {};
+  options: any = {};
 
   public chartAreaBorderPlugin: PluginServiceGlobalRegistrationAndOptions[] = [
     {
@@ -173,7 +72,111 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit {
     private dimlessPipe: DimlessPipe,
     private formatter: FormatterService,
     private numberFormatter: NumberFormatterService
-  ) {}
+  ) {
+    this.chartData = {
+      dataset: [
+        {
+          label: '',
+          data: [{ x: 0, y: 0 }],
+          tension: 0.2,
+          pointBackgroundColor: this.cssHelper.propertyValue('chart-color-strong-blue'),
+          backgroundColor: this.cssHelper.propertyValue('chart-color-translucent-blue'),
+          borderColor: this.cssHelper.propertyValue('chart-color-strong-blue'),
+          borderWidth: 1
+        },
+        {
+          label: '',
+          data: [],
+          tension: 0.2,
+          pointBackgroundColor: this.cssHelper.propertyValue('chart-color-orange'),
+          backgroundColor: this.cssHelper.propertyValue('chart-color-translucent-yellow'),
+          borderColor: this.cssHelper.propertyValue('chart-color-orange'),
+          borderWidth: 1
+        }
+      ]
+    };
+
+    this.options = {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      elements: {
+        point: {
+          radius: 0
+        }
+      },
+      legend: {
+        display: false
+      },
+      tooltips: {
+        mode: 'index',
+        custom: function (tooltipModel: { x: number; y: number }) {
+          tooltipModel.x = 10;
+          tooltipModel.y = 0;
+        }.bind(this),
+        intersect: false,
+        displayColors: true,
+        backgroundColor: this.cssHelper.propertyValue('chart-color-tooltip-background'),
+        callbacks: {
+          title: function (tooltipItem: any): any {
+            return tooltipItem[0].xLabel;
+          },
+          label: (tooltipItems: any, data: any) => {
+            return (
+              ' ' +
+              data.datasets[tooltipItems.datasetIndex].label +
+              ' - ' +
+              tooltipItems.value +
+              ' ' +
+              this.chartDataUnits
+            );
+          }
+        }
+      },
+      hover: {
+        intersect: false
+      },
+      scales: {
+        xAxes: [
+          {
+            display: false,
+            type: 'time',
+            gridLines: {
+              display: false
+            },
+            time: {
+              tooltipFormat: 'DD/MM/YYYY - HH:mm:ss'
+            }
+          }
+        ],
+        yAxes: [
+          {
+            afterFit: (scaleInstance: any) => (scaleInstance.width = 100),
+            gridLines: {
+              display: false
+            },
+            ticks: {
+              beginAtZero: true,
+              maxTicksLimit: 4,
+              callback: (value: any) => {
+                if (value === 0) {
+                  return null;
+                }
+                return this.convertUnits(value);
+              }
+            }
+          }
+        ]
+      },
+      plugins: {
+        borderArea: true,
+        chartAreaBorder: {
+          borderColor: this.cssHelper.propertyValue('chart-color-slight-dark-gray'),
+          borderWidth: 1
+        }
+      }
+    };
+  }
 
   ngOnChanges(): void {
     this.updateChartData();