Add overview matrix to monitor home page

server/monitor/src/main/java/org/apache/accumulo/monitor/next/SystemInformation.java

@@ -853,8 +853,16 @@ private Status computeServerStatus(ServerId.Type type) {
     int missingMetricCount = (int) servers.stream()
         .filter(serverId -> !TableDataFactory.hasMetricData(allMetrics.getIfPresent(serverId)))
         .count();
-    return Status.buildStatus(servers.size(), problemHostCount, missingMetricCount,
-        type == ServerId.Type.TABLET_SERVER);
+    return Status.buildStatus(servers.size(), problemHostCount, missingMetricCount, switch (type) {
+      case MANAGER:
+      case GARBAGE_COLLECTOR:
+      case COMPACTOR:
+      case SCAN_SERVER:
+      case TABLET_SERVER:
+        yield true;
+      case MONITOR:
+        yield false;
+    });
   }
 
   private String computeManagerGoalState() {

server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/css/screen.css

@@ -252,6 +252,85 @@ pre.logevent {
   color: #5cb85c;
 }
 
+.server-count {
+  color: #6c757d;
+  font-size: 0.875em;
+  font-variant-numeric: tabular-nums;
+}
+
+.deployment-overview-content {
+  width: fit-content;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.deployment-matrix-table {
+  margin: 0 auto;
+  table-layout: auto;
+  width: auto;
+}
+
+.deployment-matrix-table th,
+.deployment-matrix-table td {
+  text-align: center;
+  vertical-align: middle;
+}
+
+.deployment-matrix-group {
+  min-width: 10rem;
+  text-align: left !important;
+  white-space: nowrap;
+  font-weight: 400;
+}
+
+.deployment-matrix-cell {
+  min-width: 5.25rem;
+}
+
+.deployment-matrix-total {
+  font-weight: 600;
+}
+
+.deployment-matrix-header {
+  font-weight: 600;
+  white-space: normal;
+  line-height: 1.15;
+  background-color: #f8f9fa;
+}
+
+.deployment-matrix-table tfoot th,
+.deployment-matrix-table tfoot td {
+  font-weight: 600;
+}
+
+.deployment-count-badge {
+  min-width: 2.35rem;
+  padding: 0.3em 0.55em;
+  color: #333333;
+  font-variant-numeric: tabular-nums;
+}
+
+.deployment-count-total {
+  background-color: #f5f5f5;
+  border: 1px solid #d9d9d9;
+}
+
+.deployment-count-ok {
+  background-color: #5cb85c;
+}
+
+.deployment-count-warn {
+  background-color: #f0ad4e;
+}
+
+.deployment-count-error {
+  background-color: #d9534f;
+}
+
+.deployment-count-empty {
+  background-color: #f5f5f5;
+}
+
 .highlight {
   background-color: #cef4b5;
 }

server/monitor/src/main/resources/org/apache/accumulo/monitor/resources/js/navbar.js

@@ -36,6 +36,28 @@ const CLASS = {
   ERROR: 'error'
 };
 
+const NAVBAR_COMPONENTS = [{
+  statusKey: 'MANAGER',
+  indicatorId: 'managerStatusNotification',
+  countId: 'managerStatusCount'
+}, {
+  statusKey: 'TABLET_SERVER',
+  indicatorId: 'serverStatusNotification',
+  countId: 'serverStatusCount'
+}, {
+  statusKey: 'GARBAGE_COLLECTOR',
+  indicatorId: 'gcStatusNotification',
+  countId: 'gcStatusCount'
+}, {
+  statusKey: 'SCAN_SERVER',
+  indicatorId: 'sserverStatusNotification',
+  countId: 'sserverStatusCount'
+}, {
+  statusKey: 'COMPACTOR',
+  indicatorId: 'compactorStatusNotification',
+  countId: 'compactorStatusCount'
+}];
+
 /**
  * Remove other bootstrap color classes and add the given class to the given element
  * @param {string} elementId the element id to update
@@ -59,6 +81,21 @@ function updateElementStatus(elementId, status) {
   }
 }
 
+function updateServerCount(elementId, status) {
+  const $element = $(`#${elementId}`);
+
+  if (!status || Number(status.serverCount) <= 0) {
+    $element.text('0/0');
+    return;
+  }
+
+  const total = Number(status.serverCount);
+  const problem = Number(status.problemServerCount || 0);
+  const responding = Math.max(0, total - problem);
+
+  $element.text(`${responding}/${total}`);
+}
+
 /**
  * Updates the notifications of the servers dropdown notification as well as the individual server notifications.
  * @param {JSON} statusData object containing the status info for the servers
@@ -67,14 +104,13 @@ function updateServerNotifications(statusData) {
   const managerGoalState = statusData.managerGoalState;
   const isSafeMode = managerGoalState === 'SAFE_MODE';
   const isCleanStop = managerGoalState === 'CLEAN_STOP';
-  const componentStatuses = [
-    getComponentStatus(statusData, 'MANAGER'),
-    getComponentStatus(statusData, 'TABLET_SERVER'),
-    getComponentStatus(statusData, 'GARBAGE_COLLECTOR'),
-    getComponentStatus(statusData, 'SCAN_SERVER'),
-    getComponentStatus(statusData, 'COMPACTOR')
-  ];
+  const componentStatuses = NAVBAR_COMPONENTS.map(function (component) {
+    return getComponentStatus(statusData, component.statusKey);
+  });
   const managerStatus = componentStatuses[0];
+  const componentData = NAVBAR_COMPONENTS.map(function (component) {
+    return statusData.componentStatuses?.[component.statusKey] || null;
+  });
 
   // setting manager status notification
   if (managerStatus === STATUS.ERROR || isCleanStop) {
@@ -88,10 +124,13 @@ function updateServerNotifications(statusData) {
       '. Could not properly set manager status notification.');
   }
 
-  updateElementStatus('serverStatusNotification', componentStatuses[1]);
-  updateElementStatus('gcStatusNotification', componentStatuses[2]);
-  updateElementStatus('sserverStatusNotification', componentStatuses[3]);
-  updateElementStatus('compactorStatusNotification', componentStatuses[4]);
+  NAVBAR_COMPONENTS.forEach(function (component, index) {
+    updateServerCount(component.countId, componentData[index]);
+    if (index === 0) {
+      return;
+    }
+    updateElementStatus(component.indicatorId, componentStatuses[index]);
+  });
 
   // Setting overall servers status notification
   if (!isSafeMode && !isCleanStop && componentStatuses.every(status => status === STATUS.OK)) {