Merge pull request #1913 from GluuFederation/admin-ui-issues-1863

feat(admin-ui): display status of Auth Server, Config API, FIDO, Casa, Keycloak, SCIM on Dashboard.
GluuFederation · Dec 5, 2024 · f9ae9f0 · f9ae9f0
2 parents 71be844 + 9fdd050
commit f9ae9f0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 27 deletions.
diff --git a/admin-ui/app/routes/Dashboards/DashboardPage.js b/admin-ui/app/routes/Dashboards/DashboardPage.js
@@ -295,13 +295,8 @@ function DashboardPage() {
         canShow={hasBoth(permissions, STAT_READ, STAT_JANS_READ)}
       >
         <div className={classes.root}>
-          <Grid
-            spacing={{ sm: "20px", md: "40px" }}
-            container
-            className="px-40"
-            style={{ height: "500px" }}
-          >
-            <Grid item lg={breakDashboardCard ? 6 : 4} md={4} height="auto">
+          <Grid container className="px-40" spacing={2}>
+            <Grid item lg={3} md={12} xs={12} height="auto">
               <div
                 className={classes.userInfoTitle}
                 style={{
@@ -336,33 +331,23 @@ function DashboardPage() {
               </div>
             </Grid>
 
-            <Grid
-              item
-              lg={breakDashboardCard ? 6 : 4}
-              md={4}
-              xs={4}
-              style={{ width: "100%", padding: "40px 0 0 0" }}
-            >
+            <Grid item lg={5} md={12} xs={12} height={{ lg: "55vh", xs: "65vh", ms:"65vh", sm:"65vh" }}>
               {StatusCard}
             </Grid>
 
             <Grid
               item
-              lg={breakDashboardCard ? 6 : 4}
-              md={4}
-              xs={4}
-              style={{ width: "100%", padding: "40px 0 0 0" }}
+              lg={4}
+              md={12}
+              xs={12}
+
             >
               <Paper
                 className={`${classes.dashboardCard} top-minus-40 d-flex justify-content-center`}
                 elevation={0}
                 spacing={2}
               >
-                <Grid
-                  className={classes.flex}
-                  container
-                  style={{ maxWidth: "450px" }}
-                >
+                <Grid className={classes.flex} container>
                   <Grid item xs={12} className={isMobile ? "mt-20" : ""}>
                     <div className={classes.userInfo}>
                       <div
@@ -381,7 +366,6 @@ function DashboardPage() {
                         style={{
                           backgroundColor: "white",
                           padding: "20px",
-                          height: "320px",
                           borderRadius: "5px",
                         }}
                       >

diff --git a/admin-ui/app/routes/Dashboards/styles.js b/admin-ui/app/routes/Dashboards/styles.js
@@ -4,6 +4,8 @@ const styles = makeStyles()({
   root: {
     color: "#FFFFFF",
     maxWidth: "100vw",
+    height: "100vh",
+    overflow:"auto"
   },
   flex: {
     flexGrow: 1,
@@ -13,8 +15,8 @@ const styles = makeStyles()({
     display: "block",
   },
   summary: {
-    height: "74px",
-    width: "70%",
+    height: "auto",
+    width: "100%",
     display: "flex",
     justifyContent: "space-between",
     border: "3px solid #FFF",
@@ -106,7 +108,6 @@ const styles = makeStyles()({
     borderRadius: 24,
     height: "auto",
     color: "#303641",
-    minWidth: 350,
   },
   userInfoTitle: {
     fontWeight: "bold",