feat(dashboard): add build link on test details

Closes #259
kernelci · Sep 20, 2024 · 3a4fac8 · 3a4fac8
1 parent 4aac24a
commit 3a4fac8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/dashboard/src/components/Section/Section.tsx b/dashboard/src/components/Section/Section.tsx
@@ -1,3 +1,5 @@
+import { FiLink } from 'react-icons/fi';
+
 import { ReactElement, useMemo } from 'react';
 
 import LinkWithIcon, { ILinkWithIcon } from '../LinkWithIcon/LinkWithIcon';
@@ -21,7 +23,13 @@ export const Subsection = ({ infos }: ISubsection): JSX.Element => {
           title={info.title}
           link={info.link}
           linkText={info.linkText}
-          icon={info.icon}
+          icon={
+            info.link && !info.icon ? (
+              <FiLink className="text-blue" />
+            ) : (
+              info.icon
+            )
+          }
         />
       )),
     [infos],

diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -148,6 +148,7 @@ export const messages = {
     'table.showing': 'Showing:',
     'table.tree': 'Tree',
     'testDetails.arch': 'Arch',
+    'testDetails.buildInfo': 'Build Info',
     'testDetails.compiler': 'Compiler',
     'testDetails.duration': 'Duration',
     'testDetails.errorMessage': 'Error message',

diff --git a/dashboard/src/pages/TestDetails/TestDetails.tsx b/dashboard/src/pages/TestDetails/TestDetails.tsx
@@ -58,6 +58,11 @@ const TestDetailsSection = ({ test }: { test: TTestDetails }): JSX.Element => {
     ? JSON.parse(misc).platform
     : intl.formatMessage({ id: 'global.unknown' });
 
+  const buildDetailsLink =
+    `${window.location.origin}` +
+    `/tree/${test.git_commit_hash}/build/${test.build_id}` +
+    `${window.location.search}`;
+
   const infos: ISubsection['infos'] = useMemo(() => {
     const baseInfo = [
       {
@@ -80,7 +85,7 @@ const TestDetailsSection = ({ test }: { test: TTestDetails }): JSX.Element => {
       {
         title: intl.formatMessage({ id: 'testDetails.logUrl' }),
         linkText: truncateBigText(valueOrEmpty(test.log_url)),
-        link: valueOrEmpty(test.log_url),
+        link: test.log_url,
       },
       {
         title: intl.formatMessage({ id: 'testDetails.gitCommitHash' }),
@@ -89,12 +94,17 @@ const TestDetailsSection = ({ test }: { test: TTestDetails }): JSX.Element => {
       {
         title: intl.formatMessage({ id: 'testDetails.gitRepositoryUrl' }),
         linkText: truncateBigText(valueOrEmpty(test.git_repository_url)),
-        link: valueOrEmpty(test.git_repository_url),
+        link: test.git_repository_url,
       },
       {
         title: intl.formatMessage({ id: 'testDetails.gitRepositoryBranch' }),
         linkText: valueOrEmpty(test.git_repository_branch),
       },
+      {
+        title: intl.formatMessage({ id: 'testDetails.buildInfo' }),
+        linkText: truncateBigText(test.build_id),
+        link: buildDetailsLink,
+      },
       {
         title: intl.formatMessage({ id: 'testDetails.platform' }),
         linkText: platform,
@@ -105,6 +115,7 @@ const TestDetailsSection = ({ test }: { test: TTestDetails }): JSX.Element => {
   }, [
     intl,
     test.architecture,
+    test.build_id,
     test.compiler,
     test.git_commit_hash,
     test.git_repository_branch,
@@ -113,6 +124,7 @@ const TestDetailsSection = ({ test }: { test: TTestDetails }): JSX.Element => {
     test.path,
     test.status,
     platform,
+    buildDetailsLink,
   ]);
   return <Subsection infos={infos} />;
 };