Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: Add status on top of the detail page #754

Merged
merged 6 commits into from
Dec 29, 2024
Merged

ui: Add status on top of the detail page #754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
28fb42f
ui: add DAG status on top
yohamta Dec 29, 2024
89d15a7
ui: fix bug
yohamta Dec 29, 2024
869667e
ui: fix bug
yohamta Dec 29, 2024
036079b
adjust color
yohamta Dec 29, 2024
5342e6c
ui: adjust
yohamta Dec 29, 2024
3b5bfe6
adjust
yohamta Dec 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ui/src/components/atoms/StatusChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ type Props = {
};

function StatusChip({ status, children }: Props) {
const style = React.useMemo(() => {
const style = () => {
if (!status) {
return {};
}
return statusColorMapping[status] || {};
}, [status]);
};
return <Chip sx={style} size="small" label={children} />;
}

Expand Down
32 changes: 12 additions & 20 deletions ui/src/components/molecules/Graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ const Graph: React.FC<Props> = ({
minHeight: '200px',
padding: '2em',
borderRadius: '0.5em',
background: `
linear-gradient(90deg, #f8fafc 1px, transparent 1px),
linear-gradient(180deg, #f8fafc 1px, transparent 1px)
`,
backgroundSize: '20px 20px',
};

Expand Down Expand Up @@ -88,7 +92,7 @@ const Graph: React.FC<Props> = ({

// Construct node label with icon if enabled
const icon = showIcons ? statusIcons[status] || '' : '';
const label = `${icon} ${step.Name}`;
const label = `${icon} &nbsp; ${step.Name}`;

// Add node definition
dat.push(`${id}[${label}]${c};`);
Expand Down Expand Up @@ -134,24 +138,12 @@ const Graph: React.FC<Props> = ({
}

// Define node styles for different states with refined colors
dat.push(
'classDef none color:#4a5568,fill:#f8fafc,stroke:#3b82f6,stroke-width:1.2px,white-space:nowrap,line-height:1.5'
);
dat.push(
'classDef running color:#4a5568,fill:#aaf2aa,stroke:#22c55e,stroke-width:1.2px,white-space:nowrap,line-height:1.5'
);
dat.push(
'classDef error color:#4a5568,fill:#fee2e2,stroke:#ef4444,stroke-width:1.2px,white-space:nowrap,line-height:1.5'
);
dat.push(
'classDef cancel color:#4a5568,fill:#fdf2f8,stroke:#ec4899,stroke-width:1.2px,white-space:nowrap,line-height:1.5'
);
dat.push(
'classDef done color:#4a5568,fill:#f0fdf4,stroke:#16a34a,stroke-width:1.2px,white-space:nowrap,line-height:1.5'
);
dat.push(
'classDef skipped color:#4a5568,fill:#f8fafc,stroke:#64748b,stroke-width:1.2px,white-space:nowrap,line-height:1.5'
);
dat.push('classDef none fill:#f0f9ff,stroke:#93c5fd,color:#1e40af,stroke-width:1.2px,white-space:nowrap');
dat.push('classDef running fill:#f0fdf4,stroke:#86efac,color:#166534,stroke-width:1.2px,white-space:nowrap');
dat.push('classDef error fill:#fef2f2,stroke:#fca5a5,color:#aa1010,stroke-width:1.2px,white-space:nowrap');
dat.push('classDef cancel fill:#fdf2f8,stroke:#f9a8d4,color:#9d174d,stroke-width:1.2px,white-space:nowrap');
dat.push('classDef done fill:#f0fdf4,stroke:#86efac,color:#166534,stroke-width:1.2px,white-space:nowrap');
dat.push('classDef skipped fill:#f8fafc,stroke:#cbd5e1,color:#475569,stroke-width:1.2px,white-space:nowrap');

// Add custom link styles
dat.push(...linkStyles);
Expand Down Expand Up @@ -228,4 +220,4 @@ const graphStatusMap = {
[NodeStatus.Cancel]: ':::cancel',
[NodeStatus.Success]: ':::done',
[NodeStatus.Skipped]: ':::skipped',
};
};
1 change: 1 addition & 0 deletions ui/src/components/organizations/DAGStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ function DAGStatus({ DAG, name, refresh }: Props) {
type="status"
flowchart={flowchart}
onClickNode={onSelectStepOnGraph}
showIcons={DAG.Status.Status != SchedulerStatus.None}
></Graph>
) : (
<TimelineChart status={DAG.Status}></TimelineChart>
Expand Down
65 changes: 65 additions & 0 deletions ui/src/pages/dags/dag/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ import DAGEditButtons from '../../../components/molecules/DAGEditButtons';
import LoadingIndicator from '../../../components/atoms/LoadingIndicator';
import { AppBarContext } from '../../../contexts/AppBarContext';
import useSWR from 'swr';
import StatusChip from '../../../components/atoms/StatusChip';
import { CalendarToday, TimerSharp } from '@mui/icons-material';
import moment from 'moment-timezone';
import { SchedulerStatus } from '../../../models';

type Params = {
name: string;
Expand Down Expand Up @@ -62,6 +66,21 @@ function DAGDetails() {
name: params.name,
};

const formatDuration = (startDate: string, endDate: string) => {
if (!startDate || !endDate) return '--';
const duration = moment.duration(moment(endDate).diff(moment(startDate)));
const hours = Math.floor(duration.asHours());
const minutes = duration.minutes();
const seconds = duration.seconds();

if (hours > 0) {
return `${hours}h ${minutes}m ${seconds}s`;
} else if (minutes > 0) {
return `${minutes}m ${seconds}s`;
}
return `${seconds}s`;
};

return (
<DAGContext.Provider value={ctx}>
<Stack
Expand Down Expand Up @@ -89,6 +108,52 @@ function DAGDetails() {
/>
</Box>

{data.DAG?.Status?.Status != SchedulerStatus.None ? (
<Stack
direction="row"
spacing={2}
sx={{ mx: 4, alignItems: 'center' }}
>
{data.DAG?.Status?.Status ? (
<StatusChip status={data.DAG.Status.Status}>
{data.DAG.Status.StatusText || ''}
</StatusChip>
) : null}

<Stack
direction="row"
color={'text.secondary'}
sx={{ alignItems: 'center', ml: 1 }}
>
<CalendarToday sx={{ mr: 0.5 }} />
{data?.DAG?.Status?.FinishedAt
? moment(data.DAG.Status.FinishedAt).format(
'MMM D, YYYY HH:mm:ss Z'
)
: '--'}
</Stack>

<Stack
direction="row"
color={'text.secondary'}
sx={{ alignItems: 'center', ml: 1 }}
>
<TimerSharp sx={{ mr: 0.5 }} />
{data?.DAG?.Status?.FinishedAt
? formatDuration(
data?.DAG?.Status?.StartedAt,
data?.DAG?.Status?.FinishedAt
)
: data?.DAG?.Status?.StartedAt
? formatDuration(
data?.DAG?.Status?.StartedAt,
moment().toISOString()
)
: '--'}
</Stack>
</Stack>
) : null}

<Stack
sx={{
mx: 4,
Expand Down
Loading