feat(dashboard): add build link on test details

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

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -155,6 +155,7 @@ export const messages = {
     'testDetails.gitCommitHash': 'Git Commit Hash',
     'testDetails.gitRepositoryBranch': 'Git Repository Branch',
     'testDetails.gitRepositoryUrl': 'Git Repository Url',
+    'testDetails.logBuildDetails': 'Log Build Details',
     'testDetails.logExcerpt': 'Log Excerpt',
     'testDetails.logUrl': 'Log Url',
     'testDetails.notFound': 'Test not found',

diff --git a/dashboard/src/pages/TestDetails/TestDetails.tsx b/dashboard/src/pages/TestDetails/TestDetails.tsx
@@ -1,3 +1,5 @@
+import { MdLink } from 'react-icons/md';
+
 import { useParams, useSearch } from '@tanstack/react-router';
 
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -58,6 +60,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 +87,8 @@ 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 && valueOrEmpty(test.log_url),
+        icon: test.log_url && <MdLink className="text-blue" />,
       },
       {
         title: intl.formatMessage({ id: 'testDetails.gitCommitHash' }),
@@ -89,12 +97,19 @@ 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 && valueOrEmpty(test.git_repository_url),
+        icon: <MdLink className="text-blue" />,
       },
       {
         title: intl.formatMessage({ id: 'testDetails.gitRepositoryBranch' }),
         linkText: valueOrEmpty(test.git_repository_branch),
       },
+      {
+        title: intl.formatMessage({ id: 'testDetails.logBuildDetails' }),
+        linkText: truncateBigText(test.build_id),
+        link: buildDetailsLink,
+        icon: <MdLink className="text-blue" />,
+      },
       {
         title: intl.formatMessage({ id: 'testDetails.platform' }),
         linkText: platform,
@@ -105,6 +120,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 +129,7 @@ const TestDetailsSection = ({ test }: { test: TTestDetails }): JSX.Element => {
     test.path,
     test.status,
     platform,
+    buildDetailsLink,
   ]);
   return <Subsection infos={infos} />;
 };