@centreon/ui 26.3.4 → 26.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.3.4",
+  "version": "26.3.5",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -18,7 +18,7 @@ import { Metric } from '../common/timeSeries/models';
 import { useTooltipStyles } from '../common/useTooltipStyles';
 import { getColorFromDataAndTresholds } from '../common/utils';
 
-import { barHeights } from './ThresholdLine';
+import { barHeights, lineMargins } from './ThresholdLine';
 import Thresholds, { groupMargin } from './Thresholds';
 import { SingleBarProps } from './models';
 
@@ -36,7 +36,9 @@ const ResponsiveSingleBar = ({
   baseColor,
   size = 'medium',
   showLabels = true,
-  max
+  max,
+  direction = 'column',
+  textWidth
 }: Props): JSX.Element => {
   const { classes } = useTooltipStyles();
   const theme = useTheme();
@@ -79,16 +81,26 @@ const ResponsiveSingleBar = ({
 
   const textHeight = isSmall ? 46 : 27;
 
+  const textY = useMemo(() => {
+    if (direction === 'row' && isSmall) {
+      return 2;
+    }
+    if (direction === 'row' && !isSmall) {
+      return 22;
+    }
+    return isSmall ? 10 : 25;
+  }, [direction, isSmall]);
+
   const text = showLabels && (
     <text
-      dominantBaseline="middle"
+      dominantBaseline={direction === 'row' ? 'hanging' : 'middle'}
       style={{
         fill: barColor,
         ...textStyle
       }}
-      textAnchor="middle"
-      x="50%"
-      y={isSmall ? 10 : 25}
+      textAnchor={direction === 'row' ? 'start' : 'middle'}
+      x={direction === 'row' ? 0 : '50%'}
+      y={textY}
     >
       {formatMetricValueWithUnit({
         base: 1000,
@@ -99,13 +111,18 @@ const ResponsiveSingleBar = ({
     </text>
   );
 
+  const widthMargin = useMemo(
+    () => (direction === 'row' && textWidth) || 0,
+    [direction, textWidth]
+  );
+
   const xScale = useMemo(
     () =>
       scaleLinear<number>({
         domain: [0, adaptedMaxValue],
-        range: [0, width - 10 || 0]
+        range: [0, width - widthMargin - 10 || 0]
       }),
-    [width, adaptedMaxValue]
+    [width, adaptedMaxValue, widthMargin]
   );
 
   const metricBarWidth = useMemo(
@@ -119,7 +136,10 @@ const ResponsiveSingleBar = ({
 
   const springStyle = useSpring({ width: metricBarWidth });
 
-  const barY = groupMargin + (isSmall ? 0 : 2 * margins.top);
+  const barY =
+    direction === 'row'
+      ? lineMargins[size] / 2
+      : groupMargin + (isSmall ? 0 : 2 * margins.top);
 
   const realBarHeight = !isSmall
     ? clamp(
@@ -161,7 +181,7 @@ const ResponsiveSingleBar = ({
                 height={realBarHeight}
                 rx={4}
                 style={springStyle}
-                x={5}
+                x={direction === 'row' ? textWidth : 5}
                 y={barY}
               />
               <Bar
@@ -171,7 +191,7 @@ const ResponsiveSingleBar = ({
                 ry={4}
                 stroke={alpha(theme.palette.text.primary, 0.3)}
                 width={maxBarWidth}
-                x={5}
+                x={direction === 'row' ? textWidth : 5}
                 y={barY}
               />
               {thresholds.enabled && (
@@ -183,6 +203,8 @@ const ResponsiveSingleBar = ({
                   size={size}
                   thresholds={thresholds}
                   xScale={xScale}
+                  direction={direction}
+                  textWidth={textWidth}
                 />
               )}
             </Group.Group>

package/src/Graph/SingleBar/SingleBar.cypress.spec.tsx

@@ -118,4 +118,29 @@ describe('Single bar', () => {
 
     cy.makeSnapshot();
   });
+
+  it('displays the value on the left of the bar when the corresponding prop is set', () => {
+    initialize({
+      thresholds: successThresholds,
+      direction: 'row',
+      textWidth: 100
+    });
+
+    cy.contains('0.41 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value on the left of the bar when the corresponding prop is set and the size is mall', () => {
+    initialize({
+      thresholds: criticalThresholds,
+      direction: 'row',
+      textWidth: 70,
+      size: 'small'
+    });
+
+    cy.contains('0.41 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/SingleBar/SingleBar.stories.tsx

@@ -12,7 +12,7 @@ export default meta;
 type Story = StoryObj<typeof SingleBar>;
 
 const Template = (props): JSX.Element => (
-  <div style={{ height: '500px', width: '500px' }}>
+  <div style={{ height: '500px', width: '200px' }}>
     <SingleBar {...props} />
   </div>
 );
@@ -230,3 +230,52 @@ export const smallDisplay: Story = {
   },
   render: SmallTemplate
 };
+
+export const RowDirection: Story = {
+  args: {
+    data: dataLastWeek,
+    direction: 'row',
+    textWidth: 100,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const RowDirectionSmall: Story = {
+  args: {
+    data: dataLastWeek,
+    size: 'small',
+    direction: 'row',
+    textWidth: 70,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -4,7 +4,9 @@ import { useTheme } from '@mui/material';
 
 import { margins } from '../common/margins';
 
+import { useMemo } from 'react';
 import { groupMargin } from './Thresholds';
+import { SingleBarProps } from './models';
 
 export const barHeights = {
   medium: 72,
@@ -12,12 +14,12 @@ export const barHeights = {
 };
 export const margin = 40;
 
-const lineMargins = {
+export const lineMargins = {
   medium: 10,
   small: 5
 };
 
-interface Props {
+interface Props extends Pick<SingleBarProps, 'direction'> {
   barHeight: number;
   hideTooltip: () => void;
   isSmall: boolean;
@@ -27,6 +29,7 @@ interface Props {
   thresholdType: string;
   value: number;
   xScale: (value: number) => number;
+  textWidth?: number;
 }
 
 export const ThresholdLine = ({
@@ -38,11 +41,13 @@ export const ThresholdLine = ({
   hideTooltip,
   size,
   barHeight,
-  isSmall
+  isSmall,
+  direction,
+  textWidth
 }: Props): JSX.Element => {
   const theme = useTheme();
 
-  const scaledValue = xScale(value) || 0;
+  const scaledValue = xScale(value) + (textWidth || 0) || 0;
 
   const lineMargin = lineMargins[size];
 
@@ -55,25 +60,35 @@ export const ThresholdLine = ({
     ? theme.palette.warning.main
     : theme.palette.error.main;
 
+  const lineY1 = useMemo(() => {
+    if (direction === 'row') {
+      return 0;
+    }
+    return isSmall
+      ? groupMargin - lineMargin
+      : groupMargin + lineMargin + margins.top;
+  }, [direction, isSmall, groupMargin, lineMargin, margins]);
+
+  const lineY2 = useMemo(() => {
+    if (direction === 'row') {
+      return barHeight + lineMargin;
+    }
+    return isSmall
+      ? barHeight + groupMargin - lineMargin + margins.top - 6
+      : barHeight + groupMargin + lineMargin + 2 * margins.top;
+  }, [direction, isSmall, groupMargin, lineMargin, margins]);
+
   return (
     <>
       <line
         data-testid={`${thresholdType}-line-${value}`}
         stroke={lineColor}
-        strokeDasharray="6, 6"
+        strokeDasharray="6, 5"
         strokeWidth={2}
         x1={scaledValue}
         x2={scaledValue + 1}
-        y1={
-          isSmall
-            ? groupMargin - lineMargin
-            : groupMargin + lineMargin + margins.top
-        }
-        y2={
-          isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top - 6
-            : barHeight + groupMargin + lineMargin + 2 * margins.top
-        }
+        y1={lineY1}
+        y2={lineY2}
       />
       <line
         data-testid={`${thresholdType}-line-${value}-tooltip`}
@@ -81,16 +96,8 @@ export const ThresholdLine = ({
         strokeWidth={5}
         x1={scaledValue}
         x2={scaledValue + 1}
-        y1={
-          isSmall
-            ? groupMargin - lineMargin
-            : groupMargin + lineMargin + margins.top
-        }
-        y2={
-          isSmall
-            ? barHeight + groupMargin - lineMargin + margins.top - 6
-            : barHeight + groupMargin + lineMargin + 2 * margins.top
-        }
+        y1={lineY1}
+        y2={lineY2}
         onMouseEnter={onMouseEnter}
         onMouseLeave={hideTooltip}
       />

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,10 +1,11 @@
 import { Thresholds as ThresholdsModel } from '../common/models';
+import { SingleBarProps } from './models';
 
 import { ThresholdLine } from './ThresholdLine';
 
 export const groupMargin = 25;
 
-interface Props {
+interface Props extends Pick<SingleBarProps, 'direction'> {
   barHeight: number;
   hideTooltip: () => void;
   isSmall: boolean;
@@ -12,6 +13,7 @@ interface Props {
   size: 'small' | 'medium';
   thresholds: ThresholdsModel;
   xScale: (value: number) => number;
+  textWidth?: number;
 }
 
 const Thresholds = ({
@@ -21,7 +23,9 @@ const Thresholds = ({
   hideTooltip,
   size,
   barHeight,
-  isSmall
+  isSmall,
+  direction,
+  textWidth
 }: Props): JSX.Element => (
   <>
     {thresholds.warning.map(({ value, label }) => (
@@ -36,6 +40,8 @@ const Thresholds = ({
         thresholdType="warning"
         value={value}
         xScale={xScale}
+        direction={direction}
+        textWidth={textWidth}
       />
     ))}
     {thresholds.critical.map(({ value, label }) => (
@@ -50,6 +56,8 @@ const Thresholds = ({
         thresholdType="critical"
         value={value}
         xScale={xScale}
+        direction={direction}
+        textWidth={textWidth}
       />
     ))}
   </>

package/src/Graph/SingleBar/models.ts

@@ -8,4 +8,6 @@ export interface SingleBarProps {
   size?: 'medium' | 'small';
   thresholds: Thresholds;
   max?: number;
+  direction?: 'column' | 'row';
+  textWidth?: number; // Applied only when the direction is row
 }

package/src/api/buildListingEndpoint/index.ts

@@ -1,6 +1,5 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
-
 import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
 import { BuildListingEndpointParameters, Parameters } from './models';
 
@@ -27,11 +26,25 @@ const buildEndpoint = ({ baseEndpoint, queryParameters }): string => {
   return `${baseEndpoint}?${toRawQueryParameters(queryParameters)}`;
 };
 
+const buildCustomEndpoint = ({ baseEndpoint, queryParameters }): string => {
+  return `${baseEndpoint}&${toRawQueryParameters(queryParameters)}`;
+};
+
 const buildListingEndpoint = ({
   baseEndpoint,
   parameters,
-  customQueryParameters
+  customQueryParameters,
+  isCustomEndpoint = false
 }: BuildListingEndpointParameters): string => {
+  if (isCustomEndpoint) {
+    return buildCustomEndpoint({
+      baseEndpoint,
+      queryParameters: [
+        ...getQueryParameters({ ...parameters, customQueryParameters })
+      ]
+    });
+  }
+  
   return buildEndpoint({
     baseEndpoint,
     queryParameters: [

package/src/api/buildListingEndpoint/models.ts

@@ -4,6 +4,7 @@ export interface BuildListingEndpointParameters {
   baseEndpoint?: string;
   customQueryParameters?: Array<QueryParameter>;
   parameters: Parameters;
+  isCustomEndpoint?: boolean;
 }
 
 export interface SearchMatch {