Skip to content

Commit

Permalink
Add YAML tab for Job Output event modal.
Browse files Browse the repository at this point in the history
  • Loading branch information
@FragmentedPacket
FragmentedPacket committed Sep 24, 2023
1 parent 29ad6e1 commit a9336d8
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 12 deletions.
24 changes: 22 additions & 2 deletions awx/ui/src/screens/Job/JobOutput/HostEventModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Modal, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
import PropTypes from 'prop-types';
import { t } from '@lingui/macro';
import { encode } from 'html-entities';
import { jsonToYaml } from 'util/yaml';
import StatusLabel from '../../../components/StatusLabel';
import { DetailList, Detail } from '../../../components/DetailList';
import ContentEmpty from '../../../components/ContentEmpty';
Expand Down Expand Up @@ -144,9 +145,28 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false }) {
<ContentEmpty title={t`No JSON Available`} />
)}
</Tab>
<Tab
eventKey={2}
title={<TabTitleText>{t`YAML`}</TabTitleText>}
aria-label={t`YAML tab`}
ouiaId="yaml-tab"
>
{activeTabKey === 2 && jsonObj ? (
<CodeEditor
mode="javascript"
readOnly
value={jsonToYaml(JSON.stringify(jsonObj))}
onChange={() => {}}
rows={20}
hasErrors={false}
/>
) : (
<ContentEmpty title={t`No YAML Available`} />
)}
</Tab>
{stdOut?.length ? (
<Tab
eventKey={2}
eventKey={3}
title={<TabTitleText>{t`Output`}</TabTitleText>}
aria-label={t`Output tab`}
ouiaId="standard-out-tab"
Expand All @@ -163,7 +183,7 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false }) {
) : null}
{stdErr?.length ? (
<Tab
eventKey={3}
eventKey={4}
title={<TabTitleText>{t`Standard Error`}</TabTitleText>}
aria-label={t`Standard error tab`}
ouiaId="standard-error-tab"
Expand Down
38 changes: 28 additions & 10 deletions awx/ui/src/screens/Job/JobOutput/HostEventModal.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
import HostEventModal from './HostEventModal';
import { jsonToYaml } from 'util/yaml';

const hostEvent = {
changed: true,
Expand Down Expand Up @@ -167,6 +168,8 @@ const jsonValue = `{
]
}`;

const yamlValue = jsonToYaml(jsonValue);

describe('HostEventModal', () => {
test('initially renders successfully', () => {
const wrapper = shallow(
Expand All @@ -187,7 +190,7 @@ describe('HostEventModal', () => {
<HostEventModal hostEvent={hostEvent} onClose={() => {}} isOpen />
);

expect(wrapper.find('Tabs Tab').length).toEqual(4);
expect(wrapper.find('Tabs Tab').length).toEqual(5);
});

test('should initially show details tab', () => {
Expand Down Expand Up @@ -287,7 +290,7 @@ describe('HostEventModal', () => {
expect(codeEditor.prop('value')).toEqual(jsonValue);
});

test('should display Standard Out tab content on tab click', () => {
test('should display YAML tab content on tab click', () => {
const wrapper = shallow(
<HostEventModal hostEvent={hostEvent} onClose={() => {}} isOpen />
);
Expand All @@ -299,6 +302,21 @@ describe('HostEventModal', () => {
const codeEditor = wrapper.find('Tab[eventKey=2] CodeEditor');
expect(codeEditor.prop('mode')).toBe('javascript');
expect(codeEditor.prop('readOnly')).toBe(true);
expect(codeEditor.prop('value')).toEqual(yamlValue);
});

test('should display Standard Out tab content on tab click', () => {
const wrapper = shallow(
<HostEventModal hostEvent={hostEvent} onClose={() => {}} isOpen />
);

const handleTabClick = wrapper.find('Tabs').prop('onSelect');
handleTabClick(null, 3);
wrapper.update();

const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
expect(codeEditor.prop('mode')).toBe('javascript');
expect(codeEditor.prop('readOnly')).toBe(true);
expect(codeEditor.prop('value')).toEqual(hostEvent.event_data.res.stdout);
});

Expand All @@ -316,10 +334,10 @@ describe('HostEventModal', () => {
);

const handleTabClick = wrapper.find('Tabs').prop('onSelect');
handleTabClick(null, 3);
handleTabClick(null, 4);
wrapper.update();

const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
const codeEditor = wrapper.find('Tab[eventKey=4] CodeEditor');
expect(codeEditor.prop('mode')).toBe('javascript');
expect(codeEditor.prop('readOnly')).toBe(true);
expect(codeEditor.prop('value')).toEqual('error content');
Expand Down Expand Up @@ -351,10 +369,10 @@ describe('HostEventModal', () => {
);

const handleTabClick = wrapper.find('Tabs').prop('onSelect');
handleTabClick(null, 2);
handleTabClick(null, 3);
wrapper.update();

const codeEditor = wrapper.find('Tab[eventKey=2] CodeEditor');
const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
expect(codeEditor.prop('mode')).toBe('javascript');
expect(codeEditor.prop('readOnly')).toBe(true);
expect(codeEditor.prop('value')).toEqual('foo bar');
Expand All @@ -375,10 +393,10 @@ describe('HostEventModal', () => {
);

const handleTabClick = wrapper.find('Tabs').prop('onSelect');
handleTabClick(null, 2);
handleTabClick(null, 3);
wrapper.update();

const codeEditor = wrapper.find('Tab[eventKey=2] CodeEditor');
const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
expect(codeEditor.prop('mode')).toBe('javascript');
expect(codeEditor.prop('readOnly')).toBe(true);
expect(codeEditor.prop('value')).toEqual('baz\nbar');
Expand All @@ -394,10 +412,10 @@ describe('HostEventModal', () => {
);

const handleTabClick = wrapper.find('Tabs').prop('onSelect');
handleTabClick(null, 2);
handleTabClick(null, 3);
wrapper.update();

const codeEditor = wrapper.find('Tab[eventKey=2] CodeEditor');
const codeEditor = wrapper.find('Tab[eventKey=3] CodeEditor');
expect(codeEditor.prop('mode')).toBe('javascript');
expect(codeEditor.prop('readOnly')).toBe(true);
expect(codeEditor.prop('value')).toEqual(
Expand Down

0 comments on commit a9336d8

Please sign in to comment.