NAS-129856 / 24.10 / Add divider to logout option (#10269)

src/app/core/testing/mock-enclosure/enclosure-templates/utils/disk.utils.ts

@@ -1,6 +1,7 @@
 import { TiB } from 'app/constants/bytes.constant';
 import { countSlots, mapSlots } from 'app/core/testing/mock-enclosure/enclosure-templates/utils/slots.utils';
 import { DiskType } from 'app/enums/disk-type.enum';
+import { EnclosureStatus } from 'app/enums/enclosure-slot-status.enum';
 import { DashboardEnclosure, DashboardEnclosureSlot } from 'app/interfaces/enclosure.interface';
 
 export function addDisksToSlots(enclosures: DashboardEnclosure[], percentageToAdd: number): DashboardEnclosure[] {
@@ -18,7 +19,7 @@ export function addDisksToSlots(enclosures: DashboardEnclosure[], percentageToAd
 function addDisk(slot: DashboardEnclosureSlot, i: number): DashboardEnclosureSlot {
   return {
     ...slot,
-    status: 'OK',
+    status: EnclosureStatus.Ok,
     type: DiskType.Hdd,
     dev: generateDiskName(i),
     size: 10 * TiB,

src/app/core/testing/mock-enclosure/enclosure-templates/utils/make-array-device-slots.utils.ts

@@ -1,4 +1,5 @@
 import { keyBy, range } from 'lodash';
+import { EnclosureStatus } from 'app/enums/enclosure-slot-status.enum';
 import { DashboardEnclosureSlot } from 'app/interfaces/enclosure.interface';
 
 export function makeArrayDeviceSlots(
@@ -16,7 +17,7 @@ export function makeArrayDeviceSlots(
     return {
       drive_bay_number: slot,
       descriptor: `slot${slot.toString().padStart(2, '0')}`,
-      status: 'Not installed',
+      status: EnclosureStatus.Ok,
       dev: null,
       supports_identify_light: options.supportsIdentifyLight ?? false,
       size: null,

src/app/interfaces/enclosure.interface.ts

@@ -73,8 +73,7 @@ export interface DashboardEnclosureSlot {
    */
   drive_bay_number?: number;
   descriptor: string;
-  // TODO: Introduce enum
-  status: string;
+  status: EnclosureStatus;
   dev: string;
   supports_identify_light?: boolean;
   size?: number;

src/app/modules/ix-icon/ix-icon.constants.ts

@@ -6,33 +6,33 @@
   * as it conflicts with our application CSS.
  */
 export const ixSvgIcons = {
-  dataset_root: 'assets/customicons/dataset_root.svg',
   dataset: 'assets/customicons/dataset.svg',
+  dataset_root: 'assets/customicons/dataset_root.svg',
   enclosure: 'assets/customicons/enclosure.svg',
   ha_disabled: 'assets/customicons/ha_disabled.svg',
   ha_enabled: 'assets/customicons/ha_enabled.svg',
   ha_reconnecting: 'assets/customicons/ha_reconnecting.svg',
-  hdd_mirror: 'assets/customicons/ix-hdd-mirror.svg',
   hdd: 'assets/customicons/ix-hdd.svg',
+  hdd_mirror: 'assets/customicons/ix-hdd-mirror.svg',
   layout_full: 'assets/customicons/layout-100.svg',
   layout_half_and_quarters: 'assets/customicons/layout-50-on-top.svg',
   layout_halves: 'assets/customicons/layout-50-50.svg',
-  layout_quarters_and_half: 'assets/customicons/layout-50-on-bottom.svg',
   layout_quarters: 'assets/customicons/layout-4x25.svg',
-  logo_full_rgb: 'assets/customicons/ix_full_logo_rgb.svg',
+  layout_quarters_and_half: 'assets/customicons/layout-50-on-bottom.svg',
   logo_full: 'assets/customicons/ix_full_logo.svg',
-  logo_mark_rgb: 'assets/customicons/ix_logomark_rgb.svg',
+  logo_full_rgb: 'assets/customicons/ix_full_logo_rgb.svg',
   logo_mark: 'assets/customicons/ix_logomark.svg',
+  logo_mark_rgb: 'assets/customicons/ix_logomark_rgb.svg',
   logo_truecommand_blue: 'assets/images/truecommand/truecommand-logo-mark-full-color-rgb.svg',
   logo_truecommand_white: 'assets/images/truecommand/truecommand-logo-mark-white-rgb.svg',
   logo_truenas_scale_full: 'assets/customicons/truenas_scale_logo_full.svg',
-  logo_truenas_scale_mark_color: 'assets/customicons/truenas_scale_logomark_rgb.svg',
   logo_truenas_scale_mark: 'assets/customicons/truenas_scale_logomark.svg',
-  logo_truenas_scale_type_color: 'assets/customicons/truenas_scale_logotype_rgb.svg',
+  logo_truenas_scale_mark_color: 'assets/customicons/truenas_scale_logomark_rgb.svg',
   logo_truenas_scale_type: 'assets/customicons/truenas_scale_logotype.svg',
-  network_upload_download_disabled: 'assets/customicons/network-upload-download-disabled.svg',
+  logo_truenas_scale_type_color: 'assets/customicons/truenas_scale_logotype_rgb.svg',
   network_upload_download: 'assets/customicons/network-upload-download.svg',
-  ssd_mirror: 'assets/customicons/ix-ssd-mirror.svg',
+  network_upload_download_disabled: 'assets/customicons/network-upload-download-disabled.svg',
   ssd: 'assets/customicons/ix-ssd.svg',
+  ssd_mirror: 'assets/customicons/ix-ssd-mirror.svg',
   two_factor_auth: 'assets/customicons/2fa.svg',
 };

src/app/modules/layout/components/topbar/user-menu/user-menu.component.html

@@ -71,6 +71,9 @@
       {{ 'About' | translate }}
     </button>
 
+    <!-- Inline styles because mat-menu contents are rendered outside of the component -->
+    <mat-divider style="margin: 5px 0;"></mat-divider>
+
     <button
       name="power-log-out"
       mat-menu-item

src/app/modules/layout/components/topbar/user-menu/user-menu.component.scss

@@ -13,7 +13,6 @@
   .username {
     -webkit-box-orient: vertical;
     cursor: pointer;
-    display: inline-box;
     font-size: 14px;
     -webkit-line-clamp: 1;
     margin-right: 0.5rem;

src/app/pages/system/enclosure/components/pages/enclosure-page/enclosure-view/disks-overview/disks-overview-details/disks-overview-details.component.scss

@@ -1,7 +1,7 @@
 .details-grid {
   display: grid;
   gap: 5px;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
 
   .detail {
     margin: 8px 0;

src/app/pages/system/enclosure/components/pages/enclosure-page/enclosure-view/enclosure-view.component.ts

@@ -4,6 +4,7 @@ import {
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Store } from '@ngrx/store';
 import { filter, map } from 'rxjs';
+import { EnclosureStatus } from 'app/enums/enclosure-slot-status.enum';
 import { DashboardEnclosure, DashboardEnclosureSlot } from 'app/interfaces/enclosure.interface';
 import {
   TintingFunction,
@@ -53,7 +54,7 @@ export class EnclosureViewComponent {
 
   private diskStatusTint(): TintingFunction {
     return (slot: DashboardEnclosureSlot) => {
-      return slot?.status === 'OK' ? 'green' : 'red';
+      return slot?.status === EnclosureStatus.Ok ? 'green' : 'red';
     };
   }
 

src/app/pages/system/enclosure/components/pages/mini-page/mini-disks-overview/mini-disks-overview.component.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy, Component, computed, input,
 } from '@angular/core';
 import { chain } from 'lodash';
+import { EnclosureStatus } from 'app/enums/enclosure-slot-status.enum';
 import { DashboardEnclosureSlot } from 'app/interfaces/enclosure.interface';
 
 @Component({
@@ -27,6 +28,6 @@ export class MiniDisksOverviewComponent {
   });
 
   protected readonly failedDisks = computed(() => {
-    return this.slots().filter((slot) => slot.status !== 'OK').length;
+    return this.slots().filter((slot) => slot.status !== EnclosureStatus.Ok).length;
   });
 }

src/app/pages/system/enclosure/components/pages/mini-page/mini-enclosure/mini-enclosure.component.spec.ts

@@ -2,7 +2,7 @@ import {
   ChangeDetectionStrategy, Component, input, model,
 } from '@angular/core';
 import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
-import { EnclosureElementType } from 'app/enums/enclosure-slot-status.enum';
+import { EnclosureElementType, EnclosureStatus } from 'app/enums/enclosure-slot-status.enum';
 import {
   DashboardEnclosure,
   DashboardEnclosureElements,
@@ -35,17 +35,17 @@ describe('MiniEnclosureComponent', () => {
       [EnclosureElementType.ArrayDeviceSlot]: {
         1: {
           dev: 'ada1',
-          status: 'OK',
+          status: EnclosureStatus.Ok,
           is_front: true,
         } as DashboardEnclosureSlot,
         2: {
           dev: 'ada2',
-          status: 'ERROR',
+          status: EnclosureStatus.Crit,
           is_front: true,
         } as DashboardEnclosureSlot,
         3: {
           dev: null,
-          status: 'OK',
+          status: EnclosureStatus.Ok,
           is_front: true,
         } as DashboardEnclosureSlot,
       },