Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: adjust badges #3464

Merged
merged 4 commits into from
Nov 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function ClusterNodes({ data, error, loading }) {
const { t } = useTranslation();

const getStatusType = status => {
if (status === 'Ready') return 'Success';
if (status === 'Ready') return 'Positive';
return undefined;
};

Expand Down
12 changes: 6 additions & 6 deletions src/components/Extensibility/components/Badge.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { useJsonata } from '../hooks/useJsonata';
import { useTranslation } from 'react-i18next';

import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';

Check failure on line 5 in src/components/Extensibility/components/Badge.js

View workflow job for this annotation

GitHub Actions / run-unit-test

src/components/Extensibility/components/tests/Badge.test.js

Error: [vitest] There was an error when mocking a module. If you are using "vi.mock" factory, make sure there are no top level variables inside, since this call is hoisted to top of the file. Read more: https://vitest.dev/api/vi.html#vi-mock ❯ src/components/Extensibility/components/Badge.js:5:31 ❯ src/components/Extensibility/components/tests/Badge.test.js:22:25 Caused by: Caused by: TypeError: Cannot read properties of undefined (reading 'find') ❯ hasStyle node_modules/@ui5/webcomponents-base/src/ManagedStyles.ts:58:39 ❯ createBlockingStyle node_modules/@ui5/webcomponents/src/Popup.ts:33:7 ❯ node_modules/@ui5/webcomponents/src/Popup.ts:38:1 ❯ src/shared/components/StatusBadge/StatusBadge.js:3:31
import {
useGetPlaceholder,
useGetTranslation,
Expand All @@ -11,9 +11,9 @@
import './Badge.scss';

const TYPE_FALLBACK = new Map([
['success', 'Success'],
['warning', 'Warning'],
['error', 'Error'],
['positive', 'Positive'],
['critical', 'Critical'],
['negative', 'Negative'],
['info', 'Information'],
]);

Expand Down Expand Up @@ -63,10 +63,10 @@
}
}

if (type === 'negative') type = 'Warning';
if (type === 'negative') type = 'Critical';
else if (type === 'informative') type = 'Information';
else if (type === 'positive') type = 'Success';
else if (type === 'critical') type = 'Error';
else if (type === 'positive') type = 'Positive';
else if (type === 'critical') type = 'Negative';

type = TYPE_FALLBACK.get(type) || type;

Expand Down
5 changes: 2 additions & 3 deletions src/components/HelmReleases/HelmReleaseStatus.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import React from 'react';
import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';

export function HelmReleaseStatus({ status }) {
const resolveType = status => {
switch (status) {
case 'deployed':
return 'Success';
return 'Positive';
case 'uninstalling':
case 'failed':
return 'Error';
return 'Negative';
case 'unknown':
return 'None';
default:
Expand Down
2 changes: 1 addition & 1 deletion src/components/KymaModules/KymaModulesList.js
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ export default function KymaModulesList({
resourceKind="kymas"
type={
moduleStatus?.state === 'Ready'
? 'Success'
? 'Positive'
: moduleStatus?.state === 'Processing' ||
moduleStatus?.state === 'Deleting' ||
moduleStatus?.state === 'Unmanaged' ||
Expand Down
27 changes: 18 additions & 9 deletions src/components/KymaModules/components/ModuleStatus.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,27 @@ export const ModuleStatus = ({ resource }: any) => {
const moduleState = status?.state || 'Unknown';
const moduleMessage = status?.description;

const resolveType = (status: string) => {
switch (status) {
case 'Ready':
return 'Positive';
case 'Processing':
case 'Deleting':
case 'Unknown':
return 'None';
case 'Warning':
return 'Critical';
case 'Error':
return 'Negative';
default:
return 'None';
}
};

return (
<StatusBadge
resourceKind="kymas"
type={
moduleState === 'Ready'
? 'Success'
: moduleState === 'Processing' ||
moduleState === 'Deleting' ||
moduleState === 'Unknown'
? 'None'
: moduleState || 'None'
}
type={resolveType(moduleState)}
tooltipContent={moduleMessage}
>
{moduleState}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const CurrentCRDVersion = resource => {
'custom-resource-definitions.subtitle.version',
)} ${storageVersion.name}`}</Title>
<StatusBadge
type={storageVersion.served ? 'Success' : 'Information'}
type={storageVersion.served ? 'Positive' : 'Information'}
className="version-status"
resourceKind="custom-resource-definitions"
>
Expand All @@ -67,7 +67,7 @@ export const CurrentCRDVersion = resource => {
</StatusBadge>
{storageVersion.storage && (
<StatusBadge
type="Success"
type="Positive"
className="version-status"
resourceKind="custom-resource-definitions"
>
Expand Down
4 changes: 2 additions & 2 deletions src/resources/Ingresses/IngressDetails.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ export function IngressDetails(props) {
totalPorts === 0
? 'Information'
: totalPorts === healthyPorts
? 'Success'
: 'Error';
? 'Positive'
: 'Negative';

return (
<StatusBadge
Expand Down
2 changes: 1 addition & 1 deletion src/resources/Jobs/JobCompletions.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export function JobCompletions({ job }) {

const succeeded = job.status.succeeded || 0;
const completions = job.spec.completions || 0;
const statusType = succeeded === completions ? 'Success' : 'Information';
const statusType = succeeded === completions ? 'Positive' : 'Information';

return (
<StatusBadge
Expand Down
4 changes: 2 additions & 2 deletions src/resources/Jobs/JobConditions.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ export function JobConditions(job) {
];
const conditionTypeStatus = type => {
if (type === 'Complete') {
return 'Success';
return 'Positive';
} else if (type === 'Failed') {
return 'Error';
return 'Negative';
} else {
return 'Information';
}
Expand Down
5 changes: 2 additions & 3 deletions src/resources/Namespaces/NamespaceStatus.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React from 'react';
import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';

export function NamespaceStatus({ namespaceStatus }) {
const badgeType = status => {
switch (status) {
case 'Active':
return 'Success';
return 'Positive';
case 'Terminating':
return 'Information';
default:
return 'Error';
return 'Negative';
}
};

Expand Down
5 changes: 2 additions & 3 deletions src/resources/PersistentVolumes/PersistentVolumeStatus.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import React from 'react';
import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';

export function PersistentVolumeStatus({ status }) {
const badgeType = status => {
switch (status) {
case 'Bound':
case 'Available':
return 'Success';
return 'Positive';
case 'Released':
case 'Pending':
return 'Information';
default:
return 'Error';
return 'Negative';
}
};

Expand Down
4 changes: 2 additions & 2 deletions src/resources/Pods/ContainerStatus.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/resources/Pods/PodRestarts.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions src/resources/Pods/PodStatus.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/shared/components/BTPResourceStatus.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export function BTPResourceStatus({ status, resourceKind }) {

if (status?.ready === 'True' && lastCondition.type === 'Ready') {
return (
<StatusBadge type="Success" resourceKind={resourceKind}>
<StatusBadge type="Positive" resourceKind={resourceKind}>
{lastCondition.reason}
</StatusBadge>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const ExpandableListItem = ({
{header}
{status && (
<StatusBadge
type={status === 'True' ? 'Success' : 'Error'}
type={status === 'True' ? 'Positive' : 'Negative'}
className={'header__status-badge'}
>
{status}
Expand Down
7 changes: 3 additions & 4 deletions src/shared/components/PersistentVolumeClaimStatus.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { StatusBadge } from 'shared/components/StatusBadge/StatusBadge';

const createPhaseProperties = (phase, t) => {
switch (phase) {
case 'Bound':
return {
type: 'Success',
type: 'Positive',
tooltipContent: t('persistent-volume-claims.tooltips.bound'),
};
case 'Lost':
return {
type: 'Error',
type: 'Negative',
tooltipContent: t('persistent-volume-claims.tooltips.lost'),
};
case 'Pending':
return {
type: 'Warning',
type: 'Critical',
tooltipContent: t('persistent-volume-claims.tooltips.pending'),
};
default:
Expand Down
2 changes: 1 addition & 1 deletion src/shared/components/PopoverBadge/PopoverBadge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { createPortal } from 'react-dom';
interface PopoverBadgeProps {
children?: ReactNode;
tooltipContent: ReactNode;
type: 'Information' | 'Success' | 'Error' | 'Warning' | 'None';
type: 'Information' | 'Positive' | 'Negative' | 'Critical' | 'None';
className?: string;
}

Expand Down
2 changes: 1 addition & 1 deletion src/shared/components/RunningPodsStatus.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export function RunningPodsStatus({ running, expected }) {
running === 1
? t('common.tooltips.running-pods-singular')
: t('common.tooltips.running-pods-plural', { running });
const statusType = running === expected ? 'Success' : 'Error';
const statusType = running === expected ? 'Positive' : 'Negative';

return (
<StatusBadge
Expand Down
20 changes: 13 additions & 7 deletions src/shared/components/StatusBadge/StatusBadge.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useTranslation } from 'react-i18next';
import { ObjectStatus } from '@ui5/webcomponents-react';
import PropTypes from 'prop-types';

Check failure on line 3 in src/shared/components/StatusBadge/StatusBadge.js

View workflow job for this annotation

GitHub Actions / run-unit-test

src/resources/Pods/test/PodRestarts.test.js

TypeError: Cannot read properties of undefined (reading 'find') ❯ hasStyle node_modules/@ui5/webcomponents-base/src/ManagedStyles.ts:58:39 ❯ createBlockingStyle node_modules/@ui5/webcomponents/src/Popup.ts:33:7 ❯ node_modules/@ui5/webcomponents/src/Popup.ts:38:1 ❯ src/shared/components/StatusBadge/StatusBadge.js:3:31
import classNames from 'classnames';

import './StatusBadge.scss';
Expand All @@ -27,17 +27,17 @@
case 'Success':
case 'Succeeded':
case 'Ok':
return 'Success';
return 'Positive';

case 'Unknown':
case 'Warning':
return 'Warning';
return 'Critical';

case 'Failed':
case 'Error':
case 'Failure':
case 'Invalid':
return 'Error';
return 'Negative';

default:
return 'None';
Expand All @@ -58,9 +58,9 @@
};

const TYPE_FALLBACK = new Map([
['success', 'Success'],
['warning', 'Warning'],
['error', 'Error'],
['positive', 'Positive'],
['critical', 'Critical'],
['negative', 'Negative'],
['info', 'Information'],
]);

Expand Down Expand Up @@ -168,7 +168,13 @@
StatusBadge.propTypes = {
additionalContent: PropTypes.node,
tooltipContent: PropTypes.node,
type: PropTypes.oneOf(['Information', 'Success', 'Error', 'Warning', 'None']),
type: PropTypes.oneOf([
'Information',
'Positive',
'Negative',
'Critical',
'None',
]),
autoResolveType: PropTypes.bool,
noTooltip: PropTypes.bool,
resourceKind: PropTypes.string,
Expand Down
4 changes: 2 additions & 2 deletions src/shared/components/SubscriptionConditionStatus.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ export const SubscriptionConditionStatus = ({ condition }) => {
const statusBadgeProperties =
condition?.status === 'True'
? {
type: 'Success',
type: 'Positive',
text: t('common.statuses.ready'),
}
: {
type: 'Error',
type: 'Negative',
text: t('common.statuses.error'),
};
return (
Expand Down
8 changes: 7 additions & 1 deletion src/shared/components/TooltipBadge/TooltipBadge.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,13 @@ export const TooltipBadge = ({

TooltipBadge.propTypes = {
tooltipContent: PropTypes.node,
type: PropTypes.oneOf(['Information', 'Success', 'Error', 'Warning', 'None']),
type: PropTypes.oneOf([
'Information',
'Positive',
'Negative',
'Critical',
'None',
]),
tooltipProps: PropTypes.object,
className: PropTypes.string,
};
Loading