Fixes #37228 - Replace Ansible/Roles page with React component

app/controllers/ansible_roles_controller.rb

@@ -5,19 +5,10 @@ class AnsibleRolesController < ::ApplicationController
   include Foreman::Controller::AutoCompleteSearch
   include ForemanAnsible::Concerns::ImportControllerHelper
   include ::ForemanAnsible::AnsibleRolesDataPreparations
-  def index
-    @ansible_roles = resource_base.search_for(params[:search],
-                                              :order => params[:order]).
-                     paginate(:page => params[:page],
-                              :per_page => params[:per_page])
+  def index;
   end
 
-  def destroy
-    if @ansible_role.destroy
-      process_success
-    else
-      process_error
-    end
+  def destroy;
   end
 
   def import

app/controllers/ui_ansible_roles_controller.rb

@@ -7,6 +7,12 @@ def index
     @ui_ansible_roles = resource_scope_for_index(:permission => :view_ansible_roles)
   end
 
+  api :DELETE, '/ui_ansible_roles/:id', N_('Deletes Ansible role')
+  param :id, :identifier, :required => true
+  def destroy
+    AnsibleRole.find_by!(id: params[:id]).destroy
+  end
+
   # restore original method from find_common to ignore resource nesting
   def resource_scope(**kwargs)
     @resource_scope ||= scope_for(resource_class, **kwargs)

app/views/ui_ansible_roles/show.json.rabl

@@ -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

config/routes.rb

@@ -36,6 +36,7 @@
     end
   end
   scope '/ansible' do
+    match '/ansible_roles' => 'react#index', :via => [:get]
     constraints(:id => %r{[^\/]+}) do
       resources :hosts, :only => [] do
         member do
@@ -60,7 +61,7 @@
       end
     end
 
-    resources :ui_ansible_roles, :only => [:index]
+    resources :ui_ansible_roles, :only => [:index, :destroy]
 
     resources :ansible_variables, :except => [:show] do
       resources :lookup_values, :only => [:index, :create, :update, :destroy]

lib/foreman_ansible/register.rb

@@ -103,7 +103,8 @@
                :resource_type => 'AnsibleRole'
     permission :destroy_ansible_roles,
                { :ansible_roles => [:destroy],
-                 :'api/v2/ansible_roles' => [:destroy, :obsolete] },
+                 :'api/v2/ansible_roles' => [:destroy, :obsolete],
+                 :ui_ansible_roles => [:destroy] },
                :resource_type => 'AnsibleRole'
     permission :import_ansible_roles,
                { :ansible_roles => [:import, :confirm_import],

test/functional/ansible_roles_controller_test.rb

@@ -2,19 +2,4 @@
 
 require 'test_plugin_helper'
 # functional tests for AnsibleRolesController
-class AnsibleRolesControllerTest < ActionController::TestCase
-  setup do
-    @role = FactoryBot.create(:ansible_role)
-  end
-
-  basic_index_test
-
-  test 'should destroy role' do
-    assert_difference('AnsibleRole.count', -1) do
-      delete :destroy,
-             :params => { :id => @role.id },
-             :session => set_session_user
-    end
-    assert_redirected_to ansible_roles_url
-  end
-end
+class AnsibleRolesControllerTest < ActionController::TestCase; end

test/functional/ui_ansible_roles_controller_test.rb

@@ -11,4 +11,11 @@ class UiAnsibleRolesControllerTest < ActionController::TestCase
     res = JSON.parse @response.body
     assert_equal res['total'], res['results'].size
   end
+
+  test 'should destroy role' do
+    delete :destroy,
+           :params => { :id => @role.id },
+           :session => set_session_user
+    assert_response :success
+  end
 end

webpack/components/AnsibleRoles/AnsibleRolesPage.js

@@ -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)} />
+        ),
+      },
+    }}
+  />
+);

webpack/components/AnsibleRoles/AnsibleRolesPageHelpers.js

@@ -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}`)}`;

webpack/components/AnsibleRoles/components/AnsibleRolesImportButton.fixtures.js

@@ -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,
+      },
+    ],
+  },
+];

webpack/components/AnsibleRoles/components/AnsibleRolesImportButton.js

@@ -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}
+    />
+  );
+};