Add task retry info in job detail page

src/rest-server/index.js

@@ -15,5 +15,4 @@
 // DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-
 module.exports = require('./src/server');

src/webportal/config/webpack.common.js

@@ -70,6 +70,7 @@ const config = (env, argv) => ({
     submit_v1: './src/app/job/job-submit-v1/job-submit.component.js',
     jobList: './src/app/job/job-view/fabric/job-list.jsx',
     jobDetail: './src/app/job/job-view/fabric/job-detail.jsx',
+    taskAttempt: './src/app/job/job-view/fabric/task-attempt.jsx',
     jobRetry: './src/app/job/job-view/fabric/job-retry.jsx',
     virtualClusters: './src/app/vc/vc.component.js',
     services: './src/app/cluster-view/services/services.component.js',
@@ -334,6 +335,10 @@ const config = (env, argv) => ({
       filename: 'job-detail.html',
       chunks: ['layout', 'jobDetail'],
     }),
+    generateHtml({
+      filename: 'task-attempt.html',
+      chunks: ['layout', 'taskAttempt'],
+    }),
     generateHtml({
       filename: 'job-retry.html',
       chunks: ['layout', 'jobRetry'],

src/webportal/src/app/components/horizontal-line.jsx

@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { getTheme } from '@uifabric/styling';
+import styled from 'styled-components';
+
+const { palette } = getTheme();
+
+const HorizontalLine = styled.hr`
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid ${palette.neutralTertiaryAlt};
+  margin: 1px 0;
+  padding: 0;
+`;
+
+export default HorizontalLine;

src/webportal/src/app/job/job-view/fabric/job-detail.jsx

@@ -15,12 +15,15 @@
 // DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import classNames from 'classnames';
-import { get, isEmpty, isNil } from 'lodash';
+import { capitalize, isEmpty, isNil } from 'lodash';
+import { DateTime } from 'luxon';
 import {
-  FontClassNames,
   MessageBar,
   MessageBarType,
+  Stack,
+  Dropdown,
+  Text,
+  Toggle,
 } from 'office-ui-fabric-react';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -31,7 +34,6 @@ import Context from './job-detail/components/context';
 import Top from './job-detail/components/top';
 import Summary from './job-detail/components/summary';
 import { SpinnerLoading } from '../../../components/loading';
-import TaskRole from './job-detail/components/task-role';
 import {
   fetchJobConfig,
   fetchJobInfo,
@@ -40,7 +42,10 @@ import {
   NotFoundError,
   fetchRawJobConfig,
 } from './job-detail/conn';
-import { getHumanizedJobStateString } from '../../../components/util/job';
+import Card from './job-detail/components/card';
+import HorizontalLine from '../../../components/horizontal-line';
+import StatusBadge from '../../../components/status-badge';
+import TaskRoleContainerList from './job-detail/components/task-role-container-list';
 
 class JobDetail extends React.Component {
   constructor(props) {
@@ -55,9 +60,15 @@ class JobDetail extends React.Component {
       rawJobConfig: null,
       jobConfig: null,
       sshInfo: null,
+      showMoreDiagnostics: false,
+      selectedAttemptIndex: null,
     };
     this.stop = this.stop.bind(this);
     this.reload = this.reload.bind(this);
+    this.onChangeJobAttempt = this.onChangeJobAttempt.bind(this);
+    this.onChangeShowMoreDiagnostics = this.onChangeShowMoreDiagnostics.bind(
+      this,
+    );
   }
 
   componentDidMount() {
@@ -76,7 +87,7 @@ class JobDetail extends React.Component {
     };
     const loadJobInfo = async () => {
       try {
-        nextState.jobInfo = await fetchJobInfo();
+        nextState.jobInfo = await fetchJobInfo(this.state.selectedAttemptIndex);
       } catch (err) {
         nextState.error = `fetch job status failed: ${err.message}`;
       }
@@ -132,6 +143,7 @@ class JobDetail extends React.Component {
     if (alertFlag === true && !isNil(nextState.error)) {
       alert(nextState.error);
     }
+    nextState.selectedAttemptIndex = nextState.jobInfo.jobStatus.retries;
     this.setState(nextState);
   }
 
@@ -140,48 +152,19 @@ class JobDetail extends React.Component {
     await this.reload();
   }
 
-  renderTaskRoles() {
-    const { jobConfig, jobInfo } = this.state;
-    if (!isEmpty(jobInfo.taskRoles)) {
-      const failedTaskRole =
-        getHumanizedJobStateString(jobInfo.jobStatus) === 'Failed' &&
-        get(jobInfo, 'jobStatus.appExitTriggerTaskRoleName');
-      return Object.keys(jobInfo.taskRoles).map(name => (
-        <TaskRole
-          key={name}
-          className={t.mt3}
-          name={name}
-          taskInfo={jobInfo.taskRoles[name]}
-          isFailed={failedTaskRole && name === failedTaskRole}
-        />
-      ));
-    } else if (jobConfig && jobConfig.taskRoles) {
-      return Object.entries(jobConfig.taskRoles).map(([name, taskConfig]) => {
-        // dummy tasks
-        let dummyTaskInfo = null;
-        if (taskConfig) {
-          const instances = isNil(taskConfig.instances)
-            ? 1
-            : taskConfig.instances;
-          dummyTaskInfo = {
-            taskStatuses: Array.from({ length: instances }, (v, idx) => ({
-              taskState: 'WAITING',
-            })),
-          };
-        }
-
-        return (
-          <TaskRole
-            key={name}
-            name={name}
-            className={t.mt3}
-            taskInfo={dummyTaskInfo}
-          />
-        );
+  onChangeJobAttempt(event, item) {
+    fetchJobInfo(item.key).then(data => {
+      this.setState({
+        selectedAttemptIndex: item.key,
+        jobInfo: data,
       });
-    } else {
-      return null;
-    }
+    });
+  }
+
+  onChangeShowMoreDiagnostics(event, checked) {
+    this.setState({
+      showMoreDiagnostics: checked,
+    });
   }
 
   render() {
@@ -193,13 +176,25 @@ class JobDetail extends React.Component {
       jobConfig,
       rawJobConfig,
       sshInfo,
+      selectedAttemptIndex,
     } = this.state;
+
+    const attemptIndexOptions = [];
+    if (!isNil(jobInfo)) {
+      for (let index = jobInfo.jobStatus.retries; index >= 0; index -= 1) {
+        if (index === jobInfo.jobStatus.retries) {
+          attemptIndexOptions.push({ key: index, text: `${index}  (latest)` });
+        } else {
+          attemptIndexOptions.push({ key: index, text: index });
+        }
+      }
+    }
     if (loading) {
       return <SpinnerLoading />;
     } else {
       return (
         <Context.Provider value={{ sshInfo, rawJobConfig, jobConfig }}>
-          <div className={classNames(t.w100, t.pa4, FontClassNames.medium)}>
+          <Stack styles={{ root: { margin: '30px' } }} gap='l1'>
             <Top />
             {!isEmpty(error) && (
               <div className={t.bgWhite}>
@@ -215,8 +210,70 @@ class JobDetail extends React.Component {
               onStopJob={this.stop}
               onReload={this.reload}
             />
-            {this.renderTaskRoles()}
-          </div>
+            <Card>
+              <Stack gap='l2' padding='l2'>
+                <Stack horizontal gap='m' verticalAlign='center'>
+                  <Text variant='large'>Job Attempt Index</Text>
+                  <Dropdown
+                    styles={{ root: { width: '150px' } }}
+                    placeholder='Select Attempt Index'
+                    options={attemptIndexOptions}
+                    defaultSelectedKey={selectedAttemptIndex || undefined}
+                    onChange={this.onChangeJobAttempt}
+                  />
+                </Stack>
+                <Stack
+                  horizontal
+                  horizontalAlign='space-between'
+                  verticalAlign='end'
+                  gap='m'
+                >
+                  <Stack horizontal gap='l1'>
+                    <Stack gap='m'>
+                      <Text>Attempt State</Text>
+                      <StatusBadge
+                        status={capitalize(jobInfo.jobStatus.attemptState)}
+                      />
+                    </Stack>
+                    <Stack gap='m'>
+                      <Text>Attempt Start Time</Text>
+                      <Text>
+                        {DateTime.fromMillis(
+                          jobInfo.jobStatus.createdTime,
+                        ).toLocaleString(DateTime.DATETIME_MED)}
+                      </Text>
+                    </Stack>
+                    <Stack gap='m'>
+                      <Text>Attempt Complete Time</Text>
+                      <Text>
+                        {DateTime.fromMillis(
+                          jobInfo.jobStatus.completedTime,
+                        ).toLocaleString(DateTime.DATETIME_MED)}
+                      </Text>
+                    </Stack>
+                  </Stack>
+                  <Toggle
+                    onText='More Diagnostics'
+                    offText='More Diagnostics'
+                    onChange={this.onChangeShowMoreDiagnostics}
+                  />
+                </Stack>
+                {!isEmpty(jobInfo.taskRoles) &&
+                  Object.keys(jobInfo.taskRoles).map(name => (
+                    <Stack key={name} gap='m'>
+                      <HorizontalLine />
+                      <Text variant='large'>{`Task Role:  ${name}`}</Text>
+                      <TaskRoleContainerList
+                        taskRoleName={name}
+                        tasks={jobInfo.taskRoles[name].taskStatuses}
+                        showMoreDiagnostics={this.state.showMoreDiagnostics}
+                        jobAttemptIndex={this.state.selectedAttemptIndex}
+                      />
+                    </Stack>
+                  ))}
+              </Stack>
+            </Card>
+          </Stack>
         </Context.Provider>
       );
     }