Skip to content

Commit

Permalink
fix(dashboard): fixup Automated Analysis Card (#968)
Browse files Browse the repository at this point in the history
* fix aa result icons as well

Signed-off-by: Max Cao <macao@redhat.com>

* revert directoryName field

Signed-off-by: Max Cao <macao@redhat.com>

* summary and explanation, change description wrapping to breakWord

Signed-off-by: Max Cao <macao@redhat.com>

* remove summary on N/A scores

Signed-off-by: Max Cao <macao@redhat.com>

* update snapshot

Signed-off-by: Max Cao <macao@redhat.com>

* split on double newlines

Signed-off-by: Max Cao <macao@redhat.com>

* snapshots, eslint

Signed-off-by: Max Cao <macao@redhat.com>

---------

Signed-off-by: Max Cao <macao@redhat.com>
(cherry picked from commit 8147b49)
  • Loading branch information
maxcao13 authored and mergify[bot] committed Apr 21, 2023
1 parent 772575f commit 6fe930d
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ import {
} from '@patternfly/react-table';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import { transformAADescription } from '../dashboard-utils';

export interface AutomatedAnalysisCardListProps {
evaluations: CategorizedRuleEvaluations[];
Expand Down Expand Up @@ -141,14 +142,14 @@ export const AutomatedAnalysisCardList: React.FC<AutomatedAnalysisCardListProps>
<Th modifier="wrap" sort={getSortParams(1)}>
{t('SCORE', { ns: 'common' })}
</Th>
<Th modifier="wrap">{t('DESCRIPTION', { ns: 'common' })}</Th>
<Th modifier="truncate">{t('DESCRIPTION', { ns: 'common' })}</Th>
</Tr>
</Thead>
<Tbody>
{flatFiltered.map((evaluation) => {
return (
<Tr key={evaluation.name}>
<Td dataLabel={t('NAME', { ns: 'common' })} width={20}>
<Td dataLabel={t('NAME', { ns: 'common' })} width={10}>
{evaluation.name}
</Td>
<Td dataLabel={t('SCORE', { ns: 'common' })} modifier="wrap">
Expand All @@ -161,7 +162,9 @@ export const AutomatedAnalysisCardList: React.FC<AutomatedAnalysisCardListProps>
<FlexItem>{icon(evaluation.score)}</FlexItem>
</Flex>
</Td>
<Td dataLabel={t('DESCRIPTION', { ns: 'common' })}>{evaluation.description}</Td>
<Td modifier="breakWord" dataLabel={t('DESCRIPTION', { ns: 'common' })}>
{transformAADescription(evaluation.description)}
</Td>
</Tr>
);
})}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,12 @@
import { AutomatedAnalysisScore, RuleEvaluation } from '@app/Shared/Services/Report.service';
import { portalRoot } from '@app/utils/utils';
import { Label, LabelProps, Popover } from '@patternfly/react-core';
import { InfoCircleIcon } from '@patternfly/react-icons';
import { CheckCircleIcon, ExclamationCircleIcon, InfoCircleIcon, WarningTriangleIcon } from '@patternfly/react-icons';
import { css } from '@patternfly/react-styles';
import popoverStyles from '@patternfly/react-styles/css/components/Popover/popover';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { transformAADescription } from '../dashboard-utils';

export interface ClickableAutomatedAnalysisLabelProps {
label: RuleEvaluation;
Expand Down Expand Up @@ -92,6 +93,18 @@ export const ClickableAutomatedAnalysisLabel: React.FunctionComponent<ClickableA
: 'danger';
}, [label.score]);

const icon = React.useMemo(() => {
return label.score == AutomatedAnalysisScore.NA_SCORE ? (
<InfoCircleIcon />
) : label.score < AutomatedAnalysisScore.ORANGE_SCORE_THRESHOLD ? (
<CheckCircleIcon />
) : label.score < AutomatedAnalysisScore.RED_SCORE_THRESHOLD ? (
<WarningTriangleIcon />
) : (
<ExclamationCircleIcon />
);
}, [label.score]);

return (
<Popover
aria-label={t('ClickableAutomatedAnalysisLabel.ARIA_LABELS.POPOVER')}
Expand All @@ -110,14 +123,14 @@ export const ClickableAutomatedAnalysisLabel: React.FunctionComponent<ClickableA
<p className={css(alertStyle[alertPopoverVariant], `${clickableAutomatedAnalysisKey}-popover-body-score`)}>
{label.score == AutomatedAnalysisScore.NA_SCORE ? 'N/A' : label.score.toFixed(1)}
</p>
<p>{label.description}</p>
{transformAADescription(label.description)}
</div>
}
appendTo={portalRoot}
>
<Label
aria-label={label.name}
icon={<InfoCircleIcon />}
icon={icon}
color={colorScheme}
className={isHoveredOrFocused ? `clickable-label-hovered` : ''}
onMouseEnter={handleHoveredOrFocused}
Expand Down
26 changes: 25 additions & 1 deletion src/app/Dashboard/dashboard-utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,6 @@ export interface PropControlExtra {
max?: number;
[key: string]: any;
}
/* eslint-enable @typescript-eslint/no-explicit-any */

export interface PropControl {
name: string;
Expand All @@ -409,6 +408,7 @@ export interface PropControl {
defaultValue: any;
extras?: PropControlExtra;
}
/* eslint-enable @typescript-eslint/no-explicit-any */

export interface DashboardCardTypeProps {
span: number;
Expand All @@ -418,3 +418,27 @@ export interface DashboardCardTypeProps {
isFullHeight?: boolean;
actions?: JSX.Element[];
}

/* CARD COMPONENTS */

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

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>
);
})}
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
</button>
</th>
<th
className="pf-m-wrap"
className="pf-m-truncate"
onMouseEnter={[Function]}
scope="col"
>
Expand All @@ -136,7 +136,7 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
hidden={false}
>
<td
className="pf-m-width-20"
className="pf-m-width-10"
data-label="Name"
onMouseEnter={[Function]}
>
Expand Down Expand Up @@ -184,11 +184,16 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
</div>
</td>
<td
className=""
className="pf-m-break-word"
data-label="Description"
onMouseEnter={[Function]}
>
rule1 description
<p
style={Object {}}
>
rule1 description
</p>
</td>
</tr>
<tr
Expand All @@ -199,7 +204,7 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
hidden={false}
>
<td
className="pf-m-width-20"
className="pf-m-width-10"
data-label="Name"
onMouseEnter={[Function]}
>
Expand Down Expand Up @@ -247,11 +252,16 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
</div>
</td>
<td
className=""
className="pf-m-break-word"
data-label="Description"
onMouseEnter={[Function]}
>
rule3 description
<p
style={Object {}}
>
rule3 description
</p>
</td>
</tr>
<tr
Expand All @@ -262,7 +272,7 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
hidden={false}
>
<td
className="pf-m-width-20"
className="pf-m-width-10"
data-label="Name"
onMouseEnter={[Function]}
>
Expand Down Expand Up @@ -310,11 +320,16 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
</div>
</td>
<td
className=""
className="pf-m-break-word"
data-label="Description"
onMouseEnter={[Function]}
>
rule2 description
<p
style={Object {}}
>
rule2 description
</p>
</td>
</tr>
<tr
Expand All @@ -325,7 +340,7 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
hidden={false}
>
<td
className="pf-m-width-20"
className="pf-m-width-10"
data-label="Name"
onMouseEnter={[Function]}
>
Expand Down Expand Up @@ -373,11 +388,16 @@ exports[`<AutomatedAnalysisCardList /> renders correctly 1`] = `
</div>
</td>
<td
className=""
className="pf-m-break-word"
data-label="Description"
onMouseEnter={[Function]}
>
N/A description
<p
style={Object {}}
>
N/A description
</p>
</td>
</tr>
</tbody>
Expand Down

0 comments on commit 6fe930d

Please sign in to comment.