foreman_rh_cloud 4.0.31 → 5.0.31

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

@@ -4,7 +4,10 @@ import PropTypes from 'prop-types';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
 import SelectAllAlert from './SelectAllAlert';
-import { columns } from './InsightsTableConstants';
+import {
+  columns as defaultColumns,
+  getColumnsWithoutHostname,
+} from './InsightsTableConstants';
 import TableEmptyState from '../../../common/table/EmptyState';
 import { modifySelectedRows, getSortColumnIndex } from './InsightsTableHelpers';
 import Pagination from './Pagination';
@@ -27,10 +30,12 @@ const InsightsTable = ({
   clearAllSelection,
   error,
   isAllSelected,
+  hideHost,
 }) => {
   const { perPage: appPerPage } = useForemanSettings();
   const perPage = urlPerPage || appPerPage;
   const [rows, setRows] = React.useState([]);
+  const [columns, setColumns] = React.useState(defaultColumns);
 
   // acts as componentDidMount
   useEffect(() => {
@@ -38,8 +43,12 @@ const InsightsTable = ({
   }, []);
 
   useEffect(() => {
-    setRows(modifySelectedRows(hits, selectedIds, showSelectAllAlert));
-  }, [hits, selectedIds]);
+    setRows(
+      modifySelectedRows(hits, selectedIds, showSelectAllAlert, hideHost)
+    );
+
+    if (hideHost) setColumns(getColumnsWithoutHostname());
+  }, [hits, selectedIds, hideHost]);
 
   return (
     <React.Fragment>
@@ -51,14 +60,19 @@ const InsightsTable = ({
         isAllSelected={isAllSelected}
       />
       <Table
-        className="recommendations-table"
+        className="rh-cloud-recommendations-table"
         aria-label="Recommendations Table"
         onSelect={(_event, isSelected, rowId) =>
           onTableSelect(isSelected, rowId, rows, selectedIds)
         }
         canSelectAll
-        sortBy={{ index: getSortColumnIndex(sortBy), direction: sortOrder }}
-        onSort={onTableSort}
+        sortBy={{
+          index: getSortColumnIndex(columns, sortBy),
+          direction: sortOrder,
+        }}
+        onSort={(_event, index, direction) =>
+          onTableSort(columns, index, direction)
+        }
         cells={columns}
         rows={rows}
         variant="compact"
@@ -89,6 +103,7 @@ InsightsTable.propTypes = {
   query: PropTypes.string,
   error: PropTypes.string,
   isAllSelected: PropTypes.bool,
+  hideHost: PropTypes.bool,
 };
 
 InsightsTable.defaultProps = {
@@ -102,6 +117,7 @@ InsightsTable.defaultProps = {
   query: '',
   error: '',
   isAllSelected: false,
+  hideHost: false,
 };
 
 export default InsightsTable;

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

@@ -2,14 +2,13 @@ import URI from 'urijs';
 import { push } from 'connected-react-router';
 import { get } from 'foremanReact/redux/API';
 import { 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,
+  NEW_HOST_PATH,
 } from './InsightsTableConstants';
 
 export const fetchInsights = (queryParams = {}) => (dispatch, getState) => {
@@ -29,17 +28,20 @@ export const fetchInsights = (queryParams = {}) => (dispatch, getState) => {
     select_all: isSelectAll,
   });
 
-  dispatch(
-    push({
-      pathname: INSIGHTS_PATH,
-      search: uri.search(),
-    })
-  );
+  updateUrl(uri, dispatch);
 
   if (!isSelectAll) {
     dispatch(setSelectAllAlert(false));
   }
 
+  let search = query;
+  if (isNewHostPage(uri)) {
+    const hostname = uri.pathname().split('/new/hosts/')[1];
+    const hostQuery = `hostname = ${hostname}`;
+    const q = query?.trim();
+    search = q ? `${hostQuery} AND (${q})` : hostQuery;
+  }
+
   return dispatch(
     get({
       key: INSIGHTS_HITS_API_KEY,
@@ -47,7 +49,7 @@ export const fetchInsights = (queryParams = {}) => (dispatch, getState) => {
       params: {
         page,
         per_page: perPage,
-        search: query,
+        search,
         order: `${sortBy} ${sortOrder}`,
       },
       handleSuccess: response => {
@@ -96,7 +98,7 @@ export const clearAllSelection = () => dispatch => {
   dispatch(setSelectAll(false));
 };
 
-export const onTableSort = (_event, index, direction) => {
+export const onTableSort = (columns, index, direction) => {
   // The checkbox column shifts the data columns by 1;
   const { sortKey } = columns[index - 1];
   return fetchInsights({
@@ -144,11 +146,16 @@ export const onTableSelect = (
 const setSelectAllUrl = selectAllValue => dispatch => {
   const uri = new URI();
   uri.setSearch({ select_all: selectAllValue });
+  updateUrl(uri, dispatch);
+};
 
-  dispatch(
-    push({
-      pathname: INSIGHTS_PATH,
-      search: uri.search(),
-    })
-  );
+const updateUrl = (uri, dispatch) => {
+  const nextUrlParams = { search: uri.search() };
+  if (isNewHostPage(uri)) {
+    // we need to keep the hash so the insights tab will remain selected in the new host details page.
+    nextUrlParams.hash = '/Insights';
+  }
+  dispatch(push(nextUrlParams));
 };
+
+const isNewHostPage = uri => uri.pathname().includes(NEW_HOST_PATH);

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

@@ -4,10 +4,12 @@ import {
   InsightsLabel,
   Section,
 } from '@redhat-cloud-services/frontend-components';
+import { DropdownItem } from '@patternfly/react-core';
 import { sortable, cellWidth } from '@patternfly/react-table';
-import { AnsibeTowerIcon } from '@patternfly/react-icons';
+import { AnsibeTowerIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from '../../../ForemanRhCloudHelpers';
+import DropdownToggle from '../../../common/DropdownToggle';
 
 export const totalRiskFormatter = ({ title: totalRisk }) => ({
   children: (
@@ -28,30 +30,73 @@ export const hasPlaybookFormatter = ({ title: hasPlaybook }) => ({
   ),
 });
 
+export const actionsFormatter = (props, { rowData = {} }) => {
+  const { recommendationUrl, accessRHUrl } = rowData;
+  const dropdownItems = [];
+
+  recommendationUrl &&
+    dropdownItems.push(
+      <DropdownItem key="recommendation-url">
+        <a href={recommendationUrl} target="_blank" rel="noopener noreferrer">
+          {__('View in Red Hat Insights')} <ExternalLinkAltIcon />
+        </a>
+      </DropdownItem>
+    );
+
+  accessRHUrl &&
+    dropdownItems.push(
+      <DropdownItem key="access-url">
+        <a href={accessRHUrl} target="_blank" rel="noopener noreferrer">
+          {__('Knowledgebase article')} <ExternalLinkAltIcon />
+        </a>
+      </DropdownItem>
+    );
+
+  return {
+    children: <DropdownToggle items={dropdownItems} />,
+  };
+};
+
 export const columns = [
   {
+    id: 'hostname',
     sortKey: 'hostname',
     title: __('Hostname'),
     transforms: [cellWidth(20), sortable],
   },
   {
+    id: 'recommendation',
     sortKey: 'title',
     title: __('Recommendation'),
     transforms: [cellWidth(50), sortable],
   },
   {
+    id: 'total risk',
     sortKey: 'total_risk',
     title: __('Total risk'),
     transforms: [cellWidth(15), sortable],
     cellTransforms: [totalRiskFormatter],
   },
   {
+    id: 'remediate',
     title: __('Remediate'),
-    transforms: [cellWidth(15)],
+    transforms: [cellWidth(10)],
     cellTransforms: [hasPlaybookFormatter],
   },
+  {
+    id: 'actions',
+    title: '',
+    transforms: [cellWidth(5)],
+    cellTransforms: [actionsFormatter],
+  },
 ];
 
+export const getColumnsWithoutHostname = () => {
+  const nextCols = columns.slice(1);
+  nextCols[0].transforms = [cellWidth(70), sortable];
+  return nextCols;
+};
+
 export const paginationTitles = {
   items: __('items'),
   page: __('page'),
@@ -75,3 +120,5 @@ 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';
+
+export const NEW_HOST_PATH = '/new/hosts/';

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

@@ -1,25 +1,42 @@
 /* eslint-disable camelcase */
-import { columns } from './InsightsTableConstants';
-
-export const modifySelectedRows = (hits, selectedIds, showSelectAllAlert) => {
+export const modifySelectedRows = (
+  hits,
+  selectedIds,
+  showSelectAllAlert,
+  hideHost
+) => {
   if (hits.length === 0) return [];
 
   return hits
     .asMutable()
-    .map(({ id, hostname, title, total_risk, has_playbook }) => {
-      const disableCheckbox = !has_playbook;
-      return {
-        cells: [hostname, title, total_risk, has_playbook],
-        disableCheckbox,
+    .map(
+      ({
         id,
-        /** The main table checkbox will be seen as selected only if all rows are selected,
-         * in this case we need to select also the disabled once and hide it with css */
-        selected: selectedIds[id] || (disableCheckbox && showSelectAllAlert),
-      };
-    });
+        hostname,
+        title,
+        total_risk,
+        has_playbook,
+        results_url,
+        solution_url,
+      }) => {
+        const disableCheckbox = !has_playbook;
+        const cells = [hostname, title, total_risk, has_playbook, results_url];
+        if (hideHost) cells.shift();
+        return {
+          cells,
+          disableCheckbox,
+          id,
+          /** The main table checkbox will be seen as selected only if all rows are selected,
+           * in this case we need to select also the disabled once and hide it with css */
+          selected: selectedIds[id] || (disableCheckbox && showSelectAllAlert),
+          recommendationUrl: results_url,
+          accessRHUrl: solution_url,
+        };
+      }
+    );
 };
 
-export const getSortColumnIndex = sortBy => {
+export const getSortColumnIndex = (columns, sortBy) => {
   let colIndex = 0;
   columns.forEach((col, index) => {
     if (col.sortKey === sortBy) {

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

@@ -17,6 +17,7 @@ exports[`InsightsTable rendering render with Props 1`] = `
     cells={
       Array [
         Object {
+          "id": "hostname",
           "sortKey": "hostname",
           "title": "Hostname",
           "transforms": Array [
@@ -25,6 +26,7 @@ exports[`InsightsTable rendering render with Props 1`] = `
           ],
         },
         Object {
+          "id": "recommendation",
           "sortKey": "title",
           "title": "Recommendation",
           "transforms": Array [
@@ -36,6 +38,7 @@ exports[`InsightsTable rendering render with Props 1`] = `
           "cellTransforms": Array [
             [Function],
           ],
+          "id": "total risk",
           "sortKey": "total_risk",
           "title": "Total risk",
           "transforms": Array [
@@ -47,20 +50,34 @@ exports[`InsightsTable rendering render with Props 1`] = `
           "cellTransforms": Array [
             [Function],
           ],
+          "id": "remediate",
           "title": "Remediate",
           "transforms": Array [
             [Function],
           ],
         },
+        Object {
+          "cellTransforms": Array [
+            [Function],
+          ],
+          "id": "actions",
+          "title": "",
+          "transforms": Array [
+            [Function],
+          ],
+        },
       ]
     }
-    className="recommendations-table"
+    className="rh-cloud-recommendations-table"
     contentId="expanded-content"
     dropdownDirection="down"
     dropdownPosition="right"
     expandId="expandable-toggle"
     gridBreakPoint="grid-md"
+    isHeaderSelectDisabled={false}
+    isNested={false}
     isStickyHeader={false}
+    isTreeTable={false}
     onSelect={[Function]}
     onSort={[Function]}
     ouiaSafe={true}
@@ -77,7 +94,7 @@ exports[`InsightsTable rendering render with Props 1`] = `
     variant="compact"
   >
     <TableHeader />
-    <Component />
+    <TableBody />
   </Table>
   <TableEmptyState
     error={null}

data/webpack/InsightsCloudSync/Components/InsightsTable/__tests__/__snapshots__/InsightsTableActions.test.js.snap

@@ -31,7 +31,6 @@ Array [
       "payload": Object {
         "args": Array [
           Object {
-            "pathname": "/foreman_rh_cloud/insights_cloud",
             "search": "?page=2&per_page=7&search=&sort_by=&sort_order=&select_all=true",
           },
         ],

data/webpack/InsightsCloudSync/Components/InsightsTable/table.scss

@@ -1,21 +1,19 @@
 @import '~@redhat-cloud-services/frontend-components/index.css';
 
-.rh-cloud-insights {
-  .recommendations-table {
-    .pf-c-table__check {
-      input:disabled {
-        display: none;
-      }
+.rh-cloud-recommendations-table {
+  .pf-c-table__check {
+    input:disabled {
+      display: none;
     }
+  }
 
-    .td-insights-remediate-playbook {
-      svg {
-        margin-right: 5px;
-      }
+  .td-insights-remediate-playbook {
+    svg {
+      margin-right: 5px;
     }
+  }
 
-    .td-insights-remediate-manual {
-      padding-left: 18px;
-    }
+  .td-insights-remediate-manual {
+    padding-left: 18px;
   }
 }

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.scss

@@ -6,18 +6,4 @@
       margin-top: 5px;
     }
   }
-
-  // applies to the backdrop parent of the modal
-  @at-root .pf-c-backdrop {
-    width: calc(100% - 200px);
-    left: 200px;
-  }
-
-  // where the vertical nav breaks: https://github.com/theforeman/foreman/blob/3347fa49d500964f0209122d8d36c920d1feafcc/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/HeaderToolbar.scss#L26
-  @media (max-width: 768px) {
-    @at-root .pf-c-backdrop {
-      width: 100%;
-      left: 0;
-    }
-  }
 }

data/webpack/InsightsCloudSync/Components/ToolbarDropdown.js

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { redHatAdvisorSystems } from '../InsightsCloudSyncHelpers';
 
 const ToolbarDropdown = ({ onRecommendationSync }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -12,6 +14,17 @@ const ToolbarDropdown = ({ onRecommendationSync }) => {
     >
       {__('Sync recommendations')}
     </DropdownItem>,
+    <DropdownItem key="cloud-advisor-systems-link">
+      <a
+        href={redHatAdvisorSystems()}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {__('View in Red Hat Insights')}
+        {'  '}
+        <ExternalLinkAltIcon />
+      </a>
+    </DropdownItem>,
   ];
   return (
     <Dropdown

data/webpack/InsightsCloudSync/Components/__tests__/__snapshots__/NoTokenEmptyState.test.js.snap

@@ -157,6 +157,7 @@ exports[`NoTokenEmptyState render 1`] = `
                                 isReadOnly={false}
                                 isRequired={false}
                                 onChange={[Function]}
+                                ouiaSafe={true}
                                 type="password"
                                 validated="default"
                                 value=""
@@ -165,6 +166,9 @@ exports[`NoTokenEmptyState render 1`] = `
                                   aria-invalid={false}
                                   aria-label="input-cloud-token"
                                   className="pf-c-form-control"
+                                  data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                                  data-ouia-component-type="PF4/TextInput"
+                                  data-ouia-safe={true}
                                   disabled={false}
                                   onBlur={[Function]}
                                   onChange={[Function]}
@@ -190,21 +194,28 @@ exports[`NoTokenEmptyState render 1`] = `
             onClick={[Function]}
             variant="primary"
           >
-            <button
-              aria-disabled={true}
-              aria-label={null}
-              className="pf-c-button pf-m-primary pf-m-disabled"
-              data-ouia-component-id="OUIA-Generated-Button-primary-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe={true}
-              disabled={true}
+            <ButtonBase
+              innerRef={null}
+              isDisabled={true}
               onClick={[Function]}
-              role={null}
-              tabIndex={null}
-              type="button"
+              variant="primary"
             >
-              Save setting and sync recommendations
-            </button>
+              <button
+                aria-disabled={true}
+                aria-label={null}
+                className="pf-c-button pf-m-primary pf-m-disabled"
+                data-ouia-component-id="OUIA-Generated-Button-primary-1"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe={true}
+                disabled={true}
+                onClick={[Function]}
+                role={null}
+                tabIndex={null}
+                type="button"
+              >
+                Save setting and sync recommendations
+              </button>
+            </ButtonBase>
           </Button>
         </div>
       </div>

data/webpack/InsightsCloudSync/InsightsCloudSyncHelpers.js

@@ -8,3 +8,11 @@ export const cloudTokenSettingUrl = () => {
   settingsUrl.setSearch({ search: 'name = rh_cloud_token' });
   return settingsUrl.toString();
 };
+
+export const redHatConsole = path => `https://console.redhat.com/${path || ''}`;
+export const redHatInsights = path => redHatConsole(`insights/${path || ''}`);
+export const redHatInventory = path =>
+  redHatInsights(`inventory/${path || ''}`);
+export const redHatAdvisor = path => redHatInsights(`advisor/${path || ''}`);
+export const redHatAdvisorSystems = path =>
+  redHatAdvisor(`systems/${path || ''}`);

data/webpack/InsightsCloudSync/__snapshots__/InsightsCloudSync.test.js.snap

@@ -32,7 +32,7 @@ exports[`InsightsCloudSync render 1`] = `
         <span
           className="insights-toolbar-buttons"
         >
-          <UNDEFINED />
+          <Memo(Connect(RemediationModal)) />
           <ToolbarDropdown
             onRecommendationSync={[Function]}
           />

data/webpack/InsightsHostDetailsTab/InsightsTab.scss

@@ -84,3 +84,7 @@
     }
   }
 }
+
+#new_host_details_insights_tab {
+  padding: 24px;
+}

data/webpack/InsightsHostDetailsTab/InsightsTabActions.js

@@ -1,5 +1,5 @@
 import { API } from 'foremanReact/redux/API';
-import { addToast } from 'foremanReact/redux/actions/toasts';
+import { addToast } from 'foremanReact/components/ToastsList';
 import { insightsCloudUrl } from '../InsightsCloudSync/InsightsCloudSyncHelpers';
 import {
   INSIGHTS_HITS_REQUEST,

data/webpack/InsightsHostDetailsTab/InsightsTabConstants.js

@@ -1,2 +1,77 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+
 export const INSIGHTS_HITS_REQUEST = 'INSIGHTS_HITS_REQUEST';
 export const INSIGHTS_HITS_SUCCESS = 'INSIGHTS_HITS_SUCCESS';
+
+export const getInitialRisks = () => ({
+  1: {
+    value: 0,
+    title: __('Low'),
+    hoverFill: '#2b9af3',
+  },
+  2: {
+    value: 0,
+    title: __('Moderate'),
+    hoverFill: '#d5a632',
+  },
+  3: {
+    value: 0,
+    title: __('Important'),
+    hoverFill: '#ec7a08',
+  },
+  4: {
+    value: 0,
+    title: __('Critical'),
+    hoverFill: '#7d1007',
+  },
+  total: 0,
+});
+
+const colorScale = ['#bee1f4', '#f4c145', '#f4b678', '#c9190b'];
+
+export const theme = {
+  legend: {
+    gutter: 20,
+    orientation: 'horizontal',
+    titleOrientation: 'top',
+    style: {
+      data: {
+        type: 'square',
+      },
+      labels: {
+        fontFamily: 'RedHatText',
+        fontSize: 14,
+        letterSpacing: 'normal',
+        padding: 10,
+        stroke: 'transparent',
+        fill: '#06c',
+        textDecorationColor: '#06c',
+      },
+      title: {
+        fontFamily: 'RedHatText',
+        fontSize: 14,
+        letterSpacing: 'normal',
+        padding: 2,
+        stroke: 'transparent',
+      },
+    },
+    colorScale,
+  },
+  pie: {
+    colorScale,
+    height: 230,
+    padAngle: 1,
+    padding: 20,
+    style: {
+      data: { padding: 8, stroke: 'transparent', strokeWidth: 1 },
+      labels: {
+        fontFamily: 'RedHatText',
+        fontSize: 14,
+        letterSpacing: 'normal',
+        padding: 8,
+        stroke: 'transparent',
+      },
+    },
+    width: 230,
+  },
+};