From 41e01394823798a87168c1a182c47e6fc881777e Mon Sep 17 00:00:00 2001 From: Blake Jackson Date: Tue, 9 Jul 2024 14:57:05 -0400 Subject: [PATCH 1/2] display labels on execution detail page Signed-off-by: Blake Jackson --- .../ExecutionDetails/ExecutionLabels.tsx | 36 +++++++++++++ .../ExecutionDetails/ExecutionMetadata.tsx | 13 ++++- .../Executions/ExecutionDetails/constants.ts | 1 + .../test/ExecutionLabels.test.tsx | 51 +++++++++++++++++++ .../test/ExecutionMetadata.test.tsx | 6 +++ .../src/models/__mocks__/executionsData.ts | 5 ++ 6 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionLabels.tsx create mode 100644 packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionLabels.test.tsx diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionLabels.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionLabels.tsx new file mode 100644 index 000000000..55a8849ab --- /dev/null +++ b/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 = ({values}) => { + const classes = useStyles(); + return ( +
+ {Object.entries(values).map(([key, value]) => ( + + ))} +
+ ); +}; diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx index 86c4db73d..988395338 100644 --- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx +++ b/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 { @@ -69,6 +70,7 @@ export const ExecutionMetadata: React.FC<{}> = () => { const startedAt = execution?.closure?.startedAt; const workflowId = execution?.closure?.workflowId; + const { labels } = execution.spec; const { referenceExecution, systemMetadata , @@ -118,9 +120,18 @@ export const ExecutionMetadata: React.FC<{}> = () => { + > {parentNodeExecution.executionId.name} + ), + }); + } + + if (labels != null && labels.values != null) { + details.push({ + label: ExecutionMetadataLabels.labels, + value: ( + ) }) } diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/constants.ts b/packages/oss-console/src/components/Executions/ExecutionDetails/constants.ts index 42e00c893..d38a0b045 100644 --- a/packages/oss-console/src/components/Executions/ExecutionDetails/constants.ts +++ b/packages/oss-console/src/components/Executions/ExecutionDetails/constants.ts @@ -13,6 +13,7 @@ export enum ExecutionMetadataLabels { interruptible = 'Interruptible override', overwriteCache = 'Overwrite cached outputs', parent = 'Parent', + labels = 'Labels', } export const tabs = { diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionLabels.test.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionLabels.test.tsx new file mode 100644 index 000000000..0bc9f5d3e --- /dev/null +++ b/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) => ( +
{props.label}
+)); + +describe('ExecutionLabels', () => { + it('renders chips with key-value pairs correctly', () => { + const values = { + 'random/uuid': 'f8b9ff18-4811-4bcc-aefd-4f4ec4de469d', + 'bar': 'baz', + 'foo': '', + }; + + render(); + + 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(); + 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(); + + const chips = screen.getAllByTestId('chip'); + expect(chips.length).toBe(3); + }); +}); diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx index d20a94190..f201013fb 100644 --- a/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx +++ b/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx @@ -16,6 +16,7 @@ const interruptibleTestId = `metadata-${ExecutionMetadataLabels.interruptible}`; const overwriteCacheTestId = `metadata-${ExecutionMetadataLabels.overwriteCache}`; const relatedToTestId = `metadata-${ExecutionMetadataLabels.relatedTo}`; const parentNodeExecutionTestId = `metadata-${ExecutionMetadataLabels.parent}` +const labelsTestId = `metadata-${ExecutionMetadataLabels.labels}`; jest.mock('../../../../models/Launch/api', () => ({ getLaunchPlan: jest.fn(() => Promise.resolve({ spec: {} })), @@ -118,4 +119,9 @@ describe('ExecutionMetadata', () => { const { getByTestId } = renderMetadata(); expect(getByTestId(parentNodeExecutionTestId)).toHaveTextContent('name'); }) + + it('shows labels if spec has them', () => { + const { getByTestId } = renderMetadata(); + expect(getByTestId(labelsTestId)).toHaveTextContent("key: value"); + }) }); diff --git a/packages/oss-console/src/models/__mocks__/executionsData.ts b/packages/oss-console/src/models/__mocks__/executionsData.ts index a7ee4af1f..90727193e 100644 --- a/packages/oss-console/src/models/__mocks__/executionsData.ts +++ b/packages/oss-console/src/models/__mocks__/executionsData.ts @@ -100,6 +100,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) => { From 6246b2a47535d0167c5f0c986e83ad91e64b00dc Mon Sep 17 00:00:00 2001 From: Blake Jackson Date: Tue, 9 Jul 2024 18:02:58 -0400 Subject: [PATCH 2/2] updates from PR review Signed-off-by: Blake Jackson --- .../components/Executions/ExecutionDetails/ExecutionLabels.tsx | 3 ++- .../Executions/ExecutionDetails/ExecutionMetadata.tsx | 3 ++- .../ExecutionDetails/test/ExecutionMetadata.test.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionLabels.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionLabels.tsx index 55a8849ab..3586909aa 100644 --- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionLabels.tsx +++ b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionLabels.tsx @@ -15,7 +15,7 @@ const useStyles = makeStyles({ maxWidth: '420px' }, chip: { - margin: 4, + margin: '2px 2px 2px 0', }, }); @@ -26,6 +26,7 @@ export const ExecutionLabels: React.FC = ({values}) => {
{Object.entries(values).map(([key, value]) => ( = () => { details.push({ label: ExecutionMetadataLabels.labels, value: ( - + Object.entries(labels.values).length > 0 ? + : dashedValueString ) }) } diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx index f201013fb..782ac2b35 100644 --- a/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx +++ b/packages/oss-console/src/components/Executions/ExecutionDetails/test/ExecutionMetadata.test.tsx @@ -119,7 +119,7 @@ describe('ExecutionMetadata', () => { const { getByTestId } = renderMetadata(); expect(getByTestId(parentNodeExecutionTestId)).toHaveTextContent('name'); }) - + it('shows labels if spec has them', () => { const { getByTestId } = renderMetadata(); expect(getByTestId(labelsTestId)).toHaveTextContent("key: value");