@centreon/ui 24.11.21 → 24.11.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.11.21",
+  "version": "24.11.22",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/Chart/useChartData.ts

@@ -4,6 +4,7 @@ import {
   compose,
   flatten,
   groupBy,
+  isEmpty,
   isNil,
   lensPath,
   pipe,
@@ -36,6 +37,11 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
     if (isNil(data)) {
       return data;
     }
+
+    if (isEmpty(data.metrics) || isEmpty(data.times)) {
+      return undefined;
+    }
+
     const metricsGroupedByColor = groupBy(
       (metric) => metric.ds_data.ds_color_line
     )(data?.metrics || []);

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

@@ -38,6 +38,7 @@ export type Props = {
   onTextChange?;
   placeholder?: string | undefined;
   required?: boolean;
+  forceInputRenderValue?: boolean;
 } & Omit<
   AutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
   'renderInput'
@@ -160,7 +161,8 @@ const AutocompleteField = forwardRef(
       autoSize = false,
       autoSizeDefaultWidth = 0,
       autoSizeCustomPadding,
-      getOptionItemLabel = (option) => option.name,
+      getOptionItemLabel = (option) => option?.name,
+      forceInputRenderValue = false,
       ...autocompleteProps
     }: Props,
     ref?: ForwardedRef<HTMLDivElement>
@@ -178,59 +180,74 @@ const AutocompleteField = forwardRef(
       );
     };
 
-    const renderInput = (params): JSX.Element => (
-      <TextField
-        {...params}
-        InputLabelProps={{
-          classes: {
-            marginDense: classes.inputLabel,
-            shrink: classes.inputLabelShrink
+    const renderInput = (params): JSX.Element => {
+      return (
+        <TextField
+          {...params}
+          InputLabelProps={{
+            classes: {
+              marginDense: classes.inputLabel,
+              shrink: classes.inputLabelShrink
+            }
+          }}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {endAdornment && (
+                  <InputAdornment position="end">{endAdornment}</InputAdornment>
+                )}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+            style: {
+              background: 'transparent',
+              minWidth: 0,
+              padding: theme.spacing(
+                0.75,
+                isEmpty(placeholder) ? 0 : 5,
+                0.75,
+                0.75
+              )
+            }
+          }}
+          autoFocus={autoFocus}
+          autoSize={autoSize}
+          autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
+          autoSizeDefaultWidth={autoSizeDefaultWidth}
+          classes={{
+            root: classes.textfield
+          }}
+          error={error}
+          externalValueForAutoSize={autocompleteProps?.value?.name}
+          inputProps={{
+            ...params.inputProps,
+            'aria-label': label,
+            'data-testid': dataTestId || label,
+            id: getNormalizedId(label || ''),
+            ...(forceInputRenderValue
+              ? {
+                  value: getOptionItemLabel(
+                    autocompleteProps?.value || undefined
+                  )
+                }
+              : {}),
+            ...autocompleteProps?.inputProps
+          }}
+          label={label}
+          placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
+          required={required}
+          value={
+            inputValue ||
+            (forceInputRenderValue
+              ? getOptionItemLabel(autocompleteProps?.value || undefined)
+              : undefined) ||
+            undefined
           }
-        }}
-        InputProps={{
-          ...params.InputProps,
-          endAdornment: (
-            <>
-              {endAdornment && (
-                <InputAdornment position="end">{endAdornment}</InputAdornment>
-              )}
-              {params.InputProps.endAdornment}
-            </>
-          ),
-          style: {
-            background: 'transparent',
-            minWidth: 0,
-            padding: theme.spacing(
-              0.75,
-              isEmpty(placeholder) ? 0 : 5,
-              0.75,
-              0.75
-            )
-          }
-        }}
-        autoFocus={autoFocus}
-        autoSize={autoSize}
-        autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
-        autoSizeDefaultWidth={autoSizeDefaultWidth}
-        classes={{
-          root: classes.textfield
-        }}
-        error={error}
-        externalValueForAutoSize={autocompleteProps?.value?.name}
-        inputProps={{
-          ...params.inputProps,
-          'aria-label': label,
-          'data-testid': dataTestId || label,
-          id: getNormalizedId(label || ''),
-          ...autocompleteProps?.inputProps
-        }}
-        label={label}
-        placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
-        required={required}
-        value={inputValue || undefined}
-        onChange={onTextChange}
-      />
-    );
+          onChange={onTextChange}
+        />
+      );
+    };
 
     return (
       <Autocomplete

package/src/api/useGraphQuery/index.ts

@@ -74,7 +74,8 @@ export const resourceTypeQueryParameter = {
   [WidgetResourceType.hostGroup]: 'hostgroup.id',
   [WidgetResourceType.serviceCategory]: 'servicecategory.id',
   [WidgetResourceType.serviceGroup]: 'servicegroup.id',
-  [WidgetResourceType.service]: 'service.name'
+  [WidgetResourceType.service]: 'service.name',
+  [WidgetResourceType.metaService]: 'metaservice.id'
 };
 
 const areResourcesFullfilled = (value: Array<Resource>): boolean =>
@@ -108,9 +109,9 @@ const useGraphQuery = ({
     : getStartEndFromTimePeriod(timePeriodToUse as number);
 
   const definedMetrics = metrics.filter((metric) => metric);
-  const formattedDefinedMetrics = definedMetrics.map((metric) =>
-    encodeURIComponent(metric.name)
-  );
+  const formattedDefinedMetrics = definedMetrics
+    .map((metric) => `metric_names[]=${encodeURIComponent(metric.name)}`)
+    .join('&');
 
   const prefixQuery = prefix ? [prefix] : [];
 
@@ -138,9 +139,7 @@ const useGraphQuery = ({
         }
       });
 
-      return `${endpoint}&start=${startAndEnd.start}&end=${
-        startAndEnd.end
-      }&metric_names=[${formattedDefinedMetrics.join(',')}]`;
+      return `${endpoint}&start=${startAndEnd.start}&end=${startAndEnd.end}&${formattedDefinedMetrics}`;
     },
     getQueryKey: () => [
       ...prefixQuery,

package/src/api/useGraphQuery/models.ts

@@ -10,6 +10,7 @@ export enum WidgetResourceType {
   hostCategory = 'host-category',
   hostGroup = 'host-group',
   service = 'service',
+  metaService = 'meta-service',
   serviceCategory = 'service-category',
   serviceGroup = 'service-group'
 }

package/src/index.ts

@@ -131,6 +131,7 @@ export {
   default as useGraphQuery,
   resourceTypeQueryParameter
 } from './api/useGraphQuery';
+export { WidgetResourceType as ResourceType } from './api/useGraphQuery/models';
 export { default as QueryProvider, client } from './api/QueryProvider';
 export {
   default as FileDropZone,