foreman_ansible 6.0.1 → 6.3.0

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.js

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  cellWidth,
+} from '@patternfly/react-table';
+import {
+  Button,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarContent,
+  ToolbarItem,
+  Checkbox,
+  Pagination,
+} from '@patternfly/react-core';
+
+import PropTypes from 'prop-types';
+import { DEFAULT_PER_PAGE } from './AnsibleRolesAndVariablesConstants';
+import './AnsibleRolesAndVariables.scss';
+
+const ImportRolesAndVariablesTable = ({
+  columnsData,
+  rowsData,
+  proxy,
+  onSubmit,
+  onCancel,
+}) => {
+  const columns = columnsData.map(col => ({
+    ...col,
+    transforms: [cellWidth(10)],
+  }));
+  const [rows, setRows] = useState(rowsData);
+
+  const [isChecked, setIsChecked] = useState(false);
+  const [selectedRowsCount, setSelectRowsCount] = useState(0);
+
+  const [page, setPage] = useState();
+  const [perPage, setPerPage] = useState(DEFAULT_PER_PAGE);
+  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, perPage));
+
+  const onSelect = (event, isSelected, rowId, row) => {
+    const selectableRowLength = rows.filter(
+      tempRow => tempRow.parent === undefined
+    ).length;
+    let rowsCount = selectedRowsCount;
+    const tempRows = rows.map(tempRow => {
+      if (rowId === -1) {
+        tempRow.selected = isSelected;
+        setIsChecked(isSelected);
+        setSelectRowsCount(isSelected ? selectableRowLength : 0);
+      } else if (tempRow.id === row.id) {
+        tempRow.selected = isSelected;
+        rowsCount = isSelected ? selectedRowsCount + 1 : selectedRowsCount - 1;
+        if (rowsCount > 0 && rowsCount === selectableRowLength) {
+          setIsChecked(true);
+        } else {
+          setIsChecked(false);
+        }
+        setSelectRowsCount(rowsCount);
+      }
+      return tempRow;
+    });
+    setRows(tempRows);
+  };
+
+  const SelectAll = checked => {
+    onSelect(null, checked, -1);
+  };
+
+  const handleSetPage = (event, newPage) => {
+    const startIdx = (newPage - 1) * perPage;
+    const endIdx =
+      rows.length < newPage * perPage ? rows.length : newPage * perPage;
+    setPage(newPage);
+    setPaginatedRows(rows.slice(startIdx, endIdx));
+  };
+
+  const handlePerPageSelect = (
+    event,
+    newPerPage,
+    newPage,
+    startIdx,
+    endIdx
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+    setPaginatedRows(rows.slice(startIdx, endIdx));
+  };
+
+  const renderPagination = (variant = 'top') => (
+    <Pagination
+      isCompact
+      itemCount={rows.length}
+      page={page}
+      perPage={perPage}
+      defaultToFullPage
+      onSetPage={handleSetPage}
+      onPerPageSelect={handlePerPageSelect}
+      perPageOptions={[
+        { title: '3', value: 3 },
+        { title: '5', value: 5 },
+        { title: '10', value: 10 },
+      ]}
+      titles={{
+        paginationTitle: `${variant} pagination`,
+      }}
+    />
+  );
+
+  const renderSelectAll = () => (
+    <Toolbar>
+      <ToolbarContent>
+        <ToolbarGroup variant="icon-button-group">
+          <ToolbarItem>
+            <Checkbox
+              isChecked={isChecked}
+              onChange={SelectAll}
+              aria-label="select all checkbox"
+              id="select-all"
+              name="select-all"
+              label={isChecked ? 'Deselect all' : 'Select all'}
+            />
+          </ToolbarItem>
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const renderSubmitAndCancel = () => (
+    <div className="submit-cancel-btns">
+      <br />
+      <br />
+      <Button variant="primary" onClick={() => onSubmit(rows, proxy)}>
+        Submit
+      </Button>
+      <Button variant="secondary" onClick={onCancel}>
+        Cancel
+      </Button>
+    </div>
+  );
+
+  return (
+    <div id="import-ansible-roles-variables">
+      {renderSelectAll()}
+      <Table
+        aria-label="import roles and variables"
+        onSelect={onSelect}
+        rows={paginatedRows}
+        cells={columns}
+        canSelectAll={false}
+      >
+        <TableHeader />
+        <TableBody />
+      </Table>
+      {renderPagination()}
+      {renderSubmitAndCancel()}
+    </div>
+  );
+};
+
+ImportRolesAndVariablesTable.defaultProps = {
+  columnsData: undefined,
+  rowsData: [],
+  proxy: undefined,
+  onSubmit: undefined,
+  onCancel: undefined,
+};
+
+ImportRolesAndVariablesTable.propTypes = {
+  columnsData: PropTypes.array,
+  rowsData: PropTypes.array,
+  proxy: PropTypes.number,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+export default ImportRolesAndVariablesTable;

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariables.scss

@@ -0,0 +1,9 @@
+#import-ansible-roles-variables {
+  .submit-cancel-btns {
+    padding-top: 20px;
+
+    button {
+      margin-right: 5px;
+    }
+  }
+}

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariablesActions.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { post } from 'foremanReact/redux/API';
+import { push } from 'connected-react-router';
+import { prepareResult } from './AnsibleRolesAndVariablesHelpers';
+import {
+  ANSIBLE_ROLE_CONFIRM_IMPORT_PATH,
+  ANSIBLE_ROLES_INDEX,
+} from './AnsibleRolesAndVariablesConstants';
+
+export const foremanUrl = path => `${window.URL_PREFIX}${path}`;
+
+export const onSubmit = (rows, proxy) => dispatch => {
+  const params = prepareResult(rows);
+  dispatch(
+    post({
+      key: 'import_ansible_v_r',
+      url: ANSIBLE_ROLE_CONFIRM_IMPORT_PATH,
+      params: { changed: params, proxy },
+      handleSuccess: () => {
+        setTimeout(() => dispatch(push(ANSIBLE_ROLES_INDEX)), 500);
+      },
+      successToast: response => (
+        <span>
+          {__('Import roles and variables started: ')}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={foremanUrl(`/foreman_tasks/tasks/${response.data?.task?.id}`)}
+          >
+            {__('view the task in progress')}
+          </a>
+        </span>
+      ),
+      errorToast: error =>
+        `${__('Failed to import roles and variables ')} ${error}`,
+    })
+  );
+};

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariablesConstants.js

@@ -0,0 +1,4 @@
+export const ANSIBLE_ROLES_INDEX = '/ansible/ansible_roles';
+export const ANSIBLE_ROLE_CONFIRM_IMPORT_PATH =
+  '/ansible/ansible_roles/confirm_import';
+export const DEFAULT_PER_PAGE = 5;

data/webpack/components/AnsibleRolesAndVariables/AnsibleRolesAndVariablesHelpers.js

@@ -0,0 +1,11 @@
+export const prepareResult = rows => {
+  const result = {};
+  const selectRows = rows.filter(row => row.selected === true);
+  selectRows.forEach(row => {
+    result[row.kind] = {};
+  });
+  selectRows.forEach(row => {
+    result[row.kind][row.role.name] = row.role;
+  });
+  return result;
+};

data/webpack/components/AnsibleRolesAndVariables/__test__/AnsibleRolesAndVariablesHelpers.test.js

@@ -0,0 +1,50 @@
+import { prepareResult } from '../AnsibleRolesAndVariablesHelpers';
+
+const bennojoy = { created_at: null, id: null, name: 'bennojoy.ntp' };
+const gitRole = { created_at: null, id: null, name: '0ta2.git_role' };
+const jriguera = { created_at: null, id: null, name: 'jriguera.monit' };
+const rows = [
+  {
+    cells: [
+      'bennojoy.ntp',
+      'Update Role Variables',
+      'Add: 1 Remove: 2 ',
+      '',
+      '',
+    ],
+    kind: 'old',
+    id: 'bennojoy.ntp',
+    role: bennojoy,
+    selected: true,
+  },
+  {
+    cells: ['0ta2.git_role', 'Import Role ', 'Add: 5 ', '', ''],
+    kind: 'new',
+    id: '0ta2.git_role',
+    role: gitRole,
+    selected: true,
+  },
+  {
+    cells: ['jriguera.monit', 'Import Role ', 'Add: 12 ', '', ''],
+    kind: 'new',
+    id: 'jriguera.monit',
+    role: jriguera,
+  },
+];
+
+const result = {
+  old: {
+    'bennojoy.ntp': bennojoy,
+  },
+  new: {
+    '0ta2.git_role': gitRole,
+  },
+};
+
+describe('AnsibleRolesAndVariablesHelpers', () => {
+  describe('prepareResult', () => {
+    it('should return correct results', () => {
+      expect(prepareResult(rows)).toStrictEqual(result);
+    });
+  });
+});

data/webpack/components/AnsibleRolesAndVariables/__test__/AnsibleRolesAndVariablesImport.test.js

@@ -0,0 +1,39 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import ImportRolesAndVariablesTable from '../AnsibleRolesAndVariables';
+
+const rowsData = [
+  {
+    cells: [
+      'bennojoy.ntp',
+      'Update Role Variables',
+      'Add: 1 Remove: 2 ',
+      '',
+      '',
+    ],
+    kind: 'old',
+    id: 'bennojoy.ntp',
+  },
+  {
+    cells: ['0ta2.git_role', 'Import Role ', 'Add: 5 ', '', ''],
+    kind: 'new',
+    id: '0ta2.git_role',
+  },
+];
+
+const columnsData = [
+  { title: 'Name' },
+  { title: 'Operation' },
+  { title: 'Variables' },
+  { title: 'Hosts Count' },
+  { title: 'Hostgroups count' },
+];
+
+const fixtures = {
+  'should render': {
+    rowsData,
+    columnsData,
+  },
+};
+
+describe('ImportRolesAndVariablesTable', () =>
+  testComponentSnapshotsWithFixtures(ImportRolesAndVariablesTable, fixtures));

data/webpack/components/AnsibleRolesAndVariables/__test__/__snapshots__/AnsibleRolesAndVariablesImport.test.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImportRolesAndVariablesTable should render 1`] = `
+<div
+  id="import-ansible-roles-variables"
+>
+  <Toolbar>
+    <ToolbarContent
+      isExpanded={false}
+      showClearFiltersButton={false}
+    >
+      <ForwardRef
+        variant="icon-button-group"
+      >
+        <ToolbarItem>
+          <Checkbox
+            aria-label="select all checkbox"
+            className=""
+            id="select-all"
+            isChecked={false}
+            isDisabled={false}
+            isValid={true}
+            label="Select all"
+            name="select-all"
+            onChange={[Function]}
+          />
+        </ToolbarItem>
+      </ForwardRef>
+    </ToolbarContent>
+  </Toolbar>
+  <Table
+    aria-label="import roles and variables"
+    borders={true}
+    canSelectAll={false}
+    canSortFavorites={true}
+    cells={
+      Array [
+        Object {
+          "title": "Name",
+          "transforms": Array [
+            [Function],
+          ],
+        },
+        Object {
+          "title": "Operation",
+          "transforms": Array [
+            [Function],
+          ],
+        },
+        Object {
+          "title": "Variables",
+          "transforms": Array [
+            [Function],
+          ],
+        },
+        Object {
+          "title": "Hosts Count",
+          "transforms": Array [
+            [Function],
+          ],
+        },
+        Object {
+          "title": "Hostgroups count",
+          "transforms": Array [
+            [Function],
+          ],
+        },
+      ]
+    }
+    className=""
+    contentId="expanded-content"
+    dropdownDirection="down"
+    dropdownPosition="right"
+    expandId="expandable-toggle"
+    gridBreakPoint="grid-md"
+    isStickyHeader={false}
+    onSelect={[Function]}
+    ouiaSafe={true}
+    role="grid"
+    rowLabeledBy="simple-node"
+    rows={
+      Array [
+        Object {
+          "cells": Array [
+            "bennojoy.ntp",
+            "Update Role Variables",
+            "Add: 1 Remove: 2 ",
+            "",
+            "",
+          ],
+          "id": "bennojoy.ntp",
+          "kind": "old",
+        },
+        Object {
+          "cells": Array [
+            "0ta2.git_role",
+            "Import Role ",
+            "Add: 5 ",
+            "",
+            "",
+          ],
+          "id": "0ta2.git_role",
+          "kind": "new",
+        },
+      ]
+    }
+    selectVariant="checkbox"
+    variant={null}
+  >
+    <TableHeader />
+    <Component />
+  </Table>
+  <Pagination
+    className=""
+    defaultToFullPage={true}
+    firstPage={1}
+    isCompact={true}
+    isDisabled={false}
+    isSticky={false}
+    itemCount={2}
+    itemsEnd={null}
+    itemsStart={null}
+    offset={0}
+    onFirstClick={[Function]}
+    onLastClick={[Function]}
+    onNextClick={[Function]}
+    onPageInput={[Function]}
+    onPerPageSelect={[Function]}
+    onPreviousClick={[Function]}
+    onSetPage={[Function]}
+    ouiaSafe={true}
+    page={0}
+    perPage={5}
+    perPageOptions={
+      Array [
+        Object {
+          "title": "3",
+          "value": 3,
+        },
+        Object {
+          "title": "5",
+          "value": 5,
+        },
+        Object {
+          "title": "10",
+          "value": 10,
+        },
+      ]
+    }
+    titles={
+      Object {
+        "paginationTitle": "top pagination",
+      }
+    }
+    toggleTemplate={[Function]}
+    variant="top"
+    widgetId="pagination-options-menu"
+  />
+  <div
+    className="submit-cancel-btns"
+  >
+    <br />
+    <br />
+    <Button
+      onClick={[Function]}
+      variant="primary"
+    >
+      Submit
+    </Button>
+    <Button
+      variant="secondary"
+    >
+      Cancel
+    </Button>
+  </div>
+</div>
+`;