Add job event page

src/webportal/config/webpack.common.js

@@ -71,6 +71,7 @@ const config = (env, argv) => ({
     jobList: './src/app/job/job-view/fabric/job-list.jsx',
     jobDetail: './src/app/job/job-view/fabric/job-detail.jsx',
     jobRetry: './src/app/job/job-view/fabric/job-retry.jsx',
+    jobEvent: './src/app/job/job-view/fabric/job-event.jsx',
     virtualClusters: './src/app/vc/vc.component.js',
     services: './src/app/cluster-view/services/services.component.js',
     hardware: './src/app/cluster-view/hardware/hardware.component.js',
@@ -338,6 +339,10 @@ const config = (env, argv) => ({
       filename: 'job-retry.html',
       chunks: ['layout', 'jobRetry'],
     }),
+    generateHtml({
+      filename: 'job-event.html',
+      chunks: ['layout', 'jobEvent'],
+    }),
     generateHtml({
       filename: 'virtual-clusters.html',
       chunks: ['layout', 'virtualClusters'],

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

@@ -574,6 +574,14 @@ export default class Summary extends React.Component {
               >
                 Go to Job Metrics Page
               </Link>
+              <div className={c(t.bl, t.mh3)}></div>
+              <Link
+                styles={{ root: [FontClassNames.mediumPlus] }}
+                href={`job-event.html?userName=${namespace}&jobName=${jobName}`}
+                target='_blank'
+              >
+                Go to Job Event Page
+              </Link>
               {!isNil(getTensorBoardUrl(jobInfo, rawJobConfig)) && (
                 <div className={c(t.flex)}>
                   <div className={c(t.bl, t.mh3)}></div>

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

@@ -0,0 +1,61 @@
+// Copyright (c) Microsoft Corporation
+// All rights reserved.
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+// the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+// to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
+// BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// 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 React, { useEffect, useState } from 'react';
+import { Stack, ActionButton, Text } from 'office-ui-fabric-react';
+import ReactDOM from 'react-dom';
+import { isEmpty } from 'lodash';
+
+import { SpinnerLoading } from '../../../components/loading';
+import { fetchJobEvents } from './job-event/conn';
+import JobEventList from './job-event/job-event-list';
+
+const params = new URLSearchParams(window.location.search);
+const userName = params.get('userName');
+const jobName = params.get('jobName');
+
+const JobEventPage = () => {
+  const [loading, setLoading] = useState(true);
+  const [jobEvents, setJobEvents] = useState([]);
+
+  useEffect(() => {
+    fetchJobEvents(userName, jobName).then(res => {
+      setJobEvents(res.data);
+      setLoading(false);
+    });
+  }, []);
+
+  return (
+    <div>
+      {loading && <SpinnerLoading />}
+      {!loading && (
+        <Stack styles={{ root: { margin: '30px', overflow: 'auto' } }} gap='l1'>
+          <ActionButton
+            iconProps={{ iconName: 'revToggleKey' }}
+            href={`job-detail.html?username=${userName}&jobName=${jobName}`}
+          >
+            Back to Job Detail
+          </ActionButton>
+          <Text variant='xLarge'>Job Event List</Text>
+          <JobEventList jobEvents={isEmpty(jobEvents) ? null : jobEvents} />
+        </Stack>
+      )}
+    </div>
+  );
+};
+
+ReactDOM.render(<JobEventPage />, document.getElementById('content-wrapper'));

src/webportal/src/app/job/job-view/fabric/job-event/conn.js

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { clearToken } from '../../../../user/user-logout/user-logout.component';
+import config from '../../../../config/webportal.config';
+
+const token = cookies.get('token');
+
+export class NotFoundError extends Error {
+  constructor(msg) {
+    super(msg);
+    this.name = 'NotFoundError';
+  }
+}
+
+const wrapper = async func => {
+  try {
+    return await func();
+  } catch (err) {
+    if (err.data.code === 'UnauthorizedUserError') {
+      alert(err.data.message);
+      clearToken();
+    } else if (err.data.code === 'NoJobConfigError') {
+      throw new NotFoundError(err.data.message);
+    } else {
+      throw new Error(err.data.message);
+    }
+  }
+};
+
+export async function fetchJobEvents(userName, jobName) {
+  return wrapper(async () => {
+    const restServerUri = new URL(config.restServerUri, window.location.href);
+    const url = `${restServerUri}/api/v2/jobs/${userName}~${jobName}/events?type=Warning`;
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    const result = await res.json();
+    return result;
+  });
+}

src/webportal/src/app/job/job-view/fabric/job-event/job-event-list.jsx

@@ -0,0 +1,186 @@
+// Copyright (c) Microsoft Corporation
+// All rights reserved.
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+// the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+// to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
+// BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// 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 { DateTime } from 'luxon';
+import {
+  DetailsList,
+  SelectionMode,
+  DetailsListLayoutMode,
+  FontClassNames,
+  Text,
+  Stack,
+  Dialog,
+  DialogFooter,
+  PrimaryButton,
+  CommandBarButton,
+} from 'office-ui-fabric-react';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+const JobEventList = props => {
+  const { jobEvents } = props;
+  const [hideDialog, setHideDialog] = useState(true);
+  const [dialogMessage, setDialogMessage] = useState(null);
+
+  const toggleHideDialog = () => {
+    setHideDialog(!hideDialog);
+  };
+
+  const columns = [
+    {
+      key: 'taskRoleName',
+      name: 'Task Role Name',
+      headerClassName: FontClassNames.medium,
+      isResizable: true,
+      onRender: (item, idx) => {
+        return (
+          <div className={FontClassNames.mediumPlus}>{item.taskroleName}</div>
+        );
+      },
+    },
+    {
+      key: 'taskIndex',
+      name: 'Task Index',
+      maxWidth: 60,
+      headerClassName: FontClassNames.medium,
+      isResizable: true,
+      onRender: (item, idx) => {
+        return (
+          <div className={FontClassNames.mediumPlus}>{item.taskIndex}</div>
+        );
+      },
+    },
+    {
+      key: 'type',
+      name: 'Type',
+      headerClassName: FontClassNames.medium,
+      isResizable: true,
+      onRender: (item, idx) => {
+        return <div className={FontClassNames.mediumPlus}>{item.type}</div>;
+      },
+    },
+    {
+      key: 'reason',
+      name: 'Reason',
+      minWidth: 150,
+      headerClassName: FontClassNames.medium,
+      isResizable: true,
+      onRender: (item, idx) => {
+        return <div className={FontClassNames.mediumPlus}>{item.reason}</div>;
+      },
+    },
+    {
+      key: 'message',
+      name: 'message',
+      headerClassName: FontClassNames.medium,
+      minWidth: 550,
+      maxWidth: 1000,
+      isResizable: true,
+      onRender: (item, idx) => {
+        return (
+          <Stack horizontal gap='m'>
+            <Text styles={{ root: { maxWidth: 400 } }} nowrap>
+              {item.message}
+            </Text>
+            <CommandBarButton
+              className={FontClassNames.mediumPlus}
+              styles={{
+                root: { backgroundColor: 'transparent' },
+                rootDisabled: { backgroundColor: 'transparent' },
+              }}
+              iconProps={{ iconName: 'TextDocument' }}
+              text='Full Message'
+              onClick={() => {
+                toggleHideDialog();
+                setDialogMessage(item.message);
+              }}
+            />
+          </Stack>
+        );
+      },
+    },
+    {
+      key: 'firstTimestamp',
+      name: 'First Timestamp',
+      minWidth: 160,
+      headerClassName: FontClassNames.medium,
+      isResizable: true,
+      onRender: (item, idx) => {
+        return (
+          <div className={FontClassNames.mediumPlus}>
+            {DateTime.fromISO(item.firstTimestamp).toLocaleString(
+              DateTime.DATETIME_SHORT,
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      key: 'lastTimestamp',
+      name: 'Last Timestamp',
+      headerClassName: FontClassNames.medium,
+      minWidth: 160,
+      isResizable: true,
+      onRender: (item, idx) => {
+        return (
+          <div className={FontClassNames.mediumPlus}>
+            {DateTime.fromISO(item.lastTimestamp).toLocaleString(
+              DateTime.DATETIME_SHORT,
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      key: 'count',
+      name: 'Count',
+      maxWidth: 50,
+      headerClassName: FontClassNames.medium,
+      isResizable: true,
+      onRender: (item, idx) => {
+        return <div className={FontClassNames.mediumPlus}>{item.count}</div>;
+      },
+    },
+  ];
+
+  return (
+    <Stack>
+      <DetailsList
+        columns={columns}
+        disableSelectionZone
+        items={jobEvents}
+        layoutMode={DetailsListLayoutMode.justified}
+        selectionMode={SelectionMode.none}
+      />
+      <Dialog hidden={hideDialog} onDismiss={toggleHideDialog} minWidth='500px'>
+        <Stack gap='m'>
+          <Text variant='xLarge'>Event Message :</Text>
+          <Text variant='large'>{dialogMessage}</Text>
+        </Stack>
+        <DialogFooter>
+          <PrimaryButton onClick={toggleHideDialog} text='Close' />
+        </DialogFooter>
+      </Dialog>
+    </Stack>
+  );
+};
+
+JobEventList.propTypes = {
+  jobEvents: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default JobEventList;