update diagnostic overlay

Author: Nateowami

src/SIL.XForge.Scripture/ClientApp/src/app/shared/diagnostic-overlay/diagnostic-overlay.component.html

@@ -23,7 +23,7 @@ <h2>Developer Diagnostics</h2>
         <span (click)="tab = 1" [class.active]="tab === 1">Loading</span>
         <span (click)="tab = 2" [class.active]="tab === 2">Digest cycles</span>
       </div>
-      <div>
+      <div class="tab-content">
         @if (tab === 0) {
           <h3>{{ totalDocsCount | l10nNumber }} documents tracked by realtime service</h3>
           <table>
@@ -32,7 +32,7 @@ <h3>{{ totalDocsCount | l10nNumber }} documents tracked by realtime service</h3>
                 <th>Collection</th>
                 <th>Docs</th>
                 <th>Subscribers</th>
-                <th>Queries</th>
+                <th>Active Subs</th>
               </tr>
             </thead>
             <tbody>
@@ -41,12 +41,57 @@ <h3>{{ totalDocsCount | l10nNumber }} documents tracked by realtime service</h3>
                   <td>{{ docType.key }}</td>
                   <td>{{ docType.value.docs | l10nNumber }}</td>
                   <td>{{ docType.value.subscribers | l10nNumber }}</td>
-                  <td>{{ docType.value.queries | l10nNumber }}</td>
+                  <td>{{ docType.value.activeDocSubscriptionsCount | l10nNumber }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+
+          <h3>Realtime doc subscribers</h3>
+          <table>
+            <thead>
+              <tr>
+                <th>Collection</th>
+                <th>Context</th>
+                <th>Subs</th>
+                <th>Active</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (collection of subscriberCountsByContext | keyvalue; track collection.key) {
+                @for (doc of collection.value | keyvalue; track doc.key; let first = $first; let count = $count) {
+                  <tr>
+                    @if (first) {
+                      <th [attr.rowspan]="count">{{ collection.key }}</th>
+                    }
+                    <td>{{ doc.key }}</td>
+                    <td>{{ doc.value.all | l10nNumber }}</td>
+                    <td>{{ doc.value.active | l10nNumber }}</td>
+                  </tr>
+                }
+              }
+            </tbody>
+          </table>
+
+          <h3>Realtime queries</h3>
+          <table>
+            <thead>
+              <tr>
+                <th>Collection</th>
+                <th>Queries</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (docType of queriesByCollection | keyvalue; track docType.key) {
+                <tr>
+                  <td>{{ docType.key }}</td>
+                  <td>{{ docType.value | l10nNumber }}</td>
                 </tr>
               }
             </tbody>
           </table>
           <h3>Blank page</h3>
+
           <a appRouterLink="/blank-page">Go to blank page</a> (for testing subscriber cleanup)
         } @else if (tab === 1) {
           <h3>Components affecting loading indicator</h3>

src/SIL.XForge.Scripture/ClientApp/src/app/shared/diagnostic-overlay/diagnostic-overlay.component.scss

@@ -11,12 +11,13 @@ $table-border-color: #404040;
   color: $foreground-color;
 
   font-size: 12px;
-  overflow-y: auto;
+  max-height: calc(100vh - 56px);
 }
 
 .wrapper:not(.collapsed) {
-  width: 25vw;
-  min-width: 380px;
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
 }
 
 .wrapper.collapsed {
@@ -77,6 +78,12 @@ h3 {
 .nav-and-content-wrapper {
   display: flex;
   gap: 8px;
+  overflow: hidden;
+}
+
+.tab-content {
+  overflow: auto;
+  padding: 8px;
 }
 
 .nav-wrapper {