fix: incorrrect handling of oplog events in UI

webui/src/components/OperationList.tsx

@@ -253,19 +253,21 @@ export const OperationRow = ({
           items={[
             {
               key: 1,
-              label:
-                "Removed " +
-                forgetOp.forget?.length +
-                " Snapshots (Policy Details)",
-              children: (
-                <div>
-                  <ul>
-                    {policyDesc.map((desc) => (
-                      <li>{desc}</li>
-                    ))}
-                  </ul>
-                </div>
-              ),
+              label: "Removed " + forgetOp.forget?.length + " Snapshots",
+              children: <>
+                Removed snapshots:
+                <pre>{forgetOp.forget?.map((f) => (
+                  <>
+                    {"removed snapshot " + normalizeSnapshotId(f.id!) + " taken at " + formatTime(f.unixTimeMs!)} <br />
+                  </>
+                ))}</pre>
+                Policy:
+                <ul>
+                  {policyDesc.map((desc) => (
+                    <li>{desc}</li>
+                  ))}
+                </ul>
+              </>,
             },
           ]}
         />

webui/src/components/OperationTree.tsx

@@ -40,6 +40,7 @@ export const OperationTree = ({
 
   // track backups for this operation tree view.
   useEffect(() => {
+    console.log("using effect");
     setSelectedBackupId(null);
     const backupCollector = new BackupInfoCollector();
     const lis = (opEvent: OperationEvent) => {
@@ -119,6 +120,7 @@ export const OperationTree = ({
               setSelectedBackupId(null);
               return;
             }
+            console.log("SELECTED ID: " + backup.id);
             setSelectedBackupId(backup.id!);
           }}
           titleRender={(node: OpTreeNode): React.ReactNode => {

webui/src/state/oplog.ts

@@ -113,6 +113,9 @@ export class BackupInfoCollector {
   private backupBySnapshotId: { [key: string]: BackupInfo } = {};
 
   private mergeBackups(existing: BackupInfo, newInfo: BackupInfo) {
+    if (existing.id > newInfo.id) {
+      existing.id = newInfo.id;
+    }
     existing.startTimeMs = Math.min(existing.startTimeMs, newInfo.startTimeMs);
     existing.endTimeMs = Math.max(existing.endTimeMs, newInfo.endTimeMs);
     existing.displayTime = new Date(existing.startTimeMs);