foreman_leapp 0.0.5 → 0.1.3

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

@@ -2,11 +2,37 @@ import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 
 import PreupgradeReportsList from '../index';
 
-import { preupgradeReports } from '../../PreupgradeReports/__tests__/PreupgradeReports.fixtures';
+const allEntries = [
+  { title: 'Fix me!', severity: 'Too severe to talk about' },
+  { title: 'I am broken too', severity: 'medium' },
+  { title: 'Octocat is not happy', severity: 'high' },
+  { title: 'Not enough credits', severity: 'low' },
+];
+
+const isSelected = () => false;
+const toggleSelected = () => {};
+const sort = { attribute: '', order: 'asc' };
+const changeSort = () => {};
+const toggleSelectAll = () => {};
 
 const fixtures = {
   'should render': {
-    preupgradeReports,
+    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,99 @@
 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 {
+        "severity": "Too severe to talk about",
+        "title": "Fix me!",
+      }
+    }
+    isEntrySelected={false}
+    key="0"
+    toggleSelected={[Function]}
+  />
+  <PreupgradeReportEntry
+    entry={
+      Object {
+        "severity": "medium",
+        "title": "I am broken too",
+      }
+    }
+    isEntrySelected={false}
+    key="1"
+    toggleSelected={[Function]}
+  />
+  <PreupgradeReportEntry
+    entry={
+      Object {
+        "severity": "high",
+        "title": "Octocat is not happy",
+      }
+    }
+    isEntrySelected={false}
+    key="2"
+    toggleSelected={[Function]}
+  />
+  <PreupgradeReportEntry
+    entry={
+      Object {
+        "severity": "low",
+        "title": "Not enough credits",
+      }
+    }
+    isEntrySelected={false}
+    key="3"
+    toggleSelected={[Function]}
+  />
+  <PaginationWrapper
+    dropdownButtonId="preupgrade-report-entries-pagination-dropdown"
+    itemCount={4}
+    onChange={[Function]}
+    pagination={
+      Object {
+        "page": 1,
+        "perPage": 20,
+        "perPageOptions": Array [
+          5,
+          10,
+          20,
+          30,
+          50,
+        ],
+      }
+    }
+    viewType="list"
+  />
+</ListView>
+`;
+
+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 {
@@ -11,7 +103,9 @@ exports[`PreupgradeReportsList should render 1`] = `
         "title": "Fix me!",
       }
     }
+    isEntrySelected={false}
     key="0"
+    toggleSelected={[Function]}
   />
   <PreupgradeReportEntry
     entry={
@@ -20,7 +114,9 @@ exports[`PreupgradeReportsList should render 1`] = `
         "title": "I am broken too",
       }
     }
+    isEntrySelected={false}
     key="1"
+    toggleSelected={[Function]}
   />
   <PreupgradeReportEntry
     entry={
@@ -29,7 +125,9 @@ exports[`PreupgradeReportsList should render 1`] = `
         "title": "Octocat is not happy",
       }
     }
+    isEntrySelected={false}
     key="2"
+    toggleSelected={[Function]}
   />
   <PreupgradeReportEntry
     entry={
@@ -38,7 +136,28 @@ exports[`PreupgradeReportsList should render 1`] = `
         "title": "Not enough credits",
       }
     }
+    isEntrySelected={false}
     key="3"
+    toggleSelected={[Function]}
+  />
+  <PaginationWrapper
+    dropdownButtonId="preupgrade-report-entries-pagination-dropdown"
+    itemCount={4}
+    onChange={[Function]}
+    pagination={
+      Object {
+        "page": 1,
+        "perPage": 20,
+        "perPageOptions": Array [
+          5,
+          10,
+          20,
+          30,
+          50,
+        ],
+      }
+    }
+    viewType="list"
   />
 </ListView>
 `;

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

@@ -1,20 +1,64 @@
 import React from 'react';
-import { ListView } from 'patternfly-react';
+import { ListView, Grid, Icon } from 'patternfly-react';
 import PropTypes from 'prop-types';
+import './foreman_leapp.scss';
 
-import { additionalInfo } from './helpers';
+import InhibitorInfoItem from './InhibitorInfoItem';
 
-const PreupgradeReportEntry = ({ entry }) => (
+import {
+  itemIteratorId,
+  hasRemediations,
+  getExternals,
+  getRemediations,
+  getTitle,
+  getSeverity,
+  getSummary,
+  getTags,
+  getSeverityImg,
+} from './helpers';
+
+import { entryFixable } from '../../PreupgradeReports/PreupgradeReportsHelpers';
+
+const PreupgradeReportEntry = ({ entry, isEntrySelected, toggleSelected }) => (
   <ListView.Item
     key={entry.id}
-    className="listViewItem--listItemVariants"
     stacked
-    additionalInfo={additionalInfo(entry)}
-  />
+    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)}>
+        {getSeverityImg(entry)}
+      </ListView.InfoItem>,
+      hasRemediations(entry),
+      <InhibitorInfoItem key={itemIteratorId(entry, 'flags')} entry={entry} />,
+    ]}
+  >
+    <Grid fluid>
+      {getTitle(entry)}
+      {getSeverity(entry)}
+      {getSummary(entry)}
+      {getTags(entry)}
+      {getExternals(entry)}
+      {getRemediations(entry)}
+    </Grid>
+  </ListView.Item>
 );
 
 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;