@centreon/ui 24.5.2 → 24.5.4

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -1,148 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

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

package/src/Graph/Gauge/models.ts

@@ -1,20 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,137 +0,0 @@
-[
-  {
-    "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
-    }
-  }
-]