Compare two browser actions

Add the ability to compare two different actions in the browser view. It
shows difference in action properties, command, input files, and some
basic overview of difference in output files.

Author: Jonas Hallin

.aspect/rules/external_repository_action_cache/npm_translate_lock_LTUzNjQ2NjY3

@@ -2,7 +2,7 @@
 # Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "@@//frontend:pnpm-lock.yaml").
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 frontend/.npmrc=2124455649
-frontend/package-lock.json=2050410766
-frontend/package.json=1484839624
+frontend/package-lock.json=-1601984742
+frontend/package.json=-2053760216
 frontend/patches/vite.patch=-1261363333
-frontend/pnpm-lock.yaml=-1152862257
+frontend/pnpm-lock.yaml=-689001559

frontend/package-lock.json

@@ -33,6 +33,7 @@
     "ansi_up": "^6.0.2",
     "antd": "^5.21.3",
     "dayjs": "^1.11.11",
+    "diff": "^9.0.0",
     "graphql": "^16.8.1",
     "nice-grpc-common": "^2.0.2",
     "nice-grpc-web": "^3.3.5",

frontend/package.json

@@ -0,0 +1,131 @@
+import { Descriptions, Grid, theme } from "antd";
+import CopyBbClientdActionButton from "@/components/BrowserActionGrid/CopyBbClientdActionButton";
+import type { fetchBrowserActionGrid } from "@/components/BrowserActionGrid/fetch";
+import type { BrowserPageParams } from "@/types/BrowserPageParams";
+import { readableDurationFromProtobufDuration } from "@/utils/time";
+import { styleMap } from "../BrowserDirectory/utils";
+import PropertyTagList from "../PropertyTagList";
+import ComparePropertyTagList from "../PropertyTagList/comparePropertyTagList";
+
+const { useToken } = theme;
+
+interface Params {
+  browserPageParams: BrowserPageParams;
+  actionData: Awaited<ReturnType<typeof fetchBrowserActionGrid>>;
+  compareActionData?: Awaited<ReturnType<typeof fetchBrowserActionGrid>>;
+  mergedMode?: boolean;
+}
+const InnerActionProperties: React.FC<Params> = ({
+  browserPageParams,
+  actionData,
+  compareActionData,
+  mergedMode, // For comparing actions
+}) => {
+  const screens = Grid.useBreakpoint();
+  const { token } = useToken();
+  return (
+    <>
+      <Descriptions
+        layout={screens.md ? "horizontal" : "vertical"}
+        column={1}
+        size="small"
+        bordered
+        styles={{ label: { width: "25%" }, content: { width: "75%" } }}
+      >
+        {actionData.action.timeout && (
+          <Descriptions.Item
+            label="Timeout:"
+            style={
+              compareActionData &&
+              actionData.action.timeout !== compareActionData?.action.timeout
+                ? styleMap("diff_with_borders", token)
+                : {}
+            }
+          >
+            {readableDurationFromProtobufDuration(actionData.action.timeout)}
+          </Descriptions.Item>
+        )}
+        <Descriptions.Item
+          label="Do not cache"
+          style={
+            compareActionData &&
+            actionData.action.doNotCache !==
+              compareActionData?.action.doNotCache
+              ? styleMap("diff_with_borders", token)
+              : {}
+          }
+        >
+          {actionData.action.doNotCache ? "Yes" : "No"}
+        </Descriptions.Item>
+        {actionData.action.platform &&
+          (compareActionData?.action.platform ? (
+            <Descriptions.Item label="Platform properties">
+              <ComparePropertyTagList
+                propertyList={actionData.action.platform.properties}
+                comparePropertyList={
+                  compareActionData?.action.platform?.properties
+                }
+                mergedMode={mergedMode}
+              />
+            </Descriptions.Item>
+          ) : (
+            <Descriptions.Item label="Platform properties">
+              <PropertyTagList
+                propertyList={actionData.action.platform.properties}
+              />
+            </Descriptions.Item>
+          ))}
+      </Descriptions>
+      {actionData.action.commandDigest &&
+        actionData.action.inputRootDigest &&
+        !mergedMode && (
+          <CopyBbClientdActionButton
+            instanceName={browserPageParams.instanceName}
+            digestFunction={browserPageParams.digestFunction}
+            actionDigest={actionData.actionDigest}
+            commandDigest={actionData.action.commandDigest}
+            inputRootDigest={actionData.action.inputRootDigest}
+          />
+        )}
+    </>
+  );
+};
+
+interface ActionPropertiesParams {
+  browserPageParams: BrowserPageParams;
+  actionData: Awaited<ReturnType<typeof fetchBrowserActionGrid>>;
+}
+const ActionProperties = ({
+  browserPageParams,
+  actionData,
+}: ActionPropertiesParams) => {
+  return (
+    <InnerActionProperties
+      browserPageParams={browserPageParams}
+      actionData={actionData}
+    />
+  );
+};
+interface ActionPropertiesDeltaParams {
+  browserPageParams: BrowserPageParams;
+  actionData: Awaited<ReturnType<typeof fetchBrowserActionGrid>>;
+  compareActionData: Awaited<ReturnType<typeof fetchBrowserActionGrid>>;
+  mergedMode: boolean;
+}
+const ActionPropertiesDelta = ({
+  browserPageParams,
+  actionData,
+  compareActionData,
+  mergedMode,
+}: ActionPropertiesDeltaParams) => {
+  return (
+    <InnerActionProperties
+      browserPageParams={browserPageParams}
+      actionData={actionData}
+      compareActionData={compareActionData}
+      mergedMode={mergedMode}
+    />
+  );
+};
+
+export { ActionProperties, ActionPropertiesDelta };

frontend/pnpm-lock.yaml

@@ -1,35 +1,39 @@
 import { Button } from "antd";
 import type React from "react";
 import { useBbPortalMessage } from "@/context/MessageContext";
-import type { Digest } from "@/lib/grpc-client/build/bazel/remote/execution/v2/remote_execution";
-import type { BrowserPageParams } from "@/types/BrowserPageType";
+import type {
+  Digest,
+  DigestFunction_Value,
+} from "@/lib/grpc-client/build/bazel/remote/execution/v2/remote_execution";
 import { getBBClientdPath } from "@/utils/getBbClientdPath";
 
 interface Params {
-  browserPageParams: BrowserPageParams;
+  instanceName: string;
+  digestFunction: DigestFunction_Value;
   actionDigest: Digest;
   commandDigest: Digest;
   inputRootDigest: Digest;
 }
 
 const CopyBbClientdActionButton: React.FC<Params> = ({
-  browserPageParams,
+  instanceName,
+  digestFunction,
   actionDigest,
   commandDigest,
   inputRootDigest,
 }) => {
   const { copyToClipboard } = useBbPortalMessage();
 
   const commandBbClientdPath = getBBClientdPath(
-    browserPageParams.instanceName,
-    browserPageParams.digestFunction,
+    instanceName,
+    digestFunction,
     commandDigest,
     "command",
   );
 
   const inputRootBbClientdPath = getBBClientdPath(
-    browserPageParams.instanceName,
-    browserPageParams.digestFunction,
+    instanceName,
+    digestFunction,
     inputRootDigest,
     "directory",
   );

frontend/src/components/ActionProperties/index.tsx

@@ -24,10 +24,8 @@ import {
   POSIXResourceUsage,
 } from "@/lib/grpc-client/buildbarn/resourceusage/resourceusage";
 import type { ByteStreamClient } from "@/lib/grpc-client/google/bytestream/bytestream";
-import {
-  type BrowserPageParams,
-  BrowserPageType,
-} from "@/types/BrowserPageType";
+import type { BrowserPageParams } from "@/types/BrowserPageParams";
+import { BrowserPageType } from "@/types/BrowserPageType";
 import { ProtobufTypeUrls } from "@/types/protobufTypeUrls";
 import { getReducedActionDigest_SHA256 } from "@/utils/digestFunctionUtils";
 import { fetchCasObjectAndParse } from "@/utils/fetchCasObject";
@@ -53,6 +51,7 @@ export const fetchBrowserActionGrid = async (
   casDirectory: Directory | undefined;
   previousExecutionStats: PreviousExecutionStats | undefined;
   fileSystemAccessProfile: FileSystemAccessProfile | undefined;
+  reducedActionDigest: Digest | undefined;
 }> => {
   const { actionDigest, executeResponse } = await fetchExecuteResponse(
     browserPageParams,
@@ -82,6 +81,7 @@ export const fetchBrowserActionGrid = async (
     casDirectory,
     previousExecutionStats,
     fileSystemAccessProfile,
+    reducedActionDigest,
   ] = await Promise.all([
     // Fetch Command
     action.commandDigest
@@ -118,6 +118,11 @@ export const fetchBrowserActionGrid = async (
       fileSystemAccessCacheClient,
       browserPageParams,
     ),
+
+    // Generate Reduced Action Digest (No fetching, but is async)
+    action.commandDigest && action.platform
+      ? getReducedActionDigest_SHA256(action.commandDigest, action.platform)
+      : undefined,
   ]);
 
   return {
@@ -134,6 +139,7 @@ export const fetchBrowserActionGrid = async (
     casDirectory,
     previousExecutionStats,
     fileSystemAccessProfile,
+    reducedActionDigest,
   };
 };