diff --git a/src/components/Graphs/CustomNode.tsx b/src/components/Graphs/CustomNode.tsx index de2296b5..c695bfb5 100644 --- a/src/components/Graphs/CustomNode.tsx +++ b/src/components/Graphs/CustomNode.tsx @@ -28,6 +28,7 @@ const CustomNode: React.FC = ({ label, type, status, transition positiveText={t('common.healthy')} negativeText={t('errors.notHealthy')} message={statusMessage} + hideOnHoverEffect={true} />
diff --git a/src/components/Graphs/graphUtils.ts b/src/components/Graphs/graphUtils.ts index 3c19b005..9dc51d02 100644 --- a/src/components/Graphs/graphUtils.ts +++ b/src/components/Graphs/graphUtils.ts @@ -26,7 +26,22 @@ export const resolveProviderType = (configName: string, providerConfigsList: Pro }; export const generateColorMap = (items: NodeData[], colorBy: string): Record => { - const colors = ['#E09D00', '#E6600D', '#AB218E', '#678BC7', '#1A9898', '#759421', '#925ACE', '#647987']; + const colors = [ + '#FFC933', // MANGO 4 + '#FF8AF0', // PINK 4 + '#FEADC8', // RASPBERRY 4 + '#2CE0BF', // TEAL 4 + '#FF8CB2', // RED 4 + '#B894FF', // INDIGO 4 + '#049F9A', // TEAL 6 + '#FA4F96', // RASPBERRY 6 + '#F31DED', // PINK 6 + '#7858FF', // INDIGO 6 + '#07838F', // TEAL 7 + '#DF1278', // RASBERRY 7 + '#510080', // PINK 10 + '#5D36FF', // INDIGO 7 + ]; const keys = (() => { if (colorBy === 'source') return Array.from(new Set(items.map((i) => i.providerType).filter(Boolean))); diff --git a/src/components/Shared/ResourceStatusCell.tsx b/src/components/Shared/ResourceStatusCell.tsx index f14e6cee..fd78b91b 100644 --- a/src/components/Shared/ResourceStatusCell.tsx +++ b/src/components/Shared/ResourceStatusCell.tsx @@ -1,4 +1,4 @@ -import { ButtonDomRef, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react'; +import { Button, ButtonDomRef, FlexBox, Icon, ResponsivePopover, Text } from '@ui5/webcomponents-react'; import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo'; import { useRef, useState } from 'react'; import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx'; @@ -10,6 +10,7 @@ export interface ResourceStatusCellProps { message?: string; positiveText: string; negativeText: string; + hideOnHoverEffect?: boolean; } export const ResourceStatusCell = ({ isOk, @@ -17,9 +18,11 @@ export const ResourceStatusCell = ({ message, positiveText, negativeText, + hideOnHoverEffect, }: ResourceStatusCellProps) => { const btnRef = useRef(null); const [popoverIsOpen, setPopoverIsOpen] = useState(false); + const timeAgo = transitionTime ? formatDateAsTimeAgo(transitionTime) : '-'; const handleClose = () => { setPopoverIsOpen(false); @@ -29,19 +32,31 @@ export const ResourceStatusCell = ({ }; return ( - - } - text={isOk ? positiveText : negativeText} - onClick={handleOpen} - /> + + ) : ( + + } + text={isOk ? positiveText : negativeText} + onClick={handleOpen} + /> + )} + - {formatDateAsTimeAgo(transitionTime)} + {timeAgo}