Make changes to the Job plugin UI

equinor · Sep 12, 2023 · 8602edf · 8602edf
1 parent 05f1ae2
commit 8602edf
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 61 deletions.
diff --git a/example/src/plugins/job-ui-single/pages/CreateJobEntity.tsx b/example/src/plugins/job-ui-single/pages/CreateJobEntity.tsx
@@ -7,9 +7,9 @@ import {
   splitAddress,
   useDMSS,
 } from '@development-framework/dm-core'
-import { Button } from '@equinor/eds-core-react'
+import { Button, Card, Typography } from '@equinor/eds-core-react'
 import { AxiosError, AxiosResponse } from 'axios'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { JobForm } from './JobForm'
 
 type TCreateJobEntityProps = {
@@ -88,8 +88,8 @@ export const CreateJobEntity = (props: TCreateJobEntityProps) => {
 
     const addOrUpdateDocument = (
       jobExists: boolean,
-      jobEntityDestination,
-      jobEntityFormData
+      jobEntityDestination: string,
+      jobEntityFormData: TJob
     ) => {
       if (jobExists) {
         updateDocument(jobEntityDestination, jobEntityFormData)
@@ -110,13 +110,23 @@ export const CreateJobEntity = (props: TCreateJobEntityProps) => {
     )
   }
 
-  if (createdJobEntity) {
-    return (
-      <>
-        <p>Job entity already created at location {jobEntityDestination} </p>
-      </>
-    )
-  }
+  // Not sure if we need to show a message about existing jobs, should suffice with the proper UI controls?
+  // if (createdJobEntity) {
+  //   return (
+  //     <Card variant="info" style={{ marginBottom: '1rem' }}>
+  //       <Card.Header>
+  //         <Typography variant="h6">Existing job</Typography>
+  //       </Card.Header>
+  //       <Card.Content>
+  //         <Typography>
+  //           A job with this ID already exists at location{' '}
+  //           <span style={{ fontWeight: 500 }}>{jobEntityDestination}</span>
+  //         </Typography>
+  //       </Card.Content>
+  //     </Card>
+  //   )
+  // }
+  if (createdJobEntity) return <></>
 
   return (
     <div>

diff --git a/example/src/plugins/job-ui-single/pages/JobControl.tsx b/example/src/plugins/job-ui-single/pages/JobControl.tsx
@@ -4,17 +4,24 @@ import {
   Loading,
   useJob,
 } from '@development-framework/dm-core'
-import React, { useState } from 'react'
+import React, {useContext, useState} from 'react'
 import { Button, Chip, Icon } from '@equinor/eds-core-react'
-import { stop, play } from '@equinor/eds-icons'
+import { stop, play, refresh, autorenew } from '@equinor/eds-icons'
+import styled from 'styled-components'
+
+const JobButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+`
 
 export const JobControl = (props: { jobEntityId: string }) => {
   const { jobEntityId } = props
   const {
     start,
     error,
     isLoading,
-    fetchResult,
+    // fetchResult,
     fetchStatusAndLogs,
     logs,
     status,
@@ -27,46 +34,54 @@ export const JobControl = (props: { jobEntityId: string }) => {
   if (error) console.error(error)
 
   return (
-    <div>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
       <Chip>Status: {status}</Chip>
-
-      {jobIsStarted ? (
-        <Button
-          onClick={() => {
-            setJobIsStarted(false)
-            remove()
-          }}
-          variant="contained"
+      <JobButtonWrapper>
+        {jobIsStarted ? (
+          <Button
+            onClick={() => {
+              setJobIsStarted(false)
+              remove()
+            }}
+            variant="contained"
+          >
+            <Icon data={stop}></Icon>
+            Stop
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              start()
+              setJobIsStarted(true)
+            }}
+            variant="contained"
+          >
+            <Icon data={play}></Icon>
+            Start
+          </Button>
+        )}
+        {(status === JobStatus.Completed || status === JobStatus.Failed) && <Button
+            onClick={() => fetchStatusAndLogs()}
+            variant={'outlined'}
+            aria-label='Re-run job'
         >
-          <Icon data={stop}></Icon>
-          Stop
-        </Button>
-      ) : (
-        <Button
-          onClick={() => {
-            start()
-            setJobIsStarted(true)
-          }}
-          variant="contained"
-        >
-          <Icon data={play}></Icon>
-          Start
-        </Button>
-      )}
-      <button
-        onClick={() => fetchStatusAndLogs()}
-        disabled={status === JobStatus.NotStarted}
-      >
-        Refresh status and logs
-      </button>
-      <button
-        onClick={() =>
-          fetchResult().then((res: GetJobResultResponse) => setResult(res))
-        }
-        disabled={status === JobStatus.NotStarted}
-      >
-        Get results
-      </button>
+          <Icon data={autorenew}/>
+        </Button>}
+        {/* TODO: Make this button query the API for an update on the running job */}
+        {status === JobStatus.Running && <Button variant='outlined' onClick={() => fetchStatusAndLogs()} aria-label='Get job status'>
+          <Icon data={refresh}/>
+        </Button>}
+        {/* The results should be loaded automatically when the job is finished, and loaded initially if a result is available */}
+        {/*<Button*/}
+        {/*  onClick={() =>*/}
+        {/*    fetchResult().then((res: GetJobResultResponse) => setResult(res))*/}
+        {/*  }*/}
+        {/*  variant={'outlined'}*/}
+        {/*  disabled={status === JobStatus.NotStarted}*/}
+        {/*>*/}
+        {/*  Get results*/}
+        {/*</Button>*/}
+      </JobButtonWrapper>
 
       <h4>Logs:</h4>
       {error ? <pre>{JSON.stringify(error, null, 2)}</pre> : <pre>{logs}</pre>}

diff --git a/example/src/plugins/job-ui-single/pages/JobPlugin.tsx b/example/src/plugins/job-ui-single/pages/JobPlugin.tsx
@@ -2,17 +2,19 @@ import {
   EBlueprint,
   JobStatus,
   TJob,
-  IUIPlugin,
+  IUIPlugin, splitAddress, useDMSS,
 } from '@development-framework/dm-core'
-import React, { useState } from 'react'
+import React, {useEffect, useState} from 'react'
 
 import { JobControl } from './JobControl'
 import { CreateJobEntity } from './CreateJobEntity'
 
 export const JobPlugin = (props: IUIPlugin) => {
   // TODO make this plugin general and move to dm-core-packages/packages/dm-core-plugins. Right now, it can only be used in the SignalApp due to hard coded values.
 
+  const DmssApi = useDMSS();
   const [jobEntityId, setJobEntityId] = useState<string>('')
+  const [jobExists, setJobExists] = useState(false)
   const jobEntityDestination = `DemoDataSource/$4483c9b0-d505-46c9-a157-94c79f4d7a6a.study.cases[0].job`
 
   // Example of another value for jobEntityDestination
@@ -64,16 +66,37 @@ export const JobPlugin = (props: IUIPlugin) => {
     started: 'Not started',
   }
 
+
+  function fetchJobIfExists(): void {
+    const addressObject =splitAddress(jobEntityDestination)
+    const addressPath = `${addressObject.dataSource}/${addressObject.documentPath}`
+    DmssApi.documentCheck({
+      address: addressPath,
+    }).then((res) => {
+      console.log(res)
+      if (res.data) {
+        DmssApi.documentGet({ address: addressPath }).then((resp) => {
+          console.log(resp)
+          setJobEntityId(addressPath)
+          setJobExists(true)
+        })
+      }
+    })
+  }
+  useEffect(fetchJobIfExists, [])
+
+
+
   return (
     <div>
       {/*// TODO do not include CreateJobEntity component if entity exists in destination*/}
       {/*TODO have a way to check if an entity of type job already exists in 'jobEntityDestination'. Must scan content of entire package if jobEntityDestination is a package, but its simpler to check if jobEntityDestination is refering to an object's attribute. */}
-      <CreateJobEntity
-        jobEntityDestination={jobEntityDestination}
-        onCreate={(jobEntityId: string) => setJobEntityId(jobEntityId)}
-        defaultJobOutputTarget={props.idReference + '.signal'}
-        defaultJobEntity={defaultJobEntity}
-      />
+      {!jobExists && <CreateJobEntity
+          jobEntityDestination={jobEntityDestination}
+          onCreate={(jobEntityId: string) => setJobEntityId(jobEntityId)}
+          defaultJobOutputTarget={props.idReference + '.signal'}
+          defaultJobEntity={defaultJobEntity}
+      />}
       {jobEntityId && <JobControl jobEntityId={jobEntityId} />}
     </div>
   )

diff --git a/packages/dm-core-plugins/src/list/ListPlugin.tsx b/packages/dm-core-plugins/src/list/ListPlugin.tsx
@@ -208,7 +208,6 @@ export const ListPlugin = (props: IUIPlugin & { config?: TListConfig }) => {
               {internalConfig.headers.map(
                 (attribute: string, index: number) => {
                   if (item.data && item.data?.[attribute]) {
-                    console.log(item.data.name)
                     if (typeof item.data[attribute] === 'object')
                       throw new Error(
                         `Objects can not be displayed in table header. Attribute '${attribute}' is not a primitive type.`