foreman_rh_cloud 3.0.14 → 3.0.15

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableActions.js

@@ -0,0 +1,129 @@
+import URI from 'urijs';
+import { push } from 'connected-react-router';
+import { get } from 'foremanReact/redux/API';
+import {
+  selectIsAllSelected,
+  selectQueryParams,
+} from './InsightsTableSelectors';
+import { INSIGHTS_PATH } from '../../InsightsCloudSyncConstants';
+import {
+  columns,
+  INSIGHTS_HITS_API_KEY,
+  INSIGHTS_HITS_PATH,
+  INSIGHTS_SET_SELECTED_IDS,
+  INSIGHTS_SET_SELECT_ALL_ALERT,
+  INSIGHTS_SET_SELECT_ALL,
+} from './InsightsTableConstants';
+
+export const fetchInsights = (queryParams = {}) => (dispatch, getState) => {
+  const state = getState();
+  const { page, perPage, query, sortBy, sortOrder } = {
+    ...selectQueryParams(state),
+    ...queryParams,
+  };
+
+  dispatch(
+    get({
+      key: INSIGHTS_HITS_API_KEY,
+      url: INSIGHTS_HITS_PATH,
+      params: {
+        page,
+        per_page: perPage,
+        search: query,
+        order: `${sortBy} ${sortOrder}`,
+      },
+    })
+  );
+
+  const uri = new URI();
+  uri.search({
+    page,
+    per_page: perPage,
+    search: query,
+    sort_by: sortBy,
+    sort_order: sortOrder,
+  });
+
+  dispatch(
+    push({
+      pathname: INSIGHTS_PATH,
+      search: uri.search(),
+    })
+  );
+
+  const isAllSelected = selectIsAllSelected(state);
+  if (isAllSelected) {
+    dispatch(clearAllSelection());
+  } else {
+    dispatch(setSelectAllAlert(false));
+    dispatch(setSelectAll(false));
+  }
+};
+
+export const setSelectAllAlert = showSelectAllAlert => ({
+  type: INSIGHTS_SET_SELECT_ALL_ALERT,
+  payload: { showSelectAllAlert },
+});
+
+export const selectByIds = selectedIds => ({
+  type: INSIGHTS_SET_SELECTED_IDS,
+  payload: { selectedIds },
+});
+
+export const setSelectAll = isAllSelected => ({
+  type: INSIGHTS_SET_SELECT_ALL,
+  payload: { isAllSelected },
+});
+
+export const selectAll = () => setSelectAll(true);
+
+export const clearAllSelection = () => dispatch => {
+  dispatch(selectByIds({}));
+  dispatch(setSelectAllAlert(false));
+  dispatch(setSelectAll(false));
+};
+
+export const onTableSort = (_event, index, direction) => {
+  // The checkbox column shifts the data columns by 1;
+  const { sortKey } = columns[index - 1];
+  return fetchInsights({
+    sortBy: sortKey,
+    sortOrder: direction,
+    page: 1,
+  });
+};
+
+export const onTableSetPage = (_event, pageNumber) =>
+  fetchInsights({ page: pageNumber });
+
+export const onTablePerPageSelect = (_event, perPageNumber) =>
+  fetchInsights({ perPage: perPageNumber });
+
+export const onTableSelect = (
+  _event,
+  isSelected,
+  rowId,
+  results,
+  prevSelectedIds
+) => dispatch => {
+  const selectedIds = { ...prevSelectedIds };
+  let showSelectAllAlert = false;
+  // for select all
+  if (rowId === -1) {
+    if (!isSelected) return dispatch(clearAllSelection());
+
+    results.forEach(row => {
+      selectedIds[row.id] = true;
+    });
+
+    showSelectAllAlert = true;
+  } else {
+    isSelected
+      ? (selectedIds[results[rowId].id] = true)
+      : delete selectedIds[results[rowId].id];
+  }
+
+  dispatch(selectByIds(selectedIds));
+  dispatch(setSelectAllAlert(showSelectAllAlert));
+  return null;
+};

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableConstants.js

@@ -0,0 +1,55 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import {
+  InsightsLabel,
+  Section,
+} from '@redhat-cloud-services/frontend-components';
+import { sortable, cellWidth } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from '../../../ForemanRhCloudHelpers';
+
+export const totalRiskFormatter = ({ title: totalRisk }) => ({
+  children: (
+    <Section className="insights-total-risk" type="icon-group">
+      <InsightsLabel value={totalRisk} />
+    </Section>
+  ),
+});
+
+export const columns = [
+  {
+    sortKey: 'hostname',
+    title: __('Hostname'),
+    transforms: [cellWidth(20), sortable],
+  },
+  {
+    sortKey: 'title',
+    title: __('Recommendation'),
+    transforms: [cellWidth(60), sortable],
+  },
+  {
+    sortKey: 'total_risk',
+    title: __('Total Risk'),
+    transforms: [cellWidth(20), sortable],
+    cellTransforms: [totalRiskFormatter],
+  },
+];
+
+export const actions = [
+  {
+    title: __('Remediate'),
+    onClick: (event, rowId, rowData, extra) => {
+      alert('Remediate!');
+    },
+  },
+];
+
+export const INSIGHTS_HITS_PATH = foremanUrl('/insights_cloud/hits');
+
+export const INSIGHTS_HITS_API_KEY = 'INSIGHTS_HITS';
+
+export const INSIGHTS_SET_SELECTED_IDS = 'INSIGHTS_SET_SELECTED_IDS';
+
+export const INSIGHTS_SET_SELECT_ALL_ALERT = 'INSIGHTS_SET_SELECT_ALL_ALERT';
+
+export const INSIGHTS_SET_SELECT_ALL = 'INSIGHTS_SET_SELECT_ALL';

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableHelpers.js

@@ -0,0 +1,31 @@
+/* eslint-disable camelcase */
+import { columns } from './InsightsTableConstants';
+
+export const modifySelectedRows = (hits, selectedIds) => {
+  if (hits.length === 0) return [];
+
+  return hits.asMutable().map(({ id, hostname, title, total_risk }) => {
+    const row = [hostname, title, total_risk];
+    row.selected = selectedIds[id];
+    return row;
+  });
+};
+
+export const getSortColumnIndex = sortBy => {
+  let colIndex = 0;
+  columns.forEach((col, index) => {
+    if (col.sortKey === sortBy) {
+      // The checkbox column shifts the data columns by 1;
+      colIndex = index + 1;
+    }
+  });
+  return colIndex;
+};
+
+export const getPerPageOptions = (urlPerPage, appPerPage) => {
+  const initialValues = new Set([5, 10, 15, 25, 50]);
+  initialValues.add(appPerPage);
+  urlPerPage && initialValues.add(urlPerPage);
+  const options = [...initialValues].sort((a, b) => a - b);
+  return options.map(value => ({ title: value.toString(), value }));
+};

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableReducer.js

@@ -0,0 +1,28 @@
+import Immutable from 'seamless-immutable';
+import {
+  INSIGHTS_SET_SELECTED_IDS,
+  INSIGHTS_SET_SELECT_ALL_ALERT,
+  INSIGHTS_SET_SELECT_ALL,
+} from './InsightsTableConstants';
+
+const initialState = Immutable({
+  selectedIds: {},
+  showSelectAllAlert: false,
+  isAllSelected: false,
+});
+
+export default (
+  state = initialState,
+  { payload: { selectedIds, showSelectAllAlert, isAllSelected } = {}, type }
+) => {
+  switch (type) {
+    case INSIGHTS_SET_SELECTED_IDS:
+      return state.merge({ selectedIds });
+    case INSIGHTS_SET_SELECT_ALL_ALERT:
+      return state.merge({ showSelectAllAlert });
+    case INSIGHTS_SET_SELECT_ALL:
+      return state.merge({ isAllSelected });
+    default:
+      return state;
+  }
+};

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTableSelectors.js

@@ -0,0 +1,74 @@
+import URI from 'urijs';
+import { STATUS } from 'foremanReact/constants';
+import { selectRouterLocation } from 'foremanReact/routes/RouterSelector';
+import {
+  selectAPIResponse,
+  selectAPIStatus,
+  selectAPIErrorMessage,
+} from 'foremanReact/redux/API/APISelectors';
+import { INSIGHTS_HITS_API_KEY } from './InsightsTableConstants';
+import { selectInsightsCloudSync } from '../../../ForemanRhCloudSelectors';
+
+export const selectQuery = state => selectRouterLocation(state).query;
+
+export const selectSearch = state => {
+  const { search = '' } = selectQuery(state);
+  return URI.decodeQuery(search);
+};
+
+export const selectPage = state => {
+  const { page = '1' } = selectQuery(state);
+  return Number(page);
+};
+
+export const selectPerPage = state => {
+  const perPage = selectQuery(state).per_page;
+  return perPage && Number(perPage);
+};
+
+export const selectQueryParams = state => ({
+  page: selectPage(state),
+  perPage: selectPerPage(state),
+  query: selectSearch(state),
+  sortBy: selectSortBy(state),
+  sortOrder: selectSortOrder(state),
+});
+
+export const selectStatus = state =>
+  selectAPIStatus(state, INSIGHTS_HITS_API_KEY);
+
+export const selectError = state =>
+  selectAPIErrorMessage(state, INSIGHTS_HITS_API_KEY);
+
+export const selectSortBy = state => {
+  const sortBy = selectQuery(state).sort_by;
+  return sortBy ? URI.decodeQuery(sortBy) : '';
+};
+
+export const selectSortOrder = state => {
+  const sortOrder = selectQuery(state).sort_order;
+  return sortOrder ? URI.decodeQuery(sortOrder) : '';
+};
+
+export const selectHits = state => {
+  if (selectStatus(state) !== STATUS.RESOLVED) return [];
+  return selectAPIResponse(state, INSIGHTS_HITS_API_KEY).hits || [];
+};
+
+export const selectInsightsCloudTable = state =>
+  selectInsightsCloudSync(state).table || {};
+
+export const selectSelectedIds = state =>
+  selectInsightsCloudTable(state).selectedIds || {};
+
+export const selectIsAllSelected = state =>
+  selectInsightsCloudTable(state).isAllSelected || false;
+
+export const selectShowSelectAllAlert = state =>
+  selectInsightsCloudTable(state).showSelectAllAlert || false;
+
+export const selectItemCount = state =>
+  selectAPIResponse(state, INSIGHTS_HITS_API_KEY).itemCount || 0;
+
+export const selectHasToken = state =>
+  selectAPIResponse(state, INSIGHTS_HITS_API_KEY).hasToken;

data/webpack/InsightsCloudSync/Components/InsightsTable/SelectAllAlert.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert, AlertActionLink } from '@patternfly/react-core';
+import { translate as __, sprintf } from 'foremanReact/common/I18n';
+
+const SelectAllAlert = ({
+  selectedIds,
+  itemCount,
+  showSelectAllAlert,
+  selectAll,
+  clearAllSelection,
+  isAllSelected,
+}) => {
+  if (!showSelectAllAlert) return null;
+  const selectedCount = Object.keys(selectedIds).length;
+  if (!selectedCount) return null;
+  if (!isAllSelected && selectedCount !== itemCount) {
+    return (
+      <Alert
+        isInline
+        variant="info"
+        title={sprintf(
+          'All %s recommendations on this page are selected.',
+          selectedCount
+        )}
+        actionLinks={
+          <AlertActionLink onClick={selectAll}>
+            {sprintf('Select all %s recommendations', itemCount)}
+          </AlertActionLink>
+        }
+      />
+    );
+  }
+
+  return (
+    <Alert
+      isInline
+      variant="info"
+      title={sprintf('All %s recommendations are selected.', itemCount)}
+      actionLinks={
+        <AlertActionLink onClick={clearAllSelection}>
+          {__('Clear Selection')}
+        </AlertActionLink>
+      }
+    />
+  );
+};
+
+SelectAllAlert.propTypes = {
+  selectedIds: PropTypes.object,
+  itemCount: PropTypes.number,
+  showSelectAllAlert: PropTypes.bool,
+  selectAll: PropTypes.func.isRequired,
+  clearAllSelection: PropTypes.func.isRequired,
+  isAllSelected: PropTypes.bool,
+};
+
+SelectAllAlert.defaultProps = {
+  selectedIds: {},
+  itemCount: 0,
+  showSelectAllAlert: false,
+  isAllSelected: false,
+};
+
+export default SelectAllAlert;

data/webpack/InsightsCloudSync/Components/InsightsTable/__tests__/InsightsTable.test.js

@@ -0,0 +1,13 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import InsightsTable from '../InsightsTable';
+import { tableProps } from './fixtures';
+
+const fixtures = {
+  'render with Props': tableProps,
+};
+
+describe('InsightsTable', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(InsightsTable, fixtures));
+});

data/webpack/InsightsCloudSync/Components/InsightsTable/__tests__/InsightsTableSelectors.test.js

@@ -0,0 +1,58 @@
+import { testSelectorsSnapshotWithFixtures } from '@theforeman/test';
+import { insightsStateWrapper } from '../../../../ForemanRhCloudTestHelpers';
+import { routerState, APIState, APIErrorState } from './fixtures';
+import {
+  selectError,
+  selectHasToken,
+  selectHits,
+  selectInsightsCloudTable,
+  selectIsAllSelected,
+  selectItemCount,
+  selectPage,
+  selectPerPage,
+  selectQuery,
+  selectQueryParams,
+  selectSearch,
+  selectSelectedIds,
+  selectShowSelectAllAlert,
+  selectSortBy,
+  selectSortOrder,
+  selectStatus,
+} from '../InsightsTableSelectors';
+
+const state = {
+  ...routerState,
+  ...APIState,
+  ...insightsStateWrapper({
+    table: {
+      selectedIds: {
+        '51': true,
+      },
+      showSelectAllAlert: true,
+      isAllSelected: false,
+    },
+  }),
+};
+
+const fixtures = {
+  'should return router query': () => selectQuery(state),
+  'should return router search': () => selectSearch(state),
+  'should return router page': () => selectPage(state),
+  'should return router perPage': () => selectPerPage(state),
+  'should return router sort by': () => selectSortBy(state),
+  'should return router sort order': () => selectSortOrder(state),
+  'should return queryParams': () => selectQueryParams(state),
+  'should return API status': () => selectStatus(state),
+  'should return API error': () => selectError({ ...state, ...APIErrorState }),
+  'should return API hits': () => selectHits(state),
+  'should return API item count': () => selectItemCount(state),
+  'should return API has token': () => selectHasToken(state),
+  'should return insights table': () => selectInsightsCloudTable(state),
+  'should return insights selectedIds': () => selectSelectedIds(state),
+  'should return insights isAllSelected': () => selectIsAllSelected(state),
+  'should return insights showSelectAllAlert': () =>
+    selectShowSelectAllAlert(state),
+};
+
+describe('InsightsTable selectors', () =>
+  testSelectorsSnapshotWithFixtures(fixtures));