@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.2 → 23.10.18-MON-17793-create-graph-component-centreon-ui.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.2",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.3",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts

@@ -3,43 +3,33 @@ import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()((theme) => ({
   button: {
     height: '100%',
-    minWidth: 120,
     padding: theme.spacing(0, 0.5)
   },
   buttonContent: {
     alignItems: 'center',
     columnGap: theme.spacing(1),
-    display: 'grid',
-    gridTemplateColumns: 'min-content auto'
+    display: 'flex'
   },
-  compactFromTo: {
+  containerDates: {
     display: 'flex',
-    flexDirection: 'column',
-    padding: theme.spacing(0.5, 0, 0.5, 0)
+    gap: theme.spacing(0.5),
+    [theme.breakpoints.down('sm')]: {
+      columnGap: theme.spacing(0.5),
+      flexDirection: 'column'
+    }
   },
   date: {
-    display: 'flex'
-  },
-  dateLabel: {
-    display: 'flex',
-    flex: 1,
-    paddingRight: 4
+    minWidth: theme.spacing(12.5),
+    textAlign: 'start'
   },
   error: {
     textAlign: 'center'
   },
-  fromTo: {
-    alignItems: 'center',
-    columnGap: theme.spacing(0.5),
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2, auto)'
-  },
-  minimalPickers: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'grid',
-    gridTemplateColumns: 'min-content auto'
+  label: {
+    minWidth: theme.spacing(3),
+    textAlign: 'start'
   },
+
   picker: {
     display: 'flex',
     flexDirection: 'column',
@@ -49,8 +39,12 @@ const useStyles = makeStyles()((theme) => ({
   },
   timeContainer: {
     alignItems: 'center',
+    columnGap: theme.spacing(1),
     display: 'flex',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    [theme.breakpoints.down('sm')]: {
+      alignItems: 'flex-start'
+    }
   }
 }));
 

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -1,8 +1,7 @@
 import { useAtomValue } from 'jotai';
-import { lt } from 'ramda';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { Button, Typography, useTheme } from '@mui/material';
+import { Button, Typography } from '@mui/material';
 
 import { dateTimeFormat, useLocaleDateTimeFormat } from '@centreon/ui';
 
@@ -13,55 +12,66 @@ import useStyles from './CompactCustomTimePeriod.styles';
 interface Props {
   disabled?: boolean;
   onClick: (event) => void;
-  width: number;
 }
 
 const CompactCustomTimePeriod = ({
-  width,
   onClick,
   disabled = false
 }: Props): JSX.Element => {
-  const theme = useTheme();
   const { classes } = useStyles();
 
   const { format } = useLocaleDateTimeFormat();
 
   const customTimePeriod = useAtomValue(customTimePeriodAtom);
 
-  const isCompact = lt(width, theme.breakpoints.values.sm);
-
   return (
-    <Button
-      aria-label="Compact time period"
-      className={classes.button}
-      color="primary"
-      data-testid="Compact time period"
-      disabled={disabled}
-      variant="outlined"
-      onClick={onClick}
-    >
-      <div className={classes.buttonContent}>
-        <AccessTimeIcon />
-        <div className={isCompact ? classes.compactFromTo : classes.fromTo}>
-          <div className={classes.timeContainer}>
-            <div className={classes.dateLabel}>
-              <Typography variant="caption">From:</Typography>
-            </div>
-            <div className={classes.date}>
-              <Typography variant="caption">
+    <div>
+      <Button
+        aria-label="CompactTimePeriod"
+        className={classes.button}
+        color="primary"
+        data-testid="Compact time period"
+        disabled={disabled}
+        variant="outlined"
+        onClick={onClick}
+      >
+        <div className={classes.buttonContent}>
+          <AccessTimeIcon />
+          <div className={classes.containerDates}>
+            <div className={classes.timeContainer}>
+              <Typography
+                className={classes.label}
+                component="div"
+                variant="caption"
+              >
+                From:
+              </Typography>
+
+              <Typography
+                className={classes.date}
+                component="div"
+                variant="caption"
+              >
                 {format({
                   date: customTimePeriod.start,
                   formatString: dateTimeFormat
                 })}
               </Typography>
             </div>
-          </div>
-          <div className={classes.timeContainer}>
-            <div className={classes.dateLabel}>
-              <Typography variant="caption">To:</Typography>
-            </div>
-            <div className={classes.date}>
-              <Typography variant="caption">
+            <div className={classes.timeContainer}>
+              <Typography
+                className={classes.label}
+                component="div"
+                variant="caption"
+              >
+                To:
+              </Typography>
+
+              <Typography
+                className={classes.date}
+                component="div"
+                variant="caption"
+              >
                 {format({
                   date: customTimePeriod.end,
                   formatString: dateTimeFormat
@@ -70,8 +80,8 @@ const CompactCustomTimePeriod = ({
             </div>
           </div>
         </div>
-      </div>
-    </Button>
+      </Button>
+    </div>
   );
 };
 

package/src/TimePeriods/CustomTimePeriod/index.tsx

@@ -14,10 +14,9 @@ import PopoverCustomTimePeriod from './PopoverCustomTimePeriod';
 
 interface Props {
   disabled?: boolean;
-  width: number;
 }
 
-const CustomTimePeriod = ({ width, disabled = false }: Props): JSX.Element => {
+const CustomTimePeriod = ({ disabled = false }: Props): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
 
   const customTimePeriod = useAtomValue(customTimePeriodAtom);
@@ -43,7 +42,6 @@ const CustomTimePeriod = ({ width, disabled = false }: Props): JSX.Element => {
     <>
       <CompactCustomTimePeriod
         disabled={disabled}
-        width={width}
         onClick={onClickCompactCustomTimePeriod}
       />
       <PopoverCustomTimePeriod

package/src/TimePeriods/ResolutionTimePeriod.cypress.spec.tsx

@@ -0,0 +1,65 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/fr';
+import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utcPlugin from 'dayjs/plugin/utc';
+import { Provider, createStore } from 'jotai';
+
+import { Switch } from '@mui/material';
+
+import { userAtom } from '@centreon/ui-context';
+
+import { retrievedUser } from './mockedData';
+
+import AwesomeTimePeriod from '.';
+
+dayjs.extend(timezonePlugin);
+dayjs.extend(utcPlugin);
+dayjs.extend(localizedFormatPlugin);
+
+const data = [
+  {
+    locale: 'fr_FR',
+    resolution: { height: 720, width: 500 },
+    timezone: 'Europe/Paris'
+  },
+  {
+    locale: 'fr_FR',
+    resolution: { height: 720, width: 200 },
+    timezone: 'Europe/Paris'
+  },
+  {
+    locale: 'fr_FR',
+    resolution: { height: 720, width: 1024 },
+    timezone: 'Europe/Paris'
+  }
+];
+
+data.forEach((item) =>
+  describe('Time period', () => {
+    const { height, width } = item.resolution;
+    beforeEach(() => {
+      cy.viewport(width, height);
+
+      const store = createStore();
+
+      store.set(userAtom, {
+        ...retrievedUser,
+        locale: 'fr_FR',
+        timezone: 'Europe/Paris'
+      });
+
+      cy.mount({
+        Component: (
+          <Provider store={store}>
+            <AwesomeTimePeriod renderExternalComponent={<Switch />} />
+          </Provider>
+        )
+      });
+    });
+
+    it(`displays correctly the dates design when screen resolution is ${width}px`, () => {
+      cy.matchImageSnapshot(`${width}px`);
+    });
+  })
+);

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -53,46 +53,42 @@ const SelectedTimePeriod = ({
   );
 
   return (
-    <div>
-      <ButtonGroup
-        className={classes.buttonGroup}
-        color="primary"
-        component="span"
-        disabled={disabled}
-        size="small"
-      >
-        {map(
-          ({ id, name, largeName }) => (
-            <Tooltip key={name} placement="top" title={largeName}>
-              <Button
-                className={classes.button}
-                component="span"
-                data-testid={id}
-                variant={
-                  equals(selectedTimePeriodData?.id, id)
-                    ? 'contained'
-                    : 'outlined'
-                }
-                onClick={(): void =>
-                  changeSelectedTimePeriod({
-                    id,
-                    timePeriods: currentTimePeriods
-                  })
-                }
-              >
-                {
-                  cond<number, string>([
-                    [lte(theme.breakpoints.values.md), always(largeName)],
-                    [T, always(name)]
-                  ])(width) as string
-                }
-              </Button>
-            </Tooltip>
-          ),
-          timePeriodOptions
-        )}
-      </ButtonGroup>
-    </div>
+    <ButtonGroup
+      className={classes.buttonGroup}
+      color="primary"
+      disabled={disabled}
+      size="small"
+    >
+      {map(
+        ({ id, name, largeName }) => (
+          <Tooltip key={name} placement="top" title={largeName}>
+            <Button
+              className={classes.button}
+              data-testid={id}
+              variant={
+                equals(selectedTimePeriodData?.id, id)
+                  ? 'contained'
+                  : 'outlined'
+              }
+              onClick={(): void =>
+                changeSelectedTimePeriod({
+                  id,
+                  timePeriods: currentTimePeriods
+                })
+              }
+            >
+              {
+                cond<number, string>([
+                  [lte(theme.breakpoints.values.md), always(largeName)],
+                  [T, always(name)]
+                ])(width) as string
+              }
+            </Button>
+          </Tooltip>
+        ),
+        timePeriodOptions
+      )}
+    </ButtonGroup>
   );
 };
 

package/src/TimePeriods/{timePeriods.styles.ts → TimePeriods.styles.ts}

@@ -6,15 +6,17 @@ interface StylesProps {
 
 export const useStyles = makeStyles<StylesProps>()((theme, { disabled }) => ({
   header: {
-    alignItems: 'center',
+    [theme.breakpoints.down('sm')]: {
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      rowGap: theme.spacing(1)
+    },
     backgroundColor: disabled ? 'transparent' : 'undefined',
     border: disabled ? 'unset' : 'undefined',
     boxShadow: disabled ? 'unset' : 'undefined',
     columnGap: theme.spacing(2),
-    display: 'grid',
-    gridTemplateColumns: `repeat(4, auto)`,
+    display: 'flex',
     gridTemplateRows: '1fr',
-    justifyContent: 'center',
-    padding: theme.spacing(1, 0.5)
+    justifyContent: 'center'
   }
 }));

package/src/TimePeriods/index.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 import dayjs from 'dayjs';
 
+import Switch from '@mui/material/Switch';
+
 import { dateFormat } from './models';
 
 import AwesomeTimePeriod from '.';
@@ -18,16 +20,10 @@ const Template: Story = {
   render: (args) => <AwesomeTimePeriod {...args} />
 };
 
-const args = {
-  extraTimePeriods: [
-    {
-      dateTimeFormat: dateFormat,
-      getStart: (): Date => dayjs(Date.now()).subtract(29, 'day').toDate(),
-      id: 'last_29_days',
-      largeName: 'last 29 days',
-      name: '29 days'
-    }
-  ]
+const TemplateWithExternalComponent: Story = {
+  render: (args) => (
+    <AwesomeTimePeriod {...args} renderExternalComponent={<Switch />} />
+  )
 };
 
 const argTypes = {
@@ -66,9 +62,30 @@ const argTypes = {
     }
   }
 };
+const args = {
+  extraTimePeriods: [
+    {
+      dateTimeFormat: dateFormat,
+      getStart: (): Date => dayjs(Date.now()).subtract(29, 'day').toDate(),
+      id: 'last_29_days',
+      largeName: 'last 29 days',
+      name: '29 days'
+    }
+  ]
+};
 
 export const TimePeriod: Story = {
+  ...Template,
+  argTypes
+};
+
+export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
   args
 };
+
+export const WithExternalComponent: Story = {
+  ...TemplateWithExternalComponent,
+  argTypes
+};

package/src/TimePeriods/index.tsx

@@ -1,4 +1,10 @@
+import { ReactNode } from 'react';
+
 import { Responsive } from '@visx/visx';
+import 'dayjs/locale/en';
+import 'dayjs/locale/pt';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/es';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
@@ -14,7 +20,7 @@ import {
   EndStartInterval,
   TimePeriod
 } from './models';
-import { useStyles } from './timePeriods.styles';
+import { useStyles } from './TimePeriods.styles';
 import useAwesomeTimePeriod from './useAwesomeTimePeriod';
 
 dayjs.extend(isSameOrAfter);
@@ -28,6 +34,7 @@ export interface Props {
   extraTimePeriods?: Array<TimePeriod>;
   getIsError?: (value: boolean) => void;
   getStartEndParameters?: ({ start, end }: EndStartInterval) => void;
+  renderExternalComponent?: ReactNode;
 }
 
 const AwesomeTimePeriod = ({
@@ -35,7 +42,8 @@ const AwesomeTimePeriod = ({
   disabled = false,
   getStartEndParameters,
   getIsError,
-  adjustTimePeriodData
+  adjustTimePeriodData,
+  renderExternalComponent
 }: Props): JSX.Element => {
   const { classes } = useStyles({ disabled });
 
@@ -56,7 +64,8 @@ const AwesomeTimePeriod = ({
                 extraTimePeriods={extraTimePeriods}
                 width={width}
               />
-              <CustomTimePeriod disabled={disabled} width={width} />
+              <CustomTimePeriod disabled={disabled} />
+              <div>{renderExternalComponent}</div>
             </Paper>
           );
         }}

package/src/TimePeriods/mockedData.ts

@@ -0,0 +1,12 @@
+import { ListingVariant } from '@centreon/ui-context';
+
+export const retrievedUser = {
+  alias: 'Admin alias',
+  default_page: '/monitoring/resources',
+  is_export_button_enabled: true,
+  isExportButtonEnabled: true,
+  locale: 'fr_FR.UTF8',
+  name: 'Admin',
+  use_deprecated_pages: false,
+  user_interface_density: ListingVariant.compact
+};