Add Info Cards on Empty Screens (#1164)

* Add Info Cards on Empty Screens Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> * Fix ICon Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
minio · Oct 29, 2021 · c9352f1 · c9352f1
1 parent 7a5cc66
commit c9352f1
Show file tree

Hide file tree

Showing 12 changed files with 534 additions and 240 deletions.
diff --git a/k8s/operator-console/operator/kustomization.yaml b/k8s/operator-console/operator/kustomization.yaml
diff --git a/portal-ui/src/common/HelpBox.tsx b/portal-ui/src/common/HelpBox.tsx
@@ -25,38 +25,47 @@ const styles = (theme: Theme) =>
     root: {
       border: "1px solid rgb(234, 237, 238)",
       borderRadius: 5,
+      paddingTop: 10,
+      paddingLeft: 40,
+      paddingRight: 40,
+      paddingBottom: 40,
       marginTop: 10,
       marginBottom: 10,
       backgroundColor: "#fbfafa",
     },
     icon: {
-      textAlign: "center",
-      padding: 30,
-      fontSize: 64,
+      fontSize: 16,
+      fontWeight: "bold",
+      marginBottom: 20,
       "& .MuiSvgIcon-root": {
-        fontSize: 64,
+        fontSize: 44,
+        marginRight: 15,
       },
     },
     iconSize: {
       fontSize: 64,
     },
-    helpText: { padding: 30, paddingLeft: 0, fontSize: 16 },
+    helpText: {
+      fontSize: 16,
+    },
   });
 
 interface IHelpBox {
   classes: any;
   iconComponent: any;
+  title: string;
   help: any;
 }
 
-const HelpBox = ({ classes, iconComponent, help }: IHelpBox) => {
+const HelpBox = ({ classes, iconComponent, title, help }: IHelpBox) => {
   return (
     <div className={classes.root}>
       <Grid container>
-        <Grid xs={2} className={classes.icon}>
+        <Grid xs={12} className={classes.icon}>
           {iconComponent}
+          {title}
         </Grid>
-        <Grid xs={10} className={classes.helpText}>
+        <Grid xs={12} className={classes.helpText}>
           {help}
         </Grid>
       </Grid>

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
@@ -170,6 +170,7 @@ const BucketEventsPanel = ({
         </Grid>
         <Grid item xs={12}>
           <HelpBox
+            title={"Lambda Notifications"}
             iconComponent={<LambdaIcon />}
             help={
               <Fragment>

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
@@ -210,6 +210,7 @@ const BucketLifecyclePanel = ({
         </Grid>
         <Grid item xs={12}>
           <HelpBox
+            title={"Lifecycle Rules"}
             iconComponent={<TiersIcon />}
             help={
               <Fragment>

diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
@@ -246,6 +246,7 @@ const BucketReplicationPanel = ({
         </Grid>
         <Grid item xs={12}>
           <HelpBox
+            title={"Replication"}
             iconComponent={<BucketsIcon />}
             help={
               <Fragment>

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -25,7 +25,12 @@ import TextField from "@mui/material/TextField";
 import InputAdornment from "@mui/material/InputAdornment";
 import FileCopyIcon from "@mui/icons-material/FileCopy";
 import { Bucket, BucketList, HasPermissionResponse } from "../types";
-import { AddIcon, WatchIcon } from "../../../../icons";
+import {
+  AddIcon,
+  BucketsIcon,
+  TenantsIcon,
+  WatchIcon,
+} from "../../../../icons";
 import { AppState } from "../../../../store";
 import { addBucketOpen, addBucketReset } from "../actions";
 import { setErrorSnackMessage } from "../../../../actions";
@@ -38,6 +43,7 @@ import PageHeader from "../../Common/PageHeader/PageHeader";
 import BucketListItem from "./BucketListItem";
 import BulkReplicationModal from "./BulkReplicationModal";
 import SearchIcon from "../../../../icons/SearchIcon";
+import HelpBox from "../../../../common/HelpBox";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -121,6 +127,10 @@ const styles = (theme: Theme) =>
     constrainedContainer: {
       maxWidth: 1180,
     },
+    link: {
+      textDecoration: "underline",
+      color: theme.palette.info.main,
+    },
   });
 
 interface IListBucketsProps {
@@ -316,7 +326,7 @@ const ListBuckets = ({
                   className={classes.theaderSearch}
                   variant={"outlined"}
                   id="search-resource"
-                  placeholder={"Search Buckets"}
+                  placeholder={"Filter Buckets"}
                   onChange={(val) => {
                     setFilterBuckets(val.target.value);
                   }}
@@ -411,6 +421,39 @@ const ListBuckets = ({
                 />
               );
             })}
+            {filteredRecords.length == 0 && (
+              <Grid
+                container
+                justifyContent={"center"}
+                alignContent={"center"}
+                alignItems={"center"}
+              >
+                <Grid item xs={8}>
+                  <HelpBox
+                    iconComponent={<BucketsIcon />}
+                    title={"Buckets"}
+                    help={
+                      <Fragment>
+                        MinIO uses buckets to organize objects. A bucket is
+                        similar to a folder or directory in a filesystem, where
+                        each bucket can hold an arbitrary number of objects.
+                        <br />
+                        <br />
+                        To get started,&nbsp;
+                        <a
+                          className={classes.link}
+                          onClick={() => {
+                            addBucketOpen(true);
+                          }}
+                        >
+                          Create a Bucket.
+                        </a>
+                      </Fragment>
+                    }
+                  />
+                </Grid>
+              </Grid>
+            )}
           </Grid>
         </Grid>
       </Grid>

diff --git a/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx b/portal-ui/src/screens/Console/Common/PageHeader/PageHeader.tsx
@@ -70,7 +70,7 @@ const PageHeader = ({
           &nbsp;
         </Grid>
       </Box>
-      <Grid item xs={12} sm={12} md={6} className={classes.label}>
+      <Grid item xs={12} sm={12} md={3} className={classes.label}>
         {!sidebarOpen && (
           <div className={classes.logo}>
             {operatorMode ? <OperatorLogo /> : <ConsoleLogo />}
@@ -81,7 +81,7 @@ const PageHeader = ({
         </Typography>
       </Grid>
       {actions && (
-        <Grid item xs={12} sm={12} md={6} className={classes.rightMenu}>
+        <Grid item xs={12} sm={12} md={9} className={classes.rightMenu}>
           {actions}
         </Grid>
       )}