-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add execution environment list to Organizations
Add execution environment list to Organizations See: #8210
- Loading branch information
1 parent
bbd61e2
commit dd016ab
Showing
9 changed files
with
365 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import React, { useEffect, useCallback } from 'react'; | ||
| import { useLocation } from 'react-router-dom'; | ||
| import { withI18n } from '@lingui/react'; | ||
| import { t } from '@lingui/macro'; | ||
| import { Card } from '@patternfly/react-core'; | ||
|
|
||
| import { OrganizationsAPI } from '../../../api'; | ||
| import { getQSConfig, parseQueryString } from '../../../util/qs'; | ||
| import useRequest from '../../../util/useRequest'; | ||
| import PaginatedDataList from '../../../components/PaginatedDataList'; | ||
| import DatalistToolbar from '../../../components/DataListToolbar'; | ||
|
|
||
| import OrganizationExecEnvListItem from './OrganizationExecEnvListItem'; | ||
|
|
||
| const QS_CONFIG = getQSConfig('organizations', { | ||
| page: 1, | ||
| page_size: 20, | ||
| order_by: 'image', | ||
| }); | ||
|
|
||
| function OrganizationExecEnvList({ i18n, organization }) { | ||
| const { id } = organization; | ||
| const location = useLocation(); | ||
|
|
||
| const { | ||
| error: contentError, | ||
| isLoading, | ||
| request: fetchExecutionEnvironments, | ||
| result: { | ||
| executionEnvironments, | ||
| executionEnvironmentsCount, | ||
| relatedSearchableKeys, | ||
| searchableKeys, | ||
| }, | ||
| } = useRequest( | ||
| useCallback(async () => { | ||
| const params = parseQueryString(QS_CONFIG, location.search); | ||
|
|
||
| const [response, responseActions] = await Promise.all([ | ||
| OrganizationsAPI.readExecutionEnvironments(id, params), | ||
| OrganizationsAPI.readExecutionEnvironmentsOptions(id, params), | ||
| ]); | ||
|
|
||
| return { | ||
| executionEnvironments: response.data.results, | ||
| executionEnvironmentsCount: response.data.count, | ||
| actions: responseActions.data.actions, | ||
| relatedSearchableKeys: ( | ||
| responseActions?.data?.related_search_fields || [] | ||
| ).map(val => val.slice(0, -8)), | ||
| searchableKeys: Object.keys( | ||
| responseActions.data.actions?.GET || {} | ||
| ).filter(key => responseActions.data.actions?.GET[key].filterable), | ||
| }; | ||
| }, [location, id]), | ||
| { | ||
| executionEnvironments: [], | ||
| executionEnvironmentsCount: 0, | ||
| actions: {}, | ||
| relatedSearchableKeys: [], | ||
| searchableKeys: [], | ||
| } | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| fetchExecutionEnvironments(); | ||
| }, [fetchExecutionEnvironments]); | ||
|
|
||
| return ( | ||
| <> | ||
| <Card> | ||
| <PaginatedDataList | ||
| contentError={contentError} | ||
| hasContentLoading={isLoading} | ||
| items={executionEnvironments} | ||
| itemCount={executionEnvironmentsCount} | ||
| pluralizedItemName={i18n._(t`Execution Environments`)} | ||
| qsConfig={QS_CONFIG} | ||
| toolbarSearchableKeys={searchableKeys} | ||
| toolbarRelatedSearchableKeys={relatedSearchableKeys} | ||
| toolbarSearchColumns={[ | ||
| { | ||
| name: i18n._(t`Image`), | ||
| key: 'image__icontains', | ||
| isDefault: true, | ||
| }, | ||
| { | ||
| name: i18n._(t`Created By (Username)`), | ||
| key: 'created_by__username__icontains', | ||
| }, | ||
| { | ||
| name: i18n._(t`Modified By (Username)`), | ||
| key: 'modified_by__username__icontains', | ||
| }, | ||
| ]} | ||
| toolbarSortColumns={[ | ||
| { | ||
| name: i18n._(t`Image`), | ||
| key: 'image', | ||
| }, | ||
| { | ||
| name: i18n._(t`Created`), | ||
| key: 'created', | ||
| }, | ||
| { | ||
| name: i18n._(t`Modified`), | ||
| key: 'modified', | ||
| }, | ||
| ]} | ||
| renderToolbar={props => ( | ||
| <DatalistToolbar {...props} qsConfig={QS_CONFIG} /> | ||
| )} | ||
| renderItem={executionEnvironment => ( | ||
| <OrganizationExecEnvListItem | ||
| key={executionEnvironment.id} | ||
| executionEnvironment={executionEnvironment} | ||
| detailUrl={`/execution_environments/${executionEnvironment.id}`} | ||
| /> | ||
| )} | ||
| /> | ||
| </Card> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default withI18n()(OrganizationExecEnvList); |
116 changes: 116 additions & 0 deletions
116
...ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvList.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import React from 'react'; | ||
| import { act } from 'react-dom/test-utils'; | ||
|
|
||
| import { | ||
| mountWithContexts, | ||
| waitForElement, | ||
| } from '../../../../testUtils/enzymeHelpers'; | ||
|
|
||
| import { OrganizationsAPI } from '../../../api'; | ||
| import OrganizationExecEnvList from './OrganizationExecEnvList'; | ||
|
|
||
| jest.mock('../../../api/'); | ||
|
|
||
| const executionEnvironments = { | ||
| data: { | ||
| count: 3, | ||
| results: [ | ||
| { | ||
| id: 1, | ||
| type: 'execution_environment', | ||
| url: '/api/v2/execution_environments/1/', | ||
| related: { | ||
| organization: '/api/v2/organizations/1/', | ||
| }, | ||
| organization: 1, | ||
| image: 'https://localhost.com/image/disk', | ||
| managed_by_tower: false, | ||
| credential: null, | ||
| }, | ||
| { | ||
| id: 2, | ||
| type: 'execution_environment', | ||
| url: '/api/v2/execution_environments/2/', | ||
| related: { | ||
| organization: '/api/v2/organizations/1/', | ||
| }, | ||
| organization: 1, | ||
| image: 'test/image123', | ||
| managed_by_tower: false, | ||
| credential: null, | ||
| }, | ||
| { | ||
| id: 3, | ||
| type: 'execution_environment', | ||
| url: '/api/v2/execution_environments/3/', | ||
| related: { | ||
| organization: '/api/v2/organizations/1/', | ||
| }, | ||
| organization: 1, | ||
| image: 'test/test', | ||
| managed_by_tower: false, | ||
| credential: null, | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| const mockOrganization = { | ||
| id: 1, | ||
| type: 'organization', | ||
| name: 'Default', | ||
| }; | ||
|
|
||
| const options = { data: { actions: { POST: {}, GET: {} } } }; | ||
|
|
||
| describe('<OrganizationExecEnvList/>', () => { | ||
| let wrapper; | ||
|
|
||
| test('should mount successfully', async () => { | ||
| await act(async () => { | ||
| wrapper = mountWithContexts( | ||
| <OrganizationExecEnvList organization={mockOrganization} /> | ||
| ); | ||
| }); | ||
| await waitForElement( | ||
| wrapper, | ||
| 'OrganizationExecEnvList', | ||
| el => el.length > 0 | ||
| ); | ||
| }); | ||
|
|
||
| test('should have data fetched and render 3 rows', async () => { | ||
| OrganizationsAPI.readExecutionEnvironments.mockResolvedValue( | ||
| executionEnvironments | ||
| ); | ||
|
|
||
| OrganizationsAPI.readExecutionEnvironmentsOptions.mockResolvedValue( | ||
| options | ||
| ); | ||
|
|
||
| await act(async () => { | ||
| wrapper = mountWithContexts( | ||
| <OrganizationExecEnvList organization={mockOrganization} /> | ||
| ); | ||
| }); | ||
| await waitForElement( | ||
| wrapper, | ||
| 'OrganizationExecEnvList', | ||
| el => el.length > 0 | ||
| ); | ||
|
|
||
| expect(wrapper.find('OrganizationExecEnvListItem').length).toBe(3); | ||
| expect(OrganizationsAPI.readExecutionEnvironments).toBeCalled(); | ||
| expect(OrganizationsAPI.readExecutionEnvironmentsOptions).toBeCalled(); | ||
| }); | ||
|
|
||
| test('should not render add button', async () => { | ||
| await act(async () => { | ||
| wrapper = mountWithContexts( | ||
| <OrganizationExecEnvList organization={mockOrganization} /> | ||
| ); | ||
| }); | ||
| waitForElement(wrapper, 'OrganizationExecEnvList', el => el.length > 0); | ||
| expect(wrapper.find('ToolbarAddButton').length).toBe(0); | ||
| }); | ||
| }); |
51 changes: 51 additions & 0 deletions
51
awx/ui_next/src/screens/Organization/OrganizationExecEnvList/OrganizationExecEnvListItem.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React from 'react'; | ||
| import { string } from 'prop-types'; | ||
| import { withI18n } from '@lingui/react'; | ||
| import { t } from '@lingui/macro'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { | ||
| DataListItem, | ||
| DataListItemRow, | ||
| DataListItemCells, | ||
| } from '@patternfly/react-core'; | ||
|
|
||
| import DataListCell from '../../../components/DataListCell'; | ||
| import { ExecutionEnvironment } from '../../../types'; | ||
|
|
||
| function OrganizationExecEnvListItem({ | ||
| executionEnvironment, | ||
| detailUrl, | ||
| i18n, | ||
| }) { | ||
| const labelId = `check-action-${executionEnvironment.id}`; | ||
|
|
||
| return ( | ||
| <DataListItem | ||
| key={executionEnvironment.id} | ||
| aria-labelledby={labelId} | ||
| id={`${executionEnvironment.id} `} | ||
| > | ||
| <DataListItemRow> | ||
| <DataListItemCells | ||
| dataListCells={[ | ||
| <DataListCell | ||
| key="image" | ||
| aria-label={i18n._(t`Execution environment image`)} | ||
| > | ||
| <Link to={`${detailUrl}`}> | ||
| <b>{executionEnvironment.image}</b> | ||
| </Link> | ||
| </DataListCell>, | ||
| ]} | ||
| /> | ||
| </DataListItemRow> | ||
| </DataListItem> | ||
| ); | ||
| } | ||
|
|
||
| OrganizationExecEnvListItem.prototype = { | ||
| executionEnvironment: ExecutionEnvironment.isRequired, | ||
| detailUrl: string.isRequired, | ||
| }; | ||
|
|
||
| export default withI18n()(OrganizationExecEnvListItem); |
Oops, something went wrong.