foreman_host_reports 0.0.4 → 1.0.0

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

@@ -1,8 +1,9 @@
 import { getControllerSearchProps } from 'foremanReact/constants';
 
-export const HOST_REPORTS_SEARCH_PROPS = getControllerSearchProps(
-  'host_reports'
-);
+export const HOST_REPORTS_SEARCH_PROPS = {
+  ...getControllerSearchProps('/host_reports'),
+  controller: 'host_reports',
+};
 
 export const HOST_REPORTS_PATH = '/host_reports';
 export const HOST_REPORTS_API_PATH =

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

@@ -1,16 +1,49 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import { Alert, AlertActionCloseButton, Button } from '@patternfly/react-core';
+
+import {
+  TableComposable,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+} from '@patternfly/react-table';
 
 import { translate as __ } from 'foremanReact/common/I18n';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+
+import RawMsgModal from './Components/RawMsgModal';
+import EmptyLogsRow from './Components/EmptyLogsRow';
 
 import { msgLevelClasses } from './helpers';
 
-const AnsibleLogs = ({ logs, checkMode }) => {
+import { RAW_MSG_MODAL_ID } from '../../../constants';
+
+const AnsibleLogs = ({ logs, checkMode, onClear }) => {
   const [alertVisibility, setAlertVisibility] = useState(true);
+  const [selectedMsg, setSelectedMsg] = useState(0);
+  const { setModalOpen: setRawModalOpen } = useForemanModal({
+    id: RAW_MSG_MODAL_ID,
+  });
+
+  const rawMsg = idx => {
+    const onClick = () => {
+      setSelectedMsg(idx);
+      setRawModalOpen();
+    };
+    return (
+      <Button isSmall onClick={onClick} variant="secondary">
+        {__('Show')}
+      </Button>
+    );
+  };
+
   return (
     <>
+      <RawMsgModal body={logs[selectedMsg]} />
       {checkMode && alertVisibility ? (
         <Alert
           variant="info"
@@ -23,50 +56,52 @@ const AnsibleLogs = ({ logs, checkMode }) => {
           {__('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>
+      <TableComposable id="report_log" variant="compact">
+        <Thead noWrap>
+          <Tr>
+            <Th> {__('Level')} </Th>
+            <Th> {__('Task')} </Th>
+            <Th> {__('Message')} </Th>
+            <Th> {__('Raw data')} </Th>
+          </Tr>
+        </Thead>
+        <Tbody>
           {logs.map((log, idx) => (
-            <tr key={`tr-${idx + 1}`}>
-              <td>
+            <Tr key={`tr-${idx + 1}`}>
+              <Td>
                 <span className={msgLevelClasses(log.level)}>{log.level}</span>
-              </td>
-              <td className="break-me">{log.task.name}</td>
+              </Td>
+              <Td>{log.task.name}</Td>
               {Array.isArray(log.friendlyMessage) ? (
-                <td>
+                <Td>
                   <ul>
                     {log.friendlyMessage.map((msg, i) => (
                       <li key={`li-${i + 1}`}>{msg}</li>
                     ))}
                   </ul>
-                </td>
+                </Td>
               ) : (
-                <td className="break-me">{log.friendlyMessage}</td>
+                <Td>{log.friendlyMessage}</Td>
               )}
-            </tr>
+              <Td>{rawMsg(idx)}</Td>
+            </Tr>
           ))}
           {logs.length === 0 ? (
-            <tr key="tr-0">
-              <td colSpan="3">{__('Nothing to show')}</td>
-            </tr>
+            <Tr key="tr-0">
+              <Td colSpan={4}>
+                <EmptyLogsRow onClear={onClear} />
+              </Td>
+            </Tr>
           ) : null}
-        </tbody>
-      </table>
+        </Tbody>
+      </TableComposable>
     </>
   );
 };
 
 AnsibleLogs.propTypes = {
   logs: PropTypes.array.isRequired,
+  onClear: PropTypes.func.isRequired,
   checkMode: PropTypes.bool,
 };
 

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+import DefaultEmptyState from 'foremanReact/components/common/EmptyState';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+const EmptyLogsRow = ({ onClear }) => (
+  <DefaultEmptyState
+    header={__('No results found')}
+    icon={<SearchIcon />}
+    description={__(
+      'No results match this filter criteria. Clear all filters and try again.'
+    )}
+    action={{
+      title: __('Clear all filters'),
+      url: '#',
+      onClick: onClear,
+    }}
+  />
+);
+
+EmptyLogsRow.propTypes = {
+  onClear: PropTypes.func.isRequired,
+};
+
+export default EmptyLogsRow;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import JSONTree from 'react-json-tree';
+import Immutable from 'seamless-immutable';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import ForemanModal from 'foremanReact/components/ForemanModal';
+
+import { RAW_MSG_MODAL_ID } from '../../../../constants';
+
+const RawMsgModal = ({ body }) => {
+  const theme = {
+    scheme: 'foreman',
+    backgroundColor: 'rgba(0, 0, 0, 255)',
+    base00: 'rgba(0, 0, 0, 0)',
+  };
+  return (
+    <ForemanModal
+      id={RAW_MSG_MODAL_ID}
+      title={__('Raw data')}
+      backdrop="static"
+      enforceFocus
+    >
+      <JSONTree
+        data={Immutable.asMutable(body, { deep: true })}
+        hideRoot
+        theme={theme}
+      />
+    </ForemanModal>
+  );
+};
+
+RawMsgModal.propTypes = {
+  body: PropTypes.object,
+};
+
+RawMsgModal.defaultProps = {
+  body: {},
+};
+
+export default RawMsgModal;

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

@@ -2,13 +2,24 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import {
+  TableComposable,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+} from '@patternfly/react-table';
+
+import { translate as __ } from 'foremanReact/common/I18n';
 import * as diffModalActions from 'foremanReact/components/ConfigReports/DiffModal/DiffModalActions';
 import DiffModal from 'foremanReact/components/ConfigReports/DiffModal';
 
+import EmptyLogsRow from './Components/EmptyLogsRow';
+
 import { msgLevelClasses } from './helpers';
 
-const PuppetLogs = ({ logs, environment }) => {
+const PuppetLogs = ({ logs, onClear }) => {
   const dispatch = useDispatch();
   const showDiff = (e, diff, title) => {
     e.preventDefault();
@@ -18,31 +29,23 @@ const PuppetLogs = ({ logs, environment }) => {
   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>
+      <TableComposable id="report_log" variant="compact">
+        <Thead noWrap>
+          <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>
+            <Tr key={`tr-${i + 1}`}>
+              <Td>
                 <span className={msgLevelClasses(log[0])}>{log[0]}</span>
-              </td>
-              <td className="break-me">{log[1]}</td>
+              </Td>
+              <Td className="break-me">{log[1]}</Td>
               {log[2].startsWith('\n---') ? (
-                <td className="break-me">
+                <Td className="break-me">
                   <a
                     onClick={e =>
                       showDiff(e, log[2], /File\[(.*?)\]/.exec(log[1])[1])
@@ -50,30 +53,28 @@ const PuppetLogs = ({ logs, environment }) => {
                   >
                     {__('Show Diff')}
                   </a>
-                </td>
+                </Td>
               ) : (
-                <td className="break-me">{log[2]}</td>
+                <Td className="break-me">{log[2]}</Td>
               )}
-            </tr>
+            </Tr>
           ))}
           {logs.length === 0 ? (
-            <tr key="tr-0">
-              <td colSpan="3">{__('Nothing to show')}</td>
-            </tr>
+            <Tr key="tr-0">
+              <Td colSpan={3}>
+                <EmptyLogsRow onClear={onClear} />
+              </Td>
+            </Tr>
           ) : null}
-        </tbody>
-      </table>
+        </Tbody>
+      </TableComposable>
     </>
   );
 };
 
 PuppetLogs.propTypes = {
   logs: PropTypes.array.isRequired,
-  environment: PropTypes.string,
-};
-
-PuppetLogs.defaultProps = {
-  environment: null,
+  onClear: PropTypes.func.isRequired,
 };
 
 export default PuppetLogs;

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

@@ -4,12 +4,18 @@ import PropTypes from 'prop-types';
 import PuppetLogs from './Puppet';
 import AnsibleLogs from './Ansible';
 
-const ReportLogs = ({ format, logs, meta }) => {
+const ReportLogs = ({ format, logs, meta, onFilterClear }) => {
   switch (format) {
     case 'puppet':
-      return <PuppetLogs logs={logs} environment={meta.environment} />;
+      return <PuppetLogs logs={logs} onClear={onFilterClear} />;
     case 'ansible':
-      return <AnsibleLogs logs={logs} checkMode={meta.checkMode} />;
+      return (
+        <AnsibleLogs
+          logs={logs}
+          checkMode={meta.checkMode}
+          onClear={onFilterClear}
+        />
+      );
     default:
       return <></>;
   }
@@ -17,6 +23,7 @@ const ReportLogs = ({ format, logs, meta }) => {
 
 ReportLogs.propTypes = {
   format: PropTypes.string.isRequired,
+  onFilterClear: PropTypes.func.isRequired,
   logs: PropTypes.array,
   meta: PropTypes.object,
 };

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

@@ -1,14 +1,23 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { translate as __ } from 'foremanReact/common/I18n';
 
-import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';
+import {
+  Select,
+  SelectOption,
+  SelectVariant,
+  Toolbar,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 import ReportLogs from '../ReportLogs';
 
-const ReportLogsFilter = ({ format, reportedAt, meta }) => {
-  const reportedAtLocal = new Date(reportedAt);
+const ReportLogsFilter = ({ format, meta }) => {
   const { logs } = meta;
   const filterItems = [
     { text: __('All messages'), accepts: [] },
@@ -19,36 +28,17 @@ const ReportLogsFilter = ({ format, reportedAt, meta }) => {
     { text: __('Warnings and errors'), accepts: ['warning', 'err'] },
     { text: __('Errors only'), accepts: ['err'] },
   ];
-  const [currentItem, setCurrentItem] = useState(filterItems[0]);
-  const [currentFilterItems, setCurrentFilterItems] = useState(filterItems);
-  const [searchValue, setSearchValue] = useState('');
-  const [isOpen, setIsOpen] = useState(false);
   const [filteredLogs, setFilteredLogs] = useState(logs);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState(filterItems[0]);
 
-  /* eslint-disable react-hooks/exhaustive-deps */
-  const onSearchButtonClick = useCallback(() => {
-    const filtered =
-      searchValue === ''
-        ? filterItems
-        : filterItems.filter(item =>
-            item.text.toLowerCase().includes(searchValue.toLowerCase())
-          );
-    setCurrentFilterItems(filtered || []);
-  }, [searchValue]);
-  /* eslint-enable react-hooks/exhaustive-deps */
-
-  useEffect(() => {
-    onSearchButtonClick();
-  }, [searchValue, onSearchButtonClick]);
-
-  const onToggle = (event, newIsOpen) => {
-    setIsOpen(newIsOpen);
-  };
-  const onSelect = () => {
-    setIsOpen(!isOpen);
+  const onToggle = isExpanded => {
+    setIsOpen(isExpanded);
   };
-  const onSearchInputChange = (value, event) => {
-    setSearchValue(event.target.value);
+  const onSelect = (event, selection) => {
+    const item = filterItems.find(i => i.text === selection);
+    setSelected(item);
+    setIsOpen(false);
   };
   const filterLogs = (toFilter, accepts) => {
     if (!accepts.length) return toFilter;
@@ -57,48 +47,49 @@ const ReportLogsFilter = ({ format, reportedAt, meta }) => {
   };
 
   useEffect(() => {
-    setFilteredLogs(filterLogs(logs, currentItem.accepts));
-  }, [logs, currentItem]);
+    setFilteredLogs(filterLogs(logs, selected.accepts));
+  }, [logs, selected]);
+
+  const onFilterClear = () => {
+    setSelected(filterItems[0]);
+  };
 
   return (
     <>
-      <span>{__('Show log messages:')}</span>
-      <br />
-      <ContextSelector
-        id="report-logs-filter"
-        toggleText={currentItem.text}
-        onSearchInputChange={onSearchInputChange}
-        isOpen={isOpen}
-        searchInputValue={searchValue}
-        onToggle={onToggle}
-        onSelect={onSelect}
-        onSearchButtonClick={onSearchButtonClick}
-        screenReaderLabel="Selected Messages:"
-      >
-        {currentFilterItems.map((item, i) => (
-          <ContextSelectorItem
-            key={i + 1}
-            id={`select_messages_${i}`}
-            onClick={() => {
-              setCurrentItem(item);
-            }}
-            isDisabled={item.text === currentItem.text}
-          >
-            {item.text}
-          </ContextSelectorItem>
-        ))}
-      </ContextSelector>
-      <p className="ra">
-        {sprintf(__('Reported at %s'), reportedAtLocal.toLocaleString())}
-      </p>
-      <ReportLogs format={format} logs={filteredLogs} meta={meta} />
+      <Toolbar id="logs-toolbar">
+        <ToolbarContent>
+          <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="lg">
+            <ToolbarGroup variant="filter-group">
+              <ToolbarItem variant="label">{__('Message')}</ToolbarItem>
+              <ToolbarItem>
+                <Select
+                  variant={SelectVariant.single}
+                  onToggle={onToggle}
+                  onSelect={onSelect}
+                  selections={selected.text}
+                  isOpen={isOpen}
+                >
+                  {filterItems.map((option, index) => (
+                    <SelectOption key={index} value={option.text} />
+                  ))}
+                </Select>
+              </ToolbarItem>
+            </ToolbarGroup>
+          </ToolbarToggleGroup>
+        </ToolbarContent>
+      </Toolbar>
+      <ReportLogs
+        format={format}
+        logs={filteredLogs}
+        meta={meta}
+        onFilterClear={onFilterClear}
+      />
     </>
   );
 };
 
 ReportLogsFilter.propTypes = {
   format: PropTypes.string.isRequired,
-  reportedAt: PropTypes.string.isRequired,
   meta: PropTypes.object,
 };
 

data/webpack/src/Router/HostReports/ShowPage/ShowPage.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
 import PropTypes from 'prop-types';
-import { Button, Grid, GridItem } from '@patternfly/react-core';
+import {
+  Button,
+  Grid,
+  GridItem,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+} from '@patternfly/react-core';
 
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
-import { translate as __ } from 'foremanReact/common/I18n';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
 import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 
@@ -28,6 +35,7 @@ const HostReportsShowPage = ({
   isLoading,
   fetchAndPush,
 }) => {
+  const reportedAtLocal = new Date(reportedAt);
   const {
     setModalOpen: setDeleteModalOpen,
     setModalClosed: setDeleteModalClosed,
@@ -77,7 +85,6 @@ const HostReportsShowPage = ({
   const meta = {};
   switch (format) {
     case 'puppet':
-      meta.environment = body.environment;
       meta.logs = body.logs;
       break;
     case 'ansible':
@@ -124,11 +131,30 @@ const HostReportsShowPage = ({
         ) : (
           <Grid hasGutter>
             <GridItem>
-              <ReportLogsFilter
-                format={format}
-                reportedAt={reportedAt}
-                meta={meta}
-              />
+              <Toolbar id="meta-toolbar">
+                <ToolbarContent>
+                  <ToolbarItem>
+                    {sprintf(
+                      __('Reported at %s'),
+                      reportedAtLocal.toLocaleString()
+                    )}
+                  </ToolbarItem>
+                  {format === 'puppet' ? (
+                    <>
+                      <ToolbarItem variant="separator" />
+                      <ToolbarItem>
+                        {sprintf(
+                          __('Puppet Environment: %s'),
+                          body.environment
+                        )}
+                      </ToolbarItem>
+                    </>
+                  ) : null}
+                </ToolbarContent>
+              </Toolbar>
+            </GridItem>
+            <GridItem>
+              <ReportLogsFilter format={format} meta={meta} />
             </GridItem>
             {format === 'puppet' ? (
               <GridItem>

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

@@ -13,3 +13,5 @@ export const HOST_REPORT_REQUEST_KEY = 'HOST_REPORT';
 export const HOST_REPORTS_API_REQUEST_KEY = 'HOST_REPORTS_API';
 
 export const HOST_REPORT_DELETE_MODAL_ID = 'hostReportDeleteModal';
+
+export const RAW_MSG_MODAL_ID = 'rawMsgModal';