@centreon/ui 23.10.1-MON-21149-implement-time-periods-thresholds-refresh-interval.13 → 23.10.1-MON-20798-fe-implement-buttons.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1-MON-21149-implement-time-periods-thresholds-refresh-interval.13",
+  "version": "23.10.1-MON-20798-fe-implement-buttons.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/LineChart/BasicComponents/useFilterLines.ts

@@ -1,7 +1,9 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { useEffect } from 'react';
 
+import { useAtom } from 'jotai';
 import { compose, equals, prop, propEq, reject, sortBy, toLower } from 'ramda';
 
+import { linesGraphAtom } from '../graphAtoms';
 import { Line } from '../../common/timeSeries/models';
 
 import {
@@ -13,8 +15,6 @@ import {
 interface UseFilterLines {
   displayThreshold?: boolean;
   lines: Array<Line>;
-  linesGraph: Array<Line> | null;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
 }
 
 interface Result {
@@ -24,10 +24,10 @@ interface Result {
 
 const useFilterLines = ({
   displayThreshold = false,
-  lines,
-  linesGraph,
-  setLinesGraph
+  lines
 }: UseFilterLines): Result => {
+  const [linesGraph, setLinesGraph] = useAtom(linesGraphAtom);
+
   const displayedLines = reject(propEq('display', false), linesGraph ?? lines);
   const filterLines = (): Array<Line> => {
     const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
@@ -45,9 +45,7 @@ const useFilterLines = ({
 
   useEffect(() => {
     const filteredLines = filterLines();
-    if (!lines || !displayThreshold) {
-      setLinesGraph(lines);
-
+    if (!lines || !displayThreshold || filteredLines.length <= 0) {
       return;
     }
 

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/index.tsx

@@ -8,12 +8,14 @@ interface Props {
 
 const Point = ({ lineColor, x, y }: Props): JSX.Element => (
   <circle
-    cx={x}
-    cy={y}
     fill={alpha(lineColor, 0.5)}
     r={4}
     stroke={lineColor}
     strokeWidth={2}
+    style={{
+      transform: `translate(${x}px, ${y}px)`,
+      transition: 'transform 0.08s ease-out'
+    }}
   />
 );
 

package/src/Graph/LineChart/InteractiveComponents/interactionWithGraphAtoms.ts

@@ -44,7 +44,6 @@ export const changeMousePositionAndTimeValueDerivedAtom = atom(
 
       return;
     }
-
     set(mousePositionAtom, position);
 
     set(timeValueAtom, timeValue);

package/src/Graph/LineChart/Legend/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 
 import { slice } from 'ramda';
 import { useAtomValue } from 'jotai';
@@ -28,10 +28,8 @@ interface Props {
   limitLegendRows?: boolean;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
   timeSeries: Array<TimeValue>;
   toggable?: boolean;
-  xScale;
 }
 
 const MainLegend = ({
@@ -41,21 +39,18 @@ const MainLegend = ({
   toggable = true,
   limitLegendRows = true,
   renderExtraComponent,
-  displayAnchor = true,
-  setLinesGraph,
-  xScale
+  displayAnchor = true
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ limitLegendRows });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
-    useLegend({ lines, setLinesGraph });
+    useLegend({ lines });
 
   const { getFormattedValue } = useInteractiveValues({
     base,
     lines,
-    timeSeries,
-    xScale
+    timeSeries
   });
 
   const displayedLines = limitLegendRows

package/src/Graph/LineChart/Legend/useInteractiveValues.ts

@@ -3,12 +3,11 @@ import { useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { equals, find, isNil } from 'ramda';
 
-import { mousePositionAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
+import { timeValueAtom } from '../InteractiveComponents/interactionWithGraphAtoms';
 import {
   formatMetricValue,
   getLineForMetric,
-  getMetrics,
-  getTimeValue
+  getMetrics
 } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
 
@@ -22,22 +21,14 @@ interface Props {
   base: number;
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
-  xScale;
 }
 
 const useInteractiveValues = ({
   timeSeries,
   lines,
-  base,
-  xScale
+  base
 }: Props): InteractiveValues => {
-  const mousePosition = useAtomValue(mousePositionAtom);
-
-  const timeValue = getTimeValue({
-    timeSeries,
-    x: mousePosition?.[0],
-    xScale
-  });
+  const timeValue = useAtomValue(timeValueAtom);
 
   const graphTimeValue = timeSeries?.find((item) =>
     equals(item.timeTick, timeValue?.timeTick)

package/src/Graph/LineChart/Legend/useLegend.ts

@@ -1,5 +1,6 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { useEffect } from 'react';
 
+import { useSetAtom } from 'jotai';
 import {
   equals,
   find,
@@ -16,6 +17,7 @@ import {
   toLower
 } from 'ramda';
 
+import { linesGraphAtom } from '../graphAtoms';
 import { Line } from '../../common/timeSeries/models';
 
 interface LegendActions {
@@ -27,10 +29,11 @@ interface LegendActions {
 
 interface Props {
   lines: Array<Line>;
-  setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
 }
 
-const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
+const useLegend = ({ lines }: Props): LegendActions => {
+  const setLines = useSetAtom(linesGraphAtom);
+
   const displayedLines = reject(propEq('display', false), lines);
   const getLineByMetric = (metric: string): Line =>
     find(propEq('metric', metric), lines) as Line;
@@ -38,7 +41,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
   const toggleMetricLine = (metric): void => {
     const line = getLineByMetric(metric);
 
-    setLinesGraph([
+    setLines([
       ...reject(propEq('metric', metric), lines),
       { ...line, display: !line.display }
     ]);
@@ -53,11 +56,11 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
 
     const sortedData = sortBy(compose(toLower, prop('name')), data);
 
-    setLinesGraph(sortedData);
+    setLines(sortedData);
   };
 
   const clearHighlight = (): void => {
-    setLinesGraph(map((line) => ({ ...line, highlight: undefined }), lines));
+    setLines(map((line) => ({ ...line, highlight: undefined }), lines));
   };
 
   const selectMetricLine = (metric: string): void => {
@@ -68,7 +71,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
       equals(displayedLines.length, 1) && isLineDisplayed;
 
     if (isOnlyLineDisplayed || isEmpty(displayedLines)) {
-      setLinesGraph(
+      setLines(
         map(
           (line) => ({
             ...line,
@@ -81,7 +84,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
       return;
     }
 
-    setLinesGraph(
+    setLines(
       map(
         (line) => ({
           ...line,
@@ -102,8 +105,8 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
       display: find(propEq('name', line.name), lines)?.display ?? true
     }));
 
-    setLinesGraph(newLines);
-  }, [lines]);
+    setLines(newLines);
+  }, []);
 
   return { clearHighlight, highlightLine, selectMetricLine, toggleMetricLine };
 };

package/src/Graph/LineChart/LineChart.tsx

@@ -1,12 +1,11 @@
-import { MutableRefObject, useMemo, useRef, useState } from 'react';
+import { MutableRefObject, useMemo, useRef } from 'react';
 
-import { Group, Tooltip } from '@visx/visx';
+import { Group } from '@visx/visx';
 import { isNil } from 'ramda';
 
-import { ClickAwayListener, Fade, Skeleton, useTheme } from '@mui/material';
+import { ClickAwayListener, Skeleton } from '@mui/material';
 
 import { getLeftScale, getRightScale, getXScale } from '../common/timeSeries';
-import { Line } from '../common/timeSeries/models';
 
 import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
@@ -31,27 +30,17 @@ import {
 } from './models';
 import { useIntersection } from './useLineChartIntersection';
 import { CurveType } from './BasicComponents/Lines/models';
-import Thresholds from './BasicComponents/Thresholds';
 
 interface Props extends LineChartProps {
   curve: CurveType;
-  disabledThresholds?: boolean;
   graphData: Data;
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
   marginBottom: number;
   shapeLines?: GlobalAreaLines;
-  thresholdLabels?: Array<string>;
-  thresholdUnit?: string;
-  thresholds?: Array<number>;
 }
 
-const baseStyles = {
-  ...Tooltip.defaultStyles,
-  textAlign: 'center'
-};
-
 const LineChart = ({
   graphData,
   height = 500,
@@ -69,32 +58,15 @@ const LineChart = ({
   graphRef,
   header,
   curve,
-  marginBottom,
-  thresholds,
-  thresholdUnit,
-  thresholdLabels,
-  disabledThresholds
+  marginBottom
 }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const theme = useTheme();
-
-  const [linesGraph, setLinesGraph] = useState<Array<Line> | null>(null);
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
+  const { classes } = useStyles();
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
   const legendRef = useRef<HTMLDivElement | null>(null);
 
-  const {
-    tooltipOpen: thresholdTooltipOpen,
-    tooltipLeft: thresholdTooltipLeft,
-    tooltipTop: thresholdTooltipTop,
-    tooltipData: thresholdTooltipData,
-    hideTooltip: hideThresholdTooltip,
-    showTooltip: showThresholdTooltip
-  } = Tooltip.useTooltip();
-
   const graphWidth = width > 0 ? width - margin.left - margin.right : 0;
   const graphHeight =
     (height || 0) > 0
@@ -109,9 +81,7 @@ const LineChart = ({
 
   const { displayedLines, newLines } = useFilterLines({
     displayThreshold: canDisplayThreshold(shapeLines?.areaThresholdLines),
-    lines,
-    linesGraph,
-    setLinesGraph
+    lines
   });
 
   const xScale = useMemo(
@@ -128,8 +98,6 @@ const LineChart = ({
       getLeftScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
-        thresholdUnit,
-        thresholds: (!disabledThresholds && thresholds) || [],
         valueGraphHeight: graphHeight - 35
       }),
     [displayedLines, timeSeries, graphHeight]
@@ -140,8 +108,6 @@ const LineChart = ({
       getRightScale({
         dataLines: displayedLines,
         dataTimeSeries: timeSeries,
-        thresholdUnit,
-        thresholds: (!disabledThresholds && thresholds) || [],
         valueGraphHeight: graphHeight - 35
       }),
     [timeSeries, displayedLines, graphHeight]
@@ -235,20 +201,6 @@ const LineChart = ({
                 }}
                 zoomData={{ ...zoomPreview }}
               />
-
-              {!disabledThresholds && (
-                <Thresholds
-                  displayedLines={displayedLines}
-                  hideTooltip={hideThresholdTooltip}
-                  leftScale={leftScale}
-                  rightScale={rightScale}
-                  showTooltip={showThresholdTooltip}
-                  thresholdLabels={thresholdLabels}
-                  thresholdUnit={thresholdUnit}
-                  thresholds={thresholds}
-                  width={graphWidth}
-                />
-              )}
             </Group.Group>
           </svg>
           {displayTooltip && (
@@ -266,20 +218,6 @@ const LineChart = ({
               xScale={xScale}
             />
           )}
-          <Fade in={thresholdTooltipOpen}>
-            <Tooltip.Tooltip
-              left={thresholdTooltipLeft}
-              style={{
-                ...baseStyles,
-                backgroundColor: theme.palette.background.paper,
-                color: theme.palette.text.primary,
-                transform: `translate(${graphWidth / 2}px, -10px)`
-              }}
-              top={thresholdTooltipTop}
-            >
-              {thresholdTooltipData}
-            </Tooltip.Tooltip>
-          </Fade>
         </div>
       </ClickAwayListener>
       {displayLegend && (
@@ -289,9 +227,7 @@ const LineChart = ({
             displayAnchor={displayAnchor?.displayGuidingLines ?? true}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
-            setLinesGraph={setLinesGraph}
             timeSeries={timeSeries}
-            xScale={xScale}
           />
         </div>
       )}

package/src/Graph/LineChart/graphAtoms.ts

@@ -1,3 +1,6 @@
 import { atom } from 'jotai';
 
+import { Line } from '../common/timeSeries/models';
+
+export const linesGraphAtom = atom<Array<Line> | null>(null);
 export const timeTickGraphAtom = atom<Date | null>(null);

package/src/Graph/LineChart/index.stories.tsx

@@ -29,11 +29,10 @@ import exclusionPeriodFirstPeriod from './mockedData/exclusionPeriodFirstPeriod.
 import exclusionPeriodSecondPeriod from './mockedData/exclusionPeriodSecondPeriod.json';
 import exclusionPeriodThirdPeriod from './mockedData/exclusionPeriodThirdPeriod.json';
 import dataLastDayForword from './mockedData/lastDayForward.json';
-import dataLastDayThreshold from './mockedData/lastDayThreshold.json';
+import dataLastDay from './mockedData/lastDayThreshold.json';
 import dataLastMonth from './mockedData/lastMonth.json';
 import dataLastWeek from './mockedData/lastWeek.json';
 import dataZoomPreview from './mockedData/zoomPreview.json';
-import dataLastDay from './mockedData/lastDay.json';
 import { Interval, ThresholdType, TooltipData } from './models';
 
 import WrapperLineChart from './index';
@@ -76,7 +75,7 @@ const Threshold = (args): JSX.Element => {
 
       <WrapperLineChart
         {...args}
-        data={dataLastDayThreshold}
+        data={dataLastDay}
         shapeLines={{
           areaThresholdLines: [
             { type: ThresholdType.basic },
@@ -124,7 +123,7 @@ const LineChartAndCLS = (args): JSX.Element => {
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
-      setData(dataLastDayThreshold as unknown as LineChartData);
+      setData(dataLastDay as unknown as LineChartData);
     }, 100000);
   }, []);
 
@@ -188,7 +187,7 @@ const LineChartAndTimePeriod = (args): JSX.Element => {
     }
 
     if (start.includes(`${defaultStart.split('T')[0]}`)) {
-      setCurrentData(dataLastDayThreshold as unknown as LineChartData);
+      setCurrentData(dataLastDay as unknown as LineChartData);
 
       return;
     }
@@ -282,7 +281,7 @@ const LineChartAndExclusionPeriod = (args): JSX.Element => {
       </ButtonGroup>
       <WrapperLineChart
         {...args}
-        data={dataLastDayThreshold as unknown as LineChartData}
+        data={dataLastDay as unknown as LineChartData}
         shapeLines={{
           areaThresholdLines: [
             {
@@ -304,7 +303,7 @@ const Template: Story = {
   render: (args) => (
     <WrapperLineChart
       {...args}
-      data={dataLastDayThreshold as unknown as LineChartData}
+      data={dataLastDay as unknown as LineChartData}
       shapeLines={{
         areaThresholdLines: [
           {
@@ -382,33 +381,3 @@ export const withCLS: Story = {
     start: defaultStart
   }
 };
-
-export const withThresholds: Story = {
-  argTypes,
-  args: {
-    ...argumentsData,
-    thresholdLabels: ['threshold 1', 'threshold 2'],
-    thresholds: [300, 350]
-  },
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
-  )
-};
-
-export const withThresholdsAndUnit: Story = {
-  argTypes,
-  args: {
-    ...argumentsData,
-    thresholdUnit: '%',
-    thresholds: [65, 79]
-  },
-  render: (args) => (
-    <WrapperLineChart
-      {...args}
-      data={dataLastDay as unknown as LineChartData}
-    />
-  )
-};

package/src/Graph/LineChart/index.tsx

@@ -25,16 +25,12 @@ dayjs.extend(timezonePlugin);
 interface Props extends Partial<LineChartProps> {
   curve?: CurveType;
   data?: LineChartData;
-  disabledThresholds?: boolean;
   end: string;
   legend: LegendModel;
   loading: boolean;
   marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
-  thresholdLabels?: Array<string>;
-  thresholdUnit?: string;
-  thresholds?: Array<number>;
 }
 
 const WrapperLineChart = ({
@@ -54,16 +50,12 @@ const WrapperLineChart = ({
   legend,
   header,
   curve = Curve.curveLinear,
-  marginBottom = 0,
-  thresholds,
-  thresholdUnit,
-  thresholdLabels,
-  disabledThresholds
+  marginBottom = 0
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
 
-  if (loading && !adjustedData) {
+  if (loading || !adjustedData) {
     return (
       <LoadingSkeleton
         displayTitleSkeleton={header?.displayTitle ?? true}
@@ -72,10 +64,6 @@ const WrapperLineChart = ({
     );
   }
 
-  if (!adjustedData) {
-    return null;
-  }
-
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
@@ -91,7 +79,6 @@ const WrapperLineChart = ({
               annotationEvent={annotationEvent}
               axis={axis}
               curve={curve}
-              disabledThresholds={disabledThresholds}
               displayAnchor={displayAnchor}
               graphData={adjustedData}
               graphInterval={{ end, start }}
@@ -102,9 +89,6 @@ const WrapperLineChart = ({
               loading={loading}
               marginBottom={marginBottom}
               shapeLines={shapeLines}
-              thresholdLabels={thresholdLabels}
-              thresholdUnit={thresholdUnit}
-              thresholds={thresholds}
               timeShiftZones={timeShiftZones}
               tooltip={tooltip}
               width={width ?? responsiveWidth}

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

@@ -326,19 +326,10 @@ const getYScale = ({
 const getScale = ({
   graphValues,
   height,
-  stackedValues,
-  thresholds
+  stackedValues
 }): ScaleLinear<number, number> => {
-  const minValue = Math.min(
-    getMin(graphValues),
-    getMin(stackedValues),
-    Math.min(...thresholds)
-  );
-  const maxValue = Math.max(
-    getMax(graphValues),
-    getMax(stackedValues),
-    Math.max(...thresholds)
-  );
+  const minValue = min(getMin(graphValues), getMin(stackedValues));
+  const maxValue = max(getMax(graphValues), getMax(stackedValues));
 
   const upperRangeValue = minValue === maxValue && maxValue === 0 ? height : 0;
 
@@ -352,17 +343,10 @@ const getScale = ({
 const getLeftScale = ({
   dataLines,
   dataTimeSeries,
-  valueGraphHeight,
-  thresholds,
-  thresholdUnit
+  valueGraphHeight
 }: AxeScale): ScaleLinear<number, number> => {
   const [firstUnit, , thirdUnit] = getUnits(dataLines);
 
-  const shouldApplyThresholds =
-    equals(thresholdUnit, firstUnit) ||
-    equals(thresholdUnit, thirdUnit) ||
-    !thresholdUnit;
-
   const graphValues = isNil(thirdUnit)
     ? getMetricValuesForUnit({
         lines: dataLines,
@@ -386,12 +370,7 @@ const getLeftScale = ({
       })
     : [0];
 
-  return getScale({
-    graphValues,
-    height: valueGraphHeight,
-    stackedValues,
-    thresholds: shouldApplyThresholds ? thresholds : []
-  });
+  return getScale({ graphValues, height: valueGraphHeight, stackedValues });
 };
 
 const getXScale = ({
@@ -407,9 +386,7 @@ const getXScale = ({
 const getRightScale = ({
   dataLines,
   dataTimeSeries,
-  valueGraphHeight,
-  thresholds,
-  thresholdUnit
+  valueGraphHeight
 }: AxeScale): ScaleLinear<number, number> => {
   const [, secondUnit] = getUnits(dataLines);
 
@@ -419,8 +396,6 @@ const getRightScale = ({
     unit: secondUnit
   });
 
-  const shouldApplyThresholds = equals(thresholdUnit, secondUnit);
-
   const secondUnitHasStackedLines = isNil(secondUnit)
     ? false
     : hasUnitStackedLines({ lines: dataLines, unit: secondUnit });
@@ -432,12 +407,7 @@ const getRightScale = ({
       })
     : [0];
 
-  return getScale({
-    graphValues,
-    height: valueGraphHeight,
-    stackedValues,
-    thresholds: shouldApplyThresholds ? thresholds : []
-  });
+  return getScale({ graphValues, height: valueGraphHeight, stackedValues });
 };
 
 const formatMetricValue = ({
@@ -506,10 +476,7 @@ const getTimeValue = ({
   xScale,
   timeSeries,
   marginLeft = margin.left
-}: TimeValueProps): TimeValue | null => {
-  if (isNil(x)) {
-    return null;
-  }
+}: TimeValueProps): TimeValue => {
   const date = xScale.invert(x - marginLeft);
   const index = bisectDate(getDates(timeSeries), date);
 

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

@@ -65,8 +65,6 @@ export interface Xscale {
 export interface AxeScale {
   dataLines: Array<Line>;
   dataTimeSeries: Array<TimeValue>;
-  thresholdUnit?: string;
-  thresholds: Array<number>;
   valueGraphHeight: number;
 }
 
@@ -119,6 +117,6 @@ export interface YScales {
 export interface TimeValueProps {
   marginLeft?: number;
   timeSeries: Array<TimeValue>;
-  x?: number;
+  x: number;
   xScale: ScaleLinear<number, number>;
 }

package/src/Listing/ActionBar/index.tsx

@@ -107,7 +107,8 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  viewMode
+  viewMode,
+  visualizationActions
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -136,6 +137,7 @@ const MemoListingActionBar = ({
         <div className={classes.actions}>
           <div>{actions}</div>
         </div>
+        {visualizationActions && <div>{visualizationActions}</div>}
         <div className={classes.subContainer}>
           {!isEmpty(viewerModeConfiguration) &&
             !isNil(viewerModeConfiguration) && (
@@ -241,7 +243,8 @@ const ListingActionBar = ({
   widthToMoveTablePagination,
   customPaginationClassName,
   viewMode,
-  viewerModeConfiguration
+  viewerModeConfiguration,
+  visualizationActions
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -265,6 +268,7 @@ const ListingActionBar = ({
       totalRows={totalRows}
       viewMode={viewMode}
       viewerModeConfiguration={viewerModeConfiguration}
+      visualizationActions={visualizationActions}
       widthToMoveTablePagination={widthToMoveTablePagination}
       onLimitChange={onLimitChange}
       onPaginate={onPaginate}

package/src/Listing/index.tsx

@@ -128,6 +128,7 @@ export interface Props<TRow> {
   totalRows?: number;
   viewMode?: ListingVariant;
   viewerModeConfiguration?: ViewerModeConfiguration;
+  visualizationActions?: JSX.Element;
   widthToMoveTablePagination?: number;
 }
 
@@ -139,6 +140,7 @@ export const performanceRowsLimit = 60;
 
 const Listing = <TRow extends { id: RowId }>({
   limit = 10,
+  visualizationActions,
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
@@ -506,6 +508,7 @@ const Listing = <TRow extends { id: RowId }>({
             totalRows={totalRows}
             viewMode={viewMode}
             viewerModeConfiguration={viewerModeConfiguration}
+            visualizationActions={visualizationActions}
             widthToMoveTablePagination={widthToMoveTablePagination}
             onLimitChange={changeLimit}
             onPaginate={onPaginate}

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -341,5 +341,32 @@ describe('Rich Text Editor', () => {
         cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
       });
     });
+
+    describe('Rich Text Editor is disabled', () => {
+      beforeEach(() => {
+        cy.mount({
+          Component: (
+            <RichTextEditor
+              disabled
+              editable
+              initialEditorState={mockInititalStateToEditor}
+            />
+          )
+        });
+      });
+
+      it('displays editor when editable props is false and an initialState exist', () => {
+        cy.get('[data-testid="RichTextEditor"]')
+          .invoke('attr', 'contenteditable')
+          .should('eq', 'false');
+        cy.findByLabelText('Undo').should('be.disabled');
+        cy.findByLabelText('Redo').should('be.disabled');
+        cy.findByLabelText('bold').should('be.disabled');
+        cy.findByLabelText('italic').should('be.disabled');
+        cy.findByLabelText('underline').should('be.disabled');
+        cy.findByLabelText('strikethrough').should('be.disabled');
+        cy.findByLabelText('link').should('be.disabled');
+      });
+    });
   });
 });

package/src/api/useGraphQuery/index.ts

@@ -1,24 +1,15 @@
-import { equals, flatten, has, isEmpty, join, pipe, pluck } from 'ramda';
+import { T, always, cond, flatten, isEmpty, join, pipe, pluck } from 'ramda';
 import dayjs from 'dayjs';
 
 import { LineChartData, useFetchQuery } from '../..';
 
 import { ServiceMetric } from './models';
 
-interface CustomTimePeriod {
-  end: string;
-  start: string;
-}
-
 interface UseMetricsQueryProps {
   baseEndpoint: string;
   metrics: Array<ServiceMetric>;
   refreshInterval?: number | false;
-  timePeriod?: {
-    end?: string | null;
-    start?: string | null;
-    timePeriodType: number;
-  };
+  timePeriod?: TimePeriod;
 }
 
 interface UseMetricsQueryState {
@@ -29,24 +20,24 @@ interface UseMetricsQueryState {
   start: string;
 }
 
+enum TimePeriod {
+  lastDay = 'last_day'
+}
+
 const getStartEndFromTimePeriod = (
-  timePeriod: number
+  timePeriod: TimePeriod
 ): { end: string; start: string } => {
-  return {
-    end: dayjs().toISOString(),
-    start: dayjs().subtract(timePeriod, 'hour').toISOString()
-  };
+  return cond([
+    [
+      T,
+      always({
+        end: dayjs().toISOString(),
+        start: dayjs().subtract(1, 'day').toISOString()
+      })
+    ]
+  ])(timePeriod);
 };
 
-const isCustomTimePeriod = (
-  timePeriod:
-    | number
-    | {
-        end?: string | null;
-        start?: string | null;
-      }
-): boolean => has('end', timePeriod) && has('start', timePeriod);
-
 interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
   base: number;
 }
@@ -54,9 +45,7 @@ interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
 const useGraphQuery = ({
   metrics,
   baseEndpoint,
-  timePeriod = {
-    timePeriodType: 1
-  },
+  timePeriod = TimePeriod.lastDay,
   refreshInterval = false
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const metricIds = pipe(
@@ -66,32 +55,16 @@ const useGraphQuery = ({
     join(',')
   )(metrics);
 
-  const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
-    ? {
-        end: timePeriod.end,
-        start: timePeriod.start
-      }
-    : timePeriod?.timePeriodType;
+  const { end, start } = getStartEndFromTimePeriod(timePeriod);
 
   const {
     data: graphData,
     isFetching,
     isLoading
   } = useFetchQuery<PerformanceGraphData>({
-    getEndpoint: () => {
-      if (isCustomTimePeriod(timePeriodToUse)) {
-        return `${baseEndpoint}?metricIds=[${metricIds}]&start=${
-          (timePeriodToUse as CustomTimePeriod).start
-        }&end=${(timePeriodToUse as CustomTimePeriod).end}`;
-      }
-
-      const { end, start } = getStartEndFromTimePeriod(
-        timePeriodToUse as number
-      );
-
-      return `${baseEndpoint}?metricIds=[${metricIds}]&start=${start}&end=${end}`;
-    },
-    getQueryKey: () => ['graph', metricIds, timePeriod],
+    getEndpoint: () =>
+      `${baseEndpoint}?metricIds=[${metricIds}]&start=${start}&end=${end}`,
+    getQueryKey: () => ['graph', metricIds],
     queryOptions: {
       enabled: !isEmpty(metricIds),
       refetchInterval: refreshInterval,
@@ -110,10 +83,6 @@ const useGraphQuery = ({
       }
     : undefined;
 
-  const { end, start } = isCustomTimePeriod(timePeriodToUse)
-    ? (timePeriodToUse as CustomTimePeriod)
-    : getStartEndFromTimePeriod(timePeriodToUse as number);
-
   return {
     end,
     graphData: formattedGraphData,

package/src/components/Modal/Modal.styles.ts

@@ -61,7 +61,8 @@ const useStyles = makeStyles<{
       color: theme.palette.text.secondary,
       margin: theme.spacing(1, 0, 1, 0),
       width: '90%'
-    }
+    },
+    height: '100%'
   },
   modalCloseButton: {
     position: 'absolute',

package/src/utils/index.ts

@@ -18,4 +18,3 @@ export * from './sanitizedHTML';
 export * from './docsURL';
 export * from './useInfiniteScrollListing';
 export * from './useLicenseExpirationWarning';
-export * from './useRefreshInterval';

package/src/Graph/LineChart/BasicComponents/Thresholds.tsx

@@ -1,119 +0,0 @@
-import { always, cond, equals, isNil } from 'ramda';
-
-import { Theme, useTheme } from '@mui/material';
-
-import { getUnits, getYScale } from '../../common/timeSeries';
-import { Line } from '../../common/timeSeries/models';
-
-interface Props {
-  displayedLines: Array<Line>;
-  hideTooltip: () => void;
-  leftScale: (value: number) => number;
-  rightScale: (value: number) => number;
-  showTooltip: (props) => void;
-  thresholdLabels?: Array<string>;
-  thresholdUnit?: string;
-  thresholds?: Array<number>;
-  width: number;
-}
-
-interface GetColorProps {
-  index: number;
-  theme: Theme;
-}
-
-const getColor = ({ index, theme }: GetColorProps): string => {
-  return cond([
-    [equals(0), always(theme.palette.warning.main)],
-    [equals(1), always(theme.palette.error.main)]
-  ])(index);
-};
-
-const Thresholds = ({
-  thresholds,
-  leftScale,
-  rightScale,
-  width,
-  displayedLines,
-  thresholdUnit,
-  showTooltip,
-  hideTooltip,
-  thresholdLabels
-}: Props): JSX.Element | null => {
-  const theme = useTheme();
-
-  if (!thresholds) {
-    return null;
-  }
-
-  const [firstUnit, secondUnit, thirdUnit] = getUnits(
-    displayedLines as Array<Line>
-  );
-
-  const shouldUseRightScale = equals(thresholdUnit, secondUnit);
-
-  const yScale = shouldUseRightScale
-    ? rightScale
-    : getYScale({
-        hasMoreThanTwoUnits: !isNil(thirdUnit),
-        invert: null,
-        leftScale,
-        rightScale,
-        secondUnit,
-        unit: firstUnit
-      });
-
-  const thresholdScaledValues = thresholds
-    .sort()
-    .map((threshold) => yScale(threshold));
-
-  return (
-    <>
-      {thresholdScaledValues.map((threshold, index) => {
-        return (
-          <line
-            data-testid={`threshold-${threshold}`}
-            key={`threshold-${thresholdLabels?.[index]}-${threshold}`}
-            stroke={getColor({
-              index,
-              theme
-            })}
-            strokeDasharray="5,5"
-            strokeWidth={2}
-            x1={0}
-            x2={width}
-            y1={threshold}
-            y2={threshold}
-          />
-        );
-      })}
-      {thresholdScaledValues.map((threshold, index) => {
-        return (
-          <line
-            data-testid={`threshold-${threshold}-tooltip`}
-            key={`threshold-${thresholdLabels?.[index]}-${threshold}-tooltip`}
-            stroke="transparent"
-            strokeWidth={4}
-            x1={0}
-            x2={width}
-            y1={threshold}
-            y2={threshold}
-            onMouseEnter={(): void => {
-              if (!thresholdLabels?.[index]) {
-                return;
-              }
-              showTooltip({
-                tooltipData: thresholdLabels?.[index],
-                tooltipLeft: 0,
-                tooltipTop: threshold
-              });
-            }}
-            onMouseLeave={hideTooltip}
-          />
-        );
-      })}
-    </>
-  );
-};
-
-export default Thresholds;

package/src/utils/useRefreshInterval.ts

@@ -1,21 +0,0 @@
-import { always, cond, equals } from 'ramda';
-
-interface Props {
-  globalRefreshInterval?: number;
-  refreshInterval: 'default' | 'custom' | 'manual';
-  refreshIntervalCustom?: number;
-}
-
-export const useRefreshInterval = ({
-  refreshInterval,
-  refreshIntervalCustom,
-  globalRefreshInterval
-}: Props): number | false => {
-  const refreshIntervalToUse = cond([
-    [equals('default'), always(globalRefreshInterval)],
-    [equals('custom'), always(refreshIntervalCustom)],
-    [equals('manual'), always(0)]
-  ])(refreshInterval);
-
-  return refreshIntervalToUse ? refreshIntervalToUse * 1000 : false;
-};