refactor(Core UI): ♻️ Organize charts and custom cell fodlers

__tests__/MetricServices.spec.ts

@@ -4,7 +4,7 @@ import * as PrometheusAPIModule from '../src/API/Prometheus.api';
 import { alignDataSeriesWithZeros, normalizeResponsesFromSeries } from '../src/pages/shared/Metrics/metrics.utils';
 import { MetricsController } from '../src/pages/shared/Metrics/services';
 import { PrometheusMetric } from '../src/types/Prometheus.interfaces';
-import { skAxisXY } from '../src/types/SkChartArea.interfaces';
+import { skAxisXY } from '../src/types/SkCharts';
 
 describe('useMetrics', () => {
   it('should getLatencyPercentiles handles errors', async () => {

__tests__/SKSankeyFIlter.spec.tsx

@@ -5,8 +5,8 @@ import {
   ServiceClientResourceOptions,
   ServiceServerResourceOptions,
   SankeyMetricOptions
-} from '../src/core/components/SKSanckeyChart/SkSankey.constants';
-import SankeyFilter from '../src/core/components/SKSanckeyChart/SkSankeyFilter';
+} from '../src/core/components/SkCharts/SKSanckeyChart/SkSankey.constants';
+import SankeyFilter from '../src/core/components/SkCharts/SKSanckeyChart/SkSankeyFilter';
 
 describe('SankeyFilter', () => {
   it('should render the SankeyFilter component', () => {

__tests__/Services.services.spec.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest';
 import connectorsData from '../mocks/data/CONNECTORS.json';
 import listenersData from '../mocks/data/LISTENERS.json';
 import { styles } from '../src/config/styles';
-import { DEFAULT_SANKEY_CHART_FLOW_VALUE } from '../src/core/components/SKSanckeyChart/SkSankey.constants';
+import { DEFAULT_SANKEY_CHART_FLOW_VALUE } from '../src/core/components/SkCharts/SKSanckeyChart/SkSankey.constants';
 import { ServicesController, aggregateConnectorResponses } from '../src/pages/Services/services';
 import { GraphElementNames, GraphIconKeys } from '../src/types/Graph.interfaces';
 import { ConnectorResponse, ListenerResponse } from '../src/types/REST.interfaces';

__tests__/SkChartArea.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, it, expect, vi } from 'vitest';
 
-import SkChartArea from '../src/core/components/SkChartArea';
+import SkChartArea from '../src/core/components/SkCharts/SkChartArea';
 
 vi.mock('@patternfly/react-charts/victory', () => ({
   Chart: vi.fn(({ children }) => <div data-testid="mock-chart">{children}</div>),

__tests__/SkDurationCell.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi, beforeEach, Mock } from 'vitest';
 
-import SkDurationCell from '../src/core/components/SKDurationCell';
+import SkDurationCell from '../src/core/components/SkTable/SkCustomCells/SKDurationCell';
 import { formatLatency } from '../src/core/utils/formatLatency';
 
 vi.mock('../src/core/utils/formatLatency', () => ({

__tests__/SkLinkCell.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import SkLinkCell from '../src/core/components/SkLinkCell';
+import SkLinkCell from '../src/core/components/SkTable/SkCustomCells/SkLinkCell';
 import { Providers } from '../src/providers';
 
 describe('SkLinkCell', () => {

__tests__/SkLinkStatusCell.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
-import SkLinkStatusCell from '../src/core/components/SkLinkStatusCell';
+import SkLinkStatusCell from '../src/core/components/SkTable/SkCustomCells/SkLinkStatusCell';
 
 describe('SkLinkStatusCell', () => {
   const mockRouterLinkResponseUp: { destinationSiteId: string; status: 'up' } = {

__tests__/SkSankeyChart.spec.tsx

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import { Labels } from '../src/config/labels';
 import { styles } from '../src/config/styles';
-import SkSankeyChart, { getColors } from '../src/core/components/SKSanckeyChart/index';
+import SkSankeyChart, { getColors } from '../src/core/components/SkCharts/SKSanckeyChart/index';
 
 vi.mock('@nivo/sankey', () => ({
   ResponsiveSankey: () => <div />

__tests__/SkViewDetailCell.spec.tsx

@@ -1,7 +1,7 @@
 import { render, fireEvent } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
-import SkViewDetailCell from '../src/core/components/SkViewDetailsCell/index';
+import SkViewDetailCell from '../src/core/components/SkTable/SkCustomCells/SkViewDetailsCell/index';
 
 describe('ViewDetailCell', () => {
   it('should render a button with a search icon', () => {

src/API/Prometheus.utils.ts

@@ -13,7 +13,7 @@ import {
   ExecuteQueryQueryType,
   ExecuteQueryFunction
 } from '../types/Prometheus.interfaces';
-import { skAxisXY } from '../types/SkChartArea.interfaces';
+import { skAxisXY } from '../types/SkCharts';
 
 const gePrometheusQueryPATH = (queryType: 'single' | 'range' = 'range') =>
   queryType === 'range' ? PROMETHEUS_URL_RANGE_QUERY : PROMETHEUS_URL_SINGLE_QUERY;

src/core/components/SkBiFlowList/BiFlowList.constants.ts

@@ -6,10 +6,10 @@ import { SitesRoutesPaths } from '../../../pages/Sites/Sites.enum';
 import { BiFlowResponse, TransportFlowResponse } from '../../../types/REST.interfaces';
 import { formatBytes } from '../../utils/formatBytes';
 import { formatLatency } from '../../utils/formatLatency';
-import SkDurationCell from '../SKDurationCell';
-import SkEndTimeCell from '../SkEndTimeCell';
-import SkLinkCell, { SkLinkCellProps } from '../SkLinkCell';
 import { SkSelectOption } from '../SkSelect';
+import SkDurationCell from '../SkTable/SkCustomCells/SKDurationCell';
+import SkEndTimeCell from '../SkTable/SkCustomCells/SkEndTimeCell';
+import SkLinkCell, { SkLinkCellProps } from '../SkTable/SkCustomCells/SkLinkCell';
 
 export const customCells = {
   ProcessNameLinkCell: (props: SkLinkCellProps<BiFlowResponse>) =>

src/core/components/SkBiFlowList/index.tsx

@@ -5,9 +5,9 @@ import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
 import { customCells } from './BiFlowList.constants';
 import { BiFlowResponse } from '../../../types/REST.interfaces';
 import SkBiFlowDetails from '../SkBiFlowDetails';
-import { SkLinkCellProps } from '../SkLinkCell';
 import SkTable, { SKTableProps } from '../SkTable';
-import SkViewDetailCell from '../SkViewDetailsCell';
+import { SkLinkCellProps } from '../SkTable/SkCustomCells/SkLinkCell';
+import SkViewDetailCell from '../SkTable/SkCustomCells/SkViewDetailsCell';
 
 type SkBiFlowListProps<T extends BiFlowResponse> = SKTableProps<T>;
 

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

@@ -1,5 +1,5 @@
-import { Labels } from '../../../config/labels';
-import { MetricKeys } from '../../../types/SkSankeyChart.interfaces';
+import { Labels } from '../../../../config/labels';
+import { MetricKeys } from '../../../../types/SkSankeyChart.interfaces';
 
 export const DEFAULT_SANKEY_CHART_FLOW_VALUE = 0.000001;
 export const DEFAULT_SANKEY_CHART_HEIGHT = '350px';

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

@@ -4,8 +4,8 @@ import { Toolbar, ToolbarContent, ToolbarToggleGroup, ToolbarItem, ToolbarGroup
 import { FilterIcon } from '@patternfly/react-icons';
 
 import { SankeyMetricOptions, ServiceClientResourceOptions, ServiceServerResourceOptions } from './SkSankey.constants';
-import { MetricKeys } from '../../../types/SkSankeyChart.interfaces';
-import SkSelect from '../SkSelect';
+import { MetricKeys } from '../../../../types/SkSankeyChart.interfaces';
+import SkSelect from '../../SkSelect';
 
 const SankeyFilter: FC<{ onSearch?: Function }> = memo(({ onSearch }) => {
   const [clientType, setClientType] = useState(ServiceClientResourceOptions[0].id);

src/core/components/SKSanckeyChart/index.tsx → src/core/components/SkCharts/SKSanckeyChart/index.tsx

@@ -4,10 +4,10 @@ import { ResponsiveSankey } from '@nivo/sankey';
 
 import { DEFAULT_SANKEY_CHART_HEIGHT } from './SkSankey.constants';
 import SankeyFilter from './SkSankeyFilter';
-import { Labels } from '../../../config/labels';
-import { styles } from '../../../config/styles';
-import { SkSankeyChartLink, SkSankeyChartNode } from '../../../types/SkSankeyChart.interfaces';
-import SKEmptyData from '../SkEmptyData';
+import { Labels } from '../../../../config/labels';
+import { styles } from '../../../../config/styles';
+import { SkSankeyChartLink, SkSankeyChartNode } from '../../../../types/SkSankeyChart.interfaces';
+import SKEmptyData from '../../SkEmptyData';
 
 interface SkSankeyChartProps {
   nodes: SkSankeyChartNode[];

src/core/components/SkChartArea/SkChartArea.utils.ts → src/core/components/SkCharts/SkChartArea/SkChartArea.utils.ts

@@ -1,5 +1,5 @@
 import { CHART_CONFIG } from './SkChartArea.constants';
-import { skAxisXY } from '../../../types/SkChartArea.interfaces';
+import { skAxisXY } from '../../../../types/SkCharts';
 
 /**
  * Calculates tick density based on chart width

src/core/components/SkChartArea/index.tsx → src/core/components/SkCharts/SkChartArea/index.tsx

@@ -15,9 +15,9 @@ import {
 
 import { CHART_CONFIG } from './SkChartArea.constants';
 import { calculateTickDensity, getChartDynamicPaddingLeft } from './SkChartArea.utils';
-import { useChartDimensions } from '../../../hooks/useChartDimensions';
-import { skAxisXY } from '../../../types/SkChartArea.interfaces';
-import { formatChartDateByRange } from '../../utils/formatChartDateByRange';
+import { useChartDimensions } from '../../../../hooks/useChartDimensions';
+import { skAxisXY } from '../../../../types/SkCharts';
+import { formatChartDateByRange } from '../../../utils/formatChartDateByRange';
 
 interface SkChartAreaProps extends ChartProps {
   data: skAxisXY[][];

src/core/components/SkCharts/SkChartPie/SkChartPie.constants.ts

@@ -0,0 +1,8 @@
+const CHART_CONFIG = {
+  LAYOUT: {
+    DEFAULT_PADDING: { bottom: 40, left: 40, right: 40, top: 40 },
+    DEFAULT_HEIGHT: 300
+  }
+};
+
+export { CHART_CONFIG };

src/core/components/SkCharts/SkChartPie/index.tsx

@@ -0,0 +1,59 @@
+import { FC } from 'react';
+
+import { ChartDonut, ChartDonutProps, ChartTooltip } from '@patternfly/react-charts/victory';
+
+import { CHART_CONFIG } from './SkChartPie.constants';
+import { useChartDimensions } from '../../../../hooks/useChartDimensions';
+import { formatToDecimalPlacesIfCents } from '../../../utils/formatToDecimalPlacesIfCents';
+
+export interface SkChartPieProps extends ChartDonutProps {
+  data: { x: string; y: number }[];
+  format?: Function;
+  padding?: Record<string, string>;
+}
+
+const SkChartPie: FC<SkChartPieProps> = function ({
+  data,
+  legendOrientation = 'horizontal',
+  legendPosition = 'bottom',
+  format = (y: number) => y,
+  height = CHART_CONFIG.LAYOUT.DEFAULT_HEIGHT,
+  padding = CHART_CONFIG.LAYOUT.DEFAULT_PADDING,
+  ...props
+}) {
+  const { chartWidth, chartContainerRef } = useChartDimensions();
+
+  const total = data.reduce((acc, { y }) => acc + y, 0);
+  const labels = data.map(({ x, y }) => `${x}: ${format(y)}`);
+  const legendData = data.map(({ x, y }) => ({
+    name: `${x}:  ${total ? formatToDecimalPlacesIfCents((y * 100) / total, 1) : 0}%`
+  }));
+
+  return (
+    <div ref={chartContainerRef} style={{ width: `100%`, height: `${height}px` }}>
+      <ChartDonut
+        width={chartWidth}
+        height={height}
+        legendAllowWrap
+        title={format(total)}
+        data={data}
+        labels={labels}
+        labelComponent={
+          <ChartTooltip
+            cornerRadius={5}
+            flyoutStyle={{
+              fillOpacity: 0.75
+            }}
+          />
+        }
+        legendOrientation={legendOrientation}
+        legendPosition={legendPosition}
+        legendData={legendData}
+        padding={padding}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default SkChartPie;

src/core/components/SKDurationCell/index.tsx → src/core/components/SkTable/SkCustomCells/SKDurationCell/index.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { formatLatency } from '../../utils/formatLatency';
+import { formatLatency } from '../../../../utils/formatLatency';
 
 interface SKDurationCellProps<T> {
   data: T;

src/core/components/SkEndTimeCell/index.tsx → src/core/components/SkTable/SkCustomCells/SkEndTimeCell/index.tsx

@@ -3,8 +3,8 @@ import { ReactNode } from 'react';
 import { Icon, Content, Tooltip } from '@patternfly/react-core';
 import { GlobeAmericasIcon } from '@patternfly/react-icons';
 
-import { EMPTY_VALUE_SYMBOL } from '../../../config/app';
-import { formatLocalizedDateTime } from '../../utils/formatLocalizedDateTime';
+import { EMPTY_VALUE_SYMBOL } from '../../../../../config/app';
+import { formatLocalizedDateTime } from '../../../../utils/formatLocalizedDateTime';
 
 interface EndTimeCellProps<T> {
   data: T;

src/core/components/SkLinkCell/index.tsx → src/core/components/SkTable/SkCustomCells/SkLinkCell/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 
-import { EMPTY_VALUE_SYMBOL } from '../../../config/app';
-import ResourceIcon, { ResourceIconProps } from '../ResourceIcon';
+import { EMPTY_VALUE_SYMBOL } from '../../../../../config/app';
+import ResourceIcon, { ResourceIconProps } from '../../../ResourceIcon';
 
 export interface SkLinkCellProps<T> {
   data: T;

src/pages/Components/Components.constants.ts

@@ -2,8 +2,8 @@ import { SKTableColumn } from 'types/SkTable.interfaces';
 
 import { ComponentRoutesPaths } from './Components.enum';
 import { Labels } from '../../config/labels';
-import SkEndTimeCell from '../../core/components/SkEndTimeCell';
-import SkLinkCell, { SkLinkCellProps } from '../../core/components/SkLinkCell';
+import SkEndTimeCell from '../../core/components/SkTable/SkCustomCells/SkEndTimeCell';
+import SkLinkCell, { SkLinkCellProps } from '../../core/components/SkTable/SkCustomCells/SkLinkCell';
 import { ComponentResponse, PairsResponse } from '../../types/REST.interfaces';
 
 export const ComponentsPaths = {

src/pages/Processes/Processes.constants.ts

@@ -2,9 +2,9 @@ import { SKTableColumn } from 'types/SkTable.interfaces';
 
 import { ProcessesRoutesPaths } from './Processes.enum';
 import { Labels } from '../../config/labels';
-import SkEndTimeCell from '../../core/components/SkEndTimeCell';
-import SkLinkCell, { SkLinkCellProps } from '../../core/components/SkLinkCell';
 import { SkSelectOption } from '../../core/components/SkSelect';
+import SkEndTimeCell from '../../core/components/SkTable/SkCustomCells/SkEndTimeCell';
+import SkLinkCell, { SkLinkCellProps } from '../../core/components/SkTable/SkCustomCells/SkLinkCell';
 import { formatByteRate, formatBytes } from '../../core/utils/formatBytes';
 import { ProcessPairsResponse, ProcessResponse, PairsWithInstantMetrics } from '../../types/REST.interfaces';
 import { ComponentRoutesPaths } from '../Components/Components.enum';

src/pages/Processes/components/PairDetails.tsx

@@ -5,7 +5,7 @@ import { LongArrowAltRightIcon } from '@patternfly/react-icons';
 
 import Details from './Details';
 import { styles } from '../../../config/styles';
-import SkLinkCell from '../../../core/components/SkLinkCell';
+import SkLinkCell from '../../../core/components/SkTable/SkCustomCells/SkLinkCell';
 import { ProcessResponse } from '../../../types/REST.interfaces';
 import { ProcessesRoutesPaths } from '../Processes.enum';