@centreon/ui 23.10.68 → 23.10.69

package/src/Dashboard/Layout.tsx

@@ -1,76 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { Responsive } from '@visx/visx';
-import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
-import 'react-grid-layout/css/styles.css';
-
-import { Responsive as ResponsiveHeight, useMemoComponent } from '..';
-
-import { useDashboardLayoutStyles } from './Dashboard.styles';
-import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
-import Grid from './Grid';
-
-const ReactGridLayout = WidthProvider(GridLayout);
-
-interface DashboardLayoutProps<T> {
-  changeLayout?: (newLayout: Array<Layout>) => void;
-  children: Array<JSX.Element>;
-  displayGrid?: boolean;
-  isStatic?: boolean;
-  layout: Array<T>;
-}
-
-const Layout = <T extends Layout>({
-  children,
-  changeLayout,
-  displayGrid,
-  layout,
-  isStatic = false
-}: DashboardLayoutProps<T>): JSX.Element => {
-  const { classes } = useDashboardLayoutStyles(isStatic);
-
-  const [columns, setColumns] = useState(getColumnsFromScreenSize());
-
-  const resize = (): void => {
-    setColumns(getColumnsFromScreenSize());
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', resize);
-
-    return (): void => {
-      window.removeEventListener('resize', resize);
-    };
-  }, []);
-
-  return useMemoComponent({
-    Component: (
-      <ResponsiveHeight>
-        <Responsive.ParentSize>
-          {({ width, height }): JSX.Element => (
-            <div className={classes.container}>
-              {displayGrid && (
-                <Grid columns={columns} height={height} width={width} />
-              )}
-              <ReactGridLayout
-                cols={columns}
-                containerPadding={[4, 0]}
-                layout={getLayout(layout)}
-                margin={[20, 20]}
-                resizeHandles={['s', 'e', 'se']}
-                rowHeight={rowHeight}
-                width={width}
-                onLayoutChange={changeLayout}
-              >
-                {children}
-              </ReactGridLayout>
-            </div>
-          )}
-        </Responsive.ParentSize>
-      </ResponsiveHeight>
-    ),
-    memoProps: [columns, layout, displayGrid]
-  });
-};
-
-export default Layout;

package/src/Dashboard/index.tsx

@@ -1,9 +0,0 @@
-import Layout from './Layout';
-import Item from './Item';
-
-export * from './utils';
-
-export const DashboardLayout = {
-  Item,
-  Layout
-};

package/src/Dashboard/utils.ts

@@ -1,28 +0,0 @@
-import { lt } from 'ramda';
-import { Layout } from 'react-grid-layout';
-
-export const maxColumns = 12;
-const minColumns = 1;
-const breakpoint = 768;
-
-export const rowHeight = 64;
-
-export const getIsSmallScreenSize = (): boolean =>
-  lt(window.innerWidth, breakpoint);
-
-export const getColumnsFromScreenSize = (): number =>
-  getIsSmallScreenSize() ? minColumns : maxColumns;
-
-export const getLayout = <T extends Layout>(layout: Array<T>): Array<T> => {
-  const isSmallScreenSize = getIsSmallScreenSize();
-  if (!isSmallScreenSize) {
-    return layout;
-  }
-
-  return layout
-    .sort((a, b) => a.x + a.y - (b.x + b.y))
-    .map((widget) => ({
-      ...widget,
-      w: 1
-    }));
-};

package/src/Form/Form.styles.ts

@@ -1,11 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2)
-  }
-}));
-
-export { useStyles };

package/src/Form/Inputs/Checkbox.tsx

@@ -1,57 +0,0 @@
-import { ChangeEvent } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { path, split } from 'ramda';
-
-import { Box } from '@mui/material';
-
-import { Checkbox as CheckboxComponent } from '../../Checkbox';
-import { useMemoComponent } from '../..';
-
-import { InputPropsWithoutGroup } from './models';
-
-const Checkbox = ({
-  checkbox,
-  fieldName,
-  getDisabled,
-  hideInput,
-  dataTestId
-}: InputPropsWithoutGroup): JSX.Element => {
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
-
-  const fieldNamePath = split('.', fieldName);
-
-  const value = path(fieldNamePath, values);
-
-  const disabled = getDisabled?.(values) || false;
-  const hideCheckbox = hideInput?.(values) || false;
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const newValue = {
-      ...value,
-      checked: event.target.checked,
-      label: event.target.id
-    };
-
-    setFieldValue(fieldName, newValue);
-  };
-
-  return useMemoComponent({
-    Component: hideCheckbox ? (
-      <Box />
-    ) : (
-      <CheckboxComponent
-        Icon={value?.Icon}
-        checked={value?.checked}
-        dataTestId={dataTestId || ''}
-        disabled={disabled}
-        label={value?.label}
-        labelPlacement={checkbox?.labelPlacement || 'end'}
-        onChange={handleChange}
-      />
-    ),
-    memoProps: [value, disabled, hideCheckbox]
-  });
-};
-
-export default Checkbox;

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -1,76 +0,0 @@
-import { ChangeEvent, useEffect } from 'react';
-
-import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split } from 'ramda';
-
-import { Box, Typography } from '@mui/material';
-
-import { CheckboxGroup as CheckboxGroupComponent } from '../../Checkbox';
-import { useMemoComponent } from '../..';
-
-import { InputPropsWithoutGroup } from './models';
-
-const CheckboxGroup = ({
-  checkbox,
-  fieldName,
-  additionalLabel,
-  getDisabled,
-  hideInput,
-  dataTestId
-}: InputPropsWithoutGroup): JSX.Element => {
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
-
-  const fieldNamePath = split('.', fieldName);
-
-  const value = path(fieldNamePath, values);
-
-  const disabled = getDisabled?.(values) || false;
-  const hideCheckbox = hideInput?.(values) || false;
-
-  useEffect(() => {
-    if (!disabled && !hideCheckbox) {
-      return;
-    }
-    const resetedValue = value?.map((element) => ({
-      ...element,
-      checked: false
-    }));
-    setFieldValue(fieldName, resetedValue);
-  }, [disabled, hideCheckbox]);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    const label = event.target.id;
-    if (!includes(label, value)) {
-      setFieldValue(fieldName, [...value, label]);
-
-      return;
-    }
-
-    setFieldValue(
-      fieldName,
-      value?.filter((elm) => !equals(elm, label))
-    );
-  };
-
-  return useMemoComponent({
-    Component: hideCheckbox ? (
-      <Box />
-    ) : (
-      <Box>
-        {additionalLabel && <Typography>{additionalLabel}</Typography>}
-        <CheckboxGroupComponent
-          dataTestId={dataTestId || ''}
-          direction={checkbox?.direction}
-          disabled={disabled}
-          labelPlacement={checkbox?.labelPlacement || 'end'}
-          options={checkbox?.options as Array<string>}
-          values={value}
-          onChange={handleChange}
-        />
-      </Box>
-    ),
-    memoProps: [value, disabled, hideCheckbox]
-  });
-};
-
-export default CheckboxGroup;

package/src/Form/index.ts

@@ -1 +0,0 @@
-export * from './Form';

package/src/Graph/Gauge/AnimatedPie.tsx

@@ -1,98 +0,0 @@
-import { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
-import { useTransition, to, animated } from '@react-spring/web';
-import { equals, includes, pluck } from 'ramda';
-
-import { Typography } from '@mui/material';
-
-import { Metric } from '../common/timeSeries/models';
-import { Thresholds } from '../common/models';
-
-type AnimatedStyles = { endAngle: number; opacity: number; startAngle: number };
-
-const fromLeaveTransition = ({ endAngle }): AnimatedStyles => ({
-  endAngle,
-  opacity: 0,
-  startAngle: -(Math.PI / 2)
-});
-const enterUpdateTransition = <T,>({
-  startAngle,
-  endAngle
-}: PieArcDatum<T>): AnimatedStyles => ({
-  endAngle,
-  opacity: 1,
-  startAngle
-});
-
-type AnimatedPieProps<Datum> = ProvidedProps<Datum> & {
-  animate?: boolean;
-  delay?: number;
-  getColor: (d: PieArcDatum<Datum>) => string;
-  getKey: (d: PieArcDatum<Datum>) => string;
-  hideTooltip?: () => void;
-  metric?: Metric;
-  showTooltip?: (args) => void;
-  thresholds: Thresholds;
-};
-
-const AnimatedPie = <Datum,>({
-  animate,
-  arcs,
-  path,
-  getKey,
-  getColor,
-  showTooltip,
-  hideTooltip,
-  thresholds
-}: AnimatedPieProps<Datum>): JSX.Element => {
-  const transitions = useTransition<PieArcDatum<Datum>, AnimatedStyles>(arcs, {
-    enter: enterUpdateTransition,
-    from: animate ? fromLeaveTransition : enterUpdateTransition,
-    keys: getKey,
-    leave: animate ? fromLeaveTransition : enterUpdateTransition,
-    update: enterUpdateTransition
-  });
-
-  return transitions((props, arc, { key }) => (
-    <g key={key}>
-      <animated.path
-        d={to([props.startAngle, props.endAngle], (startAngle, endAngle) =>
-          path({
-            ...arc,
-            endAngle,
-            startAngle
-          })
-        )}
-        data-testid={`${arc.data?.value || arc.data}-arc`}
-        display={
-          includes('transparent', arc.data?.name || '') ? 'none' : 'inline'
-        }
-        fill={getColor(arc)}
-        onMouseEnter={(event) => {
-          const thresholdType = arc.data?.name as string;
-
-          if (equals(thresholdType, 'success')) {
-            return;
-          }
-
-          showTooltip?.({
-            tooltipData: (
-              <div>
-                {pluck(
-                  'label',
-                  thresholds[thresholdType as 'warning' | 'critical']
-                ).map((label) => (
-                  <Typography key={label}>{label}</Typography>
-                ))}
-              </div>
-            ),
-            tooltipLeft: event.clientX,
-            tooltipTop: event.clientY
-          });
-        }}
-        onMouseLeave={() => hideTooltip?.()}
-      />
-    </g>
-  ));
-};
-
-export default AnimatedPie;

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

@@ -1,146 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import dataLastWeek from '../LineChart/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={{ height: '500px', width: '500px' }}>
-    <Gauge {...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.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,
-    thresholdTooltipLabels: ['Warning', 'Critical'],
-    thresholds: [0.5, 0.6]
-  },
-  render: Template
-};

package/src/Graph/Gauge/Gauge.tsx

@@ -1,42 +0,0 @@
-import { Responsive } from '@visx/visx';
-
-import { LineChartData, Thresholds } from '../common/models';
-import { getMetricWithLatestData } from '../common/timeSeries';
-import { Metric } from '../common/timeSeries/models';
-
-import ResponsiveGauge from './ResponsiveGauge';
-
-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 (
-    <Responsive.ParentSize>
-      {({ width, height }) => (
-        <ResponsiveGauge
-          baseColor={baseColor}
-          displayAsRaw={displayAsRaw}
-          height={height}
-          metric={metric}
-          thresholds={thresholds}
-          width={width}
-        />
-      )}
-    </Responsive.ParentSize>
-  );
-};

package/src/Graph/Gauge/PieData.tsx

@@ -1,63 +0,0 @@
-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 { thresholdThickness } from './Thresholds';
-import AnimatedPie from './AnimatedPie';
-import { GaugeProps } from './models';
-
-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']
-  });
-
-  return (
-    <Pie
-      data={pieData}
-      endAngle={-Math.PI / 2}
-      innerRadius={radius - dataThickness}
-      outerRadius={radius - thresholdThickness * 1.3}
-      pieSortValues={() => -1}
-      pieValue={identity}
-      startAngle={Math.PI / 2}
-    >
-      {(pie) => (
-        <AnimatedPie<number>
-          {...pie}
-          animate
-          getColor={(arc) => getDataColor(arc.data)}
-          getKey={(arc) => `${arc.data}`}
-          thresholds={thresholds}
-        />
-      )}
-    </Pie>
-  );
-};
-
-export default PieData;