+ Hello there
+ {props.nodes[tooltip.dataIndex] &&
+ props.parsedExecutionMetricsData[
+ props.nodes[tooltip.dataIndex].id
+ ]?.map(span => (
+
+ {span.operationId}:{' '}
+ {getDuration(span.startTime, span.endTime) / 1000}
+
+ ))}
+
+ >
+ );
};
diff --git a/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/utils.ts b/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/utils.ts
index 4bd600b69..1556d5907 100644
--- a/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/utils.ts
+++ b/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/utils.ts
@@ -2,7 +2,7 @@ import { getNodeExecutionPhaseConstants } from 'components/Executions/utils';
import { primaryTextColor } from 'components/Theme/constants';
import { NodeExecutionPhase } from 'models/Execution/enums';
import t from 'components/Executions/strings';
-import { Admin } from '@flyteorg/flyteidl-types';
+import { Admin, Protobuf } from '@flyteorg/flyteidl-types';
import { dNode } from 'models/Graph/types';
import { get, isNil, startCase, uniq } from 'lodash';
import { timestampToDate } from 'common';
@@ -78,6 +78,33 @@ export const parseSpanData = (
return results;
};
+export const getOperationsFromWorkflowExecutionMetrics = (
+ data: Admin.WorkflowExecutionGetMetricsResponse,
+): string[] => {
+ const operationIds = uniq(
+ traverse(data)
+ .paths()
+ .filter(path => path.at(-1) === 'operationId')
+ .map(path => get(data, path)),
+ );
+
+ return operationIds;
+};
+
+export const getTooltipData = (
+ nodes: dNode[],
+ nodeIdx: number,
+ data: Admin.WorkflowExecutionGetMetricsResponse,
+) => {
+ const parsedSpanData = parseSpanData(data);
+
+ const operationIds = getOperationsFromWorkflowExecutionMetrics(data);
+
+ const node = nodes[nodeIdx];
+
+ // Get all the relevant node and task ids from the parsed information
+};
+
/**
* Depending on amounf of second provided shows data in
* XhXmXs or XmXs or Xs format
@@ -148,6 +175,17 @@ export const generateChartData = (data: BarItemData[]): ChartDataInput => {
};
};
+export const getDuration = (
+ startTime: Protobuf.ITimestamp,
+ endTime?: Protobuf.ITimestamp,
+) => {
+ const endTimeInMS = endTime ? timestampToDate(endTime).getTime() : Date.now();
+
+ const duration = endTimeInMS - timestampToDate(startTime).getTime();
+
+ return duration;
+};
+
export const getExecutionMetricsData = (
data: Admin.WorkflowExecutionGetMetricsResponse,
nodes: dNode[],
From b9d550a6402d2a3e2964220bca6e351bf8d7cda4 Mon Sep 17 00:00:00 2001
From: Soham <4nalog@protonmail.com>
Date: Mon, 8 May 2023 11:43:04 -0400
Subject: [PATCH 14/27] chore: minor fixes
---
packages/console/package.json | 2 +
.../Timeline/TimelineChart/index.tsx | 77 +++++++++++++++----
.../Timeline/TimelineChart/utils.ts | 23 ++++++
yarn.lock | 16 ++++
4 files changed, 101 insertions(+), 17 deletions(-)
diff --git a/packages/console/package.json b/packages/console/package.json
index 8980ff2c3..e1ea12b43 100644
--- a/packages/console/package.json
+++ b/packages/console/package.json
@@ -84,6 +84,7 @@
"debug": "2.6.9",
"dom-helpers": "5.2.1",
"fuzzysort": "^1.1.1",
+ "humanize-duration": "^3.28.0",
"intersection-observer": "^0.7.0",
"js-yaml": "^3.13.1",
"linkify-it": "^2.2.0",
@@ -113,6 +114,7 @@
"devDependencies": {
"@types/debug": "^0.0.30",
"@types/dom-helpers": "^5.0.1",
+ "@types/humanize-duration": "^3.27.1",
"@types/js-yaml": "^3.10.1",
"@types/linkify-it": "^2.1.0",
"@types/lodash": "^4.14.68",
diff --git a/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/index.tsx b/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/index.tsx
index 542b1a20e..825e55d3c 100644
--- a/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/index.tsx
+++ b/packages/console/src/components/Executions/ExecutionDetails/Timeline/TimelineChart/index.tsx
@@ -1,14 +1,19 @@
import * as React from 'react';
import { Bar } from 'react-chartjs-2';
import { dNode } from 'models/Graph/types';
-import { getBarOptions } from './barOptions';
+import { Box, makeStyles } from '@material-ui/core';
+
+import { NodeExecutionPhase } from 'models';
+import { getNodeExecutionPhaseConstants } from 'components/Executions/utils';
import {
BarItemData,
generateChartData,
getChartData,
getDuration,
parseSpanData,
+ secondsToHumanReadableDuration,
} from './utils';
+import { getBarOptions } from './barOptions';
interface TimelineChartProps {
items: BarItemData[];
@@ -20,6 +25,20 @@ interface TimelineChartProps {
parsedExecutionMetricsData: ReturnType