@centreon/ui 23.10.75 → 23.10.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.75",
+  "version": "23.10.76",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/LineChart/BasicComponents/Lines/RegularLines/index.tsx

@@ -16,7 +16,7 @@ interface Props {
   graphHeight: number;
   highlight?: boolean;
   lineColor: string;
-  metric: string;
+  metric_id: number;
   shapeAreaClosed?: Record<string, unknown>;
   shapeLinePath?: Record<string, unknown>;
   timeSeries: Array<TimeValue>;
@@ -30,7 +30,7 @@ const RegularLine = ({
   filled,
   timeSeries,
   highlight,
-  metric,
+  metric_id,
   lineColor,
   unit,
   yScale,
@@ -43,13 +43,13 @@ const RegularLine = ({
   const props = {
     curve,
     data: timeSeries,
-    defined: (value): boolean => !isNil(value[metric]),
+    defined: (value): boolean => !isNil(value[metric_id]),
     opacity: 1,
     stroke: lineColor,
     strokeWidth: !highlight ? 1 : 2,
     unit,
     x: (timeValue): number => xScale(getTime(timeValue)) as number,
-    y: (timeValue): number => yScale(prop(metric, timeValue)) ?? null
+    y: (timeValue): number => yScale(prop(metric_id, timeValue)) ?? null
   };
 
   if (filled) {
@@ -57,7 +57,7 @@ const RegularLine = ({
       <Shape.AreaClosed<TimeValue>
         fill={getFillColor({ areaColor, transparency })}
         fillRule="nonzero"
-        key={metric}
+        key={metric_id}
         y0={Math.min(yScale(0), graphHeight)}
         yScale={yScale}
         {...props}

package/src/Graph/LineChart/BasicComponents/Lines/StackedLines/index.tsx

@@ -32,11 +32,13 @@ const StackLines = ({
       data={timeSeries}
       defined={(d): boolean => {
         return pipe(
-          map(prop('metric')) as unknown as (displayedLines) => Array<string>,
-          all((metric) => pipe(path(['data', metric]), isNil, not)(d))
+          map(prop('metric_id')) as unknown as (
+            displayedLines
+          ) => Array<string>,
+          all((metric_id) => pipe(path(['data', metric_id]), isNil, not)(d))
         )(lines);
       }}
-      keys={map(prop('metric'), lines)}
+      keys={map(prop('metric_id'), lines)}
       x={(d): number => xScale(getTime(d.data)) ?? 0}
       y0={(d): number => yScale(d[0]) ?? 0}
       y1={(d): number => yScale(d[1]) ?? 0}

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/useScaleThreshold.ts

@@ -53,21 +53,21 @@ const useScaleThreshold = ({
   const [, secondUnit, thirdUnit] = getUnits(lines);
 
   const {
-    metric: metricY1,
+    metric_id: metricY1,
     unit: unitY1,
     invert: invertY1,
     lineColor: lineColorY1
   } = lineUpper;
 
   const {
-    metric: metricY0,
+    metric_id: metricY0,
     unit: unitY0,
     invert: invertY0,
     lineColor: lineColorY0
   } = lineLower;
 
   const {
-    metric: metricOrigin,
+    metric_id: metricOrigin,
     unit: unitYOrigin,
     invert: invertYOrigin
   } = lineOrigin;

package/src/Graph/LineChart/BasicComponents/Lines/index.tsx

@@ -129,14 +129,14 @@ const Lines = ({
       {displayAreaRegularLines
         ? regularLines.map(
             ({
-              metric,
               areaColor,
               transparency,
               lineColor,
               filled,
               unit,
               highlight,
-              invert
+              invert,
+              metric_id
             }) => {
               const [, secondUnit, thirdUnit] = getUnits(
                 regularLines as Array<Line>
@@ -151,12 +151,12 @@ const Lines = ({
               });
 
               return (
-                <g key={metric}>
+                <g key={metric_id}>
                   {displayGuidingLines && (
                     <RegularAnchorPoint
                       areaColor={areaColor}
                       lineColor={lineColor}
-                      metric={metric}
+                      metric_id={metric_id}
                       timeSeries={timeSeries}
                       transparency={transparency}
                       xScale={xScale}
@@ -170,7 +170,7 @@ const Lines = ({
                     graphHeight={height}
                     highlight={highlight}
                     lineColor={lineColor}
-                    metric={metric}
+                    metric_id={metric_id}
                     timeSeries={timeSeries}
                     transparency={transparency}
                     unit={unit}

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

@@ -11,7 +11,7 @@ import AnchorPoint from '.';
 
 interface Props {
   lineColor: string;
-  metric: string;
+  metric_id: number;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
@@ -21,18 +21,18 @@ const getYAnchorPoint = ({
   timeTick,
   timeSeries,
   yScale,
-  metric
+  metric_id
 }: GetYAnchorPoint): number => {
   const index = bisectDate(getDates(timeSeries), timeTick);
   const timeValue = timeSeries[index];
 
-  return yScale(prop(metric, timeValue) as number);
+  return yScale(prop(metric_id, timeValue) as number);
 };
 
 const RegularAnchorPoint = ({
   xScale,
   yScale,
-  metric,
+  metric_id,
   timeSeries,
   lineColor
 }: Props): JSX.Element | null => {
@@ -48,7 +48,7 @@ const RegularAnchorPoint = ({
   const xAnchorPoint = xScale(timeTick);
 
   const yAnchorPoint = getYAnchorPoint({
-    metric,
+    metric_id,
     timeSeries,
     timeTick,
     yScale

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/models.ts

@@ -32,7 +32,7 @@ export interface GuidingLines {
 }
 
 export interface GetYAnchorPoint {
-  metric: string;
+  metric_id: number;
   timeSeries: Array<TimeValue>;
   timeTick: Date;
   yScale: ScaleLinear<number, number>;

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

@@ -69,25 +69,25 @@ const MainLegend = ({
       value
     }) || 'N/A';
 
-  const selectMetric = ({ event, metric }): void => {
+  const selectMetric = ({ event, metric_id }): void => {
     if (!toggable) {
       return;
     }
 
     if (event.ctrlKey || event.metaKey) {
-      toggleMetricLine(metric);
+      toggleMetricLine(metric_id);
 
       return;
     }
 
-    selectMetricLine(metric);
+    selectMetricLine(metric_id);
   };
 
   return (
     <div className={classes.legend}>
       <div className={classes.items}>
         {displayedLines.map((line) => {
-          const { color, name, display, metric, highlight } = line;
+          const { color, display, highlight, metric_id } = line;
 
           const markerColor = display
             ? color
@@ -119,9 +119,9 @@ const MainLegend = ({
                 highlight ? classes.highlight : classes.normal,
                 toggable && classes.toggable
               )}
-              key={name}
-              onClick={(event): void => selectMetric({ event, metric })}
-              onMouseEnter={(): void => highlightLine(metric)}
+              key={metric_id}
+              onClick={(event): void => selectMetric({ event, metric_id })}
+              onMouseEnter={(): void => highlightLine(metric_id)}
               onMouseLeave={(): void => clearHighlight()}
             >
               <LegendMarker color={markerColor} disabled={!display} />

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

@@ -43,34 +43,34 @@ const useInteractiveValues = ({
     equals(item.timeTick, timeValue?.timeTick)
   );
 
-  const getMetricsToDisplay = (): Array<string> => {
+  const getMetricsToDisplay = (): Array<number> => {
     if (isNil(graphTimeValue)) {
       return [];
     }
     const metricsData = getMetrics(graphTimeValue as TimeValue);
 
-    const metricsToDisplay = metricsData.filter((metric) => {
-      const line = getLineForMetric({ lines, metric });
+    const metricsToDisplay = metricsData.filter((metric_id) => {
+      const line = getLineForMetric({ lines, metric_id: Number(metric_id) });
 
-      return !isNil(graphTimeValue[metric]) && !isNil(line);
+      return !isNil(graphTimeValue[metric_id]) && !isNil(line);
     });
 
-    return metricsToDisplay;
+    return metricsToDisplay.map(Number);
   };
 
   const metrics = useMemo(() => getMetricsToDisplay(), [graphTimeValue]);
 
   const getFormattedMetricData = (
-    metric: string
+    metric_id: number
   ): FormattedMetricData | null => {
     if (isNil(graphTimeValue)) {
       return null;
     }
-    const value = graphTimeValue[metric] as number;
+    const value = graphTimeValue[metric_id] as number;
 
     const { color, name, unit } = getLineForMetric({
       lines,
-      metric
+      metric_id
     }) as Line;
 
     const formattedValue = formatMetricValue({
@@ -88,9 +88,9 @@ const useInteractiveValues = ({
   };
 
   const getFormattedValue = (line: Line): string | undefined | null => {
-    const metric = find(equals(line.metric), metrics);
+    const metric_id = find(equals(line.metric_id), metrics);
 
-    return metric && getFormattedMetricData(metric)?.formattedValue;
+    return metric_id ? getFormattedMetricData(metric_id)?.formattedValue : null;
   };
 
   return { getFormattedValue };

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

@@ -11,18 +11,16 @@ import {
   prop,
   propEq,
   reject,
-  sortBy,
-  compose,
-  toLower
+  sortBy
 } from 'ramda';
 
 import { Line } from '../../common/timeSeries/models';
 
 interface LegendActions {
   clearHighlight: () => void;
-  highlightLine: (metric: string) => void;
-  selectMetricLine: (metric: string) => void;
-  toggleMetricLine: (metric: string) => void;
+  highlightLine: (metric_id: number) => void;
+  selectMetricLine: (metric_id: number) => void;
+  toggleMetricLine: (metric_id: number) => void;
 }
 
 interface Props {
@@ -32,26 +30,26 @@ interface Props {
 
 const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
   const displayedLines = reject(propEq('display', false), lines);
-  const getLineByMetric = (metric: string): Line =>
-    find(propEq('metric', metric), lines) as Line;
+  const getLineByMetric = (metric_id: number): Line =>
+    find(propEq('metric_id', metric_id), lines) as Line;
 
-  const toggleMetricLine = (metric): void => {
-    const line = getLineByMetric(metric);
+  const toggleMetricLine = (metric_id): void => {
+    const line = getLineByMetric(metric_id);
 
     setLinesGraph([
-      ...reject(propEq('metric', metric), lines),
+      ...reject(propEq('metric_id', metric_id), lines),
       { ...line, display: !line.display }
     ]);
   };
 
-  const highlightLine = (metric): void => {
+  const highlightLine = (metric_id): void => {
     const fadedLines = map((line) => ({ ...line, highlight: false }), lines);
     const data = [
-      ...reject(propEq('metric', metric), fadedLines),
-      { ...getLineByMetric(metric), highlight: true }
+      ...reject(propEq('metric_id', metric_id), fadedLines),
+      { ...getLineByMetric(metric_id), highlight: true }
     ];
 
-    const sortedData = sortBy(compose(toLower, prop('name')), data);
+    const sortedData = sortBy(prop('metric_id'), data);
 
     setLinesGraph(sortedData);
   };
@@ -60,8 +58,8 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
     setLinesGraph(map((line) => ({ ...line, highlight: undefined }), lines));
   };
 
-  const selectMetricLine = (metric: string): void => {
-    const metricLine = getLineByMetric(metric);
+  const selectMetricLine = (metric_id: number): void => {
+    const metricLine = getLineByMetric(metric_id);
 
     const isLineDisplayed = pipe(head, equals(metricLine))(displayedLines);
     const isOnlyLineDisplayed =
@@ -99,7 +97,7 @@ const useLegend = ({ lines, setLinesGraph }: Props): LegendActions => {
 
     const newLines = lines.map((line) => ({
       ...line,
-      display: find(propEq('name', line.name), lines)?.display ?? true
+      display: find(propEq('metric_id', line.metric_id), lines)?.display ?? true
     }));
 
     setLinesGraph(newLines);

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

@@ -24,6 +24,7 @@ describe('timeSeries', () => {
         legend: 'Round-Trip-Time Average (ms)',
         maximum_value: 1.5,
         metric: 'rta',
+        metric_id: 1,
         minimum_value: 0.5,
         unit: 'ms'
       },
@@ -43,6 +44,7 @@ describe('timeSeries', () => {
         legend: 'Time (ms)',
         maximum_value: 1.5,
         metric: 'time',
+        metric_id: 2,
         minimum_value: 0.5,
         unit: 'ms'
       },
@@ -62,6 +64,7 @@ describe('timeSeries', () => {
         legend: 'Average duration (ms)',
         maximum_value: 1.5,
         metric: 'avgDuration',
+        metric_id: 3,
         minimum_value: 0.5,
         unit: 'ms'
       },
@@ -81,6 +84,7 @@ describe('timeSeries', () => {
         legend: 'Duration (ms)',
         maximum_value: 1.5,
         metric: 'duration',
+        metric_id: 4,
         minimum_value: 0.5,
         unit: 'ms'
       },
@@ -100,6 +104,7 @@ describe('timeSeries', () => {
         legend: 'Packet Loss (%)',
         maximum_value: 1.5,
         metric: 'packet_loss',
+        metric_id: 5,
         minimum_value: 0.5,
         unit: '%'
       }
@@ -111,19 +116,19 @@ describe('timeSeries', () => {
     it('returns the time series for the given graph data', () => {
       expect(timeSeries.getTimeSeries(graphData)).toEqual([
         {
-          avgDuration: 6,
-          duration: 12,
-          packet_loss: 0,
-          rta: 0,
-          time: 0.5,
+          1: 0,
+          2: 0.5,
+          3: 6,
+          4: 12,
+          5: 0,
           timeTick: '2020-11-05T10:35:00Z'
         },
         {
-          avgDuration: 4,
-          duration: 25,
-          packet_loss: 1,
-          rta: 1,
-          time: 3,
+          1: 1,
+          2: 3,
+          3: 4,
+          4: 25,
+          5: 1,
           timeTick: '2020-11-05T10:40:00Z'
         }
       ]);
@@ -139,17 +144,17 @@ describe('timeSeries', () => {
 
       expect(timeSeries.getTimeSeries(graphDataWithLowerLimit)).toEqual([
         {
-          avgDuration: 6,
-          duration: 12,
-          time: 0.5,
+          2: 0.5,
+          3: 6,
+          4: 12,
           timeTick: '2020-11-05T10:35:00Z'
         },
         {
-          avgDuration: 4,
-          duration: 25,
-          packet_loss: 1,
-          rta: 1,
-          time: 3,
+          1: 1,
+          2: 3,
+          3: 4,
+          4: 25,
+          5: 1,
           timeTick: '2020-11-05T10:40:00Z'
         }
       ]);
@@ -171,6 +176,7 @@ describe('timeSeries', () => {
           lineColor: 'black',
           maximum_value: 1.5,
           metric: 'rta',
+          metric_id: 1,
           minimum_value: 0.5,
           name: 'Round-Trip-Time Average (ms)',
           stackOrder: null,
@@ -189,6 +195,7 @@ describe('timeSeries', () => {
           lineColor: 'blue',
           maximum_value: 1.5,
           metric: 'time',
+          metric_id: 2,
           minimum_value: 0.5,
           name: 'Time (ms)',
           stackOrder: null,
@@ -207,6 +214,7 @@ describe('timeSeries', () => {
           lineColor: 'red',
           maximum_value: 1.5,
           metric: 'avgDuration',
+          metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
           stackOrder: 2,
@@ -225,6 +233,7 @@ describe('timeSeries', () => {
           lineColor: 'yellow',
           maximum_value: 1.5,
           metric: 'duration',
+          metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
           stackOrder: 1,
@@ -243,6 +252,7 @@ describe('timeSeries', () => {
           lineColor: 'yellow',
           maximum_value: 1.5,
           metric: 'packet_loss',
+          metric_id: 5,
           minimum_value: 0.5,
           name: 'Packet Loss (%)',
           stackOrder: null,
@@ -300,7 +310,7 @@ describe('timeSeries', () => {
     it('returns the line corresponding to the given metrics', () => {
       const lines = timeSeries.getLineData(graphData);
 
-      expect(timeSeries.getLineForMetric({ lines, metric: 'rta' })).toEqual({
+      expect(timeSeries.getLineForMetric({ lines, metric_id: 1 })).toEqual({
         areaColor: 'transparent',
         average_value: 1,
         color: 'black',
@@ -312,6 +322,7 @@ describe('timeSeries', () => {
         lineColor: 'black',
         maximum_value: 1.5,
         metric: 'rta',
+        metric_id: 1,
         minimum_value: 0.5,
         name: 'Round-Trip-Time Average (ms)',
         stackOrder: null,
@@ -369,6 +380,7 @@ describe('timeSeries', () => {
           lineColor: 'yellow',
           maximum_value: 1.5,
           metric: 'duration',
+          metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
           stackOrder: 1,
@@ -387,6 +399,7 @@ describe('timeSeries', () => {
           lineColor: 'red',
           maximum_value: 1.5,
           metric: 'avgDuration',
+          metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
           stackOrder: 2,
@@ -423,13 +436,13 @@ describe('timeSeries', () => {
         })
       ).toEqual([
         {
-          avgDuration: 6,
-          duration: 12,
+          3: 6,
+          4: 12,
           timeTick: '2020-11-05T10:35:00Z'
         },
         {
-          avgDuration: 4,
-          duration: 25,
+          3: 4,
+          4: 25,
           timeTick: '2020-11-05T10:40:00Z'
         }
       ]);
@@ -453,6 +466,7 @@ describe('timeSeries', () => {
           lineColor: 'yellow',
           maximum_value: 1.5,
           metric: 'duration',
+          metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
           stackOrder: 1,
@@ -480,6 +494,7 @@ describe('timeSeries', () => {
           lineColor: 'red',
           maximum_value: 1.5,
           metric: 'avgDuration',
+          metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
           stackOrder: 2,

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

@@ -70,9 +70,9 @@ const toTimeTickValue = (
   timeIndex: number
 ): TimeValue => {
   const getMetricsForIndex = (): Omit<TimeValue, 'timeTick'> => {
-    const addMetricForTimeIndex = (acc, { metric, data }): TimeValue => ({
+    const addMetricForTimeIndex = (acc, { metric_id, data }): TimeValue => ({
       ...acc,
-      [metric]: data[timeIndex]
+      [metric_id]: data[timeIndex]
     });
 
     return reduce(addMetricForTimeIndex, {} as TimeValue, metrics);
@@ -116,7 +116,8 @@ const toLine = ({
   unit,
   average_value,
   minimum_value,
-  maximum_value
+  maximum_value,
+  metric_id
 }: Metric): Line => ({
   areaColor: ds_data.ds_color_area,
   average_value,
@@ -129,6 +130,7 @@ const toLine = ({
   lineColor: ds_data.ds_color_line,
   maximum_value,
   metric,
+  metric_id,
   minimum_value,
   name: legend,
   stackOrder: equals(ds_data.ds_stack, '1')
@@ -153,8 +155,8 @@ const getMetrics = (timeValue: TimeValue): Array<string> =>
 
 const getValueForMetric =
   (timeValue: TimeValue) =>
-  (metric: string): number =>
-    prop(metric, timeValue) as number;
+  (metric_id: number): number =>
+    prop(metric_id, timeValue) as number;
 
 const getUnits = (lines: Array<Line>): Array<string> =>
   pipe(map(prop('unit')), uniq)(lines);
@@ -170,15 +172,15 @@ const getMetricValuesForUnit = ({
   timeSeries,
   unit
 }: ValuesForUnitProps): Array<number> => {
-  const getTimeSeriesValuesForMetric = (metric): Array<number> =>
+  const getTimeSeriesValuesForMetric = (metric_id): Array<number> =>
     map(
-      (timeValue) => getValueForMetric(timeValue)(metric),
+      (timeValue) => getValueForMetric(timeValue)(metric_id),
       timeSeries
     ) as Array<number>;
 
   return pipe(
     filter(propEq('unit', unit)) as (line) => Array<Line>,
-    map(prop('metric')),
+    map(prop('metric_id')),
     map(getTimeSeriesValuesForMetric),
     flatten,
     reject(isNil)
@@ -194,14 +196,14 @@ const getDates = (timeSeries: Array<TimeValue>): Array<Date> => {
 
 interface LineForMetricProps {
   lines: Array<Line>;
-  metric: string;
+  metric_id: number;
 }
 
 const getLineForMetric = ({
   lines,
-  metric
+  metric_id
 }: LineForMetricProps): Line | undefined =>
-  find(propEq('metric', metric), lines);
+  find(propEq('metric_id', metric_id), lines);
 
 interface LinesTimeSeries {
   lines: Array<Line>;
@@ -222,11 +224,11 @@ const getStackedMetricValues = ({
   lines,
   timeSeries
 }: LinesTimeSeries): Array<number> => {
-  const getTimeSeriesValuesForMetric = (metric): Array<number> =>
-    map((timeValue) => getValueForMetric(timeValue)(metric), timeSeries);
+  const getTimeSeriesValuesForMetric = (metric_id): Array<number> =>
+    map((timeValue) => getValueForMetric(timeValue)(metric_id), timeSeries);
 
   const metricsValues = pipe(
-    map(prop('metric')) as (metric) => Array<string>,
+    map(prop('metric_id')) as (metric) => Array<number>,
     map(getTimeSeriesValuesForMetric) as () => Array<Array<number>>
   )(lines as Array<Line>);
 
@@ -279,14 +281,14 @@ const getTimeSeriesForLines = ({
   lines,
   timeSeries
 }: LinesTimeSeries): Array<TimeValue> => {
-  const metrics = map(prop('metric'), lines);
+  const metrics = map(prop('metric_id'), lines);
 
   return map(
     ({ timeTick, ...metricsValue }): TimeValue => ({
       ...reduce(
-        (acc, metric): Omit<TimeValue, 'timePick'> => ({
+        (acc, metric_id): Omit<TimeValue, 'timePick'> => ({
           ...acc,
-          [metric]: metricsValue[metric]
+          [metric_id]: metricsValue[metric_id]
         }),
         {},
         metrics

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

@@ -21,6 +21,7 @@ export interface Metric {
   legend: string;
   maximum_value: number | null;
   metric: string;
+  metric_id: number;
   minimum_value: number | null;
   unit: string;
   warning_high_threshold: number | null;
@@ -30,7 +31,7 @@ export interface Metric {
 type TimeSeries = { timeTick: string };
 
 export type TimeValue = TimeSeries & {
-  [field: string]: number;
+  [field: number]: number;
 };
 
 export interface Line {
@@ -45,6 +46,7 @@ export interface Line {
   lineColor: string;
   maximum_value: number | null;
   metric: string;
+  metric_id: number;
   minimum_value: number | null;
   name: string;
   stackOrder: number | null;

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -10,7 +10,8 @@ import {
   pipe,
   not,
   has,
-  omit
+  omit,
+  uniqBy
 } from 'ramda';
 
 import { CircularProgress, useTheme } from '@mui/material';
@@ -30,6 +31,7 @@ import {
 import useFetchQuery from '../../../../api/useFetchQuery';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
+  allowUniqOption?: boolean;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -57,6 +59,7 @@ const ConnectedAutocompleteField = (
     getRequestHeaders,
     displayOptionThumbnail,
     queryKey,
+    allowUniqOption,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -305,7 +308,9 @@ const ConnectedAutocompleteField = (
         filterOptions={(opt): SelectEntry => opt}
         loading={isFetching}
         open={optionsOpen}
-        options={options}
+        options={
+          allowUniqOption ? uniqBy(getRenderedOptionText, options) : options
+        }
         renderOption={renderOptions}
         onChange={(_, value) => setAutocompleteChangedValue(value)}
         onClose={(): void => setOptionsOpen(false)}

package/src/InputField/Select/Autocomplete/Multi/index.tsx

@@ -1,7 +1,7 @@
 import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Chip, ChipProps } from '@mui/material';
+import { Chip, ChipProps, Tooltip } from '@mui/material';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import Autocomplete, { Props as AutocompleteProps } from '..';
@@ -34,6 +34,7 @@ export interface Props
     > {
   chipProps?: ChipProps;
   disableSortedOptions?: boolean;
+  getOptionTooltipLabel?: (option) => string;
   getTagLabel?: (option) => string;
   optionProperty?: string;
 }
@@ -45,6 +46,7 @@ const MultiAutocompleteField = ({
   optionProperty = 'name',
   getOptionLabel = (option): string => option.name,
   getTagLabel = (option): string => option[optionProperty],
+  getOptionTooltipLabel,
   chipProps,
   ...props
 }: Props): JSX.Element => {
@@ -52,17 +54,22 @@ const MultiAutocompleteField = ({
 
   const renderTags = (renderedValue, getTagProps): Array<JSX.Element> =>
     renderedValue.map((option, index) => (
-      <Chip
-        classes={{
-          deleteIcon: classes.deleteIcon,
-          root: classes.tag
-        }}
+      <Tooltip
         key={option.id}
-        label={getTagLabel(option)}
-        size="medium"
-        {...getTagProps({ index })}
-        {...chipProps}
-      />
+        placement="top"
+        title={getOptionTooltipLabel?.(option)}
+      >
+        <Chip
+          classes={{
+            deleteIcon: classes.deleteIcon,
+            root: classes.tag
+          }}
+          label={getTagLabel(option)}
+          size="medium"
+          {...getTagProps({ index })}
+          {...chipProps}
+        />
+      </Tooltip>
     ));
 
   const getLimitTagsText = (more): JSX.Element => <Option>{`+${more}`}</Option>;

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -1,6 +1,7 @@
 import { useAtomValue } from 'jotai';
 import { makeStyles } from 'tss-react/mui';
 import { equals } from 'ramda';
+import { useTranslation } from 'react-i18next';
 
 import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
@@ -34,6 +35,7 @@ const useStyles = makeStyles()((theme) => ({
     textAlign: 'left'
   },
   row: {
+    alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(1)
@@ -63,11 +65,12 @@ const PickerDateWithLabel = ({
   direction = PickersStartEndDateDirection.column
 }: PropsPickersDateWithLabel): JSX.Element => {
   const { classes, cx } = useStyles();
+  const { t } = useTranslation();
   const isRow = equals(direction, PickersStartEndDateDirection.row);
 
   return (
     <div aria-label={label} className={cx({ [classes.row]: isRow })}>
-      <Typography component={isRow ? 'div' : 'p'}>{label}</Typography>
+      <Typography component={isRow ? 'div' : 'p'}>{t(label)}</Typography>
       <DateTimePickerInput
         changeDate={changeDate}
         date={date}
@@ -106,10 +109,10 @@ const PickersStartEndDate = ({
   const { locale } = useAtomValue(userAtom);
   const error = useAtomValue(errorTimePeriodAtom);
 
-  const maxStart = rangeStartDate?.max;
+  const maxStart = rangeStartDate?.max || endDate;
   const minStart = rangeStartDate?.min;
   const maxEnd = rangeEndDate?.max;
-  const minEnd = rangeEndDate?.min;
+  const minEnd = rangeEndDate?.min || startDate;
 
   const styleContainer = equals(direction, PickersStartEndDateDirection.column)
     ? classes.verticalDirection
@@ -132,7 +135,7 @@ const PickersStartEndDate = ({
           direction={direction}
           disabled={disabled?.isDisabledStartPicker}
           label="From"
-          maxDate={maxStart}
+          maxDate={maxStart || undefined}
           minDate={minStart}
           property={CustomTimePeriodProperty.start}
         />
@@ -141,9 +144,9 @@ const PickersStartEndDate = ({
           date={endDate}
           direction={direction}
           disabled={disabled?.isDisabledEndPicker}
-          label="To"
+          label="to"
           maxDate={maxEnd}
-          minDate={minEnd}
+          minDate={minEnd || undefined}
           property={CustomTimePeriodProperty.end}
         />
       </div>

package/src/TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod.tsx

@@ -0,0 +1,28 @@
+import PickersStartEndDate from './PopoverCustomTimePeriod/PickersStartEndDate';
+import {
+  AcceptDateProps,
+  PickersStartEndDateDirection
+} from './PopoverCustomTimePeriod/models';
+
+interface Props {
+  changeDate: (props: AcceptDateProps) => void;
+  endDate: Date;
+  startDate: Date;
+}
+
+const SimpleCustomTimePeriod = ({
+  startDate,
+  endDate,
+  changeDate
+}: Props): JSX.Element => {
+  return (
+    <PickersStartEndDate
+      changeDate={changeDate}
+      direction={PickersStartEndDateDirection.row}
+      endDate={endDate}
+      startDate={startDate}
+    />
+  );
+};
+
+export default SimpleCustomTimePeriod;

package/src/TimePeriods/index.stories.tsx

@@ -4,6 +4,7 @@ import dayjs from 'dayjs';
 import Switch from '@mui/material/Switch';
 
 import { dateFormat } from './models';
+import SimpleCustomTimePeriod from './CustomTimePeriod/SimpleCustomTimePeriod';
 
 import TimePeriod from '.';
 
@@ -16,10 +17,16 @@ export default meta;
 
 type Story = StoryObj<typeof TimePeriod>;
 
+type StorySimpleTimePeriod = StoryObj<typeof SimpleCustomTimePeriod>;
+
 const Template: Story = {
   render: (args) => <TimePeriod {...args} />
 };
 
+const TemplateWithSimpleTimePeriod: StorySimpleTimePeriod = {
+  render: (args) => <SimpleCustomTimePeriod {...args} />
+};
+
 const TemplateWithExternalComponent: Story = {
   render: (args) => (
     <TimePeriod {...args} renderExternalComponent={<Switch />} />
@@ -96,3 +103,11 @@ export const WithExternalComponent: Story = {
   ...TemplateWithExternalComponent,
   argTypes
 };
+
+export const SimpleTimePeriod: StorySimpleTimePeriod = {
+  ...TemplateWithSimpleTimePeriod,
+  args: {
+    endDate: dayjs(Date.now()).toDate(),
+    startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
+  }
+};

package/src/api/useGraphQuery/index.ts

@@ -1,9 +1,9 @@
-import { equals, flatten, has, isEmpty, join, pipe, pluck } from 'ramda';
+import { equals, has, isEmpty, pluck } from 'ramda';
 import dayjs from 'dayjs';
 
-import { LineChartData, useFetchQuery } from '../..';
+import { LineChartData, buildListingEndpoint, useFetchQuery } from '../..';
 
-import { ServiceMetric } from './models';
+import { Resource, WidgetResourceType } from './models';
 
 interface CustomTimePeriod {
   end: string;
@@ -12,8 +12,9 @@ interface CustomTimePeriod {
 
 interface UseMetricsQueryProps {
   baseEndpoint: string;
-  metrics: Array<ServiceMetric>;
+  metrics: Array<string>;
   refreshInterval?: number | false;
+  resources?: Array<Resource>;
   timePeriod?: {
     end?: string | null;
     start?: string | null;
@@ -25,7 +26,7 @@ interface UseMetricsQueryState {
   end: string;
   graphData: LineChartData | undefined;
   isGraphLoading: boolean;
-  isMetricIdsEmpty: boolean;
+  isMetricsEmpty: boolean;
   start: string;
 }
 
@@ -51,21 +52,28 @@ interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
   base: number;
 }
 
+const resourceTypeQueryParameter = {
+  [WidgetResourceType.host]: 'host.id',
+  [WidgetResourceType.hostCategory]: 'hostcategory.id',
+  [WidgetResourceType.hostGroup]: 'hostgroup.id',
+  [WidgetResourceType.service]: 'service.name'
+};
+
+const areResourcesFullfilled = (value: Array<Resource>): boolean =>
+  value?.every(
+    ({ resourceType, resources }) =>
+      !isEmpty(resourceType) && !isEmpty(resources)
+  );
+
 const useGraphQuery = ({
   metrics,
+  resources = [],
   baseEndpoint,
   timePeriod = {
     timePeriodType: 1
   },
   refreshInterval = false
 }: UseMetricsQueryProps): UseMetricsQueryState => {
-  const metricIds = pipe(
-    pluck('metrics'),
-    flatten,
-    pluck('id'),
-    join(',')
-  )(metrics);
-
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
         end: timePeriod.end,
@@ -73,27 +81,44 @@ const useGraphQuery = ({
       }
     : timePeriod?.timePeriodType;
 
+  const startAndEnd = isCustomTimePeriod(timePeriodToUse)
+    ? (timePeriodToUse as CustomTimePeriod)
+    : getStartEndFromTimePeriod(timePeriodToUse as number);
+
+  const definedMetrics = metrics.filter((metric) => metric);
+
   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}`;
+      const endpoint = buildListingEndpoint({
+        baseEndpoint,
+        parameters: {
+          search: {
+            lists: resources.map((resource) => ({
+              field: resourceTypeQueryParameter[resource.resourceType],
+              values: equals(resource.resourceType, 'service')
+                ? pluck('name', resource.resources)
+                : pluck('id', resource.resources)
+            }))
+          }
+        }
+      });
+
+      return `${endpoint}&start=${startAndEnd.start}&end=${
+        startAndEnd.end
+      }&metric_names=[${definedMetrics.join(',')}]`;
     },
-    getQueryKey: () => ['graph', metricIds, timePeriod],
+    getQueryKey: () => [
+      'graph',
+      JSON.stringify(definedMetrics),
+      JSON.stringify(resources),
+      timePeriod
+    ],
     queryOptions: {
-      enabled: !isEmpty(metricIds),
+      enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
       refetchInterval: refreshInterval,
       suspense: false
     }
@@ -117,8 +142,8 @@ const useGraphQuery = ({
   return {
     end,
     graphData: formattedGraphData,
-    isGraphLoading: isFetching || (isLoading && !isEmpty(metricIds)),
-    isMetricIdsEmpty: isEmpty(metricIds),
+    isGraphLoading: isFetching || (isLoading && !isEmpty(definedMetrics)),
+    isMetricsEmpty: isEmpty(definedMetrics),
     start
   };
 };

package/src/api/useGraphQuery/models.ts

@@ -1,12 +1,13 @@
-interface NamedEntity {
-  id: number;
-  name: string;
-}
+import { SelectEntry } from '../..';
 
-interface Metric extends NamedEntity {
-  unit: string;
+export interface Resource {
+  resourceType: string;
+  resources: Array<SelectEntry>;
 }
 
-export interface ServiceMetric extends NamedEntity {
-  metrics: Array<Metric>;
+export enum WidgetResourceType {
+  host = 'host',
+  hostCategory = 'host-category',
+  hostGroup = 'host-group',
+  service = 'service'
 }

package/src/index.ts

@@ -147,3 +147,6 @@ export * from './Dashboard';
 export * from './Graph';
 export type { LineChartData } from './Graph/common/models';
 export * from './Graph/common/timeSeries';
+
+export { default as TimePeriods } from './TimePeriods';
+export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';