foreman_leapp 0.0.6 → 0.1.4

data/webpack/components/PreupgradeReportsList/PreupgradeReportList.scss

@@ -0,0 +1,37 @@
+@import '~@theforeman/vendor/scss/variables';
+
+#preupgrade-report-entries-list-view {
+  .sortable-header {
+    &.active {
+      color: $color-pf-blue-400;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    .fa-angle-up, .fa-angle-down {
+      margin-right: 10px;
+    }
+  }
+
+  .list-view-pf-additional-info-item {
+    flex: 1;
+  }
+
+  .list-view-header {
+    border-top: 0px;
+    background-color: $color-pf-white;
+    border-left-color: $color-pf-white;
+    border-right-color: $color-pf-white;
+
+    .list-view-pf-description {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .list-view-pf-checkbox {
+      margin-left: 17px;
+    }
+  }
+}

data/webpack/components/PreupgradeReportsList/__tests__/PreupgradeReportsList.test.js

@@ -9,14 +9,30 @@ const allEntries = [
   { title: 'Not enough credits', severity: 'low' },
 ];
 
+const isSelected = () => false;
+const toggleSelected = () => {};
+const sort = { attribute: '', order: 'asc' };
+const changeSort = () => {};
+const toggleSelectAll = () => {};
+
 const fixtures = {
   'should render': {
     allEntries,
     fixAllWorking: false,
+    isSelected,
+    toggleSelected,
+    sort,
+    changeSort,
+    toggleSelectAll,
   },
   'should render when working': {
     allEntries,
     fixAllWorking: true,
+    isSelected,
+    toggleSelected,
+    sort,
+    changeSort,
+    toggleSelectAll,
   },
 };
 

data/webpack/components/PreupgradeReportsList/__tests__/__snapshots__/PreupgradeReportsList.test.js.snap

@@ -3,7 +3,18 @@
 exports[`PreupgradeReportsList should render 1`] = `
 <ListView
   className=""
+  id="preupgrade-report-entries-list-view"
 >
+  <PreupgradeReportsListHeader
+    changeSort={[Function]}
+    sort={
+      Object {
+        "attribute": "",
+        "order": "asc",
+      }
+    }
+    toggleSelectAll={[Function]}
+  />
   <PreupgradeReportEntry
     entry={
       Object {
@@ -11,7 +22,9 @@ exports[`PreupgradeReportsList should render 1`] = `
         "title": "Fix me!",
       }
     }
+    isEntrySelected={false}
     key="0"
+    toggleSelected={[Function]}
   />
   <PreupgradeReportEntry
     entry={
@@ -20,7 +33,9 @@ exports[`PreupgradeReportsList should render 1`] = `
         "title": "I am broken too",
       }
     }
+    isEntrySelected={false}
     key="1"
+    toggleSelected={[Function]}
   />
   <PreupgradeReportEntry
     entry={
@@ -29,7 +44,9 @@ exports[`PreupgradeReportsList should render 1`] = `
         "title": "Octocat is not happy",
       }
     }
+    isEntrySelected={false}
     key="2"
+    toggleSelected={[Function]}
   />
   <PreupgradeReportEntry
     entry={
@@ -38,7 +55,9 @@ exports[`PreupgradeReportsList should render 1`] = `
         "title": "Not enough credits",
       }
     }
+    isEntrySelected={false}
     key="3"
+    toggleSelected={[Function]}
   />
   <PaginationWrapper
     dropdownButtonId="preupgrade-report-entries-pagination-dropdown"
@@ -65,7 +84,18 @@ exports[`PreupgradeReportsList should render 1`] = `
 exports[`PreupgradeReportsList should render when working 1`] = `
 <ListView
   className=""
+  id="preupgrade-report-entries-list-view"
 >
+  <PreupgradeReportsListHeader
+    changeSort={[Function]}
+    sort={
+      Object {
+        "attribute": "",
+        "order": "asc",
+      }
+    }
+    toggleSelectAll={[Function]}
+  />
   <PreupgradeReportEntry
     entry={
       Object {
@@ -73,7 +103,9 @@ exports[`PreupgradeReportsList should render when working 1`] = `
         "title": "Fix me!",
       }
     }
+    isEntrySelected={false}
     key="0"
+    toggleSelected={[Function]}
   />
   <PreupgradeReportEntry
     entry={
@@ -82,7 +114,9 @@ exports[`PreupgradeReportsList should render when working 1`] = `
         "title": "I am broken too",
       }
     }
+    isEntrySelected={false}
     key="1"
+    toggleSelected={[Function]}
   />
   <PreupgradeReportEntry
     entry={
@@ -91,7 +125,9 @@ exports[`PreupgradeReportsList should render when working 1`] = `
         "title": "Octocat is not happy",
       }
     }
+    isEntrySelected={false}
     key="2"
+    toggleSelected={[Function]}
   />
   <PreupgradeReportEntry
     entry={
@@ -100,7 +136,9 @@ exports[`PreupgradeReportsList should render when working 1`] = `
         "title": "Not enough credits",
       }
     }
+    isEntrySelected={false}
     key="3"
+    toggleSelected={[Function]}
   />
   <PaginationWrapper
     dropdownButtonId="preupgrade-report-entries-pagination-dropdown"

data/webpack/components/PreupgradeReportsList/components/InfoItem.js

@@ -14,7 +14,7 @@ const InfoItem = ({ itemId, children, tooltipText }) => {
     </OverlayTrigger>
   );
   return (
-    <ListView.InfoItem key={itemId} className="additional-info-wide">
+    <ListView.InfoItem key={itemId}>
       {tooltipText ? overlay : children}
     </ListView.InfoItem>
   );

data/webpack/components/PreupgradeReportsList/components/InhibitorInfoItem.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'patternfly-react';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { isInhibitor } from '../../PreupgradeReports/PreupgradeReportsHelpers';
+import InfoItem from './InfoItem';
+import EmptyInfoItem from './EmptyInfoItem';
+
+const InhibitorInfoItem = ({ entry }) => {
+  const key = `inhibitor-${entry.id}`;
+
+  if (isInhibitor(entry)) {
+    return (
+      <InfoItem
+        itemId={key}
+        tooltipText={__('This issue inhibits the upgrade.')}
+      >
+        <span>
+          <Icon type="pf" name="security" className="severity-high" />
+          {__('Inhibitor')}
+        </span>
+      </InfoItem>
+    );
+  }
+  return <EmptyInfoItem entry={entry} attr="inhibitor" />;
+};
+
+InhibitorInfoItem.propTypes = {
+  entry: PropTypes.object.isRequired,
+};
+
+export default InhibitorInfoItem;

data/webpack/components/PreupgradeReportsList/components/PreupgradeReportEntry.js

@@ -3,9 +3,10 @@ import { ListView, Grid, Icon } from 'patternfly-react';
 import PropTypes from 'prop-types';
 import './foreman_leapp.scss';
 
+import InhibitorInfoItem from './InhibitorInfoItem';
+
 import {
   itemIteratorId,
-  presentSeverity,
   hasRemediations,
   getExternals,
   getRemediations,
@@ -13,27 +14,34 @@ import {
   getSeverity,
   getSummary,
   getTags,
+  getSeverityImg,
 } from './helpers';
 
-const PreupgradeReportEntry = ({ entry }) => (
+import { entryFixable } from '../../PreupgradeReports/PreupgradeReportsHelpers';
+
+const PreupgradeReportEntry = ({ entry, isEntrySelected, toggleSelected }) => (
   <ListView.Item
     key={entry.id}
     stacked
-    checkboxInput={<input type="checkbox" />}
+    checkboxInput={
+      <input
+        type="checkbox"
+        value={isEntrySelected}
+        checked={isEntrySelected}
+        disabled={!entryFixable(entry)}
+        onChange={() => toggleSelected(entry, isEntrySelected)}
+      />
+    }
     description={entry.title}
     additionalInfo={[
       <ListView.InfoItem key={itemIteratorId(entry, entry.hostname)}>
         <Icon type="pf" name="cluster" /> {entry.hostname}
       </ListView.InfoItem>,
       <ListView.InfoItem key={itemIteratorId(entry, entry.severity)}>
-        <Icon
-          type="pf"
-          name="resources-full"
-          style={{ color: presentSeverity(entry.severity) }}
-        />
-        {entry.severity}
+        {getSeverityImg(entry)}
       </ListView.InfoItem>,
       hasRemediations(entry),
+      <InhibitorInfoItem key={itemIteratorId(entry, 'flags')} entry={entry} />,
     ]}
   >
     <Grid fluid>
@@ -49,6 +57,8 @@ const PreupgradeReportEntry = ({ entry }) => (
 
 PreupgradeReportEntry.propTypes = {
   entry: PropTypes.object.isRequired,
+  isEntrySelected: PropTypes.bool.isRequired,
+  toggleSelected: PropTypes.func.isRequired,
 };
 
 export default PreupgradeReportEntry;

data/webpack/components/PreupgradeReportsList/components/PreupgradeReportsListHeader.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ListView } from 'patternfly-react';
+import PropTypes from 'prop-types';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import InfoItem from './InfoItem';
+import SortableHeaderItem from './SortableHeaderItem';
+
+const PreupgradeReportsListHeader = ({ sort, changeSort, toggleSelectAll }) => {
+  const additionalInfoColumns = [
+    { label: __('Host'), value: 'hostname' },
+    { label: __('Risk Factor'), value: 'severity' },
+    { label: __('Has Remediation?'), value: 'fix' },
+    { label: __('Inhibitor?'), value: 'inhibitor' },
+  ];
+
+  const additionalInfo = additionalInfoColumns.map((col, idx) => (
+    <InfoItem itemId={idx.toString()} key={idx}>
+      <strong>
+        <SortableHeaderItem
+          title={col.label}
+          sort={sort}
+          value={col.value}
+          changeSort={changeSort}
+        />
+      </strong>
+    </InfoItem>
+  ));
+
+  return (
+    <ListView.Item
+      additionalInfo={additionalInfo}
+      className="list-view-header"
+      checkboxInput={<input type="checkbox" onClick={toggleSelectAll} />}
+      description={
+        <SortableHeaderItem
+          title={__('Title')}
+          sort={sort}
+          value="title"
+          changeSort={changeSort}
+        />
+      }
+      hideCloseIcon
+      stacked
+    />
+  );
+};
+
+PreupgradeReportsListHeader.propTypes = {
+  sort: PropTypes.object.isRequired,
+  changeSort: PropTypes.func.isRequired,
+  toggleSelectAll: PropTypes.func.isRequired,
+};
+
+export default PreupgradeReportsListHeader;

data/webpack/components/PreupgradeReportsList/components/SortableHeaderItem.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Icon } from 'patternfly-react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+const SortableHeaderItem = ({ value, title, sort, changeSort }) => {
+  const chooseChevron = (active, order) => {
+    if (!active) {
+      return null;
+    }
+
+    const direction = order === 'asc' ? 'angle-up' : 'angle-down';
+
+    return <Icon type="fa" name={direction} />;
+  };
+
+  const active = sort.attribute === value;
+
+  const clickHandler = () => {
+    let direction = 'asc';
+
+    if (active) {
+      direction = sort.order === 'asc' ? 'desc' : 'asc';
+    }
+
+    changeSort({
+      attribute: value,
+      order: direction,
+    });
+  };
+
+  return (
+    <span
+      className={`sortable-header ${classNames({ active })}`}
+      onClick={clickHandler}
+    >
+      {chooseChevron(active, sort.order)}
+      {title}
+    </span>
+  );
+};
+
+SortableHeaderItem.propTypes = {
+  sort: PropTypes.object.isRequired,
+  changeSort: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+export default SortableHeaderItem;

data/webpack/components/PreupgradeReportsList/components/__tests__/InhibitorInfoItem.test.js

@@ -0,0 +1,27 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import InhibitorInfoItem from '../InhibitorInfoItem';
+
+const fixtures = {
+  'should render when inhibitor': {
+    entry: {
+      title: 'no title',
+      severity: 'low',
+      id: 5,
+      preupgradeReportId: 7,
+      flags: ['inhibitor'],
+    },
+  },
+  'should render when not inhibitor': {
+    entry: {
+      title: 'no title',
+      severity: 'low',
+      id: 5,
+      preupgradeReportId: 7,
+      flags: [],
+    },
+  },
+};
+
+describe('InhibitorInfoItem', () =>
+  testComponentSnapshotsWithFixtures(InhibitorInfoItem, fixtures));

data/webpack/components/PreupgradeReportsList/components/__tests__/PreupgradeReportEntry.test.js

@@ -5,6 +5,8 @@ import PreupgradeReportEntry from '../PreupgradeReportEntry';
 const fixtures = {
   'should render': {
     entry: { title: 'no title', severity: 'low', id: 5, preupgradeReportId: 7 },
+    isEntrySelected: false,
+    toggleSelected: () => {},
   },
 };
 

data/webpack/components/PreupgradeReportsList/components/__tests__/PreupgradeReportsListHeader.test.js

@@ -0,0 +1,14 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import PreupgradeReportsListHeader from '../PreupgradeReportsListHeader';
+
+const fixtures = {
+  'should render': {
+    sort: { attribute: '', order: 'asc' },
+    changeSort: () => {},
+    toggleSelectAll: () => {},
+  },
+};
+
+describe('PreupgradeReportsListHeader', () =>
+  testComponentSnapshotsWithFixtures(PreupgradeReportsListHeader, fixtures));