NAS-129855: Update default widgets layout (#10577)

truenas · Aug 29, 2024 · 45ae3cb · 45ae3cb
1 parent 044e136
commit 45ae3cb
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 98 deletions.
diff --git a/src/app/pages/dashboard/services/default-widgets.constant.ts b/src/app/pages/dashboard/services/default-widgets.constant.ts
@@ -9,15 +9,17 @@ export const defaultWidgets: WidgetGroup[] = [
     ],
   },
   {
-    layout: WidgetGroupLayout.Full,
+    layout: WidgetGroupLayout.Halves,
     slots: [
-      { type: WidgetType.Help },
+      { type: WidgetType.CpuModelWidget },
+      { type: WidgetType.CpuUsageBar },
     ],
   },
   {
-    layout: WidgetGroupLayout.Full,
+    layout: WidgetGroupLayout.Halves,
     slots: [
-      { type: WidgetType.Cpu },
+      { type: WidgetType.CpuUsageRecent },
+      { type: WidgetType.CpuTemperatureBar },
     ],
   },
   {
@@ -35,13 +37,20 @@ export const defaultWidgets: WidgetGroup[] = [
   {
     layout: WidgetGroupLayout.Full,
     slots: [
+      { type: WidgetType.BackupTasks },
+    ],
+  },
+  {
+    layout: WidgetGroupLayout.Halves,
+    slots: [
+      { type: WidgetType.Ipv4Address },
       { type: WidgetType.Interface },
     ],
   },
   {
     layout: WidgetGroupLayout.Full,
     slots: [
-      { type: WidgetType.BackupTasks },
+      { type: WidgetType.Help },
     ],
   },
 ];
diff --git a/...pages/dashboard/widgets/network/widget-interface-ip/widget-interface-ip.component.spec.ts b/...pages/dashboard/widgets/network/widget-interface-ip/widget-interface-ip.component.spec.ts
@@ -5,6 +5,7 @@ import { NetworkInterfaceAliasType } from 'app/enums/network-interface.enum';
 import { WidgetResourcesService } from 'app/pages/dashboard/services/widget-resources.service';
 import { SlotSize } from 'app/pages/dashboard/types/widget.interface';
 import { WidgetDatapointComponent } from 'app/pages/dashboard/widgets/common/widget-datapoint/widget-datapoint.component';
+import { WidgetInterfaceIpSettings } from 'app/pages/dashboard/widgets/network/widget-interface-ip/widget-interface-ip.definition';
 import { WidgetInterfaceIpComponent } from './widget-interface-ip.component';
 
 describe('WidgetInterfaceIpComponent', () => {
@@ -49,55 +50,75 @@ describe('WidgetInterfaceIpComponent', () => {
     ],
   });
 
-  beforeEach(() => {
-    spectator = createComponent({
-      props: {
-        settings: {
-          interface: 'eth0',
+  describe('have settings', () => {
+    beforeEach(() => {
+      spectator = createComponent({
+        props: {
+          settings: {
+            interface: 'eth0',
+          },
+          size: SlotSize.Quarter,
         },
-        size: SlotSize.Quarter,
-      },
+      });
     });
-  });
 
-  it('renders IPv4 addresses for the selected network interface', () => {
-    const widget = spectator.query(MockComponent(WidgetDatapointComponent));
-    expect(widget).toBeTruthy();
-    expect(widget.text).toBe('192.168.1.1\n192.168.1.2');
-  });
+    it('renders IPv4 addresses for the selected network interface', () => {
+      const widget = spectator.query(MockComponent(WidgetDatapointComponent));
+      expect(widget).toBeTruthy();
+      expect(widget.text).toBe('192.168.1.1\n192.168.1.2');
+    });
 
-  it('renders IPv4 addresses for the selected network interface from state', () => {
-    spectator.setInput('settings', { interface: 'eth2' });
+    it('renders IPv4 addresses for the selected network interface from state', () => {
+      spectator.setInput('settings', { interface: 'eth2' });
 
-    const widget = spectator.query(MockComponent(WidgetDatapointComponent));
-    expect(widget).toBeTruthy();
-    expect(widget.text).toBe('192.168.1.10\n192.168.1.11');
-  });
+      const widget = spectator.query(MockComponent(WidgetDatapointComponent));
+      expect(widget).toBeTruthy();
+      expect(widget.text).toBe('192.168.1.10\n192.168.1.11');
+    });
+
+    it('renders IPv6 addresses for the selected network interface', () => {
+      spectator.setInput('settings', {
+        interface: 'eth1',
+        widgetName: 'IPv6 Address',
+      });
 
-  it('renders IPv6 addresses for the selected network interface', () => {
-    spectator.setInput('settings', {
-      interface: 'eth1',
-      widgetName: 'IPv6 Address',
+      const widget = spectator.query(MockComponent(WidgetDatapointComponent));
+      expect(widget).toBeTruthy();
+      expect(widget.text).toBe('fe80::1');
     });
 
-    const widget = spectator.query(MockComponent(WidgetDatapointComponent));
-    expect(widget).toBeTruthy();
-    expect(widget.text).toBe('fe80::1');
-  });
+    it('renders "interface not found" when selected interface is not available in interface data', () => {
+      spectator.setInput('settings', { interface: 'eth404' });
 
-  it('renders "interface not found" when selected interface is not available in interface data', () => {
-    spectator.setInput('settings', { interface: 'eth404' });
+      const widget = spectator.query(MockComponent(WidgetDatapointComponent));
+      expect(widget).toBeTruthy();
+      expect(widget.text).toBe('Network interface eth404 not found.');
+    });
+
+    it('renders N/A when an interface has no IPv4 addresses', () => {
+      spectator.setInput('settings', { interface: 'eth1' });
 
-    const widget = spectator.query(MockComponent(WidgetDatapointComponent));
-    expect(widget).toBeTruthy();
-    expect(widget.text).toBe('Network interface eth404 not found.');
+      const widget = spectator.query(MockComponent(WidgetDatapointComponent));
+      expect(widget).toBeTruthy();
+      expect(widget.text).toBe('N/A');
+    });
   });
 
-  it('renders N/A when an interface has no IPv4 addresses', () => {
-    spectator.setInput('settings', { interface: 'eth1' });
+  describe('have no settings', () => {
+    beforeEach(() => {
+      spectator = createComponent({
+        props: {
+          settings: {} as WidgetInterfaceIpSettings,
+          size: SlotSize.Quarter,
+        },
+      });
+    });
 
-    const widget = spectator.query(MockComponent(WidgetDatapointComponent));
-    expect(widget).toBeTruthy();
-    expect(widget.text).toBe('N/A');
+    it('renders IPv4 addresses for the first picked network interface', () => {
+      const widget = spectator.query(MockComponent(WidgetDatapointComponent));
+      expect(widget).toBeTruthy();
+      expect(widget.label).toBe('eth0 Address');
+      expect(widget.text).toBe('192.168.1.1\n192.168.1.2');
+    });
   });
 });
diff --git a/src/app/pages/dashboard/widgets/network/widget-interface-ip/widget-interface-ip.component.ts b/src/app/pages/dashboard/widgets/network/widget-interface-ip/widget-interface-ip.component.ts
@@ -23,21 +23,27 @@ export class WidgetInterfaceIpComponent implements WidgetComponent<WidgetInterfa
   size = input.required<SlotSize>();
   settings = input.required<WidgetInterfaceIpSettings>();
 
+  protected interfaceId = computed(() => {
+    if (this.settings()?.interface) {
+      return this.settings().interface;
+    }
+    return mapLoadedValue(this.interfaces(), (nics) => nics[0].name)?.value;
+  });
   protected interfaceType = computed(() => {
     return this.settings()?.widgetName?.includes('v6') ? NetworkInterfaceAliasType.Inet6 : NetworkInterfaceAliasType.Inet;
   });
 
   protected widgetName = computed(() => {
-    return this.translate.instant('{nic} Address', { nic: this.settings()?.interface }) || '';
+    return this.translate.instant('{nic} Address', { nic: this.interfaceId() }) || '';
   });
 
   protected ips = computed(() => {
-    const interfaceId = this.settings()?.interface || '';
+    const interfaceId = this.interfaceId();
 
     return mapLoadedValue(this.interfaces(), (interfaces) => this.getIp4Addresses(interfaces, interfaceId));
   });
 
-  private interfaces = toSignal(this.resources.networkInterfaces$, { initialValue: { isLoading: true } });
+  private interfaces = toSignal(this.resources.networkInterfaces$);
 
   constructor(
     private resources: WidgetResourcesService,
@@ -52,6 +58,7 @@ export class WidgetInterfaceIpComponent implements WidgetComponent<WidgetInterfa
       // TODO: Show as widget error.
       return this.translate.instant('Network interface {interface} not found.', { interface: interfaceId });
     }
+
     let networkInterfaceAlias = networkInterface.aliases;
     if (!networkInterfaceAlias.length && networkInterface?.state?.aliases?.length) {
       networkInterfaceAlias = networkInterface.state.aliases;