add dialog

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

@@ -15,29 +15,32 @@
 // 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 { FontClassNames } from '@uifabric/styling';
 import { DateTime } from 'luxon';
 import {
   DetailsList,
   SelectionMode,
   DetailsListLayoutMode,
-} from 'office-ui-fabric-react/lib/DetailsList';
+  FontClassNames,
+  Text,
+  Stack,
+  Dialog,
+  DialogFooter,
+  PrimaryButton,
+  CommandBarButton,
+} from 'office-ui-fabric-react';
 import PropTypes from 'prop-types';
-import React from 'react';
+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: 'uid',
-      name: 'uid',
-      headerClassName: FontClassNames.medium,
-      isResizable: true,
-      onRender: (item, idx) => {
-        return <div className={FontClassNames.mediumPlus}>{item.uid}</div>;
-      },
-    },
     {
       key: 'taskRoleName',
       name: 'Task Role Name',
@@ -52,6 +55,7 @@ const JobEventList = props => {
     {
       key: 'taskIndex',
       name: 'Task Index',
+      maxWidth: 60,
       headerClassName: FontClassNames.medium,
       isResizable: true,
       onRender: (item, idx) => {
@@ -72,6 +76,7 @@ const JobEventList = props => {
     {
       key: 'reason',
       name: 'Reason',
+      minWidth: 150,
       headerClassName: FontClassNames.medium,
       isResizable: true,
       onRender: (item, idx) => {
@@ -82,20 +87,44 @@ const JobEventList = props => {
       key: 'message',
       name: 'message',
       headerClassName: FontClassNames.medium,
+      minWidth: 550,
+      maxWidth: 1000,
       isResizable: true,
       onRender: (item, idx) => {
-        return <div className={FontClassNames.mediumPlus}>{item.message}</div>;
+        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.fromISO(item.firstTimestamp).toLocaleString(
+              DateTime.DATETIME_SHORT,
+            )}
           </div>
         );
       },
@@ -104,18 +133,22 @@ const JobEventList = props => {
       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.fromISO(item.lastTimestamp).toLocaleString(
+              DateTime.DATETIME_SHORT,
+            )}
           </div>
         );
       },
     },
     {
       key: 'count',
       name: 'Count',
+      maxWidth: 50,
       headerClassName: FontClassNames.medium,
       isResizable: true,
       onRender: (item, idx) => {
@@ -125,13 +158,24 @@ const JobEventList = props => {
   ];
 
   return (
-    <DetailsList
-      columns={columns}
-      disableSelectionZone
-      items={jobEvents}
-      layoutMode={DetailsListLayoutMode.justified}
-      selectionMode={SelectionMode.none}
-    />
+    <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>
   );
 };