@centreon/ui 23.10.61 → 23.10.63

package/src/Graph/common/utils.ts

@@ -1,20 +1,73 @@
-import { T, always, cond, gt, head } from 'ramda';
+import {
+  T,
+  always,
+  cond,
+  equals,
+  gt,
+  gte,
+  head,
+  length,
+  lt,
+  lte,
+  pluck
+} from 'ramda';
 
 import { Theme } from '@mui/material';
 
+import { Thresholds } from './models';
+
 interface GetColorFromDataAndThresholdsProps {
   data: number;
   theme: Theme;
-  thresholds: Array<number>;
+  thresholds: Thresholds;
 }
 
 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)],
+}: GetColorFromDataAndThresholdsProps): string => {
+  if (!thresholds.enabled) {
+    return theme.palette.success.main;
+  }
+
+  const criticalValues = pluck('value', thresholds.critical).sort();
+  const warningValues = pluck('value', thresholds.warning).sort();
+
+  if (
+    equals(length(criticalValues), 2) &&
+    lte(criticalValues[0], data) &&
+    gte(criticalValues[1], data)
+  ) {
+    return theme.palette.error.main;
+  }
+
+  if (
+    equals(length(warningValues), 2) &&
+    lte(warningValues[0], data) &&
+    gte(warningValues[1], data)
+  ) {
+    return theme.palette.warning.main;
+  }
+
+  if (equals(length(warningValues), 2)) {
+    return theme.palette.success.main;
+  }
+
+  const criticalValue = head(criticalValues) as number;
+  const warningValue = head(warningValues) as number;
+
+  if (gt(warningValue, criticalValue)) {
+    return cond([
+      [lt(warningValue), always(theme.palette.success.main)],
+      [lt(criticalValue), always(theme.palette.warning.main)],
+      [T, always(theme.palette.error.main)]
+    ])(data);
+  }
+
+  return cond([
+    [gt(warningValue), always(theme.palette.success.main)],
+    [gt(criticalValue), always(theme.palette.warning.main)],
     [T, always(theme.palette.error.main)]
   ])(data);
+};

package/src/api/useGraphQuery/index.ts

@@ -1,15 +1,24 @@
-import { T, always, cond, flatten, isEmpty, join, pipe, pluck } from 'ramda';
+import { equals, flatten, has, 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?: TimePeriod;
+  timePeriod?: {
+    end?: string | null;
+    start?: string | null;
+    timePeriodType: number;
+  };
 }
 
 interface UseMetricsQueryState {
@@ -20,24 +29,24 @@ interface UseMetricsQueryState {
   start: string;
 }
 
-enum TimePeriod {
-  lastDay = 'last_day'
-}
-
 const getStartEndFromTimePeriod = (
-  timePeriod: TimePeriod
+  timePeriod: number
 ): { end: string; start: string } => {
-  return cond([
-    [
-      T,
-      always({
-        end: dayjs().toISOString(),
-        start: dayjs().subtract(1, 'day').toISOString()
-      })
-    ]
-  ])(timePeriod);
+  return {
+    end: dayjs().toISOString(),
+    start: dayjs().subtract(timePeriod, 'hour').toISOString()
+  };
 };
 
+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;
 }
@@ -45,7 +54,9 @@ interface PerformanceGraphData extends Omit<LineChartData, 'global'> {
 const useGraphQuery = ({
   metrics,
   baseEndpoint,
-  timePeriod = TimePeriod.lastDay,
+  timePeriod = {
+    timePeriodType: 1
+  },
   refreshInterval = false
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const metricIds = pipe(
@@ -55,16 +66,32 @@ const useGraphQuery = ({
     join(',')
   )(metrics);
 
-  const { end, start } = getStartEndFromTimePeriod(timePeriod);
+  const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
+    ? {
+        end: timePeriod.end,
+        start: timePeriod.start
+      }
+    : timePeriod?.timePeriodType;
 
   const {
     data: graphData,
     isFetching,
     isLoading
   } = useFetchQuery<PerformanceGraphData>({
-    getEndpoint: () =>
-      `${baseEndpoint}?metricIds=[${metricIds}]&start=${start}&end=${end}`,
-    getQueryKey: () => ['graph', metricIds],
+    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],
     queryOptions: {
       enabled: !isEmpty(metricIds),
       refetchInterval: refreshInterval,
@@ -83,6 +110,10 @@ 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,8 +61,7 @@ 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,3 +18,4 @@ export * from './sanitizedHTML';
 export * from './docsURL';
 export * from './useInfiniteScrollListing';
 export * from './useLicenseExpirationWarning';
+export * from './useRefreshInterval';

package/src/utils/useRefreshInterval.ts

@@ -0,0 +1,21 @@
+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;
+};