Add task debug info in job detail page [webportal]

src/webportal/src/app/job/job-view/fabric/job-detail/components/task-role-container-list.jsx

@@ -25,6 +25,7 @@ import {
 } from '@uifabric/styling';
 import c from 'classnames';
 import { capitalize, isEmpty, isNil, flatten } from 'lodash';
+import { DateTime } from 'luxon';
 import {
   CommandBarButton,
   PrimaryButton,
@@ -41,14 +42,15 @@ import {
 } from 'office-ui-fabric-react/lib/DetailsList';
 import PropTypes from 'prop-types';
 import React from 'react';
+import yaml from 'js-yaml';
 
 import localCss from './task-role-container-list.scss';
 import t from '../../../../../components/tachyons.scss';
 
 import Context from './context';
 import Timer from './timer';
 import { getContainerLog } from '../conn';
-import { parseGpuAttr } from '../util';
+import { parseGpuAttr, printDateTime } from '../util';
 import config from '../../../../../config/webportal.config';
 import MonacoPanel from '../../../../../components/monaco-panel';
 import StatusBadge from '../../../../../components/status-badge';
@@ -321,29 +323,116 @@ export default class TaskRoleContainerList extends React.Component {
     }
   }
 
-  getColumns() {
-    const columns = [
+  getColumns(showDebugInfo) {
+    const optionalColumns = [
       {
-        key: 'number',
-        name: 'No.',
+        key: 'startTime',
+        name: 'Start Time',
         headerClassName: FontClassNames.medium,
-        minWidth: 50,
-        maxWidth: 50,
+        minWidth: 150,
+        maxWidth: 200,
         isResizable: true,
-        onRender: (item, idx) => {
+        onRender: item => {
           return (
-            !isNil(idx) && (
-              <div className={FontClassNames.mediumPlus}>{idx}</div>
-            )
+            <div className={c(FontClassNames.mediumPlus)}>
+              {printDateTime(DateTime.fromISO(item.startTime))}
+            </div>
           );
         },
       },
       {
-        key: 'name',
-        name: 'Container ID',
+        key: 'completionTime',
+        name: 'Completion Time',
+        headerClassName: FontClassNames.medium,
+        minWidth: 150,
+        maxWidth: 200,
+        isResizable: true,
+        onRender: item => {
+          return (
+            <div className={c(FontClassNames.mediumPlus)}>
+              {printDateTime(DateTime.fromISO(item.completionTime))}
+            </div>
+          );
+        },
+      },
+      {
+        key: 'nodeName',
+        name: 'Node Name',
         headerClassName: FontClassNames.medium,
         minWidth: 100,
-        maxWidth: 500,
+        isResizable: true,
+        onRender: item => {
+          return (
+            <div className={c(FontClassNames.mediumPlus)}>
+              {item.podNodeName}
+            </div>
+          );
+        },
+      },
+      {
+        key: 'exitDiagonostic',
+        name: 'Exit Diagnostics',
+        headerClassName: FontClassNames.medium,
+        minWidth: 200,
+        isResizable: true,
+        onRender: item => {
+          return (
+            <CommandBarButton
+              className={FontClassNames.mediumPlus}
+              styles={{
+                root: { backgroundColor: 'transparent' },
+                rootDisabled: { backgroundColor: 'transparent' },
+              }}
+              text='Show Exit Diagnostics'
+              onClick={() => {
+                const result = [];
+                // exit spec
+                const spec = item.containerExitSpec;
+                if (spec) {
+                  // divider
+                  result.push(Array.from({ length: 80 }, () => '-').join(''));
+                  result.push('');
+                  // content
+                  result.push('[Exit Spec]');
+                  result.push('');
+                  result.push(yaml.safeDump(spec));
+                  result.push('');
+                }
+
+                // diagnostics
+                const diag = item.containerExitDiagnostics;
+                if (diag) {
+                  // divider
+                  result.push(Array.from({ length: 80 }, () => '-').join(''));
+                  result.push('');
+                  // content
+                  result.push('[Exit Diagnostics]');
+                  result.push('');
+                  result.push(diag);
+                  result.push('');
+                }
+
+                this.setState({
+                  monacoProps: {
+                    language: 'text',
+                    value: result.join('\n'),
+                    options: {
+                      wordWrap: 'off',
+                      readOnly: true,
+                    },
+                  },
+                  monacoTitle: `Task Exit Diagonostics`,
+                });
+              }}
+            />
+          );
+        },
+      },
+      {
+        key: 'containerId',
+        name: 'Container ID',
+        headerClassName: FontClassNames.medium,
+        minWidth: 300,
         isResizable: true,
         onRender: item => {
           const id = item.containerId;
@@ -356,6 +445,23 @@ export default class TaskRoleContainerList extends React.Component {
           );
         },
       },
+    ];
+    const defaultColumns = [
+      {
+        key: 'number',
+        name: 'No.',
+        headerClassName: FontClassNames.medium,
+        minWidth: 30,
+        maxWidth: 50,
+        isResizable: true,
+        onRender: (item, idx) => {
+          return (
+            !isNil(idx) && (
+              <div className={FontClassNames.mediumPlus}>{idx}</div>
+            )
+          );
+        },
+      },
       {
         key: 'ip',
         name: 'IP',
@@ -392,7 +498,7 @@ export default class TaskRoleContainerList extends React.Component {
         className: FontClassNames.mediumPlus,
         headerClassName: FontClassNames.medium,
         minWidth: 120,
-        maxWidth: 180,
+        maxWidth: 200,
         isResizable: true,
         onRender: item => {
           const ports = item.containerPorts;
@@ -429,8 +535,8 @@ export default class TaskRoleContainerList extends React.Component {
         name: 'GPUs',
         className: FontClassNames.mediumPlus,
         headerClassName: FontClassNames.medium,
-        minWidth: 40,
-        maxWidth: 60,
+        minWidth: 35,
+        maxWidth: 50,
         isResizable: true,
         onRender: item => {
           const gpuAttr = isNil(item.containerGpus)
@@ -486,17 +592,62 @@ export default class TaskRoleContainerList extends React.Component {
         name: 'Status',
         headerClassName: FontClassNames.medium,
         minWidth: 100,
-        maxWidth: 100,
+        maxWidth: 150,
         isResizable: true,
         onRender: item => <StatusBadge status={capitalize(item.taskState)} />,
       },
+      {
+        key: 'retryCount',
+        name: 'Retries',
+        headerClassName: FontClassNames.medium,
+        minWidth: 50,
+        maxWidth: 100,
+        isResizable: true,
+        onRender: (item, idx) => {
+          return (
+            <div className={FontClassNames.mediumPlus}>
+              {item.totalRetriedCount}
+            </div>
+          );
+        },
+      },
+      {
+        key: 'exitCode',
+        name: 'Exit Code',
+        headerClassName: FontClassNames.medium,
+        minWidth: 100,
+        maxWidth: 150,
+        isResizable: true,
+        onRender: item => {
+          return (
+            <div className={c(FontClassNames.mediumPlus)}>
+              {item.containerExitCode}
+            </div>
+          );
+        },
+      },
+      {
+        key: 'exitType',
+        name: 'Exit Type',
+        headerClassName: FontClassNames.medium,
+        minWidth: 150,
+        maxWidth: 200,
+        isResizable: true,
+        onRender: item => {
+          return (
+            <div className={c(FontClassNames.mediumPlus)}>
+              {item.containerExitSpec.type}
+            </div>
+          );
+        },
+      },
       {
         key: 'info',
-        name: 'Info',
+        name: 'Info & Logs',
         className: localCss.pa0I,
         headerClassName: FontClassNames.medium,
-        minWidth: 300,
-        maxWidth: 340,
+        minWidth: 330,
+        maxWidth: 500,
         onRender: item => (
           <div
             className={c(t.h100, t.flex, t.justifyStart, t.itemsCenter, t.ml1)}
@@ -509,7 +660,7 @@ export default class TaskRoleContainerList extends React.Component {
                   rootDisabled: { backgroundColor: 'transparent' },
                 }}
                 iconProps={{ iconName: 'CommandPrompt' }}
-                text='View SSH Info'
+                text='SSH Info'
                 onClick={() => {
                   this.showSshInfo(
                     item.containerId,
@@ -595,6 +746,11 @@ export default class TaskRoleContainerList extends React.Component {
       },
     ];
 
+    let columns = defaultColumns;
+    if (showDebugInfo) {
+      columns = defaultColumns.concat(optionalColumns);
+    }
+
     return columns;
   }
 
@@ -613,7 +769,7 @@ export default class TaskRoleContainerList extends React.Component {
 
   render() {
     const { monacoTitle, monacoProps, monacoFooterButton, logUrl } = this.state;
-    const { className, style, taskInfo } = this.props;
+    const { className, style, taskInfo, showDebugInfo } = this.props;
     const status = taskInfo.taskStatuses;
     return (
       <div
@@ -622,7 +778,8 @@ export default class TaskRoleContainerList extends React.Component {
       >
         <ThemeProvider theme={theme}>
           <DetailsList
-            columns={this.getColumns()}
+            styles={{ root: { overflow: 'auto' } }}
+            columns={this.getColumns(showDebugInfo)}
             disableSelectionZone
             items={status}
             layoutMode={DetailsListLayoutMode.justified}
@@ -654,4 +811,5 @@ TaskRoleContainerList.propTypes = {
   className: PropTypes.string,
   style: PropTypes.object,
   taskInfo: PropTypes.object,
+  showDebugInfo: PropTypes.bool,
 };

src/webportal/src/app/job/job-view/fabric/job-detail/components/task-role.jsx

@@ -18,7 +18,13 @@
 import { FontClassNames, ColorClassNames, getTheme } from '@uifabric/styling';
 import c from 'classnames';
 import { capitalize } from 'lodash';
-import { Icon, IconButton, TooltipHost } from 'office-ui-fabric-react';
+import {
+  Icon,
+  IconButton,
+  TooltipHost,
+  Toggle,
+  Stack,
+} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import yaml from 'js-yaml';
@@ -101,6 +107,7 @@ export default class TaskRole extends React.Component {
     super(props);
     this.state = {
       containerListExpanded: true,
+      showDebugInfo: false,
     };
     this.taskConfigButtonRef = React.createRef();
     this.expandContainerList = this.expandContainerList.bind(this);
@@ -170,7 +177,16 @@ export default class TaskRole extends React.Component {
               </div>
             </div>
             {/* right */}
-            <div>
+            <Stack horizontal verticalAlign='end' gap='s1'>
+              <Toggle
+                onText='Debug Info'
+                offText='Debug Info'
+                onChange={(event, checked) => {
+                  this.setState({
+                    showDebugInfo: checked,
+                  });
+                }}
+              />
               {containerListExpanded ? (
                 <IconButton
                   iconProps={{ iconName: 'ChevronUp' }}
@@ -182,10 +198,14 @@ export default class TaskRole extends React.Component {
                   onClick={this.expandContainerList}
                 />
               )}
-            </div>
+            </Stack>
           </div>
           {containerListExpanded && (
-            <TaskRoleContainerList className={t.ph5} taskInfo={taskInfo} />
+            <TaskRoleContainerList
+              className={t.ph5}
+              taskInfo={taskInfo}
+              showDebugInfo={this.state.showDebugInfo}
+            />
           )}
         </Card>
       </div>