@centreon/ui 24.4.73 → 24.4.75

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -0,0 +1,148 @@
+import { useRef } from 'react';
+
+import { Group } from '@visx/group';
+import { flatten, head, pluck } from 'ramda';
+import { Tooltip } from '@visx/visx';
+
+import { Box, Fade, useTheme } from '@mui/material';
+
+import { Metric } from '../common/timeSeries/models';
+import { formatMetricValueWithUnit } from '../common/timeSeries';
+import { getColorFromDataAndTresholds } from '../common/utils';
+import { margins } from '../common/margins';
+
+import Thresholds from './Thresholds';
+import PieData from './PieData';
+import { GaugeProps } from './models';
+
+interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
+  displayAsRaw?: boolean;
+  height: number;
+  metric: Metric;
+  width: number;
+}
+
+const baseStyles = {
+  ...Tooltip.defaultStyles,
+  textAlign: 'center'
+};
+
+const ResponsiveGauge = ({
+  width,
+  height,
+  thresholds,
+  metric,
+  displayAsRaw,
+  baseColor
+}: Props): JSX.Element => {
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  const theme = useTheme();
+
+  const {
+    showTooltip,
+    hideTooltip,
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData
+  } = Tooltip.useTooltip();
+
+  const innerWidth = width - margins.left - margins.right;
+  const innerHeight = height - margins.top - margins.bottom;
+  const centerY = innerHeight / 2;
+  const centerX = innerWidth / 2;
+  const radius = Math.min(innerWidth, innerHeight) / 2;
+  const thresholdValues = thresholds.enabled
+    ? flatten([
+        pluck('value', thresholds.warning),
+        pluck('value', thresholds.critical)
+      ])
+    : [0];
+  const adaptedMaxValue = Math.max(
+    metric.maximum_value || 0,
+    Math.max(...thresholdValues) * 1.1,
+    head(metric.data) as number
+  );
+
+  const pieColor = getColorFromDataAndTresholds({
+    baseColor,
+    data: metric.data[0],
+    theme,
+    thresholds
+  });
+
+  const svgTop = svgRef.current?.getBoundingClientRect().top || 0;
+  const svgLeft = svgRef.current?.getBoundingClientRect().left || 0;
+
+  const isSmallWidget = height < 240;
+
+  const gaugeValue = formatMetricValueWithUnit({
+    base: 1000,
+    isRaw: displayAsRaw,
+    unit: metric.unit,
+    value: metric.data[0]
+  });
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        overflow: 'hidden',
+        position: 'relative',
+        width: '100%'
+      }}
+    >
+      <svg height={height} ref={svgRef} width={width}>
+        <Group left={centerX + margins.left} top={centerY + height / 6}>
+          <Thresholds
+            adaptedMaxValue={adaptedMaxValue}
+            hideTooltip={hideTooltip}
+            metric={metric}
+            radius={radius}
+            showTooltip={showTooltip}
+            thresholds={thresholds}
+          />
+          <PieData
+            adaptedMaxValue={adaptedMaxValue}
+            baseColor={baseColor}
+            metric={metric}
+            radius={radius}
+            thresholds={thresholds}
+          />
+        </Group>
+        <text
+          dominantBaseline="middle"
+          style={{
+            fill: pieColor,
+            ...theme.typography.h3,
+            fontSize:
+              Math.min(width, height) / 7 -
+              (isSmallWidget ? 0 : (gaugeValue?.length || 0) * 2)
+          }}
+          textAnchor="middle"
+          x="50%"
+          y={isSmallWidget ? 130 : height - height / 2.3}
+        >
+          {gaugeValue}
+        </text>
+      </svg>
+      <Fade in={tooltipOpen && thresholds.enabled}>
+        <Tooltip.Tooltip
+          left={(tooltipLeft || 0) - svgLeft}
+          style={{
+            ...baseStyles,
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.primary,
+            transform: 'translate(-50%, -24px)'
+          }}
+          top={(tooltipTop || 0) - svgTop + 20}
+        >
+          {tooltipData}
+        </Tooltip.Tooltip>
+      </Fade>
+    </Box>
+  );
+};
+
+export default ResponsiveGauge;

package/src/Graph/Gauge/Thresholds.tsx

@@ -0,0 +1,117 @@
+import { scaleOrdinal } from '@visx/scale';
+import { Pie } from '@visx/shape';
+import { equals, pluck } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import AnimatedPie from './AnimatedPie';
+import { GaugeProps } from './models';
+
+export const thresholdThickness = 12;
+
+const Thresholds = ({
+  thresholds,
+  radius,
+  adaptedMaxValue,
+  showTooltip,
+  hideTooltip,
+  metric
+}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element | null => {
+  const theme = useTheme();
+
+  const criticalThresholdValues = pluck('value', thresholds.critical);
+  const warningThresholdValues = pluck('value', thresholds.warning);
+
+  const isCriticalLowerThanWarning =
+    criticalThresholdValues[0] < warningThresholdValues[0];
+
+  const criticalThreshold = isCriticalLowerThanWarning
+    ? [0, ...criticalThresholdValues, adaptedMaxValue]
+    : [...criticalThresholdValues, adaptedMaxValue];
+  const criticalThresholdArc = criticalThreshold.map((value, index) => {
+    return {
+      name: equals(1, index) ? 'critical' : `transparent-${index}-critical`,
+      value: value - (criticalThreshold[index - 1] || 0)
+    };
+  });
+  const criticalThresholdScaleOrdinal = scaleOrdinal({
+    domain: pluck('name', criticalThresholdArc),
+    range: ['transparent', theme.palette.error.main, 'transparent']
+  });
+
+  const warningThreshold = isCriticalLowerThanWarning
+    ? [0, ...warningThresholdValues, adaptedMaxValue]
+    : [...warningThresholdValues, adaptedMaxValue];
+  const warningThresholdArc = warningThreshold.map((value, index) => {
+    return {
+      name: equals(1, index) ? 'warning' : `transparent-${index}-warning`,
+      value: value - (warningThreshold[index - 1] || 0)
+    };
+  });
+  const warningThresholdScaleOrdinal = scaleOrdinal({
+    domain: pluck('name', warningThresholdArc),
+    range: ['transparent', theme.palette.warning.main, 'transparent']
+  });
+
+  const successThresholdArc = [adaptedMaxValue].map((value) => {
+    return {
+      name: 'success',
+      value
+    };
+  });
+  const successThresholdScaleOrdinal = scaleOrdinal({
+    domain: pluck('name', successThresholdArc),
+    range: [theme.palette.success.main]
+  });
+
+  if (!thresholds.enabled) {
+    return null;
+  }
+
+  const arcs = [
+    {
+      thresholdArc: successThresholdArc,
+      thresholdScaleOrdinal: successThresholdScaleOrdinal
+    },
+    {
+      thresholdArc: warningThresholdArc,
+      thresholdScaleOrdinal: warningThresholdScaleOrdinal
+    },
+    {
+      thresholdArc: criticalThresholdArc,
+      thresholdScaleOrdinal: criticalThresholdScaleOrdinal
+    }
+  ];
+
+  return (
+    <>
+      {arcs.map(({ thresholdArc, thresholdScaleOrdinal }) => (
+        <Pie
+          data={thresholdArc}
+          endAngle={-Math.PI / 2}
+          innerRadius={radius - thresholdThickness}
+          key={`arc-${thresholdArc[0].name}`}
+          outerRadius={radius}
+          pieSortValues={() => -1}
+          pieValue={(d) => d.value}
+          startAngle={Math.PI / 2}
+        >
+          {(pie) => (
+            <AnimatedPie<{ name: string; value: number }>
+              {...pie}
+              animate
+              getColor={(arc) => thresholdScaleOrdinal(arc.data.name)}
+              getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
+              hideTooltip={hideTooltip}
+              metric={metric}
+              showTooltip={showTooltip}
+              thresholds={thresholds}
+            />
+          )}
+        </Pie>
+      ))}
+    </>
+  );
+};
+
+export default Thresholds;

package/src/Graph/Gauge/index.ts

@@ -0,0 +1 @@
+export { Gauge } from './Gauge';

package/src/Graph/Gauge/models.ts

@@ -0,0 +1,20 @@
+import { Thresholds } from '../common/models';
+import { Metric } from '../common/timeSeries/models';
+
+export interface GaugeProps {
+  adaptedMaxValue: number;
+  baseColor?: string;
+  height: number;
+  hideTooltip: () => void;
+  metric: Metric;
+  radius: number;
+  showTooltip: (args) => void;
+  thresholds: Thresholds;
+  width: number;
+}
+
+export enum ThresholdType {
+  Warning,
+  Error,
+  Success
+}

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

@@ -0,0 +1,145 @@
+import { pluck } from 'ramda';
+
+import { Box, Typography } from '@mui/material';
+
+import EllipsisTypography from '../../Typography/EllipsisTypography';
+
+import HeatMap from './HeatMap';
+import heatMapData from './HeatMapData.json';
+import { HeatMapProps } from './model';
+
+const dataIds = pluck('id', heatMapData);
+
+interface Data {
+  counter: number;
+  host: string;
+  service: string;
+}
+
+const TileContent = ({
+  isSmallestSize,
+  data
+}: {
+  data: Data;
+  isSmallestSize: boolean;
+}): JSX.Element | false =>
+  !isSmallestSize && (
+    <Box
+      sx={{
+        alignItems: 'center',
+        color: 'common.black',
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%'
+      }}
+    >
+      <EllipsisTypography textAlign="center">{data.host}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.service}</EllipsisTypography>
+      <EllipsisTypography textAlign="center">{data.counter}</EllipsisTypography>
+    </Box>
+  );
+
+const initialize = ({
+  width = '100vw',
+  height = '100vh',
+  ...args
+}: Omit<HeatMapProps<Data>, 'tiles' | 'children'> & {
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <HeatMap tiles={heatMapData} {...args}>
+          {TileContent}
+        </HeatMap>
+      </div>
+    )
+  });
+};
+
+describe('HeatMap', () => {
+  it('displays tiles', () => {
+    initialize({});
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('be.visible');
+    });
+  });
+
+  it('does not display the tooltip when the prop is not set and the tile is hovered', () => {
+    initialize({});
+
+    cy.findByTestId(dataIds[0]).trigger('mouseover');
+
+    cy.findByTestId(`tooltip-${dataIds[0]}`).should('not.exist');
+  });
+
+  it('displays the tooltip when the prop is set and the tile is hovered', () => {
+    initialize({
+      tooltipContent: ({ data }) => (
+        <Typography>
+          This is the tooltip for {data.host}-{data.service}-{data.counter}
+        </Typography>
+      )
+    });
+
+    cy.findByTestId(dataIds[0]).trigger('mouseover');
+
+    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
+      'be.visible'
+    );
+  });
+
+  it('displays the tooltip conditionally when the prop is set and the tile is hovered', () => {
+    initialize({
+      displayTooltipCondition: ({ counter }) => counter > 100,
+      tooltipContent: ({ data }) => (
+        <Typography>
+          This is the tooltip for {data.host}-{data.service}-{data.counter}
+        </Typography>
+      )
+    });
+
+    cy.findByTestId(dataIds[0]).trigger('mouseover');
+
+    cy.contains(`This is the tooltip for Server-Service Counter-53`).should(
+      'not.exist'
+    );
+
+    cy.findByTestId(dataIds[1]).trigger('mouseover');
+
+    cy.contains(`This is the tooltip for Server-Service Counter-779`).should(
+      'be.visible'
+    );
+  });
+
+  it('displays tiles with fixed size', () => {
+    initialize({ height: '200px', tileSizeFixed: true, width: '590px' });
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('be.visible');
+    });
+  });
+
+  it('displays tiles as small when the container width is under the breakpoint', () => {
+    initialize({ height: '200px', width: '590px' });
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display tiles as small when the contains width is 0', () => {
+    initialize({ height: '200px', width: '0px' });
+    dataIds.forEach((id) => {
+      cy.findByTestId(id).should('not.exist');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a single tile', () => {
+    initialize({ tiles: [heatMapData[0]] });
+    cy.findByTestId(dataIds[0]).should('be.visible');
+  });
+});

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -0,0 +1,80 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { makeStyles } from 'tss-react/mui';
+
+import { Box, Typography } from '@mui/material';
+
+import heatMapData from './HeatMapData.json';
+
+import { HeatMap } from '.';
+
+interface Data {
+  counter: number;
+  host: string;
+  service: string;
+}
+
+const meta: Meta<typeof HeatMap<Data>> = {
+  component: HeatMap
+};
+
+export default meta;
+type Story = StoryObj<typeof HeatMap<Data>>;
+
+const TooltipContent = ({ data }: { data: Data }): JSX.Element => {
+  return (
+    <Box sx={{ backgroundColor: 'common.white', color: 'common.black' }}>
+      <Box
+        sx={{
+          backgroundColor: 'common.black',
+          color: 'common.white',
+          display: 'flex',
+          justifyContent: 'center',
+          py: 1,
+          width: '100%'
+        }}
+      >
+        <Typography>{data.host}</Typography>
+      </Box>
+      <Box sx={{ px: 1, textAlign: 'center' }}>
+        <Typography>{data.service}</Typography>
+        <Typography>{data.counter}</Typography>
+      </Box>
+    </Box>
+  );
+};
+
+const useStyles = makeStyles()((theme) => ({
+  arrow: {
+    color: theme.palette.common.black
+  }
+}));
+
+const Template = (args): JSX.Element => {
+  const { classes } = useStyles();
+
+  return <HeatMap {...args} arrowClassName={classes.arrow} />;
+};
+
+export const normal: Story = {
+  args: {
+    children: TileContent,
+    tiles: heatMapData
+  }
+};
+
+export const withTooltip: Story = {
+  args: {
+    children: TileContent,
+    tiles: heatMapData,
+    tooltipContent: TooltipContent
+  },
+  render: Template
+};
+
+export const tilesWithFixedSize: Story = {
+  args: {
+    children: TileContent,
+    tileSizeFixed: true,
+    tiles: heatMapData
+  }
+};

package/src/Graph/HeatMap/HeatMap.styles.tsx

@@ -0,0 +1,29 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useHeatMapStyles = makeStyles()((theme) => ({
+  arrow: {
+    transform: 'transled3d(0px, 8px, 0px)'
+  },
+  heatMapTile: {
+    alignItems: 'center',
+    aspectRatio: '1 / 1',
+    borderRadius: theme.shape.borderRadius,
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%'
+  },
+  heatMapTileContent: {
+    height: `calc(100% - ${theme.spacing(1)})`,
+    width: `calc(100% - ${theme.spacing(1)})`
+  },
+  heatMapTooltip: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    marginLeft: `${theme.spacing(1.25)} !important`,
+    padding: 0,
+    position: 'relative'
+  },
+  heatMapTooltipArrow: {
+    transform: `translate3d(0px, ${theme.spacing(1)}, 0px) !important`
+  }
+}));

package/src/Graph/HeatMap/HeatMap.tsx

@@ -0,0 +1,12 @@
+import { ParentSize } from '../..';
+
+import ResponsiveHeatMap from './ResponsiveHeatMap';
+import { HeatMapProps } from './model';
+
+const HeatMap = <TData,>(props: HeatMapProps<TData>): JSX.Element => (
+  <ParentSize>
+    {({ width }) => <ResponsiveHeatMap<TData> {...props} width={width} />}
+  </ParentSize>
+);
+
+export default HeatMap;

package/src/Graph/HeatMap/HeatMapData.json

@@ -0,0 +1,137 @@
+[
+  {
+    "id": "Orbaxter",
+    "backgroundColor": "#88B922",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 53
+    }
+  },
+  {
+    "id": "Interfind",
+    "backgroundColor": "#88B922",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 779
+    }
+  },
+  {
+    "id": "Ecratic",
+    "backgroundColor": "#E3E3E3",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 504
+    }
+  },
+  {
+    "id": "Earthwax",
+    "backgroundColor": "#88B922",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 374
+    }
+  },
+  {
+    "id": "Cytrak",
+    "backgroundColor": "#FF6666",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 957
+    }
+  },
+  {
+    "id": "Exiand",
+    "backgroundColor": "#1EBEB3",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 281
+    }
+  },
+  {
+    "id": "Ginkogene",
+    "backgroundColor": "#FF6666",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 472
+    }
+  },
+  {
+    "id": "Quailcom",
+    "backgroundColor": "#88B922",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 770
+    }
+  },
+  {
+    "id": "Cormoran",
+    "backgroundColor": "#FF6666",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 908
+    }
+  },
+  {
+    "id": "Emergent",
+    "backgroundColor": "#1EBEB3",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 969
+    }
+  },
+  {
+    "id": "Limozen",
+    "backgroundColor": "#E3E3E3",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 33
+    }
+  },
+  {
+    "id": "Gogol",
+    "backgroundColor": "#1EBEB3",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 870
+    }
+  },
+  {
+    "id": "Luxuria",
+    "backgroundColor": "#FD9B27",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 270
+    }
+  },
+  {
+    "id": "Fossiel",
+    "backgroundColor": "#1EBEB3",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 955
+    }
+  },
+  {
+    "id": "Hawkster",
+    "backgroundColor": "#88B922",
+    "data": {
+      "host": "Server",
+      "service": "Service Counter",
+      "counter": 28
+    }
+  }
+]