Merge pull request #6323 from truenas/NAS-114413

NAS-114413 / None / NAS-114413: Porting angelfish changes

src/app/modules/entity/entity-table/entity-table.component.ts

@@ -720,6 +720,19 @@ export class EntityTableComponent<Row = any> implements OnInit, AfterViewInit, A
     return res;
   }
 
+  patchCurrentRows<T>(
+    rowSelector: (row: T) => boolean,
+    rowMutator: (row: T) => T,
+  ): void {
+    this.currentRows = this.currentRows.map((row) => {
+      if (rowSelector(row)) {
+        return rowMutator(row) || row;
+      }
+      return row;
+    });
+    this.dataSourceStreamer$.next(this.currentRows);
+  }
+
   isLeftStickyColumnNo(i: number): boolean {
     return i === (this.currentColumns[0].prop === 'multiselect' ? 1 : 0);
   }

src/app/pages/common/info-dialog/info-dialog.component.html

 <h1 mat-dialog-title>
   <mat-icon class="information-icon">{{icon}}</mat-icon>
-  {{ title | translate }}
+  <span [innerHTML]="title | translate"></span>
 </h1>
 <div mat-dialog-content>
   <div *ngIf="!isHtml" class="info-panel">

src/app/pages/common/ix-forms/components/ix-slide-toggle/ix-slide-toggle.component.html

+<mat-slide-toggle
+  color="primary"
+  [checked]="value"
+  [required]="required"
+  [disabled]="isDisabled"
+  (change)="onSlideToggleChanged($event)"
+  (blur)="onTouch()"
+>
+  {{ label }}
+  <span *ngIf="required" class="required">*</span>
+</mat-slide-toggle>
+<tooltip *ngIf="tooltip" [header]="label" class="tooltip" [message]="tooltip"></tooltip>
+<ix-errors [control]="controlDirective.control" [label]="label"></ix-errors>

src/app/pages/common/ix-forms/components/ix-slide-toggle/ix-slide-toggle.component.scss

+:host {
+  display: block;
+  font-size: 12px;
+  margin-bottom: 19px;
+  margin-top: 12px;
+
+  mat-slide-toggle {
+    margin: 4px 4px 4px 0;
+  }
+}

src/app/pages/common/ix-forms/components/ix-slide-toggle/ix-slide-toggle.component.ts

+import {
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input,
+} from '@angular/core';
+import {
+  ControlValueAccessor, NgControl,
+} from '@angular/forms';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { UntilDestroy } from '@ngneat/until-destroy';
+
+@UntilDestroy()
+@Component({
+  selector: 'ix-slide-toggle',
+  styleUrls: ['./ix-slide-toggle.component.scss'],
+  templateUrl: './ix-slide-toggle.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IxSlideToggleComponent implements ControlValueAccessor {
+  @Input() label: string;
+  @Input() hint: string;
+  @Input() tooltip: string;
+  @Input() required: boolean;
+
+  isDisabled = false;
+  value: boolean;
+
+  constructor(
+    public controlDirective: NgControl,
+    private cdr: ChangeDetectorRef,
+  ) {
+    this.controlDirective.valueAccessor = this;
+  }
+
+  onChange: (value: boolean) => void = (): void => {};
+  onTouch: () => void = (): void => {};
+
+  writeValue(value: boolean): void {
+    this.value = value;
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(onChange: (value: boolean) => void): void {
+    this.onChange = onChange;
+  }
+
+  registerOnTouched(onTouched: () => void): void {
+    this.onTouch = onTouched;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  onSlideToggleChanged(event: MatSlideToggleChange): void {
+    this.value = event.checked;
+    this.onChange(event.checked);
+  }
+}

src/app/pages/common/ix-forms/components/ix-slide-toggle/ix-slide-toggle.harness.ts

+import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+import { MatSlideToggleHarness } from '@angular/material/slide-toggle/testing';
+import { IxFormControlHarness } from 'app/pages/common/ix-forms/interfaces/ix-form-control-harness.interface';
+
+export interface IxSlideToggleHarnessFilters extends BaseHarnessFilters {
+  label: string;
+}
+
+export class IxSlideToggleHarness extends ComponentHarness implements IxFormControlHarness {
+  static hostSelector = 'ix-slide-toggle';
+
+  static with(options: IxSlideToggleHarnessFilters): HarnessPredicate<IxSlideToggleHarness> {
+    return new HarnessPredicate(IxSlideToggleHarness, options)
+      .addOption('label', options.label,
+        (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label));
+  }
+
+  getMatSlideToggleHarness = this.locatorFor(MatSlideToggleHarness);
+
+  async getLabelText(): Promise<string> {
+    const label = await this.locatorFor('label')();
+    return label.text({ exclude: '.required' });
+  }
+
+  async getErrorText(): Promise<string> {
+    const label = await this.locatorForOptional('ix-errors')();
+    return label?.text() || '';
+  }
+
+  async getValue(): Promise<boolean> {
+    return (await this.getMatSlideToggleHarness()).isChecked();
+  }
+
+  async setValue(value: boolean): Promise<void> {
+    const matSlideToggleHarness = await this.getMatSlideToggleHarness();
+    if (value) {
+      return matSlideToggleHarness.check();
+    }
+
+    return matSlideToggleHarness.uncheck();
+  }
+
+  async isDisabled(): Promise<boolean> {
+    return (await this.getMatSlideToggleHarness()).isDisabled();
+  }
+}

src/app/pages/reports-dashboard/components/line-chart/line-chart.component.ts

@@ -35,6 +35,7 @@ export class LineChartComponent extends ViewComponent implements AfterViewInit,
   get data(): ReportingData {
     return this._data;
   }
+  @Input() isReversed = false;
   @Input() report: Report;
   @Input() title: string;
   @Input() timezone: string;
@@ -87,15 +88,12 @@ export class LineChartComponent extends ViewComponent implements AfterViewInit,
 
   // dygraph renderer
   renderGraph(update?: boolean): void {
-    if (this.data.name == 'cpu') {
+    if (this.isReversed) {
       this.data.legend = this.data.legend.reverse();
-      for (let i = 0; i < this.data.data.length; i++) {
-        const newRow = [];
-        while (this.data.data[i].length) {
-          newRow.push(this.data.data[i].pop());
-        }
-        this.data.data[i] = newRow;
-      }
+      this.data.data.forEach((row, i) => this.data.data[i] = row.slice().reverse());
+      this.data.aggregations.min = this.data.aggregations.min.slice().reverse();
+      this.data.aggregations.max = this.data.aggregations.max.slice().reverse();
+      this.data.aggregations.mean = this.data.aggregations.mean.slice().reverse();
     }
 
     const data = this.makeTimeAxis(this.data);

src/app/pages/reports-dashboard/components/report/report.component.html

@@ -81,6 +81,7 @@
               [labelY]="report.vertical_label"
               type="line"
               [interactive]="false"
+              [isReversed]="isReversed"
             ></linechart>
           </div>
 

src/app/pages/reports-dashboard/components/report/report.component.ts

@@ -66,6 +66,7 @@ export class ReportComponent extends WidgetComponent implements AfterViewInit, O
   @Input() identifier?: string;
   // TODO: Make boolean
   @Input() retroLogo?: string | number;
+  @Input() isReversed?: boolean;
   @ViewChild(LineChartComponent, { static: false }) lineChart: LineChartComponent;
 
   data: ReportingData;

src/app/pages/reports-dashboard/reports-dashboard.component.html

@@ -15,8 +15,13 @@
         [retroLogo]="retroLogo"
         [report]="activeReports[key]"
         [identifier]="activeReports[key].identifiers[0]"
+        [isReversed]="isReportReversed(activeReports[key])"
+      ></report>
+      <report 
+        *ngIf="activeReports[key].identifiers.length == 0"
+        [report]="activeReports[key]"
+        [isReversed]="isReportReversed(activeReports[key])"
       ></report>
-      <report *ngIf="activeReports[key].identifiers.length == 0" [report]="activeReports[key]"></report>
     </div>
     <div class="bottom-spacer"></div>
   </cdk-virtual-scroll-viewport>

src/app/pages/reports-dashboard/reports-dashboard.component.ts

@@ -452,6 +452,10 @@ export class ReportsDashboardComponent implements OnInit, OnDestroy, /* HandleCh
     });
   }
 
+  isReportReversed(report: Report): boolean {
+    return report.name == 'cpu';
+  }
+
   showConfigForm(): void {
     const formComponent = this.modalService.openInSlideIn(ReportsConfigComponent);
     formComponent.title = this.translate.instant('Reports Configuration');

src/app/pages/vm/devices/device-edit/device-edit.component.html

@@ -25,7 +25,7 @@
                 <div dynamicField [config]="diskField" [group]="diskFormGroup"></div>
               </div>
             </div>
-            <div *ngSwitch="VmDeviceType.Raw" fxFlex="100%" fxFlex.gt-xs="calc(100% - 16px)" class="form-line">
+            <div *ngSwitchCase="VmDeviceType.Raw" fxFlex="100%" fxFlex.gt-xs="calc(100% - 16px)" class="form-line">
               <div *ngFor="let rawfileField of fieldSet.rawfileFieldConfig;">
                 <div dynamicField [config]="rawfileField" [group]="rawfileFormGroup"></div>
               </div>

src/app/pages/vm/vm-list/vm-list.component.ts

@@ -26,10 +26,9 @@ import { EntityTableAction, EntityTableConfig } from 'app/modules/entity/entity-
 import { EntityUtils } from 'app/modules/entity/utils';
 import { VirtualMachineRow } from 'app/pages/vm/vm-list/virtual-machine-row.interface';
 import {
-  WebSocketService, StorageService, AppLoaderService, DialogService, VmService, NetworkService, SystemGeneralService,
+  WebSocketService, StorageService, AppLoaderService, DialogService, VmService,
 } from 'app/services';
 import { ModalService } from 'app/services/modal.service';
-import { PreferencesService } from 'app/services/preferences.service';
 import { VmWizardComponent } from '../vm-wizard/vm-wizard.component';
 
 @UntilDestroy()
@@ -100,11 +99,7 @@ export class VmListComponent implements EntityTableConfig<VirtualMachineRow>, On
     private http: HttpClient,
     private modalService: ModalService,
     private vmService: VmService,
-    private networkService: NetworkService,
-    private messageService: MessageService,
-    private prefService: PreferencesService,
     private translate: TranslateService,
-    private systemGeneralService: SystemGeneralService,
   ) {
     if (this.productType !== ProductType.Scale) {
       // TODO: Check if it can be removed
@@ -142,16 +137,21 @@ export class VmListComponent implements EntityTableConfig<VirtualMachineRow>, On
     });
 
     this.ws.subscribe('vm.query').pipe(untilDestroyed(this)).subscribe((event) => {
-      const changedRow = this.entityList.rows.find((o) => o.id === event.id);
-      if (event.fields.status.state === ServiceStatus.Running) {
-        changedRow.state = ServiceStatus.Running;
-        changedRow.status.state = event.fields.status.state;
-        changedRow.status.domain_state = event.fields.status.domain_state;
-      } else {
-        changedRow.state = ServiceStatus.Stopped;
-        changedRow.status.state = event.fields.status.state;
-        changedRow.status.domain_state = event.fields.status.domain_state;
-      }
+      entityList.patchCurrentRows(
+        (row: VirtualMachineRow) => row.id === event.id,
+        (changedRow) => {
+          if (event.fields.status.state === ServiceStatus.Running) {
+            changedRow.state = ServiceStatus.Running;
+            changedRow.status.state = event.fields.status.state;
+            changedRow.status.domain_state = event.fields.status.domain_state;
+          } else {
+            changedRow.state = ServiceStatus.Stopped;
+            changedRow.status.state = event.fields.status.state;
+            changedRow.status.domain_state = event.fields.status.domain_state;
+          }
+          return changedRow;
+        },
+      );
     });
   }
 
@@ -277,7 +277,7 @@ export class VmListComponent implements EntityTableConfig<VirtualMachineRow>, On
   }
 
   doRowAction(row: VirtualMachineRow, method: ApiMethod, params: any[] = [row.id], updateTable = false): void {
-    if (method === 'vm.stop') {
+    if (method === this.wsMethods.stop) {
       this.dialogRef = this.dialog.open(EntityJobComponent,
         { data: { title: this.translate.instant('Stopping {rowName}', { rowName: row.name }) } });
       this.dialogRef.componentInstance.setCall(method, [params[0], params[1]]);
@@ -557,7 +557,7 @@ export class VmListComponent implements EntityTableConfig<VirtualMachineRow>, On
     {
       id: 'SERIAL',
       icon: 'keyboard_arrow_right',
-      label: this.translate.instant('Serial'),
+      label: this.translate.instant('Serial Shell'),
       onClick: (vm: VirtualMachineRow) => {
         this.router.navigate(new Array('').concat(['vm', 'serial', String(vm.id)]));
       },

src/assets/i18n/af.json

@@ -3070,6 +3070,7 @@
   "Serial Number": "",
   "Serial Number:": "",
   "Serial Port": "",
+  "Serial Shell": "",
   "Serial Speed": "",
   "Serial number for this disk.": "",
   "Serial numbers of each disk being edited.": "",

src/assets/i18n/ar.json

@@ -3070,6 +3070,7 @@
   "Serial Number": "",
   "Serial Number:": "",
   "Serial Port": "",
+  "Serial Shell": "",
   "Serial Speed": "",
   "Serial number for this disk.": "",
   "Serial numbers of each disk being edited.": "",

src/assets/i18n/ast.json

@@ -3070,6 +3070,7 @@
   "Serial Number": "",
   "Serial Number:": "",
   "Serial Port": "",
+  "Serial Shell": "",
   "Serial Speed": "",
   "Serial number for this disk.": "",
   "Serial numbers of each disk being edited.": "",

src/assets/i18n/az.json

@@ -3070,6 +3070,7 @@
   "Serial Number": "",
   "Serial Number:": "",
   "Serial Port": "",
+  "Serial Shell": "",
   "Serial Speed": "",
   "Serial number for this disk.": "",
   "Serial numbers of each disk being edited.": "",

src/assets/i18n/be.json

@@ -3070,6 +3070,7 @@
   "Serial Number": "",
   "Serial Number:": "",
   "Serial Port": "",
+  "Serial Shell": "",
   "Serial Speed": "",
   "Serial number for this disk.": "",
   "Serial numbers of each disk being edited.": "",

src/assets/i18n/bg.json

@@ -3070,6 +3070,7 @@
   "Serial Number": "",
   "Serial Number:": "",
   "Serial Port": "",
+  "Serial Shell": "",
   "Serial Speed": "",
   "Serial number for this disk.": "",
   "Serial numbers of each disk being edited.": "",

src/assets/i18n/bn.json

@@ -3070,6 +3070,7 @@
   "Serial Number": "",
   "Serial Number:": "",
   "Serial Port": "",
+  "Serial Shell": "",
   "Serial Speed": "",
   "Serial number for this disk.": "",
   "Serial numbers of each disk being edited.": "",