Skip to content

ENG 3008 Fix registered with no run workflows #1374

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

Merged
merged 11 commits into from
May 30, 2023
Merged

ENG 3008 Fix registered with no run workflows #1374

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c477344
Fix no run workflows row
eunice-chan May 24, 2023
0b3de52
Merge branch 'main' of github.com:aqueducthq/aqueduct into eng-3008-r…
eunice-chan May 25, 2023
bd788da
lint
eunice-chan May 25, 2023
3b8d3ab
Merge branch 'main' of github.com:aqueducthq/aqueduct into eng-3008-r…
eunice-chan May 26, 2023
ff054c9
Default sort col fix too
eunice-chan May 26, 2023
a49b491
Lint
eunice-chan May 26, 2023
847c39b
PR comments
eunice-chan May 30, 2023
1ac6ec4
Merge branch 'main' of github.com:aqueducthq/aqueduct into eng-3008-r…
eunice-chan May 30, 2023
f4be9ad
Merge branch 'main' of github.com:aqueducthq/aqueduct into eng-3008-r…
eunice-chan May 30, 2023
e21fcfb
lint
eunice-chan May 30, 2023
7c982a3
Reset package.json
eunice-chan May 30, 2023
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
42 changes: 42 additions & 0 deletions src/ui/common/src/components/pages/workflow/id/hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
import { NodeResultsMap, NodesMap } from '../../../../handlers/responses/node';
import { DagResultResponse } from '../../../../handlers/responses/workflow';
import { getPathPrefix } from '../../../../utils/getPathPrefix';
import { getLatestDagResult } from '../../../../utils/shared';

export type useWorkflowIdsOutputs = {
workflowId: string;
Expand Down Expand Up @@ -187,3 +188,44 @@ export function useWorkflowNodesResults(
),
};
}

export function useLatestDagResultOrDag(apiKey: string, workflowId: string) {
const {
data: dagResults,
error: dagResultsError,
isLoading: dagResultsLoading,
} = useDagResultsGetQuery({
apiKey: apiKey,
workflowId: workflowId,
});

const hasRuns =
!dagResultsLoading && !dagResultsError && dagResults.length > 0;

const {
data: dags,
error: dagsError,
isLoading: dagsLoading,
} = useDagsGetQuery(
{
apiKey: apiKey,
workflowId: workflowId,
},
{
skip: hasRuns,
}
);

let latestDagResult;
let dag;
if (hasRuns) {
latestDagResult = getLatestDagResult(dagResults);
} else if (!dagsLoading && !dagsError && dags.length > 0) {
dag = dags[0];
}

return {
latestDagResult,
dag,
};
}
123 changes: 48 additions & 75 deletions src/ui/common/src/components/pages/workflows/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import { Link, Typography } from '@mui/material';
import Box from '@mui/material/Box';
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';

import {
useDagGetQuery,
useDagResultsGetQuery,
useWorkflowsGetQuery,
} from '../../../handlers/AqueductApi';
import { AppDispatch } from '../../../stores/store';
import UserProfile from '../../../utils/auth';
import getPathPrefix from '../../../utils/getPathPrefix';
import ExecutionStatus from '../../../utils/shared';
import ExecutionStatus, { getLatestDagResult } from '../../../utils/shared';
import { getWorkflowEngineTypes } from '../../../utils/workflows';
import DefaultLayout from '../../layouts/default';
import { BreadcrumbLink } from '../../layouts/NavBar';
Expand All @@ -20,7 +18,11 @@ import {
SortType,
} from '../../tables/PaginatedSearchTable';
import { LayoutProps } from '../types';
import { useWorkflowNodes, useWorkflowNodesResults } from '../workflow/id/hook';
import {
useLatestDagResultOrDag,
useWorkflowNodes,
useWorkflowNodesResults,
} from '../workflow/id/hook';
import CheckItem from './components/CheckItem';
import ExecutionStatusLink from './components/ExecutionStatusLink';
import MetricItem from './components/MetricItem';
Expand All @@ -32,8 +34,6 @@ type Props = {
};

const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
const dispatch: AppDispatch = useDispatch();

useEffect(() => {
document.title = 'Workflows | Aqueduct';
}, []);
Expand Down Expand Up @@ -91,22 +91,6 @@ const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
},
];

const getLatestDagResult = (dagResults) =>
dagResults.reduce(
(prev, curr) =>
curr.exec_state?.timestamps?.pending_at
? new Date(prev.exec_state?.timestamps?.pending_at) <
new Date(curr.exec_state?.timestamps?.pending_at)
? curr
: prev
: curr,
{
exec_state: {
status: ExecutionStatus.Registered,
timestamps: { pending_at: 0 },
},
}
);
const LastRunComponent = (row) => {
const workflowId = row.id;

Expand Down Expand Up @@ -140,43 +124,35 @@ const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
const workflowId = row.id;
const url = `${getPathPrefix()}/workflow/${workflowId}`;

const {
data: dagResults,
error: dagResultsError,
isLoading: dagResultsLoading,
} = useDagResultsGetQuery({
apiKey: user.apiKey,
workflowId: workflowId,
});
const { latestDagResult, dag } = useLatestDagResultOrDag(
user.apiKey,
workflowId
);
let status = ExecutionStatus.Unknown;

if (!dagResultsLoading && !dagResultsError && dagResults.length > 0) {
const latestDagResult = getLatestDagResult(dagResults);
if (latestDagResult) {
status = latestDagResult.exec_state.status;
}
if (latestDagResult) {
status = latestDagResult.exec_state.status;
} else if (dag) {
status = ExecutionStatus.Registered;
}

return <ExecutionStatusLink name={row.name} url={url} status={status} />;
},
'Last Run': LastRunComponent,
Engines: (row) => {
const workflowId = row.id;

const {
data: dagResults,
error: dagResultsError,
isLoading: dagResultsLoading,
} = useDagResultsGetQuery({
apiKey: user.apiKey,
workflowId: workflowId,
});

const { latestDagResult, dag: noRunDag } = useLatestDagResultOrDag(
user.apiKey,
workflowId
);
let latestDagId;
if (!dagResultsLoading && !dagResultsError && dagResults.length > 0) {
const latestDagResult = getLatestDagResult(dagResults);

if (latestDagResult) {
latestDagId = latestDagResult.dag_id;
} else if (noRunDag) {
latestDagId = noRunDag.id;
}

const {
data: dag,
error: dagError,
Expand All @@ -188,10 +164,9 @@ const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
dagId: latestDagId,
},
{
skip: dagResultsLoading && latestDagId,
skip: !latestDagId,
}
);

const nodes = useWorkflowNodes(user.apiKey, workflowId, latestDagId);

let engines = ['Unknown'];
Expand All @@ -218,21 +193,18 @@ const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
Metrics: (row) => {
const workflowId = row.id;

const {
data: dagResults,
error: dagResultsError,
isLoading: dagResultsLoading,
} = useDagResultsGetQuery({
apiKey: user.apiKey,
workflowId: workflowId,
});

let latestDagResultId;
const { latestDagResult, dag: noRunDag } = useLatestDagResultOrDag(
user.apiKey,
workflowId
);
let latestDagId;
if (!dagResultsLoading && !dagResultsError && dagResults.length > 0) {
const latestDagResult = getLatestDagResult(dagResults);
let latestDagResultId;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer using const if possible: https://stackoverflow.com/questions/41086633/why-most-of-the-time-should-i-use-const-instead-of-let-in-javascript#:~:text=Using%20const%20instead%20of%20let,somewhere%20else%20in%20the%20code.

Here we can use const latestDagResultID = latestDagResult?.id and const dagId = latestDagResult?.dag_id ?? dag?.id`

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See if this is still relevant after the suggested change in useLatestDagResultOrDag


if (latestDagResult) {
latestDagResultId = latestDagResult.id;
latestDagId = latestDagResult.dag_id;
} else if (noRunDag) {
latestDagId = noRunDag.id;
}

const nodes = useWorkflowNodes(user.apiKey, workflowId, latestDagId);
Expand All @@ -250,29 +222,28 @@ const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
metricId: op.id,
name: op.name,
value: nodesResults.artifacts[artifactId]?.content_serialized,
status: nodesResults.artifacts[artifactId]?.exec_state?.status,
status:
nodesResults.artifacts[artifactId]?.exec_state?.status ??
ExecutionStatus.Registered,
};
});
return <MetricItem metrics={metricNodes} />;
},
Checks: (row) => {
const workflowId = row.id;

const {
data: dagResults,
error: dagResultsError,
isLoading: dagResultsLoading,
} = useDagResultsGetQuery({
apiKey: user.apiKey,
workflowId: workflowId,
});

let latestDagResultId;
const { latestDagResult, dag: noRunDag } = useLatestDagResultOrDag(
user.apiKey,
workflowId
);
let latestDagId;
if (!dagResultsLoading && !dagResultsError && dagResults.length > 0) {
const latestDagResult = getLatestDagResult(dagResults);
let latestDagResultId;

if (latestDagResult) {
latestDagResultId = latestDagResult.id;
latestDagId = latestDagResult.dag_id;
} else if (noRunDag) {
latestDagId = noRunDag.id;
}

const nodes = useWorkflowNodes(user.apiKey, workflowId, latestDagId);
Expand All @@ -289,7 +260,9 @@ const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
return {
checkId: op.id,
name: op.name,
status: nodesResults.artifacts[artifactId]?.exec_state?.status,
status:
nodesResults.artifacts[artifactId]?.exec_state?.status ??
ExecutionStatus.Registered,
level: op.spec.check.level,
value: nodesResults.artifacts[artifactId]?.content_serialized,
timestamp:
Expand Down
41 changes: 37 additions & 4 deletions src/ui/common/src/components/tables/PaginatedSearchTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export type SortColumn = {

// The sequence of keys in the row object to access in order to get the
// value which should be compared for sort purposes.
sortAccessPath: string[];
sortAccessPath: (string | number)[];
};

export enum SortType {
Expand All @@ -50,7 +50,7 @@ export enum SortType {
}

type SortConfig = {
name: SortColumn;
sortColumn: SortColumn;
sortType: SortType;
};

Expand All @@ -75,6 +75,7 @@ export const PaginatedSearchTable: React.FC<PaginatedSearchTableProps> = ({
onChangeRowsPerPage,
savedRowsPerPage,
sortColumns = [],
defaultSortConfig,
}) => {
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(
Expand All @@ -89,7 +90,7 @@ export const PaginatedSearchTable: React.FC<PaginatedSearchTableProps> = ({
const [sortTypeMenuAnchor, setSortTypeMenuAnchor] =
useState<HTMLLIElement>(null);
const [sortConfig, setSortConfig] = useState({
sortColumn: { name: null, sortAccessPath: [] as string[] },
sortColumn: null,
sortType: SortType.None,
});

Expand All @@ -105,14 +106,46 @@ export const PaginatedSearchTable: React.FC<PaginatedSearchTableProps> = ({
return value;
};

const rowData = [...data].map((row) => {
let rowData = [...data].map((row) => {
const rowData = {};
columns.forEach((column) => {
rowData[column] = getColumnValue(row, column);
});
return rowData;
});

// Default ordering
if (defaultSortConfig) {
rowData = rowData.sort((r1, r2) => {
const col = defaultSortConfig.sortColumn;
let v1: PaginatedSearchTableRow | PaginatedSearchTableElement = r1;
let v2: PaginatedSearchTableRow | PaginatedSearchTableElement = r2;
for (const path of col.sortAccessPath) {
v1 = v1[path];
v2 = v2[path];
}

if (defaultSortConfig.sortType === SortType.Ascending) {
if (v1 > v2) {
return 1;
} else if (v1 < v2) {
return -1;
} else {
return 0;
}
} else {
// sortType === SortType.Descending
if (v1 > v2) {
return -1;
} else if (v1 < v2) {
return 1;
} else {
return 0;
}
}
});
}

const [rows, setRows] = useState(rowData);
const [orderedRows, setOrderedRows] = useState(rowData);

Expand Down
24 changes: 24 additions & 0 deletions src/ui/common/src/utils/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ArtifactResultResponse } from '../handlers/responses/node';
import { DagResultResponse } from '../handlers/responses/workflow';
import { TableRow } from './data';

export enum AWSCredentialType {
Expand Down Expand Up @@ -74,6 +75,29 @@ export const getArtifactResultTableRow = (
};
};

export function getLatestDagResult(
dagResults: DagResultResponse[]
): DagResultResponse {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I slightly prefer return an undefined here if there's no result available, and let the caller decide how to deal with undefined result

const emptyDagResult: DagResultResponse = {
id: null,
dag_id: null,
exec_state: {
status: ExecutionStatus.Registered,
timestamps: { pending_at: new Date(0).toLocaleString() },
},
};
return dagResults.reduce(
(prev, curr) =>
curr.exec_state?.timestamps?.pending_at
? new Date(prev.exec_state?.timestamps?.pending_at) <
new Date(curr.exec_state?.timestamps?.pending_at)
? curr
: prev
: curr,
emptyDagResult
);
}

export const stringToExecutionStatus = (status: string): ExecutionStatus => {
let executionStatus = ExecutionStatus.Unknown;
switch (status) {
Expand Down