@centreon/ui 24.5.12 → 24.5.13

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

@@ -0,0 +1,204 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+
+import { SingleBar } from '.';
+
+const meta: Meta<typeof SingleBar> = {
+  component: SingleBar
+};
+
+export default meta;
+type Story = StoryObj<typeof SingleBar>;
+
+const Template = (props): JSX.Element => (
+  <div style={{ height: '500px', width: '500px' }}>
+    <SingleBar {...props} />
+  </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.5
+        }
+      ],
+      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 disabled: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.35
+        }
+      ],
+      enabled: false,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.13
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const criticalLowerThanWarning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.13
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const rangeThresholds: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical 1',
+          value: 0.5
+        },
+        {
+          label: 'Critical 2',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning 1',
+          value: 0.13
+        },
+        {
+          label: 'Warning 2',
+          value: 0.3
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const RawValue: Story = {
+  args: {
+    data: dataLastWeek,
+    displayAsRaw: true,
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: false,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const Small: Story = {
+  args: {
+    data: dataLastWeek,
+    size: 'small',
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.6
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};

package/src/Graph/SingleBar/SingleBar.tsx

@@ -0,0 +1,25 @@
+import { ParentSize } from '../..';
+
+import { SingleBarProps } from './models';
+import ResponsiveSingleBar from './ResponsiveSingleBar';
+
+const SingleBar = ({ data, ...props }: SingleBarProps): JSX.Element | null => {
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <ParentSize>
+      {({ width, height }) => (
+        <ResponsiveSingleBar
+          {...props}
+          data={data}
+          height={height}
+          width={width}
+        />
+      )}
+    </ParentSize>
+  );
+};
+
+export default SingleBar;

package/src/Graph/SingleBar/ThresholdLine.tsx

@@ -0,0 +1,103 @@
+import { equals } from 'ramda';
+
+import { useTheme } from '@mui/material';
+
+import { margins } from '../common/margins';
+
+import { groupMargin } from './Thresholds';
+
+export const barHeights = {
+  medium: 72,
+  small: 22
+};
+export const margin = 40;
+
+const lineMargins = {
+  medium: 10,
+  small: 5
+};
+
+interface Props {
+  hideTooltip: () => void;
+  label: string;
+  showTooltip: (args) => void;
+  size: 'small' | 'medium';
+  thresholdType: string;
+  value: number;
+  xScale: (value: number) => number;
+}
+
+export const ThresholdLine = ({
+  value,
+  label,
+  xScale,
+  thresholdType,
+  showTooltip,
+  hideTooltip,
+  size
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const scaledValue = xScale(value) || 0;
+
+  const lineMargin = lineMargins[size];
+
+  const thresholdLineHeight = barHeights[size] + 2 * lineMargin;
+
+  const isSmall = equals(size, 'small');
+
+  const bottom = barHeights[size] + margin * 2;
+
+  const onMouseEnter = (left) => (): void =>
+    showTooltip({
+      tooltipData: label,
+      tooltipLeft: left,
+      tooltipTop: bottom
+    });
+
+  const lineColor = equals(thresholdType, 'warning')
+    ? theme.palette.warning.main
+    : theme.palette.error.main;
+
+  return (
+    <>
+      <line
+        data-testid={`${thresholdType}-line-${value}`}
+        stroke={lineColor}
+        strokeDasharray="6, 6"
+        strokeWidth={2}
+        x1={scaledValue}
+        x2={scaledValue}
+        y1={
+          isSmall
+            ? groupMargin - lineMargin
+            : groupMargin + lineMargin + margins.top
+        }
+        y2={
+          isSmall
+            ? thresholdLineHeight + groupMargin - lineMargin
+            : thresholdLineHeight + groupMargin + lineMargin + margins.top
+        }
+      />
+      <line
+        data-testid={`${thresholdType}-line-${value}-tooltip`}
+        stroke="transparent"
+        strokeWidth={5}
+        x1={scaledValue}
+        x2={scaledValue}
+        y1={
+          isSmall
+            ? groupMargin - lineMargin
+            : groupMargin + lineMargin + margins.top
+        }
+        y2={
+          isSmall
+            ? thresholdLineHeight + groupMargin - lineMargin
+            : thresholdLineHeight + groupMargin + lineMargin + margins.top
+        }
+        onMouseEnter={onMouseEnter(scaledValue)}
+        onMouseLeave={hideTooltip}
+      />
+    </>
+  );
+};

package/src/Graph/SingleBar/Thresholds.tsx

@@ -0,0 +1,50 @@
+import { Thresholds as ThresholdsModel } from '../common/models';
+
+import { ThresholdLine } from './ThresholdLine';
+
+export const groupMargin = 25;
+
+interface Props {
+  hideTooltip: () => void;
+  showTooltip: (args) => void;
+  size: 'small' | 'medium';
+  thresholds: ThresholdsModel;
+  xScale: (value: number) => number;
+}
+
+const Thresholds = ({
+  xScale,
+  thresholds,
+  showTooltip,
+  hideTooltip,
+  size
+}: Props): JSX.Element => (
+  <>
+    {thresholds.warning.map(({ value, label }) => (
+      <ThresholdLine
+        hideTooltip={hideTooltip}
+        key={`warning-${value.toString()}`}
+        label={label}
+        showTooltip={showTooltip}
+        size={size}
+        thresholdType="warning"
+        value={value}
+        xScale={xScale}
+      />
+    ))}
+    {thresholds.critical.map(({ value, label }) => (
+      <ThresholdLine
+        hideTooltip={hideTooltip}
+        key={`critical-${value.toString()}`}
+        label={label}
+        showTooltip={showTooltip}
+        size={size}
+        thresholdType="critical"
+        value={value}
+        xScale={xScale}
+      />
+    ))}
+  </>
+);
+
+export default Thresholds;

package/src/Graph/SingleBar/index.ts

@@ -0,0 +1 @@
+export { default as SingleBar } from './SingleBar';

package/src/Graph/SingleBar/models.ts

@@ -0,0 +1,10 @@
+import { LineChartData, Thresholds } from '../common/models';
+
+export interface SingleBarProps {
+  baseColor?: string;
+  data?: LineChartData;
+  displayAsRaw?: boolean;
+  showLabels?: boolean;
+  size?: 'medium' | 'small';
+  thresholds: Thresholds;
+}

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

@@ -0,0 +1,101 @@
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+
+import { Text, Props } from './Text';
+
+const initialize = (
+  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
+): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <Text
+          baseColor="#000"
+          data={dataLastWeek}
+          labels={{
+            critical: 'Critical',
+            warning: 'Warning'
+          }}
+          {...args}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Text', () => {
+  it('displays the text as success when corresponding thresholds are set', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(136, 185, 34)');
+    cy.contains('Warning: 0.5 s').should('be.visible');
+    cy.contains('Critical: 1.5 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the text as warning when corresponding thresholds are set', () => {
+    initialize({ thresholds: warningThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(253, 155, 39)');
+    cy.contains('Warning: 0.4 s').should('be.visible');
+    cy.contains('Critical: 1.5 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the text as critical when corresponding thresholds are set', () => {
+    initialize({ thresholds: criticalThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(255, 74, 74)');
+    cy.contains('Warning: 0.2 s').should('be.visible');
+    cy.contains('Critical: 0.3 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays ranged thresholds', () => {
+    initialize({ thresholds: rangedThresholds });
+
+    cy.contains('Warning: 0.13 s - 0.5 s').should('be.visible');
+    cy.contains('Critical: 0.55 s - 0.65 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value as raw when the prop is set', () => {
+    initialize({ displayAsRaw: true, thresholds: successThresholds });
+
+    cy.contains('0.40663333333 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the text', () => {
+    initialize({ data: undefined, thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays text with default values when the data is empty', () => {
+    initialize({
+      data: {
+        global: {},
+        metrics: [],
+        times: []
+      },
+      thresholds: successThresholds
+    });
+
+    cy.contains('0').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/Text/Text.stories.tsx

@@ -0,0 +1,123 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+
+import { Text } from '.';
+
+const meta: Meta<typeof Text> = {
+  component: Text
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+const Template = (props): JSX.Element => (
+  <div style={{ height: '500px', width: '500px' }}>
+    <Text {...props} />
+  </div>
+);
+
+export const success: Story = {
+  args: {
+    data: dataLastWeek,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const warning: Story = {
+  args: {
+    data: dataLastWeek,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.4
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const critical: Story = {
+  args: {
+    data: dataLastWeek,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.3
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.2
+        }
+      ]
+    }
+  },
+  render: Template
+};
+
+export const rawValue: Story = {
+  args: {
+    data: dataLastWeek,
+    displayAsRaw: true,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
+  },
+  render: Template
+};

package/src/Graph/Text/Text.styles.ts

@@ -0,0 +1,28 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useTextStyles = makeStyles()((theme) => ({
+  critical: {
+    color: theme.palette.error.main
+  },
+  graphText: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    height: '100%',
+    justifyContent: 'center'
+  },
+  threshold: {
+    textAlign: 'center'
+  },
+  thresholds: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(5),
+    whiteSpace: 'nowrap',
+    width: '100%'
+  },
+  warning: {
+    color: theme.palette.warning.main
+  }
+}));