@centreon/ui 23.10.56 → 23.10.58

package/src/Graph/{useGraphData.ts → LineChart/useLineChartData.ts}

@@ -2,15 +2,17 @@ import { useEffect, useState } from 'react';
 
 import { compose, prop, sortBy, toLower } from 'ramda';
 
+import { LineChartData } from '../common/models';
+
 import { adjustGraphData } from './helpers';
-import { Data, GraphData } from './models';
+import { Data } from './models';
 
 interface GraphDataResult {
   adjustedData?: Data;
 }
 
 interface Props {
-  data?: GraphData;
+  data?: LineChartData;
   end?: string;
   start?: string;
 }
@@ -18,7 +20,7 @@ interface Props {
 const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
   const [adjustedData, setAdjustedData] = useState<Data>();
 
-  const prepareData = (dataToAdjust: GraphData): void => {
+  const prepareData = (dataToAdjust: LineChartData): void => {
     const { timeSeries } = adjustGraphData(dataToAdjust);
     const baseAxis = dataToAdjust.global.base;
     const { title } = dataToAdjust.global;

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -0,0 +1,163 @@
+import { useMemo, useRef } from 'react';
+
+import { Group, Tooltip } from '@visx/visx';
+import { scaleLinear } from '@visx/scale';
+import { head } from 'ramda';
+import { Bar } from '@visx/shape';
+import { useSpring, animated } from '@react-spring/web';
+
+import { alpha, Box, Fade, useTheme } from '@mui/material';
+
+import {
+  formatMetricValue,
+  getMetricWithLatestData
+} from '../common/timeSeries';
+import { Metric } from '../common/timeSeries/models';
+import { getColorFromDataAndTresholds } from '../common/utils';
+import { margins } from '../common/margins';
+
+import { SingleBarProps } from './models';
+import Thresholds, { barHeight, groupMargin, margin } from './Thresholds';
+
+interface Props extends SingleBarProps {
+  height: number;
+  width: number;
+}
+
+const baseStyles = {
+  ...Tooltip.defaultStyles,
+  textAlign: 'center'
+};
+
+const ResponsiveSingleBar = ({
+  data,
+  thresholdTooltipLabels,
+  thresholds,
+  width,
+  height,
+  disabledThresholds
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const metric = getMetricWithLatestData(data) as Metric;
+  const latestMetricData = head(metric.data) as number;
+  const adaptedMaxValue = Math.max(
+    metric.maximum_value || 0,
+    Math.max(...thresholds) * 1.1,
+    head(metric.data) as number
+  );
+
+  const innerHeight = height;
+  const centerY = innerHeight / 4;
+
+  const {
+    showTooltip,
+    hideTooltip,
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData
+  } = Tooltip.useTooltip();
+  const svgRef = useRef<SVGSVGElement | null>(null);
+
+  const barColor = useMemo(
+    () =>
+      getColorFromDataAndTresholds({
+        data: latestMetricData,
+        theme,
+        thresholds
+      }),
+    [latestMetricData, thresholds, theme]
+  );
+
+  const text = (
+    <text
+      dominantBaseline="middle"
+      style={{ fill: barColor, ...theme.typography.h3 }}
+      textAnchor="middle"
+      x="50%"
+      y={25}
+    >
+      {formatMetricValue({
+        base: 1000,
+        unit: metric.unit,
+        value: metric.data[0]
+      })}{' '}
+      {metric.unit}
+    </text>
+  );
+
+  const xScale = useMemo(
+    () =>
+      scaleLinear<number>({
+        domain: [0, adaptedMaxValue],
+        range: [0, width]
+      }),
+    [width, adaptedMaxValue]
+  );
+
+  const metricBarWidth = useMemo(
+    () => xScale(latestMetricData),
+    [xScale, latestMetricData]
+  );
+  const maxBarWidth = useMemo(
+    () => xScale(adaptedMaxValue),
+    [xScale, adaptedMaxValue]
+  );
+
+  const springStyle = useSpring({ width: metricBarWidth });
+
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <svg height={height} ref={svgRef} width={width}>
+        <Group.Group top={centerY - margins.bottom}>
+          {text}
+          <animated.rect
+            data-testid={`${latestMetricData}-bar-${barColor}`}
+            fill={barColor}
+            height={barHeight}
+            rx={4}
+            style={springStyle}
+            x={0}
+            y={groupMargin + margin}
+          />
+          <Bar
+            fill="transparent"
+            height={barHeight}
+            rx={4}
+            ry={4}
+            stroke={alpha(theme.palette.text.primary, 0.3)}
+            width={maxBarWidth}
+            x={0}
+            y={groupMargin + margin}
+          />
+          {!disabledThresholds && (
+            <Thresholds
+              hideTooltip={hideTooltip}
+              showTooltip={showTooltip}
+              thresholdTooltipLabels={thresholdTooltipLabels}
+              thresholds={thresholds}
+              xScale={xScale}
+            />
+          )}
+        </Group.Group>
+      </svg>
+      <Fade in={tooltipOpen}>
+        <Tooltip.Tooltip
+          left={tooltipLeft}
+          style={{
+            ...baseStyles,
+            backgroundColor: theme.palette.background.paper,
+            color: theme.palette.text.primary,
+            transform: 'translate(-50%, -20px)'
+          }}
+          top={tooltipTop}
+        >
+          {tooltipData}
+        </Tooltip.Tooltip>
+      </Fade>
+    </Box>
+  );
+};
+
+export default ResponsiveSingleBar;

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

@@ -0,0 +1,45 @@
+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,
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.5, 1.5]
+  },
+  render: Template
+};
+
+export const warning: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.2, 0.5]
+  },
+  render: Template
+};
+
+export const critical: Story = {
+  args: {
+    data: dataLastWeek,
+    thresholdTooltipLabels: ['Warning', 'Critical'],
+    thresholds: [0.13, 0.35]
+  },
+  render: Template
+};

package/src/Graph/SingleBar/SingleBar.tsx

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

package/src/Graph/SingleBar/Thresholds.tsx

@@ -0,0 +1,100 @@
+import { useTheme } from '@mui/material';
+
+export const margin = 40;
+
+export const barHeight = 50;
+
+export const groupMargin = 25;
+
+const lineMargin = 10;
+
+const thresholdLineHeight = 60 + 2 * lineMargin;
+
+interface Props {
+  hideTooltip: () => void;
+  showTooltip: (args) => void;
+  thresholdTooltipLabels: Array<string>;
+  thresholds: Array<number>;
+  xScale: (value: number) => number;
+}
+
+const Thresholds = ({
+  xScale,
+  thresholds,
+  showTooltip,
+  hideTooltip,
+  thresholdTooltipLabels
+}: Props): JSX.Element => {
+  const theme = useTheme();
+
+  const warningValue = thresholds[0];
+  const criticalValue = thresholds[1];
+  const warningTooltipLabel = thresholdTooltipLabels[0];
+  const criticalTooltipLabel = thresholdTooltipLabels[1];
+
+  const bottom = barHeight + margin * 2;
+
+  const onMouseEnter =
+    ({ label, left }) =>
+    (): void =>
+      showTooltip({
+        tooltipData: label,
+        tooltipLeft: left,
+        tooltipTop: bottom
+      });
+
+  return (
+    <>
+      <line
+        data-testid="warning-line"
+        stroke={theme.palette.warning.main}
+        strokeDasharray={4}
+        strokeWidth={2}
+        x1={xScale(warningValue)}
+        x2={xScale(warningValue)}
+        y1={groupMargin + 3 * lineMargin}
+        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
+      />
+      <line
+        data-testid="critical-line"
+        stroke={theme.palette.error.main}
+        strokeDasharray={4}
+        strokeWidth={2}
+        x1={xScale(criticalValue)}
+        x2={xScale(criticalValue)}
+        y1={groupMargin + 3 * lineMargin}
+        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
+      />
+      <line
+        data-testid="warning-line-tooltip"
+        stroke="transparent"
+        strokeWidth={5}
+        x1={xScale(warningValue)}
+        x2={xScale(warningValue)}
+        y1={groupMargin + 3 * lineMargin}
+        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
+        onMouseEnter={onMouseEnter({
+          label: warningTooltipLabel,
+          left: xScale(warningValue)
+        })}
+        onMouseLeave={hideTooltip}
+      />
+      <line
+        data-testid="critical-line-tooltip"
+        stroke="transparent"
+        strokeWidth={5}
+        x1={xScale(criticalValue)}
+        x2={xScale(criticalValue)}
+        y1={groupMargin + 3 * lineMargin}
+        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
+        onMouseEnter={onMouseEnter({
+          label: criticalTooltipLabel,
+          left: xScale(criticalValue)
+        })}
+        onMouseLeave={hideTooltip}
+      />
+    </>
+  );
+};
+
+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,8 @@
+import { LineChartData } from '../common/models';
+
+export interface SingleBarProps {
+  data?: LineChartData;
+  disabledThresholds?: boolean;
+  thresholdTooltipLabels: Array<string>;
+  thresholds: Array<number>;
+}

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

@@ -0,0 +1,54 @@
+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: [0.5, 1.5]
+  },
+  render: Template
+};
+
+export const warning: Story = {
+  args: {
+    data: dataLastWeek,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: [0.2, 0.5]
+  },
+  render: Template
+};
+
+export const critical: Story = {
+  args: {
+    data: dataLastWeek,
+    labels: {
+      critical: 'Critical',
+      warning: 'Warning'
+    },
+    thresholds: [0.13, 0.35]
+  },
+  render: Template
+};

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

@@ -0,0 +1,17 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useTextStyles = makeStyles()((theme) => ({
+  graphText: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    height: '100%',
+    justifyContent: 'center'
+  },
+  thresholds: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(5)
+  }
+}));

package/src/Graph/Text/Text.tsx

@@ -0,0 +1,80 @@
+import { isNil } from 'ramda';
+
+import { Typography, useTheme } from '@mui/material';
+
+import { LineChartData } from '../common/models';
+import {
+  formatMetricValue,
+  getMetricWithLatestData
+} from '../common/timeSeries';
+import { getColorFromDataAndTresholds } from '../common/utils';
+
+import { useTextStyles } from './Text.styles';
+
+interface Props {
+  data?: LineChartData;
+  disabledThresholds?: boolean;
+  labels: {
+    critical: string;
+    warning: string;
+  };
+  thresholds: Array<number>;
+}
+
+export const Text = ({
+  thresholds,
+  data,
+  labels,
+  disabledThresholds
+}: Props): JSX.Element | null => {
+  const theme = useTheme();
+  const { classes } = useTextStyles();
+
+  if (isNil(data)) {
+    return null;
+  }
+
+  const metric = getMetricWithLatestData(data);
+  const metricValue = metric?.data[0] ?? 0;
+  const metricUnit = metric?.unit ?? '';
+
+  const color = getColorFromDataAndTresholds({
+    data: metricValue,
+    theme,
+    thresholds
+  });
+
+  return (
+    <div className={classes.graphText}>
+      <Typography sx={{ color }} variant="h3">
+        {formatMetricValue({
+          unit: metricUnit,
+          value: metricValue
+        })}{' '}
+        {metricUnit}
+      </Typography>
+      {!disabledThresholds && (
+        <div className={classes.thresholds}>
+          <Typography sx={{ color: 'warning.main' }} variant="h5">
+            {labels.warning}
+            {': '}
+            {formatMetricValue({
+              unit: metricUnit,
+              value: thresholds[0]
+            })}{' '}
+            {metricUnit}
+          </Typography>
+          <Typography sx={{ color: 'error.main' }} variant="h5">
+            {labels.critical}
+            {': '}
+            {formatMetricValue({
+              unit: metricUnit,
+              value: thresholds[1]
+            })}{' '}
+            {metricUnit}
+          </Typography>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Graph/Text/index.ts

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

package/src/Graph/common/margins.ts

@@ -0,0 +1 @@
+export const margins = { bottom: 20, left: 20, right: 20, top: 20 };

package/src/Graph/common/models.ts

@@ -0,0 +1,7 @@
+import { Metric } from './timeSeries/models';
+
+export interface LineChartData {
+  global;
+  metrics: Array<Metric>;
+  times: Array<string>;
+}

package/src/Graph/{timeSeries → common/timeSeries}/index.test.ts

@@ -1,11 +1,11 @@
-import { GraphData } from '../models';
+import { LineChartData } from '../models';
 
 import * as timeSeries from '.';
 
 type TestCase = [number | null, string, 1000 | 1024, string | null];
 
 describe('timeSeries', () => {
-  const graphData: GraphData = {
+  const graphData: LineChartData = {
     global: {},
     metrics: [
       {

package/src/Graph/{timeSeries → common/timeSeries}/index.ts

@@ -26,11 +26,13 @@ import {
   min,
   max,
   lt,
-  identity
+  identity,
+  head,
+  last
 } from 'ramda';
 
-import { margin } from '../common';
-import { GraphData } from '../models';
+import { margin } from '../../LineChart/common';
+import { LineChartData } from '../models';
 
 import {
   Metric,
@@ -76,7 +78,7 @@ const toTimeTickValue = (
   return { timeTick, ...getMetricsForIndex() };
 };
 
-const getTimeSeries = (graphData: GraphData): Array<TimeValue> => {
+const getTimeSeries = (graphData: LineChartData): Array<TimeValue> => {
   const isGreaterThanLowerLimit = (value): boolean => {
     const lowerLimit = path<number>(['global', 'lower-limit'], graphData);
 
@@ -133,7 +135,7 @@ const toLine = ({
   unit
 });
 
-const getLineData = (graphData: GraphData): Array<Line> =>
+const getLineData = (graphData: LineChartData): Array<Line> =>
   map(toLine, graphData.metrics);
 
 const getMin = (values: Array<number>): number => Math.min(...values);
@@ -481,6 +483,19 @@ const getTimeValue = ({
   return timeSeries[index];
 };
 
+const getMetricWithLatestData = (
+  graphData: LineChartData
+): Metric | undefined => {
+  const metric = head(graphData.metrics) as Metric;
+
+  const lastData = last(metric?.data.filter((v) => v) || []);
+
+  return {
+    ...metric,
+    data: lastData ? [lastData] : []
+  };
+};
+
 export {
   getTimeSeries,
   getLineData,
@@ -508,5 +523,6 @@ export {
   formatMetricValue,
   getStackedYScale,
   getTimeValue,
-  bisectDate
+  bisectDate,
+  getMetricWithLatestData
 };

package/src/Graph/{timeSeries → common/timeSeries}/models.ts

@@ -13,6 +13,7 @@ interface DsData {
 
 export interface Metric {
   average_value: number | null;
+  crit: number | null;
   data: Array<number>;
   ds_data: DsData;
   legend: string;
@@ -20,6 +21,7 @@ export interface Metric {
   metric: string;
   minimum_value: number | null;
   unit: string;
+  warn: number | null;
 }
 
 type TimeSeries = { timeTick: string };

package/src/Graph/common/utils.ts

@@ -0,0 +1,20 @@
+import { T, always, cond, gt, head } from 'ramda';
+
+import { Theme } from '@mui/material';
+
+interface GetColorFromDataAndThresholdsProps {
+  data: number;
+  theme: Theme;
+  thresholds: Array<number>;
+}
+
+export const getColorFromDataAndTresholds = ({
+  data,
+  thresholds,
+  theme
+}: GetColorFromDataAndThresholdsProps): string =>
+  cond([
+    [gt(head(thresholds) as number), always(theme.palette.success.main)],
+    [gt(thresholds[1]), always(theme.palette.warning.main)],
+    [T, always(theme.palette.error.main)]
+  ])(data);

package/src/Graph/index.ts

@@ -0,0 +1,4 @@
+export { default as LineChart } from './LineChart';
+export { Gauge } from './Gauge';
+export { SingleBar } from './SingleBar';
+export { Text as GraphText } from './Text';

package/src/RichTextEditor/ContentEditable.tsx

@@ -47,7 +47,7 @@ const useStyles = makeStyles<StyleProps>()(
 
 interface Props {
   className?: string;
-  disabled: boolean;
+  disabled?: boolean;
   editable: boolean;
   editorState?: string;
   error?: string;
@@ -61,6 +61,9 @@ interface Props {
   resetEditorToInitialStateCondition?: () => boolean;
 }
 
+const defaultState =
+  '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+
 const ContentEditable = ({
   minInputHeight,
   inputClassname,
@@ -91,8 +94,10 @@ const ContentEditable = ({
   );
 
   useLayoutEffect(() => {
-    if (editorState && !editable) {
-      const newEditorState = editor.parseEditorState(editorState);
+    if (!editable) {
+      const newEditorState = editor.parseEditorState(
+        editorState || defaultState
+      );
 
       editor.setEditorState(newEditorState);
     }