-
Notifications
You must be signed in to change notification settings - Fork 112
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixes #37228 - Replace Ansible/Roles page with React component
- Loading branch information
Showing
18 changed files
with
394 additions
and
89 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 was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
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 |
---|---|---|
@@ -1,3 +1,15 @@ | ||
object @ansible_role | ||
|
||
extends "api/v2/ansible_roles/show" | ||
attributes :id, :name, :updated_at | ||
code :hostgroups_count do |role| | ||
role.hostgroups.count | ||
end | ||
code :hosts_count do |role| | ||
role.hosts.count | ||
end | ||
code :variables_count do |role| | ||
role.ansible_variables.count | ||
end | ||
code :can_delete do | ||
User.current.can?(:destroy_ansible_roles) | ||
end |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import React from 'react'; | ||
import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage'; | ||
import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime'; | ||
import { translate as __ } from 'foremanReact/common/I18n'; | ||
import { getDocsURL } from 'foremanReact/common/helpers'; | ||
import { getActions } from './AnsibleRolesPageHelpers'; | ||
import { AnsibleRolesImportButtonWrapper } from './components/AnsibleRolesImportButtonWrapper'; | ||
|
||
export const AnsibleRolesPage = () => ( | ||
<TableIndexPage | ||
header={__('Ansible Roles')} | ||
controller="ansible_roles" | ||
apiUrl="/ansible/ui_ansible_roles" | ||
apiOptions={{ key: 'ANSIBLE_ROLES_API_REQUEST_KEY' }} | ||
hasHelpPage | ||
creatable={false} | ||
isDeleteable | ||
searchable | ||
customToolbarItems={<AnsibleRolesImportButtonWrapper />} | ||
customHelpURL={getDocsURL( | ||
'Managing_Configurations_Ansible', | ||
'Importing_Ansible_Roles_and_Variables_ansible' | ||
)} | ||
rowKebabItems={getActions} | ||
columns={{ | ||
name: { title: __('Name'), isSorted: true, weight: 0 }, | ||
hostgroups_count: { title: __('Hostgroups'), weight: 1 }, | ||
hosts_count: { title: __('Hosts'), weight: 2 }, | ||
variables_count: { title: __('Variables'), weight: 3 }, | ||
updated_at: { | ||
title: __('Imported at'), | ||
isSorted: true, | ||
weight: 4, | ||
wrapper: ({ updated_at: updatedAt }) => ( | ||
<RelativeDateTime date={new Date(updatedAt)} /> | ||
), | ||
}, | ||
}} | ||
/> | ||
); |
38 changes: 38 additions & 0 deletions
38
webpack/components/AnsibleRoles/AnsibleRolesPageHelpers.js
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,38 @@ | ||
import React from 'react'; | ||
import { translate as __ } from 'foremanReact/common/I18n'; | ||
|
||
export const getActions = ({ id, name, canDelete, ...item }) => [ | ||
{ | ||
title: ( | ||
<a href={hostgroupsUrl(name)} target="_blank" rel="noreferrer"> | ||
{__('View Hostgroups')} | ||
</a> | ||
), | ||
isDisabled: false, | ||
}, | ||
{ | ||
title: ( | ||
<a href={hostsUrl(name)} target="_blank" rel="noreferrer"> | ||
{__('View Hosts')} | ||
</a> | ||
), | ||
isDisabled: false, | ||
}, | ||
{ | ||
title: ( | ||
<a href={variablesUrl(name)} target="_blank" rel="noreferrer"> | ||
{__('View Variables')} | ||
</a> | ||
), | ||
isDisabled: false, | ||
}, | ||
]; | ||
|
||
const hostgroupsUrl = roleName => `/hostgroups${searchString(roleName)}`; | ||
const hostsUrl = roleName => `/hosts${searchString(roleName)}`; | ||
const variablesUrl = roleName => `ansible_variables${searchString(roleName)}`; | ||
const searchString = roleName => | ||
`?search=${encodeURIComponent(`ansible_role = ${roleName}`)}`; | ||
|
||
export const importUrl = (proxyName, proxyId) => | ||
`ansible_roles/import?proxy=${encodeURIComponent(`${proxyId}-${proxyName}`)}`; |
31 changes: 31 additions & 0 deletions
31
webpack/components/AnsibleRoles/components/AnsibleRolesImportButton.fixtures.js
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,31 @@ | ||
export const testSmartProxies = [ | ||
{ | ||
created_at: '2024-06-21 14:49:35 +0200', | ||
updated_at: '2024-06-21 14:49:35 +0200', | ||
hosts_count: 0, | ||
name: 'debuggable', | ||
id: 2, | ||
url: 'http://smart-proxy-ansible-capable.example.com:8080', | ||
remote_execution_pubkey: null, | ||
download_policy: 'on_demand', | ||
supported_pulp_types: [], | ||
lifecycle_environments: [], | ||
features: [ | ||
{ | ||
capabilities: ['ansible-runner', 'single'], | ||
name: 'Dynflow', | ||
id: 17, | ||
}, | ||
{ | ||
capabilities: ['vcs_clone'], | ||
name: 'Ansible', | ||
id: 20, | ||
}, | ||
{ | ||
capabilities: [], | ||
name: 'Logs', | ||
id: 13, | ||
}, | ||
], | ||
}, | ||
]; |
72 changes: 72 additions & 0 deletions
72
webpack/components/AnsibleRoles/components/AnsibleRolesImportButton.js
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,72 @@ | ||
import React from 'react'; | ||
import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core'; | ||
import { translate as __ } from 'foremanReact/common/I18n'; | ||
import { useAPI } from 'foremanReact/common/hooks/API/APIHooks'; | ||
import { importUrl } from '../AnsibleRolesPageHelpers'; | ||
import { showToast } from '../../../toastHelper'; | ||
|
||
export const AnsibleRolesImportButton = () => { | ||
let dropdownItems; | ||
|
||
const { | ||
response: { results }, | ||
status, | ||
} = useAPI('get', '/api/v2/smart_proxies', { | ||
params: { search: 'feature=Ansible', per_page: 'all' }, | ||
}); | ||
|
||
const [isOpen, setIsOpen] = React.useState(false); | ||
const onToggle = isToggleOpen => { | ||
setIsOpen(isToggleOpen); | ||
}; | ||
const onFocus = () => { | ||
const element = document.getElementById('toggle-primary'); | ||
element.focus(); | ||
}; | ||
const onSelect = () => { | ||
setIsOpen(false); | ||
onFocus(); | ||
}; | ||
|
||
if (status === 'PENDING') { | ||
dropdownItems = [ | ||
<DropdownItem isDisabled key="loading_item"> | ||
{__('Loading...')} | ||
</DropdownItem>, | ||
]; | ||
} else if (status === 'ERROR') { | ||
showToast({ | ||
type: 'error', | ||
message: __('There was an error requesting Smart Proxies'), | ||
}); | ||
} else if (status === 'RESOLVED') { | ||
dropdownItems = results.map(proxy => ( | ||
<DropdownItem key={proxy.name} href={importUrl(proxy.name, proxy.id)}> | ||
{proxy.name} | ||
</DropdownItem> | ||
)); | ||
if (dropdownItems.length === 0) { | ||
dropdownItems = [ | ||
<DropdownItem isDisabled key="none_found"> | ||
{__('No Smart Proxies found')} | ||
</DropdownItem>, | ||
]; | ||
} | ||
} | ||
return ( | ||
<Dropdown | ||
onSelect={onSelect} | ||
toggle={ | ||
<DropdownToggle | ||
id="toggle-primary" | ||
toggleVariant="primary" | ||
onToggle={onToggle} | ||
> | ||
{__('Import from')} | ||
</DropdownToggle> | ||
} | ||
isOpen={isOpen} | ||
dropdownItems={dropdownItems} | ||
/> | ||
); | ||
}; |
Oops, something went wrong.