TaskRun details Page

frontend/packages/dev-console/src/components/pipelineruns/logs/LogSnippetBlock.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react';
-import { PipelineRun } from '../../../utils/pipeline-augment';
 import LogSnippetFromPod from './LogSnippetFromPod';
 import { PipelineRunErrorDetails } from './pipelineRunLogSnippet';
 
 type LogSnippetBlockProps = {
   children: (logSnippet: string) => React.ReactNode;
   logDetails: PipelineRunErrorDetails;
-  pipelineRun: PipelineRun;
+  namespace: string;
 };
 
-const LogSnippetBlock: React.FC<LogSnippetBlockProps> = ({ children, logDetails, pipelineRun }) => {
+const LogSnippetBlock: React.FC<LogSnippetBlockProps> = ({ children, logDetails, namespace }) => {
   return 'podName' in logDetails ? (
     <LogSnippetFromPod
       containerName={logDetails.containerName}
-      namespace={pipelineRun.metadata.namespace}
+      namespace={namespace}
       podName={logDetails.podName}
       title={logDetails.title}
     >

frontend/packages/dev-console/src/components/pipelineruns/logs/PipelineRunDetailsErrorLog.tsx

@@ -23,7 +23,7 @@ const PipelineRunDetailsErrorLog: React.FC<PipelineStatusLogProps> = ({ pipeline
       <dl>
         <dt>Log Snippet</dt>
         <dd>
-          <LogSnippetBlock logDetails={logDetails} pipelineRun={pipelineRun}>
+          <LogSnippetBlock logDetails={logDetails} namespace={pipelineRun.metadata.namespace}>
             {(logSnippet: string) => <pre>{logSnippet}</pre>}
           </LogSnippetBlock>
         </dd>

frontend/packages/dev-console/src/components/pipelines/pipeline-overview/PipelineRunItem.tsx

@@ -51,7 +51,7 @@ const PipelineRunItem: React.FC<PipelineRunItemProps> = ({ pipelineRun }) => {
         </GridItem>
         {logDetails && (
           <GridItem span={12}>
-            <LogSnippetBlock logDetails={logDetails} pipelineRun={pipelineRun}>
+            <LogSnippetBlock logDetails={logDetails} namespace={namespace}>
               {(logSnippet: string) => (
                 <LogSnippet message={logDetails.title} logSnippet={logSnippet} />
               )}

frontend/packages/dev-console/src/components/taskruns/TaskRunDetails.scss

@@ -0,0 +1,7 @@
+.odc-taskrun-details {
+  &__status {
+    dl {
+      margin-bottom: var(--pf-global--spacer--md);
+    }
+  }
+}

frontend/packages/dev-console/src/components/taskruns/TaskRunDetails.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import { SectionHeading, ResourceSummary, ResourceLink } from '@console/internal/components/utils';
+import { PodModel } from '@console/internal/models';
 import { K8sResourceKind } from '@console/internal/module/k8s';
+import { Status } from '@console/shared';
+import { taskRunFilterReducer } from '../../utils/pipeline-filter-reducer';
+import TaskRunDetailsErrorLog from './TaskRunDetailsErrorLog';
 import { TaskRunModel } from '../../models';
+import './TaskRunDetails.scss';
 
 export interface TaskRunDetailsProps {
   obj: K8sResourceKind;
@@ -15,6 +20,27 @@ const TaskRunDetails: React.FC<TaskRunDetailsProps> = ({ obj: taskRun }) => {
         <div className="col-sm-6">
           <ResourceSummary resource={taskRun} />
         </div>
+        <div className="col-sm-6 odc-taskrun-details__status">
+          <dl>
+            <dt>Status</dt>
+            <dd>
+              <Status status={taskRunFilterReducer(taskRun)} />
+            </dd>
+          </dl>
+          <TaskRunDetailsErrorLog taskRun={taskRun} />
+          {taskRun?.status?.podName && (
+            <dl>
+              <dt>Pod</dt>
+              <dd>
+                <ResourceLink
+                  kind={PodModel.kind}
+                  name={taskRun.status.podName}
+                  namespace={taskRun.metadata.namespace}
+                />
+              </dd>
+            </dl>
+          )}
+        </div>
       </div>
     </div>
   );

frontend/packages/dev-console/src/components/taskruns/TaskRunDetailsErrorLog.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { getLogSnippet } from '../pipelineruns/logs/pipelineRunLogSnippet';
+import LogSnippetBlock from '../pipelineruns/logs/LogSnippetBlock';
+import { TaskRunKind } from '../../utils/pipeline-augment';
+
+type TaskStatusLogProps = {
+  taskRun: TaskRunKind;
+};
+
+const TaskRunDetailsErrorLog: React.FC<TaskStatusLogProps> = ({ taskRun }) => {
+  const logDetails = getLogSnippet(taskRun);
+  const namespace = taskRun?.metadata.namespace;
+  if (!logDetails) {
+    return null;
+  }
+
+  return (
+    <>
+      <dl>
+        <dt>Message</dt>
+        <dd>{logDetails.title}</dd>
+      </dl>
+      <dl>
+        <dt>Log Snippet</dt>
+        <dd>
+          <LogSnippetBlock logDetails={logDetails} namespace={namespace}>
+            {(logSnippet: string) => <pre>{logSnippet}</pre>}
+          </LogSnippetBlock>
+        </dd>
+      </dl>
+    </>
+  );
+};
+
+export default TaskRunDetailsErrorLog;

frontend/packages/dev-console/src/components/taskruns/TaskRunDetailsPage.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { DetailsPage, DetailsPageProps } from '@console/internal/components/factory';
 import { navFactory, viewYamlComponent } from '@console/internal/components/utils';
+import { taskRunFilterReducer } from '../../utils/pipeline-filter-reducer';
 import TaskRunDetails from './TaskRunDetails';
 import { useTasksBreadcrumbsFor } from '../pipelines/hooks';
+import TaskRunLog from './TaskRunLog';
 
 const TaskRunDetailsPage: React.FC<DetailsPageProps> = (props) => {
   const { kindObj, match } = props;
@@ -12,7 +14,17 @@ const TaskRunDetailsPage: React.FC<DetailsPageProps> = (props) => {
     <DetailsPage
       {...props}
       breadcrumbsFor={() => breadcrumbsFor}
-      pages={[navFactory.details(TaskRunDetails), navFactory.editYaml(viewYamlComponent)]}
+      getResourceStatus={taskRunFilterReducer}
+      pages={[
+        navFactory.details(TaskRunDetails),
+        navFactory.editYaml(viewYamlComponent),
+        {
+          href: 'logs',
+          path: 'logs/:name?',
+          name: 'Logs',
+          component: TaskRunLog,
+        },
+      ]}
     />
   );
 };

frontend/packages/dev-console/src/components/taskruns/TaskRunLog.scss

@@ -0,0 +1,5 @@
+.odc-task-run-log {
+  display: flex;
+  flex: 1;
+  padding: var(--pf-global--spacer--xl);
+}

frontend/packages/dev-console/src/components/taskruns/TaskRunLog.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Firehose } from '@console/internal/components/utils';
+import { StatusBox } from '@console/internal/components/utils/status-box';
+import { PodModel } from '@console/internal/models';
+import LogsWrapperComponent from '../pipelineruns/logs/LogsWrapperComponent';
+import { TaskRunKind } from '../../utils/pipeline-augment';
+import './TaskRunLog.scss';
+
+export type TaskRunLogProps = {
+  obj: TaskRunKind;
+};
+
+const TaskRunLog: React.FC<TaskRunLogProps> = ({ obj }) => {
+  if (obj?.status?.podName) {
+    const podResources = [
+      {
+        kind: PodModel.kind,
+        isList: false,
+        prop: `obj`,
+        namespace: obj.metadata.namespace,
+        name: obj.status.podName,
+      },
+    ];
+    return (
+      <div className="odc-task-run-log">
+        <Firehose resources={podResources}>
+          <LogsWrapperComponent
+            taskName={obj.metadata.name}
+            downloadAllLabel="Download All TaskRun Logs"
+          />
+        </Firehose>
+      </div>
+    );
+  }
+  return <StatusBox loadError="Pod not found" label="TaskRun Log" />;
+};
+
+export default TaskRunLog;

frontend/packages/dev-console/src/components/taskruns/__tests__/TaskRunDetails.spec.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import { Status } from '@console/shared';
+import TaskRunDetailsErrorLog from '../TaskRunDetailsErrorLog';
+import TaskRunDetails from '../TaskRunDetails';
+import { failedTaskRun, successTaskRun } from './taskrun-test-data';
+
+type Component = typeof TaskRunDetails;
+type Props = React.ComponentProps<Component>;
+const TaskDetailsProps: Props = {
+  obj: failedTaskRun,
+};
+
+describe('TaskRunDetailsPage For Failure', () => {
+  const pipelineRunWrapper = shallow(<TaskRunDetails {...TaskDetailsProps} />);
+  it('Renders a SectionHeading', () => {
+    expect(pipelineRunWrapper.find(SectionHeading).exists()).toBe(true);
+  });
+  it('Renders a Resource Summary', () => {
+    expect(pipelineRunWrapper.find(ResourceSummary).exists()).toBe(true);
+  });
+  it('Renders correct Status', () => {
+    expect(pipelineRunWrapper.find(Status).exists()).toBe(true);
+    expect(pipelineRunWrapper.find(Status).prop('status')).toBe('-');
+  });
+  it('Renders a Task Run Log snippet', () => {
+    expect(pipelineRunWrapper.find(TaskRunDetailsErrorLog).exists()).toBe(true);
+  });
+});
+
+describe('TaskRunDetailsPage For Success', () => {
+  TaskDetailsProps.obj = successTaskRun;
+  const pipelineRunWrapper = shallow(<TaskRunDetails {...TaskDetailsProps} />);
+  it('Renders a SectionHeading', () => {
+    expect(pipelineRunWrapper.find(SectionHeading).exists()).toBe(true);
+  });
+  it('Renders a Resource Summary', () => {
+    expect(pipelineRunWrapper.find(ResourceSummary).exists()).toBe(true);
+  });
+  it('Renders a Status', () => {
+    expect(pipelineRunWrapper.find(Status).exists()).toBe(true);
+    expect(pipelineRunWrapper.find(Status).prop('status')).toBe('Succeeded');
+  });
+  it('Renders a Task Run Log snippet', () => {
+    expect(pipelineRunWrapper.find(TaskRunDetailsErrorLog).exists()).toBe(true);
+  });
+});

frontend/packages/dev-console/src/components/taskruns/__tests__/TaskRunLog.spec.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { StatusBox } from '@console/internal/components/utils/status-box';
+import LogsWrapperComponent from '../../pipelineruns/logs/LogsWrapperComponent';
+import TaskRunLog from '../TaskRunLog';
+import { failedTaskRun } from './taskrun-test-data';
+
+type Component = typeof TaskRunLog;
+type Props = React.ComponentProps<Component>;
+const TaskRunLogProps: Props = {
+  obj: failedTaskRun,
+};
+
+describe('TaskRunLog Page', () => {
+  it('Renders a StatusBox', () => {
+    const taskRunLogWrapper = shallow(<TaskRunLog {...TaskRunLogProps} />);
+    expect(taskRunLogWrapper.find(StatusBox).exists());
+  });
+  it('Renders a PodLog', () => {
+    TaskRunLogProps.obj.status.podName = 'test';
+    const taskRunLogWrapper = shallow(<TaskRunLog {...TaskRunLogProps} />);
+    expect(taskRunLogWrapper.find(LogsWrapperComponent).exists());
+  });
+});

frontend/packages/dev-console/src/components/taskruns/__tests__/taskrun-test-data.ts

@@ -0,0 +1,33 @@
+import { TaskRunKind } from '../../../utils/pipeline-augment';
+
+export const failedTaskRun: TaskRunKind = {
+  kind: 'TaskRun',
+  metadata: { name: 'abhi', namespace: 'abhi1' },
+  status: {
+    completionTime: '2019-10-29T11:57:53Z',
+    conditions: [
+      {
+        lastTransitionTime: '2019-10-29T11:57:53Z',
+        reason: 'Failed',
+        status: 'True',
+        type: 'Failed',
+      },
+    ],
+  },
+};
+
+export const successTaskRun: TaskRunKind = {
+  kind: 'TaskRun',
+  metadata: { name: 'abhi', namespace: 'abhi1' },
+  status: {
+    completionTime: '2019-10-29T11:57:53Z',
+    conditions: [
+      {
+        lastTransitionTime: '2019-10-29T11:57:53Z',
+        reason: 'Succeeded',
+        status: 'True',
+        type: 'Succeeded',
+      },
+    ],
+  },
+};

frontend/packages/dev-console/src/utils/pipeline-filter-reducer.ts

@@ -58,3 +58,8 @@ export const pipelineResourceTypeFilter = (filters, pipelineResource): boolean =
   const type = pipelineResourceFilterReducer(pipelineResource);
   return filters.selected.has(type) || !_.includes(filters.all, type);
 };
+
+export const taskRunFilterReducer = (taskRun): string => {
+  const status = pipelineRunStatus(taskRun);
+  return status || '-';
+};