Merge pull request #48 from buildbarn/src_ctrl

Frontend improvements

Author: trey-ivy

frontend/.env

@@ -3,4 +3,5 @@ NEXT_PUBLIC_BES_GRPC_BACKEND_URL=grpc://localhost:8082
 NEXT_PUBLIC_BROWSER_URL=https://browser.example.com
 NEXT_PUBLIC_COMPANY_NAME="Example Co"
 NEXT_PUBLIC_COMPANY_SLACK_CHANNEL_NAME=ExampleCoBuild
-NEXT_PUBLIC_COMPANY_SLACK_CHANNEL_URL=https://exampleco.enterprise.slack.com/archives/CXXXXXXX
+NEXT_PUBLIC_COMPANY_SLACK_CHANNEL_URL=https://exampleco.enterprise.slack.com/archives/CXXXXXXX
+NEXT_PUBLIC_GITHUB_URL=https://github.com

frontend/src/app/tests/[slug]/page.tsx

@@ -14,7 +14,7 @@ interface PageParams {
 }
 
 const Page: React.FC<PageParams> = ({ params }) => {
-    const label = decodeURIComponent(params.slug)
+    const label = decodeURIComponent(atob(decodeURIComponent(params.slug)))
     return (
         <Content
             content={

frontend/src/components/BazelInvocation/index.tsx

@@ -11,7 +11,6 @@ import {
   TestCollection,
   TargetPair,
   BuildGraphMetrics,
-  BazelCommand,
 } from "@/graphql/__generated__/graphql";
 import styles from "../AppBar/index.module.css"
 import React from "react";
@@ -68,19 +67,19 @@ const BazelInvocation: React.FC<{
     invocationID,
     build,
     state,
-    stepLabel,
     bazelCommand,
     profile,
-    relatedFiles,
     sourceControl,
     user,
     metrics,
     testCollection,
-    targets
+    targets,
+    //stepLabel,
+    //relatedFiles,
 
   } = invocationOverview;
 
-  var buildLogs = "tmp"
+
   //data for runner metrics
   var runnerMetrics: RunnerCount[] = [];
   metrics?.actionSummary?.runnerCount?.map((item: RunnerCount) => runnerMetrics.push(item));
@@ -91,9 +90,6 @@ const BazelInvocation: React.FC<{
   //artifact metrics
   var artifactMetrics: ArtifactMetrics | undefined = metrics?.artifactMetrics ?? undefined;
 
-  //data for target metrics
-  var targetMetrics: TargetMetrics | undefined | null = metrics?.targetMetrics ?? undefined
-
   //memory metrics
   var memoryMetrics: MemoryMetrics | undefined = metrics?.memoryMetrics ?? undefined
 
@@ -107,21 +103,21 @@ const BazelInvocation: React.FC<{
   var networkMetrics: NetworkMetrics | undefined = metrics?.networkMetrics ?? undefined
   const bytesRecv = networkMetrics?.systemNetworkStats?.bytesRecv ?? 0
   const bytesSent = networkMetrics?.systemNetworkStats?.bytesSent ?? 0
-  const hideNetworkMetricsTab: boolean = bytesRecv == 0 && bytesSent == 0
 
   //test data
   var testCollections: TestCollection[] | undefined | null = testCollection
+
+  //data for target metrics
+  var targetMetrics: TargetMetrics | undefined | null = metrics?.targetMetrics ?? undefined
   var targetData: TargetPair[] | undefined | null = targets
   var targetTimes: Map<string, number> = new Map<string, number>();
-
   targetData?.map(x => { targetTimes.set(x.label ?? "", x.durationInMs ?? 0) })
 
-  //show/hide tabs
-  const testCount = testCollection?.length ?? 0
-  const hideTestsTab: boolean = testCount == 0
-  const hideTargetsTab: boolean = (targetData?.length ?? 0) == 0 ? true : false
-  const hideSourceControlTab: boolean = sourceControl == undefined || sourceControl == null ? true : false
+  //logs
+  var buildLogs = "tmp"
+  const logs: string = buildLogs ?? "no build log data found..."
 
+  //build the title
   let { exitCode } = state;
   exitCode = exitCode ?? null;
   const titleBits: React.ReactNode[] = [<span key="label">User: {user?.LDAP}</span>];
@@ -133,9 +129,7 @@ const BazelInvocation: React.FC<{
     titleBits.push(<BuildStepResultTag key="result" result={exitCode?.name as BuildStepResultEnum} />);
   }
 
-  //logs
-  const logs: string = buildLogs ?? "no build log data found..."
-
+  //tabs
   var items: TabsProps['items'] = [
     {
       key: 'BazelInvocationTabs-Problems',
@@ -146,14 +140,12 @@ const BazelInvocation: React.FC<{
         {exitCode === null || exitCode.code !== 0 ? (
           children
         ) : (
-
           <PortalAlert
             message="There is no debug information to display because there are no reported failures with the build step"
             type="success"
             showIcon
           />
         )}
-
       </Space>,
     },
     {
@@ -190,7 +182,6 @@ const BazelInvocation: React.FC<{
         <ActionDataMetrics acMetrics={acMetrics} />
       </Space>,
     },
-
     {
       key: 'BazelInvocationTabs-Artifacts',
       label: 'Artifacts',
@@ -215,7 +206,6 @@ const BazelInvocation: React.FC<{
         <TimingMetricsDisplay timingMetrics={timingMetrics} buildGraphMetrics={buildGraphMetrics} />
       </Space>,
     },
-
     {
       key: 'BazelInvocationTabs-Targets',
       label: 'Targets',
@@ -258,25 +248,35 @@ const BazelInvocation: React.FC<{
     },
   ];
 
-  const hideLogs = true //hide the logs tab for now
-  if (hideLogs == true) {
-    var idx = items.findIndex((x, _) => x.key == "BazelInvocationTabs-Logs")
-    if (idx > -1) {
-      items.splice(idx, 1);
-    }
+  //show/hide tabs
+  interface TabShowHideDisplay {
+    hide: boolean,
+    key: string
   }
 
-  if (hideTestsTab == true) {
-    var idx = items.findIndex((x, _) => x.key == "BazelInvocationTabs-Tests")
-    if (idx > -1) {
-      items.splice(idx, 1);
-    }
-  }
+  const hideTestsTab: boolean = (testCollection?.length ?? 0) == 0
+  const hideTargetsTab: boolean = (targetData?.length ?? 0) == 0 ? true : false
+  const hideNetworkTab: boolean = bytesRecv == 0 && bytesSent == 0
+  const hideSourceControlTab: boolean = sourceControl?.runID == undefined || sourceControl.runID == null || sourceControl.runID == "" ? true : false
+  const hideLogsTab: boolean = true
+  const hideMemoryTab: boolean = (memoryMetrics?.peakPostGcHeapSize ?? 0) == 0 && (memoryMetrics?.peakPostGcHeapSize ?? 0) == 0 && (memoryMetrics?.usedHeapSizePostBuild ?? 0) == 0
+
+  const showHideTabs: TabShowHideDisplay[] = [
+    { key: "BazelInvocationTabs-Tests", hide: hideTestsTab },
+    { key: "BazelInvocationTabs-Targets", hide: hideTargetsTab },
+    { key: "BazelInvocationTabs-Network", hide: hideNetworkTab },
+    { key: "BazelInvocationTabs-SourceControl", hide: hideSourceControlTab },
+    { key: "BazelInvocationTabs-Logs", hide: hideLogsTab },
+    { key: "BazelInvocationTabs-Memory", hide: hideMemoryTab },
+  ]
 
-  if (hideNetworkMetricsTab == true) {
-    var idx = items.findIndex((x, _) => x.key == "BazelInvocationTabs-Network")
-    if (idx > -1) {
-      items.splice(idx, 1);
+  for (var i in showHideTabs) {
+    var tab = showHideTabs[i]
+    if (tab.hide == true) {
+      var idx = items.findIndex((x, _) => x.key == tab.key)
+      if (idx > -1) {
+        items.splice(idx, 1);
+      }
     }
   }
 

frontend/src/components/Breadcrumbs/index.tsx

@@ -45,6 +45,21 @@ const Breadcrumbs: React.FC<Props> = ({ segmentTitles }) => {
       // For example, convert "/foo/bar/baz" to ["foo", "bar", "baz"]
       const segments = pathname.split(separator).filter(segment => segment.length > 0);
 
+      //special handling for the base64 encoded route params to get around nextjs being overly helpful and decoding urls automagically
+      if (segments.includes("tests")) {
+        var idx = segments.indexOf("tests")
+        if (idx + 1 < segments.length) {
+          segments[idx + 1] = atob(segments[idx + 1])
+        }
+      }
+      //for future targets route
+      if (segments.includes("targets")) {
+        var idx = segments.indexOf("targets")
+        if (idx + 1 < segments.length) {
+          segments[idx + 1] = atob(segments[idx + 1])
+        }
+      }
+
       // Iterate over the list of segments to build a breadcrumb object for each
       const breadcrumbs = segments.map((segment, index) => {
         // Compose the path by joining all preceding segments

frontend/src/components/CommandLine/index.tsx

@@ -16,31 +16,14 @@ const CommandLineDisplay: React.FC<{ commandLineData: BazelCommand | undefined |
     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 ?? ""))
+    var cmdLine = [commandLineData?.executable, commandLineData?.command, commandLineData?.residual, commandLineData?.explicitCmdLine].join(" ")
 
     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>
+            <PortalCard type="inner" icon={<CodeOutlined />} titleBits={["Explicit Command Line:", cmdLine]}>
                 <Row>
                     <Space size="large">
                         <div>
@@ -50,13 +33,24 @@ const CommandLineDisplay: React.FC<{ commandLineData: BazelCommand | undefined |
                                 dataSource={commandLineData?.cmdLine?.filter(x => x !== undefined).toSorted() as string[]}
                                 renderItem={(item) => <List.Item>{item}</List.Item>}
                             />
-
+                        </div>
+                    </Space>
+                </Row>
+                <Row>
+                    <Space size="large">
+                        <div>
                             <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>}
                             />
+                        </div>
+                    </Space>
+                </Row>
+                <Row>
+                    <Space size="large">
+                        <div>
                             <List
                                 bordered
                                 header={<div><strong>Effective Startup Options:</strong></div>}

frontend/src/components/SourceControlDisplay/index.tsx

@@ -1,28 +1,26 @@
 import React from "react";
-import { Space, Table, Row, Col, Statistic, List, Descriptions } from 'antd';
-import { BranchesOutlined, CodeOutlined, DeploymentUnitOutlined, SearchOutlined } from '@ant-design/icons';
-import type { StatisticProps, TableColumnsType } from "antd/lib";
-import CountUp from 'react-countup';
-import { BazelCommand, SourceControl, TargetMetrics, TargetPair } from "@/graphql/__generated__/graphql";
+import { Space, Row, Descriptions } from 'antd';
+import { BranchesOutlined } from '@ant-design/icons';
+import { SourceControl } 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";
 import Link from "next/link";
-
+import { env } from 'next-runtime-env';
 
 
 const SourceControlDisplay: React.FC<{ sourceControlData: SourceControl | undefined | null }> = ({
     sourceControlData: sourceControlData
 }) => {
     //build urls
-    const runURL = sourceControlData?.repoURL + "/actions/runs/" + "10976627244"
-    const actorURL = "https://github.com/" + sourceControlData?.actor
-    const branchURL = sourceControlData?.repoURL + "/tree/" + sourceControlData?.branch
-    const commitURL = sourceControlData?.repoURL + "/commit/" + sourceControlData?.commitSha
+    var ghUrl = env('NEXT_PUBLIC_GITHUB_URL') ?? "https://github.com/"
+    if (!ghUrl.endsWith("/")) {
+        ghUrl += "/"
+    }
+    const runURL = ghUrl + sourceControlData?.repoURL + "/actions/runs/" + "10976627244"
+    const actorURL = ghUrl + sourceControlData?.actor
+    const branchURL = ghUrl + sourceControlData?.repoURL + "/tree/" + sourceControlData?.branch
+    const commitURL = ghUrl + sourceControlData?.repoURL + "/commit/" + sourceControlData?.commitSha
     const prParts = sourceControlData?.refs?.split("/") ?? ""
-    const prURL = sourceControlData?.repoURL + "/" + prParts[1] + "/" + prParts[2]
+    const prURL = ghUrl + sourceControlData?.repoURL + "/" + prParts[1] + "/" + prParts[2]
 
     return (
         <Space direction="vertical" size="middle" style={{ display: 'flex' }} >

frontend/src/components/TestGrid/index.tsx

@@ -46,7 +46,9 @@ const columns: TableColumnsType<TestGridRowDataType> = [
     title: "Label",
     dataIndex: "label",
     filterSearch: true,
-    render: (_, record) => <Link href={"tests/" + encodeURIComponent(record.label)}>{record.label}</Link>,
+    render: (_, record) =>
+
+      <Link href={"tests/" + btoa(encodeURIComponent(record.label))}>{record.label}</Link>,
     filterDropdown: filterProps => (
       <SearchWidget placeholder="Target Pattern..." {...filterProps} />
     ),
@@ -123,14 +125,11 @@ const TestGrid: React.FC<Props> = () => {
       var vars: GetTestsWithOffsetQueryVariables = {}
       if (filters['label']?.length) {
         var label = filters['label']?.[0]?.toString() ?? ""
-        console.log(label)
         vars.label = label
       } else {
         vars.label = ""
       }
-      console.log("pagination.curreent", pagination.current)
       vars.offset = ((pagination.current ?? 1) - 1) * PAGE_SIZE;
-      console.log(vars.offset)
       setVariables(vars)
     },
     [variables],

frontend/src/components/TestGridBtn/index.tsx

@@ -39,35 +39,35 @@ const TestGridBtn: React.FC<Props> = ({ status, invocationId }) => {
 
         ),
         PASSED: (
-            <Button href={"/bazel-invocations/" + invocationId} icon={<CheckCircleFilled />} color="success" className={themeStyles.colorSuccess} />
+            <Button href={"/bazel-invocations/" + invocationId} icon={<CheckCircleFilled />} className={themeStyles.colorSuccess} />
 
         ),
         FLAKY: (
-            <Button icon={<InfoCircleFilled />} color="warning" className={themeStyles.colorAborted} />
+            <Button href={"/bazel-invocations/" + invocationId} icon={<InfoCircleFilled />} className={themeStyles.colorAborted} />
 
         ),
         FAILED: (
-            <Button icon={<CloseCircleFilled />} color="danger" className={themeStyles.colorFailure} />
+            <Button href={"/bazel-invocations/" + invocationId} icon={<CloseCircleFilled />} color="danger" className={themeStyles.colorFailure} />
 
         ),
         TIMEOUT: (
-            <Button icon={<MinusCircleFilled />} color="danger" className={themeStyles.colorFailure} />
+            <Button href={"/bazel-invocations/" + invocationId} icon={<MinusCircleFilled />} color="danger" className={themeStyles.colorFailure} />
 
         ),
         INCOMPLETE: (
-            <Button icon={<StopOutlined />} color="secondary" className={themeStyles.colorAborted} />
+            <Button href={"/bazel-invocations/" + invocationId} icon={<StopOutlined />} className={themeStyles.colorAborted} />
 
         ),
         REMOTE_FAILURE: (
-            <Button icon={<CloseCircleFilled />} color="danger" className={themeStyles.colorFailure} />
+            <Button href={"/bazel-invocations/" + invocationId} icon={<CloseCircleFilled />} color="danger" className={themeStyles.colorFailure} />
 
         ),
         FAILED_TO_BUILD: (
-            <Button icon={<QuestionCircleFilled />} color="danger" className={themeStyles.colorFailure} />
+            <Button href={"/bazel-invocations/" + invocationId} icon={<QuestionCircleFilled />} color="danger" className={themeStyles.colorFailure} />
 
         ),
         TOOL_HALTED_BEFORE_TESTING: (
-            <Button icon={<QuestionCircleFilled />} color="secondary" className={themeStyles.colorDisabled} />
+            <Button href={"/bazel-invocations/" + invocationId} icon={<QuestionCircleFilled />} className={themeStyles.colorDisabled} />
         ),
     };
 

frontend/src/components/TestsMetrics/index.tsx

@@ -75,7 +75,7 @@ const test_columns: TableColumnsType<TestDataType> = [
     {
         title: "Label",
         dataIndex: "name",
-        render: (_, record) => <Link href={"/tests/" + encodeURIComponent(record.name)}>{record.name}</Link>,
+        render: (_, record) => <Link href={"/tests/" + btoa(encodeURIComponent(record.name))}>{record.name}</Link>,
         filterSearch: true,
         filterDropdown: filterProps => (
             <SearchWidget placeholder="Target Pattern..." {...filterProps} />