Skip to content
This repository has been archived by the owner on Jul 23, 2024. It is now read-only.

Commit

Permalink
Merge pull request #169 from parodos-dev/dl/show-workflow-details-links
Browse files Browse the repository at this point in the history 
Update workflows overview, add external links and description
  • Loading branch information
@RichardW98
RichardW98 authored Jun 16, 2023
2 parents 7c6d136 + 43598b7 commit 224491e
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 35 deletions.
19 changes: 17 additions & 2 deletions plugins/parodos/src/components/workflow/WorkflowsOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import * as urls from '../../urls';
import { ParodosPage } from '../ParodosPage';
import Star from '@material-ui/icons/StarOutline';
import { Button, Grid, makeStyles } from '@material-ui/core';
import { Button, Grid, Link, makeStyles, Typography } from '@material-ui/core';
import { useStore } from '../../stores/workflowStore/workflowStore';
import { pluginRoutePrefix } from '../ParodosPage/navigationMap';
import { WorkflowsTable } from './WorkflowsTable';
Expand All @@ -28,14 +28,22 @@ const useStyles = makeStyles(theme => ({
marginLeft: 'auto',
},
newProjectButton: {
alignSelf: 'flex-end',
marginLeft: 'auto',
marginRight: 0,
},
tableContainer: {
marginTop: '2em',
},
addProjectButton: {
marginRight: theme.spacing(1),
},
mtaReportLinkItem: {
alignSelf: 'flex-end',
},
mtaReportLink: {
fontSize: '0.75rem',
padding: `${theme.spacing(1.5)}px 0`,
},
selectContainer: {
'& div[class^="MuiFormControl-root"]': {
maxWidth: '100%',
Expand Down Expand Up @@ -111,6 +119,13 @@ export function WorkflowsOverview(): JSX.Element {
margin="none"
/>
</Grid>
<Grid item xs={5} md={3} lg={2} className={classes.mtaReportLinkItem}>
<Link target="_blank" href="#" rel="noopener noreferrer">
<Typography className={classes.mtaReportLink}>
View MTA assessment report
</Typography>
</Link>
</Grid>
<Grid item className={classes.newProjectButton}>
<LinkButton
variant="contained"
Expand Down
148 changes: 115 additions & 33 deletions plugins/parodos/src/components/workflow/WorkflowsTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,25 @@
import React, { useRef, useState } from 'react';
import { LinkButton, Table, TableColumn } from '@backstage/core-components';
import {
LinkButton,
Table,
TableColumn,
StatusRunning,
StatusOK,
StatusError,
StatusWarning,
StatusAborted,
SubvalueCell,
} from '@backstage/core-components';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import FilterListIcon from '@material-ui/icons/FilterList';
import LaunchIcon from '@material-ui/icons/Launch';
import { pluginRoutePrefix } from '../ParodosPage/navigationMap';
import { ProjectWorkflow } from '../../models/workflowTaskSchema';
import { useStore } from '../../stores/workflowStore/workflowStore';
import {
Accordion,
AccordionDetails,
AccordionSummary,
ClickAwayListener,
Grow,
IconButton,
Expand All @@ -15,6 +30,7 @@ import {
Popper,
TableCell,
Typography,
Link,
} from '@material-ui/core';

const useStyles = makeStyles(theme => ({
Expand All @@ -32,29 +48,39 @@ const useStyles = makeStyles(theme => ({
borderRadius: '50%',
marginRight: '8px',
},
runningStatus: {
backgroundColor: theme.palette.info.main,
workflowDescriptionContainer: {
background: 'inherit',
padding: '0',
boxShadow: 'none',
},
workflowDescriptionSummary: {
flexDirection: 'row-reverse',
padding: '0',
},
completedStatus: {
backgroundColor: theme.palette.success.main,
workflowDescriptionSummaryContent: {
flexDirection: 'column',
},
failedStatus: {
backgroundColor: theme.palette.error.main,
expandIcon: {
marginRight: theme.spacing(2),
padding: '0',
},
pendingStatus: {
backgroundColor: theme.palette.warning.main,
urlIcon: {
color: theme.palette.primary.dark,
},
abortedStatus: {
backgroundColor: theme.palette.grey[500],
workflowDescriptionDetails: {
flexDirection: 'column',
marginLeft: theme.spacing(3),
gap: theme.spacing(0.5),
},
}));

interface WorkflowTableData {
id: string;
name: string;
description?: string;
type: string;
processingType: 'SEQUENTIAL' | 'PARALLEL';
status: string;
StatusComponent: () => JSX.Element;
author: string;
startDate: string;
endDate: string;
Expand All @@ -69,6 +95,14 @@ const columns: TableColumn<WorkflowTableData>[] = [
{ title: '', field: 'view', width: '5%' },
];

const statuses: ProjectWorkflow['workStatus'][] = [
'IN_PROGRESS',
'COMPLETED',
'FAILED',
'PENDING',
'REJECTED',
];

const statusMap: Record<ProjectWorkflow['workStatus'], string> = {
IN_PROGRESS: 'Running',
COMPLETED: 'Completed',
Expand All @@ -77,12 +111,15 @@ const statusMap: Record<ProjectWorkflow['workStatus'], string> = {
REJECTED: 'Aborted',
};

const statusColorMap: Record<ProjectWorkflow['workStatus'], string> = {
IN_PROGRESS: 'runningStatus',
COMPLETED: 'completedStatus',
FAILED: 'failedStatus',
PENDING: 'pendingStatus',
REJECTED: 'abortedStatus',
const StatusComponents: Record<
ProjectWorkflow['workStatus'],
() => JSX.Element
> = {
IN_PROGRESS: () => <StatusRunning>Running</StatusRunning>,
COMPLETED: () => <StatusOK>Completed</StatusOK>,
FAILED: () => <StatusError>Failed</StatusError>,
PENDING: () => <StatusWarning>Pending</StatusWarning>,
REJECTED: () => <StatusAborted>Aborted</StatusAborted>,
};

const formatDate = new Intl.DateTimeFormat('en', {
Expand Down Expand Up @@ -139,10 +176,10 @@ export const WorkflowsTable: React.FC<{
return {
id: workflow.workFlowExecutionId,
name: workflow.workFlowName,
description: 'Description of workflow',
type: definition?.type,
processingType: definition?.processingType,
status: statusMap[workflow.workStatus],
statusColor: statusColorMap[workflow.workStatus],
StatusComponent: StatusComponents[workflow.workStatus],
author: workflow.executeBy,
startDate: formatDate.format(Date.parse(workflow.startDate)),
endDate: workflow.endDate
Expand Down Expand Up @@ -192,11 +229,7 @@ export const WorkflowsTable: React.FC<{
onKeyDown={handleListKeyDown}
>
<MenuItem onClick={handleChangeFilter}>All</MenuItem>
{(
Object.keys(
statusMap,
) as ProjectWorkflow['workStatus'][]
).map(status => (
{statuses.map(status => (
<MenuItem
key={status}
onClick={e => handleChangeFilter(e, status)}
Expand All @@ -217,8 +250,62 @@ export const WorkflowsTable: React.FC<{
columns={columns}
data={data}
components={{
Cell: ({ columnDef, rowData }) => {
if (columnDef.field === 'view') {
Cell: ({ columnDef, rowData: { StatusComponent, ...rowData } }) => {
if (columnDef.field === 'name') {
return (
<TableCell>
<Accordion className={classes.workflowDescriptionContainer}>
<AccordionSummary
className={classes.workflowDescriptionSummary}
classes={{
content: classes.workflowDescriptionSummaryContent,
}}
IconButtonProps={{ className: classes.expandIcon }}
expandIcon={<ExpandMoreIcon />}
aria-controls="workflow-description-content"
id="workflow-description-header"
>
<SubvalueCell
value={rowData.name}
subvalue={rowData.description}
/>
</AccordionSummary>
<AccordionDetails
className={classes.workflowDescriptionDetails}
>
<Link target="_blank" href="#">
MTA assessment report{' '}
<LaunchIcon
fontSize="inherit"
className={classes.urlIcon}
/>
</Link>
<Link target="_blank" href="#">
Jira ticket{' '}
<LaunchIcon
fontSize="inherit"
className={classes.urlIcon}
/>
</Link>
<Link target="_blank" href="#">
VCS branch{' '}
<LaunchIcon
fontSize="inherit"
className={classes.urlIcon}
/>
</Link>
<Link target="_blank" href="#">
Deployment{' '}
<LaunchIcon
fontSize="inherit"
className={classes.urlIcon}
/>
</Link>
</AccordionDetails>
</Accordion>
</TableCell>
);
} else if (columnDef.field === 'view') {
return (
<TableCell>
<LinkButton
Expand All @@ -232,12 +319,7 @@ export const WorkflowsTable: React.FC<{
} else if (columnDef.field === 'status') {
return (
<TableCell data-testid={`${rowData.id} '${rowData.status}'`}>
<div
className={`${classes.filterIcon} ${
classes[rowData.statusColor as keyof typeof classes]
}`}
/>
{rowData.status}
<StatusComponent />
</TableCell>
);
}
Expand Down

0 comments on commit 224491e

Please sign in to comment.