foreman_host_reports 0.0.3

data/webpack/src/Router/HostReports/IndexPage/IndexPageActions.js

@@ -0,0 +1,55 @@
+import history from 'foremanReact/history';
+import { get } from 'foremanReact/redux/API';
+import { stringifyParams, getParams } from 'foremanReact/common/urlHelpers';
+
+import { buildQuery } from './IndexPageHelpers';
+import {
+  HOST_REPORTS_API_PATH,
+  HOST_REPORTS_PATH,
+  HOST_REPORTS_API_REQUEST_KEY,
+} from './constants';
+
+export const initializeHostReports = () => dispatch => {
+  const params = getParams();
+  dispatch(fetchHostReports(params));
+  if (!history.action === 'POP') {
+    history.replace({
+      pathname: HOST_REPORTS_PATH,
+      search: stringifyParams(params),
+    });
+  }
+};
+
+export const fetchHostReports = (
+  { page, perPage, searchQuery, sort },
+  url = HOST_REPORTS_API_PATH
+) => async dispatch => {
+  const sortString =
+    sort && Object.keys(sort).length > 0 ? `${sort.by} ${sort.order}` : '';
+
+  return dispatch(
+    get({
+      key: HOST_REPORTS_API_REQUEST_KEY,
+      url,
+      params: {
+        page,
+        per_page: perPage,
+        search: searchQuery,
+        order: sortString,
+      },
+    })
+  );
+};
+
+export const fetchAndPush = (params = {}) => (dispatch, getState) => {
+  const query = buildQuery(params, getState());
+  dispatch(fetchHostReports(query));
+  history.push({
+    pathname: HOST_REPORTS_PATH,
+    search: stringifyParams(query),
+  });
+};
+
+export const reloadWithSearch = query => dispatch => {
+  dispatch(fetchAndPush({ searchQuery: query, page: 1 }));
+};

data/webpack/src/Router/HostReports/IndexPage/IndexPageHelpers.js

@@ -0,0 +1,50 @@
+import URI from 'urijs';
+import { snakeCase } from 'lodash';
+import { compose } from 'redux';
+
+import { foremanUrl } from 'foremanReact/common/helpers';
+
+import {
+  selectSort,
+  selectPage,
+  selectPerPage,
+  selectSearch,
+} from './IndexPageSelectors';
+
+import { HOST_REPORTS_API_PATH } from './constants';
+
+export const buildQuery = (query, state) => {
+  const querySort = pickSort(query, state);
+
+  return {
+    page: query.page || selectPage(state),
+    perPage: query.perPage || selectPerPage(state),
+    searchQuery:
+      query.searchQuery === undefined ? selectSearch(state) : query.searchQuery,
+    ...(querySort && { sort: querySort }),
+  };
+};
+
+export const pickSort = (query, state) =>
+  checkSort(query.sort)
+    ? transformSort(query.sort)
+    : checkSort(compose(transformSort, selectSort)(state));
+
+const checkSort = sort => (sort && sort.by && sort.order ? sort : undefined);
+
+const transformSort = sort => ({ ...sort, by: snakeCase(sort.by) });
+
+export const getExportUrl = (path, query) => {
+  let url = new URI(path);
+  url = url.pathname(`${url.pathname()}/export`);
+  url.addSearch(query);
+  return url.toString();
+};
+
+export const hostReportsIndexUrl = hostId => {
+  if (!hostId) return foremanUrl(HOST_REPORTS_API_PATH);
+
+  return foremanUrl(
+    `/api/v2/hosts/${hostId}/host_reports?include_permissions=true`
+  );
+};

data/webpack/src/Router/HostReports/IndexPage/IndexPageSelectors.js

@@ -0,0 +1,86 @@
+import { camelCase, isEmpty } from 'lodash';
+import Immutable from 'seamless-immutable';
+import { STATUS } from 'foremanReact/constants';
+import { deepPropsToCamelCase } from 'foremanReact/common/helpers';
+import {
+  selectAPIStatus,
+  selectAPIResponse,
+  selectAPIErrorMessage,
+} from 'foremanReact/redux/API/APISelectors';
+
+import { HOST_REPORTS_API_REQUEST_KEY } from './constants';
+
+export const emptyResponse = {
+  results: [],
+  page: 0,
+  perPage: 0,
+  search: '',
+  sort: {},
+  canCreate: false,
+  subtotal: 0,
+};
+
+const selectHostReportsPageResponse = state => {
+  const response = deepPropsToCamelCase(
+    selectAPIResponse(state, HOST_REPORTS_API_REQUEST_KEY)
+  );
+  if (isEmpty(response)) {
+    return Immutable(emptyResponse);
+  }
+  return response;
+};
+
+export const selectIsLoading = state => {
+  const status = selectHostReportsPageStatus(state);
+  return !status || status === STATUS.PENDING;
+};
+
+const selectHostReportsPageStatus = state =>
+  selectAPIStatus(state, HOST_REPORTS_API_REQUEST_KEY);
+
+export const selectHasError = state =>
+  selectHostReportsPageStatus(state) === STATUS.ERROR;
+
+export const selectHostReports = state => {
+  if (selectHasError(state)) {
+    return [];
+  }
+  return selectHostReportsPageResponse(state).results;
+};
+
+export const selectHasData = state => {
+  const status = selectHostReportsPageStatus(state);
+  const results = selectHostReports(state);
+
+  return status === STATUS.RESOLVED && results && results.length > 0;
+};
+
+export const selectPage = state =>
+  selectHostReportsPageResponse(state).page || 1;
+export const selectPerPage = state =>
+  selectHostReportsPageResponse(state).perPage || 20;
+export const selectSearch = state =>
+  selectHostReportsPageResponse(state).search;
+
+export const selectSort = state => {
+  const sort = selectHostReportsPageResponse(state).sort || Immutable({});
+  if (sort.by && sort.order) {
+    return { ...sort, by: camelCase(sort.by) };
+  }
+  return sort;
+};
+
+export const selectSubtotal = state =>
+  selectHostReportsPageResponse(state).subtotal || 0;
+
+export const selectErrorMessage = state => {
+  if (!selectHasError(state)) return { message: '', details: '' };
+  const error = selectHostReportsPageResponse(state).response?.data?.error;
+
+  if (error) return error;
+
+  return {
+    message: selectAPIErrorMessage(state, HOST_REPORTS_API_REQUEST_KEY),
+    details: '',
+  };
+};

data/webpack/src/Router/HostReports/IndexPage/constants.js

@@ -0,0 +1,14 @@
+import { getControllerSearchProps } from 'foremanReact/constants';
+
+export const HOST_REPORTS_SEARCH_PROPS = getControllerSearchProps(
+  'host_reports'
+);
+
+export const HOST_REPORTS_PATH = '/host_reports';
+export const HOST_REPORTS_API_PATH =
+  '/api/v2/host_reports?include_permissions=true';
+export const HOST_REPORTS_API_PLAIN_PATH = '/api/v2/host_reports';
+
+export const HOST_REPORTS_API_REQUEST_KEY = 'HOST_REPORTS_API';
+
+export const HOST_REPORT_DELETE_MODAL_ID = 'hostReportDeleteModal';

data/webpack/src/Router/HostReports/IndexPage/index.js

@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { isEmpty } from 'lodash';
+
+import { get } from 'foremanReact/redux/API';
+
+import Loading from 'foremanReact/components/Loading';
+import DefaultEmptyState from 'foremanReact/components/common/EmptyState';
+import { WelcomeConfigReports } from 'foremanReact/components/ConfigReports/Welcome';
+
+import { HOST_REPORTS_API_REQUEST_KEY } from './constants';
+
+import HostReportsIndexPage from './IndexPage';
+
+import {
+  selectHostReports,
+  selectPage,
+  selectPerPage,
+  selectSearch,
+  selectSort,
+  selectHasData,
+  selectHasError,
+  selectIsLoading,
+  selectSubtotal,
+  selectErrorMessage,
+} from './IndexPageSelectors';
+
+import { reloadWithSearch, fetchAndPush } from './IndexPageActions';
+
+import { hostReportsIndexUrl } from './IndexPageHelpers';
+
+const ConnectedHostReportsIndexPage = ({ history, match }) => {
+  const dispatch = useDispatch();
+
+  const reports = useSelector(selectHostReports);
+  const page = useSelector(selectPage);
+  const perPage = useSelector(selectPerPage);
+  const search = useSelector(selectSearch);
+  const sort = useSelector(selectSort);
+  const isLoading = useSelector(selectIsLoading);
+  const hasData = useSelector(selectHasData);
+  const hasError = useSelector(selectHasError);
+  const itemCount = useSelector(selectSubtotal);
+  const error = useSelector(selectErrorMessage);
+
+  const { hostId } = match.params;
+
+  useEffect(() => {
+    dispatch(
+      get({
+        key: HOST_REPORTS_API_REQUEST_KEY,
+        url: hostReportsIndexUrl(hostId),
+      })
+    );
+  }, [dispatch, hostId]);
+
+  if (isLoading && !hasError) return <Loading />;
+
+  if (!isLoading && hasError) {
+    return (
+      <DefaultEmptyState
+        icon="error-circle-o"
+        header={error.message}
+        description={error.details || ''}
+        documentation={null}
+      />
+    );
+  }
+
+  if (!isLoading && !hasError && !hasData && isEmpty(search)) {
+    return <WelcomeConfigReports />;
+  }
+
+  return (
+    <HostReportsIndexPage
+      fetchAndPush={params => dispatch(fetchAndPush(params))}
+      search={search}
+      isLoading={isLoading}
+      hasData={hasData}
+      reports={reports}
+      page={page}
+      perPage={perPage}
+      sort={sort}
+      itemCount={itemCount}
+      reloadWithSearch={query => dispatch(reloadWithSearch(query))}
+      history={history}
+      hostId={hostId}
+    />
+  );
+};
+
+ConnectedHostReportsIndexPage.propTypes = {
+  history: PropTypes.object.isRequired,
+  match: PropTypes.object.isRequired,
+};
+
+export default ConnectedHostReportsIndexPage;

data/webpack/src/Router/HostReports/ShowPage/Components/HostReportMetrics/HostReportMetrics.scss

@@ -0,0 +1,3 @@
+.bar-chart-medium-width {
+  min-width: 450px;
+}

data/webpack/src/Router/HostReports/ShowPage/Components/HostReportMetrics/index.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Grid, GridItem } from '@patternfly/react-core';
+
+import { cloneDeep, remove } from 'lodash';
+
+import ChartBox from 'foremanReact/components/ChartBox/ChartBox';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+
+import './HostReportMetrics.scss';
+
+const HostReportMetrics = ({
+  metrics: {
+    time: { values: timeValues },
+    resources: { values: resValues },
+  },
+}) => {
+  const clonedTimeValues = cloneDeep(timeValues).filter(v => v[2] >= 0.001);
+  const totalTime = remove(clonedTimeValues, val => val[0] === 'total');
+  const metricsChartData = clonedTimeValues
+    .map(v => [v[1], parseFloat(v[2].toFixed(4))])
+    .sort((a, b) => b[1] - a[1]);
+
+  const clonedStatuses = cloneDeep(resValues);
+  const totalStatuses = remove(clonedStatuses, val => val[0] === 'total');
+  const statuses = clonedStatuses
+    .map(v => [v[1], v[2]])
+    .sort((a, b) => b[1] - a[1]);
+
+  const createRow = ([name, value], i) => (
+    <tr key={i}>
+      <td className="break-me">{name}</td>
+      <td>{value}</td>
+    </tr>
+  );
+
+  const chartBoxProps = {
+    className: 'report-chart',
+    noDataMsg: __('No data available'),
+    status: STATUS.RESOLVED,
+    config: 'medium',
+  };
+
+  return (
+    <Grid hasGutter>
+      <GridItem span={4}>
+        <table className="table table-bordered table-striped table-hover report-chart">
+          <tbody>{statuses.map((label, v) => createRow(label, v))}</tbody>
+          {totalStatuses.length ? (
+            <tfoot>
+              <tr>
+                <th>{__('Total')}</th>
+                <th>{totalStatuses[0][2]}</th>
+              </tr>
+            </tfoot>
+          ) : null}
+        </table>
+      </GridItem>
+      <GridItem span={4}>
+        <ChartBox
+          {...chartBoxProps}
+          type="donut"
+          chart={{ data: metricsChartData }}
+          title={__('Report Metrics')}
+        />
+      </GridItem>
+      <GridItem span={4}>
+        <table className="table table-bordered table-striped table-hover report-chart">
+          <tbody>
+            {metricsChartData.map((label, t) => createRow(label, t))}
+          </tbody>
+          {totalTime.length ? (
+            <tfoot>
+              <tr>
+                <th>{__('Total')}</th>
+                <th>{parseFloat(totalTime[0][2].toFixed(4))}</th>
+              </tr>
+            </tfoot>
+          ) : null}
+        </table>
+      </GridItem>
+    </Grid>
+  );
+};
+
+HostReportMetrics.propTypes = {
+  metrics: PropTypes.shape({
+    time: PropTypes.shape({
+      values: PropTypes.array,
+    }),
+    resources: PropTypes.shape({
+      values: PropTypes.array,
+    }),
+  }).isRequired,
+};
+
+export default HostReportMetrics;

data/webpack/src/Router/HostReports/ShowPage/Components/ReportLogs/Ansible.js

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { msgLevelClasses } from './helpers';
+
+const AnsibleLogs = ({ logs, checkMode }) => {
+  const [alertVisibility, setAlertVisibility] = useState(true);
+  return (
+    <>
+      {checkMode && alertVisibility ? (
+        <Alert
+          variant="info"
+          isInline
+          title={__('Ansible check mode')}
+          actionClose={
+            <AlertActionCloseButton onClose={() => setAlertVisibility(false)} />
+          }
+        >
+          {__('Notice that ansible roles run in check mode.')}
+        </Alert>
+      ) : null}
+      <table
+        id="report_log"
+        className="table table-bordered table-striped table-hover"
+      >
+        <thead>
+          <tr>
+            <th className="col col-md"> {__('Level')} </th>
+            <th className="col col-md-3"> {__('Task')} </th>
+            <th className="col col-md-9"> {__('Message')} </th>
+          </tr>
+        </thead>
+        <tbody>
+          {logs.map((log, idx) => (
+            <tr key={`tr-${idx + 1}`}>
+              <td>
+                <span className={msgLevelClasses(log.level)}>{log.level}</span>
+              </td>
+              <td className="break-me">{log.task.name}</td>
+              {Array.isArray(log.friendlyMessage) ? (
+                <td>
+                  <ul>
+                    {log.friendlyMessage.map((msg, i) => (
+                      <li key={`li-${i + 1}`}>{msg}</li>
+                    ))}
+                  </ul>
+                </td>
+              ) : (
+                <td className="break-me">{log.friendlyMessage}</td>
+              )}
+            </tr>
+          ))}
+          {logs.length === 0 ? (
+            <tr key="tr-0">
+              <td colSpan="3">{__('Nothing to show')}</td>
+            </tr>
+          ) : null}
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+AnsibleLogs.propTypes = {
+  logs: PropTypes.array.isRequired,
+  checkMode: PropTypes.bool,
+};
+
+AnsibleLogs.defaultProps = {
+  checkMode: false,
+};
+
+export default AnsibleLogs;

data/webpack/src/Router/HostReports/ShowPage/Components/ReportLogs/Puppet.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import * as diffModalActions from 'foremanReact/components/ConfigReports/DiffModal/DiffModalActions';
+import DiffModal from 'foremanReact/components/ConfigReports/DiffModal';
+
+import { msgLevelClasses } from './helpers';
+
+const PuppetLogs = ({ logs, environment }) => {
+  const dispatch = useDispatch();
+  const showDiff = (e, diff, title) => {
+    e.preventDefault();
+    dispatch(diffModalActions.createDiff(diff, title));
+  };
+
+  return (
+    <>
+      <DiffModal />
+      {environment ? (
+        <p className="ra">
+          {sprintf(__('Puppet Environment: %s'), environment)}
+        </p>
+      ) : null}
+      <table
+        id="report_log"
+        className="table table-bordered table-striped table-hover"
+      >
+        <thead>
+          <tr>
+            <th className="col col-md"> {__('Level')} </th>
+            <th className="col col-md-3"> {__('Resource')} </th>
+            <th className="col col-md-9"> {__('Message')} </th>
+          </tr>
+        </thead>
+        <tbody>
+          {logs.map((log, i) => (
+            <tr key={`tr-${i + 1}`}>
+              <td>
+                <span className={msgLevelClasses(log[0])}>{log[0]}</span>
+              </td>
+              <td className="break-me">{log[1]}</td>
+              {log[2].startsWith('\n---') ? (
+                <td className="break-me">
+                  <a
+                    onClick={e =>
+                      showDiff(e, log[2], /File\[(.*?)\]/.exec(log[1])[1])
+                    }
+                  >
+                    {__('Show Diff')}
+                  </a>
+                </td>
+              ) : (
+                <td className="break-me">{log[2]}</td>
+              )}
+            </tr>
+          ))}
+          {logs.length === 0 ? (
+            <tr key="tr-0">
+              <td colSpan="3">{__('Nothing to show')}</td>
+            </tr>
+          ) : null}
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+PuppetLogs.propTypes = {
+  logs: PropTypes.array.isRequired,
+  environment: PropTypes.string,
+};
+
+PuppetLogs.defaultProps = {
+  environment: null,
+};
+
+export default PuppetLogs;

data/webpack/src/Router/HostReports/ShowPage/Components/ReportLogs/helpers.js

@@ -0,0 +1,17 @@
+export const msgLevelClasses = level => {
+  let tag;
+  switch (level) {
+    case 'notice':
+      tag = 'info';
+      break;
+    case 'warning':
+      tag = 'warning';
+      break;
+    case 'err':
+      tag = 'danger';
+      break;
+    default:
+      tag = 'default';
+  }
+  return `label label-${tag} result-filter-tag`;
+};

data/webpack/src/Router/HostReports/ShowPage/Components/ReportLogs/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PuppetLogs from './Puppet';
+import AnsibleLogs from './Ansible';
+
+const ReportLogs = ({ format, logs, meta }) => {
+  switch (format) {
+    case 'puppet':
+      return <PuppetLogs logs={logs} environment={meta.environment} />;
+    case 'ansible':
+      return <AnsibleLogs logs={logs} checkMode={meta.checkMode} />;
+    default:
+      return <></>;
+  }
+};
+
+ReportLogs.propTypes = {
+  format: PropTypes.string.isRequired,
+  logs: PropTypes.array,
+  meta: PropTypes.object,
+};
+
+ReportLogs.defaultProps = {
+  logs: [],
+  meta: {},
+};
+
+export default ReportLogs;