@centreon/ui 24.11.14 → 24.11.21

package/src/Graph/Gauge/Gauge.stories.tsx

@@ -0,0 +1,167 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import dataLastWeek from '../mockedData/lastWeek.json';
+
+import { Gauge } from './Gauge';
+
+const meta: Meta<typeof Gauge> = {
+  component: Gauge
+};
+
+export default meta;
+type Story = StoryObj<typeof Gauge>;
+
+const Template = (props): JSX.Element => (
+  <div style={{ display: 'flex', flexDirection: 'row' }}>
+    <div style={{ height: '500px', width: '500px' }}>
+      <Gauge {...props} />
+    </div>
+    <div style={{ height: '100px', width: '120px' }}>
+      <Gauge {...props} />
+    </div>
+    <div style={{ height: '300px', width: '200px' }}>
+      <Gauge {...props} />
+    </div>
+  </div>
+);
+
+export const success: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const warning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.2
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const critical: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.35
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.13
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const withCriticalLowerThanWarning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.13
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const withRangeThresholds: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.55
+        },
+        {
+          label: 'Critical',
+          value: 0.65
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.13
+        },
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const RawValue: Story = {
+  args: {
+    data: dataLastWeek,
+    displayAsRaw: true,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};

package/src/Graph/Gauge/Gauge.tsx

@@ -0,0 +1,41 @@
+import { ParentSize } from '../..';
+import { LineChartData, Thresholds } from '../common/models';
+import { getMetricWithLatestData } from '../common/timeSeries';
+import { Metric } from '../common/timeSeries/models';
+
+import ResponsiveGauge from './ResponsiveGauge';
+
+export interface Props {
+  baseColor?: string;
+  data?: LineChartData;
+  displayAsRaw?: boolean;
+  thresholds: Thresholds;
+}
+
+export const Gauge = ({
+  thresholds,
+  data,
+  displayAsRaw,
+  baseColor
+}: Props): JSX.Element | null => {
+  if (!data) {
+    return null;
+  }
+
+  const metric = getMetricWithLatestData(data) as Metric;
+
+  return (
+    <ParentSize>
+      {({ width, height }) => (
+        <ResponsiveGauge
+          baseColor={baseColor}
+          displayAsRaw={displayAsRaw}
+          height={height}
+          metric={metric}
+          thresholds={thresholds}
+          width={width}
+        />
+      )}
+    </ParentSize>
+  );
+};

package/src/Graph/Gauge/PieData.tsx

@@ -0,0 +1,68 @@
+import { scaleOrdinal } from '@visx/scale';
+import { Pie } from '@visx/shape';
+import { identity } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import { getColorFromDataAndTresholds } from '../common/utils';
+
+import AnimatedPie from './AnimatedPie';
+import { thresholdThickness } from './Thresholds';
+import { GaugeProps } from './models';
+import { angles } from './utils';
+
+const dataThickness = 45;
+
+const PieData = ({
+  metric,
+  adaptedMaxValue,
+  thresholds,
+  radius,
+  baseColor
+}: Omit<
+  GaugeProps,
+  'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
+>): JSX.Element => {
+  const theme = useTheme();
+
+  const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
+  const pieColor = getColorFromDataAndTresholds({
+    baseColor,
+    data: metric.data[0],
+    theme,
+    thresholds
+  });
+
+  const getDataColor = scaleOrdinal({
+    domain: pieData,
+    range: [pieColor, 'transparent']
+  });
+
+  const dataThicknessFactor = radius / dataThickness / 3;
+  const thresholdThicknessFactor = radius / thresholdThickness / 15;
+
+  return (
+    <Pie
+      {...angles}
+      data={pieData}
+      innerRadius={radius - dataThickness * dataThicknessFactor}
+      outerRadius={
+        radius - thresholdThickness * thresholdThicknessFactor * 1.25
+      }
+      pieSortValues={() => -1}
+      pieValue={identity}
+    >
+      {(pie) => (
+        <AnimatedPie<number>
+          {...pie}
+          animate
+          getColor={(arc) => getDataColor(arc.data)}
+          getKey={(arc) => `${arc.data}`}
+          thresholds={thresholds}
+        />
+      )}
+    </Pie>
+  );
+};
+
+export default PieData;

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -0,0 +1,134 @@
+import { useRef } from 'react';
+
+import { Group } from '@visx/group';
+import { Tooltip } from '@visx/visx';
+import { flatten, head, pluck } from 'ramda';
+
+import { Box, useTheme } from '@mui/material';
+
+import { Tooltip as MuiTooltip } from '../../components/Tooltip';
+import { margins } from '../common/margins';
+import { formatMetricValueWithUnit } from '../common/timeSeries';
+import { Metric } from '../common/timeSeries/models';
+import { useTooltipStyles } from '../common/useTooltipStyles';
+import { getColorFromDataAndTresholds } from '../common/utils';
+
+import PieData from './PieData';
+import Thresholds from './Thresholds';
+import { GaugeProps } from './models';
+
+interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
+  displayAsRaw?: boolean;
+  height: number;
+  metric: Metric;
+  width: number;
+}
+
+const ResponsiveGauge = ({
+  width,
+  height,
+  thresholds,
+  metric,
+  displayAsRaw,
+  baseColor
+}: Props): JSX.Element => {
+  const { classes } = useTooltipStyles();
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  const theme = useTheme();
+
+  const { showTooltip, hideTooltip, tooltipOpen, 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 baseSize = Math.min(width, height);
+  const heightOverWidthRatio = height / width;
+  const radius = baseSize / (heightOverWidthRatio > 0.9 ? 2 : 1.8);
+  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 gaugeValue = formatMetricValueWithUnit({
+    base: 1000,
+    isRaw: displayAsRaw,
+    unit: metric.unit,
+    value: metric.data[0]
+  });
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        overflow: 'hidden',
+        position: 'relative',
+        width: '100%'
+      }}
+    >
+      <MuiTooltip
+        classes={{
+          tooltip: classes.tooltip
+        }}
+        label={tooltipData}
+        open={thresholds.enabled && tooltipOpen}
+        placement="top"
+      >
+        <svg height={height} ref={svgRef} width={width}>
+          <Group
+            left={centerX + margins.left}
+            top={centerY + margins.top + baseSize / 8}
+          >
+            <Thresholds
+              adaptedMaxValue={adaptedMaxValue}
+              hideTooltip={hideTooltip}
+              metric={metric}
+              radius={radius}
+              showTooltip={showTooltip}
+              thresholds={thresholds}
+            />
+            <PieData
+              adaptedMaxValue={adaptedMaxValue}
+              baseColor={baseColor}
+              metric={metric}
+              radius={radius}
+              thresholds={thresholds}
+            />
+            <text
+              dominantBaseline="middle"
+              style={{
+                fill: pieColor,
+                ...theme.typography.h3,
+                fontSize:
+                  Math.min(width, height) / (gaugeValue?.length || 1) + 3
+              }}
+              textAnchor="middle"
+              x="0%"
+              y="0%"
+            >
+              {gaugeValue}
+            </text>
+          </Group>
+        </svg>
+      </MuiTooltip>
+    </Box>
+  );
+};
+
+export default ResponsiveGauge;

package/src/Graph/Gauge/Thresholds.tsx

@@ -0,0 +1,119 @@
+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';
+import { angles } from './utils';
+
+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
+    }
+  ];
+
+  const thresholdThicknessFactor = radius / thresholdThickness / 15;
+
+  return (
+    <>
+      {arcs.map(({ thresholdArc, thresholdScaleOrdinal }) => (
+        <Pie
+          {...angles}
+          data={thresholdArc}
+          innerRadius={radius - thresholdThickness * thresholdThicknessFactor}
+          key={`arc-${thresholdArc[0].name}`}
+          outerRadius={radius}
+          pieSortValues={() => -1}
+          pieValue={(d) => d.value}
+        >
+          {(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 = 0,
+  Error = 1,
+  Success = 2
+}

package/src/Graph/Gauge/utils.ts

@@ -0,0 +1,4 @@
+export const angles = {
+  endAngle: -(2 * Math.PI) / 3,
+  startAngle: (2 * Math.PI) / 3
+};

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');
+  });
+});