From aab3955847be11ead0a2672d19a8d63c6ab5410c Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Thu, 28 Sep 2023 10:13:28 -0400
Subject: [PATCH] feat(recordings): update Automated Analysis UI (#1117)

* update recording options UI

* update JSON report details for new API response format

* replace ReportFrame with new-style automated analysis UI

* remove View Report recording action

* only display non-default recording options

* move recording options into table column

* add refresh button
---
 .../AutomatedAnalysisCard.tsx                 |  16 +-
 .../AutomatedAnalysisCardList.tsx             |  14 +-
 .../AutomatedAnalysisFilters.tsx              |  12 +-
 .../ClickableAutomatedAnalysisLabel.tsx       |  46 +--
 src/app/Dashboard/dashboard-utils.tsx         |  68 +++-
 src/app/Recordings/ActiveRecordingsTable.tsx  | 136 ++++++-
 .../Recordings/ArchivedRecordingsTable.tsx    |  72 +++-
 src/app/Recordings/RecordingActions.tsx       |  11 +-
 src/app/Recordings/ReportFrame.tsx            |  67 ----
 src/app/Shared/Services/Api.service.tsx       |   2 +-
 src/app/Shared/Services/Report.service.tsx    |  94 ++---
 src/app/utils/fakeData.ts                     |  79 +++-
 .../AutomatedAnalysisCard.test.tsx            |  74 +++-
 .../AutomatedAnalysisCardList.test.tsx        |  56 ++-
 .../ClickableAutomatedAnalysisLabel.test.tsx  | 177 +++++++--
 .../AutomatedAnalysisNameFilter.test.tsx      |  74 +++-
 .../AutomatedAnalysisTopicFilter.test.tsx     |  74 +++-
 .../AutomatedAnalysisCardList.test.tsx.snap   | 339 ++++++++++++++++--
 .../Recordings/ActiveRecordingsTable.test.tsx |  16 -
 .../ArchivedRecordingsTable.test.tsx          |  19 -
 20 files changed, 1050 insertions(+), 396 deletions(-)
 delete mode 100644 src/app/Recordings/ReportFrame.tsx

diff --git a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx
index 08a1e9cea..e270c8bf1 100644
--- a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx
+++ b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx
@@ -42,7 +42,7 @@ import {
   FAILED_REPORT_MESSAGE,
   NO_RECORDINGS_MESSAGE,
   RECORDING_FAILURE_MESSAGE,
-  RuleEvaluation,
+  AnalysisResult,
   TEMPLATE_UNSUPPORTED_MESSAGE,
 } from '@app/Shared/Services/Report.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
@@ -125,7 +125,7 @@ export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps>
   const { t } = useTranslation();
 
   const [targetConnectURL, setTargetConnectURL] = React.useState('');
-  const [evaluations, setEvaluations] = React.useState<RuleEvaluation[]>([]);
+  const [results, setResults] = React.useState<AnalysisResult[]>([]);
 
   const [categorizedEvaluation, setCategorizedEvaluation] = React.useState<CategorizedRuleEvaluations[]>([]);
   const [filteredCategorizedEvaluation, setFilteredCategorizedEvaluation] = React.useState<
@@ -155,9 +155,9 @@ export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps>
   }) as AutomatedAnalysisGlobalFiltersCategories;
 
   const categorizeEvaluation = React.useCallback(
-    (arr: RuleEvaluation[]) => {
-      setEvaluations(arr);
-      const map = new Map<string, RuleEvaluation[]>();
+    (arr: AnalysisResult[]) => {
+      setResults(arr);
+      const map = new Map<string, AnalysisResult[]>();
       arr.forEach((evaluation) => {
         const topicValue = map.get(evaluation.topic);
         if (topicValue === undefined) {
@@ -170,7 +170,7 @@ export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps>
       const sorted = (Array.from(map) as CategorizedRuleEvaluations[]).sort();
       setCategorizedEvaluation(sorted);
     },
-    [setCategorizedEvaluation, setEvaluations],
+    [setCategorizedEvaluation, setResults],
   );
 
   // Will perform analysis on the first ActiveRecording which has
@@ -794,7 +794,7 @@ export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps>
 
   const headerLabels = React.useMemo(() => {
     if (isLoading || errorMessage) return undefined;
-    const filtered = evaluations.filter((e) => e.score >= AutomatedAnalysisScore.ORANGE_SCORE_THRESHOLD);
+    const filtered = results.filter((e) => e.score >= AutomatedAnalysisScore.ORANGE_SCORE_THRESHOLD);
     if (filtered.length === 0) return <AutomatedAnalysisHeaderLabel type="ok" />;
     const [warnings, errors] = _.partition(filtered, (e) => e.score < AutomatedAnalysisScore.RED_SCORE_THRESHOLD);
     return (
@@ -804,7 +804,7 @@ export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps>
         {warnings.length > 0 && <AutomatedAnalysisHeaderLabel type={'warning'} count={warnings.length} />}
       </LabelGroup>
     );
-  }, [isLoading, errorMessage, evaluations, reportSource]);
+  }, [isLoading, errorMessage, results, reportSource]);
 
   const header = React.useMemo(() => {
     return (
diff --git a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.tsx b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.tsx
index e1d8a74f4..01324081b 100644
--- a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.tsx
+++ b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.tsx
@@ -124,24 +124,24 @@ export const AutomatedAnalysisCardList: React.FC<AutomatedAnalysisCardListProps>
             </Tr>
           </Thead>
           <Tbody>
-            {flatFiltered.map((evaluation) => {
+            {flatFiltered.map((result) => {
               return (
-                <Tr key={evaluation.name}>
+                <Tr key={result.name}>
                   <Td dataLabel={t('NAME', { ns: 'common' })} width={10}>
-                    {evaluation.name}
+                    {result.name}
                   </Td>
                   <Td dataLabel={t('SCORE', { ns: 'common' })} modifier="wrap">
                     <Flex spaceItems={{ default: 'spaceItemsSm' }}>
                       <FlexItem>
-                        {evaluation.score == AutomatedAnalysisScore.NA_SCORE
+                        {result.score == AutomatedAnalysisScore.NA_SCORE
                           ? t('N/A', { ns: 'common' })
-                          : evaluation.score.toFixed(1)}
+                          : result.score.toFixed(1)}
                       </FlexItem>
-                      <FlexItem>{icon(evaluation.score)}</FlexItem>
+                      <FlexItem>{icon(result.score)}</FlexItem>
                     </Flex>
                   </Td>
                   <Td modifier="breakWord" dataLabel={t('DESCRIPTION', { ns: 'common' })}>
-                    {transformAADescription(evaluation.description)}
+                    {transformAADescription(result)}
                   </Td>
                 </Tr>
               );
diff --git a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx
index e31deec3f..3c3a6599f 100644
--- a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx
+++ b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx
@@ -16,7 +16,7 @@
 import { allowedAutomatedAnalysisFilters } from '@app/Shared/Redux/Filters/AutomatedAnalysisFilterSlice';
 import { UpdateFilterOptions } from '@app/Shared/Redux/Filters/Common';
 import { automatedAnalysisUpdateCategoryIntent, RootState, StateDispatch } from '@app/Shared/Redux/ReduxStore';
-import { RuleEvaluation } from '@app/Shared/Services/Report.service';
+import { AnalysisResult } from '@app/Shared/Services/Report.service';
 import {
   Dropdown,
   DropdownItem,
@@ -46,7 +46,7 @@ export interface AutomatedAnalysisGlobalFiltersCategories {
 
 export interface AutomatedAnalysisFiltersProps {
   target: string;
-  evaluations: [string, RuleEvaluation[]][];
+  evaluations: [string, AnalysisResult[]][];
   filters: AutomatedAnalysisFiltersCategories;
   updateFilters: (target: string, updateFilterOptions: UpdateFilterOptions) => void;
 }
@@ -187,7 +187,7 @@ export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> =
 };
 
 export const filterAutomatedAnalysis = (
-  topicEvalTuple: [string, RuleEvaluation[]][],
+  topicEvalTuple: [string, AnalysisResult[]][],
   filters: AutomatedAnalysisFiltersCategories,
   globalFilters: AutomatedAnalysisGlobalFiltersCategories,
   showNAScores: boolean,
@@ -202,7 +202,7 @@ export const filterAutomatedAnalysis = (
     filtered = filtered.map(([topic, evaluations]) => {
       return [topic, evaluations.filter((evaluation) => filters.Name.includes(evaluation.name))] as [
         string,
-        RuleEvaluation[],
+        AnalysisResult[],
       ];
     });
   }
@@ -216,12 +216,12 @@ export const filterAutomatedAnalysis = (
           }
           return globalFilters.Score <= evaluation.score;
         }),
-      ] as [string, RuleEvaluation[]];
+      ] as [string, AnalysisResult[]];
     });
   }
   if (filters.Topic != null && !!filters.Topic.length) {
     filtered = filtered.map(([topic, evaluations]) => {
-      return [topic, evaluations.filter((_) => filters.Topic.includes(topic))] as [string, RuleEvaluation[]];
+      return [topic, evaluations.filter((_) => filters.Topic.includes(topic))] as [string, AnalysisResult[]];
     });
   }
 
diff --git a/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx b/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx
index 5f39b6dc4..b4214945b 100644
--- a/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx
+++ b/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { AutomatedAnalysisScore, RuleEvaluation } from '@app/Shared/Services/Report.service';
+import { AutomatedAnalysisScore, AnalysisResult } from '@app/Shared/Services/Report.service';
 import { portalRoot } from '@app/utils/utils';
 import { Label, LabelProps, Popover } from '@patternfly/react-core';
 import { CheckCircleIcon, ExclamationCircleIcon, InfoCircleIcon, WarningTriangleIcon } from '@patternfly/react-icons';
@@ -25,12 +25,12 @@ import { useTranslation } from 'react-i18next';
 import { transformAADescription } from '../dashboard-utils';
 
 export interface ClickableAutomatedAnalysisLabelProps {
-  label: RuleEvaluation;
+  label: AnalysisResult;
 }
 
 export const clickableAutomatedAnalysisKey = 'clickable-automated-analysis-label';
 
-export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysisLabelProps> = ({ label }) => {
+export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysisLabelProps> = ({ label: result }) => {
   const { t } = useTranslation();
 
   const [isHoveredOrFocused, setIsHoveredOrFocused] = React.useState(false);
@@ -50,72 +50,72 @@ export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysi
   const colorScheme = React.useMemo((): LabelProps['color'] => {
     // TODO: use label color schemes based on settings for accessibility
     // context.settings.etc.
-    return label.score == AutomatedAnalysisScore.NA_SCORE
+    return result.score == AutomatedAnalysisScore.NA_SCORE
       ? 'grey'
-      : label.score < AutomatedAnalysisScore.ORANGE_SCORE_THRESHOLD
+      : result.score < AutomatedAnalysisScore.ORANGE_SCORE_THRESHOLD
       ? 'green'
-      : label.score < AutomatedAnalysisScore.RED_SCORE_THRESHOLD
+      : result.score < AutomatedAnalysisScore.RED_SCORE_THRESHOLD
       ? 'orange'
       : 'red';
-  }, [label.score]);
+  }, [result.score]);
 
   const alertPopoverVariant = React.useMemo(() => {
-    return label.score == AutomatedAnalysisScore.NA_SCORE
+    return result.score == AutomatedAnalysisScore.NA_SCORE
       ? 'default'
-      : label.score < AutomatedAnalysisScore.ORANGE_SCORE_THRESHOLD
+      : result.score < AutomatedAnalysisScore.ORANGE_SCORE_THRESHOLD
       ? 'success'
-      : label.score < AutomatedAnalysisScore.RED_SCORE_THRESHOLD
+      : result.score < AutomatedAnalysisScore.RED_SCORE_THRESHOLD
       ? 'warning'
       : 'danger';
-  }, [label.score]);
+  }, [result.score]);
 
   const icon = React.useMemo(() => {
-    return label.score == AutomatedAnalysisScore.NA_SCORE ? (
+    return result.score == AutomatedAnalysisScore.NA_SCORE ? (
       <InfoCircleIcon />
-    ) : label.score < AutomatedAnalysisScore.ORANGE_SCORE_THRESHOLD ? (
+    ) : result.score < AutomatedAnalysisScore.ORANGE_SCORE_THRESHOLD ? (
       <CheckCircleIcon />
-    ) : label.score < AutomatedAnalysisScore.RED_SCORE_THRESHOLD ? (
+    ) : result.score < AutomatedAnalysisScore.RED_SCORE_THRESHOLD ? (
       <WarningTriangleIcon />
     ) : (
       <ExclamationCircleIcon />
     );
-  }, [label.score]);
+  }, [result.score]);
 
   return (
     <Popover
       aria-label={t('ClickableAutomatedAnalysisLabel.ARIA_LABELS.POPOVER')}
       isVisible={isDescriptionVisible}
-      headerContent={<div className={`${clickableAutomatedAnalysisKey}-popover-header`}>{label.name}</div>}
+      headerContent={<div className={`${clickableAutomatedAnalysisKey}-popover-header`}>{result.name}</div>}
       alertSeverityVariant={alertPopoverVariant}
       alertSeverityScreenReaderText={alertPopoverVariant}
       shouldOpen={() => setIsDescriptionVisible(true)}
       shouldClose={() => setIsDescriptionVisible(false)}
-      key={`${clickableAutomatedAnalysisKey}-popover-${label.name}`}
+      key={`${clickableAutomatedAnalysisKey}-popover-${result.name}`}
       bodyContent={
         <div
           className={`${clickableAutomatedAnalysisKey}-popover-body`}
-          key={`${clickableAutomatedAnalysisKey}-popover-body-${label.name}`}
+          key={`${clickableAutomatedAnalysisKey}-popover-body-${result.name}`}
         >
           <p className={css(alertStyle[alertPopoverVariant], `${clickableAutomatedAnalysisKey}-popover-body-score`)}>
-            {label.score == AutomatedAnalysisScore.NA_SCORE ? 'N/A' : label.score.toFixed(1)}
+            {result.score == AutomatedAnalysisScore.NA_SCORE ? 'N/A' : result.score.toFixed(1)}
           </p>
-          {transformAADescription(label.description)}
+          {transformAADescription(result)}
         </div>
       }
       appendTo={portalRoot}
     >
       <Label
-        aria-label={label.name}
+        aria-label={result.name}
         icon={icon}
         color={colorScheme}
         className={isHoveredOrFocused ? `clickable-label-hovered` : ''}
         onMouseEnter={handleHoveredOrFocused}
         onMouseLeave={handleNonHoveredOrFocused}
         onFocus={handleHoveredOrFocused}
-        key={`${clickableAutomatedAnalysisKey}-${label.name}`}
+        key={`${clickableAutomatedAnalysisKey}-${result.name}`}
         isCompact
       >
-        <span className={`${clickableAutomatedAnalysisKey}-name`}>{`${label.name}`}</span>
+        <span className={`${clickableAutomatedAnalysisKey}-name`}>{`${result.name}`}</span>
         {
           // don't use isTruncated here, it doesn't work with the popover because of helperText
         }
diff --git a/src/app/Dashboard/dashboard-utils.tsx b/src/app/Dashboard/dashboard-utils.tsx
index 942e933ab..2592a3026 100644
--- a/src/app/Dashboard/dashboard-utils.tsx
+++ b/src/app/Dashboard/dashboard-utils.tsx
@@ -19,7 +19,17 @@ import cryostatLogoDark from '@app/assets/cryostat_icon_rgb_reverse.svg';
 import { dashboardConfigDeleteCardIntent } from '@app/Shared/Redux/ReduxStore';
 import { FeatureLevel } from '@app/Shared/Services/Settings.service';
 import { withThemedIcon } from '@app/utils/withThemedIcon';
-import { LabelProps, gridSpans, Button, ButtonVariant } from '@patternfly/react-core';
+import {
+  LabelProps,
+  gridSpans,
+  Button,
+  ButtonVariant,
+  Stack,
+  StackItem,
+  Label,
+  Title,
+  Text,
+} from '@patternfly/react-core';
 import { FileIcon, UnknownIcon, UserIcon } from '@patternfly/react-icons';
 import { nanoid } from '@reduxjs/toolkit';
 import { TFunction } from 'i18next';
@@ -31,6 +41,8 @@ import { AutomatedAnalysisCardDescriptor } from './AutomatedAnalysis/AutomatedAn
 import { JFRMetricsChartCardDescriptor } from './Charts/jfr/JFRMetricsChartCard';
 import { MBeanMetricsChartCardDescriptor } from './Charts/mbean/MBeanMetricsChartCard';
 import { JvmDetailsCardDescriptor } from './JvmDetails/JvmDetailsCard';
+import { AnalysisResult, Suggestion } from '@app/Shared/Services/Report.service';
+import _ from 'lodash';
 
 export const DEFAULT_DASHBOARD_NAME = 'Default';
 export const DRAGGABLE_REF_KLAZZ = `draggable-ref`;
@@ -403,24 +415,42 @@ export interface DashboardCardTypeProps {
   actions?: JSX.Element[];
 }
 
-export const transformAADescription = (description: string): JSX.Element => {
-  const splitDesc = description.split('\n\n');
-  const boldRegex = /^([^:]+:\s?)/; // match text up to and including the first colon
-
+export const transformAADescription = (result: AnalysisResult): JSX.Element => {
+  const format = (s): JSX.Element => {
+    if (typeof s === 'string') {
+      return <Text>{s}</Text>;
+    }
+    if (Array.isArray(s)) {
+      return (
+        <Stack>
+          {s.map((e) => (
+            <StackItem key={e.setting}>
+              <Title headingLevel={'h6'}>{e.setting}</Title>
+              <Label>
+                {e.name}={e.value}
+              </Label>
+            </StackItem>
+          ))}
+        </Stack>
+      );
+    }
+    throw `Unrecognized item: ${s}`;
+  };
   return (
-    <>
-      {splitDesc.map((item, index) => {
-        const boldMatch = item.match(boldRegex);
-        const boldText = boldMatch ? boldMatch[0] : '';
-        const restOfText = boldMatch ? item.replace(boldRegex, '') : item;
-        const style = index > 0 ? { paddingTop: '0.7rem' } : {};
-        return (
-          <p key={index} style={style}>
-            {boldText && <strong>{boldText}</strong>}
-            {restOfText}
-          </p>
-        );
-      })}
-    </>
+    <div>
+      {Object.entries(result.evaluation || {}).map(([k, v]) =>
+        v && v.length ? (
+          <div key={k}>
+            <span>
+              <Title headingLevel={'h5'}>{_.capitalize(k)}</Title>
+              {format(result.evaluation[k])}
+            </span>
+            <br />
+          </div>
+        ) : (
+          <div key={k}></div>
+        ),
+      )}
+    </div>
   );
 };
diff --git a/src/app/Recordings/ActiveRecordingsTable.tsx b/src/app/Recordings/ActiveRecordingsTable.tsx
index 11089bb56..1ffa62541 100644
--- a/src/app/Recordings/ActiveRecordingsTable.tsx
+++ b/src/app/Recordings/ActiveRecordingsTable.tsx
@@ -36,24 +36,33 @@ import { NO_TARGET } from '@app/Shared/Services/Target.service';
 import { useDayjs } from '@app/utils/useDayjs';
 import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { sortResources, TableColumn } from '@app/utils/utils';
+import { formatBytes, sortResources, TableColumn } from '@app/utils/utils';
 import {
+  Bullseye,
   Button,
   Checkbox,
   Drawer,
   DrawerContent,
   DrawerContentBody,
   Dropdown,
+  Grid,
+  GridItem,
   KebabToggle,
+  Label,
+  LabelGroup,
   OverflowMenu,
   OverflowMenuContent,
   OverflowMenuControl,
   OverflowMenuDropdownItem,
   OverflowMenuGroup,
   OverflowMenuItem,
+  Spinner,
+  Stack,
+  StackItem,
   Text,
   Timestamp,
   TimestampTooltipVariant,
+  Title,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -71,7 +80,12 @@ import { RecordingActions } from './RecordingActions';
 import { filterRecordings, RecordingFilters, RecordingFiltersCategories } from './RecordingFilters';
 import { RecordingLabelsPanel } from './RecordingLabelsPanel';
 import { ColumnConfig, RecordingsTable } from './RecordingsTable';
-import { ReportFrame } from './ReportFrame';
+import { AnalysisResult, CategorizedRuleEvaluations } from '@app/Shared/Services/Report.service';
+import {
+  clickableAutomatedAnalysisKey,
+  ClickableAutomatedAnalysisLabel,
+} from '@app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel';
+import { RedoIcon } from '@patternfly/react-icons';
 
 export enum PanelContent {
   LABELS,
@@ -104,6 +118,10 @@ const tableColumns: TableColumn[] = [
     keyPaths: ['state'],
     sortable: true,
   },
+  {
+    title: 'Options',
+    keyPaths: ['options'],
+  },
   {
     title: 'Labels',
     keyPaths: ['metadata', 'labels'],
@@ -542,6 +560,7 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
           >
             {filteredRecordings.map((r) => (
               <ActiveRecordingRow
+                targetConnectUrl={targetConnectURL}
                 key={r.name}
                 recording={r}
                 labelFilters={targetRecordingFilters.Label}
@@ -805,6 +824,7 @@ const ActiveRecordingsToolbar: React.FC<ActiveRecordingsToolbarProps> = (props)
 };
 
 export interface ActiveRecordingRowProps {
+  targetConnectUrl: string;
   recording: ActiveRecording;
   index: number;
   currentSelectedTargetURL: string;
@@ -817,6 +837,7 @@ export interface ActiveRecordingRowProps {
 }
 
 export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
+  targetConnectUrl,
   recording,
   index,
   currentSelectedTargetURL,
@@ -830,21 +851,21 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
   const [dayjs, datetimeContext] = useDayjs();
   const context = React.useContext(ServiceContext);
 
-  const parsedLabels = React.useMemo(() => {
-    return parseLabels(recording.metadata.labels);
-  }, [recording]);
-
   const expandedRowId = React.useMemo(
     () => `active-table-row-${recording.name}-${recording.startTime}-exp`,
     [recording],
   );
 
-  const handleToggle = React.useCallback(() => toggleExpanded(expandedRowId), [expandedRowId, toggleExpanded]);
-
   const isExpanded = React.useMemo(() => {
     return expandedRows.includes(expandedRowId);
   }, [expandedRowId, expandedRows]);
 
+  const parsedLabels = React.useMemo(() => {
+    return parseLabels(recording.metadata.labels);
+  }, [recording]);
+
+  const handleToggle = React.useCallback(() => toggleExpanded(expandedRowId), [expandedRowId, toggleExpanded]);
+
   const handleCheck = React.useCallback(
     (checked: boolean) => {
       handleRowCheck(checked, index);
@@ -852,6 +873,38 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
     [index, handleRowCheck],
   );
 
+  const [loadingAnalysis, setLoadingAnalysis] = React.useState(false);
+  const [analyses, setAnalyses] = React.useState<CategorizedRuleEvaluations[]>([]);
+
+  const handleLoadAnalysis = React.useCallback(() => {
+    setLoadingAnalysis(true);
+    context.reports
+      .reportJson(recording, targetConnectUrl)
+      .pipe(first())
+      .subscribe((report) => {
+        const map = new Map<string, AnalysisResult[]>();
+        report.forEach((evaluation) => {
+          const topicValue = map.get(evaluation.topic);
+          if (topicValue === undefined) {
+            map.set(evaluation.topic, [evaluation]);
+          } else {
+            topicValue.push(evaluation);
+            topicValue.sort((a, b) => b.score - a.score || a.name.localeCompare(b.name));
+          }
+        });
+        const sorted = (Array.from(map) as CategorizedRuleEvaluations[]).sort();
+        setAnalyses(sorted);
+        setLoadingAnalysis(false);
+      });
+  }, [setLoadingAnalysis, context.reports, recording, targetConnectUrl, setAnalyses]);
+
+  React.useEffect(() => {
+    if (!isExpanded) {
+      return;
+    }
+    handleLoadAnalysis();
+  }, [isExpanded, handleLoadAnalysis]);
+
   const parentRow = React.useMemo(() => {
     const RecordingDuration = (props: { duration: number }) => {
       const str = React.useMemo(
@@ -900,6 +953,23 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
           {recording.state}
         </Td>
         <Td key={`active-table-row-${index}_6`} dataLabel={tableColumns[4].title}>
+          <LabelGroup isVertical>
+            <Label color="blue" key="toDisk">
+              toDisk: {String(recording.toDisk)}
+            </Label>
+            {recording.maxAge ? (
+              <Label color="blue" key="maxAge">
+                maxAge: {recording.maxAge / 1000}s
+              </Label>
+            ) : undefined}
+            {recording.maxSize ? (
+              <Label color="blue" key="maxSize">
+                maxSize: {formatBytes(recording.maxSize)}
+              </Label>
+            ) : undefined}
+          </LabelGroup>
+        </Td>
+        <Td key={`active-table-row-${index}_7`} dataLabel={tableColumns[5].title}>
           <LabelCell
             target={currentSelectedTargetURL}
             clickableOptions={{
@@ -937,21 +1007,49 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
       <Tr key={`${index}_child`} isExpanded={isExpanded}>
         <Td key={`active-ex-expand-${index}`} dataLabel={'Content Details'} colSpan={tableColumns.length + 3}>
           <ExpandableRowContent>
-            <Text>Recording Options:</Text>
-            <Text>
-              toDisk = {String(recording.toDisk)} &emsp; maxAge = {recording.maxAge / 1000}s &emsp; maxSize ={' '}
-              {recording.maxSize}B
-            </Text>
-            <br></br>
-            <hr></hr>
-            <br></br>
-            <Text>Automated Analysis:</Text>
-            <ReportFrame isExpanded={isExpanded} recording={recording} width="100%" height="640" />
+            <Title headingLevel={'h5'}>
+              <Button
+                variant="plain"
+                isSmall
+                isDisabled={loadingAnalysis}
+                onClick={handleLoadAnalysis}
+                icon={<RedoIcon />}
+              />
+              Automated Analysis
+            </Title>
+            <Grid>
+              {loadingAnalysis ? (
+                <Bullseye>
+                  <Spinner />
+                </Bullseye>
+              ) : (
+                analyses.map(([topic, evaluations]) => {
+                  return (
+                    <GridItem className="automated-analysis-grid-item" span={2} key={`gridItem-${topic}`}>
+                      <LabelGroup
+                        className="automated-analysis-topic-label-groups"
+                        categoryName={topic}
+                        isVertical
+                        numLabels={2}
+                        isCompact
+                        key={topic}
+                      >
+                        {evaluations.map((evaluation) => {
+                          return (
+                            <ClickableAutomatedAnalysisLabel label={evaluation} key={clickableAutomatedAnalysisKey} />
+                          );
+                        })}
+                      </LabelGroup>
+                    </GridItem>
+                  );
+                })
+              )}
+            </Grid>
           </ExpandableRowContent>
         </Td>
       </Tr>
     );
-  }, [recording, index, isExpanded]);
+  }, [index, isExpanded, handleLoadAnalysis, loadingAnalysis, analyses]);
 
   return (
     <Tbody key={index} isExpanded={isExpanded}>
diff --git a/src/app/Recordings/ArchivedRecordingsTable.tsx b/src/app/Recordings/ArchivedRecordingsTable.tsx
index f666be980..afdf45c88 100644
--- a/src/app/Recordings/ArchivedRecordingsTable.tsx
+++ b/src/app/Recordings/ArchivedRecordingsTable.tsx
@@ -38,19 +38,25 @@ import { useSort } from '@app/utils/useSort';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { formatBytes, hashCode, sortResources, TableColumn } from '@app/utils/utils';
 import {
+  Bullseye,
   Button,
   Checkbox,
   Drawer,
   DrawerContent,
   DrawerContentBody,
   Dropdown,
+  Grid,
+  GridItem,
   KebabToggle,
+  LabelGroup,
   OverflowMenu,
   OverflowMenuContent,
   OverflowMenuControl,
   OverflowMenuDropdownItem,
   OverflowMenuGroup,
   OverflowMenuItem,
+  Spinner,
+  Title,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -67,7 +73,11 @@ import { RecordingActions } from './RecordingActions';
 import { RecordingFiltersCategories, filterRecordings, RecordingFilters } from './RecordingFilters';
 import { RecordingLabelsPanel } from './RecordingLabelsPanel';
 import { ColumnConfig, RecordingsTable } from './RecordingsTable';
-import { ReportFrame } from './ReportFrame';
+import { AnalysisResult, CategorizedRuleEvaluations } from '@app/Shared/Services/Report.service';
+import {
+  clickableAutomatedAnalysisKey,
+  ClickableAutomatedAnalysisLabel,
+} from '@app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel';
 
 const tableColumns: TableColumn[] = [
   {
@@ -772,6 +782,34 @@ export const ArchivedRecordingRow: React.FC<ArchivedRecordingRowProps> = ({
     [index, handleRowCheck],
   );
 
+  const [loadingAnalysis, setLoadingAnalysis] = React.useState(false);
+  const [analyses, setAnalyses] = React.useState<CategorizedRuleEvaluations[]>([]);
+
+  React.useEffect(() => {
+    if (!isExpanded) {
+      return;
+    }
+    setLoadingAnalysis(true);
+    context.reports
+      .reportJson(recording, currentSelectedTargetURL)
+      .pipe(first())
+      .subscribe((report) => {
+        const map = new Map<string, AnalysisResult[]>();
+        report.forEach((evaluation) => {
+          const topicValue = map.get(evaluation.topic);
+          if (topicValue === undefined) {
+            map.set(evaluation.topic, [evaluation]);
+          } else {
+            topicValue.push(evaluation);
+            topicValue.sort((a, b) => b.score - a.score || a.name.localeCompare(b.name));
+          }
+        });
+        const sorted = (Array.from(map) as CategorizedRuleEvaluations[]).sort();
+        setAnalyses(sorted);
+        setLoadingAnalysis(false);
+      });
+  }, [context.reports, isExpanded, recording, currentSelectedTargetURL, setAnalyses, setLoadingAnalysis]);
+
   const parentRow = React.useMemo(() => {
     return (
       <Tr key={`${index}_parent`}>
@@ -845,12 +883,40 @@ export const ArchivedRecordingRow: React.FC<ArchivedRecordingRowProps> = ({
       <Tr key={`${index}_child`} isExpanded={isExpanded}>
         <Td key={`archived-ex-expand-${index}`} dataLabel={'Content Details'} colSpan={tableColumns.length + 3}>
           <ExpandableRowContent>
-            <ReportFrame isExpanded={isExpanded} recording={recording} width="100%" height="640" />
+            <Title headingLevel={'h5'}>Automated Analysis</Title>
+            <Grid>
+              {loadingAnalysis ? (
+                <Bullseye>
+                  <Spinner />
+                </Bullseye>
+              ) : (
+                analyses.map(([topic, evaluations]) => {
+                  return (
+                    <GridItem className="automated-analysis-grid-item" span={2} key={`gridItem-${topic}`}>
+                      <LabelGroup
+                        className="automated-analysis-topic-label-groups"
+                        categoryName={topic}
+                        isVertical
+                        numLabels={2}
+                        isCompact
+                        key={topic}
+                      >
+                        {evaluations.map((evaluation) => {
+                          return (
+                            <ClickableAutomatedAnalysisLabel label={evaluation} key={clickableAutomatedAnalysisKey} />
+                          );
+                        })}
+                      </LabelGroup>
+                    </GridItem>
+                  );
+                })
+              )}
+            </Grid>
           </ExpandableRowContent>
         </Td>
       </Tr>
     );
-  }, [recording, index, isExpanded]);
+  }, [index, isExpanded, loadingAnalysis, analyses]);
 
   return (
     <Tbody key={index} isExpanded={isExpanded}>
diff --git a/src/app/Recordings/RecordingActions.tsx b/src/app/Recordings/RecordingActions.tsx
index f9c6d4cc4..072faace6 100644
--- a/src/app/Recordings/RecordingActions.tsx
+++ b/src/app/Recordings/RecordingActions.tsx
@@ -76,10 +76,6 @@ export const RecordingActions: React.FC<RecordingActionsProps> = (props) => {
     context.api.downloadRecording(props.recording);
   }, [context.api, props.recording]);
 
-  const handleViewReport = React.useCallback(() => {
-    context.api.downloadReport(props.recording);
-  }, [context.api, props.recording]);
-
   const actionItems = React.useMemo(() => {
     const actionItems = [
       {
@@ -87,11 +83,6 @@ export const RecordingActions: React.FC<RecordingActionsProps> = (props) => {
         key: 'download-recording',
         onClick: handleDownloadRecording,
       },
-      {
-        title: 'View Report ...',
-        key: 'view-report',
-        onClick: handleViewReport,
-      },
     ] as RowAction[];
     if (grafanaEnabled) {
       actionItems.push({
@@ -101,7 +92,7 @@ export const RecordingActions: React.FC<RecordingActionsProps> = (props) => {
       });
     }
     return actionItems;
-  }, [handleDownloadRecording, handleViewReport, grafanaEnabled, grafanaUpload]);
+  }, [handleDownloadRecording, grafanaEnabled, grafanaUpload]);
 
   const onSelect = React.useCallback(
     (action: RowAction) => {
diff --git a/src/app/Recordings/ReportFrame.tsx b/src/app/Recordings/ReportFrame.tsx
deleted file mode 100644
index 3614a2e80..000000000
--- a/src/app/Recordings/ReportFrame.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * Copyright The Cryostat Authors.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Recording, isHttpError } from '@app/Shared/Services/Api.service';
-import { isGenerationError } from '@app/Shared/Services/Report.service';
-import { ServiceContext } from '@app/Shared/Services/Services';
-import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { Spinner } from '@patternfly/react-core';
-import * as React from 'react';
-import { first } from 'rxjs/operators';
-
-export interface ReportFrameProps extends React.HTMLProps<HTMLIFrameElement> {
-  isExpanded: boolean;
-  recording: Recording;
-}
-
-export const ReportFrame: React.FC<ReportFrameProps> = (props) => {
-  const addSubscription = useSubscriptions();
-  const context = React.useContext(ServiceContext);
-  const [report, setReport] = React.useState(undefined as string | undefined);
-  const [loaded, setLoaded] = React.useState(false);
-  const { isExpanded, recording, ...rest } = props;
-
-  React.useLayoutEffect(() => {
-    if (!props.isExpanded) {
-      return;
-    }
-    addSubscription(
-      context.reports
-        .report(recording)
-        .pipe(first())
-        .subscribe({
-          next: setReport,
-          error: (err) => {
-            if (isGenerationError(err)) {
-              err.messageDetail.pipe(first()).subscribe((detail) => setReport(detail));
-            } else if (isHttpError(err)) {
-              setReport(err.message);
-            } else {
-              setReport(JSON.stringify(err));
-            }
-          },
-        }),
-    );
-  }, [addSubscription, context.reports, recording, isExpanded, setReport, props]);
-
-  const onLoad = () => setLoaded(true);
-
-  return (
-    <>
-      {!loaded && <Spinner />}
-      <iframe title="Automated Analysis" srcDoc={report} {...rest} onLoad={onLoad} hidden={!(loaded && isExpanded)} />
-    </>
-  );
-};
diff --git a/src/app/Shared/Services/Api.service.tsx b/src/app/Shared/Services/Api.service.tsx
index d20af36a3..a8833ef81 100644
--- a/src/app/Shared/Services/Api.service.tsx
+++ b/src/app/Shared/Services/Api.service.tsx
@@ -779,7 +779,7 @@ export class ApiService {
         map((response: AssetJwtResponse) => response.data.result.resourceUrl),
       )
       .subscribe((resourceUrl) => {
-        this.downloadFile(resourceUrl, `${recording.name}.report.html`, false);
+        this.downloadFile(resourceUrl, `${recording.name}.report.json`, false);
       });
   }
 
diff --git a/src/app/Shared/Services/Report.service.tsx b/src/app/Shared/Services/Report.service.tsx
index 463ccc3c4..56b11fcba 100644
--- a/src/app/Shared/Services/Report.service.tsx
+++ b/src/app/Shared/Services/Report.service.tsx
@@ -15,10 +15,10 @@
  */
 import { Notifications } from '@app/Notifications/Notifications';
 import { Base64 } from 'js-base64';
-import { Observable, from, of, throwError } from 'rxjs';
+import { Observable, from, throwError } from 'rxjs';
 import { fromFetch } from 'rxjs/fetch';
 import { concatMap, first, tap } from 'rxjs/operators';
-import { isActiveRecording, RecordingState, Recording } from './Api.service';
+import { isActiveRecording, Recording } from './Api.service';
 import { LoginService } from './Login.service';
 
 export class ReportService {
@@ -27,70 +27,7 @@ export class ReportService {
     private notifications: Notifications,
   ) {}
 
-  report(recording: Recording): Observable<string> {
-    if (!recording.reportUrl) {
-      return throwError(() => new Error('No recording report URL'));
-    }
-    const stored = sessionStorage.getItem(this.key(recording));
-    if (stored) {
-      return of(stored);
-    }
-    return this.login.getHeaders().pipe(
-      concatMap((headers) =>
-        fromFetch(recording.reportUrl, {
-          method: 'GET',
-          mode: 'cors',
-          credentials: 'include',
-          headers,
-        }),
-      ),
-      concatMap((resp) => {
-        if (resp.ok) {
-          return from(resp.text());
-        } else {
-          const ge: GenerationError = {
-            name: `Report Failure (${recording.name})`,
-            message: resp.statusText,
-            messageDetail: from(resp.text()),
-            status: resp.status,
-          };
-          throw ge;
-        }
-      }),
-      tap({
-        next: (report) => {
-          const isArchived = !isActiveRecording(recording);
-          const isActiveStopped = !isArchived && recording.state === RecordingState.STOPPED;
-          if (isArchived || isActiveStopped) {
-            try {
-              sessionStorage.setItem(this.key(recording), report);
-            } catch (err) {
-              if (isQuotaExceededError(err)) {
-                this.notifications.warning('Report Caching Failed', err.message);
-                this.delete(recording);
-              } else {
-                // see https://mmazzarolo.com/blog/2022-06-25-local-storage-status/
-                this.notifications.warning('Report Caching Failed', 'localStorage is not available');
-                this.delete(recording);
-              }
-            }
-          }
-        },
-        error: (err) => {
-          if (isGenerationError(err) && err.status >= 500) {
-            err.messageDetail.pipe(first()).subscribe((detail) => {
-              this.notifications.warning(`Report generation failure: ${detail}`);
-              sessionStorage.setItem(this.key(recording), `<p>${detail}</p>`);
-            });
-          } else {
-            this.notifications.danger(err.name, err.message);
-          }
-        },
-      }),
-    );
-  }
-
-  reportJson(recording: Recording, connectUrl: string): Observable<RuleEvaluation[]> {
+  reportJson(recording: Recording, connectUrl: string): Observable<AnalysisResult[]> {
     if (!recording.reportUrl) {
       return throwError(() => new Error('No recording report URL'));
     }
@@ -110,7 +47,7 @@ export class ReportService {
             resp
               .text()
               .then(JSON.parse)
-              .then((obj) => Object.values(obj) as RuleEvaluation[]),
+              .then((obj) => Object.values(obj) as AnalysisResult[]),
           );
         } else {
           const ge: GenerationError = {
@@ -192,12 +129,12 @@ export class ReportService {
 }
 
 export interface CachedReportValue {
-  report: RuleEvaluation[];
+  report: AnalysisResult[];
   timestamp: number;
 }
 
 // [topic, { ruleName, score, description, ... }}]
-export type CategorizedRuleEvaluations = [string, RuleEvaluation[]];
+export type CategorizedRuleEvaluations = [string, AnalysisResult[]];
 
 export type GenerationError = Error & {
   status: number;
@@ -229,11 +166,24 @@ export const isQuotaExceededError = (err: unknown): err is DOMException => {
   );
 };
 
-export interface RuleEvaluation {
+export interface AnalysisResult {
   name: string;
-  description: string;
-  score: number;
   topic: string;
+  score: number;
+  evaluation: Evaluation;
+}
+
+export interface Evaluation {
+  summary: string;
+  explanation: string;
+  solution: string;
+  suggestions: Suggestion[];
+}
+
+export interface Suggestion {
+  setting: string;
+  name: string;
+  value: string;
 }
 
 export enum AutomatedAnalysisScore {
diff --git a/src/app/utils/fakeData.ts b/src/app/utils/fakeData.ts
index d4a012748..e84c1d956 100644
--- a/src/app/utils/fakeData.ts
+++ b/src/app/utils/fakeData.ts
@@ -35,7 +35,7 @@ import {
   StoredCredential,
 } from '@app/Shared/Services/Api.service';
 import { LoginService } from '@app/Shared/Services/Login.service';
-import { CachedReportValue, ReportService, RuleEvaluation } from '@app/Shared/Services/Report.service';
+import { CachedReportValue, ReportService, AnalysisResult } from '@app/Shared/Services/Report.service';
 import { defaultServices, Services } from '@app/Shared/Services/Services';
 import { SettingsService } from '@app/Shared/Services/Settings.service';
 import { Target, TargetService } from '@app/Shared/Services/Target.service';
@@ -84,36 +84,91 @@ export const fakeAARecording: ActiveRecording = {
   maxAge: 0,
 };
 
-export const fakeEvaluations: RuleEvaluation[] = [
+export const fakeEvaluations: AnalysisResult[] = [
   {
     name: 'Passwords in Environment Variables',
-    description: 'The environment variables in the recording may contain passwords.',
     score: 100,
     topic: 'environment_variables',
+    evaluation: {
+      summary: 'passwords in env vars',
+      explanation: 'this might not be safe',
+      solution: 'remove passwords from env vars or turn off event that captures',
+      suggestions: [
+        {
+          name: 'fix the JVM flag',
+          setting: '-XX:something',
+          value: 'false',
+        },
+      ],
+    },
   },
   {
+    topic: 'classloading',
     name: 'Class Leak',
-    description: 'No classes with identical names have been loaded more times than the limit.',
     score: 0,
-    topic: 'classloading',
+    evaluation: {
+      summary: 'leaked classes',
+      explanation: 'classes were loaded and leaked',
+      solution: 'patch the hole',
+      suggestions: [
+        {
+          name: 'a setting change',
+          setting: 'setting',
+          value: 'value',
+        },
+      ],
+    },
   },
   {
+    topic: 'classloading',
     name: 'Class Loading Pressure',
-    description: 'No significant time was spent loading new classes during this recording.',
     score: 0,
-    topic: 'classloading',
+    evaluation: {
+      summary: 'too much loading pressure',
+      explanation: 'lots of classloading slowing things down',
+      solution: 'do class load lookups later or less dynamically',
+      suggestions: [
+        {
+          name: 'classloader setting',
+          setting: 'class loader setting',
+          value: 'less pressure',
+        },
+      ],
+    },
   },
   {
+    topic: 'jvm_information',
     name: 'Discouraged Management Agent Settings',
-    description: 'Insecure management agent settings: SSL disabled.',
     score: 50,
-    topic: 'jvm_information',
+    evaluation: {
+      summary: 'bad settings set',
+      explanation: 'these settings can cause problems',
+      solution: 'set other settings',
+      suggestions: [
+        {
+          name: 'management setting change',
+          setting: 'management',
+          value: 'low',
+        },
+      ],
+    },
   },
   {
+    topic: 'exceptions',
     name: 'Thrown Exceptions',
-    description: 'The program generated 31.8 exceptions per second during 1.006 s starting at 1/23/45, 6:78:90 AM.',
     score: 0.2,
-    topic: 'exceptions',
+    evaluation: {
+      summary: 'many exceptions thrown which is slow',
+      explanation: 'exception processing is slower than normal code execution',
+      solution: 'stop throwing so much',
+      suggestions: [
+        {
+          name: 'rewrite code',
+          setting: 'exceptions',
+          value: 'fewer',
+        },
+      ],
+    },
   },
 ];
 
@@ -133,7 +188,7 @@ class FakeReportService extends ReportService {
     super(login, notifications);
   }
 
-  reportJson(_recording: Recording, _connectUrl: string): Observable<RuleEvaluation[]> {
+  reportJson(_recording: Recording, _connectUrl: string): Observable<AnalysisResult[]> {
     return of(fakeEvaluations);
   }
 
diff --git a/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.test.tsx b/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.test.tsx
index bece18fa3..5b5e33e57 100644
--- a/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.test.tsx
+++ b/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.test.tsx
@@ -24,7 +24,7 @@ import {
   CachedReportValue,
   FAILED_REPORT_MESSAGE,
   NO_RECORDINGS_MESSAGE,
-  RuleEvaluation,
+  AnalysisResult,
 } from '@app/Shared/Services/Report.service';
 import { defaultServices } from '@app/Shared/Services/Services';
 import { automatedAnalysisConfigToRecordingAttributes } from '@app/Shared/Services/Settings.service';
@@ -50,37 +50,81 @@ const mockEmptyCachedReport: CachedReportValue = {
   timestamp: 0,
 };
 
-const mockRuleEvaluation1: RuleEvaluation = {
+const mockRuleEvaluation1: AnalysisResult = {
+  topic: 'myTopic',
   name: 'rule1',
-  description: 'rule1 description',
   score: 100,
-  topic: 'myTopic',
+  evaluation: {
+    summary: 'rule1 summary',
+    explanation: 'rule1 explanation',
+    solution: 'rule1 solution',
+    suggestions: [
+      {
+        name: 'rule1 suggestion1 name',
+        setting: 'rule1 suggestion1 setting',
+        value: 'rule1 suggestion1 value',
+      },
+    ],
+  },
 };
 
-const mockRuleEvaluation2: RuleEvaluation = {
+const mockRuleEvaluation2: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule2',
-  description: 'rule2 description',
   score: 0,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'rule2 summary',
+    explanation: 'rule2 explanation',
+    solution: 'rule2 solution',
+    suggestions: [
+      {
+        name: 'rule2 suggestion1 name',
+        setting: 'rule2 suggestion1 setting',
+        value: 'rule2 suggestion1 value',
+      },
+    ],
+  },
 };
 
-const mockRuleEvaluation3: RuleEvaluation = {
+const mockRuleEvaluation3: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule3',
-  description: 'rule3 description',
   score: 55,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'rule3 summary',
+    explanation: 'rule3 explanation',
+    solution: 'rule3 solution',
+    suggestions: [
+      {
+        name: 'rule3 suggestion1 name',
+        setting: 'rule3 suggestion1 setting',
+        value: 'rule3 suggestion1 value',
+      },
+    ],
+  },
 };
 
-const mockNaRuleEvaluation: RuleEvaluation = {
+const mockNaRuleEvaluation: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'N/A rule',
-  description: 'N/A description',
   score: -1,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'NArule summary',
+    explanation: 'NArule explanation',
+    solution: 'NArule solution',
+    suggestions: [
+      {
+        name: 'NArule suggestion1 name',
+        setting: 'NArule suggestion1 setting',
+        value: 'NArule suggestion1 value',
+      },
+    ],
+  },
 };
 
-const mockEvaluations: RuleEvaluation[] = [mockRuleEvaluation1];
+const mockEvaluations: AnalysisResult[] = [mockRuleEvaluation1];
 
-const mockFilteredEvaluations: RuleEvaluation[] = [
+const mockFilteredEvaluations: AnalysisResult[] = [
   mockRuleEvaluation1,
   mockRuleEvaluation2,
   mockRuleEvaluation3,
diff --git a/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.test.tsx b/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.test.tsx
index 0f3eeac33..f5fbbe62c 100644
--- a/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.test.tsx
+++ b/src/test/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList.test.tsx
@@ -16,44 +16,70 @@
 import { AutomatedAnalysisCardList } from '@app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCardList';
 import { NotificationsContext, NotificationsInstance } from '@app/Notifications/Notifications';
 import { store } from '@app/Shared/Redux/ReduxStore';
-import { CategorizedRuleEvaluations, RuleEvaluation } from '@app/Shared/Services/Report.service';
+import { CategorizedRuleEvaluations, AnalysisResult } from '@app/Shared/Services/Report.service';
 import { defaultServices, ServiceContext } from '@app/Shared/Services/Services';
 import React from 'react';
 import { Provider } from 'react-redux';
 import renderer, { act } from 'react-test-renderer';
 import '../../Common';
 
-const mockRuleEvaluation1: RuleEvaluation = {
+const mockRuleEvaluation1: AnalysisResult = {
+  topic: 'myTopic',
   name: 'rule1',
-  description: 'rule1 description',
   score: 100,
-  topic: 'myTopic',
+  evaluation: {
+    summary: 'first thing happened',
+    explanation: 'first reason',
+    solution: 'first solution',
+    suggestions: [
+      {
+        setting: 'setting1',
+        name: 'name1',
+        value: 'value1',
+      },
+    ],
+  },
 };
 
-const mockRuleEvaluation2: RuleEvaluation = {
+const mockRuleEvaluation2: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule2',
-  description: 'rule2 description',
   score: 0,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'second thing happened',
+    explanation: 'second reason',
+    solution: 'second solution',
+    suggestions: [],
+  },
 };
 
-const mockRuleEvaluation3: RuleEvaluation = {
+const mockRuleEvaluation3: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule3',
-  description: 'rule3 description',
   score: 55,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'third thing happened',
+    explanation: 'third reason',
+    solution: 'third solution',
+    suggestions: [],
+  },
 };
 
-const mockNaRuleEvaluation: RuleEvaluation = {
+const mockNaRuleEvaluation: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'N/A rule',
-  description: 'N/A description',
   score: -1,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'fourth thing happened',
+    explanation: 'fourth reason',
+    solution: 'fourth solution',
+    suggestions: [],
+  },
 };
 
-const mockEvaluations1: RuleEvaluation[] = [mockRuleEvaluation1];
+const mockEvaluations1: AnalysisResult[] = [mockRuleEvaluation1];
 
-const mockEvaluations2: RuleEvaluation[] = [mockRuleEvaluation2, mockRuleEvaluation3, mockNaRuleEvaluation];
+const mockEvaluations2: AnalysisResult[] = [mockRuleEvaluation2, mockRuleEvaluation3, mockNaRuleEvaluation];
 
 const mockCategorizedEvaluations: CategorizedRuleEvaluations[] = [
   [mockRuleEvaluation1.topic, mockEvaluations1],
diff --git a/src/test/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.test.tsx b/src/test/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.test.tsx
index b3a003d23..bfeaaf366 100644
--- a/src/test/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.test.tsx
+++ b/src/test/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.test.tsx
@@ -15,37 +15,81 @@
  */
 
 import { ClickableAutomatedAnalysisLabel } from '@app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel';
-import { RuleEvaluation } from '@app/Shared/Services/Report.service';
+import { AnalysisResult } from '@app/Shared/Services/Report.service';
 import { act, cleanup, screen, within } from '@testing-library/react';
 import React from 'react';
 import { renderDefault } from '../../Common';
 
-const mockRuleEvaluation1: RuleEvaluation = {
+const mockRuleEvaluation1: AnalysisResult = {
+  topic: 'myTopic',
   name: 'rule1',
-  description: 'rule1 description',
   score: 100,
-  topic: 'myTopic',
+  evaluation: {
+    summary: 'rule1 summary',
+    explanation: 'rule1 explanation',
+    solution: 'rule1 solution',
+    suggestions: [
+      {
+        name: 'rule1 suggestion1',
+        setting: 'setting1',
+        value: 'value1',
+      },
+    ],
+  },
 };
 
-const mockRuleEvaluation2: RuleEvaluation = {
+const mockRuleEvaluation2: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule2',
-  description: 'rule2 description',
   score: 55,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'rule2 summary',
+    explanation: 'rule2 explanation',
+    solution: 'rule2 solution',
+    suggestions: [
+      {
+        name: 'rule2 suggestion1',
+        setting: 'setting2',
+        value: 'value2',
+      },
+    ],
+  },
 };
 
-const mockRuleEvaluation3: RuleEvaluation = {
+const mockRuleEvaluation3: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule3',
-  description: 'rule3 description',
   score: 0,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'rule3 summary',
+    explanation: 'rule3 explanation',
+    solution: 'rule3 solution',
+    suggestions: [
+      {
+        name: 'rule3 suggestion1',
+        setting: 'setting3',
+        value: 'value3',
+      },
+    ],
+  },
 };
 
-const mockNaRuleEvaluation: RuleEvaluation = {
+const mockNaRuleEvaluation: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'N/A rule',
-  description: 'N/A description',
   score: -1,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'rule4 summary',
+    explanation: 'rule4 explanation',
+    solution: 'rule4 solution',
+    suggestions: [
+      {
+        name: 'rule4 suggestion1',
+        setting: 'setting4',
+        value: 'value4',
+      },
+    ],
+  },
 };
 
 describe('<ClickableAutomatedAnalysisLabel />', () => {
@@ -73,8 +117,22 @@ describe('<ClickableAutomatedAnalysisLabel />', () => {
     expect(closeButton).toBeInTheDocument();
 
     expect(document.getElementsByClassName('pf-m-danger').item(0)).toBeInTheDocument();
-    expect(screen.getByText(mockRuleEvaluation1.description)).toBeInTheDocument();
-    expect(screen.getByText(String(mockRuleEvaluation1.score) + '.0')).toBeInTheDocument();
+
+    const summary = screen.getByText(mockRuleEvaluation1.evaluation.summary);
+    const explanation = screen.getByText(mockRuleEvaluation1.evaluation.explanation);
+    const solution = screen.getByText(mockRuleEvaluation1.evaluation.solution);
+    const setting = screen.getByText(mockRuleEvaluation1.evaluation.suggestions[0].setting);
+    const keyval = screen.getByText(
+      `${mockRuleEvaluation1.evaluation.suggestions[0].name}=${mockRuleEvaluation1.evaluation.suggestions[0].value}`,
+    );
+    const score = screen.getByText(String(mockRuleEvaluation1.score) + '.0');
+
+    expect(summary).toBeInTheDocument();
+    expect(explanation).toBeInTheDocument();
+    expect(solution).toBeInTheDocument();
+    expect(setting).toBeInTheDocument();
+    expect(keyval).toBeInTheDocument();
+    expect(score).toBeInTheDocument();
     const heading = screen.getByRole('heading', {
       name: /danger rule1/i,
     });
@@ -82,8 +140,12 @@ describe('<ClickableAutomatedAnalysisLabel />', () => {
 
     await user.click(screen.getAllByText(mockRuleEvaluation1.name)[0]);
 
-    expect(screen.queryByText(mockRuleEvaluation1.description)).not.toBeInTheDocument();
-    expect(screen.queryByText(String(mockRuleEvaluation1.score) + '.0')).not.toBeInTheDocument();
+    expect(summary).not.toBeInTheDocument();
+    expect(explanation).not.toBeInTheDocument();
+    expect(solution).not.toBeInTheDocument();
+    expect(setting).not.toBeInTheDocument();
+    expect(keyval).not.toBeInTheDocument();
+    expect(score).not.toBeInTheDocument();
     expect(closeButton).not.toBeInTheDocument();
   });
 
@@ -103,8 +165,22 @@ describe('<ClickableAutomatedAnalysisLabel />', () => {
     expect(closeButton).toBeInTheDocument();
 
     expect(document.getElementsByClassName('pf-m-warning').item(0)).toBeInTheDocument();
-    expect(screen.getByText(mockRuleEvaluation2.description)).toBeInTheDocument();
-    expect(screen.getByText(String(mockRuleEvaluation2.score) + '.0')).toBeInTheDocument();
+
+    const summary = screen.getByText(mockRuleEvaluation2.evaluation.summary);
+    const explanation = screen.getByText(mockRuleEvaluation2.evaluation.explanation);
+    const solution = screen.getByText(mockRuleEvaluation2.evaluation.solution);
+    const setting = screen.getByText(mockRuleEvaluation2.evaluation.suggestions[0].setting);
+    const keyval = screen.getByText(
+      `${mockRuleEvaluation2.evaluation.suggestions[0].name}=${mockRuleEvaluation2.evaluation.suggestions[0].value}`,
+    );
+    const score = screen.getByText(String(mockRuleEvaluation2.score) + '.0');
+
+    expect(summary).toBeInTheDocument();
+    expect(explanation).toBeInTheDocument();
+    expect(solution).toBeInTheDocument();
+    expect(setting).toBeInTheDocument();
+    expect(keyval).toBeInTheDocument();
+    expect(score).toBeInTheDocument();
     const heading = screen.getByRole('heading', {
       name: /warning rule2/i,
     });
@@ -112,8 +188,13 @@ describe('<ClickableAutomatedAnalysisLabel />', () => {
 
     await user.click(screen.getAllByText(mockRuleEvaluation2.name)[0]);
 
-    expect(screen.queryByText(mockRuleEvaluation2.description)).not.toBeInTheDocument();
-    expect(screen.queryByText(String(mockRuleEvaluation2.score) + '.0')).not.toBeInTheDocument();
+    expect(summary).not.toBeInTheDocument();
+    expect(explanation).not.toBeInTheDocument();
+    expect(solution).not.toBeInTheDocument();
+    expect(setting).not.toBeInTheDocument();
+    expect(keyval).not.toBeInTheDocument();
+    expect(score).not.toBeInTheDocument();
+
     expect(closeButton).not.toBeInTheDocument();
   });
 
@@ -132,8 +213,22 @@ describe('<ClickableAutomatedAnalysisLabel />', () => {
     expect(closeButton).toBeInTheDocument();
 
     expect(document.getElementsByClassName('pf-m-success').item(0)).toBeInTheDocument();
-    expect(screen.getByText(mockRuleEvaluation3.description)).toBeInTheDocument();
-    expect(screen.getByText(String(mockRuleEvaluation3.score) + '.0')).toBeInTheDocument();
+
+    const summary = screen.getByText(mockRuleEvaluation3.evaluation.summary);
+    const explanation = screen.getByText(mockRuleEvaluation3.evaluation.explanation);
+    const solution = screen.getByText(mockRuleEvaluation3.evaluation.solution);
+    const setting = screen.getByText(mockRuleEvaluation3.evaluation.suggestions[0].setting);
+    const keyval = screen.getByText(
+      `${mockRuleEvaluation3.evaluation.suggestions[0].name}=${mockRuleEvaluation3.evaluation.suggestions[0].value}`,
+    );
+    const score = screen.getByText(String(mockRuleEvaluation3.score) + '.0');
+
+    expect(summary).toBeInTheDocument();
+    expect(explanation).toBeInTheDocument();
+    expect(solution).toBeInTheDocument();
+    expect(setting).toBeInTheDocument();
+    expect(keyval).toBeInTheDocument();
+    expect(score).toBeInTheDocument();
     const heading = screen.getByRole('heading', {
       name: /success rule3/i,
     });
@@ -141,8 +236,13 @@ describe('<ClickableAutomatedAnalysisLabel />', () => {
 
     await user.click(screen.getAllByText(mockRuleEvaluation3.name)[0]);
 
-    expect(screen.queryByText(mockRuleEvaluation3.description)).not.toBeInTheDocument();
-    expect(screen.queryByText(String(mockRuleEvaluation3.score) + '.0')).not.toBeInTheDocument();
+    expect(summary).not.toBeInTheDocument();
+    expect(explanation).not.toBeInTheDocument();
+    expect(solution).not.toBeInTheDocument();
+    expect(setting).not.toBeInTheDocument();
+    expect(keyval).not.toBeInTheDocument();
+    expect(score).not.toBeInTheDocument();
+
     expect(closeButton).not.toBeInTheDocument();
   });
 
@@ -160,9 +260,21 @@ describe('<ClickableAutomatedAnalysisLabel />', () => {
 
     expect(closeButton).toBeInTheDocument();
 
-    expect(document.getElementsByClassName('pf-m-default').item(0)).toBeInTheDocument();
-    expect(screen.getByText(mockNaRuleEvaluation.description)).toBeInTheDocument();
-    expect(screen.getByText('N/A')).toBeInTheDocument();
+    const summary = screen.getByText(mockNaRuleEvaluation.evaluation.summary);
+    const explanation = screen.getByText(mockNaRuleEvaluation.evaluation.explanation);
+    const solution = screen.getByText(mockNaRuleEvaluation.evaluation.solution);
+    const setting = screen.getByText(mockNaRuleEvaluation.evaluation.suggestions[0].setting);
+    const keyval = screen.getByText(
+      `${mockNaRuleEvaluation.evaluation.suggestions[0].name}=${mockNaRuleEvaluation.evaluation.suggestions[0].value}`,
+    );
+    const score = screen.getByText('N/A');
+
+    expect(summary).toBeInTheDocument();
+    expect(explanation).toBeInTheDocument();
+    expect(solution).toBeInTheDocument();
+    expect(setting).toBeInTheDocument();
+    expect(keyval).toBeInTheDocument();
+    expect(score).toBeInTheDocument();
     const heading = screen.getByRole('heading', {
       name: /default /i,
     });
@@ -170,8 +282,13 @@ describe('<ClickableAutomatedAnalysisLabel />', () => {
 
     await user.click(screen.getAllByText(mockNaRuleEvaluation.name)[0]);
 
-    expect(screen.queryByText(mockNaRuleEvaluation.description)).not.toBeInTheDocument();
-    expect(screen.queryByText('N/A')).not.toBeInTheDocument();
+    expect(summary).not.toBeInTheDocument();
+    expect(explanation).not.toBeInTheDocument();
+    expect(solution).not.toBeInTheDocument();
+    expect(setting).not.toBeInTheDocument();
+    expect(keyval).not.toBeInTheDocument();
+    expect(score).not.toBeInTheDocument();
+
     expect(closeButton).not.toBeInTheDocument();
   });
 });
diff --git a/src/test/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisNameFilter.test.tsx b/src/test/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisNameFilter.test.tsx
index 92b9b0495..eea84f623 100644
--- a/src/test/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisNameFilter.test.tsx
+++ b/src/test/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisNameFilter.test.tsx
@@ -15,42 +15,86 @@
  */
 
 import { AutomatedAnalysisNameFilter } from '@app/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisNameFilter';
-import { CategorizedRuleEvaluations, RuleEvaluation } from '@app/Shared/Services/Report.service';
+import { CategorizedRuleEvaluations, AnalysisResult } from '@app/Shared/Services/Report.service';
 import { cleanup, screen, within } from '@testing-library/react';
 import React from 'react';
 import { renderDefault } from '../../../Common';
 
-const mockRuleEvaluation1: RuleEvaluation = {
+const mockRuleEvaluation1: AnalysisResult = {
+  topic: 'myTopic',
   name: 'rule1',
-  description: 'rule1 description',
   score: 100,
-  topic: 'myTopic',
+  evaluation: {
+    summary: 'rule1 summary',
+    explanation: 'rule1 explanation',
+    solution: 'rule1 solution',
+    suggestions: [
+      {
+        name: 'rule1 suggestion 1 name',
+        setting: 'rule1 suggestion 1 setting',
+        value: 'rule1 suggestion 1 value',
+      },
+    ],
+  },
 };
 
-const mockRuleEvaluation2: RuleEvaluation = {
+const mockRuleEvaluation2: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule2',
-  description: 'rule2 description',
   score: 0,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'rule2 summary',
+    explanation: 'rule2 explanation',
+    solution: 'rule2 solution',
+    suggestions: [
+      {
+        name: 'rule2 suggestion 1 name',
+        setting: 'rule2 suggestion 1 setting',
+        value: 'rule2 suggestion 1 value',
+      },
+    ],
+  },
 };
 
-const mockRuleEvaluation3: RuleEvaluation = {
+const mockRuleEvaluation3: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule3',
-  description: 'rule3 description',
   score: 55,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'rule3 summary',
+    explanation: 'rule3 explanation',
+    solution: 'rule3 solution',
+    suggestions: [
+      {
+        name: 'rule3 suggestion 1 name',
+        setting: 'rule3 suggestion 1 setting',
+        value: 'rule3 suggestion 1 value',
+      },
+    ],
+  },
 };
 
-const mockNaRuleEvaluation: RuleEvaluation = {
+const mockNaRuleEvaluation: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'N/A rule',
-  description: 'N/A description',
   score: -1,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'NArule summary',
+    explanation: 'NArule explanation',
+    solution: 'NArule solution',
+    suggestions: [
+      {
+        name: 'NArule suggestion 1 name',
+        setting: 'NArule suggestion 1 setting',
+        value: 'NArule suggestion 1 value',
+      },
+    ],
+  },
 };
 
-const mockEvaluations1: RuleEvaluation[] = [mockRuleEvaluation1];
+const mockEvaluations1: AnalysisResult[] = [mockRuleEvaluation1];
 
-const mockEvaluations2: RuleEvaluation[] = [mockRuleEvaluation2, mockRuleEvaluation3, mockNaRuleEvaluation];
+const mockEvaluations2: AnalysisResult[] = [mockRuleEvaluation2, mockRuleEvaluation3, mockNaRuleEvaluation];
 
 const mockCategorizedEvaluations: CategorizedRuleEvaluations[] = [
   [mockRuleEvaluation1.topic, mockEvaluations1],
diff --git a/src/test/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisTopicFilter.test.tsx b/src/test/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisTopicFilter.test.tsx
index 048be213b..b596a12d4 100644
--- a/src/test/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisTopicFilter.test.tsx
+++ b/src/test/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisTopicFilter.test.tsx
@@ -15,42 +15,86 @@
  */
 
 import { AutomatedAnalysisTopicFilter } from '@app/Dashboard/AutomatedAnalysis/Filters/AutomatedAnalysisTopicFilter';
-import { CategorizedRuleEvaluations, RuleEvaluation } from '@app/Shared/Services/Report.service';
+import { CategorizedRuleEvaluations, AnalysisResult } from '@app/Shared/Services/Report.service';
 import { cleanup, screen, within } from '@testing-library/react';
 import React from 'react';
 import { renderDefault } from '../../../Common';
 
-const mockRuleEvaluation1: RuleEvaluation = {
+const mockRuleEvaluation1: AnalysisResult = {
+  topic: 'myTopic',
   name: 'rule1',
-  description: 'rule1 description',
   score: 100,
-  topic: 'myTopic',
+  evaluation: {
+    summary: 'rule1 summary',
+    explanation: 'rule1 explanation',
+    solution: 'rule1 solution',
+    suggestions: [
+      {
+        name: 'rule1 suggestion 1 name',
+        setting: 'rule1 suggestion 1 setting',
+        value: 'rule1 suggestion 1 value',
+      },
+    ],
+  },
 };
 
-const mockRuleEvaluation2: RuleEvaluation = {
+const mockRuleEvaluation2: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule2',
-  description: 'rule2 description',
   score: 0,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'rule2 summary',
+    explanation: 'rule2 explanation',
+    solution: 'rule2 solution',
+    suggestions: [
+      {
+        name: 'rule2 suggestion 1 name',
+        setting: 'rule2 suggestion 1 setting',
+        value: 'rule2 suggestion 1 value',
+      },
+    ],
+  },
 };
 
-const mockRuleEvaluation3: RuleEvaluation = {
+const mockRuleEvaluation3: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'rule3',
-  description: 'rule3 description',
   score: 55,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'rule3 summary',
+    explanation: 'rule3 explanation',
+    solution: 'rule3 solution',
+    suggestions: [
+      {
+        name: 'rule3 suggestion 1 name',
+        setting: 'rule3 suggestion 1 setting',
+        value: 'rule3 suggestion 1 value',
+      },
+    ],
+  },
 };
 
-const mockNaRuleEvaluation: RuleEvaluation = {
+const mockNaRuleEvaluation: AnalysisResult = {
+  topic: 'fakeTopic',
   name: 'N/A rule',
-  description: 'N/A description',
   score: -1,
-  topic: 'fakeTopic',
+  evaluation: {
+    summary: 'NArule summary',
+    explanation: 'NArule explanation',
+    solution: 'NArule solution',
+    suggestions: [
+      {
+        name: 'NArule suggestion 1 name',
+        setting: 'NArule suggestion 1 setting',
+        value: 'NArule suggestion 1 value',
+      },
+    ],
+  },
 };
 
-const mockEvaluations1: RuleEvaluation[] = [mockRuleEvaluation1];
+const mockEvaluations1: AnalysisResult[] = [mockRuleEvaluation1];
 
-const mockEvaluations2: RuleEvaluation[] = [mockRuleEvaluation2, mockRuleEvaluation3, mockNaRuleEvaluation];
+const mockEvaluations2: AnalysisResult[] = [mockRuleEvaluation2, mockRuleEvaluation3, mockNaRuleEvaluation];
 
 const mockCategorizedEvaluations: CategorizedRuleEvaluations[] = [
   [mockRuleEvaluation1.topic, mockEvaluations1],
diff --git a/src/test/Dashboard/AutomatedAnalysis/__snapshots__/AutomatedAnalysisCardList.test.tsx.snap b/src/test/Dashboard/AutomatedAnalysis/__snapshots__/AutomatedAnalysisCardList.test.tsx.snap
index c4a3c1b34..8e0209171 100644
--- a/src/test/Dashboard/AutomatedAnalysis/__snapshots__/AutomatedAnalysisCardList.test.tsx.snap
+++ b/src/test/Dashboard/AutomatedAnalysis/__snapshots__/AutomatedAnalysisCardList.test.tsx.snap
@@ -188,12 +188,114 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
             data-label="Description"
             onMouseEnter={[Function]}
           >
-            <p
-              style={Object {}}
-            >
-              
-              rule1 description
-            </p>
+            <div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-1"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Summary
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-1"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    first thing happened
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-2"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Explanation
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-2"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    first reason
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-3"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Solution
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-3"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    first solution
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-4"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Suggestions
+                  </h5>
+                  <div
+                    className="pf-l-stack"
+                  >
+                    <div
+                      className="pf-l-stack__item"
+                    >
+                      <h6
+                        className="pf-c-title pf-m-md"
+                        data-ouia-component-id="OUIA-Generated-Title-5"
+                        data-ouia-component-type="PF4/Title"
+                        data-ouia-safe={true}
+                      >
+                        setting1
+                      </h6>
+                      <span
+                        className="pf-c-label"
+                      >
+                        <span
+                          className="pf-c-label__content"
+                        >
+                          name1
+                          =
+                          value1
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </span>
+                <br />
+              </div>
+            </div>
           </td>
         </tr>
         <tr
@@ -256,12 +358,75 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
             data-label="Description"
             onMouseEnter={[Function]}
           >
-            <p
-              style={Object {}}
-            >
-              
-              rule3 description
-            </p>
+            <div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-6"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Summary
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-4"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    third thing happened
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-7"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Explanation
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-5"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    third reason
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-8"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Solution
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-6"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    third solution
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div />
+            </div>
           </td>
         </tr>
         <tr
@@ -324,12 +489,75 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
             data-label="Description"
             onMouseEnter={[Function]}
           >
-            <p
-              style={Object {}}
-            >
-              
-              rule2 description
-            </p>
+            <div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-9"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Summary
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-7"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    second thing happened
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-10"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Explanation
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-8"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    second reason
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-11"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Solution
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-9"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    second solution
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div />
+            </div>
           </td>
         </tr>
         <tr
@@ -392,12 +620,75 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
             data-label="Description"
             onMouseEnter={[Function]}
           >
-            <p
-              style={Object {}}
-            >
-              
-              N/A description
-            </p>
+            <div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-12"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Summary
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-10"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    fourth thing happened
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-13"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Explanation
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-11"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    fourth reason
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div>
+                <span>
+                  <h5
+                    className="pf-c-title pf-m-md"
+                    data-ouia-component-id="OUIA-Generated-Title-14"
+                    data-ouia-component-type="PF4/Title"
+                    data-ouia-safe={true}
+                  >
+                    Solution
+                  </h5>
+                  <p
+                    className=""
+                    data-ouia-component-id="OUIA-Generated-Text-12"
+                    data-ouia-component-type="PF4/Text"
+                    data-ouia-safe={true}
+                    data-pf-content={true}
+                  >
+                    fourth solution
+                  </p>
+                </span>
+                <br />
+              </div>
+              <div />
+            </div>
           </td>
         </tr>
       </tbody>
diff --git a/src/test/Recordings/ActiveRecordingsTable.test.tsx b/src/test/Recordings/ActiveRecordingsTable.test.tsx
index b9b041dcb..cf9475335 100644
--- a/src/test/Recordings/ActiveRecordingsTable.test.tsx
+++ b/src/test/Recordings/ActiveRecordingsTable.test.tsx
@@ -443,22 +443,6 @@ describe('<ActiveRecordingsTable />', () => {
     expect(downloadRequestSpy).toBeCalledWith(mockRecording);
   });
 
-  it('displays the automated analysis report when View Report is clicked', async () => {
-    const { user } = renderWithServiceContextAndReduxStoreWithRouter(<ActiveRecordingsTable archiveEnabled={true} />, {
-      preloadState: preloadedState,
-      history: history,
-    });
-
-    await act(async () => {
-      await user.click(within(screen.getByLabelText(`${mockRecording.name}-actions`)).getByLabelText('Actions'));
-    });
-    await user.click(screen.getByText('View Report ...'));
-
-    const reportRequestSpy = jest.spyOn(defaultServices.api, 'downloadReport');
-
-    expect(reportRequestSpy).toHaveBeenCalledTimes(1);
-  });
-
   it('uploads a recording to Grafana when View in Grafana is clicked', async () => {
     const { user } = renderWithServiceContextAndReduxStoreWithRouter(<ActiveRecordingsTable archiveEnabled={true} />, {
       preloadState: preloadedState,
diff --git a/src/test/Recordings/ArchivedRecordingsTable.test.tsx b/src/test/Recordings/ArchivedRecordingsTable.test.tsx
index 4e156f181..3f2ed83d3 100644
--- a/src/test/Recordings/ArchivedRecordingsTable.test.tsx
+++ b/src/test/Recordings/ArchivedRecordingsTable.test.tsx
@@ -392,25 +392,6 @@ describe('<ArchivedRecordingsTable />', () => {
     expect(downloadRequestSpy).toBeCalledWith(mockRecording);
   });
 
-  it('displays the automated analysis report when View Report is clicked', async () => {
-    const { user } = renderWithServiceContextAndReduxStoreWithRouter(
-      <ArchivedRecordingsTable target={of(mockTarget)} isUploadsTable={false} isNestedTable={false} />,
-      {
-        preloadState: preloadedState,
-        history: history,
-      },
-    );
-
-    await tlr.act(async () => {
-      await user.click(within(screen.getByLabelText(`${mockRecording.name}-actions`)).getByLabelText('Actions'));
-    });
-    await user.click(screen.getByText('View Report ...'));
-
-    const reportRequestSpy = jest.spyOn(defaultServices.api, 'downloadReport');
-
-    expect(reportRequestSpy).toHaveBeenCalledTimes(1);
-  });
-
   it('uploads a recording to Grafana when View in Grafana is clicked', async () => {
     const { user } = renderWithServiceContextAndReduxStoreWithRouter(
       <ArchivedRecordingsTable target={of(mockTarget)} isUploadsTable={false} isNestedTable={false} />,