diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx index a903562e..4de598a2 100644 --- a/public/pages/workflow_detail/components/header.tsx +++ b/public/pages/workflow_detail/components/header.tsx @@ -4,32 +4,46 @@ */ import React, { useEffect, useState } from 'react'; +import { useHistory } from 'react-router-dom'; import { EuiPageHeader, - EuiButton, EuiFlexGroup, EuiFlexItem, EuiText, + EuiButtonEmpty, } from '@elastic/eui'; import { DEFAULT_NEW_WORKFLOW_STATE, WORKFLOW_STATE, Workflow, + toFormattedDate, } from '../../../../common'; +import { APP_PATH } from '../../../utils'; interface WorkflowDetailHeaderProps { workflow?: Workflow; } export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) { + const history = useHistory(); // workflow state const [workflowName, setWorkflowName] = useState(''); const [workflowState, setWorkflowState] = useState(''); + const [workflowLastUpdated, setWorkflowLastUpdated] = useState(''); useEffect(() => { if (props.workflow) { setWorkflowName(props.workflow.name); setWorkflowState(props.workflow.state || DEFAULT_NEW_WORKFLOW_STATE); + try { + const formattedDate = toFormattedDate( + // @ts-ignore + props.workflow.lastUpdated + ).toString(); + setWorkflowLastUpdated(formattedDate); + } catch (err) { + setWorkflowLastUpdated(''); + } } }, [props.workflow]); @@ -45,10 +59,18 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) { } rightSideItems={[ - // TODO: implement export functionality - {}}> - Export - , + { + // TODO: add lightweight save here when available + history.replace(APP_PATH.WORKFLOWS); + }} + > + Close + , + + {`Last updated: ${workflowLastUpdated}`} + , ]} bottomBorder={false} />