@centreon/ui 24.5.2 → 24.5.3

package/src/utils/resourcesStatusURL.ts

@@ -0,0 +1,166 @@
+import {
+  always,
+  cond,
+  equals,
+  flatten,
+  groupBy,
+  identity,
+  includes,
+  map,
+  pipe,
+  T
+} from 'ramda';
+
+import { SelectEntry } from '..';
+
+import { centreonBaseURL } from './centreonBaseURL';
+
+export interface Resource {
+  resourceType: string;
+  resources: Array<SelectEntry>;
+}
+
+interface GetResourcesUrlProps {
+  allResources: Array<Resource>;
+  isForOneResource: boolean;
+  resource?;
+  states: Array<string>;
+  statuses: Array<string>;
+  type: string;
+}
+
+export const getDetailsPanelQueriers = ({ resource, type }): object => {
+  const { id, parentId, uuid } = resource;
+
+  const resourcesDetailsEndpoint = cond([
+    [
+      equals('host'),
+      always(`${centreonBaseURL}/api/latest/monitoring/resources/hosts/${id}`)
+    ],
+    [
+      equals('service'),
+      always(
+        `${centreonBaseURL}/api/latest/monitoring/resources/hosts/${parentId}/services/${id}`
+      )
+    ],
+    [
+      equals('metaservice'),
+      always(
+        `${centreonBaseURL}/api/latest/monitoring/resources/metaservices/${id}`
+      )
+    ],
+    [
+      equals('anomaly-detection'),
+      always(
+        `${centreonBaseURL}/api/latest/monitoring/resources/anomaly-detection/${id}`
+      )
+    ]
+  ])(type);
+
+  const queryParameters = {
+    id,
+    resourcesDetailsEndpoint,
+    selectedTimePeriodId: 'last_24_h',
+    tab: 'details',
+    tabParameters: {},
+    uuid
+  };
+
+  return queryParameters;
+};
+
+export const getResourcesUrl = ({
+  type,
+  statuses,
+  states,
+  allResources,
+  isForOneResource,
+  resource
+}: GetResourcesUrlProps): string => {
+  const resourcesCriterias = equals(type, 'all')
+    ? {
+        name: 'resource_types',
+        value: [
+          { id: 'service', name: 'Service' },
+          { id: 'host', name: 'Host' }
+        ]
+      }
+    : {
+        name: 'resource_types',
+        value: [
+          { id: type, name: `${type.charAt(0).toUpperCase()}${type.slice(1)}` }
+        ]
+      };
+
+  const formattedStatuses = pipe(
+    flatten,
+    map((status: string) => {
+      return {
+        id: status.toLocaleUpperCase(),
+        name: `${status.charAt(0).toUpperCase()}${status.slice(1)}`
+      };
+    })
+  )(statuses);
+
+  const formattedStates = states.map((state) => {
+    return {
+      id: state,
+      name: `${state.charAt(0).toUpperCase()}${state.slice(1)}`
+    };
+  });
+
+  const groupedResources = groupBy(
+    ({ resourceType }) => resourceType,
+    allResources
+  );
+
+  const resourcesFilters = Object.entries(groupedResources).map(
+    ([resourceType, res]) => {
+      const name = cond<Array<string>, string>([
+        [equals('host'), always('parent_name')],
+        [equals('service'), always('name')],
+        [T, identity]
+      ])(resourceType);
+
+      return {
+        name: name.replace('-', '_'),
+        value: flatten(
+          (res || []).map(({ resources: subResources }) => {
+            return subResources.map(({ name: resourceName }) => ({
+              id: includes(name, ['name', 'parent_name'])
+                ? `\\b${resourceName}\\b`
+                : resourceName,
+              name: resourceName
+            }));
+          })
+        )
+      };
+    }
+  );
+
+  const filterQueryParameter = {
+    criterias: [
+      resourcesCriterias,
+      { name: 'statuses', value: formattedStatuses },
+      { name: 'states', value: formattedStates },
+      ...resourcesFilters,
+      { name: 'search', value: '' }
+    ]
+  };
+
+  const encodedFilterParams = encodeURIComponent(
+    JSON.stringify(filterQueryParameter)
+  );
+
+  if (!isForOneResource) {
+    return `/monitoring/resources?filter=${encodedFilterParams}&fromTopCounter=true`;
+  }
+
+  const detailsPanelQueriers = getDetailsPanelQueriers({ resource, type });
+
+  const encodedDetailsParams = encodeURIComponent(
+    JSON.stringify(detailsPanelQueriers)
+  );
+
+  return `/monitoring/resources?details=${encodedDetailsParams}&filter=${encodedFilterParams}&fromTopCounter=true`;
+};

package/src/utils/usePluralizedTranslation.test.ts

@@ -0,0 +1,159 @@
+import { act, renderHook } from '@testing-library/react';
+import { useAtom } from 'jotai';
+
+import { ListingVariant, userAtom } from '@centreon/ui-context';
+
+import { usePluralizedTranslation } from './usePluralizedTranslation';
+
+const baseUser = {
+  alias: 'admin',
+  isExportButtonEnabled: false,
+  name: 'admin',
+  timezone: 'Europe/Paris',
+  use_deprecated_pages: false,
+  user_interface_density: ListingVariant.compact
+};
+
+describe('usePluralizedTranslation', () => {
+  describe('English', () => {
+    it('returns the plural of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'en'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 2,
+          label: 'House'
+        })
+      ).toEqual('Houses');
+    });
+
+    it('returns the singular of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'en'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 1,
+          label: 'House'
+        })
+      ).toEqual('House');
+    });
+
+    it('returns the plural of a word when the corresponding count is 0 and the language is english', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'en'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 0,
+          label: 'House'
+        })
+      ).toEqual('Houses');
+    });
+  });
+
+  describe('French', () => {
+    it('returns the plural of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'fr'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 2,
+          label: 'Maison'
+        })
+      ).toEqual('Maisons');
+    });
+
+    it('returns the singular of a word when the corresponding count is set', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'fr'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 1,
+          label: 'Maison'
+        })
+      ).toEqual('Maison');
+    });
+
+    it('returns the singular of a word when the corresponding count is 0 and the language is english', () => {
+      const { result } = renderHook(() => {
+        return {
+          pluralizedTranslation: usePluralizedTranslation(),
+          userAtom: useAtom(userAtom)
+        };
+      });
+
+      act(() => {
+        result.current.userAtom[1]({
+          ...baseUser,
+          locale: 'fr'
+        });
+      });
+
+      expect(
+        result.current.pluralizedTranslation.pluralizedT({
+          count: 0,
+          label: 'Maison'
+        })
+      ).toEqual('Maison');
+    });
+  });
+});

package/src/utils/usePluralizedTranslation.ts

@@ -1,5 +1,11 @@
+import { useCallback } from 'react';
+
 import { useTranslation } from 'react-i18next';
 import pluralize from 'pluralize';
+import { useAtomValue } from 'jotai';
+import { equals, includes } from 'ramda';
+
+import { userAtom } from '@centreon/ui-context';
 
 interface TProps {
   count: number;
@@ -10,10 +16,21 @@ export const usePluralizedTranslation = (): {
   pluralizedT: (props: TProps) => string;
 } => {
   const translation = useTranslation();
+  const { locale } = useAtomValue(userAtom);
 
-  const pluralizedT = ({ label, count }: TProps): string => {
-    return pluralize(translation.t(label), count);
-  };
+  const isNotPartitiveLocale = includes('fr', locale);
+
+  const pluralizedT = useCallback(
+    ({ label, count }: TProps): string => {
+      const isZero = equals(count, 0);
+
+      return pluralize(
+        translation.t(label),
+        isZero && isNotPartitiveLocale ? 1 : count
+      );
+    },
+    [isNotPartitiveLocale]
+  );
 
   return {
     pluralizedT

package/src/components/Form/Dashboard/DashboardForm.stories.ts

@@ -1,39 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { DashboardForm } from './DashboardForm';
-
-const meta: Meta<typeof DashboardForm> = {
-  component: DashboardForm
-};
-
-export default meta;
-type Story = StoryObj<typeof DashboardForm>;
-
-export const Default: Story = {
-  args: {
-    labels: {
-      actions: {
-        cancel: 'Cancel',
-        submit: {
-          create: 'Create',
-          update: 'Update'
-        }
-      },
-      entity: {
-        description: 'Description',
-        name: 'Name'
-      }
-    }
-  }
-};
-
-export const AsUpdateVariant: Story = {
-  args: {
-    ...Default.args,
-    resource: {
-      description: 'Description 1',
-      name: 'Dashboard 1'
-    },
-    variant: 'update'
-  }
-};