feat: add advanced launch options to execution details (#242)

* feat: add advanced launch options to execution details Signed-off-by: csirius <[email protected]> * feat: add mock function for get launch plan Signed-off-by: csirius <[email protected]>
flyteorg · Dec 7, 2021 · 711600d · 711600d
1 parent 3cd4a39
commit 711600d
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 2 deletions.
diff --git a/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx
@@ -12,6 +12,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { Routes } from 'routes/routes';
 import { ExpandableExecutionError } from '../Tables/ExpandableExecutionError';
 import { ExecutionMetadataLabels } from './constants';
+import { ExecutionMetadataExtra } from './ExecutionMetadataExtra';
 
 const useStyles = makeStyles((theme: Theme) => {
     return {
@@ -138,6 +139,7 @@ export const ExecutionMetadata: React.FC<{
                         </Typography>
                     </div>
                 ))}
+                <ExecutionMetadataExtra execution={execution} />
             </div>
 
             {error || abortMetadata ? (

diff --git a/src/components/Executions/ExecutionDetails/ExecutionMetadataExtra.tsx b/src/components/Executions/ExecutionDetails/ExecutionMetadataExtra.tsx
@@ -0,0 +1,85 @@
+import { Typography } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import * as classnames from 'classnames';
+import { useCommonStyles } from 'components/common/styles';
+import { Execution } from 'models/Execution/types';
+import * as React from 'react';
+import { ExecutionMetadataLabels } from './constants';
+import { getLaunchPlan } from 'models/Launch/api';
+import { LaunchPlanSpec } from 'models/Launch/types';
+
+const useStyles = makeStyles((theme: Theme) => {
+    return {
+        detailItem: {
+            flexShrink: 0,
+            marginLeft: theme.spacing(4)
+        }
+    };
+});
+
+interface DetailItem {
+    className?: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+}
+
+/**
+ * Renders extra metadata details about a given Execution
+ * @param execution
+ * @constructor
+ */
+export const ExecutionMetadataExtra: React.FC<{
+    execution: Execution;
+}> = ({ execution }) => {
+    const commonStyles = useCommonStyles();
+    const styles = useStyles();
+
+    const { launchPlan: launchPlanId, maxParallelism } = execution.spec;
+    const [launchPlanSpec, setLaunchPlanSpec] = React.useState<
+        Partial<LaunchPlanSpec>
+    >({});
+
+    React.useEffect(() => {
+        getLaunchPlan(launchPlanId).then(({ spec }) => setLaunchPlanSpec(spec));
+    }, [launchPlanId]);
+
+    const details: DetailItem[] = [
+        {
+            label: ExecutionMetadataLabels.serviceAccount,
+            value: launchPlanSpec?.authRole?.kubernetesServiceAccount
+        },
+        {
+            label: ExecutionMetadataLabels.rawOutputPrefix,
+            value: launchPlanSpec?.rawOutputDataConfig?.outputLocationPrefix
+        },
+        {
+            label: ExecutionMetadataLabels.parallelism,
+            value: maxParallelism
+        }
+    ];
+
+    return (
+        <>
+            {details.map(({ className, label, value }, idx) => (
+                <div
+                    className={classnames(styles.detailItem, className)}
+                    key={idx}
+                >
+                    <Typography
+                        className={commonStyles.truncateText}
+                        variant="subtitle1"
+                    >
+                        {label}
+                    </Typography>
+                    <Typography
+                        className={commonStyles.truncateText}
+                        variant="h6"
+                        data-testid={`metadata-${label}`}
+                    >
+                        {value}
+                    </Typography>
+                </div>
+            ))}
+        </>
+    );
+};
diff --git a/src/components/Executions/ExecutionDetails/constants.ts b/src/components/Executions/ExecutionDetails/constants.ts
@@ -4,7 +4,10 @@ export enum ExecutionMetadataLabels {
     duration = 'Duration',
     time = 'Time',
     relatedTo = 'Related to',
-    version = 'Version'
+    version = 'Version',
+    serviceAccount = 'Service Account',
+    rawOutputPrefix = 'Raw Output Prefix',
+    parallelism = 'Parallelism'
 }
 
 export const tabs = {

diff --git a/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx b/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx
@@ -12,6 +12,10 @@ const clusterTestId = `metadata-${ExecutionMetadataLabels.cluster}`;
 const startTimeTestId = `metadata-${ExecutionMetadataLabels.time}`;
 const durationTestId = `metadata-${ExecutionMetadataLabels.duration}`;
 
+jest.mock('models/Launch/api', () => ({
+    getLaunchPlan: jest.fn(() => Promise.resolve({ spec: {} }))
+}));
+
 describe('ExecutionMetadata', () => {
     let execution: Execution;
     beforeEach(() => {

diff --git a/src/models/Launch/api.ts b/src/models/Launch/api.ts
@@ -27,7 +27,7 @@ export const getLaunchPlan = (id: Identifier, config?: RequestConfig) =>
     getAdminEntity<Admin.LaunchPlan, LaunchPlan>(
         {
             path: makeIdentifierPath(endpointPrefixes.launchPlan, id),
-            messageType: Admin.Task
+            messageType: Admin.LaunchPlan
         },
         config
     );