Add a tab with command line data to the bazel invocation view

MODULE.bazel

@@ -1,3 +1,7 @@
+"""
+    Build rules for buildbarn portal
+"""
+
 module(name = "com_github_buildbarn_bb_portal")
 
 bazel_dep(name = "bazel_remote_apis", version = "0.0.0")
@@ -57,7 +61,6 @@ use_repo(
     "com_github_bazelbuild_buildtools",
     "com_github_bazelbuild_remote_apis_sdks",
     "com_github_fsnotify_fsnotify",
-    "com_github_google_shlex",
     "com_github_google_uuid",
     "com_github_gorilla_mux",
     "com_github_hashicorp_go_multierror",

frontend/src/app/bazel-invocations/[invocationID]/index.graphql.ts

@@ -154,9 +154,11 @@ fragment BazelInvocationInfo on BazelInvocation {
   bazelCommand {
     command
     executable
-    id
-    buildOptions: options
     residual
+    explicitCmdLine
+    cmdLine
+    startupOptions
+    explicitStartupOptions
   }
   id
   invocationID

frontend/src/components/BazelInvocation/index.tsx

@@ -11,6 +11,7 @@ import {
   TestCollection,
   TargetPair,
   BuildGraphMetrics,
+  BazelCommand,
 } from "@/graphql/__generated__/graphql";
 import styles from "../AppBar/index.module.css"
 import React from "react";
@@ -33,6 +34,7 @@ import {
   FieldTimeOutlined,
   WifiOutlined,
   HddOutlined,
+  CodeOutlined,
 } from "@ant-design/icons";
 import themeStyles from '@/theme/theme.module.css';
 import { debugMode } from "@/components/Utilities/debugMode";
@@ -51,6 +53,7 @@ import TimingMetricsDisplay from "../TimingMetrics";
 import NetworkMetricsDisplay from "../NetworkMetrics";
 import TestMetricsDisplay from "../TestsMetrics";
 import { env } from 'next-runtime-env';
+import CommandLineDisplay from "../CommandLine";
 
 
 const BazelInvocation: React.FC<{
@@ -230,6 +233,14 @@ const BazelInvocation: React.FC<{
         <NetworkMetricsDisplay networkMetrics={networkMetrics} />
       </Space>,
     },
+    {
+      key: 'BazelInvocationTabs-CommandLine',
+      label: 'Command Line',
+      icon: <CodeOutlined />,
+      children: <Space direction="vertical" size="middle" className={themeStyles.space}>
+        <CommandLineDisplay commandLineData={bazelCommand ?? undefined} />
+      </Space>,
+    },
   ];
 
   const hideLogs = true //hide the logs tab for now

frontend/src/components/CommandLine/index.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Space, Table, Row, Col, Statistic, List } from 'antd';
+import { CodeOutlined, DeploymentUnitOutlined, SearchOutlined } from '@ant-design/icons';
+import type { StatisticProps, TableColumnsType } from "antd/lib";
+import CountUp from 'react-countup';
+import { BazelCommand, TargetMetrics, TargetPair } from "@/graphql/__generated__/graphql";
+import PortalCard from "../PortalCard";
+import { SearchFilterIcon, SearchWidget } from '@/components/SearchWidgets';
+import NullBooleanTag from "../NullableBooleanTag";
+import styles from "../../theme/theme.module.css"
+import { millisecondsToTime } from "../Utilities/time";
+
+
+
+const CommandLineDisplay: React.FC<{ commandLineData: BazelCommand | undefined | null }> = ({
+    commandLineData: commandLineData
+}) => {
+
+    const createUnorderedList = (items: string[]): JSX.Element => {
+        return (
+            <ul>
+                {items.map((item, index) => (
+                    <li key={index}>{item}</li>
+                ))}
+            </ul>
+        );
+    };
+
+    var commandLineOptions: string[] = []
+    commandLineData?.cmdLine?.forEach(x => commandLineOptions.push(x ?? ""))
+
+    return (
+
+        <Space direction="vertical" size="middle" style={{ display: 'flex' }} >
+            <PortalCard type="inner" icon={<CodeOutlined />} titleBits={["Command Line"]}>
+                <Row>
+                    <Space size="large">
+                        <strong>Explicit Command Line:</strong>
+                        <div>
+                            {commandLineData?.executable} {commandLineData?.command} {commandLineData?.residual} {commandLineData?.explicitCmdLine}
+                        </div>
+                    </Space>
+                </Row>
+                <Row>
+                    <Space size="large">
+                        <div>
+                            <List
+                                bordered
+                                header={<div><strong>Effective Command Line Options:</strong></div>}
+                                dataSource={commandLineData?.cmdLine?.filter(x => x !== undefined).toSorted() as string[]}
+                                renderItem={(item) => <List.Item>{item}</List.Item>}
+                            />
+
+                            <List
+                                bordered
+                                header={<div><strong>Explicit Startup Options:</strong></div>}
+                                dataSource={commandLineData?.explicitStartupOptions?.filter(x => x !== undefined) as string[]}
+                                renderItem={(item) => <List.Item>{item}</List.Item>}
+                            />
+                            <List
+                                bordered
+                                header={<div><strong>Effective Startup Options:</strong></div>}
+                                dataSource={commandLineData?.startupOptions?.filter(x => x !== undefined) as string[]}
+                                renderItem={(item) => <List.Item>{item}</List.Item>}
+                            />
+                        </div>
+                    </Space>
+                </Row>
+            </PortalCard>
+        </Space>
+    )
+}
+
+export default CommandLineDisplay;