feat: show issueExtraDetails data on treeDetails

Closes #870
kernelci · Feb 11, 2025 · 7248507 · 7248507
1 parent ac40d1b
commit 7248507
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 23 deletions.
diff --git a/dashboard/src/components/Cards/IssuesList.tsx b/dashboard/src/components/Cards/IssuesList.tsx
@@ -1,6 +1,6 @@
 import { memo, useCallback } from 'react';
 
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import type { LinkProps } from '@tanstack/react-router';
 
@@ -29,6 +29,14 @@ import { IssueTooltip } from '@/components/Issue/IssueTooltip';
 import { LinkIcon } from '@/components/Icons/Link';
 import { getIssueFilterLabel } from '@/utils/utils';
 import type { TIssue } from '@/types/issues';
+import type { IssueExtraDetailsDict } from '@/types/issueExtras';
+
+import { LoadingCircle } from '@/components/ui/loading-circle';
+
+import { TooltipDateTime } from '@/components/TooltipDateTime';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/Tooltip';
+
+import { Badge } from '@/components/ui/badge';
 
 interface IIssuesList {
   issues: TIssue[];
@@ -38,6 +46,8 @@ interface IIssuesList {
   issueFilterSection: TFilterObjectsKeys;
   detailsId?: string;
   pageFrom?: RedirectFrom;
+  issueExtraDetails?: IssueExtraDetailsDict;
+  extraDetailsLoading?: boolean; // TODO: make the isLoading not optional once applied to other pages
 }
 
 const IssuesList = ({
@@ -48,6 +58,8 @@ const IssuesList = ({
   issueFilterSection,
   detailsId,
   pageFrom,
+  issueExtraDetails,
+  extraDetailsLoading,
 }: IIssuesList): JSX.Element => {
   const getIssueLink = useCallback(
     (issueId: string, version: number): LinkProps => {
@@ -66,7 +78,7 @@ const IssuesList = ({
     [detailsId, pageFrom],
   );
 
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
 
   failedWithUnknownIssues = failedWithUnknownIssues
     ? failedWithUnknownIssues
@@ -94,24 +106,68 @@ const IssuesList = ({
   ) : (
     <DumbListingContent>
       {issues.map(issue => {
-        return (
-          <div key={issue.id} className="flex w-full justify-between gap-4">
-            <div className="overflow-hidden">
-              <FilterLink
-                filterSection={issueFilterSection}
-                filterValue={getIssueFilterLabel(issue)}
-                diffFilter={diffFilter}
-              >
-                <ListingItem
-                  unknown={issue.incidents_info.incidentsCount}
-                  hasBottomBorder
-                  text={
-                    issue.comment ??
-                    intl.formatMessage({ id: 'global.unknown' })
-                  }
-                  tooltip={issue.comment}
+        const currentExtraDetails =
+          issueExtraDetails?.[issue.id][issue.version];
+
+        const tagPills = currentExtraDetails?.tags?.map(tag => {
+          return (
+            <Tooltip key={tag}>
+              <TooltipTrigger className="cursor-default">
+                <Badge variant={'blueTag'}>{tag}</Badge>
+              </TooltipTrigger>
+              <TooltipContent>
+                <FormattedMessage
+                  id="issue.alsoPresentTooltip"
+                  values={{ tree: tag }}
                 />
-              </FilterLink>
+              </TooltipContent>
+            </Tooltip>
+          );
+        });
+
+        const first_seen = currentExtraDetails?.first_seen;
+
+        return (
+          <div
+            key={`${issue.id}${issue.version}`}
+            className="flex w-full justify-between gap-4"
+          >
+            <div className="flex items-center gap-4">
+              <div className="overflow-hidden">
+                <FilterLink
+                  filterSection={issueFilterSection}
+                  filterValue={getIssueFilterLabel(issue)}
+                  diffFilter={diffFilter}
+                >
+                  <span className="flex items-center text-sm">
+                    <ListingItem
+                      unknown={issue.incidents_info.incidentsCount}
+                      hasBottomBorder
+                      text={
+                        issue.comment ?? formatMessage({ id: 'global.unknown' })
+                      }
+                      tooltip={issue.comment}
+                    />
+                    {extraDetailsLoading ? (
+                      <LoadingCircle className="mx-2" />
+                    ) : (
+                      first_seen && (
+                        <span className="text-nowrap pb-1 text-gray-600">
+                          <span className="pl-2 pr-1">•</span>
+                          {formatMessage({ id: 'issue.firstSeen' })}:{' '}
+                          <TooltipDateTime
+                            dateTime={first_seen}
+                            lineBreak={true}
+                          />
+                        </span>
+                      )
+                    )}
+                  </span>
+                </FilterLink>
+              </div>
+              {tagPills && !extraDetailsLoading && (
+                <div className="flex gap-3">{...tagPills}</div>
+              )}
             </div>
             <div className="flex items-center gap-4">
               {issue.report_url && (
@@ -137,7 +193,7 @@ const IssuesList = ({
         >
           <ListingItem
             unknown={failedWithUnknownIssues}
-            text={intl.formatMessage({ id: 'global.unknown' })}
+            text={formatMessage({ id: 'global.unknown' })}
           />
         </FilterLink>
       )}

diff --git a/dashboard/src/components/ListingItem/ListingItem.tsx b/dashboard/src/components/ListingItem/ListingItem.tsx
@@ -4,8 +4,9 @@ import { useCallback, Fragment, memo } from 'react';
 
 import type { PropsWithChildren } from 'react';
 
-import ColoredCircle from '../ColoredCircle/ColoredCircle';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip';
+import ColoredCircle from '@/components/ColoredCircle/ColoredCircle';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/Tooltip';
 
 export interface IListingItem {
   leftIcon?: React.ReactNode;
@@ -98,7 +99,7 @@ const ListingItem = ({
     return (
       <Tooltip>
         <div className="flex w-full">
-          <TooltipTrigger className="max-w-[200px] overflow-hidden sm:max-w-[300px] md:max-w-[500px] lg:max-w-[700px] xl:max-w-[1000px]">
+          <TooltipTrigger className="max-w-[200px] overflow-hidden md:max-w-[100px] lg:max-w-[325px] xl:max-w-[475px] 2xl:max-w-[700px]">
             {children}
           </TooltipTrigger>
 

diff --git a/dashboard/src/components/ui/badge.tsx b/dashboard/src/components/ui/badge.tsx
@@ -15,6 +15,7 @@ const badgeVariants = cva(
         destructive:
           "border-transparent bg-red-500 text-slate-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/80",
         outline: "text-slate-950 dark:text-slate-50",
+        blueTag: "text-darkBlue outline-mediumLightBlue border-none bg-lightBlue px-2.5 py-0.5 text-xs font-medium capitalize outline outline-1",
       },
     },
     defaultVariants: {

diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -193,6 +193,8 @@ export const messages = {
     'hardwareDetails.timeFrame':
       'Results from {startDate} and {startTime} to {endDate} {endTime}',
     'hardwareDetails.treeBranch': 'Tree / Branch',
+    'issue.alsoPresentTooltip': 'Issue also present in {tree}',
+    'issue.firstSeen': 'First seen',
     'issue.noIssueFound': 'No issue found.',
     'issue.tooltip':
       'Issues groups several builds or tests by matching result status and logs.{br}They may also be linked to an external issue tracker or mailing list discussion.',

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Boots/BootsTab.tsx b/dashboard/src/pages/TreeDetails/Tabs/Boots/BootsTab.tsx
@@ -180,6 +180,8 @@ const BootsTab = ({ treeDetailsLazyLoaded }: BootsTabProps): JSX.Element => {
           issueFilterSection="bootIssue"
           detailsId={treeId}
           pageFrom={RedirectFrom.Tree}
+          issueExtraDetails={treeDetailsLazyLoaded.issuesExtras.data?.issues}
+          extraDetailsLoading={treeDetailsLazyLoaded.issuesExtras.isLoading}
         />
       </DesktopGrid>
       <MobileGrid>
@@ -216,6 +218,8 @@ const BootsTab = ({ treeDetailsLazyLoaded }: BootsTabProps): JSX.Element => {
             issueFilterSection="bootIssue"
             detailsId={treeId}
             pageFrom={RedirectFrom.Tree}
+            issueExtraDetails={treeDetailsLazyLoaded.issuesExtras.data?.issues}
+            extraDetailsLoading={treeDetailsLazyLoaded.issuesExtras.isLoading}
           />
         </InnerMobileGrid>
       </MobileGrid>

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx b/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx
@@ -150,6 +150,8 @@ const BuildTab = ({ treeDetailsLazyLoaded }: BuildTab): JSX.Element => {
           issueFilterSection="buildIssue"
           detailsId={treeId}
           pageFrom={RedirectFrom.Tree}
+          issueExtraDetails={treeDetailsLazyLoaded.issuesExtras.data?.issues}
+          extraDetailsLoading={treeDetailsLazyLoaded.issuesExtras.isLoading}
         />
       </DesktopGrid>
       <MobileGrid>
@@ -180,6 +182,8 @@ const BuildTab = ({ treeDetailsLazyLoaded }: BuildTab): JSX.Element => {
           issueFilterSection="buildIssue"
           detailsId={treeId}
           pageFrom={RedirectFrom.Tree}
+          issueExtraDetails={treeDetailsLazyLoaded.issuesExtras.data?.issues}
+          extraDetailsLoading={treeDetailsLazyLoaded.issuesExtras.isLoading}
         />
       </MobileGrid>
 

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Tests/TestsTab.tsx b/dashboard/src/pages/TreeDetails/Tabs/Tests/TestsTab.tsx
@@ -178,6 +178,8 @@ const TestsTab = ({ treeDetailsLazyLoaded }: TestsTabProps): JSX.Element => {
           issueFilterSection="testIssue"
           detailsId={treeId}
           pageFrom={RedirectFrom.Tree}
+          issueExtraDetails={treeDetailsLazyLoaded.issuesExtras.data?.issues}
+          extraDetailsLoading={treeDetailsLazyLoaded.issuesExtras.isLoading}
         />
       </DesktopGrid>
       <MobileGrid>
@@ -214,6 +216,8 @@ const TestsTab = ({ treeDetailsLazyLoaded }: TestsTabProps): JSX.Element => {
             issueFilterSection="testIssue"
             detailsId={treeId}
             pageFrom={RedirectFrom.Tree}
+            issueExtraDetails={treeDetailsLazyLoaded.issuesExtras.data?.issues}
+            extraDetailsLoading={treeDetailsLazyLoaded.issuesExtras.isLoading}
           />
         </InnerMobileGrid>
       </MobileGrid>

diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js
@@ -50,6 +50,9 @@ module.exports = {
         green: '#53D07C',
         red: '#E15739',
         blue: '#11B3E6',
+        darkBlue: '#1d4ed8',
+        lightBlue: '#e7f7fc',
+        mediumLightBlue: '#bfdbfe'
       },
     },
   },