Merge remote-tracking branch 'origin' into ITC-3645

Author: Jan-Nox

src/app/app.routes.ts

@@ -44,6 +44,7 @@ import { mshypervModuleRoutes } from './modules/mshyperv_module/mshyperv_module.
 import { ciscoModuleRoutes } from './modules/cisco_module/cisco_module.routes';
 import { networkModuleRoutes } from './modules/network_module/network_module.routes';
 import { broadcomProxyModuleRoutes } from './modules/broadcomproxy_module/broadcomproxy_module.routes';
+import { nutanixModuleRoutes } from './modules/nutanix_module/nutanix_module.routes';
 
 @Component({
     selector: 'legacy-redirect',
@@ -109,6 +110,7 @@ const moduleRoutes: Routes = [
     ...mshypervModuleRoutes,
     ...ciscoModuleRoutes,
     ...broadcomProxyModuleRoutes,
+    ...nutanixModuleRoutes,
     ...networkModuleRoutes
 ];
 /***    Core routes   ***/

src/app/components/dynamical-form-fields/dynamical-form-fields.component.html

@@ -149,8 +149,35 @@
                 [(ngModel)]="ngModel"
                 (ngModelChange)="ngModelChange.emit($event)"
                 [ngModelOptions]="{standalone: true}"
-                [showClear]="false">
+                [showClear]="false"
+                oitcFormError [errors]="errors" errorField="{{formField['ngModel']}}">
             </oitc-select>
+            <oitc-form-feedback [errors]="errors"
+                                errorField="{{formField['ngModel']}}"></oitc-form-feedback>
+            <div class="help-block small" *ngIf="formField['help']">
+                {{ formField['help'] }}
+            </div>
+        </div>
+        <!-- MULTI SELECT FIELDS -->
+        <div *ngIf="formField['type'] === 'multiselect'" class="mb-3">
+            {{ formField['label'] }}
+            @if (formField['required']) {
+                <oitc-required-icon></oitc-required-icon>
+            }
+            <oitc-multi-select
+                [attr.id]="formField['ngModel']"
+                [name]="name"
+                optionValue="key"
+                optionLabel="value"
+                [options]="formField['options']"
+                [(ngModel)]="ngModel"
+                (ngModelChange)="ngModelChange.emit($event)"
+                [ngModelOptions]="{standalone: true}"
+                [showClear]="false"
+                oitcFormError [errors]="errors" errorField="{{formField['ngModel']}}">
+            </oitc-multi-select>
+            <oitc-form-feedback [errors]="errors"
+                                errorField="{{formField['ngModel']}}"></oitc-form-feedback>
             <div class="help-block small" *ngIf="formField['help']">
                 {{ formField['help'] }}
             </div>

src/app/components/dynamical-form-fields/dynamical-form-fields.component.ts

@@ -28,6 +28,7 @@ import { TranslocoDirective } from '@jsverse/transloco';
 import { NgSelectComponent } from '@ng-select/ng-select';
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SelectComponent } from '../../layouts/primeng/select/select/select.component';
+import { MultiSelectComponent } from '../../layouts/primeng/multi-select/multi-select/multi-select.component';
 
 @Component({
     selector: 'oitc-dynamical-form-fields',
@@ -47,7 +48,8 @@ import { SelectComponent } from '../../layouts/primeng/select/select/select.comp
         TranslocoDirective,
         NgSelectComponent,
         SelectComponent,
-        FormsModule
+        FormsModule,
+        MultiSelectComponent
     ],
     templateUrl: './dynamical-form-fields.component.html',
     styleUrl: './dynamical-form-fields.component.css',

src/app/layouts/coreui/form-error.directive.ts

@@ -2,6 +2,14 @@ import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
 import { ValidationErrors } from '@angular/forms';
 import _ from 'lodash';
 
+
+// In case that the error directive is not working as expected
+// and is not adding the 'is-invalid' class to the host element,
+// please (and yes this sounds stupid) make sure that the
+// "FormControlDirective" is loaded before the "FormErrorDirective" directive
+// in the imports[] array of your component or module.
+// See: https://github.com/openITCOCKPIT/openITCOCKPIT-frontend-angular/commit/c91c1d58a1ef9ca40b8c71b8ad632ec5615d66f7
+// for an example
 @Directive({
     selector: '[oitcFormError]',
     standalone: true

src/app/layouts/primeng/multi-select/multi-select/multi-select.component.ts

@@ -58,7 +58,7 @@ export class MultiSelectComponent implements ControlValueAccessor, OnInit, OnDes
      */
     private _options: any[] | undefined;
     @Input()
-    set options(value: any[]) {
+    set options(value: any[] | undefined) {
         this._options = value;
         this.onOptionsChanged();
     }

src/app/modules/autoreport_module/pages/autoreports/autoreport-add-step-one/autoreport-add-step-one.component.html

@@ -6,7 +6,6 @@ import { Router, RouterLink } from '@angular/router';
 import {
     BadgeComponent,
     ButtonDirective,
-    CalloutComponent,
     CardBodyComponent,
     CardComponent,
     CardHeaderComponent,
@@ -33,18 +32,18 @@ import { AutoreportsService } from '../autoreports.service';
 import { AutoreportPost, CalendarParams, getDefaultCalendarParams, getDefaultPost } from '../autoreports.interface';
 import { FormErrorDirective } from '../../../../../layouts/coreui/form-error.directive';
 import { FormFeedbackComponent } from '../../../../../layouts/coreui/form-feedback/form-feedback.component';
-import { formatDate, NgIf } from '@angular/common';
+import { formatDate, NgClass } from '@angular/common';
 import { RequiredIconComponent } from '../../../../../components/required-icon/required-icon.component';
 import { SelectComponent } from '../../../../../layouts/primeng/select/select/select.component';
 import { GenericResponseWrapper, GenericValidationError } from '../../../../../generic-responses';
 import { TrueFalseDirective } from '../../../../../directives/true-false.directive';
 import { TimeperiodsService } from '../../../../../pages/timeperiods/timeperiods.service';
 import { UsersService } from '../../../../../pages/users/users.service';
 import { LabelLinkComponent } from '../../../../../layouts/coreui/label-link/label-link.component';
-import { DebounceDirective } from '../../../../../directives/debounce.directive';
 import { MultiSelectComponent } from '../../../../../layouts/primeng/multi-select/multi-select/multi-select.component';
 import { NotyService } from '../../../../../layouts/coreui/noty.service';
 import { ContainersService } from '../../../../../pages/containers/containers.service';
+import { XsButtonDirective } from '../../../../../layouts/coreui/xsbutton-directive/xsbutton.directive';
 
 @Component({
     selector: 'oitc-autoreport-add-step-one',
@@ -63,28 +62,28 @@ import { ContainersService } from '../../../../../pages/containers/containers.se
         BadgeComponent,
         RowComponent,
         ColComponent,
-        FormErrorDirective,
         FormFeedbackComponent,
         FormLabelDirective,
-        NgIf,
         RequiredIconComponent,
         SelectComponent,
         FormControlDirective,
+        FormErrorDirective,
         FormCheckComponent,
         FormCheckInputDirective,
         FormCheckLabelDirective,
         TrueFalseDirective,
         LabelLinkComponent,
-        CalloutComponent,
         InputGroupComponent,
         InputGroupTextDirective,
         DropdownComponent,
         ButtonDirective,
         DropdownToggleDirective,
         DropdownMenuDirective,
         DropdownItemDirective,
-        DebounceDirective,
         MultiSelectComponent,
+        XsButtonDirective,
+        NgClass,
+
     ],
     templateUrl: './autoreport-add-step-one.component.html',
     styleUrl: './../../../assets/autoreport.css', //'./autoreport-add-step-one.component.css',
@@ -126,9 +125,9 @@ export class AutoreportAddStepOneComponent implements OnInit, OnDestroy {
         {key: 'WEEK', value: this.TranslocoService.translate('weekly')},
         {key: 'DAY', value: this.TranslocoService.translate('daily')}
     ];
-    public graphoptions: SelectKeyValue[] = [
-        {key: 0, value: this.TranslocoService.translate('in %')},
-        {key: 1, value: this.TranslocoService.translate('in h')}
+    public graphoptions: SelectKeyValueString[] = [
+        {key: '0', value: this.TranslocoService.translate('in %')},
+        {key: '1', value: this.TranslocoService.translate('in h')}
     ];
     public checkstates: SelectKeyValue[] = [
         {key: 0, value: this.TranslocoService.translate('soft and hard state')},
@@ -144,48 +143,56 @@ export class AutoreportAddStepOneComponent implements OnInit, OnDestroy {
         this.subscriptions.unsubscribe();
     }
 
-    private loadContainers() {
-        this.subscriptions.add(this.ContainersService.loadAllContainers().subscribe((result) => {
-            this.containers = result;
-            this.cdr.markForCheck();
-        }));
-    }
-
     public onContainerChange() {
         this.loadTimeperiods();
         this.loadCalendars();
         this.loadUsers();
         this.cdr.markForCheck();
     }
 
-    public onAvailabilityChange($event: boolean) {
-        if (!$event) {
+    public onAvailabilityChange() {
+        if (!this.post) {
+            return;
+        }
+        if (!this.setMinAvailability) {
             this.post.Autoreport.min_availability = null;
         }
     }
 
-    public onOutageChange($event: boolean) {
-        if (!$event) {
+    public onOutageChange() {
+        if (!this.post) {
+            return;
+        }
+        if (!this.setMaxNumberOfOutages) {
             this.post.Autoreport.max_number_of_outages = null;
             this.cdr.markForCheck();
         }
     }
 
-    public onHolidayChange($event: any) {
-        if ($event === 0 && this.post.Autoreport.calendar_id !== 0) {
-            this.post.Autoreport.calendar_id = 0;
+    public onHolidayChange() {
+        if (!this.post) {
+            return;
+        }
+        if (this.post.Autoreport.consider_holidays === 0 && this.post.Autoreport.calendar_id !== 0) {
+            this.post.Autoreport.calendar_id = null;
             this.cdr.markForCheck();
         }
     }
 
-    public onStartChange($event: any) {
-        if ($event === 0) {
+    public onStartChange() {
+        if (!this.post) {
+            return;
+        }
+        if (this.post.Autoreport.use_start_time === 0) {
             this.post.Autoreport.report_start_date = null;
             this.cdr.markForCheck();
         }
     }
 
     private loadTimeperiods() {
+        if (!this.post) {
+            return;
+        }
         if (this.post.Autoreport.container_id === 0) {
             return;
         }
@@ -196,6 +203,9 @@ export class AutoreportAddStepOneComponent implements OnInit, OnDestroy {
     }
 
     private loadCalendars() {
+        if (!this.post) {
+            return;
+        }
         if (this.post.Autoreport.container_id === 0) {
             return;
         }
@@ -207,6 +217,9 @@ export class AutoreportAddStepOneComponent implements OnInit, OnDestroy {
     }
 
     private loadUsers() {
+        if (!this.post) {
+            return;
+        }
         if (this.post.Autoreport.container_id === 0) {
             return;
         }
@@ -216,6 +229,13 @@ export class AutoreportAddStepOneComponent implements OnInit, OnDestroy {
         }));
     }
 
+    private loadContainers() {
+        this.subscriptions.add(this.ContainersService.loadAllContainers().subscribe((result) => {
+            this.containers = result;
+            this.cdr.markForCheck();
+        }));
+    }
+
     public submitStepOne() {
         this.errors = null;
         if (this.post.Autoreport.report_start_date !== null) {