foreman_patch 1.1.1

data/webpack/components/Rounds/RoundsSelectors.js

@@ -0,0 +1,14 @@
+import {
+    selectAPIStatus,
+    selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { ROUNDS } from './RoundsConsts';
+
+export const selectItems = state =>
+  selectAPIResponse(state, ROUNDS).rounds || [];
+
+export const selectAutoRefresh = state =>
+  selectAPIResponse(state, ROUNDS).autoRefresh;
+
+export const selectStatus = state => selectAPIStatus(state, ROUNDS);
+

data/webpack/components/Rounds/components/RoundItem.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ActionButtons } from 'foremanReact/components/common/ActionButtons/ActionButtons';
+import RoundStatus from './RoundStatus';
+
+const RoundItem = ({ name, link, priority, hostsCount, hostsLink, status, actions }) => {
+  const roundLink = link ? (
+    <a href={link}>{name}</a>
+  ) : (
+    <a href="#" className="disabled">
+      {name}
+    </a>
+  );
+
+  const hostsCountLink = hostsLink ? (
+    <a href={hostsLink}>{hostsCount}</a>
+  ) : (
+    <a href="#" className="disabled">
+      {hostsCount}
+    </a>
+  );
+
+  return (
+    <tr id={`round-${name}`}>
+      <td className="round_name">{roundLink}</td>
+      <td className="round_priority">{priority}</td>
+      <td className="round_hosts_count">{hostsCountLink}</td>
+      <td className="round_status">
+        <RoundStatus status={status} />
+      </td>
+      <td className="round_actions">
+        <ActionButtons buttons={[...actions]} />
+      </td>
+    </tr>
+  );
+};
+
+RoundItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired,
+  priority: PropTypes.number.isRequired,
+  hostsCount: PropTypes.number.isRequired,
+  hostsLink: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  actions: PropTypes.array,
+};
+
+RoundItem.defaultProps = {
+  actions: [],
+};
+
+export default RoundItem;

data/webpack/components/Rounds/components/RoundStatus.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Icon } from 'patternfly-react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const RoundStatus = ({ status }) => {
+  switch (status) {
+    case 'complete':
+      return (
+        <div>
+          <Icon type="pf" name="ok" /> {status}
+        </div>
+      );
+    case 'running':
+      return (
+        <div>
+          <Icon type="pf" name="in-progress" /> {status}
+        </div>
+      );
+    case 'pending':
+    case 'planned':
+      return (
+        <div>
+          <Icon type="pf" name="pending" /> {status}
+        </div>
+      );
+    default:
+      return (
+        <div>
+          <Icon type="fa" name="question" /> {status}
+        </div>
+      );
+  }
+};
+
+RoundStatus.propTypes = {
+  status: PropTypes.string.isRequired,
+};
+
+export default RoundStatus;

data/webpack/components/Rounds/index.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { stopInterval } from 'foremanReact/redux/middlewares/IntervalMiddleware';
+import Rounds from './Rounds';
+
+import {
+    selectItems,
+    selectStatus,
+    selectAutoRefresh,
+} from './RoundsSelectors';
+import { getData } from './RoundsActions';
+import { ROUNDS } from './RoundsConsts';
+
+const WrappedRounds = () => {
+  const dispatch = useDispatch();
+  const autoRefresh = useSelector(selectAutoRefresh);
+  const items = useSelector(selectItems);
+  const status = useSelector(selectStatus);
+
+  useEffect(() => {
+    dispatch(getData());
+
+    return () => {
+      dispatch(stopInterval(ROUNDS));
+    };
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (autoRefresh === 'false') {
+      dispatch(stopInterval(ROUNDS));
+    }
+  }, [autoRefresh, dispatch]);
+
+  return <Rounds status={status} items={items} />;
+};
+
+export default WrappedRounds;

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

@@ -0,0 +1,86 @@
+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 { views, getView } from './View';
+
+const Calendar = (props) => {
+  const {start, end, weekStartsOn, locale, onEventMoved} = props;
+
+  const initialDate = () => {
+    const { date } = props;
+    if (date < start || date > end) {
+      return (date < start) ? new Date(start) : new Date(end);
+    } else {
+      return date;
+    }
+  };
+
+  const [date, setDate] = useState(initialDate());
+  const [view, setView] = useState(props.view);
+  const [events, setEvents] = useState(props.events);
+
+  const movedCallback = (updatedEvent) => {
+    onEventMoved(updatedEvent);
+
+    const result = events.map(event => {
+      if (event.id === updatedEvent.id) {
+        return {...event, ...updatedEvent};
+      }
+      return event;
+    });
+
+    setEvents(result);
+  };
+
+  let View = getView(view);
+
+  return (
+    <div className="calendar">
+      <DndProvider backend={HTML5Backend}>
+        <View
+          start={start}
+          end={end}
+          date={date}
+          setDate={setDate}
+          setView={view}
+          events={events}
+          onEventMoved={movedCallback}
+          locale={locale}
+          weekStartsOn={weekStartsOn}
+        />
+      </DndProvider>
+    </div>
+  );
+};
+
+Calendar.propTypes = {
+  start: PropTypes.instanceOf(Date),
+  end: PropTypes.instanceOf(Date),
+  date: PropTypes.instanceOf(Date),
+  view: PropTypes.oneOf(Object.values(views)),
+  events: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    start: PropTypes.instanceOf(Date).isRequired,
+    end: PropTypes.instanceOf(Date).isRequired,
+    title: PropTypes.node.isRequired,
+  })),
+  onEventMoved: PropTypes.func,
+  locale: PropTypes.string,
+  weekStartsOn: PropTypes.number,
+};
+
+Calendar.defaultProps = {
+  start: null,
+  end: null,
+  date: new Date(),
+  view: views.MONTH,
+  events: [],
+  onEventMoved: (event) => {},
+  locale: 'en-US',
+  weekStartsOn: 1,
+};
+
+export default Calendar;

data/webpack/components/common/Calendar/Calendar.scss

@@ -0,0 +1,76 @@
+.calendar {
+
+  .day {
+    padding: 2px;
+    height: 120px;
+  }
+
+  .wday-0 {}
+  .wday-1 {}
+  .wday-2 {}
+  .wday-3 {}
+  .wday-4 {}
+  .wday-5 {}
+  .wday-6 {}
+
+  .today {
+    background: #ffffc0;
+  }
+
+  .past {
+    background: #f9f9f9;
+  }
+
+  .future {}
+
+  .start-date {}
+
+  .disabled {
+    background: #e8e8e8;
+  }
+  .enabled {}
+  td.enabled:hover {
+    background: #def3ff;
+  }
+
+  h6 {
+    margin: 2px 3px;
+  }
+
+  div.day {
+    margin: 0;
+    height: inherit;
+    width: inherit;
+    display: block;
+  }
+
+  div.event {
+    margin: 2px, 10px;
+    border: 1px solid;
+    border-color: #d1d1d1;
+    padding: 2px 3px;
+    background: #ffffff;
+  }
+
+  .calendar-header {
+    button {
+      font-size: 20px;
+      width: 100%;
+    }
+
+    .calendar-title {
+      font-size: 24px;
+      text-align: center;
+    }
+
+    .previous {
+      padding-left: 0px;
+      padding-right: 20px;
+    }
+
+    .next {
+      padding-left: 20px;
+      padding-right: 0px;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export const CALENDAR_EVENT = 'CALENDAR_EVENT';

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

@@ -0,0 +1,77 @@
+import { chunk, times } from 'lodash';
+
+export const addDays = (date, days) => {
+  let result = new Date(date.valueOf());
+  result.setDate(result.getDate() + days);
+  return result;
+};
+
+export const addMonths = (date, months) => {
+  let result = new Date(date.valueOf());
+  result.setMonth(result.getMonth() + months);
+  return result;
+};
+
+export const startOfDay = (date = new Date()) => {
+  let result = new Date(date.valueOf());
+  result.setHours(0, 0, 0, 0);
+  return result;
+};
+
+export const endOfDay = (date = new Date()) => {
+  let result = new Date(date.valueOf());
+  result.setHours(23, 59, 59, 999);
+  return result;
+};
+
+export const isEqualDate = (a, b) => {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+};
+
+export const startOfWeek = (date, weekStartsOn = 0) => {
+  let day = date.getDay();
+  let diff = day >= weekStartsOn ? day - weekStartsOn : 7 - weekStartsOn + day;
+  let result = new Date(date.valueOf());
+  result.setDate(result.getDate() - diff);
+  result.setHours(0, 0, 0, 0);
+  return result;
+};
+
+export const endOfWeek = (date, weekStartsOn = 0) => {
+  let day = date.getDay();
+  let diff = day >= weekStartsOn ? 6 - day + weekStartsOn : weekStartsOn - day - 1;
+  let result = new Date(date.valueOf());
+  result.setDate(result.getDate() + diff);
+  result.setHours(23, 59, 59, 999);
+  return result;
+};
+
+export const startOfMonth = (date) => {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+
+export const endOfMonth = (date) => {
+  let result = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  result.setHours(23, 59, 59, 999);
+  return result;
+};
+
+export const getWeekArray = (weekStartsOn, locale) => {
+  let weekStart = startOfWeek(new Date(), weekStartsOn);
+
+  return times(7, i => Intl.DateTimeFormat(locale, { weekday: 'long' })
+    .format(addDays(weekStart, i)));
+};
+
+export const getWeeksOfMonth = (date, weekStartsOn = 0) => {
+  let start = startOfMonth(date);
+  let end = endOfMonth(date);
+  let offset = start.getDay() - weekStartsOn;
+  let days = offset + end.getDate() + (6 + weekStartsOn - end.getDay())
+
+  return chunk(times(days, i => addDays(start, i - offset)), 7);
+};
+
+

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const DayView = ({...props}) => {
+  return (
+    <div>TODO</div>
+  );
+};
+
+export default DayView;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useDrag, useDrop } from 'react-dnd';
+import { CALENDAR_EVENT } from './CalendarConstants';
+
+const Event = (props) => {
+
+  const [, drag] = useDrag({
+    type: CALENDAR_EVENT,
+    item: {
+      type: CALENDAR_EVENT,
+      ...props,
+    },
+  });
+
+  const { title } = props;
+
+  return (
+    <div ref={drag} className='event'>
+      {title}
+    </div>
+  );
+};
+
+export default Event;

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { useDrop } from 'react-dnd';
+import classNames from 'classnames';
+import { 
+  isEqualDate,
+  startOfDay,
+  endOfDay,
+} from '../CalendarHelpers';
+import Event from '../Event';
+import { CALENDAR_EVENT } from '../CalendarConstants';
+
+const Day = (props) => {
+  const { date, enabled, onEventMoved } = props;
+
+  const events = props.events.filter(event => isEqualDate(date, event.start));
+
+  const [{ canDrop, isOver }, drop] = useDrop({
+    accept: CALENDAR_EVENT,
+    drop: (event, monitor) => {
+      const start = new Date(event.start);
+      const end = new Date(event.end);
+
+      let delta = Math.ceil((date - start) / (1000 * 60 * 60 * 24));
+
+      start.setDate(start.getDate() + delta);
+      end.setDate(end.getDate() + delta);
+
+      onEventMoved({...event, start, end});
+    },
+    canDrop: (item, monitor) => (enabled),
+  });
+
+  const classes = {
+    disabled: !enabled,
+    enabled: enabled,
+    today: isEqualDate(date, new Date()),
+    past: date < startOfDay(),
+    future: date > endOfDay(),
+  }
+
+  return (
+    <td className={classNames(`day wday-${date.getDay()}`, classes)} data-day={date.getDate()}>
+      <h6>{date.getDate()}</h6>
+      <div ref={drop} className="day">
+        {events.map((event) => (<Event {...event} />))}
+      </div>
+    </td>
+  );
+};
+
+export default Day;

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

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+import { useDrop } from 'react-dnd';
+import { Grid, Button, Icon } from 'patternfly-react';
+
+import {
+  addMonths,
+  startOfMonth,
+  endOfMonth,
+} from '../CalendarHelpers';
+import { CALENDAR_EVENT } from '../CalendarConstants';
+
+const Header = ({ start, end, date, setDate, setView, locale, weekStartsOn }) => {
+  const formatter = Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
+
+  const previousDate = addMonths(date, -1);
+  const previousDisabled = startOfMonth(date) < start;
+  const nextDate = addMonths(date, 1);
+  const nextDisabled = endOfMonth(date) > end;
+
+  const [wait, setWait] = useState(false);
+
+  useEffect(() => {
+    if (wait) {
+      setTimeout(() => {
+        setWait(false);
+      }, 1000);
+    }
+  }, [wait]);
+
+  const gotoPreviousMonth = () => {
+    setDate(previousDate);
+  };
+
+  const gotoNextMonth = () => {
+    setDate(nextDate);
+  };
+
+  const [, previous] = useDrop({
+    accept: CALENDAR_EVENT,
+    hover: (item, monitor) => {
+      if (!wait) {
+        gotoPreviousMonth();
+        setWait(true);
+      }
+    },
+  });
+
+  const [, next] = useDrop({
+    accept: CALENDAR_EVENT,
+    hover: (item, monitor) => {
+      if (!wait) {
+        gotoNextMonth();
+        setWait(true);
+      }
+    },
+  });
+
+  return (
+    <div className="calendar-header">
+      <span className="previous col-md-2" ref={previous}>
+        <Button variant="secondary" onClick={gotoPreviousMonth} disabled={previousDisabled} size="lg">
+          <Icon type="fa" name="angle-left" /> {formatter.format(previousDate)}
+        </Button>
+      </span>
+      <span className="calendar-title col-md-8">
+        {formatter.format(date)}
+      </span>
+      <span className="next col-md-2" ref={next}>
+        <Button variant="secondary" onClick={gotoNextMonth} disabled={nextDisabled} size="lg">
+          {formatter.format(nextDate)} <Icon type="fa" name="angle-right" />
+        </Button>
+      </span>
+    </div>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Grid } from 'patternfly-react';
+
+import Day from './Day';
+import Header from './Header';
+import {
+  getWeeksOfMonth,
+  getWeekArray,
+  isEqualDate,
+} from '../CalendarHelpers';
+
+const Month = ({start, end, date, setDate, setView, events, onEventMoved, locale, weekStartsOn}) => {
+  const weeks = getWeeksOfMonth(date, weekStartsOn); 
+  const daysOfTheWeek = getWeekArray(weekStartsOn, locale);
+
+  const isDayEnabled = (date) => {
+    return (start <= date && end > date);
+  };
+
+  return (
+    <div>
+      <Header start={start} end={end} date={date} setDate={setDate} setView={setView} locale={locale} weekStartsOn={weekStartsOn}/>
+      <table className="calendar-view table table-bordered table-fixed">
+        <thead>
+          <tr>
+            {daysOfTheWeek.map((day, index) => (
+              <th key={index} className="dow">
+                {day}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {weeks.map(week => (
+            <tr className="week">
+              {week.map(day => (
+                <Day key={day} date={day} enabled={isDayEnabled(day)} events={events} onEventMoved={onEventMoved} />
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Month;

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

@@ -0,0 +1 @@
+export { default } from './Month';

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

@@ -0,0 +1,20 @@
+import Month from './Month';
+import Week from './Week';
+import Day from './Day';
+
+export const views = {
+  MONTH: 'month',
+  WEEK: 'week',
+  DAY: 'day',
+};
+
+export const VIEWS = {
+  [views.MONTH]: Month,
+  [views.WEEK]: Week,
+  [views.DAY]: Day,
+};
+
+export const getView = (view) => {
+  return VIEWS[view];
+};
+

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const WeekView = ({...props}) => {
+  return (
+    <table>
+      <WeekHeader />
+      <tbody>
+      </tbody>
+    </table>
+  );
+};
+
+export default WeekView;

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

@@ -0,0 +1,2 @@
+export * from './CalendarHelpers';
+export { default } from './Calendar';

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;