foreman_patch 1.1.6.alpha5 → 1.2.0.alpha1

data/webpack/components/Invocation/Invocation.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Tabs, Tab, TabTitleText, LoadingState } from 'patternfly-react';
+import { STATUS } from 'foremanReact/constants';
+
+import Terminal from '../common/Terminal/Terminal';
+
+const Invocation = ({ invocation, status }) => {
+  if (status === STATUS.ERROR) {
+    return (
+      <Alert type="error">
+        {__(
+          'There was an error loading the invocation, try refreshing the page.'
+        )}
+      </Alert>
+    );
+  }
+
+  const [activeTabKey, setActiveTabKey] = useState(0);
+
+  const handleTabClick = (event, tabIndex) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  return (
+    <LoadingState loading={status == STATUS.PENDING}>
+      <Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
+        <Tab eventKey={0} title={<TabTitleText>Overview</TabTitleText>}>
+          TODO: status
+        </Tab>
+        {invocation.phases.map((phase, index) => (
+          <Tab event={index + 1} title={<TabTitleText>{phase.humanized_name}</TabTitleText>}>
+            <Terminal key={phase.label} linesets={phase.live_output}/>
+          </Tab>
+        ))}
+      </Tabs>
+    </LoadingState>
+  );
+};
+
+Invocation.propTypes = {
+  status: PropTypes.string.isRequired,
+  invocation: PropTypes.object.isRequired,
+};
+
+export default Invocation;

data/webpack/{src/Components → components}/Invocation/InvocationSelectors.js

@@ -7,5 +7,8 @@ import { INVOCATION } from './InvocationConsts';
 export const selectInvocation = state =>
   selectAPIResponse(state, INVOCATION) || {};
 
+export const selectState = state =>
+  selectAPIResponse(state, INVOCATION).state;
+
 export const selectStatus = state =>
   selectAPIStatus(state, INVOCATION);

data/webpack/components/Invocation/index.js

@@ -0,0 +1,36 @@
+import React { useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
+import Invocation from './Invocation';
+import {
+  selectInvocation,
+  selectState,
+  selectStatus,
+} from './InvocationSelectors';
+import { getData } from './InvocationActions';
+import { INVOCATION } from './InvocationsConsts';
+
+const WrappedInvocation = () => {
+  const dispatch = useDispatch();
+  const state = useSelector(selectState);
+  const invocation = useSelector(selectInvocation);
+  const status = useSelector(selectStatus);
+  
+  useEffect(() => {
+    dispatch(getData());
+
+    return () => {
+      dispatch(stopInterval(INVOCATION));
+    };
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (state === 'stopped') {
+      dispatch(stopInterval(INVOCATION));
+    }
+  }, [state, dispatch]);
+
+  return <Invocation invocation={invocation} status={status}/>
+};
+
+export default WrappedInvocation;

data/webpack/components/Invocations/Invocations.js

@@ -2,13 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { LoadingState, Alert } from 'patternfly-react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { STATUS } from 'foremanReact/constants';
 
-import InvocationStatus from './components/InvocationStatus';
-import InvocationActions from './components/InvocationActions';
+import InvocationItem from './components/InvocationItem';
 
-const Invocations = ({ status, items, selectAll, areAllSelected, onSelect, isSelected }) => {
+const Invocations = ({ status, items }) => {
   if (status === STATUS.ERROR) {
     return (
       <Alert type="error">
@@ -20,51 +18,26 @@ const Invocations = ({ status, items, selectAll, areAllSelected, onSelect, isSel
   }
 
   const rows = items.length ? (
-    items.map((item, rowIndex) => (
-      <Tr key={`invocation-${item.id}`}>
-        <Td
-          select={{
-            rowIndex,
-            onSelect: (_event, isSelecting) => onSelect(item, rowIndex, isSelecting),
-            isSelected: isSelected(item)
-          }}
-        />
-        <Td className="invocation_name">
-          <a href={`/foreman_patch/invocations/${item.id}`}>{item.name}</a>
-        </Td>
-        <Td>
-          <InvocationStatus status={item.status}/>
-        </Td>
-        <Td>
-          <InvocationActions {...item}/>
-        </Td>
-      </Tr>
-    ))
+    items.map(item => (<InvocationItem {...item} />))
   ) : (
-    <Tr>
-      <Td colSpan="4">{__('No hosts found.')}</Td>
-    </Tr>
+    <tr>
+      <td colSpan="3">{__('No hosts found.')}</td>
+    </tr>
   );
 
   return (
     <LoadingState loading={!items.length && status === STATUS.PENDING}>
       <div>
-        <TableComposable className="table table-bordered table-striped table-hover">
-          <Thead>
-            <Tr>
-              <Th
-                select={{
-                  onSelect: (_event, isSelecting) => selectAll(isSelecting),
-                  isSelected: areAllSelected
-                }}
-              />
-              <Th>{__('Host')}</Th>
-              <Th className="col-md-2">{__('Status')}</Th>
-              <Th className="col-md-1">{__('Actions')}</Th>
-            </Tr>
-          </Thead>
-          <Tbody>{rows}</Tbody>
-        </TableComposable>
+        <table className="table table-bordered table-striped table-hover">
+          <thead>
+            <tr>
+              <th>{__('Host')}</th>
+              <th className="col-md-2">{__('Status')}</th>
+              <th className="col-md-1">{__('Actions')}</th>
+            </tr>
+          </thead>
+          <tbody>{rows}</tbody>
+        </table>
       </div>
     </LoadingState>
   );
@@ -73,15 +46,10 @@ const Invocations = ({ status, items, selectAll, areAllSelected, onSelect, isSel
 Invocations.propTypes = {
   status: PropTypes.string,
   items: PropTypes.array.isRequired,
-  selectAll: PropTypes.func.isRequired,
-  areAllSelected: PropTypes.bool,
-  onSelect: PropTypes.func.isRequired,
-  isSelected: PropTypes.func.isRequired,
 };
 
 Invocations.defaultProps = {
   status: null,
-  areAllSelected: false,
 };
 
 export default Invocations;

data/webpack/components/Invocations/InvocationsPage.js

@@ -4,7 +4,6 @@ import { Grid } from 'patternfly-react';
 
 import SearchBar from 'foremanReact/components/SearchBar';
 import Pagination from 'foremanReact/components/Pagination/PaginationWrapper';
-import { ActionButtons } from 'foremanReact/components/common/ActionButtons/ActionButtons';
 import { getControllerSearchProps } from 'foremanReact/constants';
 
 import Invocations from './Invocations';
@@ -18,11 +17,6 @@ const InvocationsPage = ({
   pagination,
   handleSearch,
   handlePagination,
-  selectAll,
-  areAllSelected,
-  onSelect,
-  isSelected,
-  actions
 }) => (
   <div id="patch_invocations">
     <Grid.Row>
@@ -41,19 +35,9 @@ const InvocationsPage = ({
           }}
         />
       </Grid.Col>
-      <Grid.Col md={6} className="title_action">
-        <ActionButtons buttons={[]} />
-      </Grid.Col>
     </Grid.Row>
     <br />
-    <Invocations
-      status={status}
-      items={items}
-      selectAll={selectAll}
-      areAllSelected={areAllSelected}
-      onSelect={onSelect}
-      isSelected={isSelected}
-    />
+    <Invocations status={status} items={items} />
     <Pagination
       viewType="table"
       itemCount={total}
@@ -73,17 +57,10 @@ InvocationsPage.propTypes = {
   pagination: PropTypes.object.isRequired,
   handleSearch: PropTypes.func.isRequired,
   handlePagination: PropTypes.func.isRequired,
-  selectAll: PropTypes.func.isRequired,
-  areAllSelected: PropTypes.bool,
-  onSelect: PropTypes.func.isRequired,
-  isSelected: PropTypes.func.isRequired,
-  actions: PropTypes.array,
 };
 
 InvocationsPage.defaultProps = {
   status: null,
-  areAllSelected: false,
-  actions: []
 };
 
 export default InvocationsPage;

data/webpack/components/Invocations/InvocationsSelectors.js

@@ -12,7 +12,7 @@ export const selectTotal = state =>
   selectAPIResponse(state, INVOCATIONS).total || 0;
 
 export const selectAutoRefresh = state =>
-  selectItems(state).some(item => (item.status === 'pending' || item.status === 'planned'));
+  selectItems(state).some(item => (item.result === 'pending'));
 
 export const selectStatus = state => selectAPIStatus(state, INVOCATIONS);
 

data/webpack/components/Invocations/components/{InvocationActions.js → InvocationItem.js}

@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import { ActionButtons } from 'foremanReact/components/common/ActionButtons/ActionButtons';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-const InvocationActions = ({ id, name, status, task_id, host_id }) => {
+import InvocationStatus from './InvocationStatus';
+
+const InvocationItem = ({ id, name, status, task_id, host_id }) => {
 
   const actions = [
     {
@@ -39,11 +41,21 @@ const InvocationActions = ({ id, name, status, task_id, host_id }) => {
   }
 
   return (
-    <ActionButtons buttons={[...actions]} />
+    <tr id={`invocation-${id}`}>
+      <td className="invocation_name">
+        <a href={`/foreman_patch/invocations/${id}`}>{name}</a>
+      </td>
+      <td className="invocation_status">
+        <InvocationStatus status={status} />
+      </td>
+      <td className="invocation_actions">
+        <ActionButtons buttons={[...actions]} />
+      </td>
+    </tr>
   );
 };
 
-InvocationActions.propTypes = {
+InvocationItem.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   status: PropTypes.string.isRequired,
@@ -51,4 +63,4 @@ InvocationActions.propTypes = {
   task_id: PropTypes.number.isRequired,
 };
 
-export default InvocationActions;
+export default InvocationItem;

data/webpack/components/Invocations/index.js

@@ -1,21 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Grid } from 'patternfly-react';
 
-import {
+import { 
   withInterval,
   stopInterval
 } from 'foremanReact/redux/middlewares/IntervalMiddleware';
 import { get } from 'foremanReact/redux/API';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
-import { getControllerSearchProps } from 'foremanReact/constants';
-import { translate as __ } from 'foremanReact/common/I18n';
-import SearchBar from 'foremanReact/components/SearchBar';
-import Pagination from 'foremanReact/components/Pagination/PaginationWrapper';
-import { ActionButtons } from 'foremanReact/components/common/ActionButtons/ActionButtons';
 
-import Invocations from './Invocations';
 import {
   selectItems,
   selectTotal,
@@ -25,8 +18,7 @@ import {
 } from './InvocationsSelectors';
 import { getUrl } from './InvocationsHelpers';
 import { INVOCATIONS } from './InvocationsConstants';
-
-import './Invocations.css';
+import InvocationsPage from './InvocationsPage';
 
 const WrappedInvocations = ({ round }) => {
   const dispatch = useDispatch();
@@ -44,9 +36,6 @@ const WrappedInvocations = ({ round }) => {
   });
   const [url, setUrl] = useState(getUrl(round, searchQuery, pagination));
   const intervalExists = useSelector(selectIntervalExists);
-  const [selectedItems, setSelectedItems] = useState([]);
-  const [recentSelectedItemIndex, setRecentSelectedRowIndex] = useState(null);
-  const [shifting, setShifting] = useState(false);
 
   const handleSearch = query => {
     const defaultPagination = { page: 1, perPage: pagination.perPage };
@@ -63,39 +52,13 @@ const WrappedInvocations = ({ round }) => {
     setUrl(getUrl(round, searchQuery, args));
   };
 
-  const selectAll = (isSelecting) => setSelectedItems(isSelecting ? items.map(item => item.id) : []);
-
-  const areAllSelected = selectedItems.length == items.length;
-
-  const setItemSelected = (item, isSelecting) =>
-    setSelectedItems(prevSelected => {
-      const otherSelectedItems = prevSelected.filter(i => i !== item.id);
-      return isSelecting ? [...otherSelectedItems, item.id] : otherSelectedItems;
-    });
-
-  const onSelect = (item, rowIndex, isSelecting) => {
-    if (shifting && recentSelectedRowIndex !== null) {
-      const numberSelected = rowIndex - recentSelectedRowIndex;
-      const intermediateIndexes =
-        numberSelected > 0
-          ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
-          : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index, setItemSelected(items[index], isSelecting));
-    } else {
-      setItemSelected(item, isSelecting);
-    }
-    setRecentSelectedRowIndex(rowIndex);
-  };
-
-  const isSelected = item => selectedItems.includes(item.id);
-
   const stopApiInterval = () => {
     if (intervalExists) {
       dispatch(stopInterval(INVOCATIONS));
     }
   };
 
-  const getData = url => withInterval(get({
+  const getData = url =>  withInterval(get({
     key: INVOCATIONS,
     url,
     handleError: () => {
@@ -104,73 +67,27 @@ const WrappedInvocations = ({ round }) => {
   }), 5000);
 
   useEffect(() => {
-    const onKeyDown = (e) => {
-      if (e.key === 'Shift') {
-        setShifting(true);
-      }
-    };
-    const onKeyUp = (e) => {
-      if (e.key === 'Shift') {
-        setShifting(false);
-      }
-    };
-
     dispatch(getData(url));
 
     if (!autoRefresh) {
       dispatch(stopInterval(INVOCATIONS));
     }
 
-    document.addEventListener('keydown', onKeyDown);
-    document.addEventListener('keyup', onKeyUp);
-
     return () => {
       dispatch(stopInterval(INVOCATIONS));
-      document.removeEventListener('keydown', onKeyDown);
-      document.removeEventListener('keyup', onKeyUp);
     };
   }, [dispatch, url, autoRefresh]);
 
   return (
-    <React.Fragment>
-      <Grid.Row>
-        <Grid.Col md={6} className="title_filter">
-          <SearchBar
-            onSearch={handleSearch}
-            data={{
-              ...getControllerSearchProps('foreman_patch/invocations'),
-              autocomplete: {
-                id: 'invocations_search',
-                searchQuery,
-                url: '/foreman_patch/invocations/auto_complete_search',
-                useKeyShortcuts: true,
-              },
-              bookmarks: {},
-            }}
-          />
-        </Grid.Col>
-        <Grid.Col md={6}>
-          <ActionButtons buttons={actions} />
-        </Grid.Col>
-      </Grid.Row>
-      <br />
-      <Invocations
-        status={status}
-        items={items}
-        selectAll={selectAll}
-        areAllSelected={areAllSelected}
-        isSelected={isSelected}
-        onSelect={onSelect}
-      />
-      <Pagination
-        viewType="table"
-        itemCount={total}
-        pagination={pagination}
-        onChange={handlePagination}
-        dropdownButtonId="invocations-pagination-dropdown"
-        className="invocations-pagination"
-      />
-    </React.Fragment>
+    <InvocationsPage
+      status={status}
+      items={items}
+      total={total}
+      searchQuery={searchQuery}
+      handleSearch={handleSearch}
+      pagination={pagination}
+      handlePagination={handlePagination}
+    />
   );
 };
 

data/webpack/components/RoundProgress/AggregateStatus.js

@@ -19,7 +19,7 @@ const AggregateStatus = ({ progress }) => (
       <span className="card-pf-aggregate-status-notification">
         <span id="failed_count">
           <span className="pficon pficon-error-circle-o" />
-          {progress.error}
+          {progress.failed}
         </span>
       </span>
       <span className="card-pf-aggregate-status-notification">
@@ -31,7 +31,7 @@ const AggregateStatus = ({ progress }) => (
       <span className="card-pf-aggregate-status-notification">
         <span id="pending_count">
           <span className="pficon pficon-pending" />
-          {progress.pending + progress.planned}
+          {progress.pending}
         </span>
       </span>
       <span className="card-pf-aggregate-status-notification">
@@ -46,12 +46,11 @@ const AggregateStatus = ({ progress }) => (
 
 AggregateStatus.propTypes = {
   progress: PropTypes.shape({
-    planned: PropTypes.number,
-    pending: PropTypes.number,
-    running: PropTypes.number,
     success: PropTypes.number,
     warning: PropTypes.number,
-    error: PropTypes.number,
+    failed: PropTypes.number,
+    running: PropTypes.number,
+    pending: PropTypes.number,
     cancelled: PropTypes.number,
   }).isRequired,
 };

data/webpack/components/RoundProgress/RoundProgress.js

@@ -11,14 +11,14 @@ const RoundProgress = ({ progress }) => {
   const data = [
     [__('Success'), progress.success, '#5CB85C'],
     [__('Warning'), progress.warning, '#DB843D'],
-    [__('Failed'), progress.error, '#D9534F'],
+    [__('Failed'), progress.failed, '#D9534F'],
     [__('Running'), progress.running, '#3D96AE'],
-    [__('Pending'), progress.pending + progress.planned, '#DEDEDE'],
+    [__('Pending'), progress.pending, '#DEDEDE'],
     [__('Cancelled'), progress.cancelled, '#B7312D'],
   ];
 
   const iMax = data.reduce((im, e, i, arr) => 
-    (e[1] > arr[im][1] ? i : im), 0);
+    (e[1] > arr[im][i] ? i : im), 0);
 
   return (
     <div id="round_progress">
@@ -36,12 +36,11 @@ const RoundProgress = ({ progress }) => {
 
 RoundProgress.propTypes = {
   progress: PropTypes.shape({
-    pending: PropTypes.number,
-    planned: PropTypes.number,
-    running: PropTypes.number,
     success: PropTypes.number,
     warning: PropTypes.number,
-    error: PropTypes.number,
+    failed: PropTypes.number,
+    running: PropTypes.number,
+    pending: PropTypes.number,
     cancelled: PropTypes.number,
   }).isRequired,
 };

data/webpack/components/RoundProgress/RoundProgressSelectors.js

@@ -8,10 +8,9 @@ import { ROUND_PROGRESS } from './RoundProgressConstants';
 const defaultProgress = {
   success: 0,
   warning: 0,
-  error: 0,
+  failed: 0,
   running: 0,
   pending: 0,
-  planned: 0,
   cancelled: 0,
 };
 
@@ -19,7 +18,7 @@ export const selectProgress = state =>
   selectAPIResponse(state, ROUND_PROGRESS).progress || defaultProgress;
 
 export const selectAutoRefresh = state =>
-  selectAPIResponse(state, ROUND_PROGRESS).status != 'complete';
+  !selectAPIResponse(state, ROUND_PROGRESS).complete;
 
 export const selectStatus = state =>
   selectAPIStatus(state, ROUND_PROGRESS);

data/webpack/components/common/Calendar/Calendar.js

@@ -2,13 +2,12 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
-
-import './Calendar.css';
+import './Calendar.scss';
 
 import { views, getView } from './View';
 
 const Calendar = (props) => {
-  const { start, end, weekStartsOn, locale, onEventMoved } = props;
+  const {start, end, weekStartsOn, locale, onEventMoved} = props;
 
   const initialDate = () => {
     const { date } = props;
@@ -28,7 +27,7 @@ const Calendar = (props) => {
 
     const result = events.map(event => {
       if (event.id === updatedEvent.id) {
-        return { ...event, ...updatedEvent };
+        return {...event, ...updatedEvent};
       }
       return event;
     });
@@ -79,7 +78,7 @@ Calendar.defaultProps = {
   date: new Date(),
   view: views.MONTH,
   events: [],
-  onEventMoved: (event) => { },
+  onEventMoved: (event) => {},
   locale: 'en-US',
   weekStartsOn: 1,
 };

data/webpack/components/common/Terminal/OutputLine.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { classnames } from 'classname';
+
+const OutputLine = ({index, type, children}) => {
+  return (
+    <div className={classnames('line', type)} >
+      <span className="counter">{index}</span>
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+OutputLine.propTypes = {
+  index: PropTypes.number.isRequired,
+  type: PropTypes.string,
+  timestamp: PropTypes.number,
+};
+
+OutputLine.defaultProps = {
+  type: 'stdout',
+};
+
+export default OutputLine;