From 24c6ce9974fe64abdcc2c00e57c9a34f1afcf011 Mon Sep 17 00:00:00 2001
From: Andrei Pavel <andrei@isc.org>
Date: Fri, 2 Feb 2024 12:18:02 +0200
Subject: [PATCH] [#1150] fix alternate table row colors

---
 webui/src/app/apps-page/apps-page.component.html             | 3 ++-
 webui/src/app/dashboard/dashboard.component.html             | 4 ++--
 webui/src/app/dashboard/dashboard.component.sass             | 3 ---
 webui/src/app/hosts-page/hosts-page.component.html           | 3 ++-
 webui/src/app/machines-page/machines-page.component.html     | 5 +++--
 .../shared-networks-page/shared-networks-page.component.html | 3 ++-
 webui/src/app/subnets-page/subnets-page.component.html       | 3 ++-
 webui/src/app/users-page/users-page.component.html           | 5 +++--
 webui/src/styles.sass                                        | 5 +++--
 9 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/webui/src/app/apps-page/apps-page.component.html b/webui/src/app/apps-page/apps-page.component.html
index 9f5e7aac3..aedd6619f 100644
--- a/webui/src/app/apps-page/apps-page.component.html
+++ b/webui/src/app/apps-page/apps-page.component.html
@@ -76,6 +76,7 @@
         currentPageReportTemplate="{currentPage} of {totalPages} pages"
         stateStorage="session"
         stateKey="apps-table-session"
+        styleClass="alternate-list"
     >
         <ng-template pTemplate="header">
             <tr>
@@ -88,7 +89,7 @@
             </tr>
         </ng-template>
         <ng-template pTemplate="body" let-a>
-            <tr class="alternate-list">
+            <tr>
                 <td>
                     <a routerLink="/apps/{{ appType }}/{{ a.id }}">{{ a.name }}</a>
                 </td>
diff --git a/webui/src/app/dashboard/dashboard.component.html b/webui/src/app/dashboard/dashboard.component.html
index 443b1cdab..4d0d69f61 100644
--- a/webui/src/app/dashboard/dashboard.component.html
+++ b/webui/src/app/dashboard/dashboard.component.html
@@ -282,7 +282,7 @@ <h2 class="section-heading dashboard-section__header">Statistics</h2>
 
             <h1 class="section-heading">Services Status</h1>
             <div style="display: flex; flex-wrap: wrap; justify-content: space-between">
-                <table style="width: 100%" class="dhcp-services-table">
+                <table style="width: 100%" class="alternate-list dhcp-services-table">
                     <tr>
                         <th style="vertical-align: top">Host</th>
                         <th style="vertical-align: top">App Version</th>
@@ -297,7 +297,7 @@ <h1 class="section-heading">Services Status</h1>
                         <th style="vertical-align: top">Uptime</th>
                     </tr>
 
-                    <tr *ngFor="let d of overview.dhcpDaemons" class="alternate-list">
+                    <tr *ngFor="let d of overview.dhcpDaemons">
                         <td>
                             <a routerLink="/machines/{{ d.machineId }}">{{ d.machine }}</a>
                         </td>
diff --git a/webui/src/app/dashboard/dashboard.component.sass b/webui/src/app/dashboard/dashboard.component.sass
index f9f08d485..03c93a812 100644
--- a/webui/src/app/dashboard/dashboard.component.sass
+++ b/webui/src/app/dashboard/dashboard.component.sass
@@ -16,9 +16,6 @@
 .dhcp-services-table td
   padding: 5px
 
-.dhcp-services-table tr:nth-child(2n)
-  background-color: #f4f4f4
-
 h1.section-heading
   font-size: 1.4em
   border-bottom: 3px solid #e1e1e1
diff --git a/webui/src/app/hosts-page/hosts-page.component.html b/webui/src/app/hosts-page/hosts-page.component.html
index e4fbcb03f..06d47d0ef 100644
--- a/webui/src/app/hosts-page/hosts-page.component.html
+++ b/webui/src/app/hosts-page/hosts-page.component.html
@@ -147,6 +147,7 @@
             stateStorage="session"
             stateKey="hosts-table-session"
             currentPageReportTemplate="{currentPage} of {totalPages} pages"
+            styleClass="alternate-list"
         >
             <ng-template pTemplate="header">
                 <tr>
@@ -159,7 +160,7 @@
                 </tr>
             </ng-template>
             <ng-template pTemplate="body" let-h>
-                <tr id="host-row-{{ h.id }}" class="alternate-list">
+                <tr id="host-row-{{ h.id }}">
                     <td>
                         <app-identifier
                             *ngFor="let i of h.hostIdentifiers"
diff --git a/webui/src/app/machines-page/machines-page.component.html b/webui/src/app/machines-page/machines-page.component.html
index 246ce5e61..0f1c1d4d6 100644
--- a/webui/src/app/machines-page/machines-page.component.html
+++ b/webui/src/app/machines-page/machines-page.component.html
@@ -270,6 +270,7 @@
         stateStorage="session"
         stateKey="machines-table-session"
         currentPageReportTemplate="{currentPage} of {totalPages} pages"
+        styleClass="alternate-list"
     >
         <ng-template pTemplate="emptymessage" let-columns>
             <tr>
@@ -380,7 +381,7 @@
             </tr>
         </ng-template>
         <ng-template pTemplate="body" let-m>
-            <tr class="alternate-list" *ngIf="!showUnauthorized">
+            <tr *ngIf="!showUnauthorized">
                 <td>
                     <a routerLink="/machines/{{ m.id }}">{{ m.hostname || m.address }}</a>
                 </td>
@@ -410,7 +411,7 @@
                     ></button>
                 </td>
             </tr>
-            <tr class="alternate-list" *ngIf="showUnauthorized">
+            <tr *ngIf="showUnauthorized">
                 <td>
                     <p-tableCheckbox [value]="m"></p-tableCheckbox>
                 </td>
diff --git a/webui/src/app/shared-networks-page/shared-networks-page.component.html b/webui/src/app/shared-networks-page/shared-networks-page.component.html
index 9383f2dd8..233579a83 100644
--- a/webui/src/app/shared-networks-page/shared-networks-page.component.html
+++ b/webui/src/app/shared-networks-page/shared-networks-page.component.html
@@ -84,6 +84,7 @@
             currentPageReportTemplate="{currentPage} of {totalPages} pages"
             stateStorage="session"
             stateKey="networks-table-session"
+            styleClass="alternate-list"
         >
             <ng-template pTemplate="header">
                 <tr>
@@ -105,7 +106,7 @@
                 </tr>
             </ng-template>
             <ng-template pTemplate="body" let-net>
-                <tr class="alternate-list">
+                <tr>
                     <td>
                         <app-entity-link
                             entity="shared-network"
diff --git a/webui/src/app/subnets-page/subnets-page.component.html b/webui/src/app/subnets-page/subnets-page.component.html
index 81538d0d2..3badfe1f1 100644
--- a/webui/src/app/subnets-page/subnets-page.component.html
+++ b/webui/src/app/subnets-page/subnets-page.component.html
@@ -116,6 +116,7 @@
             currentPageReportTemplate="{currentPage} of {totalPages} pages"
             stateStorage="session"
             stateKey="subnets-table-session"
+            styleClass="alternate-list"
         >
             <ng-template pTemplate="header">
                 <tr>
@@ -143,7 +144,7 @@
                 </tr>
             </ng-template>
             <ng-template pTemplate="body" let-sn>
-                <tr class="alternate-list">
+                <tr>
                     <td>
                         <app-subnet-bar [subnet]="sn"></app-subnet-bar>
                     </td>
diff --git a/webui/src/app/users-page/users-page.component.html b/webui/src/app/users-page/users-page.component.html
index b8da43ff0..29b058482 100644
--- a/webui/src/app/users-page/users-page.component.html
+++ b/webui/src/app/users-page/users-page.component.html
@@ -73,6 +73,7 @@
         currentPageReportTemplate="{currentPage} of {totalPages} pages"
         stateStorage="session"
         stateKey="users-table-session"
+        styleClass="alternate-list"
     >
         <ng-template pTemplate="header">
             <tr>
@@ -86,7 +87,7 @@
             </tr>
         </ng-template>
         <ng-template pTemplate="body" let-u>
-            <tr class="alternate-list">
+            <tr>
                 <td align="center">
                     <a routerLink="/users/{{ u.id }}">{{ u.login | placeholder }}</a>
                     <sup *ngIf="auth.currentUserValue.id === u.id"><span id="youtag">It's you</span></sup>
@@ -222,7 +223,7 @@
                         severity="info"
                         text="The external authorization service '{{
                             userTab.user.authenticationMethodId
-                        }}' manages this user 
+                        }}' manages this user
                             profile. It can be only modified via the administrator panel of the authentication service."
                     >
                     </p-message>
diff --git a/webui/src/styles.sass b/webui/src/styles.sass
index 7024f123d..289a05b32 100644
--- a/webui/src/styles.sass
+++ b/webui/src/styles.sass
@@ -42,8 +42,9 @@ p-header
   margin-left: 20px
   color: #848484
 
-// Utility class for highlighting every even list item or table row.
-.alternate-list:nth-child(2n), .alternate-list tr:nth-child(2n)
+// Utility class for highlighting every even-numbered table row.
+// The first rule is for plain tables. The second rule is for p-tables.
+.alternate-list > tr:nth-child(2n), .alternate-list tbody > tr:nth-child(2n)
   background-color: #f4f4f4
 
 // Allows breaking long lines of text on small