@centreon/ui 24.5.12 → 24.5.13

package/src/Graph/common/timeSeries/models.ts

@@ -0,0 +1,129 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
+
+interface DsData {
+  ds_color_area: string;
+  ds_color_line: string;
+  ds_filled: boolean;
+  ds_invert: string | null;
+  ds_legend: string | null;
+  ds_order: string | null;
+  ds_stack: string | null;
+  ds_transparency: number;
+}
+
+export interface Metric {
+  average_value: number | null;
+  crit: number | null;
+  critical_high_threshold: number | null;
+  critical_low_threshold: number | null;
+  data: Array<number | null>;
+  ds_data?: DsData;
+  legend: string;
+  maximum_value: number | null;
+  metric: string;
+  metric_id: number;
+  minimum_value: number | null;
+  unit: string;
+  warning_high_threshold: number | null;
+  warning_low_threshold: number | null;
+}
+
+type TimeSeries = { timeTick: string };
+
+export type TimeValue = TimeSeries & {
+  [field: number]: number;
+};
+
+export interface Line {
+  areaColor: string;
+  average_value: number | null;
+  color: string;
+  display: boolean;
+  filled: boolean;
+  highlight?: boolean;
+  invert: string | null;
+  legend: string | null;
+  lineColor: string;
+  maximum_value: number | null;
+  metric: string;
+  metric_id: number;
+  minimum_value: number | null;
+  name: string;
+  stackOrder: number | null;
+  transparency: number;
+  unit: string;
+}
+
+export enum GraphOptionId {
+  displayEvents = 'displayEvents',
+  displayTooltips = 'displayTooltips'
+}
+
+export interface AdditionalDataProps<T> {
+  additionalData?: T | null;
+}
+
+export interface Xscale {
+  dataTime: Array<TimeValue>;
+  valueWidth: number;
+}
+export interface AxeScale {
+  dataLines: Array<Line>;
+  dataTimeSeries: Array<TimeValue>;
+  thresholdUnit?: string;
+  thresholds: Array<number>;
+  valueGraphHeight: number;
+}
+
+export interface GetYScaleProps {
+  hasMoreThanTwoUnits: boolean;
+  invert: string | null;
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+  secondUnit: string;
+  unit: string;
+}
+
+export interface LinesProps {
+  getSortedStackedLines: (lines: Array<Line>) => Array<Line>;
+  getTime: (timeValue: TimeValue) => number;
+  getUnits: (lines: Array<Line>) => Array<string>;
+  getYScale: ({
+    hasMoreThanTwoUnits,
+    unit,
+    secondUnit,
+    leftScale,
+    rightScale,
+    invert
+  }: GetYScaleProps) => ScaleLinear<number, number>;
+  graphHeight: number;
+  graphWidth: number;
+  leftScale: ScaleLinear<number, number, never>;
+  lines: Array<Line>;
+  rightScale: ScaleLinear<number, number, never>;
+  timeSeries: Array<TimeValue>;
+  xScale: ScaleTime<number, number, never>;
+}
+
+export interface NewLines {
+  newLines: Array<Line>;
+  newSortedLines: Array<Line>;
+}
+
+export interface FormatMetricValueProps {
+  base?: number;
+  unit: string;
+  value: number | null;
+}
+
+export interface YScales {
+  leftScale: ScaleLinear<number, number>;
+  rightScale: ScaleLinear<number, number>;
+}
+
+export interface TimeValueProps {
+  marginLeft?: number;
+  timeSeries: Array<TimeValue>;
+  x?: number;
+  xScale: ScaleLinear<number, number>;
+}

package/src/Graph/common/utils.ts

@@ -0,0 +1,142 @@
+import {
+  T,
+  always,
+  cond,
+  equals,
+  gt,
+  gte,
+  head,
+  length,
+  lt,
+  lte,
+  pluck
+} from 'ramda';
+import numeral from 'numeral';
+
+import { darken, getLuminance, lighten, Theme } from '@mui/material';
+
+import { Thresholds } from './models';
+
+interface GetColorFromDataAndThresholdsProps {
+  baseColor?: string;
+  data: number;
+  theme: Theme;
+  thresholds: Thresholds;
+}
+
+export const getColorFromDataAndTresholds = ({
+  data,
+  thresholds,
+  theme,
+  baseColor
+}: GetColorFromDataAndThresholdsProps): string => {
+  if (!thresholds.enabled) {
+    return baseColor || theme.palette.primary.main;
+  }
+
+  const criticalValues = pluck('value', thresholds.critical).sort();
+  const warningValues = pluck('value', thresholds.warning).sort();
+
+  if (
+    equals(length(criticalValues), 2) &&
+    lte(criticalValues[0], data) &&
+    gte(criticalValues[1], data)
+  ) {
+    return theme.palette.error.main;
+  }
+
+  if (
+    equals(length(warningValues), 2) &&
+    lte(warningValues[0], data) &&
+    gte(warningValues[1], data)
+  ) {
+    return theme.palette.warning.main;
+  }
+
+  if (equals(length(warningValues), 2)) {
+    return theme.palette.success.main;
+  }
+
+  const criticalValue = head(criticalValues) as number;
+  const warningValue = head(warningValues) as number;
+
+  if (gt(warningValue, criticalValue)) {
+    return cond([
+      [lt(warningValue), always(theme.palette.success.main)],
+      [lt(criticalValue), always(theme.palette.warning.main)],
+      [T, always(theme.palette.error.main)]
+    ])(data);
+  }
+
+  return cond([
+    [gt(warningValue), always(theme.palette.success.main)],
+    [gt(criticalValue), always(theme.palette.warning.main)],
+    [T, always(theme.palette.error.main)]
+  ])(data);
+};
+
+interface ValueByUnitProps {
+  total: number;
+  unit: 'percentage' | 'number';
+  value: number;
+}
+
+export const getValueByUnit = ({
+  unit,
+  value,
+  total
+}: ValueByUnitProps): string => {
+  if (equals(unit, 'number')) {
+    return numeral(value).format('0a').toUpperCase();
+  }
+
+  return `${((value * 100) / total).toFixed(1)}%`;
+};
+
+interface NormalizeLevelProps {
+  factor: number;
+  level: number;
+}
+
+const normalizeLevel = ({ level, factor }: NormalizeLevelProps): number =>
+  (level * factor) / 10;
+
+interface EmphasizeCurveColorProps {
+  color: string;
+  index: number;
+}
+
+export const emphasizeCurveColor = ({
+  color,
+  index
+}: EmphasizeCurveColorProps): string => {
+  const totalLevels = 5;
+  const levels = [...Array(totalLevels).keys()];
+  const factor = 10 / totalLevels;
+
+  if (gte(getLuminance(color), 0.5)) {
+    if (gte(index, totalLevels * 2)) {
+      return darken(color, normalizeLevel({ factor, level: last(levels) }));
+    }
+    if (gte(index, totalLevels)) {
+      return darken(
+        color,
+        normalizeLevel({ factor, level: levels[totalLevels + 1 - index] })
+      );
+    }
+
+    return lighten(color, normalizeLevel({ factor, level: levels[index] }));
+  }
+
+  if (gte(index, totalLevels * 2)) {
+    return lighten(color, normalizeLevel({ factor, level: last(levels) }));
+  }
+  if (gte(index, totalLevels)) {
+    return lighten(
+      color,
+      normalizeLevel({ factor, level: levels[totalLevels + 1 - index] })
+    );
+  }
+
+  return darken(color, normalizeLevel({ factor, level: levels[index] }));
+};

package/src/Graph/index.ts

@@ -0,0 +1,9 @@
+export { default as LineChart } from './LineChart';
+export { Gauge } from './Gauge';
+export { SingleBar } from './SingleBar';
+export { Text as GraphText } from './Text';
+
+export { HeatMap } from './HeatMap';
+export { BarStack } from './BarStack';
+export { PieChart } from './PieChart';
+export * from './Tree';

package/src/Home.stories.mdx

@@ -1,8 +1,6 @@
 import { Meta } from '@storybook/addon-docs'
-import { Typography, Box, Paper, Accordion, AccordionSummary, AccordionDetails, Link, Stack } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { Typography, Link, Stack } from '@mui/material'
 
-import { MdxThemeProvider } from './StoryBookThemeProvider'
 
 <Meta title="Home" />
 
@@ -39,84 +37,3 @@ import { MdxThemeProvider } from './StoryBookThemeProvider'
     <Typography>20.04</Typography>
   </Link>
 </Stack>
-<br />
-
-<Accordion>
-  <AccordionSummary
-    expandIcon={<ExpandMoreIcon />}
-  >
-    <Typography variant="h5">Add stories</Typography>
-  </AccordionSummary>
-  <AccordionDetails>
-    <ul>
-      <li><Typography>Create a file named `index.stories.tsx` along side your component</Typography></li>
-      <li>
-        <Typography>Add a title, the component and argTypes</Typography>
-        <Typography>Example: </Typography>
-
-        ```typescript
-        export default {
-          title: 'MyComponent',
-          Component: MyComponent,
-          argTypes: {
-            propA: { control: 'text' },
-            propB: { control: 'number' },
-          },
-        };
-        ```
-
-      </li>
-      <li>
-        <Typography>Create a playground for your component</Typography>
-
-        ```typescript
-          const Template: ComponentStory<typeof MyComponent> = (args) => (
-            <MyComponent {...args} />
-          );
-
-          export const Playground = Template.bind({});
-        ```
-
-      </li> 
-      <li>
-        <Typography>Then add your story</Typography>
-
-        ```typescript
-          export const basic = Template.bind({});
-          basic.args = { propA: 'test', propB: 0 };
-        ```
-
-      </li>
-    </ul>
-  </AccordionDetails>
-</Accordion>
-<Accordion>
-  <AccordionSummary
-    expandIcon={<ExpandMoreIcon />}
-  >
-    <Typography variant="h5">Run tests</Typography>
-  </AccordionSummary>
-  <AccordionDetails>
-    <Typography>There are two kinds of tests in Centreon UI.</Typography>
-    <Typography>Jest + RTL: Component testing</Typography>
-    <Typography>Storyshots: When running them, storybook will capture a snapshot for each and compares them with the older ones</Typography>
-    <br />
-
-    <Typography>Run all the test (Jest + Storyshots)</Typography>
-    `pnpm build:storybook && pnpm t`
-    <br />
-
-    <Typography>Run storyshots following one or more story title</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent"`
-    <Typography>Or</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent"`
-    <br />
-
-    <Typography>Update snapshots</Typography>
-    `pnpm build:storybook && pnpm t -- -u`
-    <Typography>Or</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent" -u`
-    <Typography>Or</Typography>
-    `pnpm build:storybook && pnpm test:storyshot -- --story "MyComponent|MyOtherComponent" -u`
-  </AccordionDetails>
-</Accordion>

package/src/Image/Image.tsx

@@ -22,6 +22,10 @@ interface Props {
 
 const useStyles = makeStyles<Pick<Props, 'width' | 'height' | 'variant'>>()(
   (_, { width, height, variant }) => ({
+    fallbackContainer: {
+      height: '100%',
+      width: '100%'
+    },
     imageContent: {
       height,
       objectFit: variant,
@@ -41,14 +45,20 @@ const ImageContent = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ height, variant, width });
   const isImageLoaded = useLoadImage({ alt, imageSrc: imagePath });
+
   if (!isImageLoaded) {
-    return fallback;
+    return (
+      <div className={classes.fallbackContainer} data-testid={alt}>
+        {fallback}
+      </div>
+    );
   }
 
   return (
     <img
       alt={alt}
       className={cx(classes.imageContent, className)}
+      data-testid={alt}
       src={imagePath}
     />
   );

package/src/Image/index.stories.tsx

@@ -1,8 +1,8 @@
 import { ComponentStory } from '@storybook/react';
 
 import LoadingSkeleton from '../LoadingSkeleton';
-import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
-import NotAuthorized from '../../assets/not-authorized-template-background-light.svg';
+import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+import NotAuthorized from '../@assets/images/not-authorized-template-background-light.svg';
 
 import Image, { ImageVariant } from './Image';
 

package/src/Image/index.test.tsx

@@ -1,12 +1,12 @@
 import { RenderResult, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'jotai';
 
-import { render } from '../testRenderer';
-import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
+import { render } from '../../test/testRenderer';
+import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
 
 import Image from './Image';
 
-jest.mock('../../assets/centreon-logo-one-line-light.svg');
+jest.mock('../../@assets/centreon-logo-one-line-light.svg');
 
 const renderImage = (): RenderResult =>
   render(

package/src/InputField/Number/Number.cypress.spec.tsx

@@ -0,0 +1,85 @@
+import NumberField, { NumberProps } from './Number';
+
+const initialize = (props: NumberProps): void => {
+  cy.mount({
+    Component: <NumberField {...props} />
+  });
+};
+
+describe('Number field', () => {
+  it('displays the placeholder when the field has no default or fallback values', () => {
+    initialize({ dataTestId: 'test', onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '0');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the fallback value as placeholder when the field as no default value', () => {
+    initialize({ dataTestId: 'test', fallbackValue: 25, onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '25');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the default value as placeholder when the field as default value', () => {
+    initialize({ dataTestId: 'test', defaultValue: 25, onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the fallback value when the field is cleared out', () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      fallbackValue: 10,
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+    cy.get('input').clear();
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '10');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the field using auto size', () => {
+    initialize({
+      autoSize: true,
+      dataTestId: 'test',
+      defaultValue: 25,
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.get('input').type('0');
+
+    cy.makeSnapshot();
+  });
+
+  it('sets the value to the minimum value configured when a value less than the minimum value is typed in the field', () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      inputProps: {
+        min: 2
+      },
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.get('input').clear().type('-1');
+
+    cy.get('input').should('have.value', '2');
+
+    cy.makeSnapshot();
+  });
+});

package/src/InputField/Number/Number.stories.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable no-console */
+import { Meta, StoryObj } from '@storybook/react';
+
+import NumberField from './Number';
+
+const meta: Meta<typeof NumberField> = {
+  argTypes: {
+    defaultValue: {
+      defaultValue: 0,
+      description:
+        'The initial value which will be used by the input for the first render',
+      type: 'number'
+    },
+    fallbackValue: {
+      defaultValue: 0,
+      description: 'This value will be used when the input is cleared',
+      type: 'number'
+    },
+    onChange: {
+      description:
+        'The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out',
+      type: 'function'
+    }
+  },
+  component: NumberField
+};
+
+export default meta;
+type Story = StoryObj<typeof NumberField>;
+
+export const Default: Story = {
+  args: {
+    onChange: console.log
+  }
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValue: Story = {
+  args: {
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValue: Story = {
+  args: {
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValueAutoSize: Story = {
+  args: {
+    autoSize: true,
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};

package/src/InputField/Number/Number.tsx

@@ -0,0 +1,74 @@
+import { ChangeEvent, useState } from 'react';
+
+import { T, always, cond, isEmpty, isNil } from 'ramda';
+
+import TextField, { TextProps } from '../Text';
+
+export interface NumberProps
+  extends Omit<TextProps, 'defaultValue' | 'onChange'> {
+  /**
+   * The initial value which will be used by the input for the first render
+   */
+  defaultValue?: number;
+  /**
+   *  This value will be used when the input is cleared
+   */
+  fallbackValue?: number;
+  /**
+   * The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out
+   */
+  onChange: (actualValue: number) => void;
+}
+
+const NumberField = ({
+  fallbackValue = 0,
+  defaultValue,
+  onChange,
+  ...props
+}: NumberProps): JSX.Element => {
+  const [placeholder, setPlaceholder] = useState<string | undefined>();
+  const [actualValue, setActualValue] = useState(
+    defaultValue ? `${defaultValue}` : ''
+  );
+
+  const { inputProps } = props;
+
+  const changeValue = (event: ChangeEvent<HTMLInputElement>): void => {
+    const inputValue = event.target.value;
+
+    const number = Number(inputValue);
+    const campledNumber = cond([
+      [() => isEmpty(inputValue), always(fallbackValue)],
+      [() => Number.isNaN(number), always(number)],
+      [
+        T,
+        always(
+          Math.max(
+            !isNil(inputProps?.min) ? inputProps?.min : -Infinity,
+            number
+          )
+        )
+      ]
+    ])();
+
+    onChange(campledNumber);
+    setPlaceholder(isEmpty(inputValue) ? `${fallbackValue}` : undefined);
+    setActualValue(isEmpty(inputValue) ? inputValue : `${campledNumber}`);
+  };
+
+  return (
+    <TextField
+      defaultValue={defaultValue}
+      type="number"
+      value={actualValue}
+      onChange={changeValue}
+      {...props}
+      inputProps={inputProps}
+      placeholder={
+        placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
+      }
+    />
+  );
+};
+
+export default NumberField;