foreman_patch 1.1.5 → 1.1.6.alpha5

data/webpack/components/Invocations/InvocationsPage.js

@@ -4,7 +4,7 @@ import { Grid } from 'patternfly-react';
 
 import SearchBar from 'foremanReact/components/SearchBar';
 import Pagination from 'foremanReact/components/Pagination/PaginationWrapper';
-import { ActionButtons } form 'foremanReact/components/common/ActionButtons/ActionButtons';
+import { ActionButtons } from 'foremanReact/components/common/ActionButtons/ActionButtons';
 import { getControllerSearchProps } from 'foremanReact/constants';
 
 import Invocations from './Invocations';

data/webpack/components/Invocations/index.js

@@ -3,7 +3,7 @@ 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';
@@ -26,7 +26,7 @@ import {
 import { getUrl } from './InvocationsHelpers';
 import { INVOCATIONS } from './InvocationsConstants';
 
-import './Invocations.scss';
+import './Invocations.css';
 
 const WrappedInvocations = ({ round }) => {
   const dispatch = useDispatch();
@@ -67,7 +67,7 @@ const WrappedInvocations = ({ round }) => {
 
   const areAllSelected = selectedItems.length == items.length;
 
-  const setItemSelected = (item, isSelecting) => 
+  const setItemSelected = (item, isSelecting) =>
     setSelectedItems(prevSelected => {
       const otherSelectedItems = prevSelected.filter(i => i !== item.id);
       return isSelecting ? [...otherSelectedItems, item.id] : otherSelectedItems;
@@ -78,8 +78,8 @@ const WrappedInvocations = ({ round }) => {
       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);
+          ? 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);
@@ -95,7 +95,7 @@ const WrappedInvocations = ({ round }) => {
     }
   };
 
-  const getData = url =>  withInterval(get({
+  const getData = url => withInterval(get({
     key: INVOCATIONS,
     url,
     handleError: () => {

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

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

data/webpack/components/common/Table/index.js

@@ -0,0 +1,28 @@
+import React, { useCallback, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { PaginationVariant, Flex, FlexItem } from '@patternfly/react-core';
+
+import { STATUS } from 'foremanReact/constants';
+import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { SelectAllCheckbox }
+
+const TableWrapper = ({
+
+}) => {
+    const dispatch = useDispatch();
+
+    return (
+        <>
+            <Flex style={{ alignItems: 'center' }} className="margin-16-24">
+                { displaySelectAllCheckbox && !hideToolbar && 
+                    <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
+                        <SelectAllCheckbox
+                    </FlexItem>
+                }
+            </Flex>
+        </>
+    );
+}

data/webpack/global_index.js

@@ -0,0 +1,16 @@
+import { registerReducer } from 'foremanReact/common/MountingService';
+import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
+import { registerRoutes } from 'foremanReact/routes/RoutingService';
+import Routes from './src/Router/routes';
+import reducers from './src/reducers';
+
+// register reducers
+Object.entries(reducers).forEach(([key, reducer]) =>
+    registerReducer(key, reducer)
+);
+
+// register client routes
+registerRoutes('ForemanPatch', Routes);
+
+// register fills for extending foreman core
+//addGlobalFill('host-overview-cards', 'Patching Details', );

data/webpack/index.js

@@ -1,13 +1,12 @@
 /* eslint import/no-unresolved: [2, { ignore: [foremanReact/*] }] */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
 import componentRegistry from 'foremanReact/components/componentRegistry';
-import { registerReducer } from 'foremanReact/common/MountingService';
-import reducers from './src/reducers';
-import ForemanPatch from './src/ForemanPatch';
 
 import Rounds from './components/Rounds';
 import Plan from './components/Plan';
+import Invocation from './src/Components/Invocation';
 import Invocations from './components/Invocations';
 import RoundProgress from './components/RoundProgress';
 import Cycle from './components/Cycle';
@@ -18,11 +17,7 @@ const components = [
   { name: 'Invocations', type: Invocations },
   { name: 'Cycle', type: Cycle },
   { name: 'RoundProgress', type: RoundProgress },
+  { name: 'Invocation', type: Invocation },
 ];
 
-Object.entries(reducers).forEach(([key, reducer]) =>
-  registerReducer(key, reducer)
-);
-
 components.forEach(component => componentRegistry.register(component));
-componentRegistry.register({ name: 'ForemanPatch', type: ForemanPatch });

data/webpack/src/Components/Invocation/Invocation.js

@@ -0,0 +1,67 @@
+import React, { useRef, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const Invocation = ({ events, status }) => {
+  const viewerRef = useRef();
+  const [isStderrVisible, setStderrVisible] = useState(true);
+  const [isStdoutVisible, setStdoutVisible] = useState(true);
+  const [isDebugVisible, setDebugVisible] = useState(false);
+  const [followStatus, setFollowStatus] = useState(status === 'running' ? 'active' : 'disabled');
+
+  const lines = useMemo(() => {
+    return events.flatMap(event => (
+      event.event.replace(/\r\n/, "\n").replace(/\n$/, '').split("\n").map(line => (
+        { event_type: event.event_type, event: line, timestamp: event.timestamp }
+      )).filter((event) => (
+        (event.event_type === 'stdout' && isStdoutVisible) ||
+        (event.event_type === 'stderr' && isStderrVisible) ||
+        (event.event_type === 'debug' && isDebugVisible)
+      ))
+    ));
+  }, [events, isStderrVisible, isStdoutVisible, isDebugVisible]);
+
+  const onScroll = ({ scrollDirection, scrollOffsetToBottom, scrollUpdateWasRequested }) => {
+    if (!scrollUpdateWasRequested) {
+      if (scrollOffsetToBottom < 1) {
+        setFollowStatus('active');
+      } else if (scrollDirection === 'backward') {
+        setFollowStatus('paused');
+      }
+    }
+  };
+
+  return (
+    <LogViewer
+      ref={viewerRef}
+      theme='dark'
+      data={lines}
+      toolbar={<InvocationLogToolbar
+        isDebugVisible={isDebugVisible}
+        setDebugVisible={setDebugVisible}
+        isStderrVisible={isStderrVisible}
+        setStderrVisible={setStderrVisible}
+        isStdoutVisible={isStderrVisible}
+        setStdoutVisible={setStdoutVisible}
+      />}
+      footer={<InvocationLogFooter followStatus={followStatus} setFollowStatus={setFollowStatus} />}
+      onScroll={onScroll}
+    />
+  );
+};
+
+Invocation.propTypes = {
+  events: PropTypes.arrayOf(PropTypes.shape({
+    event_type: PropTypes.string.isRequired,
+    event: PropTypes.string.isRequired,
+    timestamp: PropTypes.string.isRequired,
+  })),
+  status: PropTypes.string,
+};
+
+Invocation.defaultProps = {
+  events: [],
+  status: 'pending',
+};
+
+export default Invocation;

data/webpack/src/Components/Invocation/InvocationLogFooter.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { OutlinedPlayCircleIcon } from '@patternfly/react-icons';
+import { Button } from '@patternfly/react-core';
+import classNames from 'classnames';
+
+const InvocationFooter = ({ followStatus, setFollowStatus }) => {
+  const resumeFollowing = () => setFollowStatus('active');
+
+  return (
+    <Button className={classNames('invocation__footer', {
+      'invocation__footer--hidden': followStatus !== 'paused',
+    })} onClick={resumeFollowing} isBlock >
+      <OutlinedPlayCircleIcon />
+      &nbsp{__('Resume following')}
+    </Button>
+  );
+};
+
+InvocationFooter.propTypes = {
+  followStatus: PropTypes.string,
+  setFollowStatus: PropTypes.func.isRequired,
+};
+
+InvocationFooter.defaultProps = {
+  followStatus: 'disabled',
+};
+
+export default InvocationFooter;

data/webpack/src/Components/Invocation/InvocationLogToolbar.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  ToggleGroup,
+  ToggleGroupItem
+} from '@patternfly/react-core';
+import { LogViewerSearch } from '@patternfly/react-log-viewer';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const InvocationLogToolbar = ({
+  status,
+  isDebugVisible,
+  setDebugVisible,
+  isStderrVisible,
+  setStderrVisible,
+  isStdoutVisible,
+  setStdoutVisible,
+}) => {
+  return (
+    <Toolbar>
+      <ToolbarContent>
+        <ToolbarGroup alignment={{ default: 'alignLeft' }}>
+          <ToolbarItem>
+            <InvocationStatus status={status} />
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarGroup alignement={{ default: 'alignRight' }}>
+          <ToolbarItem>
+            <LogViewerSearch placeholder={__('Search')} />
+          </ToolbarItem>
+          <ToolbarItem>
+            <ToggleGroup>
+              <ToggleGroupItem
+                text={__('Toggle STDERR')}
+                isSelected={isStderrVisible}
+                onChange={setStderrVisible}
+              />
+              <ToggleGroupItem
+                text={__('Toggle STDOUT')}
+                isSelected={isStdoutVisible}
+                onChange={setStdoutVisible}
+              />
+              <ToggleGroupItem
+                text={__('Toggle DEBUG')}
+                isSelected={isDebugVisible}
+                onChange={setDebugVisible}
+              />
+            </ToggleGroup>
+          </ToolbarItem>
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};
+
+InvocationLogToolbar.propTypes = {
+  status: PropTypes.string,
+  isDebugVisible: PropTypes.bool,
+  setDebugVisible: PropTypes.func,
+  isStderrVisible: PropTypes.bool,
+  setStderrVisible: PropTypes.func,
+  isStdoutVisible: PropTypes.bool,
+  setStdoutVisible: PropTypes.func,
+};
+
+InvocationLogToolbar.defaultProps = {
+  status: 'pending',
+  isDebugVisible: false,
+  setDebugVisible: Function.prototype,
+  isStderrVisible: true,
+  setStderrVisible: Function.prototype,
+  isStdoutVisible: true,
+  setStdoutVisible: Function.prototype,
+};
+
+export default InvocationLogToolbar;

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

@@ -7,8 +7,5 @@ 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/src/Components/Invocation/index.js

@@ -0,0 +1,62 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { Alert } from '@patternfly/react-core';
+import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
+import Invocation from './Invocation';
+import {
+  selectInvocation,
+  selectStatus,
+} from './InvocationSelectors';
+import { getData } from './InvocationActions';
+import { INVOCATION } from './InvocationConsts';
+import Loading from '../Loading';
+
+const WrappedInvocation = ({ id }) => {
+  const dispatch = useDispatch();
+  const invocation = useSelector(selectInvocation);
+  const loadingStatus = useSelector(selectStatus);
+
+  const isCompleted = () => {
+    const status = invocation.status;
+    return (status === 'error' || status === 'warning' || status === 'success' || status === 'cancelled');
+  };
+
+  useEffect(() => {
+    dispatch(getData(id));
+
+    return () => {
+      dispatch(stopInterval(INVOCATION));
+    };
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isCompleted()) {
+      dispatch(stopInterval(INVOCATION));
+    }
+  }, [state, dispatch]);
+
+  if (loadingStatus === STATUS.PENDING) {
+    return <Loading />;
+  }
+
+  if (loadingStatus === STATUS.ERROR) {
+    return (
+      <Alert type="error">
+        {__(
+          'There was an error while updating the status, try refreshing the page.'
+        )}
+      </Alert>
+    );
+  }
+
+  return (
+    <Invocation {...invocation} />
+  );
+};
+
+WrappedInvocation.propTypes = {
+  id: PropTypes.number.isRequired
+};
+
+export default WrappedInvocation;

data/webpack/src/Components/InvocationStatus.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+  BanIcon,
+  InProgressIcon,
+  PendingIcon
+} from '@patternfly/react-icons';
+import { Label } from '@patternfly/react-core';
+
+const InvocationStatus = ({ status }) => {
+  switch (status) {
+    case 'error':
+      return (
+        <Label icon={<ExclamationCircleIcon />}>{__('failed')}</Label>
+      );
+    case 'warning':
+      return (
+        <Label icon={<ExclamationTriangleIcon />}>{__('warning')}</Label>
+      );
+    case 'success':
+      return (
+        <Label icon={<CheckCircleIcon />}>{__('success')}</Label>
+      );
+    case 'cancelled':
+      return (
+        <Label icon={<BanIcon />}>{__('success')}</Label>
+      );
+    case 'running':
+      return (
+        <Label icon={<InProgressIcon />}>{__('running')}</Label>
+      );
+    default:
+      return (
+        <Label icon={<PendingIcon />}>{__('pending')}</Label>
+      );
+  }
+};
+
+InvocationStatus.propTypes = {
+  status: PropTypes.string,
+};
+
+InvocationStatus.defaultProps = {
+  status: 'pending',
+};
+
+export default InvocationStatus;

data/webpack/src/Components/Loading.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Bullseye,
+  Title,
+  EmptyState,
+  EmptyStateIcon,
+  Spinner,
+  Skeleton,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const Loading = ({
+  size,
+  showText,
+  loadingText,
+  skeleton,
+}) => {
+  if (skeleton) {
+    return <Skeleton height="100%" />;
+  }
+
+  return (
+    <Bullseye>
+      <EmptyState>
+        <EmptyStateIcon size={size} variant="container" component={Spinner} />
+        {showText && (
+          <Title size={size} headingLevel="h4" ouiaId="loading-title">
+            {loadingText || __('Loading')}
+          </Title>
+        )}
+      </EmptyState>
+    </Bullseye>
+  );
+};
+
+Loading.propTypes = {
+  size: PropTypes.string,
+  showText: PropTypes.bool,
+  loadingText: PropTypes.string,
+  skeleton: PropTypes.bool,
+};
+
+Loading.defaultProps = {
+  size: 'lg',
+  showText: true,
+  loadingText: null,
+  skeleton: false,
+};
+
+export default Loading;

data/webpack/src/Extends/index.js

@@ -0,0 +1,15 @@
+// This is an example of extending foreman-core's component via slot&fill
+// http://foreman.surge.sh/?path=/docs/introduction-slot-and-fill--page
+/*
+import React from 'react';
+import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
+
+addGlobalFill('slotId', 'fillId', <SomeComponent key="some-key" />, 300);
+
+addGlobalFill(
+  'slotId',
+  'fillId',
+  { someProp: 'this is an override prop' },
+  300
+);
+*/

data/webpack/src/Router/routes.js

@@ -1,3 +1,5 @@
-const routes = {};
+import React from 'react';
 
-export default routes;
+const routes = [];
+
+export default routes;

data/webpack/src/reducers.js

@@ -4,4 +4,4 @@ const reducers = {
   foremanPatch: combineReducers({}),
 };
 
-export default reducers;
+export default reducers;