Merge pull request #570 from bartoval/align_design

refactor: ♻️ Align console to UX requests

__tests__/ComponentPairsList.spec.tsx

@@ -8,8 +8,8 @@ import pairsList from '../mocks/data/COMPONENT_PAIRS.json';
 import components from '../mocks/data/COMPONENTS.json';
 import { loadMockServer } from '../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../src/config/app';
+import { Labels } from '../src/config/labels';
 import { getTestsIds } from '../src/config/testIds';
-import { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
 import LoadingPage from '../src/core/components/SkLoading';
 import PairsList from '../src/pages/Components/components/PairList';
 import { Providers } from '../src/providers';
@@ -65,6 +65,6 @@ describe('Component Pairs Llist component', () => {
       timeout: waitForElementToBeRemovedTimeout
     });
 
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoLinkFound)).toBeInTheDocument();
   });
 });

__tests__/Links.spec.tsx

@@ -10,7 +10,6 @@ import { loadMockServer } from '../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../src/config/app';
 import { Labels } from '../src/config/labels';
 import { getTestsIds } from '../src/config/testIds';
-import { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
 import LoadingPage from '../src/core/components/SkLoading';
 import Links from '../src/pages/Sites/components/Links';
 import { Providers } from '../src/providers';
@@ -96,7 +95,7 @@ describe('Links component', () => {
       timeout: waitForElementToBeRemovedTimeout
     });
 
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoLinkFound)).toBeInTheDocument();
     expect(screen.queryByText(Labels.OutLinks)).not.toBeInTheDocument();
     expect(screen.queryByText(Labels.InLinks)).not.toBeInTheDocument();
   });

__tests__/ProcessPairsList.spec.tsx

@@ -10,7 +10,6 @@ import { loadMockServer } from '../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../src/config/app';
 import { Labels } from '../src/config/labels';
 import { getTestsIds } from '../src/config/testIds';
-import { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
 import LoadingPage from '../src/core/components/SkLoading';
 import PairsList from '../src/pages/Processes/components/PairsList';
 import { ProcessesRoutesPaths } from '../src/pages/Processes/Processes.enum';
@@ -71,6 +70,6 @@ describe('Process Pairs List component', () => {
       timeout: waitForElementToBeRemovedTimeout
     });
 
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoDataFound)).toBeInTheDocument();
   });
 });

__tests__/SitePairsList.spec.tsx

@@ -8,8 +8,8 @@ import pairsList from '../mocks/data/SITE_PAIRS.json';
 import sites from '../mocks/data/SITES.json';
 import { loadMockServer } from '../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../src/config/app';
+import { Labels } from '../src/config/labels';
 import { getTestsIds } from '../src/config/testIds';
-import { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
 import LoadingPage from '../src/core/components/SkLoading';
 import PairsList from '../src/pages/Sites/components/PairList';
 import { Providers } from '../src/providers';
@@ -65,6 +65,6 @@ describe('Site Pairs List component', () => {
       timeout: waitForElementToBeRemovedTimeout
     });
 
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoLinkFound)).toBeInTheDocument();
   });
 });

__tests__/SkEmptyData.spec.tsx

@@ -1,12 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import SKEmptyData, { SkEmptyDataLabels } from '../src/core/components/SkEmptyData';
+import { Labels } from '../src/config/labels';
+import SKEmptyData from '../src/core/components/SkEmptyData';
 
 describe('SkEmptyData', () => {
   it('should render with default message', () => {
     render(<SKEmptyData />);
-    expect(screen.getByText(SkEmptyDataLabels.Default)).toBeInTheDocument();
+    expect(screen.getByText(Labels.NoDataFound)).toBeInTheDocument();
   });
 
   it('should render with custom message', () => {

package.json

@@ -62,12 +62,12 @@
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.0.5",
-    "@vitest/eslint-plugin": "^1.1.25",
+    "@vitest/eslint-plugin": "^1.1.26",
     "circular-dependency-plugin": "^5.2.2",
     "commitizen": "^4.3.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
-    "cypress": "^14.0.1",
+    "cypress": "^14.0.2",
     "cz-git": "^1.11.0",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
@@ -88,7 +88,7 @@
     "ts-loader": "^9.5.2",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.23.0",
-    "vite": "^6.0.11",
+    "vite": "^6.1.0",
     "vitest": "^3.0.5",
     "webpack": "^5.97.1",
     "webpack-cli": "^6.0.1"

src/config/labels.ts

@@ -21,6 +21,7 @@ export const Labels = {
   Cost: 'Cost',
   Platform: 'Platform',
   LinkStatus: 'Status',
+  HAShort: 'HA',
   HA: 'High availability',
   YES: 'true',
   NO: 'false',
@@ -163,6 +164,10 @@ export const Labels = {
   NoMetricFound: 'No metrics found',
   NoBiflowFound: 'No connections or requests to display',
 
+  NoDataFound: 'No data found',
+  NoLinkFound: 'No link found',
+  NoLinkFoundDescription: 'There are currently no available connections between the resources',
+
   fetchDataDescription: 'The data for the service network is being retrieved. One moment please...',
   ProcessDescription:
     'A process represents running application code.<br>On Kubernetes, a process is a pod. On Docker or Podman, a process is a container. On virtual machines or bare metal hosts',

src/config/styles.ts

@@ -49,7 +49,7 @@ export const styles = {
     darkBackgroundColor: hexColors.Black500,
     darkTextColor: hexColors.Black900,
     infoColor: hexColors.Blue400,
-    errorColor: hexColors.Red500,
-    warningColor: hexColors.Orange700
+    errorColor: hexColors.Red600,
+    warningColor: hexColors.Orange300
   }
 };

src/core/components/SkCharts/SKSanckeyChart/SkSankey.constants.ts

@@ -6,7 +6,7 @@ export const DEFAULT_SANKEY_CHART_HEIGHT = '350px';
 
 //Filters
 export const SankeyMetricOptions: {
-  id: MetricKeys | ''; // 'id' può essere un MetricKeys o una stringa vuota
+  id: MetricKeys | '';
   label: string;
 }[] = [
   { id: '', label: 'No Metrics' },

src/core/components/SkCharts/SKSanckeyChart/SkSankeyFilter.tsx

@@ -21,7 +21,7 @@ const SankeyFilter: FC<{ onSearch?: Function }> = memo(({ onSearch }) => {
   };
 
   const handleMetricSelect = (selected?: string | number) => {
-    setVisibleMetrics(selected as MetricKeys | '');
+    setVisibleMetrics((selected as MetricKeys) || '');
   };
 
   useEffect(() => {

src/core/components/SkEmptyData/index.tsx

@@ -2,9 +2,7 @@ import { ComponentType, FC } from 'react';
 
 import { Bullseye, EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core';
 
-export enum SkEmptyDataLabels {
-  Default = 'no data found'
-}
+import { Labels } from '../../../config/labels';
 
 interface SkEmptyDataProps {
   message?: string;
@@ -13,12 +11,7 @@ interface SkEmptyDataProps {
   dataTestid?: string;
 }
 
-const SKEmptyData: FC<SkEmptyDataProps> = function ({
-  message = SkEmptyDataLabels.Default,
-  description,
-  icon,
-  ...props
-}) {
+const SKEmptyData: FC<SkEmptyDataProps> = function ({ message = Labels.NoDataFound, description, icon, ...props }) {
   return (
     <Bullseye data-testid={props.dataTestid}>
       <EmptyState headingLevel="h2" titleText={message} variant={EmptyStateVariant.sm} isFullHeight icon={icon}>

src/core/components/SkGraph/components/CustomElements.ts

@@ -88,12 +88,30 @@ class SkSiteEdge extends SkDataEdge {
   }
 }
 
-class SkSiteEdgeDown extends SkSiteEdge {
+class SkSiteEdgeDown extends Quadratic {
   render(attrs: Required<QuadraticStyleProps>) {
     super.render({
       ...attrs,
+      lineDash: 3,
+      endArrow: false,
       stroke: theme.colors.edgeLineDown,
-      lineWidth: 2
+      badge: true,
+      badgeText: '!',
+      badgeFontWeight: 900,
+      badgeFontSize: theme.edge.badgeFontSize + 1,
+      badgeFill: theme.colors.edgeBadgeTextColor,
+      badgeBackgroundStroke: 'transparent',
+      badgeBackgroundFill: theme.colors.edgeLineDown,
+      label: true,
+      labelText: 'down',
+      labelPadding: 0,
+      labelAutoRotate: true,
+      labelBackgroundStroke: 'transparent',
+      badgeBackgroundHeight: 8,
+      badgeBackgroundWidth: 8,
+      badgePlacement: 'prefix',
+      labelOffsetY: 0.7,
+      labelOffsetX: 11
     });
   }
 }
@@ -102,8 +120,7 @@ class SkSiteEdgePartialUp extends SkSiteEdge {
   render(attrs: Required<QuadraticStyleProps>) {
     super.render({
       ...attrs,
-      stroke: theme.colors.edgeLinePartialDown,
-      lineWidth: 2
+      stroke: theme.colors.edgeLinePartialDown
     });
   }
 }

src/core/components/SkGraph/components/Legend/Shapes/Shapes.constants.ts

@@ -3,3 +3,5 @@ import { styles } from '../../../../../../config/styles';
 export const LEGEND_DEFAULT_BG_COLOR = styles.default.lightBackgroundColor;
 export const LEGEND_DEFAULT_STROKE_COLOR = styles.default.darkBackgroundColor;
 export const LINE_COLOR = styles.default.darkBackgroundColor;
+export const LINE_COLOR_ERROR = styles.default.errorColor;
+export const LINE_COLOR_WARNING = styles.default.warningColor;

src/core/components/SkGraph/components/Legend/index.tsx

@@ -3,6 +3,7 @@ import { Content, Divider, Flex, FlexItem, Panel, PanelHeader, PanelMainBody, Ti
 import SvgCircle from './Shapes/Circle';
 import SvgDiamond from './Shapes/Diamond';
 import SvgHorizontalLine from './Shapes/HorizontalLine';
+import { LINE_COLOR_ERROR, LINE_COLOR_WARNING } from './Shapes/Shapes.constants';
 import SvgSquare from './Shapes/Square';
 import { Labels } from '../../../../../config/labels';
 
@@ -40,6 +41,10 @@ const ProcessLegend = function () {
                   <SvgCircle dimension={8} fillOpacity={1} />
                 </Content>
               </FlexItem>
+
+              <FlexItem>
+                <Content>{Labels.HAShort}</Content>
+              </FlexItem>
             </Flex>
 
             <Flex direction={{ default: 'column' }}>
@@ -55,6 +60,9 @@ const ProcessLegend = function () {
               <FlexItem>
                 <Content>{Labels.Remote}</Content>
               </FlexItem>
+              <FlexItem>
+                <Content>{Labels.HA}</Content>
+              </FlexItem>
             </Flex>
           </Flex>
         </PanelMainBody>
@@ -81,6 +89,18 @@ const ProcessLegend = function () {
                   <SvgHorizontalLine dashed />
                 </Content>
               </FlexItem>
+
+              <FlexItem>
+                <Content>
+                  <SvgHorizontalLine dashed color={LINE_COLOR_ERROR} />
+                </Content>
+              </FlexItem>
+
+              <FlexItem>
+                <Content>
+                  <SvgHorizontalLine dashed color={LINE_COLOR_WARNING} />
+                </Content>
+              </FlexItem>
             </Flex>
 
             <Flex direction={{ default: 'column' }}>
@@ -90,6 +110,14 @@ const ProcessLegend = function () {
               <FlexItem>
                 <Content>{Labels.SiteLink}</Content>
               </FlexItem>
+
+              <FlexItem>
+                <Content>{Labels.SiteLink} Down</Content>
+              </FlexItem>
+
+              <FlexItem>
+                <Content>{Labels.SiteLink} Partially Up</Content>
+              </FlexItem>
             </Flex>
           </Flex>
         </PanelMainBody>

src/core/components/SkGraph/config.ts

@@ -27,6 +27,7 @@ export const theme = {
     edgeLabelText: styles.default.darkTextColor,
     edgeLine: styles.default.darkBackgroundColor,
     edgeLineDown: styles.default.errorColor,
+    edgeBadgeTextColor: styles.default.lightTextColor,
     edgeLinePartialDown: styles.default.warningColor,
     edgeSelectLine: styles.default.infoColor,
     edgeTerminal: styles.default.darkBackgroundColor,

src/core/components/SkTable/SkCustomCells/SkViewDetailsCell/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { Button } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { CubesIcon } from '@patternfly/react-icons';
 
 interface SkViewDetailCellProps<T> {
   link?: string;
@@ -17,7 +17,7 @@ const SkViewDetailCell = function <T>({ value, onClick }: SkViewDetailCellProps<
   }, [value, onClick]);
 
   return (
-    <Button icon={<SearchIcon />} variant="plain" aria-label="Action" onClick={handleOnClick} title="Click details" />
+    <Button icon={<CubesIcon />} variant="plain" aria-label="Action" onClick={handleOnClick} title="Click details" />
   );
 };
 

src/core/components/SkTable/index.tsx

@@ -1,7 +1,7 @@
 import { KeyboardEvent, MouseEvent as ReactMouseEvent, useCallback, useState, useMemo, FC } from 'react';
 
 import { Card, CardBody, CardHeader, Flex, Content, Title } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
+import { CubesIcon } from '@patternfly/react-icons';
 import {
   InnerScrollContainer,
   SortByDirection,
@@ -217,7 +217,7 @@ const SkTable = function <T>({
               {skRows.length === 0 && (
                 <Tr>
                   <Td colSpan={12}>
-                    <SKEmptyData icon={SearchIcon} />
+                    <SKEmptyData icon={CubesIcon} />
                   </Td>
                 </Tr>
               )}