OCPBUGS-23749: Improve PipelineRun list page responsiveness

frontend/packages/pipelines-plugin/locales/en/pipelines-plugin.json

@@ -106,6 +106,7 @@
   "Started": "Started",
   "Signed": "Signed",
   "Archived in Tekton results": "Archived in Tekton results",
+  "ago": "ago",
   "Unknown failure condition": "Unknown failure condition",
   "Failure on task {{taskName}} - check logs for details.": "Failure on task {{taskName}} - check logs for details.",
   "Error downloading logs.": "Error downloading logs.",

frontend/packages/pipelines-plugin/src/components/pipelineruns/list-page/PipelineRunList.scss

@@ -12,8 +12,11 @@
   &__results-indicator {
     display: inline-block;
     margin-left: var(--pf-global--spacer--xs);
-    > svg{
+    > svg {
       color: var(--pf-global--Color--400);
     }
   }
+  &__started-timestamp {
+    display: flex;
+  }
 }

frontend/packages/pipelines-plugin/src/components/pipelineruns/list-page/PipelineRunRow.tsx

@@ -3,7 +3,7 @@ import { Tooltip } from '@patternfly/react-core';
 import { ArchiveIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
 import { TableData, RowFunctionArgs } from '@console/internal/components/factory';
-import { Timestamp, ResourceLink } from '@console/internal/components/utils';
+import { Timestamp, ResourceLink, truncateMiddle } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import {
   DELETED_RESOURCE_IN_K8S_ANNOTATION,
@@ -31,15 +31,17 @@ const pipelinerunReference = referenceForModel(PipelineRunModel);
 type PLRStatusProps = {
   obj: PipelineRunKind;
   taskRuns: TaskRunKind[];
+  iconOnly?: boolean;
 };
 
-const PLRStatus: React.FC<PLRStatusProps> = ({ obj, taskRuns }) => {
+const PLRStatus: React.FC<PLRStatusProps> = ({ obj, taskRuns, iconOnly = false }) => {
   return (
     <PipelineRunStatus
       status={pipelineRunFilterReducer(obj)}
       title={pipelineRunTitleFilterReducer(obj)}
       pipelineRun={obj}
       taskRuns={taskRuns}
+      iconOnly={iconOnly}
     />
   );
 };
@@ -54,7 +56,7 @@ const PipelineRunRow: React.FC<RowFunctionArgs<PipelineRunKind>> = ({ obj, custo
       <TableData className={tableColumnClasses.name}>
         <ResourceLink
           kind={pipelinerunReference}
-          name={obj.metadata.name}
+          name={truncateMiddle(obj.metadata.name, { length: 12 })}
           namespace={obj.metadata.namespace}
           data-test-id={obj.metadata.name}
           nameSuffix={
@@ -85,15 +87,20 @@ const PipelineRunRow: React.FC<RowFunctionArgs<PipelineRunKind>> = ({ obj, custo
         <PipelineRunVulnerabilities pipelineRun={obj} condensed />
       </TableData>
       <TableData className={tableColumnClasses.status}>
-        <PLRStatus obj={obj} taskRuns={PLRTaskRuns} />
+        <PLRStatus obj={obj} taskRuns={PLRTaskRuns} iconOnly />
       </TableData>
       <TableData className={tableColumnClasses.taskStatus}>
         <LinkedPipelineRunTaskStatus pipelineRun={obj} taskRuns={PLRTaskRuns} />
       </TableData>
       <TableData className={tableColumnClasses.started}>
-        <Timestamp timestamp={obj.status && obj.status.startTime} />
+        <div className="opp-pipeline-run-list__started-timestamp">
+          <Timestamp timestamp={obj.status && obj.status.startTime} omitSuffix />{' '}
+          <div>&nbsp; {t('pipelines-plugin~ago')}</div>
+        </div>
+      </TableData>
+      <TableData className={tableColumnClasses.duration}>
+        {pipelineRunDuration(obj, false)}
       </TableData>
-      <TableData className={tableColumnClasses.duration}>{pipelineRunDuration(obj)}</TableData>
       <TableData className={tableColumnClasses.actions}>
         <ResourceKebabWithUserLabel
           actions={getPipelineRunKebabActions(operatorVersion, taskRuns)}

frontend/packages/pipelines-plugin/src/components/pipelineruns/list-page/pipelinerun-table.ts

@@ -4,9 +4,9 @@ export const tableColumnClasses = {
   name: '',
   namespace: '',
   vulnerabilities: 'pf-m-hidden pf-m-visible-on-md',
-  status: 'pf-m-hidden pf-m-visible-on-sm',
+  status: 'pf-m-hidden pf-m-visible-on-sm pf-v5-u-w-10-on-lg',
   taskStatus: 'pf-m-hidden pf-m-visible-on-lg',
-  started: 'pf-m-hidden pf-m-visible-on-lg',
-  duration: 'pf-m-hidden pf-m-visible-on-xl',
+  started: 'pf-m-hidden pf-m-visible-on-lg pf-v5-u-w-15-on-lg',
+  duration: 'pf-m-hidden pf-m-visible-on-xl pf-v5-u-w-10-on-lg',
   actions: Kebab.columnClass,
 };

frontend/packages/pipelines-plugin/src/components/pipelineruns/status/PipelineResourceStatus.tsx

@@ -5,13 +5,15 @@ type PipelineResourceStatusProps = {
   status: string;
   children?: React.ReactNode;
   title?: string;
+  iconOnly?: boolean;
 };
 const PipelineResourceStatus: React.FC<PipelineResourceStatusProps> = ({
   status,
   children,
   title,
+  iconOnly,
 }) => (
-  <Status status={status} title={title}>
+  <Status status={status} title={title} iconOnly={iconOnly}>
     {status === 'Failed' && React.Children.toArray(children).length > 0 && children}
   </Status>
 );

frontend/packages/pipelines-plugin/src/components/pipelineruns/status/PipelineRunStatus.tsx

@@ -14,17 +14,19 @@ type PipelineRunStatusProps = {
   pipelineRun: PipelineRunKind;
   title?: string;
   taskRuns: TaskRunKind[];
+  iconOnly?: boolean;
 };
 const PipelineRunStatus: React.FC<PipelineRunStatusProps> = ({
   status,
   pipelineRun,
   title,
   taskRuns,
+  iconOnly,
 }) => {
   const { t } = useTranslation();
   return pipelineRun ? (
     taskRuns.length > 0 ? (
-      <PipelineResourceStatus status={status} title={title}>
+      <PipelineResourceStatus status={status} title={title} iconOnly={iconOnly}>
         <StatusPopoverContent
           logDetails={getPLRLogSnippet(pipelineRun, taskRuns)}
           namespace={pipelineRun.metadata.namespace}

frontend/packages/pipelines-plugin/src/utils/pipeline-utils.ts

@@ -354,15 +354,18 @@ export const calculateDuration = (startTime: string, endTime?: string, long?: bo
   return getDuration(durationInSeconds, long);
 };
 
-export const pipelineRunDuration = (run: PipelineRunKind | TaskRunKind): string => {
+export const pipelineRunDuration = (
+  run: PipelineRunKind | TaskRunKind,
+  long: boolean = true,
+): string => {
   const startTime = run?.status?.startTime ?? null;
   const completionTime = run?.status?.completionTime ?? null;
 
   // Duration cannot be computed if start time is missing or a completed/failed pipeline/task has no end time
   if (!startTime || (!completionTime && pipelineRunStatus(run) !== 'Running')) {
     return '-';
   }
-  return calculateDuration(startTime, completionTime, true);
+  return calculateDuration(startTime, completionTime, long);
 };
 
 export const updateServiceAccount = (