Add status information to Runs and Run pages

Update the list page for Run resources to match the design for the
PipelineRuns and TaskRuns pages, including PipelineRun/Trigger info,
status, time, etc.

Add status info to the additional metadata section on the details
page, using the same content displayed in the status tooltip on the
Runs list page.

Ensure Runs are sorted by creation time so their display is consistent
with TaskRuns, PipelineRuns, etc., and newer runs appear at the top.

Since we do not know all of the possible status reasons for custom tasks,
we assign a default status icon to keep text alignment while the Run is
in a non-terminal state.

packages/components/src/components/TaskRuns/TaskRuns.js

@@ -133,7 +133,12 @@ const TaskRuns = ({
     });
     const taskRefName = taskRun.spec.taskRef?.name;
     const taskRefKind = taskRun.spec.taskRef?.kind;
-    const { lastTransitionTime, reason, status } = getStatus(taskRun);
+    const {
+      lastTransitionTime,
+      reason,
+      status,
+      message: statusMessage
+    } = getStatus(taskRun);
     const statusIcon = getTaskRunStatusIcon(taskRun);
     const taskRunURL = getTaskRunURL({
       namespace,
@@ -212,11 +217,8 @@ const TaskRuns = ({
             </div>
           </div>
           {status === 'False' ? (
-            <span
-              className="tkn--table--sub"
-              title={getStatus(taskRun).message}
-            >
-              {getStatus(taskRun).message}&nbsp;
+            <span className="tkn--table--sub" title={statusMessage}>
+              {statusMessage}&nbsp;
             </span>
           ) : (
             <span className="tkn--table--sub">&nbsp;</span>

src/containers/Run/Run.js

@@ -10,17 +10,70 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+/* istanbul ignore file */
 
 import React from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { injectIntl } from 'react-intl';
-import { ResourceDetails, Table } from '@tektoncd/dashboard-components';
-import { useTitleSync } from '@tektoncd/dashboard-utils';
+import { UndefinedFilled20 as UndefinedIcon } from '@carbon/icons-react';
+import {
+  FormattedDuration,
+  ResourceDetails,
+  StatusIcon,
+  Table
+} from '@tektoncd/dashboard-components';
+import { getStatus, useTitleSync } from '@tektoncd/dashboard-utils';
 
 import { useRun } from '../../api';
 import { getViewChangeHandler } from '../../utils';
 
-/* istanbul ignore next */
+function getRunDuration(run) {
+  if (!run) {
+    return null;
+  }
+
+  const { creationTimestamp } = run.metadata;
+  const { lastTransitionTime, status } = getStatus(run);
+
+  let endTime = Date.now();
+  if (status === 'False' || status === 'True') {
+    endTime = new Date(lastTransitionTime).getTime();
+  }
+
+  return (
+    <FormattedDuration
+      milliseconds={endTime - new Date(creationTimestamp).getTime()}
+    />
+  );
+}
+
+function getRunStatus(run) {
+  const { reason } = getStatus(run);
+  return reason;
+}
+
+function getRunStatusIcon(run) {
+  if (!run) {
+    return null;
+  }
+  const { reason, status } = getStatus(run);
+  return (
+    <StatusIcon DefaultIcon={UndefinedIcon} reason={reason} status={status} />
+  );
+}
+
+function getRunStatusTooltip(run) {
+  if (!run) {
+    return null;
+  }
+  const { message } = getStatus(run);
+  const reason = getRunStatus(run);
+  if (!message) {
+    return reason;
+  }
+  return `${reason} - ${message}`;
+}
+
 function Run({ intl }) {
   const history = useHistory();
   const location = useLocation();
@@ -72,7 +125,29 @@ function Run({ intl }) {
 
   return (
     <ResourceDetails
-      additionalMetadata={null}
+      additionalMetadata={
+        <>
+          <p>
+            <span>
+              {intl.formatMessage({
+                id: 'dashboard.run.duration.label',
+                defaultMessage: 'Duration:'
+              })}
+            </span>
+            {getRunDuration(run)}
+          </p>
+          <p>
+            <span>
+              {intl.formatMessage({
+                id: 'dashboard.filter.status.title',
+                defaultMessage: 'Status:'
+              })}
+            </span>
+            {getRunStatusIcon(run)}
+            {getRunStatusTooltip(run)}
+          </p>
+        </>
+      }
       error={error}
       loading={isFetching}
       onViewChange={getViewChangeHandler({ history, location })}
@@ -116,7 +191,6 @@ function Run({ intl }) {
               {customTaskName}
             </p>
           ) : null}
-          {/* TODO: status */}
         </div>
         {rowsForParameters.length ? (
           <Table