foreman_rh_cloud 4.0.25.1 → 5.0.29

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__/InsightsHeader.test.js.snap

@@ -4,7 +4,6 @@ exports[`InsightsHeader render 1`] = `
 <div
   className="insights-header"
 >
-  <Connect(InsightsSettings) />
   <Text
     component="p"
   >

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/InsightsCloudSync.js

@@ -12,6 +12,7 @@ import {
 import './InsightsCloudSync.scss';
 import Pagination from './Components/InsightsTable/Pagination';
 import ToolbarDropdown from './Components/ToolbarDropdown';
+import InsightsSettings from './Components/InsightsSettings';
 
 const InsightsCloudSync = ({
   syncInsights,
@@ -42,6 +43,7 @@ const InsightsCloudSync = ({
 
   return (
     <div className="rh-cloud-insights">
+      <InsightsSettings />
       <PageLayout
         searchable
         searchProps={INSIGHTS_SEARCH_PROPS}

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

@@ -4,6 +4,7 @@ exports[`InsightsCloudSync render 1`] = `
 <div
   className="rh-cloud-insights"
 >
+  <Connect(InsightsSettings) />
   <PageLayout
     beforeToolbarComponent={<InsightsHeader />}
     header="Red Hat Insights"
@@ -31,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/NewHostDetailsTab.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import SearchBar from 'foremanReact/components/SearchBar';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Grid,
+  GridItem,
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import InsightsTable from '../InsightsCloudSync/Components/InsightsTable';
+import RemediationModal from '../InsightsCloudSync/Components/RemediationModal';
+import Pagination from '../InsightsCloudSync/Components/InsightsTable/Pagination';
+import { INSIGHTS_SEARCH_PROPS } from '../InsightsCloudSync/InsightsCloudSyncConstants';
+import { fetchInsights } from '../InsightsCloudSync/Components/InsightsTable/InsightsTableActions';
+import {
+  selectSearch,
+  selectHits,
+} from '../InsightsCloudSync/Components/InsightsTable/InsightsTableSelectors';
+import './InsightsTab.scss';
+import { redHatAdvisorSystems } from '../InsightsCloudSync/InsightsCloudSyncHelpers';
+
+const NewHostDetailsTab = ({ hostName, router }) => {
+  const dispatch = useDispatch();
+  const query = useSelector(selectSearch);
+  const hits = useSelector(selectHits);
+
+  useEffect(() => () => router.replace({ search: null }), [router]);
+
+  const onSearch = q => dispatch(fetchInsights({ query: q, page: 1 }));
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const onSatInsightsClick = () =>
+    router.push({ pathname: '/foreman_rh_cloud/insights_cloud' });
+
+  const dropdownItems = [
+    <DropdownItem key="insights-link">
+      <a onClick={onSatInsightsClick}>{__('Go to Satellite Insights page')}</a>
+    </DropdownItem>,
+  ];
+
+  if (hits.length) {
+    const { host_uuid: uuid } = hits[0];
+    dropdownItems.push(
+      <DropdownItem key="insights-advisor-link">
+        <a
+          href={redHatAdvisorSystems(uuid)}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {__('View in Red Hat Insights')}
+          {'  '}
+          <ExternalLinkAltIcon />
+        </a>
+      </DropdownItem>
+    );
+  }
+
+  return (
+    <Grid id="new_host_details_insights_tab" hasGutter>
+      <GridItem span={5}>
+        <SearchBar
+          data={INSIGHTS_SEARCH_PROPS}
+          onSearch={onSearch}
+          initialQuery={query}
+        />
+      </GridItem>
+      <GridItem span={4}>
+        <RemediationModal />
+        <Dropdown
+          className="insights-dropdown"
+          onSelect={() => setIsDropdownOpen(false)}
+          toggle={
+            <KebabToggle onToggle={isOpen => setIsDropdownOpen(isOpen)} />
+          }
+          isOpen={isDropdownOpen}
+          isPlain
+          dropdownItems={dropdownItems}
+        />
+      </GridItem>
+      <GridItem span={3}>
+        <Pagination variant="top" isCompact />
+      </GridItem>
+      <GridItem>
+        <InsightsTable hideHost hostname={hostName} />
+      </GridItem>
+    </Grid>
+  );
+};
+
+NewHostDetailsTab.propTypes = {
+  hostName: PropTypes.string,
+  router: PropTypes.object,
+};
+
+NewHostDetailsTab.defaultProps = {
+  hostName: '',
+  router: {},
+};
+
+export default NewHostDetailsTab;

data/webpack/__mocks__/foremanReact/components/Head.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+const Head = ({ children }) => <Helmet>{children}</Helmet>;
+
+Head.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default Head;

data/webpack/common/DropdownToggle.js

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, KebabToggle } from '@patternfly/react-core';
+
+const DropdownToggle = ({ items, ...props }) => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <Dropdown
+      onSelect={() => setOpen(false)}
+      toggle={<KebabToggle onToggle={value => setOpen(value)} />}
+      isOpen={isOpen}
+      isPlain
+      dropdownItems={items}
+      position="right"
+      {...props}
+    />
+  );
+};
+
+DropdownToggle.propTypes = {
+  items: PropTypes.array.isRequired,
+};
+
+export default DropdownToggle;

data/webpack/common/Switcher/HelpLabel.js

@@ -11,7 +11,7 @@ export const HelpLabel = ({ text, id, className }) => {
         onClick={e => e.preventDefault()}
         className={`pf-c-form__group-label-help ${className}`}
       >
-        <HelpIcon noVerticalAlign />
+        <HelpIcon />
       </button>
     </Popover>
   );

data/webpack/common/Switcher/__tests__/__snapshots__/HelpLabel.test.js.snap

@@ -12,7 +12,7 @@ exports[`InsightsCloudSync helpers should return insights cloud Url 1`] = `
   >
     <HelpIcon
       color="currentColor"
-      noVerticalAlign={true}
+      noVerticalAlign={false}
       size="sm"
     />
   </button>

data/webpack/common/Switcher/__tests__/__snapshots__/SwitcherPF4.test.js.snap

@@ -7,6 +7,7 @@ exports[`InsightsCloudSync helpers should return insights cloud Url 1`] = `
   id="rh-cloud-switcher-some-id"
   isChecked={true}
   isDisabled={false}
+  isReversed={false}
   label={
     <div>
       some-label