NAS-130566 / 25.04 / Update data-test tag for show-more button (#10437)

* NAS-130552: Pick first network interface when no settings * NAS-130566: Update data-test tag for view all buttons * NAS-130566: Make ixTestOverride required for show-more component * NAS-130566: Update tests
truenas · Aug 14, 2024 · aca8f9d · aca8f9d
1 parent 5fc4213
commit aca8f9d
Show file tree

Hide file tree

Showing 107 changed files with 150 additions and 288 deletions.
diff --git a/...ules/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.component.html b/...ules/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.component.html
@@ -1,14 +1,14 @@
 @if (collapsible && !expanded()) {
   <button
     mat-stroked-button
-    ixTest="show-more"
+    [ixTest]="dataTest('show-more')"
     (click)="showMore()"
   >{{ 'View All' | translate }}</button>
 }
 @if (collapsible && expanded()) {
   <button
     mat-stroked-button
-    ixTest="show-less"
+    [ixTest]="dataTest('show-less')"
     (click)="showLess()"
   >{{ 'Collapse' | translate }}</button>
 }

diff --git a/...s/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.component.spec.ts b/...s/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.component.spec.ts
@@ -30,7 +30,7 @@ describe('IxTablePagerShowMoreComponent', () => {
   beforeEach(() => {
     const dataProvider = new ArrayDataProvider<TestTableData>();
     spectator = createComponent({
-      props: { dataProvider, pageSize: 2 },
+      props: { dataProvider, pageSize: 2, ixTestOverride: ['test'] },
     });
     spectator.component.dataProvider().setRows(testTableData);
     loader = TestbedHarnessEnvironment.loader(spectator.fixture);

diff --git a/...odules/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.component.ts b/...odules/ix-table/components/ix-table-pager-show-more/ix-table-pager-show-more.component.ts
@@ -19,6 +19,7 @@ export class IxTablePagerShowMoreComponent<T> implements OnInit, AfterContentChe
   dataProvider = input.required<DataProvider<T>>();
   pageSize = input(5);
   routerLink = input<string[]>([]);
+  ixTestOverride = input.required<string[]>();
 
   currentPage = signal(1);
   totalItems = signal(0);
@@ -37,6 +38,10 @@ export class IxTablePagerShowMoreComponent<T> implements OnInit, AfterContentChe
     private router: Router,
   ) {}
 
+  dataTest(key: string): string[] {
+    return [...this.ixTestOverride(), key];
+  }
+
   ngOnInit(): void {
     this.dataProvider().setPagination({
       pageNumber: this.currentPage(),

diff --git a/...edentials/backup-credentials/cloud-credentials-card/cloud-credentials-card.component.html b/...edentials/backup-credentials/cloud-credentials-card/cloud-credentials-card.component.html
@@ -32,6 +32,10 @@ <h3>{{ 'Cloud Credentials' | translate }}</h3>
         [isLoading]="dataProvider.isLoading$ | async"
       ></tbody>
     </ix-table>
-    <ix-table-pager-show-more [pageSize]="5" [dataProvider]="dataProvider"></ix-table-pager-show-more>
+    <ix-table-pager-show-more
+      [pageSize]="5"
+      [dataProvider]="dataProvider"
+      [ixTestOverride]="['cloud-credentials']"
+    ></ix-table-pager-show-more>
   </mat-card-content>
 </mat-card>
diff --git a/...ges/credentials/backup-credentials/ssh-connection-card/ssh-connection-card.component.html b/...ges/credentials/backup-credentials/ssh-connection-card/ssh-connection-card.component.html
@@ -32,6 +32,10 @@ <h3>{{ 'SSH Connections' | translate }}</h3>
         [isLoading]="dataProvider.isLoading$ | async"
       ></tbody>
     </ix-table>
-    <ix-table-pager-show-more [pageSize]="5" [dataProvider]="dataProvider"></ix-table-pager-show-more>
+    <ix-table-pager-show-more
+      [pageSize]="5"
+      [dataProvider]="dataProvider"
+      [ixTestOverride]="['ssh-connections']"
+    ></ix-table-pager-show-more>
   </mat-card-content>
 </mat-card>
diff --git a/...app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.html b/...app/pages/credentials/backup-credentials/ssh-keypair-card/ssh-keypair-card.component.html
@@ -32,6 +32,10 @@ <h3>{{ 'SSH Keypairs' | translate }}</h3>
         [isLoading]="dataProvider.isLoading$ | async"
       ></tbody>
     </ix-table>
-    <ix-table-pager-show-more [pageSize]="5" [dataProvider]="dataProvider"></ix-table-pager-show-more>
+    <ix-table-pager-show-more
+      [pageSize]="5"
+      [dataProvider]="dataProvider"
+      [ixTestOverride]="['ssh-keypairs']"
+    ></ix-table-pager-show-more>
   </mat-card-content>
 </mat-card>
diff --git a/.../certificates-dash/acme-dns-authenticator-list/acme-dns-authenticator-list.component.html b/.../certificates-dash/acme-dns-authenticator-list/acme-dns-authenticator-list.component.html
@@ -32,6 +32,10 @@ <h3>{{ 'ACME DNS-Authenticators' | translate }}</h3>
         [isLoading]="dataProvider.isLoading$ | async"
       ></tbody>
     </ix-table>
-    <ix-table-pager-show-more [pageSize]="4" [dataProvider]="dataProvider"></ix-table-pager-show-more>
+    <ix-table-pager-show-more
+      [pageSize]="4"
+      [dataProvider]="dataProvider"
+      [ixTestOverride]="['acme-dns']"
+    ></ix-table-pager-show-more>
   </mat-card-content>
 </mat-card>
diff --git a/...ls/certificates-dash/certificate-authority-list/certificate-authority-list.component.html b/...ls/certificates-dash/certificate-authority-list/certificate-authority-list.component.html
@@ -88,6 +88,10 @@ <h3>{{ 'Certificate Authorities' | translate }}</h3>
         </ng-template>
       </tbody>
     </ix-table>
-    <ix-table-pager-show-more [pageSize]="4" [dataProvider]="dataProvider"></ix-table-pager-show-more>
+    <ix-table-pager-show-more
+      [pageSize]="4"
+      [dataProvider]="dataProvider"
+      [ixTestOverride]="['certificate-authority']"
+    ></ix-table-pager-show-more>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/pages/credentials/certificates-dash/certificate-list/certificate-list.component.html b/src/app/pages/credentials/certificates-dash/certificate-list/certificate-list.component.html
@@ -80,6 +80,10 @@ <h3>{{ 'Certificates' | translate }}</h3>
         </ng-template>
       </tbody>
     </ix-table>
-    <ix-table-pager-show-more [pageSize]="4" [dataProvider]="dataProvider"></ix-table-pager-show-more>
+    <ix-table-pager-show-more
+      [pageSize]="4"
+      [dataProvider]="dataProvider"
+      [ixTestOverride]="['certificates']"
+    ></ix-table-pager-show-more>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/pages/credentials/certificates-dash/csr-list/csr-list.component.html b/src/app/pages/credentials/certificates-dash/csr-list/csr-list.component.html
@@ -64,6 +64,10 @@ <h3>{{ 'Certificate Signing Requests' | translate }}</h3>
         </ng-template>
       </tbody>
     </ix-table>
-    <ix-table-pager-show-more [pageSize]="4" [dataProvider]="dataProvider"></ix-table-pager-show-more>
+    <ix-table-pager-show-more
+      [pageSize]="4"
+      [dataProvider]="dataProvider"
+      [ixTestOverride]="['csr']"
+    ></ix-table-pager-show-more>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/pages/dashboard/widgets/network/widget-interface/widget-interface.component.html b/src/app/pages/dashboard/widgets/network/widget-interface/widget-interface.component.html
@@ -16,116 +16,106 @@ <h3>{{ 'Interface' | translate }}</h3>
       </div>
     }
 
-    @if (settings()?.interface) {
-      <div [class]="['container', size()]">
-        <div class="nic-info">
-          <div class="info-header">
-            <h3 *ixWithLoadingState="interface() as interface" class="info-header-title">{{ interface.name }}</h3>
-          </div>
-          <div class="info-body">
-            <div class="info-column primary">
-              @if (!isLoading()) {
-                <div class="info-list-item state">
-                  @if (isLinkStateUp()) {
-                    <span class="icon-wrapper up">
-                      <ix-icon name="check_circle" [matTooltip]="linkStateLabel()"></ix-icon>
-                    </span>
-                  } @else {
-                    <span class="icon-wrapper down">
-                      <ix-icon name="cancel" [matTooltip]="linkStateLabel()"></ix-icon>
-                    </span>
-                  }
-                  <span>{{ linkStateLabel() }}</span>
-                </div>
-              } @else {
-                <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
-              }
-              <div class="info-list-item traffic">
-                @if (!isLoading() && isFullSize()) {
-                  <span class="icon-wrapper">
-                    <ix-interface-status-icon [update]="interfaceUsage()"></ix-interface-status-icon>
+    <div [class]="['container', size()]">
+      <div class="nic-info">
+        <div class="info-header">
+          <h3 *ixWithLoadingState="interface() as interface" class="info-header-title">{{ interface.name }}</h3>
+        </div>
+        <div class="info-body">
+          <div class="info-column primary">
+            @if (!isLoading()) {
+              <div class="info-list-item state">
+                @if (isLinkStateUp()) {
+                  <span class="icon-wrapper up">
+                    <ix-icon name="check_circle" [matTooltip]="linkStateLabel()"></ix-icon>
                   </span>
-                }
-                <div class="in-out" [class.loading]="isLoading()">
-                  @if (!isLoading()) {
-                    <div class="info-list-item in">
-                      <span>{{ 'In' | translate }}:</span>
-                      <span>{{ bitsIn() | ixNetworkSpeed }}</span>
-                    </div>
-                  } @else {
-                    <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
-                  }
-                  @if (!isLoading()) {
-                    <div class="info-list-item out">
-                      <span>{{ 'Out' | translate }}:</span>
-                      <span>{{ bitsOut() | ixNetworkSpeed }}</span>
-                    </div>
-                  } @else {
-                    <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
-                  }
-                </div>
-              </div>
-            </div>
-            @if (isFullSize()) {
-              <div class="info-column secondary">
-                @if (!isLoading()) {
-                  <div class="info-list-item">
-                    <span>{{ 'Media Type' | translate }}:</span>
-                    <span>{{ interface().value.state.active_media_type }}</span>
-                  </div>
                 } @else {
-                  <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
+                  <span class="icon-wrapper down">
+                    <ix-icon name="cancel" [matTooltip]="linkStateLabel()"></ix-icon>
+                  </span>
                 }
+                <span>{{ linkStateLabel() }}</span>
+              </div>
+            } @else {
+              <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
+            }
+            <div class="info-list-item traffic">
+              @if (!isLoading() && isFullSize()) {
+                <span class="icon-wrapper">
+                  <ix-interface-status-icon [update]="interfaceUsage()"></ix-interface-status-icon>
+                </span>
+              }
+              <div class="in-out" [class.loading]="isLoading()">
                 @if (!isLoading()) {
-                  <div class="info-list-item">
-                    <span>{{ 'Media Subtype' | translate }}:</span>
-                    <span>{{ interface().value.state.active_media_subtype }}</span>
+                  <div class="info-list-item in">
+                    <span>{{ 'In' | translate }}:</span>
+                    <span>{{ bitsIn() | ixNetworkSpeed }}</span>
                   </div>
                 } @else {
                   <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
                 }
                 @if (!isLoading()) {
-                  <div class="info-list-item">
-                    <span>{{ 'IP Address' | translate }}:</span>
-                    <span>{{ getIpAddress(interface().value) }}</span>
+                  <div class="info-list-item out">
+                    <span>{{ 'Out' | translate }}:</span>
+                    <span>{{ bitsOut() | ixNetworkSpeed }}</span>
                   </div>
                 } @else {
                   <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
                 }
               </div>
-            }
+            </div>
           </div>
-        </div>
-        @if (showChart()) {
-          <div class="nic-chart">
-            <div class="chart-body">
-              @if (isLoading()) {
-                <ngx-skeleton-loader
-                  class="skeleton"
-                  [theme]="{
-                    width: 'calc(100% - 16px)',
-                    height: '184px',
-                    background: 'var(--alt-bg2)',
-                    opacity: 0.25,
-                    margin: '8px 0 0',
-                  }"
-                ></ngx-skeleton-loader>
+          @if (isFullSize()) {
+            <div class="info-column secondary">
+              @if (!isLoading()) {
+                <div class="info-list-item">
+                  <span>{{ 'Media Type' | translate }}:</span>
+                  <span>{{ interface().value.state.active_media_type }}</span>
+                </div>
+              } @else {
+                <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
+              }
+              @if (!isLoading()) {
+                <div class="info-list-item">
+                  <span>{{ 'Media Subtype' | translate }}:</span>
+                  <span>{{ interface().value.state.active_media_subtype }}</span>
+                </div>
+              } @else {
+                <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
+              }
+              @if (!isLoading()) {
+                <div class="info-list-item">
+                  <span>{{ 'IP Address' | translate }}:</span>
+                  <span>{{ getIpAddress(interface().value) }}</span>
+                </div>
               } @else {
-                <ix-network-chart [data]="chartData()" [aspectRatio]="aspectRatio()"></ix-network-chart>
+                <ngx-skeleton-loader class="skeleton"></ngx-skeleton-loader>
               }
             </div>
-          </div>
-        }
-      </div>
-    } @else {
-      <div [class]="['empty', 'container', size()]">
-        <ix-icon class="icon" name="mdi-widgets"></ix-icon>
-        <h3>
-          <div>{{ 'Widget is not configured.' | translate }}</div>
-          <small>{{ 'Edit widget to choose network interface.' | translate }}</small>
-        </h3>
+          }
+        </div>
       </div>
-    }
+      @if (showChart()) {
+        <div class="nic-chart">
+          <div class="chart-body">
+            @if (isLoading()) {
+              <ngx-skeleton-loader
+                class="skeleton"
+                [theme]="{
+                  width: 'calc(100% - 16px)',
+                  height: '184px',
+                  background: 'var(--alt-bg2)',
+                  opacity: 0.25,
+                  margin: '8px 0 0',
+                }"
+              ></ngx-skeleton-loader>
+            } @else {
+              <ix-network-chart [data]="chartData()" [aspectRatio]="aspectRatio()"></ix-network-chart>
+            }
+          </div>
+        </div>
+      }
+    </div>
   </mat-card-content>
 </mat-card>
 

diff --git a/src/app/pages/dashboard/widgets/network/widget-interface/widget-interface.component.spec.ts b/src/app/pages/dashboard/widgets/network/widget-interface/widget-interface.component.spec.ts
@@ -160,11 +160,13 @@ describe('WidgetInterfaceComponent', () => {
       });
     }));
 
-    it('shows a message to configure widget', () => {
+    it('checks first entry selection when settings are null', () => {
       spectator.setInput('settings', null);
-      expect(spectator.query('.icon')).toExist();
-      expect(spectator.query('h3 div')).toHaveText('Widget is not configured.');
-      expect(spectator.query('h3 small')).toHaveText('Edit widget to choose network interface.');
+
+      expect(spectator.query('.info-header-title')).toHaveText('ens1');
+      expect(spectator.query('.info-list-item.state')).toHaveText('LINK STATE UP');
+      expect(spectator.query('.info-list-item.in')).toHaveText('In:16.38 kb/s');
+      expect(spectator.query('.info-list-item.out')).toHaveText('Out:32.77 kb/s');
     });
   });
 

diff --git a/src/app/pages/dashboard/widgets/network/widget-interface/widget-interface.component.ts b/src/app/pages/dashboard/widgets/network/widget-interface/widget-interface.component.ts
@@ -41,8 +41,9 @@ export class WidgetInterfaceComponent implements WidgetComponent<WidgetInterface
     this.interfaces(),
     (interfaces) => getNetworkInterface(interfaces, this.interfaceId()),
   ));
-  protected interfaceUsage = toSignal(toObservable(this.interfaceId).pipe(
-    filter(Boolean),
+  protected interfaceUsage = toSignal(toObservable(this.interface).pipe(
+    filter((state) => Boolean(!state.isLoading && state.value)),
+    map((state) => state.value.name),
     switchMap((interfaceId) => this.resources.realtimeUpdates$.pipe(
       throttleTime(1000),
       map((update) => update.fields.interfaces[interfaceId]),
@@ -78,8 +79,9 @@ export class WidgetInterfaceComponent implements WidgetComponent<WidgetInterface
     return this.interface().isLoading || !this.initialNetworkStats() || !this.interfaceUsage() || !this.networkStats();
   });
 
-  protected initialNetworkStats = toSignal(toObservable(this.interfaceId).pipe(
-    filter(Boolean),
+  protected initialNetworkStats = toSignal(toObservable(this.interface).pipe(
+    filter((state) => Boolean(!state.isLoading && state.value)),
+    map((state) => state.value.name),
     switchMap((interfaceId) => this.resources.networkInterfaceLastHourStats(interfaceId)),
     filter((response) => !!response.length),
     map((response) => {

diff --git a/src/app/pages/dashboard/widgets/network/widget-interface/widget-interface.utils.ts b/src/app/pages/dashboard/widgets/network/widget-interface/widget-interface.utils.ts
@@ -102,7 +102,7 @@ export function getNetworkInterface(
   interfaceId: string,
 ): DashboardNetworkInterface {
   if (!interfaceId) {
-    throw new Error('No network interface is selected. Edit widget settings to select one.');
+    return interfaces[0];
   }
 
   const networkInterface = interfaces?.find((nics) => nics.name === interfaceId);

diff --git a/src/app/pages/network/components/static-routes-card/static-routes-card.component.html b/src/app/pages/network/components/static-routes-card/static-routes-card.component.html
@@ -32,6 +32,10 @@ <h3>{{ 'Static Routes' | translate }}</h3>
         [isLoading]="dataProvider.isLoading$ | async"
       ></tbody>
     </ix-table>
-    <ix-table-pager-show-more [pageSize]="4" [dataProvider]="dataProvider"></ix-table-pager-show-more>
+    <ix-table-pager-show-more
+      [pageSize]="4"
+      [dataProvider]="dataProvider"
+      [ixTestOverride]="['static-routes']"
+    ></ix-table-pager-show-more>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/pages/sharing/components/shares-dashboard/iscsi-card/iscsi-card.component.html b/src/app/pages/sharing/components/shares-dashboard/iscsi-card/iscsi-card.component.html
@@ -63,6 +63,7 @@ <h3 class="card-title">
   <ix-table-pager-show-more
     [pageSize]="4"
     [dataProvider]="dataProvider"
+    [ixTestOverride]="['iscsi']"
     [routerLink]="['/sharing', 'iscsi', 'target']"
   ></ix-table-pager-show-more>
 </mat-card>