display labels on execution detail page

Signed-off-by: Blake Jackson <[email protected]>

packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionLabels.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Chip from '@mui/material/Chip';
+import makeStyles from '@mui/styles/makeStyles';
+
+type ValuesType = {[p: string]: string};
+interface Props {
+  values: ValuesType;
+}
+
+const useStyles = makeStyles({
+  chipContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '100%',
+    maxWidth: '420px'
+  },
+  chip: {
+    margin: 4,
+  },
+});
+
+
+export const ExecutionLabels: React.FC<Props> = ({values}) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.chipContainer}>
+      {Object.entries(values).map(([key, value]) => (
+        <Chip
+          key={key}
+          label={value ? `${key}: ${value}` : key}
+          className={classes.chip}
+        />
+      ))}
+    </div>
+  );
+};

packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx

@@ -14,6 +14,7 @@ import { ExecutionContext } from '../contexts';
 import { ExpandableExecutionError } from '../Tables/ExpandableExecutionError';
 import { ExecutionMetadataLabels } from './constants';
 import { ExecutionMetadataExtra } from './ExecutionMetadataExtra';
+import { ExecutionLabels } from './ExecutionLabels';
 
 const StyledContainer = styled('div')(({ theme }) => {
   return {
@@ -70,6 +71,7 @@ export const ExecutionMetadata: React.FC<{}> = () => {
   const workflowId = execution?.closure?.workflowId;
 
   const { referenceExecution, systemMetadata } = execution.spec.metadata;
+  const { labels } = execution.spec;
   const cluster = systemMetadata?.executionCluster ?? dashedValueString;
 
   const details: DetailItem[] = [
@@ -107,6 +109,15 @@ export const ExecutionMetadata: React.FC<{}> = () => {
     });
   }
 
+  if (labels != null && labels.values != null) {
+    details.push({
+      label: ExecutionMetadataLabels.labels,
+      value: (
+        <ExecutionLabels values={labels.values} />
+      )
+    })
+  }
+
   return (
     <StyledContainer>
       <Grid container className="detailsContainer" spacing={4}>

packages/oss-console/src/components/Executions/ExecutionDetails/constants.ts

@@ -12,6 +12,7 @@ export enum ExecutionMetadataLabels {
   securityContextDefault = 'default',
   interruptible = 'Interruptible override',
   overwriteCache = 'Overwrite cached outputs',
+  labels = 'Labels',
 }
 
 export const tabs = {

packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionLabels.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ExecutionLabels } from '../ExecutionLabels';
+
+jest.mock('@mui/material/Chip', () => (props: any) => (
+  <div data-testid="chip" {...props}>{props.label}</div>
+));
+
+describe('ExecutionLabels', () => {
+  it('renders chips with key-value pairs correctly', () => {
+    const values = {
+      'random/uuid': 'f8b9ff18-4811-4bcc-aefd-4f4ec4de469d',
+      'bar': 'baz',
+      'foo': '',
+    };
+
+    render(<ExecutionLabels values={values} />);
+
+    expect(screen.getByText('random/uuid: f8b9ff18-4811-4bcc-aefd-4f4ec4de469d')).toBeInTheDocument();
+    expect(screen.getByText('bar: baz')).toBeInTheDocument();
+    expect(screen.getByText('foo')).toBeInTheDocument();
+  });
+
+  it('applies correct styles to chip container', () => {
+    const values = {
+      'key': 'value',
+    };
+
+    const { container } = render(<ExecutionLabels values={values} />);
+    const chipContainer = container.firstChild;
+
+    expect(chipContainer).toHaveStyle('display: flex');
+    expect(chipContainer).toHaveStyle('flex-wrap: wrap');
+    expect(chipContainer).toHaveStyle('width: 100%');
+    expect(chipContainer).toHaveStyle('max-width: 420px');
+  });
+
+  it('renders correct number of chips', () => {
+    const values = {
+      'key1': 'value1',
+      'key2': 'value2',
+      'key3': 'value3',
+    };
+
+    render(<ExecutionLabels values={values} />);
+
+    const chips = screen.getAllByTestId('chip');
+    expect(chips.length).toBe(3);
+  });
+});

packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx

@@ -14,6 +14,7 @@ const startTimeTestId = `metadata-${ExecutionMetadataLabels.time}`;
 const durationTestId = `metadata-${ExecutionMetadataLabels.duration}`;
 const interruptibleTestId = `metadata-${ExecutionMetadataLabels.interruptible}`;
 const overwriteCacheTestId = `metadata-${ExecutionMetadataLabels.overwriteCache}`;
+const labelsTestId = `metadata-${ExecutionMetadataLabels.labels}`;
 
 jest.mock('../../../../models/Launch/api', () => ({
   getLaunchPlan: jest.fn(() => Promise.resolve({ spec: {} })),
@@ -106,4 +107,9 @@ describe('ExecutionMetadata', () => {
     const { getByTestId } = renderMetadata();
     expect(getByTestId(overwriteCacheTestId)).toHaveTextContent('false');
   });
+
+  it('shows labels if spec has them', () => {
+    const { getByTestId } = renderMetadata();
+    expect(getByTestId(labelsTestId)).toHaveTextContent("key: value");
+  })
 });

packages/oss-console/src/models/__mocks__/executionsData.ts

@@ -85,6 +85,11 @@ export const createMockExecutionSpec: () => ExecutionSpec = () => ({
   launchPlan: { ...MOCK_LAUNCH_PLAN_ID },
   notifications: { notifications: [] },
   metadata: generateExecutionMetadata(),
+  labels: {
+    values: {
+      "key": "value"
+    }
+  }
 });
 
 export const createMockExecution: (id?: string | number) => Execution = (id = 1) => {