feat: add activity bar to UI heading

internal/oplog/oplog.go

@@ -97,8 +97,8 @@ func (o *OpLog) Scan(onIncomplete func(op *v1.Operation)) error {
 				continue
 			}
 
-			if op.Status == v1.OperationStatus_STATUS_PENDING || op.Status == v1.OperationStatus_STATUS_SYSTEM_CANCELLED {
-				// remove pending operations.
+			if op.Status == v1.OperationStatus_STATUS_PENDING || op.Status == v1.OperationStatus_STATUS_SYSTEM_CANCELLED || op.Status == v1.OperationStatus_STATUS_USER_CANCELLED {
+				// remove pending or user cancelled operations.
 				o.deleteOperationHelper(tx, op.Id)
 				continue
 			} else if op.Status == v1.OperationStatus_STATUS_INPROGRESS {

webui/src/components/ActivityBar.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from "react";
+import { EOperation, detailsForOperation, displayTypeToString, getTypeForDisplay, subscribeToOperations, toEop, unsubscribeFromOperations } from "../state/oplog";
+import { OperationEvent, OperationStatus } from "../../gen/ts/v1/operations.pb";
+import { formatDuration } from "../lib/formatting";
+
+export const ActivityBar = () => {
+    const [activeOperations, setActiveOperations] = useState<EOperation[]>([]);
+
+    useEffect(() => {
+        const callback = ({ operation, type }: OperationEvent) => {
+            if (!operation || !type) return;
+
+            setActiveOperations((ops) => {
+                ops = ops.filter((op) => op.id !== operation.id);
+                if (operation.status === OperationStatus.STATUS_INPROGRESS) {
+                    ops.push(toEop(operation));
+                }
+                ops.sort((a, b) => b.parsedTime - a.parsedTime);
+                return ops;
+            });
+        }
+
+        subscribeToOperations(callback);
+
+        return () => {
+            unsubscribeFromOperations(callback);
+        }
+    });
+
+    const details = activeOperations.map((op) => {
+        return {
+            op: op,
+            details: detailsForOperation(op),
+            displayName: displayTypeToString(getTypeForDisplay(op)),
+        }
+    });
+
+    return <span>{details.map(details => {
+        return <>{details.displayName} in progress for plan {details.op.planId} to {details.op.repoId} for {formatDuration(details.details.duration)}</>
+    })}</span>
+}

webui/src/views/App.tsx

@@ -16,6 +16,7 @@ import { useShowModal } from "../components/ModalManager";
 import { MainContentArea, useSetContent } from "./MainContentArea";
 import { AddPlanModal } from "./AddPlanModal";
 import { uiBuildVersion } from "../state/buildcfg";
+import { ActivityBar } from "../components/ActivityBar";
 
 const { Header, Sider } = Layout;
 
@@ -67,6 +68,10 @@ export const App: React.FC = () => {
           <small style={{ color: "rgba(255,255,255,0.3)", fontSize: "0.6em" }}>
             {uiBuildVersion}
           </small>
+
+          <small style={{ fontSize: "0.6em", marginLeft: "30px" }}>
+            <ActivityBar />
+          </small>
         </h1>
       </Header>
       <Layout>