fix(Header): top counters are no longer collapsable (#11717)

* first part * enhancements * enhancements * enhancements * Update www/front_src/src/Header/index.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * fix skelton * fix eslint Co-authored-by: Tom Darneix <tomdar87@outlook.com>
centreon · Sep 12, 2022 · 51930aa · 51930aa
1 parent 84a6afa
commit 51930aa
Show file tree

Hide file tree

Showing 8 changed files with 490 additions and 1,933 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -125,9 +125,9 @@
     "string-argv": "^0.3.1",
     "systemjs": "^6.12.1",
     "ts.data.json": "^2.1.0",
+    "tss-react": "^4.1.3",
     "use-deep-compare-effect": "^1.8.1",
-    "yup": "^0.32.11" ,
-    "tss-react": "^4.1.3"
+    "yup": "^0.32.11"
   },
   "jest": {
     "testResultsProcessor": "jest-junit",

diff --git a/www/front_src/src/Header/PollerMenu/index.tsx b/www/front_src/src/Header/PollerMenu/index.tsx
@@ -165,7 +165,6 @@ const PollerMenu = (): JSX.Element | null => {
       clearInterval(interval.current);
     };
   }, []);
-  const loaderWidth = 16;
   const pollerListIssues =
     'internal.php?object=centreon_topcounter&action=pollersListIssues';
 
@@ -196,7 +195,7 @@ const PollerMenu = (): JSX.Element | null => {
   }
 
   if (isNil(issues)) {
-    return <MenuSkeleton width={loaderWidth} />;
+    return <MenuSkeleton />;
   }
 
   const redirectToPollerConfiguration = (): void => {
@@ -225,7 +224,6 @@ const PollerMenu = (): JSX.Element | null => {
           <div className={classes.iconToggleMenu}>
             <IconToggleSubmenu
               data-testid="submenu-poller"
-              iconType="arrow"
               rotate={toggled}
               onClick={toggleDetailedView}
             />

diff --git a/www/front_src/src/Header/RessourceStatusCounter/Host/index.tsx b/www/front_src/src/Header/RessourceStatusCounter/Host/index.tsx
@@ -137,7 +137,7 @@ const HostStatusCounter = (): JSX.Element => {
   return (
     <RessourceStatusCounter<HostData>
       endpoint={hostStatusEndpoint}
-      loaderWidth={16}
+      loaderWidth={12}
       schema={statusSchema}
     >
       {({ hasPending, toggled, toggleDetailedView, data }): JSX.Element => (

diff --git a/www/front_src/src/Header/RessourceStatusCounter/Service/index.tsx b/www/front_src/src/Header/RessourceStatusCounter/Service/index.tsx
@@ -137,7 +137,7 @@ const ServiceStatusCounter = (): JSX.Element => {
   return (
     <RessourceStatusCounter
       endpoint={serviceStatusEndpoint}
-      loaderWidth={20}
+      loaderWidth={14}
       schema={statusSchema}
     >
       {({ hasPending, data, toggled, toggleDetailedView }): JSX.Element => (

diff --git a/www/front_src/src/Header/index.tsx b/www/front_src/src/Header/index.tsx
@@ -17,28 +17,32 @@ import UserMenu from './userMenu';
 export const isDarkMode = (theme: Theme): boolean =>
   equals(theme.palette.mode, ThemeMode.dark);
 
-export const headerHeight = 8;
+export const headerHeight = 6;
 
 const useStyles = makeStyles((theme) => ({
   container: {
-    alignItems: 'center',
+    alignItems: 'flex-end',
     display: 'flex',
-    justifyContent: 'space-between',
     margin: theme.spacing(0, 4, 0, 3),
     width: '100%',
   },
   header: {
-    alignItems: 'center',
     backgroundColor: isDarkMode(theme)
       ? theme.palette.background.default
       : theme.palette.primary.main,
     display: 'flex',
     height: theme.spacing(headerHeight),
+    paddingBottom: theme.spacing(0.5),
     width: '100%',
   },
+  item: {
+    flex: 1,
+    maxWidth: theme.spacing(15),
+  },
   leftContainer: {
-    alignItems: 'center',
+    alignItems: 'flex-end',
     display: 'flex',
+    flex: 1,
     gap: theme.spacing(3),
     [theme.breakpoints.down(768)]: {
       gap: theme.spacing(2),
@@ -51,6 +55,8 @@ const useStyles = makeStyles((theme) => ({
   userMenuContainer: {
     alignItems: 'center',
     display: 'flex',
+    flex: 0.5,
+    justifyContent: 'flex-end',
   },
 }));
 
@@ -62,10 +68,18 @@ const Header = (): JSX.Element => {
     <header className={classes.header} ref={headerRef}>
       <div className={classes.container}>
         <div className={classes.leftContainer}>
-          <PollerMenu />
-          <ServiceStatusCounter />
-          <HostStatusCounter />
-          <FederatedComponent path="/bam/header/topCounter" />
+          <div className={classes.item}>
+            <PollerMenu />
+          </div>
+          <div className={classes.item}>
+            <ServiceStatusCounter />
+          </div>
+          <div className={classes.item}>
+            <HostStatusCounter />
+          </div>
+          <div className={classes.item}>
+            <FederatedComponent path="/bam/header/topCounter" />
+          </div>
         </div>
         <div className={classes.userMenuContainer}>
           <UserMenu headerRef={headerRef} />

diff --git a/www/front_src/src/Header/userMenu/index.tsx b/www/front_src/src/Header/userMenu/index.tsx
@@ -150,9 +150,6 @@ const useStyles = makeStyles((theme) => ({
       borderLeft: 'none',
     },
   },
-  loaderUserMenu: {
-    marginRight: theme.spacing(22 / 8),
-  },
   menu: {
     backgroundColor: equals(theme.palette.mode, ThemeMode.dark)
       ? theme.palette.background.default
@@ -200,14 +197,14 @@ const useStyles = makeStyles((theme) => ({
   wrapRightUserItems: {
     display: 'flex',
     gap: theme.spacing(4),
-    justifyContent: 'space-between',
-    width: '100%',
+    justifyContent: 'flex-end',
     [theme.breakpoints.down(1200)]: {
       gap: theme.spacing(2.5),
     },
     [theme.breakpoints.down(900)]: {
       gap: theme.spacing(1.5),
     },
+    width: '100%',
   },
 }));
 interface Props {
@@ -361,7 +358,7 @@ const UserMenu = ({ headerRef }: Props): JSX.Element => {
   }, []);
 
   if (!data) {
-    return <MenuSkeleton className={classes.loaderUserMenu} width={14} />;
+    return <MenuSkeleton width={24} />;
   }
 
   const allowEditProfile = allowedPages?.includes(editProfileTopologyPage);

diff --git a/www/front_src/src/federatedModules/Load/index.tsx b/www/front_src/src/federatedModules/Load/index.tsx
@@ -91,9 +91,7 @@ const LoadComponent = ({
 
   return (
     <Suspense
-      fallback={
-        isFederatedModule ? <MenuSkeleton width={27} /> : <PageSkeleton />
-      }
+      fallback={isFederatedModule ? <MenuSkeleton /> : <PageSkeleton />}
     >
       <Component {...props} />
     </Suspense>
@@ -124,7 +122,7 @@ export const Remote = ({
   });
 
   if (!ready) {
-    return isFederatedModule ? <MenuSkeleton width={27} /> : <PageSkeleton />;
+    return isFederatedModule ? <MenuSkeleton /> : <PageSkeleton />;
   }
 
   if (failed) {