Skip to content

Commit

Permalink
adding tooltips to status labels
Browse files Browse the repository at this point in the history 
Signed-off-by: Jason Madigan <[email protected]>
  • Loading branch information
@jasonmadigan
jasonmadigan committed Oct 23, 2024
1 parent f7c5c3e commit 2617537
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 26 deletions.
12 changes: 12 additions & 0 deletions locales/en/plugin__kuadrant-console-plugin.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"Add a new Gateway": "Add a new Gateway",
"Add Limit": "Add Limit",
"All Policies": "All Policies",
"All references for the resource have been resolved.": "All references for the resource have been resolved.",
"API Designer": "API Designer",
"APIs / HTTPRoutes": "APIs / HTTPRoutes",
"Auth": "Auth",
Expand Down Expand Up @@ -96,7 +97,18 @@
"Select Issuer": "Select Issuer",
"Status": "Status",
"Targets Gateway API networking resources Gateways to provide TLS for gateway listeners by managing the lifecycle of TLS certificates using cert-manager": "Targets Gateway API networking resources Gateways to provide TLS for gateway listeners by managing the lifecycle of TLS certificates using cert-manager",
"The resource has an unknown status and is not accepted.": "The resource has an unknown status and is not accepted.",
"The resource is accepted but not all policies are enforced.": "The resource is accepted but not all policies are enforced.",
"The resource is accepted, programmed, and all policies are enforced.": "The resource is accepted, programmed, and all policies are enforced.",
"The resource is being created.": "The resource is being created.",
"The resource is invalid and not accepted.": "The resource is invalid and not accepted.",
"The resource is overridden and not enforced.": "The resource is overridden and not enforced.",
"The resource is programmed but not fully enforced.": "The resource is programmed but not fully enforced.",
"The status of the resource is unknown.": "The status of the resource is unknown.",
"The target for the resource was not found and it is not accepted.": "The target for the resource was not found and it is not accepted.",
"There are no": "There are no",
"There is a conflict and the resource is not accepted.": "There is a conflict and the resource is not accepted.",
"There is a conflict on the resource.": "There is a conflict on the resource.",
"TLS": "TLS",
"TLSPolicy": "TLSPolicy",
"to display - please create some.": "to display - please create some.",
Expand Down
176 changes: 150 additions & 26 deletions src/components/ResourceList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
EmptyStateIcon,
EmptyStateBody,
Title,
Tooltip,
} from '@patternfly/react-core';
import {
K8sResourceCommon,
Expand All @@ -35,7 +36,36 @@ import {
} from '@patternfly/react-icons';
import DropdownWithKebab from './DropdownWithKebab';

const generateLabelWithTooltip = (labelText, color, icon, tooltipText) => {
return (
<Tooltip content={tooltipText} position="top" enableFlip>
<Label isCompact icon={icon} color={color}>
{labelText}
</Label>
</Tooltip>
);
};

const getStatusLabel = (obj) => {
const { t } = useTranslation('plugin__kuadrant-console-plugin');

const tooltipTexts = {
Enforced: t('The resource is accepted, programmed, and all policies are enforced.'),
'Accepted (Not Enforced)': t('The resource is accepted but not all policies are enforced.'),
Programmed: t('The resource is programmed but not fully enforced.'),
Conflicted: t('There is a conflict on the resource.'),
'Resolved Refs': t('All references for the resource have been resolved.'),
Unknown: t('The status of the resource is unknown.'),
Creating: t('The resource is being created.'),
'Overridden (Not Enforced)': t('The resource is overridden and not enforced.'),
'Conflicted (Not Accepted)': t('There is a conflict and the resource is not accepted.'),
'TargetNotFound (Not Accepted)': t(
'The target for the resource was not found and it is not accepted.',
),
'Unknown (Not Accepted)': t('The resource has an unknown status and is not accepted.'),
'Invalid (Not Accepted)': t('The resource is invalid and not accepted.'),
};

const { kind, status } = obj;

const policiesMap = {
Expand All @@ -62,12 +92,6 @@ const getStatusLabel = (obj) => {
);
};

const generateLabel = (labelText, color, icon) => (
<Label isCompact icon={icon} color={color}>
{labelText}
</Label>
);

if (kind === 'Gateway') {
const conditions = status?.conditions || [];

Expand All @@ -80,18 +104,48 @@ const getStatusLabel = (obj) => {

if (acceptedCondition && programmedCondition) {
if (hasAllPoliciesEnforced(conditions) && !hasAnyPolicyError(conditions)) {
return generateLabel('Enforced', 'green', <CheckCircleIcon />);
return generateLabelWithTooltip(
'Enforced',
'green',
<CheckCircleIcon />,
tooltipTexts['Enforced'],
);
} else {
return generateLabel('Accepted (Not Enforced)', 'purple', <UploadIcon />);
return generateLabelWithTooltip(
'Accepted (Not Enforced)',
'purple',
<UploadIcon />,
tooltipTexts['Accepted (Not Enforced)'],
);
}
} else if (programmedCondition) {
return generateLabel('Programmed', 'blue', <CheckCircleIcon />);
return generateLabelWithTooltip(
'Programmed',
'blue',
<CheckCircleIcon />,
tooltipTexts['Programmed'],
);
} else if (conditions.some((cond) => cond.type === 'Conflicted' && cond.status === 'True')) {
return generateLabel('Conflicted', 'red', <ExclamationTriangleIcon />);
return generateLabelWithTooltip(
'Conflicted',
'red',
<ExclamationTriangleIcon />,
tooltipTexts['Conflicted'],
);
} else if (conditions.some((cond) => cond.type === 'ResolvedRefs' && cond.status === 'True')) {
return generateLabel('Resolved Refs', 'blue', <CheckCircleIcon />);
return generateLabelWithTooltip(
'Resolved Refs',
'blue',
<CheckCircleIcon />,
tooltipTexts['Resolved Refs'],
);
} else {
return generateLabel('Unknown', 'orange', <ExclamationTriangleIcon />);
return generateLabelWithTooltip(
'Unknown',
'orange',
<ExclamationTriangleIcon />,
tooltipTexts['Unknown'],
);
}
}

Expand All @@ -110,23 +164,53 @@ const getStatusLabel = (obj) => {

if (acceptedCondition) {
if (hasAllPoliciesEnforced(parentConditions) && !hasAnyPolicyError(parentConditions)) {
return generateLabel('Enforced', 'green', <CheckCircleIcon />);
return generateLabelWithTooltip(
'Enforced',
'green',
<CheckCircleIcon />,
tooltipTexts['Enforced'],
);
} else {
return generateLabel('Accepted (Not Enforced)', 'purple', <UploadIcon />);
return generateLabelWithTooltip(
'Accepted (Not Enforced)',
'purple',
<UploadIcon />,
tooltipTexts['Accepted (Not Enforced)'],
);
}
} else if (conflictedCondition) {
return generateLabel('Conflicted', 'red', <ExclamationTriangleIcon />);
return generateLabelWithTooltip(
'Conflicted',
'red',
<ExclamationTriangleIcon />,
tooltipTexts['Conflicted'],
);
} else if (resolvedRefsCondition) {
return generateLabel('Resolved Refs', 'blue', <CheckCircleIcon />);
return generateLabelWithTooltip(
'Resolved Refs',
'blue',
<CheckCircleIcon />,
tooltipTexts['Resolved Refs'],
);
} else {
return generateLabel('Unknown', 'orange', <ExclamationTriangleIcon />);
return generateLabelWithTooltip(
'Unknown',
'orange',
<ExclamationTriangleIcon />,
tooltipTexts['Unknown'],
);
}
}

const generalConditions = status?.conditions || [];

if (generalConditions.length === 0) {
return generateLabel('Creating', 'cyan', <OutlinedHourglassIcon />);
return generateLabelWithTooltip(
'Creating',
'cyan',
<OutlinedHourglassIcon />,
tooltipTexts['Creating'],
);
}

const enforcedCondition = generalConditions.find(
Expand All @@ -152,21 +236,61 @@ const getStatusLabel = (obj) => {
);

if (enforcedCondition) {
return generateLabel('Enforced', 'green', <CheckCircleIcon />);
return generateLabelWithTooltip(
'Enforced',
'green',
<CheckCircleIcon />,
tooltipTexts['Enforced'],
);
} else if (overriddenCondition) {
return generateLabel('Overridden (Not Enforced)', 'grey', <LayerGroupIcon />);
return generateLabelWithTooltip(
'Overridden (Not Enforced)',
'grey',
<LayerGroupIcon />,
tooltipTexts['Overridden (Not Enforced)'],
);
} else if (acceptedCondition) {
return generateLabel('Accepted (Not Enforced)', 'purple', <UploadIcon />);
return generateLabelWithTooltip(
'Accepted (Not Enforced)',
'purple',
<UploadIcon />,
tooltipTexts['Accepted (Not Enforced)'],
);
} else if (conflictedCondition) {
return generateLabel('Conflicted (Not Accepted)', 'red', <ExclamationTriangleIcon />);
return generateLabelWithTooltip(
'Conflicted (Not Accepted)',
'red',
<ExclamationTriangleIcon />,
tooltipTexts['Conflicted (Not Accepted)'],
);
} else if (targetNotFoundCondition) {
return generateLabel('TargetNotFound (Not Accepted)', 'red', <ExclamationTriangleIcon />);
return generateLabelWithTooltip(
'TargetNotFound (Not Accepted)',
'red',
<ExclamationTriangleIcon />,
tooltipTexts['TargetNotFound (Not Accepted)'],
);
} else if (unknownCondition) {
return generateLabel('Unknown (Not Accepted)', 'orange', <ExclamationTriangleIcon />);
return generateLabelWithTooltip(
'Unknown (Not Accepted)',
'orange',
<ExclamationTriangleIcon />,
tooltipTexts['Unknown (Not Accepted)'],
);
} else if (acceptedConditionFalse) {
return generateLabel('Invalid (Not Accepted)', 'red', <ExclamationTriangleIcon />);
return generateLabelWithTooltip(
'Invalid (Not Accepted)',
'red',
<ExclamationTriangleIcon />,
tooltipTexts['Invalid (Not Accepted)'],
);
} else {
return generateLabel('Unknown', 'grey', <ExclamationTriangleIcon />);
return generateLabelWithTooltip(
'Unknown',
'grey',
<ExclamationTriangleIcon />,
tooltipTexts['Unknown'],
);
}
};

Expand Down

0 comments on commit 2617537

Please sign in to comment.